/* ============================================================================
   HR Agent — Components
   All shared UI components: buttons, cards, forms, tables, modals, dropdowns,
   badges, sidebar nav, top header, alerts, toasts, pagination, steps, stamp,
   list-group active, progress, avatars.
   Loaded after base.css, before utilities.css and theme-overrides.css.
   ============================================================================ */

/* ============================================================================
   CARDS
   ============================================================================ */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    transition: box-shadow var(--dur) var(--ease-standard),
                transform var(--dur) var(--ease-standard),
                border-color var(--dur) var(--ease-standard);
}

[data-theme="dark"] .card {
    box-shadow: var(--shadow-sm), var(--shadow-inner-highlight);
}

.card-body   { padding: var(--space-6); }
.card-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: transparent; }
.card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); background: transparent; }

.card-title {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
}

/* Interactive card (e.g. clickable stat cards on dashboard) */
.card.card-interactive,
a.card,
.card[role="button"] {
    cursor: pointer;
}
.card.card-interactive:hover,
a.card:hover,
.card[role="button"]:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-default);
    transform: translateY(-1px);
}

.card-sm .card-body { padding: var(--space-5); }
.card-sm .h1, .card-sm .h2 {
    font-size: 1.75rem;
    font-weight: var(--fw-semibold);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.5625rem 1rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    min-height: 38px;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--fs-md);
    min-height: 46px;
    border-radius: var(--r-md);
}
.btn-sm {
    padding: 0.4375rem 0.875rem;
    font-size: var(--fs-xs);
    min-height: 32px;
    border-radius: var(--r-sm);
}
.btn-icon {
    min-width: 38px;
    padding: 0;
}
.btn-icon.btn-lg { min-width: 46px; min-height: 46px; }
.btn-icon.btn-sm { min-width: 32px; min-height: 32px; }

