/* =============================================================================
   HELIX DESIGN SYSTEM  —  COMPONENTS
   -----------------------------------------------------------------------------
   Restyles the stock Bootstrap / Odoo component vocabulary that this product
   already uses, so every existing page inherits the new design language
   without changing a single class name in the markup.

   Load order: after design-system.css (tokens), before design-app.css.
   ========================================================================== */

/* =============================================================================
   05  BUTTONS
   -----------------------------------------------------------------------------
   One geometry for every button in the product. Weight communicates priority:
   solid primary for the single main action, tinted for secondary, ghost for
   tertiary. Every button gets a press state, not only a hover state.
   ========================================================================== */

.btn {
    --hx-btn-bg: transparent;
    --hx-btn-fg: var(--hx-ink-2);
    --hx-btn-bd: transparent;
    --hx-btn-bg-hover: var(--hx-surface-3);
    --hx-btn-shadow: none;

    font-family: var(--hx-font-body);
    font-size: var(--hx-t-base);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    padding: 0.55rem 1.05rem;
    border-radius: var(--hx-r-sm);
    border: 1px solid var(--hx-btn-bd);
    background-color: var(--hx-btn-bg);
    color: var(--hx-btn-fg);
    box-shadow: var(--hx-btn-shadow);
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    transition: background-color var(--hx-dur-fast) var(--hx-ease),
                border-color var(--hx-dur-fast) var(--hx-ease),
                color var(--hx-dur-fast) var(--hx-ease),
                box-shadow var(--hx-dur-fast) var(--hx-ease),
                transform var(--hx-dur-fast) var(--hx-ease);
}

.btn:hover {
    background-color: var(--hx-btn-bg-hover);
    color: var(--hx-btn-fg);
}

/* Press feedback: a real, tiny displacement reads as physical. */
.btn:active:not(:disabled):not(.disabled) {
    transform: translateY(1px) scale(0.994);
    transition-duration: var(--hx-dur-instant);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-sm {
    font-size: var(--hx-t-sm);
    padding: 0.36rem 0.75rem;
    min-height: 2.05rem;
    border-radius: var(--hx-r-xs);
    gap: 0.35rem;
}

.btn-lg {
    font-size: var(--hx-t-md);
    padding: 0.75rem 1.5rem;
    min-height: 3rem;
    border-radius: var(--hx-r-md);
}

/* --- Solid --------------------------------------------------------------- */

.btn-primary {
    --hx-btn-bg: var(--hx-primary-solid);
    --hx-btn-fg: var(--hx-on-primary);
    --hx-btn-bd: var(--hx-primary-solid);
    --hx-btn-bg-hover: var(--hx-primary-solid-hover);
    --hx-btn-shadow: 0 1px 2px rgba(11, 31, 28, 0.10), 0 4px 14px var(--hx-primary-ring);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--hx-primary-solid-hover);
    border-color: var(--hx-primary-solid-hover);
    color: var(--hx-on-primary);
    box-shadow: 0 2px 4px rgba(11, 31, 28, 0.10), 0 8px 22px var(--hx-primary-ring);
}

.btn-success {
    --hx-btn-bg: var(--hx-success);
    --hx-btn-fg: #FFFFFF;
    --hx-btn-bd: var(--hx-success);
    --hx-btn-bg-hover: color-mix(in srgb, var(--hx-success) 84%, #000);
    --hx-btn-shadow: 0 1px 2px rgba(11, 31, 28, 0.10), 0 4px 14px var(--hx-success-ring);
}

.btn-danger {
    --hx-btn-bg: var(--hx-danger);
    --hx-btn-fg: #FFFFFF;
    --hx-btn-bd: var(--hx-danger);
    --hx-btn-bg-hover: color-mix(in srgb, var(--hx-danger) 84%, #000);
    --hx-btn-shadow: 0 1px 2px rgba(11, 31, 28, 0.10), 0 4px 14px var(--hx-danger-ring);
}

.btn-warning {
    --hx-btn-bg: var(--hx-warn);
    --hx-btn-fg: #FFFFFF;
    --hx-btn-bd: var(--hx-warn);
    --hx-btn-bg-hover: color-mix(in srgb, var(--hx-warn) 84%, #000);
    --hx-btn-shadow: 0 1px 2px rgba(11, 31, 28, 0.10), 0 4px 14px var(--hx-warn-ring);
}

.btn-info {
    --hx-btn-bg: var(--hx-info);
    --hx-btn-fg: #FFFFFF;
    --hx-btn-bd: var(--hx-info);
    --hx-btn-bg-hover: color-mix(in srgb, var(--hx-info) 84%, #000);
}

.btn-success:hover, .btn-danger:hover,
.btn-warning:hover, .btn-info:hover,
.btn-success:focus, .btn-danger:focus,
.btn-warning:focus, .btn-info:focus,
.btn-success:active, .btn-danger:active,
.btn-warning:active, .btn-info:active {
    background-color: var(--hx-btn-bg-hover);
    border-color: var(--hx-btn-bg-hover);
    color: var(--hx-btn-fg);
    filter: none;
}

[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .btn-info {
    --hx-btn-fg: #08110F;
    /* Hover must stay a bright fill. Mixing toward black made dark ink unreadable. */
    --hx-btn-bg-hover: color-mix(in srgb, var(--hx-btn-bg) 78%, #fff);
}

[data-theme="dark"] .btn-success:hover,
[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .btn-warning:hover,
[data-theme="dark"] .btn-info:hover,
[data-theme="dark"] .btn-success:focus,
[data-theme="dark"] .btn-danger:focus,
[data-theme="dark"] .btn-warning:focus,
[data-theme="dark"] .btn-info:focus,
[data-theme="dark"] .btn-success:active,
[data-theme="dark"] .btn-danger:active,
[data-theme="dark"] .btn-warning:active,
[data-theme="dark"] .btn-info:active {
    color: #08110F;
    background-color: var(--hx-btn-bg-hover);
    border-color: var(--hx-btn-bg-hover);
    filter: none;
}

/* Neutral solid — the "Cancel" weight that sits beside a primary action. */
.btn-secondary,
.btn-dark {
    --hx-btn-bg: var(--hx-surface-3);
    --hx-btn-fg: var(--hx-ink);
    --hx-btn-bd: var(--hx-line);
    --hx-btn-bg-hover: var(--hx-surface-sunken);
}

.btn-secondary:hover,
.btn-dark:hover {
    color: var(--hx-ink);
    border-color: var(--hx-line-strong);
}

.btn-light {
    --hx-btn-bg: var(--hx-surface);
    --hx-btn-fg: var(--hx-ink);
    --hx-btn-bd: var(--hx-line);
    --hx-btn-bg-hover: var(--hx-surface-2);
}

/* --- Outline / tinted -----------------------------------------------------
   Rendered as soft tinted fills rather than hairline outlines: they hold
   their shape against busy tables and read far better on dark ground. */

.btn-outline-primary {
    --hx-btn-bg: var(--hx-primary-soft);
    --hx-btn-fg: var(--hx-primary-strong);
    --hx-btn-bd: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--hx-primary-solid);
    border-color: var(--hx-primary-solid);
    color: var(--hx-on-primary);
}

.btn-outline-secondary {
    --hx-btn-bg: transparent;
    --hx-btn-fg: var(--hx-ink-2);
    --hx-btn-bd: var(--hx-line-strong);
    --hx-btn-bg-hover: var(--hx-surface-3);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--hx-surface-3);
    border-color: var(--hx-line-strong);
    color: var(--hx-ink);
}

.btn-outline-danger {
    --hx-btn-bg: var(--hx-danger-soft);
    --hx-btn-fg: var(--hx-danger);
    --hx-btn-bd: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--hx-danger);
    border-color: var(--hx-danger);
    color: #FFFFFF;
}

.btn-outline-success {
    --hx-btn-bg: var(--hx-success-soft);
    --hx-btn-fg: var(--hx-success);
    --hx-btn-bd: transparent;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--hx-success);
    border-color: var(--hx-success);
    color: #FFFFFF;
}

.btn-outline-warning {
    --hx-btn-bg: var(--hx-warn-soft);
    --hx-btn-fg: var(--hx-warn);
    --hx-btn-bd: transparent;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: var(--hx-warn);
    border-color: var(--hx-warn);
    color: #FFFFFF;
}

.btn-outline-info {
    --hx-btn-bg: var(--hx-info-soft);
    --hx-btn-fg: var(--hx-info);
    --hx-btn-bd: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: var(--hx-info);
    border-color: var(--hx-info);
    color: #FFFFFF;
}

[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-outline-success:hover,
[data-theme="dark"] .btn-outline-warning:hover,
[data-theme="dark"] .btn-outline-info:hover,
[data-theme="dark"] .btn-outline-danger:focus,
[data-theme="dark"] .btn-outline-success:focus,
[data-theme="dark"] .btn-outline-warning:focus,
[data-theme="dark"] .btn-outline-info:focus,
[data-theme="dark"] .btn-outline-danger:active,
[data-theme="dark"] .btn-outline-success:active,
[data-theme="dark"] .btn-outline-warning:active,
[data-theme="dark"] .btn-outline-info:active {
    color: #08110F;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-check:checked + .btn-primary {
    color: var(--hx-on-primary);
    background-color: var(--hx-primary-solid-hover);
    border-color: var(--hx-primary-solid-hover);
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus,
[data-theme="dark"] .btn-outline-primary:active {
    color: var(--hx-on-primary);
    background-color: var(--hx-primary-solid);
    border-color: var(--hx-primary-solid);
}

[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-outline-light {
    --hx-btn-bg: var(--hx-surface-3);
    --hx-btn-fg: var(--hx-ink);
    --hx-btn-bd: var(--hx-line-strong);
    --hx-btn-bg-hover: var(--hx-surface-2);
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-light:focus,
[data-theme="dark"] .btn-outline-light:hover,
[data-theme="dark"] .btn-outline-light:focus {
    color: var(--hx-ink);
    background-color: var(--hx-surface-2);
    border-color: var(--hx-line-strong);
}

[data-theme="dark"] .btn-link:hover,
[data-theme="dark"] .btn-link:focus {
    color: var(--hx-primary-strong);
}

.btn-outline-light {
    --hx-btn-bg: transparent;
    --hx-btn-fg: #FFFFFF;
    --hx-btn-bd: rgba(255, 255, 255, 0.45);
    --hx-btn-bg-hover: rgba(255, 255, 255, 0.14);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.75);
}

/* --- Link / ghost --------------------------------------------------------- */

.btn-link {
    --hx-btn-bg: transparent;
    --hx-btn-fg: var(--bs-link-color);
    --hx-btn-bd: transparent;
    --hx-btn-bg-hover: var(--hx-primary-softer);
    text-decoration: none;
    box-shadow: none;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--bs-link-hover-color);
    text-decoration: none;
}

/* Close button — a real, tappable target with a visible hover surface. */
.btn-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--hx-r-xs);
    opacity: 0.55;
    background-size: 0.7rem;
    transition: opacity var(--hx-dur-fast) var(--hx-ease),
                background-color var(--hx-dur-fast) var(--hx-ease);
}

.btn-close:hover {
    opacity: 1;
    background-color: var(--hx-surface-3);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

/* Icon-only affordance: keeps square buttons square and tappable. */
.hx-icon-btn {
    width: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
}

.btn-group > .btn {
    box-shadow: none;
}

/* =============================================================================
   06  FORMS AND CONTROLS
   ========================================================================== */

.form-label {
    font-size: var(--hx-t-sm);
    font-weight: 600;
    color: var(--hx-ink-2);
    margin-bottom: 0.4rem;
    letter-spacing: -0.003em;
}

.form-control,
.form-select {
    font-family: var(--hx-font-body);
    font-size: var(--hx-t-base);
    color: var(--hx-ink);
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line-strong);
    border-radius: var(--hx-r-sm);
    padding: 0.55rem 0.8rem;
    min-height: 2.5rem;
    box-shadow: var(--hx-shadow-xs);
    transition: border-color var(--hx-dur-fast) var(--hx-ease),
                box-shadow var(--hx-dur-fast) var(--hx-ease),
                background-color var(--hx-dur-fast) var(--hx-ease);
}

.form-control::placeholder {
    color: var(--hx-muted-2);
    opacity: 1;
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
    border-color: var(--hx-muted-2);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--hx-surface);
    color: var(--hx-ink);
    border-color: var(--hx-primary);
    box-shadow: 0 0 0 3px var(--hx-primary-ring);
    outline: none;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--hx-surface-3);
    color: var(--hx-muted);
    opacity: 1;
    cursor: not-allowed;
}

.form-control-sm,
.form-select-sm {
    font-size: var(--hx-t-sm);
    padding: 0.35rem 0.6rem;
    min-height: 2.05rem;
    border-radius: var(--hx-r-xs);
}

.form-control-lg,
.form-select-lg {
    font-size: var(--hx-t-md);
    padding: 0.7rem 1rem;
    min-height: 3rem;
    border-radius: var(--hx-r-md);
}

textarea.form-control {
    min-height: 6rem;
    line-height: 1.55;
    resize: vertical;
}

.form-text {
    font-size: var(--hx-t-xs);
    color: var(--hx-muted);
    margin-top: 0.35rem;
}

/* Validation — the message sits with the field, never only at the top. */
.invalid-feedback {
    font-size: var(--hx-t-xs);
    font-weight: 500;
    color: var(--hx-danger);
    margin-top: 0.35rem;
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--hx-danger);
    box-shadow: 0 0 0 3px var(--hx-danger-ring);
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--hx-success);
}