/* ----- Filled variants ----- */
.btn-primary {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:active { background-color: var(--brand-700); border-color: var(--brand-700); }

[data-theme="dark"] .btn-primary { color: #0b1216; }
[data-theme="dark"] .btn-primary:hover { background-color: #6ab5d0; border-color: #6ab5d0; }

.btn-success { background-color: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(0.92); color: #fff; box-shadow: var(--shadow-sm); }

.btn-danger { background-color: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); color: #fff; box-shadow: var(--shadow-sm); }

.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { filter: brightness(0.92); color: #fff; box-shadow: var(--shadow-sm); }

.btn-secondary {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-default);
    color: var(--text-primary);
}
.btn-secondary:hover {
    background-color: var(--border-subtle);
    border-color: var(--border-default);
    color: var(--text-primary);
}
[data-theme="dark"] .btn-secondary:hover { background-color: var(--bg-surface-raised); }

/* ----- Outline variants ----- */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--brand-500);
    color: var(--brand-500);
}
.btn-outline-primary:hover {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

.btn-outline-success {
    background-color: transparent;
    border-color: var(--success);
    color: var(--success);
}
.btn-outline-success:hover { background-color: var(--success); color: #fff; }

.btn-outline-danger {
    background-color: transparent;
    border-color: var(--danger);
    color: var(--danger);
}
.btn-outline-danger:hover { background-color: var(--danger); color: #fff; }

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--text-primary);
}
.btn-outline-secondary:hover {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* ----- Ghost variants (no border, subtle hover) ----- */
.btn-ghost-primary {
    background-color: transparent;
    border: none;
    color: var(--brand-500);
}
.btn-ghost-primary:hover {
    background-color: var(--brand-tint);
    color: var(--brand-600);
}
[data-theme="dark"] .btn-ghost-primary:hover { color: var(--teal-300); }

.btn-ghost-secondary {
    background-color: transparent;
    border: none;
    color: var(--text-primary);
}
.btn-ghost-secondary:hover { background-color: var(--bg-surface-sunken); }

.btn-ghost-danger {
    background-color: transparent;
    border: none;
    color: var(--danger);
}
.btn-ghost-danger:hover { background-color: var(--danger-bg); color: var(--danger); }

.btn-ghost-success {
    background-color: transparent;
    border: none;
    color: var(--success);
}
.btn-ghost-success:hover { background-color: var(--success-bg); color: var(--success); }

.btn-ghost-purple {
    background-color: transparent;
    border: none;
    color: var(--purple);
}
.btn-ghost-purple:hover { background-color: var(--purple-bg); color: var(--purple); }

.btn-ghost-info,
.btn-ghost-cyan {
    background-color: transparent;
    border: none;
    color: var(--info);
}
.btn-ghost-info:hover,
.btn-ghost-cyan:hover { background-color: var(--info-bg); color: var(--info); }

/* ============================================================================
   FORMS
   ============================================================================ */
.form-control,
.form-select {
    width: 100%;
    padding: 0.5625rem 0.875rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--text-primary);
    background-color: var(--bg-surface);
    background-clip: padding-box;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    min-height: 38px;
    transition: border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: none;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--bg-surface-sunken);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.form-control-lg {
    padding: 0.75rem 1rem;
    font-size: var(--fs-md);
    min-height: 46px;
}
.form-select {
    padding-right: 2.25rem;
}
.form-select-lg {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: var(--fs-md);
    min-height: 46px;
}
textarea.form-control {
    min-height: 96px;
    line-height: var(--lh-normal);
}

.form-label {
    font-weight: var(--fw-medium);
    margin-bottom: 0.375rem;
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.form-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Checkboxes & radios */
.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
    background-color: var(--bg-surface);
    border-color: var(--border-strong);
    border-radius: var(--r-xs);
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.form-check-input:checked {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
}
.form-check-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-check-label {
    padding-left: 0.25rem;
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

/* Input with icon */
.input-icon { position: relative; }
.input-icon .form-control { padding-left: 2.5rem; }
.input-icon .input-icon-addon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    min-width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    pointer-events: none;
}

/* Form select group */
.form-selectgroup-item { margin-bottom: var(--space-2); }
.form-selectgroup-label {
    padding: 0.625rem 1rem;
    font-size: var(--fs-sm);
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--dur-fast);
}
.form-selectgroup-input:checked + .form-selectgroup-label {
    background-color: var(--brand-tint);
    border-color: var(--brand-500);
    color: var(--brand-600);
}
[data-theme="dark"] .form-selectgroup-input:checked + .form-selectgroup-label { color: var(--teal-300); }

/* Legacy .input-field used in some templates */
.input-field {
    width: 100%;
    padding: 0.5625rem 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
    transition: all var(--dur-fast) var(--ease-standard);
    font-size: var(--fs-sm);
    min-height: 38px;
}
.input-field:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Dark-mode autofill fix (Chrome) */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================================================
   TABLES
   ============================================================================ */
.table {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    --tblr-table-bg: transparent;
}
.table > thead > tr > th {
    background-color: var(--bg-surface-sunken);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-bottom: 1px solid var(--border-default);
    padding: 0.75rem 1rem;
    white-space: nowrap;
}
.table > :not(caption) > * > * {
    padding: 0.875rem 1rem;
    border-bottom-color: var(--border-subtle);
    color: var(--text-primary);
}
.table-sm > :not(caption) > * > * {
    padding: 0.5rem 0.75rem;
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}
.table-vcenter > :not(caption) > tr > * { vertical-align: middle; }

.table-header {
    background-color: var(--bg-surface-sunken);
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ============================================================================
   BADGES
   ============================================================================ */
.badge {
    padding: 0.25rem 0.625rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    border-radius: var(--r-pill);
    line-height: 1.4;
}
.badge-lg {
    padding: 0.375rem 0.875rem;
    font-size: var(--fs-sm);
}

/* ----- Status badges (candidate pipeline) ----- */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    white-space: nowrap;
}

.status-new        { background-color: var(--status-new-bg);        color: var(--status-new-fg); }
.status-screening  { background-color: var(--status-screening-bg);  color: var(--status-screening-fg); }
.status-qualified  { background-color: var(--status-qualified-bg);  color: var(--status-qualified-fg); }
.status-interview  { background-color: var(--status-interview-bg);  color: var(--status-interview-fg); }
.status-offer      { background-color: var(--status-offer-bg);      color: var(--status-offer-fg); }
.status-hired      { background-color: var(--status-hired-bg);      color: var(--status-hired-fg); }
.status-rejected   { background-color: var(--status-rejected-bg);   color: var(--status-rejected-fg); }

/* ============================================================================
   STAMPS (CV scanner stat icons)
   ============================================================================ */
.stamp {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
}

/* ============================================================================
   AVATARS
   ============================================================================ */
.avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}
.avatar-sm { width: 1.875rem; height: 1.875rem; font-size: var(--fs-xs); }
.avatar-lg { width: 3rem; height: 3rem; font-size: var(--fs-md); }
.avatar-xl { width: 4.5rem; height: 4.5rem; font-size: var(--fs-xl); }

/* ============================================================================
   PROGRESS
   ============================================================================ */
.progress {
    height: 0.5rem;
    border-radius: var(--r-pill);
    background-color: var(--bg-surface-sunken);
    overflow: hidden;
}
.progress-sm { height: 0.375rem; }
.progress-lg { height: 0.875rem; }

.progress-bar {
    background-color: var(--brand-500);
    border-radius: inherit;
    transition: width var(--dur-slow) var(--ease-out);
}
.progress-bar.bg-purple { background-color: var(--purple); }
.progress-bar.bg-blue   { background-color: var(--brand-500); }
.progress-bar.bg-cyan   { background-color: var(--info); }
.progress-bar.bg-green  { background-color: var(--success); }
.progress-bar.bg-warning{ background-color: var(--warning); }
.progress-bar.bg-danger { background-color: var(--danger); }

/* ============================================================================
   ALERTS
   ============================================================================ */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    background: var(--bg-surface-sunken);
}
.alert .alert-title {
    font-weight: var(--fw-semibold);
    margin-bottom: 0.25rem;
}

.alert-success  { background: var(--success-bg); border-left-color: var(--success); color: var(--success); }
.alert-warning  { background: var(--warning-bg); border-left-color: var(--warning); color: var(--warning); }
.alert-danger   { background: var(--danger-bg);  border-left-color: var(--danger);  color: var(--danger); }
.alert-info     { background: var(--info-bg);    border-left-color: var(--info);    color: var(--info); }
.alert-primary  { background: var(--brand-tint); border-left-color: var(--brand-500); color: var(--brand-600); }
[data-theme="dark"] .alert-primary { color: var(--teal-300); }
.alert-purple   { background: var(--purple-bg);  border-left-color: var(--purple);  color: var(--purple); }

.alert-success .alert-title  { color: var(--success); }
.alert-warning .alert-title  { color: var(--warning); }
.alert-danger .alert-title   { color: var(--danger); }
.alert-info .alert-title     { color: var(--info); }
.alert-primary .alert-title  { color: var(--brand-600); }
[data-theme="dark"] .alert-primary .alert-title { color: var(--teal-300); }
.alert-purple .alert-title   { color: var(--purple); }

/* ============================================================================
   TOASTS
   ============================================================================ */
.toast {
    min-width: 300px;
    border-radius: var(--r-lg);
    border: none;
    box-shadow: var(--shadow-lg);
    background-color: var(--bg-surface);
    color: var(--text-primary);
}
.toast.bg-success { background-color: var(--success); color: #fff; }
.toast.bg-danger  { background-color: var(--danger);  color: #fff; }
.toast.bg-warning { background-color: var(--warning); color: #fff; }
.toast.bg-primary { background-color: var(--brand-500); color: #fff; }
.toast .toast-body {
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.toast .btn-close {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
    font-size: var(--fs-md);
}
.toast .btn-close:hover { opacity: 1; }

/* ============================================================================
   MODALS
   ============================================================================ */
.modal { overflow-y: auto; }
.modal-dialog-scrollable { max-height: calc(100vh - 3.5rem); }
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 14rem);
    overflow-y: auto;
}
.modal.show { display: block !important; }
.modal-backdrop {
    background-color: var(--bg-overlay);
}
.modal-backdrop.show { opacity: 1; }

.modal-content {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    /* Inherit the modal surface — Tabler defaults this to white, which broke
       dark mode (white bar with invisible light title). */
    background-color: transparent;
    align-items: flex-start;
}
.modal-title {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
}
.modal-body   { padding: var(--space-6); }
.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background-color: transparent;
    gap: var(--space-2);
}

/* ============================================================================
   DROPDOWNS
   ============================================================================ */
.dropdown-menu {
    z-index: 1050;
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1) 0;
    min-width: 12rem;
}
.dropdown-item {
    padding: 0.5rem 1rem;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    background-color: transparent;
    transition: background-color var(--dur-fast), color var(--dur-fast);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-tint);
    color: var(--brand-600);
}
[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active { color: var(--teal-300); }

.dropdown-item.text-danger { color: var(--danger); }
.dropdown-item.text-danger:hover { background-color: var(--danger-bg); color: var(--danger); }

.dropdown-divider {
    margin: var(--space-1) 0;
    border-top: 1px solid var(--border-subtle);
}
.dropdown-header {
    padding: 0.375rem 1rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}
.dropdown-menu-card .card { border: 0; box-shadow: none; }

/* ============================================================================
   PAGINATION
   ============================================================================ */
.pagination { gap: 2px; }
.page-link {
    padding: 0.4375rem 0.75rem;
    font-size: var(--fs-sm);
    min-width: 38px;
    text-align: center;
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    transition: all var(--dur-fast);
}
.page-link:hover {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.page-item.active .page-link {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
[data-theme="dark"] .page-item.active .page-link { color: #0b1216; }
.page-item.disabled .page-link {
    color: var(--text-muted);
    background-color: transparent;
    border-color: var(--border-subtle);
    cursor: not-allowed;
}

/* ============================================================================
   LIST GROUP
   ============================================================================ */
.list-group {
    background-color: transparent;
    border-radius: var(--r-lg);
}
.list-group-flush > .list-group-item {
    border-color: var(--border-subtle);
}
.list-group-item {
    padding: var(--space-3) var(--space-5);
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-subtle);
}
.list-group-item.active {
    background-color: var(--brand-tint);
    border-color: var(--brand-500);
    color: var(--text-primary);
}
.list-group-item.active .form-check-input:checked {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
}

/* ============================================================================
   STEPS WIZARD
   ============================================================================ */
.steps {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.step-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-md);
    background: var(--bg-surface-sunken);
    color: var(--text-secondary);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--dur) var(--ease-standard);
}
.step-item.active {
    background: var(--brand-tint);
    color: var(--brand-600);
    border-color: var(--brand-500);
}
[data-theme="dark"] .step-item.active { color: var(--teal-300); }
.step-item.completed {
    background: var(--success-bg);
    color: var(--success);
}
.step-icon {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--r-pill);
    background: var(--border-default);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    flex-shrink: 0;
}
.step-item.active .step-icon {
    background: var(--brand-500);
    color: #fff;
}
.step-item.completed .step-icon {
    background: var(--success);
    color: #fff;
}
.step-title { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
/* Tabler's own .steps component (loaded from CDN) draws a ::before dot and an
   ::after connector line that collide with our chip-style steps and render as a
   stray floating dot + faint bar. Suppress them — our steps are standalone chips. */
.steps .step-item::before,
.steps .step-item::after {
    content: none !important;
    display: none !important;
}

/* ============================================================================
   SIDEBAR NAVIGATION
   ============================================================================ */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg { width: 16rem; }
    .navbar-vertical.navbar-expand-lg ~ .page-wrapper { margin-left: 16rem; }
    .navbar-vertical.navbar-expand-lg[style*="display:none"] ~ .page-wrapper { margin-left: 0; }
}

.navbar-vertical {
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    padding: 0;
}
.navbar-vertical .container-fluid { padding: 0; }

.navbar-brand {
    padding: var(--space-5) var(--space-5);
    font-size: var(--fs-lg);
    color: var(--text-primary);
}
.navbar-brand .avatar {
    width: 2.25rem;
    height: 2.25rem;
}
.navbar-brand-image { height: 2rem; }

.navbar-vertical .navbar-nav { padding: 0 var(--space-3); gap: 2px; }

.navbar-vertical .nav-link {
    display: flex;
    align-items: center;
    padding: 0.5625rem 0.75rem;
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    border-radius: var(--r-md);
    transition: background-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard);
    position: relative;
}
.navbar-vertical .nav-link:hover {
    background: var(--bg-surface-sunken);
    color: var(--text-primary);
}