.valid-feedback {
    font-size: var(--hx-t-xs);
    color: var(--hx-success);
}

/* Check / radio / switch */
.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.22rem;
    background-color: var(--hx-surface);
    border: 1.5px solid var(--hx-line-strong);
    cursor: pointer;
    transition: background-color var(--hx-dur-fast) var(--hx-ease),
                border-color var(--hx-dur-fast) var(--hx-ease),
                box-shadow var(--hx-dur-fast) var(--hx-ease);
}

.form-check-input:checked {
    background-color: var(--hx-primary);
    border-color: var(--hx-primary);
}

.form-check-input:focus {
    border-color: var(--hx-primary);
    box-shadow: 0 0 0 3px var(--hx-primary-ring);
}

.form-check-label {
    cursor: pointer;
    color: var(--hx-ink-2);
    padding-left: 0.15rem;
}

.form-switch .form-check-input {
    width: 2.15rem;
    border-radius: var(--hx-r-pill);
}

/* Range slider */
.form-range::-webkit-slider-thumb { background: var(--hx-primary); }
.form-range::-moz-range-thumb     { background: var(--hx-primary); }

/* Input groups keep one continuous shape. */
.input-group > .form-control,
.input-group > .form-select {
    box-shadow: none;
}

.input-group-text {
    background-color: var(--hx-surface-3);
    border: 1px solid var(--hx-line-strong);
    color: var(--hx-muted);
    font-size: var(--hx-t-sm);
    border-radius: var(--hx-r-sm);
}