.navbar-vertical .nav-link.active {
    background: var(--brand-tint);
    color: var(--brand-600);
    font-weight: var(--fw-semibold);
}
[data-theme="dark"] .navbar-vertical .nav-link.active { color: var(--teal-300); }

.navbar-vertical .nav-link.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--brand-500);
    border-radius: var(--r-pill);
}

.nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: var(--space-3);
    font-size: 1.125rem;
    opacity: 0.85;
}
.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-link:hover .nav-link-icon { opacity: 1; }

.nav-link-title { font-size: var(--fs-sm); }

/* Section labels */
.navbar-vertical .nav-link.disabled {
    padding: 1rem 0.75rem 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
    background: transparent !important;
    cursor: default;
    pointer-events: none;
}
.navbar-vertical .nav-link.disabled::before { display: none; }

/* ============================================================================
   TOP HEADER
   ============================================================================ */
.page-wrapper > header.navbar {
    min-height: 64px;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 var(--space-6);
}
.page-wrapper > header.navbar .container-fluid {
    padding: 0;
}
.page-wrapper > header.navbar .page-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: var(--tracking-tight);
}

/* Header search input */
.page-wrapper > header.navbar .input-icon .form-control {
    background-color: var(--bg-surface-sunken);
    border-color: transparent;
}
.page-wrapper > header.navbar .input-icon .form-control:focus {
    background-color: var(--bg-surface);
    border-color: var(--brand-500);
}