.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select {
    border-color: var(--hx-primary);
    z-index: 3;
}

/* File input */
.form-control[type="file"] {
    padding: 0.4rem 0.6rem;
}

.form-control::file-selector-button {
    -webkit-appearance: none;
    appearance: none;
    background: var(--hx-surface-3);
    border: 0;
    border-radius: var(--hx-r-xs);
    color: var(--hx-ink-2);
    font-family: var(--hx-font-body);
    font-size: var(--hx-t-sm);
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    margin-right: 0.75rem;
    cursor: pointer;
    transition: background-color var(--hx-dur-fast) var(--hx-ease),
                color var(--hx-dur-fast) var(--hx-ease);
}

.form-control::file-selector-button:hover {
    background: var(--hx-primary-soft);
    color: var(--hx-primary-strong);
}

/* iPhone Safari keeps its native light-grey button (so dark mode showed light
   text on light grey) unless appearance is reset. Kept as its own rule: an
   unsupported pseudo-element would invalidate a combined selector list. */
.form-control::-webkit-file-upload-button {
    -webkit-appearance: none;
    appearance: none;
    background: var(--hx-surface-3);
    border: 0;
    border-radius: var(--hx-r-xs);
    color: var(--hx-ink-2);
    font-family: var(--hx-font-body);
    font-size: var(--hx-t-sm);
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    margin-right: 0.75rem;
    cursor: pointer;
}

/* Legacy Odoo website-form fields inherit the same control shape. */
.s_website_form_input,
.s_website_form_field input,
.s_website_form_field textarea,
.s_website_form_field select {
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line-strong);
    border-radius: var(--hx-r-sm);
    color: var(--hx-ink);
}

.s_website_form_label,
.s_website_form_label_content {
    color: var(--hx-ink-2);
    font-weight: 600;
    font-size: var(--hx-t-sm);
}

/* =============================================================================
   07  CARDS, PANELS AND SURFACES
   -----------------------------------------------------------------------------
   One surface recipe: token background, hairline border, restrained shadow.
   Hover lift is reserved for surfaces that are actually clickable.
   ========================================================================== */

.card,
.sd-panel,
.cp-panel,
.dashboard-card,
.profile-card,
.staff-hw-panel,
.staff-qg-panel,
.staff-enr-pane-card,
.staff-pay-pane-card,
.aa-panel,
.qb-card,
.inbox-question-card,
.inbox-reply-card,
.pay-card,
.audit-table-wrap {
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-r-lg);
    box-shadow: var(--hx-shadow-sm);
    color: var(--hx-ink-2);
    transition: box-shadow var(--hx-dur) var(--hx-ease),
                border-color var(--hx-dur) var(--hx-ease),
                transform var(--hx-dur) var(--hx-ease),
                background-color var(--hx-dur) var(--hx-ease);
}

.card-header,
.sd-panel__header,
.cp-panel__header,
.dashboard-card-header {
    background-color: var(--hx-surface-2);
    border-bottom: 1px solid var(--hx-line);
    color: var(--hx-ink);
    font-family: var(--hx-font-display);
    font-weight: 600;
    font-size: var(--hx-t-md);
    letter-spacing: -0.01em;
    padding: 0.85rem 1.15rem;
}

.card-header:first-child {
    border-radius: calc(var(--hx-r-lg) - 1px) calc(var(--hx-r-lg) - 1px) 0 0;
}

/* The legacy bundle paints the body of every card a translucent white
   (`:where(.card) .card-body { background-color: rgba(255,255,255,.9) }`).
   Because :where() contributes no specificity that rule lands at (0,1,0) and
   would otherwise strand light text on a white ground in dark mode. A card
   body should never paint its own ground — the card surface shows through. */
.card-body {
    padding: 1.15rem;
    color: var(--hx-ink-2);
    background-color: transparent;
    --background-color: transparent;
    --color: var(--hx-ink-2);
}

.card-footer {
    background-color: var(--hx-surface-2);
    border-top: 1px solid var(--hx-line);
    color: var(--hx-muted);
    padding: 0.85rem 1.15rem;
}

.card-title {
    font-family: var(--hx-font-display);
    color: var(--hx-ink);
    font-weight: 700;
}

.card-text {
    color: var(--hx-ink-2);
}

/* Interactive surfaces only: a clear, cheap lift plus a warmer border. */
a.card,
.card-hoverable,
.hx-interactive,
.course-card,
.staff-tool-card,
.learning-option-card,
.practice-mode-card,
.search-result-item {
    cursor: pointer;
    will-change: transform;
}

a.card:hover,
.card-hoverable:hover,
.hx-interactive:hover,
.course-card:hover,
.staff-tool-card:hover,
.learning-option-card:hover,
.practice-mode-card:hover {
    transform: translateY(-3px);
    border-color: var(--hx-primary-ring);
    box-shadow: var(--hx-shadow-lg);
}

/* Background utilities re-pointed at surface tokens so existing markup
   (.bg-white, .bg-light) stops fighting the dark theme. */
.bg-white  { background-color: var(--hx-surface) !important; }
.bg-light   { background-color: var(--hx-surface-2) !important; }
.bg-body    { background-color: var(--hx-bg) !important; }

/* Used as a full-bleed section ground with .text-white, so it resolves to a
   dark teal in both themes (see --hx-primary-section). */
.bg-primary { background-color: var(--hx-primary-section) !important; color: #FFFFFF !important; }
.bg-success { background-color: var(--hx-success) !important; }
.bg-danger  { background-color: var(--hx-danger) !important; }
.bg-warning { background-color: var(--hx-warn) !important; }
.bg-info    { background-color: var(--hx-info) !important; }
.bg-secondary { background-color: var(--hx-muted) !important; }

.bg-primary-subtle { background-color: var(--hx-primary-soft) !important; }
.bg-success-subtle { background-color: var(--hx-success-soft) !important; }
.bg-danger-subtle  { background-color: var(--hx-danger-soft) !important; }
.bg-warning-subtle { background-color: var(--hx-warn-soft) !important; }
.bg-info-subtle    { background-color: var(--hx-info-soft) !important; }

.border        { border-color: var(--hx-line) !important; }
.border-top    { border-top-color: var(--hx-line) !important; }
.border-bottom { border-bottom-color: var(--hx-line) !important; }
.border-start  { border-left-color: var(--hx-line) !important; }
.border-end    { border-right-color: var(--hx-line) !important; }
.border-primary { border-color: var(--hx-primary) !important; }

.shadow-sm { box-shadow: var(--hx-shadow-sm) !important; }
.shadow    { box-shadow: var(--hx-shadow-md) !important; }
.shadow-lg { box-shadow: var(--hx-shadow-lg) !important; }

.rounded    { border-radius: var(--hx-r-md) !important; }
.rounded-3  { border-radius: var(--hx-r-md) !important; }
.rounded-4  { border-radius: var(--hx-r-lg) !important; }
.rounded-pill { border-radius: var(--hx-r-pill) !important; }

/* =============================================================================
   08  TABLES
   -----------------------------------------------------------------------------
   Data-dense but calm: no vertical rules, a quiet sticky-feeling header, and
   row hover that tracks the pointer without shouting.
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hx-ink-2);
    --bs-table-border-color: var(--hx-line);
    --bs-table-striped-bg: var(--hx-surface-2);
    --bs-table-striped-color: var(--hx-ink-2);
    --bs-table-hover-bg: var(--hx-primary-softer);
    --bs-table-hover-color: var(--hx-ink);
    --bs-table-active-bg: var(--hx-primary-soft);

    color: var(--hx-ink-2);
    font-size: var(--hx-t-base);
    margin-bottom: 0;
    border-color: var(--hx-line);
}

.table > thead {
    border-bottom: 1px solid var(--hx-line-strong);
}

.table > thead th,
.table thead th {
    background-color: var(--hx-surface-2);
    color: var(--hx-muted);
    font-family: var(--hx-font-body);
    font-size: var(--hx-t-xs);
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    padding: 0.7rem 0.85rem;
    border-bottom: 0;
    white-space: nowrap;
    vertical-align: middle;
}

.table > tbody > tr {
    transition: background-color var(--hx-dur-fast) var(--hx-ease);
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--hx-line-faint);
    vertical-align: middle;
    background-color: transparent;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--hx-primary-softer);
    color: var(--hx-ink);
}

.table-sm > :not(caption) > * > * {
    padding: 0.45rem 0.65rem;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--hx-surface-2);
    color: var(--hx-ink-2);
}

/* Contextual rows keep their meaning but stop looking like Bootstrap demos. */
.table-success > *, .table-success td, tr.table-success > * {
    background-color: var(--hx-success-soft) !important;
    color: var(--hx-ink-2) !important;
}

.table-danger > *, .table-danger td, tr.table-danger > * {
    background-color: var(--hx-danger-soft) !important;
    color: var(--hx-ink-2) !important;
}

.table-warning > *, .table-warning td, tr.table-warning > * {
    background-color: var(--hx-warn-soft) !important;
    color: var(--hx-ink-2) !important;
}

.table-active > * {
    background-color: var(--hx-primary-soft) !important;
}

.table-light > *, .table-light th {
    background-color: var(--hx-surface-2) !important;
    color: var(--hx-muted) !important;
}

/* The horizontal scroll container gets an affordance: a soft edge fade so a
   cut-off table reads as scrollable rather than broken. */
.table-responsive,
.ui-table-wrap,
.audit-table-wrap {
    border-radius: var(--hx-r-md);
    background-color: transparent;
    scrollbar-width: thin;
}

.table-responsive:not(:last-child),
.ui-table-wrap:not(:last-child) {
    margin-bottom: var(--hx-s-3);
}

/* =============================================================================
   09  BADGES, CHIPS AND PILLS
   -----------------------------------------------------------------------------
   Status is carried by a tinted chip, not a saturated block: readable at
   small sizes and legible in both themes.
   ========================================================================== */

.badge {
    font-family: var(--hx-font-body);
    font-size: var(--hx-t-xs);
    font-weight: 700;
    letter-spacing: 0.012em;
    padding: 0.34em 0.62em;
    border-radius: var(--hx-r-xs);
    line-height: 1.35;
    vertical-align: baseline;
}

.badge.rounded-pill {
    padding: 0.34em 0.7em;
}

.badge.bg-primary {
    background-color: var(--hx-primary-soft) !important;
    color: var(--hx-primary-strong) !important;
}

.badge.bg-success {
    background-color: var(--hx-success-soft) !important;
    color: var(--hx-success) !important;
}

.badge.bg-danger {
    background-color: var(--hx-danger-soft) !important;
    color: var(--hx-danger) !important;
}

.badge.bg-warning {
    background-color: var(--hx-warn-soft) !important;
    color: var(--hx-warn) !important;
}

.badge.bg-info {
    background-color: var(--hx-info-soft) !important;
    color: var(--hx-info) !important;
}

/* Neutral badge text uses ink rather than muted: muted on the surface-3
   tint is 4.37:1, just under AA at badge size. */
.badge.bg-secondary {
    background-color: var(--hx-surface-3) !important;
    color: var(--hx-ink-2) !important;
}

.badge.bg-light {
    background-color: var(--hx-surface-3) !important;
    color: var(--hx-ink-2) !important;
}

.badge.bg-dark {
    background-color: var(--hx-surface-inverse) !important;
    color: var(--hx-on-inverse) !important;
}

/* Notification counters stay high-contrast — they must be seen, not read. */
.pending-receipts-badge,
.inbox-unread-badge,
.notifications-unread-badge,
.staff-nav-badge {
    background-color: var(--hx-danger) !important;
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--hx-surface);
}