/* ============================================================================
   THEME TOGGLE (segmented control inside dropdown)
   ============================================================================ */
.theme-toggle {
    display: flex;
    gap: 2px;
    margin: var(--space-1) var(--space-3);
    padding: 3px;
    background: var(--bg-surface-sunken);
    border-radius: var(--r-md);
}
.theme-toggle__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 0.375rem 0.5rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast), color var(--dur-fast);
}
.theme-toggle__btn:hover { color: var(--text-primary); }
.theme-toggle__btn.is-active {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}
.theme-toggle__btn i { font-size: var(--fs-md); }

/* Header quick theme switch — a visible one-click sun/moon button in the top bar.
   Reuses the same HRTheme engine as the dropdown segmented control. */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--dur-fast), color var(--dur-fast);
}
.header-icon-btn:hover {
    background: var(--bg-surface-sunken);
    color: var(--text-primary);
}
.header-icon-btn i { font-size: var(--fs-2xl); line-height: 1; }
/* Show the moon in light mode (click → dark), the sun in dark mode (click → light) */
.theme-switch__sun  { display: none; }
.theme-switch__moon { display: inline-flex; }
[data-theme="dark"] .theme-switch__moon { display: none; }
[data-theme="dark"] .theme-switch__sun  { display: inline-flex; color: var(--warning); }

/* ============================================================================
   PAGE LAYOUT
   ============================================================================ */
.page,
.page-wrapper {
    background-color: var(--bg-page);
    min-height: 100vh;
}

.page-body {
    padding: var(--space-6) 0;
}
.page-body > .container-fluid {
    padding: 0 var(--space-6);
}

/* Visually-grouped page header rows */
.page-header {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
}
.page-pretitle {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
}