/* Grade badges keep their semantics, gain a consistent shape. */
.grade-badge {
    font-family: var(--hx-font-display);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    border-radius: var(--hx-r-xs);
}

/* =============================================================================
   10  ALERTS
   -----------------------------------------------------------------------------
   A tinted surface with a colour rail on the leading edge: scannable in a
   long form, and it survives dark mode without turning muddy.
   ========================================================================== */

.alert {
    border: 1px solid var(--hx-line);
    border-left: 3px solid var(--hx-muted);
    border-radius: var(--hx-r-md);
    padding: 0.85rem 1rem;
    font-size: var(--hx-t-base);
    color: var(--hx-ink-2);
    background-color: var(--hx-surface-2);
    box-shadow: var(--hx-shadow-xs);
}

.alert-heading {
    font-family: var(--hx-font-display);
    color: var(--hx-ink);
    font-weight: 700;
}

.alert-primary {
    background-color: var(--hx-primary-soft);
    border-color: var(--hx-primary-ring);
    border-left-color: var(--hx-primary);
    color: var(--hx-ink-2);
}

.alert-success {
    background-color: var(--hx-success-soft);
    border-color: var(--hx-success-ring);
    border-left-color: var(--hx-success);
    color: var(--hx-ink-2);
}

.alert-danger {
    background-color: var(--hx-danger-soft);
    border-color: var(--hx-danger-ring);
    border-left-color: var(--hx-danger);
    color: var(--hx-ink-2);
}

.alert-warning {
    background-color: var(--hx-warn-soft);
    border-color: var(--hx-warn-ring);
    border-left-color: var(--hx-warn);
    color: var(--hx-ink-2);
}

.alert-info {
    background-color: var(--hx-info-soft);
    border-color: var(--hx-line);
    border-left-color: var(--hx-info);
    color: var(--hx-ink-2);
}

.alert-secondary,
.alert-light {
    background-color: var(--hx-surface-2);
    border-left-color: var(--hx-muted-2);
    color: var(--hx-ink-2);
}

.alert .alert-link {
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
}

/* =============================================================================
   11  MODALS, DIALOGS AND DROPDOWNS
   ========================================================================== */

.modal-content {
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-r-xl);
    box-shadow: var(--hx-shadow-xl);
    color: var(--hx-ink-2);
    overflow: hidden;
}

.modal-header {
    background-color: var(--hx-surface);
    border-bottom: 1px solid var(--hx-line);
    padding: 1.05rem 1.25rem;
    align-items: flex-start;
    gap: 0.75rem;
}

.modal-title {
    font-family: var(--hx-font-display);
    font-size: var(--hx-t-lg);
    font-weight: 700;
    color: var(--hx-ink);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.modal-body {
    padding: 1.25rem;
    color: var(--hx-ink-2);
}

.modal-footer {
    background-color: var(--hx-surface-2);
    border-top: 1px solid var(--hx-line);
    padding: 0.9rem 1.25rem;
    gap: 0.5rem;
}

.modal-backdrop {
    background-color: #04100E;
}

.modal-backdrop.show {
    opacity: 0.55;
    backdrop-filter: blur(2px);
}

/* Modal entrance: rise and settle, rather than a flat slide. */
.modal.fade .modal-dialog {
    transform: translateY(14px) scale(0.985);
    transition: transform var(--hx-dur-slow) var(--hx-ease),
                opacity var(--hx-dur-slow) var(--hx-ease);
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: none;
    opacity: 1;
}

/* The app's own confirm/prompt dialog (ui_scale.css) joins the same family. */
.ui-dialog__backdrop {
    background: rgba(4, 16, 14, 0.55);
    backdrop-filter: blur(2px);
}

.ui-dialog__card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-r-xl);
    box-shadow: var(--hx-shadow-xl);
    animation: hx-dialog-in var(--hx-dur-slow) var(--hx-ease) both;
}

.ui-dialog__title {
    font-family: var(--hx-font-display);
    color: var(--hx-ink);
    font-weight: 700;
}

.ui-dialog__body {
    color: var(--hx-muted);
}

.ui-dialog__close {
    color: var(--hx-muted);
    border-radius: var(--hx-r-xs);
    transition: color var(--hx-dur-fast) var(--hx-ease),
                background-color var(--hx-dur-fast) var(--hx-ease);
}

.ui-dialog__close:hover {
    color: var(--hx-ink);
    background: var(--hx-surface-3);
}

.ui-dialog__icon {
    background: var(--hx-primary-soft);
    color: var(--hx-primary-strong);
}

.ui-dialog__icon.is-warn {
    background: var(--hx-danger-soft);
    color: var(--hx-danger);
}

.ui-dialog__icon.is-ok {
    background: var(--hx-success-soft);
    color: var(--hx-success);
}

@keyframes hx-dialog-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* --- Dropdowns ----------------------------------------------------------- */

.dropdown-menu {
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-r-md);
    box-shadow: var(--hx-shadow-lg);
    padding: 0.35rem;
    font-size: var(--hx-t-base);
    color: var(--hx-ink-2);
    animation: hx-menu-in var(--hx-dur-fast) var(--hx-ease) both;
}

@keyframes hx-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.dropdown-item {
    border-radius: var(--hx-r-xs);
    padding: 0.5rem 0.7rem;
    color: var(--hx-ink-2);
    font-size: var(--hx-t-base);
    font-weight: 500;
    transition: background-color var(--hx-dur-instant) var(--hx-ease),
                color var(--hx-dur-instant) var(--hx-ease);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--hx-primary-soft);
    color: var(--hx-primary-strong);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--hx-primary-solid);
    color: var(--hx-on-primary);
}

.dropdown-item.text-danger:hover {
    background-color: var(--hx-danger-soft);
    color: var(--hx-danger) !important;
}

.dropdown-header {
    font-size: var(--hx-t-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hx-muted-2);
    padding: 0.5rem 0.7rem 0.3rem;
}

/* --- Offcanvas (mobile navigation) --------------------------------------- */

.offcanvas {
    background-color: var(--hx-surface);
    color: var(--hx-ink-2);
    border-left: 1px solid var(--hx-line);
    box-shadow: var(--hx-shadow-xl);
}

.offcanvas-header {
    border-bottom: 1px solid var(--hx-line);
    padding: 1rem 1.15rem;
}

.offcanvas-title {
    font-family: var(--hx-font-display);
    font-weight: 700;
    color: var(--hx-ink);
}

.offcanvas-backdrop.show {
    opacity: 0.55;
}

/* --- Tooltips / popovers ------------------------------------------------- */

.tooltip-inner {
    background-color: var(--hx-surface-inverse);
    color: var(--hx-on-inverse);
    border-radius: var(--hx-r-xs);
    font-size: var(--hx-t-xs);
    font-weight: 500;
    padding: 0.35rem 0.6rem;
    box-shadow: var(--hx-shadow-md);
}

.tooltip .tooltip-arrow::before {
    border-top-color: var(--hx-surface-inverse);
    border-bottom-color: var(--hx-surface-inverse);
}

.popover {
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-r-md);
    box-shadow: var(--hx-shadow-lg);
}

.popover-header {
    background-color: var(--hx-surface-2);
    border-bottom: 1px solid var(--hx-line);
    color: var(--hx-ink);
    font-family: var(--hx-font-display);
    font-weight: 700;
}

.popover-body {
    color: var(--hx-ink-2);
}

/* =============================================================================
   12  TABS, ACCORDIONS, LIST GROUPS, PAGINATION
   ========================================================================== */

/* --- Tabs: a sliding underline instead of a boxed tab ------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--hx-line);
    gap: 0.15rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--hx-r-xs) var(--hx-r-xs) 0 0;
    color: var(--hx-muted);
    font-weight: 600;
    font-size: var(--hx-t-base);
    padding: 0.6rem 0.9rem;
    margin-bottom: -1px;
    background: transparent;
    transition: color var(--hx-dur-fast) var(--hx-ease),
                border-color var(--hx-dur-fast) var(--hx-ease),
                background-color var(--hx-dur-fast) var(--hx-ease);
}

.nav-tabs .nav-link:hover {
    color: var(--hx-ink);
    background-color: var(--hx-surface-2);
    border-bottom-color: var(--hx-line-strong);
}

.nav-tabs .nav-link.active {
    color: var(--hx-primary-strong);
    background-color: transparent;
    border-bottom-color: var(--hx-primary);
}

.nav-pills .nav-link {
    border-radius: var(--hx-r-pill);
    color: var(--hx-muted);
    font-weight: 600;
    font-size: var(--hx-t-sm);
    padding: 0.4rem 0.9rem;
    transition: background-color var(--hx-dur-fast) var(--hx-ease),
                color var(--hx-dur-fast) var(--hx-ease);
}

.nav-pills .nav-link:hover {
    background-color: var(--hx-surface-3);
    color: var(--hx-ink);
}

.nav-pills .nav-link.active {
    background-color: var(--hx-primary-solid);
    color: var(--hx-on-primary);
}

/* Tab panels fade in so switching reads as a change of content, not a jump. */
.tab-pane.fade {
    transition: opacity var(--hx-dur) var(--hx-ease);
}

.tab-pane.active.show {
    animation: hx-tab-in var(--hx-dur) var(--hx-ease) both;
}

@keyframes hx-tab-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* --- Accordion ---------------------------------------------------------- */

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--hx-line);
    --bs-accordion-btn-color: var(--hx-ink);
    --bs-accordion-active-color: var(--hx-ink);
    --bs-accordion-active-bg: var(--hx-primary-soft);
    --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-item {
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-r-md);
    overflow: hidden;
    color: var(--hx-ink-2);
}

.accordion-button {
    background-color: var(--hx-surface);
    color: var(--hx-ink);
    font-family: var(--hx-font-display);
    font-weight: 600;
    font-size: var(--hx-t-md);
    padding: 0.9rem 1.05rem;
    box-shadow: none;
    transition: background-color var(--hx-dur-fast) var(--hx-ease),
                color var(--hx-dur-fast) var(--hx-ease);
}

.accordion-button:hover {
    background-color: var(--hx-surface-2);
}

.accordion-button:not(.collapsed) {
    background-color: var(--hx-primary-soft);
    color: var(--hx-ink);
    box-shadow: none;
}

.accordion-button::after {
    transition: transform var(--hx-dur) var(--hx-ease);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(1.8);
}

.accordion-body {
    background-color: var(--hx-surface);
    color: var(--hx-ink-2);
    padding: 1.05rem;
}

/* --- List groups -------------------------------------------------------- */

.list-group {
    border-radius: var(--hx-r-md);
}

.list-group-item {
    background-color: var(--hx-surface);
    border-color: var(--hx-line);
    color: var(--hx-ink-2);
    padding: 0.85rem 1rem;
    transition: background-color var(--hx-dur-fast) var(--hx-ease);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--hx-surface-2);
    color: var(--hx-ink);
}

.list-group-item.active {
    background-color: var(--hx-primary-solid);
    border-color: var(--hx-primary-solid);
    color: var(--hx-on-primary);
}

/* --- Pagination --------------------------------------------------------- */

.pagination {
    gap: 0.25rem;
}

.page-link {
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-r-xs) !important;
    color: var(--hx-ink-2);
    font-size: var(--hx-t-sm);
    font-weight: 600;
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--hx-dur-fast) var(--hx-ease),
                color var(--hx-dur-fast) var(--hx-ease),
                border-color var(--hx-dur-fast) var(--hx-ease);
}

.page-link:hover {
    background-color: var(--hx-primary-soft);
    border-color: var(--hx-primary-ring);
    color: var(--hx-primary-strong);
}

.page-item.active .page-link {
    background-color: var(--hx-primary-solid);
    border-color: var(--hx-primary-solid);
    color: var(--hx-on-primary);
}

.page-item.disabled .page-link {
    background-color: var(--hx-surface-2);
    color: var(--hx-muted-2);
    border-color: var(--hx-line-faint);
}

/* The app's own pager (ui_scale.css) matches. */
.ui-pager__meta {
    color: var(--hx-muted);
    font-size: var(--hx-t-xs);
}

/* --- Breadcrumb --------------------------------------------------------- */

.breadcrumb {
    font-size: var(--hx-t-sm);
    margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--hx-muted);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--hx-primary-strong);
}

.breadcrumb-item.active {
    color: var(--hx-ink);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--hx-muted-2);
}

/* =============================================================================
   13  PROGRESS AND SPINNERS
   ========================================================================== */

.progress {
    background-color: var(--hx-surface-3);
    border-radius: var(--hx-r-pill);
    height: 0.5rem;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--hx-primary);
    border-radius: var(--hx-r-pill);
    /* Width is set inline by the app; animate it so gains read as progress. */
    transition: width var(--hx-dur-slow) var(--hx-ease);
}

.progress-bar.bg-success { background-color: var(--hx-success) !important; }
.progress-bar.bg-danger  { background-color: var(--hx-danger) !important; }
.progress-bar.bg-warning { background-color: var(--hx-warn) !important; }
.progress-bar.bg-info    { background-color: var(--hx-info) !important; }

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%,
                      transparent 25%, transparent 50%,
                      rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.16) 75%,
                      transparent 75%, transparent);
}

.spinner-border {
    border-width: 2px;
    color: var(--hx-primary);
    width: 1.75rem;
    height: 1.75rem;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.spinner-grow {
    background-color: var(--hx-primary);
}