:root {
    --app-font-family: 'Inter', sans-serif;
    --app-font-size-base: 14px;
    --app-font-weight-body: 400;
    --app-font-weight-heading: 700;
    --app-primary: #1b00ff;
    --app-on-primary: #ffffff;
    --app-primary-hover: #1500cc;
    --app-secondary: #6c757d;
    --app-border-color: #d4d4d4;
    --app-border-width: 1px;
    --app-radius-sm: 4px;
    --app-radius-md: 8px;
    --app-radius-lg: 10px;
    --app-radius-xl: 25px;
    --app-body-bg: #ecf0f4;
    --app-surface-bg: #ffffff;
    --app-input-bg: #ffffff;
    --app-text-primary: #031e23;
    --app-text-heading: #202342;
    --app-text-muted: #777777;
    --app-hover-bg: #ecf0f4;
    --app-shadow: 0 0 28px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] {
    --app-primary: #1b00ff;
    --app-on-primary: #ffffff;
    --app-primary-hover: #1500cc;
    --app-secondary: #6c757d;
    --app-border-color: #d4d4d4;
    --app-border-width: 1px;
    --app-radius-sm: 4px;
    --app-radius-md: 8px;
    --app-radius-lg: 10px;
    --app-radius-xl: 25px;
    --app-body-bg: #ecf0f4;
    --app-surface-bg: #ffffff;
    --app-input-bg: #ffffff;
    --app-text-primary: #031e23;
    --app-text-heading: #202342;
    --app-text-muted: #777777;
    --app-hover-bg: #ecf0f4;
    --app-shadow: 0 0 28px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
    --app-primary: #6c63ff;
    --app-on-primary: #ffffff;
    --app-primary-hover: #857dff;
    --app-secondary: #adb5bd;
    --app-border-color: #394653;
    --app-border-width: 1px;
    --app-radius-sm: 4px;
    --app-radius-md: 8px;
    --app-radius-lg: 10px;
    --app-radius-xl: 25px;
    --app-body-bg: #121820;
    --app-surface-bg: #1d2733;
    --app-input-bg: #17212b;
    --app-text-primary: #e8edf2;
    --app-text-heading: #ffffff;
    --app-text-muted: #aeb8c2;
    --app-hover-bg: #2a3744;
    --app-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

body {
    background-color: var(--app-body-bg);
    color: var(--app-text-primary);
    font-family: var(--app-font-family);
    font-size: var(--app-font-size-base);
    font-weight: var(--app-font-weight-body);
}

/* === Header follows the appearance theme === */
.header {
    background-color: var(--app-surface-bg) !important;
    border-bottom: var(--app-border-width) solid var(--app-border-color);
}

.header .menu-icon,
.header .search-toggle-icon,
.header .user-notification .dropdown-toggle,
.header .user-info-dropdown .dropdown-toggle .user-name {
    color: var(--app-text-primary);
}

.header .header-left .header-search .search-icon {
    color: var(--app-text-muted);
}

/* === Single light/dark toggle (header + auth pages) === */
.theme-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background: var(--app-hover-bg);
    color: var(--app-text-primary);
    font-size: 18px;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Header placement: beat vendor .user-notification .dropdown-toggle sizing/color */
.user-notification .theme-mode-toggle {
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 18px;
    color: var(--app-text-primary);
}

/* === Admin header right-side actions: vertical alignment ===
   The vendor theme left these items top-aligned (legacy float-era padding
   on .user-notification) so the theme toggle, bell, language selector and
   user chip sat at different heights. Center everything on one axis and
   give the icon controls a shared 42px hit area. */
.header-right {
    align-items: center;
}

.header-right .user-notification {
    display: flex;
    align-items: center;
    padding: 0;
}

/* The bell only — the theme toggle shares the .user-notification wrapper
   but is sized by .theme-mode-toggle instead. */
.header-right .user-notification:not(.dashboard-setting) .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 20px;
    color: var(--app-text-primary);
}

.header-right .language-selector-dropdown {
    display: flex;
    align-items: center;
}

.header-right .language-selector-dropdown .dropdown-toggle {
    height: 42px;
    padding: 0 12px;
}

.theme-mode-toggle:hover {
    background: var(--app-primary);
    color: var(--app-on-primary);
    transform: rotate(15deg);
}

.theme-mode-toggle .theme-mode-icon {
    font-size: 18px;
    line-height: 1;
}

.theme-mode-toggle .theme-mode-icon-light {
    display: inline-block;
}

.theme-mode-toggle .theme-mode-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-mode-toggle .theme-mode-icon-light {
    display: none;
}

[data-theme="dark"] .theme-mode-toggle .theme-mode-icon-dark {
    display: inline-block;
}

/* Auth pages: fixed top-right placement inside the search topbar */
.auth-theme-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* Keep the auth toggle vertically centered while it rotates on hover/focus
   (the generic :hover rule above would otherwise override the
   translateY(-50%) offset and make the button jump). */
.auth-theme-toggle:hover,
.auth-theme-toggle:focus-visible {
    transform: translateY(-50%) rotate(15deg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--app-text-heading);
    font-weight: var(--app-font-weight-heading);
}

.card-box,
.da-card,
.page-header,
.card {
    background-color: var(--app-surface-bg);
    border-color: var(--app-border-color);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
}

.form-control,
.custom-select,
.btn {
    border-radius: var(--app-radius-md);
    border-width: var(--app-border-width);
    border-color: var(--app-border-color);
}

.form-control,
.custom-select {
    background-color: var(--app-input-bg);
    color: var(--app-text-primary);
}

.form-control::placeholder {
    color: var(--app-text-muted);
}

.form-control:focus,
.custom-select:focus,
.btn:focus,
.btn.focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(27, 0, 255, 0.2) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-primary) 20%, transparent) !important;
}

.btn-primary {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--app-primary-hover) !important;
    border-color: var(--app-primary-hover) !important;
    color: var(--app-on-primary) !important;
}

.btn-secondary {
    background-color: var(--app-secondary) !important;
    border-color: var(--app-secondary) !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-on-primary) !important;
}

a,
.text-primary {
    color: var(--app-primary) !important;
}

a:hover,
a:focus {
    color: var(--app-primary-hover) !important;
}

.nav-tabs .nav-link.active,
.customtab .nav-link.active {
    color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.table,
.table td,
.table th,
.dropdown-menu,
.list-group-item,
.modal-content,
.popover {
    background-color: var(--app-surface-bg);
    border-color: var(--app-border-color);
    color: var(--app-text-primary);
}

.table-hover tbody tr:hover,
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--app-hover-bg);
}

.text-muted {
    color: var(--app-text-muted) !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .bg-white {
    color: var(--app-text-primary) !important;
    background-color: var(--app-surface-bg) !important;
}

[data-theme="dark"] .header-white,
[data-theme="dark"] .sidebar-light {
    background-color: var(--app-surface-bg) !important;
    color: var(--app-text-primary) !important;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--app-hover-bg);
    color: var(--app-text-muted);
}

.appearance-preview {
    overflow: hidden;
    border: var(--app-border-width) solid var(--app-border-color);
    border-radius: var(--app-radius-lg);
    background: var(--app-body-bg);
    color: var(--app-text-primary);
    box-shadow: var(--app-shadow);
    font-family: var(--app-font-family);
}

.appearance-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--app-surface-bg);
    border-bottom: var(--app-border-width) solid var(--app-border-color);
    color: var(--app-text-heading);
}

.appearance-preview-header-left,
.appearance-preview-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.appearance-preview-hamburger,
.appearance-preview-theme,
.appearance-preview-bell {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-size: 16px;
    color: var(--app-text-primary);
}

.appearance-preview-search {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 6px 10px;
    border: var(--app-border-width) solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    background: var(--app-input-bg);
    color: var(--app-text-muted);
}

.appearance-preview-searchicon {
    font-size: 14px;
    color: var(--app-text-muted);
}

.appearance-preview-searchtext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.appearance-preview-kbd {
    padding: 3px 5px;
    border: 1px solid #e0e4e8;
    border-radius: var(--app-radius-sm);
    background: #f1f3f5;
    color: #8a8f98;
    font-family: var(--app-font-family);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
}

.appearance-preview-bell {
    position: relative;
}

.appearance-preview-bell-dot {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f5678a;
}

.appearance-preview-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.appearance-preview-avatar {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: var(--app-hover-bg);
    color: var(--app-primary);
    font-size: 11px;
    font-weight: 700;
}

.appearance-preview-username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
    color: var(--app-text-primary);
    font-size: 11px;
    font-weight: 500;
}

/* Theme icon swaps with the mode, like the real header toggle */
.appearance-preview-theme-icon-dark {
    display: none;
}

[data-theme="dark"] .appearance-preview-theme-icon-light {
    display: none;
}

[data-theme="dark"] .appearance-preview-theme-icon-dark {
    display: inline-block;
}

.appearance-preview-body {
    display: flex;
    min-height: 330px;
}

.appearance-preview-sidebar {
    width: 150px;
    flex: 0 0 150px;
    padding: 18px 10px;
    background: var(--app-surface-bg);
    border-right: var(--app-border-width) solid var(--app-border-color);
}

.appearance-preview-brand {
    margin-bottom: 18px;
    padding: 0 8px;
    color: var(--app-primary);
    font-size: 13px;
    font-weight: 800;
}

.appearance-preview-navcap {
    margin: 0 10px 8px;
    padding: 0 2px;
    color: var(--app-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appearance-preview-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 8px 10px;
    border-radius: var(--app-radius-md);
    color: var(--app-text-primary) !important;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.appearance-preview-navicon {
    display: inline-grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    place-items: center;
    font-size: 11px;
    color: inherit;
}

.appearance-preview-navtext {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Submenu parents get the same bootstrap-icons chevron as the real
   sidebar (.dropdown-toggle:after). It inherits the hover/active color. */
.appearance-preview-nav.has-submenu {
    position: relative;
}

.appearance-preview-nav.has-submenu::after {
    content: "\F282";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translate(0, -50%);
    font-family: bootstrap-icons;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Hover/active exactly like the real admin sidebar:
   solid primary background + on-primary text (icon inherits). */
.appearance-preview-nav:hover,
.appearance-preview-nav.is-active {
    color: var(--app-on-primary) !important;
    background-color: var(--app-primary) !important;
}

.appearance-preview-content {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

.appearance-preview-content h4 {
    margin-bottom: 16px;
    color: var(--app-text-heading);
}

.appearance-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.appearance-preview-card {
    padding: 14px;
    border: var(--app-border-width) solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-bg);
    box-shadow: var(--app-shadow);
}

.appearance-preview-card strong {
    display: block;
    margin: 7px 0;
    color: var(--app-text-heading);
    font-size: 20px;
}

.appearance-preview-label {
    color: var(--app-text-muted);
    font-size: 11px;
}

.appearance-preview-badge {
    display: inline-block;
    padding: 3px 7px;
    border-radius: var(--app-radius-xl);
    background: rgba(27, 0, 255, 0.14);
    background: color-mix(in srgb, var(--app-primary) 14%, transparent);
    color: var(--app-primary);
    font-size: 10px;
    font-weight: 700;
}

.appearance-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.appearance-preview-actions .form-control {
    min-width: 140px;
    flex: 1 1 140px;
}

.appearance-preview-table {
    overflow: hidden;
    border: var(--app-border-width) solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-bg);
}

.appearance-preview-table > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: var(--app-border-width) solid var(--app-border-color);
    color: var(--app-text-primary);
    font-size: 12px;
}

.appearance-preview-table > div:last-child {
    border-bottom: 0;
}

.appearance-preview-table > div:first-child {
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 700;
}

/* Zebra stripes like the real DataTables (`stripe hover`): odd rows get the
   same light background the app themes for table hover. */
.appearance-preview-table > div:nth-child(even) {
    background: var(--app-hover-bg);
}

/* The hovered row keeps the real hover background, plus a slim primary
   accent so the state stays visible in a static preview. */
.appearance-preview-table > div.is-hover {
    background: var(--app-hover-bg);
    border-left: 3px solid var(--app-primary);
    padding-left: 9px;
}

.appearance-preview-badge.is-secondary {
    background: rgba(108, 117, 125, 0.16);
    background: color-mix(in srgb, var(--app-secondary) 16%, transparent);
    color: var(--app-secondary);
}

.appearance-preview-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.appearance-preview-token {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border: var(--app-border-width) solid var(--app-border-color);
    background: var(--app-surface-bg);
    color: var(--app-text-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.appearance-preview-token.is-radius-sm {
    border-radius: var(--app-radius-sm);
}

.appearance-preview-token.is-radius-md {
    border-radius: var(--app-radius-md);
}

.appearance-preview-token.is-radius-lg {
    border-radius: var(--app-radius-lg);
}

.appearance-preview-token.is-radius-xl {
    border-radius: var(--app-radius-xl);
}

.appearance-preview-token.is-heading {
    color: var(--app-text-heading);
    font-weight: 700;
}

.appearance-preview-token.is-body {
    color: var(--app-text-primary);
}

.appearance-preview-token.is-muted {
    color: var(--app-text-muted);
}

.appearance-preview-token.is-hover {
    background: var(--app-hover-bg);
    color: var(--app-primary);
}

.appearance-preview-type {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: var(--app-border-width) solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-bg);
}

.appearance-preview-type-heading {
    display: block;
    margin-bottom: 5px;
    color: var(--app-text-heading);
    font-size: 18px;
    font-weight: var(--app-font-weight-heading);
    line-height: 1.3;
}

.appearance-preview-type-body {
    margin: 0;
    color: var(--app-text-primary);
    font-size: var(--app-font-size-base);
    font-weight: var(--app-font-weight-body);
    line-height: 1.6;
}

.appearance-controls,
.appearance-preview-shell {
    border: var(--app-border-width) solid var(--app-border-color);
    padding: 18px;
    /* Hide the scrollbar on the pinned live preview card while keeping it
       scrollable (wheel/trackpad still works). */
    scrollbar-width: none; /* Firefox */
}

.appearance-preview-shell::-webkit-scrollbar {
    display: none; /* Chrome / Safari / Edge */
}

/* Keep the live preview pinned while the long form scrolls (desktop). */
@media (min-width: 1200px) {
    .appearance-preview-shell {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 108px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Collapsible setting groups */
.appearance-group {
    margin: 16px 0 4px;
    border-bottom: var(--app-border-width) solid var(--app-border-color);
}

.appearance-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0 0 10px;
    border: 0;
    background: none;
    color: var(--app-text-heading);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
}

.appearance-group-toggle:hover {
    color: var(--app-primary);
}

.appearance-group-chevron {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--app-text-muted);
    transition: transform 0.25s ease;
}

.appearance-group-toggle.collapsed .appearance-group-chevron {
    transform: rotate(-90deg);
}

.appearance-group-body {
    padding-top: 2px;
}

/* Compact color control matching the reference appearance settings UI:
   a 42px swatch followed by an inline hex value. */
.appearance-color-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

.appearance-color-value {
    color: var(--app-text-muted, #777);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Native <input type="color"> wrapper. We set appearance:none so the
   browser's chrome (the activity-bar button and Chrome 110+'s eyedropper
   glyph) is removed — leaving just a clean chip. To keep the chip filled
   with the chosen color we paint it ourselves: the input's --swatch-color
   CSS custom property is kept in sync with input.value by the JS handler
   (see appearance.js → bindNativeColorPickerTriggers). Pseudo-element
   fallbacks (::-webkit-color-swatch / ::-moz-color-swatch) are also
   styled so the chip stays filled on browsers where the JS handler or
   the background layer doesn't paint. */
.appearance-palette-fields .form-control-color {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--swatch-color, transparent);
    width: 42px;
    min-width: 42px;
    height: 36px;
    padding: 0;
    border: var(--app-border-width, 1px) solid var(--app-border-color, transparent);
    border-radius: var(--app-radius-md, 6px);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Keep the visual chip focused in the same way other form-controls do. */
.appearance-palette-fields .form-control-color:hover {
    border-color: var(--app-primary, #1b00ff);
}

.appearance-palette-fields .form-control-color:focus {
    outline: none;
    border-color: var(--app-primary, #1b00ff);
    box-shadow: 0 0 0 0.2rem rgba(27, 0, 255, 0.2);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-primary, #1b00ff) 20%, transparent);
}

/* When the browser still paints a swatch pseudo-element (e.g. older Safari
   that ignores appearance:none), strip the wrapper padding so the swatch
   fills the chip edge-to-edge with no visible halo. */
.appearance-palette-fields .form-control-color::-webkit-color-swatch-wrapper {
    padding: 0;
    border: 0;
    border-radius: inherit;
}

.appearance-palette-fields .form-control-color::-webkit-color-swatch {
    border: 0;
    border-radius: inherit;
}

/* Firefox equivalent of the same swatch rendering. */
.appearance-palette-fields .form-control-color::-moz-color-swatch {
    border: 0;
    border-radius: inherit;
}

.appearance-field-help {
    display: block;
    margin-top: 2px;
    color: var(--app-text-muted);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
}

.appearance-contrast-warning {
    margin-bottom: 12px;
    padding: 8px 10px;
    font-size: 12px;
}

.appearance-reset-actions {
    border-top: var(--app-border-width) solid var(--app-border-color);
    padding-top: 16px;
}

.gap-2 {
    gap: 0.5rem;
}

@media (max-width: 767px) {
    .appearance-preview-sidebar {
        width: 112px;
        flex-basis: 112px;
    }

    .appearance-preview-content {
        padding: 14px;
    }

    .appearance-preview-grid {
        grid-template-columns: 1fr;
    }

    .appearance-preview-kbd,
    .appearance-preview-username {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.language-selector-dropdown {
    display: inline-block;
}

.language-selector-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
}

.language-label {
    font-size: 14px;
    font-weight: 500;
}

.flag-icon {
    margin-right: 5px;
}

/* === Global header search === */
.header-search {
    position: relative;
}

.header-search .form-group {
    position: relative;
}

.header-search .search-icon {
    position: absolute;
    left: 17px;
    top: 12px;
    font-size: 20px;
    color: var(--app-text-muted);
}

.header-search .search-input {
    padding-left: 50px;
    padding-right: 55px;
}

.header-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 20px;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: var(--app-surface-bg);
    border: var(--app-border-width) solid var(--app-border-color);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
    z-index: 1240;
    display: none;
    padding: 8px 0;
}

.header-search-results.show {
    display: block;
}

.header-search-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-primary);
}

.header-search-item {
    display: block;
    padding: 9px 16px;
    border-left: 3px solid transparent;
    color: var(--app-text-primary);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.header-search-item:hover,
.header-search-item:focus,
.header-search-item.is-active {
    background: var(--app-hover-bg);
    color: var(--app-primary);
    border-left-color: var(--app-primary);
    text-decoration: none;
}

.header-search-item-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.header-search-item-subtitle {
    font-size: 12px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.header-search-status,
.header-search-empty {
    padding: 16px;
    font-size: 14px;
    color: var(--app-text-muted);
    text-align: center;
}

.header-search-footer {
    display: block;
    margin-top: 4px;
    padding: 10px 16px;
    border-top: var(--app-border-width) solid var(--app-border-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--app-primary);
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease;
}

.header-search-footer:hover,
.header-search-footer:focus {
    background: var(--app-hover-bg);
    color: var(--app-primary);
    text-decoration: none;
}

.header-search-shortcut {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-family: var(--app-font-family);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #8a8f98;
    background: #f1f3f5;
    border: 1px solid #e0e4e8;
    border-radius: var(--app-radius-sm);
    padding: 4px 6px;
    pointer-events: none;
}

@media (max-width: 767px) {
    .header-search-shortcut {
        display: none;
    }
}

/* === Index page search clear button === */
.js-index-search-form .form-control {
    padding-right: 2.4rem;
}

.index-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1;
    color: #8a8f98;
    text-decoration: none;
    transition: color 0.2s ease;
}

.index-search-clear:hover,
.index-search-clear:focus {
    color: #dc3545;
    text-decoration: none;
}

/* === Auth pages top search bar === */
.auth-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--app-surface-bg) 92%, transparent);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.12);
}

.auth-topbar-inner {
    width: 100%;
    max-width: 560px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.auth-topbar .header-search {
    width: 100%;
    flex: 1;
    min-width: 0;
    padding-left: 0;
}

/* Auth pages: pin the language dropdown to the far-left edge of the
   topbar, mirroring the theme toggle on the far right. */
.auth-topbar > .language-selector-dropdown {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.auth-topbar .language-selector-dropdown .dropdown-toggle {
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.auth-topbar .language-selector-dropdown .dropdown-toggle:hover,
.auth-topbar .language-selector-dropdown .dropdown-toggle:focus {
    background: var(--app-hover-bg);
    text-decoration: none;
}

/* The toggle is pinned to the far-left edge, so open the menu toward the
   right (physical direction — the toggle stays left in RTL too). */
.auth-topbar .language-selector-dropdown .dropdown-menu {
    left: 0;
    right: auto;
}

/* Keep the centered search clear of the far-left language selector. */
@media (max-width: 850px) {
    .auth-topbar-inner {
        padding-left: 140px;
    }
}

@media (max-width: 575px) {
    .auth-topbar {
        padding: 8px 12px;
    }

    .auth-topbar .language-selector-dropdown .language-label {
        display: none;
    }

    .auth-topbar > .language-selector-dropdown {
        left: 12px;
    }

    .auth-topbar-inner {
        padding-left: 60px;
    }
}

.auth-topbar .header-search-results {
    left: 0;
    right: 0;
}

/* body prefix: auth-layout's inline <style> loads after this file, so these
   need higher specificity to win over it. `!important` is also required on
   padding-top because the layout body carries Bootstrap's `py-4` utility,
   whose !important would otherwise keep the page content from clearing the
   fixed auth topbar. */
body.login-page {
    min-height: 90svh;
    padding-top: 70px !important;
}

/* Safe flex centering: auto margins keep the top of the card reachable
   when it is taller than the viewport (small phones, landscape mode)
   instead of clipping it behind the fixed topbar. */
.login-page > .container {
    margin: auto 0;
}

/* Auth pages: bring the theme's .login-box (forgot/reset password) in line
   with the login card — theme-driven surface, border, radius and shadow so
   light/dark mode and custom appearance colors apply consistently. */
body.login-page .login-box {
    max-width: 440px;
    width: 100%;
    margin: 5px auto;
    padding: 40px 32px;
    background-color: var(--app-surface-bg);
    border: 1px solid var(--app-border-color);
    border-radius: 12px;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.12);
}

body.login-page .login-box .login-title {
    padding: 0 0 10px;
    margin-bottom: 24px;
}

body.login-page .login-box h6 {
    color: var(--app-text-muted);
}

@media (max-width: 767px) {
    body.login-page {
        padding-top: 72px;
    }

    body.login-page .login-box {
        padding: 32px 20px;
    }

    .auth-theme-toggle {
        right: 12px;
    }

    .auth-topbar-inner {
        padding-right: 54px;
    }

    .auth-topbar .header-search-shortcut {
        display: none;
    }

    /* 16px prevents iOS Safari from zooming the page on input focus
       (beats the 0.95rem set in auth-layout's inline <style>). */
    body.login-page .login-card .form-control {
        font-size: 16px;
    }

    .login-card .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Short viewports (landscape phones, small laptops): tighten the vertical
   rhythm so the login card fits without excessive scrolling. */
@media (max-height: 720px) {
    body.login-page {
        padding-top: 64px;
    }

    body.login-page .login-box {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .login-card .card-body {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .login-card .mb-4 {
        margin-bottom: 1rem;
    }

    body.login-page .login-card .divider {
        margin-top: 16px;
        margin-bottom: 16px;
    }

}

/* Very narrow phones: trim card padding so fields keep full width. */
@media (max-width: 400px) {
    .login-card .card-body {
        padding: 1.25rem;
    }

    body.login-page .login-box {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* === Sidebar follows the appearance theme ===
   DeskApp forces sidebar menu links to a fixed palette (white on navy, dark on
   white) and the blanket `a { color: var(--app-primary) }` rule above turns them
   blue. These overrides bind the sidebar to the appearance tokens so Text
   (Primary), Surface and Primary settings apply to the menu as well. */
.left-side-bar {
    background-color: var(--app-surface-bg) !important;
    border-right: var(--app-border-width) solid var(--app-border-color);
}

.left-side-bar .sidebar-menu .dropdown-toggle,
.left-side-bar .sidebar-menu .submenu li a {
    color: var(--app-text-primary) !important;
}

.left-side-bar .sidebar-menu .dropdown-toggle .micon {
    color: var(--app-text-primary) !important;
}

.left-side-bar .sidebar-menu .sidebar-small-cap {
    color: var(--app-text-muted) !important;
}

.left-side-bar .sidebar-menu .dropdown-divider {
    border-color: var(--app-border-color) !important;
}

.left-side-bar .sidebar-menu .submenu {
    background: var(--app-hover-bg) !important;
}

.left-side-bar .sidebar-menu .submenu:before {
    border-left-color: var(--app-primary) !important;
}

.left-side-bar .sidebar-menu .dropdown-toggle:hover,
.left-side-bar .sidebar-menu .show > .dropdown-toggle,
.left-side-bar .sidebar-menu > ul > li > .dropdown-toggle.active,
.left-side-bar .sidebar-menu .submenu li a:hover,
.left-side-bar .sidebar-menu .submenu li a.active {
    color: var(--app-on-primary) !important;
    background-color: var(--app-primary) !important;
}

.left-side-bar .sidebar-menu .dropdown-toggle.active .micon,
.left-side-bar .sidebar-menu .dropdown-toggle:hover .micon,
.left-side-bar .sidebar-menu .show > .dropdown-toggle .micon {
    color: var(--app-on-primary) !important;
}

/* Brand logo area follows the theme background too */
.left-side-bar .brand-logo {
    border-bottom: var(--app-border-width) solid var(--app-border-color) !important;
}

.left-side-bar .brand-logo a .dark-logo {
    display: block !important;
}

.left-side-bar .brand-logo a .light-logo {
    display: none !important;
}

[data-theme="dark"] .left-side-bar .brand-logo a .dark-logo {
    display: none !important;
}

[data-theme="dark"] .left-side-bar .brand-logo a .light-logo {
    display: block !important;
}

/* === Gradient stat cards (dashboard, activity log, notifications) ===
   Modern replacement for the vendor .widget-style3 cards: the number sits
   on the left and the icon lives in a soft gradient-tinted circle badge on
   the right. Each variant defines its own accent pair (--stat-g1/--stat-g2)
   plus the color used for the icon and value text (--stat-c). */
.stat-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.stat-card:hover,
.stat-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.2);
}

.stat-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 96px;
    padding: 18px 20px;
}

.stat-card-data {
    min-width: 0;
}

.stat-card-value {
    color: var(--stat-c, var(--app-text-primary));
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s ease;
}

.stat-card-label {
    margin-top: 2px;
    color: var(--app-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--stat-g1) 22%, transparent),
        color-mix(in srgb, var(--stat-g2) 22%, transparent));
    color: var(--stat-c, var(--app-text-primary));
    font-size: 24px;
    line-height: 1;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-card:hover .stat-card-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* Variant accent palettes (light mode) */
.stat-card-teal {
    --stat-g1: #00c3b4;
    --stat-g2: #37e6d8;
    --stat-c: #00a89b;
}

.stat-card-green {
    --stat-g1: #0ab44d;
    --stat-g2: #3fdc7c;
    --stat-c: #0aa03f;
}

.stat-card-blue {
    --stat-g1: #3d7bfd;
    --stat-g2: #6ba1ff;
    --stat-c: #3468e6;
}

.stat-card-indigo {
    --stat-g1: #5b5bff;
    --stat-g2: #8a7bff;
    --stat-c: #5144e0;
}

.stat-card-red {
    --stat-g1: #f2575e;
    --stat-g2: #ff8a8f;
    --stat-c: #e0444b;
}

.stat-card-amber {
    --stat-g1: #f5a623;
    --stat-g2: #ffc95e;
    --stat-c: #dd8f0b;
}

/* Alert cards (critical / warnings): a subtle wash tinted with the card's
   accent so they stand out without fighting either light or dark mode. */
.stat-card-alert {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--stat-c) 9%, var(--app-surface-bg)),
        var(--app-surface-bg));
}

/* Brighter accents on dark surfaces so icons/values stay readable. */
[data-theme="dark"] .stat-card-teal {
    --stat-c: #38e8da;
}

[data-theme="dark"] .stat-card-green {
    --stat-c: #4be084;
}

[data-theme="dark"] .stat-card-blue {
    --stat-c: #6fa2ff;
}

[data-theme="dark"] .stat-card-indigo {
    --stat-c: #8e81ff;
}

[data-theme="dark"] .stat-card-red {
    --stat-c: #ff7a80;
}

[data-theme="dark"] .stat-card-amber {
    --stat-c: #ffc95e;
}

/* === Clickable stat cards ===
   When an <x-stat-card> gets an href, the whole card becomes a link.
   The anchor carries no text styles of its own; the card keeps its look
   and gets a pointer cursor plus a chevron affordance on hover/focus. */
.stat-card-anchor {
    display: block;
    height: 100%;
    text-decoration: none;
}

/* Chevron hint (top-right) fades in on hover/focus */
.stat-card-anchor .stat-card::after {
    content: "\f285";
    font-family: bootstrap-icons;
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 13px;
    line-height: 1;
    color: var(--stat-c, var(--app-primary));
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.stat-card-anchor:hover .stat-card::after,
.stat-card-anchor:focus-visible .stat-card::after {
    opacity: 1;
    transform: translateX(0);
}

/* Keyboard focus: ring the card so the link target is obvious. The ring on
   the card replaces the browser default outline on the anchor (which would
   otherwise double up), so suppress the anchor's own outline here. */
.stat-card-anchor:focus-visible {
    outline: none;
}

.stat-card-anchor:focus-visible .stat-card {
    outline: 3px solid var(--app-primary);
    outline-offset: 3px;
}

/* RTL: mirror the chevron to keep pointing at the content edge */
[dir="rtl"] .stat-card-anchor .stat-card::after {
    right: auto;
    left: 12px;
    transform: translateX(4px) scaleX(-1);
}

[dir="rtl"] .stat-card-anchor:hover .stat-card::after,
[dir="rtl"] .stat-card-anchor:focus-visible .stat-card::after {
    transform: translateX(0) scaleX(-1);
}

/* === Bootstrap Icons chrome overrides ===
   The vendor theme paints dropdown toggles and breadcrumb separators with
   Font Awesome. Swap them to Bootstrap Icons so the whole admin uses one
   icon font. The sidebar submenu chevrons are already Bootstrap Icons in
   the vendor theme and keep their own (higher-specificity) rules. */
.dropdown-toggle::after {
    content: "\f282";
    border: 0 !important;
    font-family: "bootstrap-icons";
    vertical-align: unset;
    width: auto;
    height: auto;
}

.dropdown.show > .dropdown-toggle::after {
    content: "\f286";
}

.dropup .dropdown-toggle::after {
    content: "\f282";
}

.breadcrumb-item + .breadcrumb-item::before {
    font-family: "bootstrap-icons";
    content: "\f285";
}

/* RTL breadcrumbs: the vendor's [dir="rtl"] rule rotates this separator
   180deg (bi-chevron-right rotated points left), so no extra rule needed. */

/* === Small-screen layout hardening ===
   Audit-driven fixes (headless Chrome at 390px/768px): stop the onboarding
   row's negative gutters from pushing the page past the viewport, and let
   the index-page search/filter forms breathe on phones. (Wide data tables
   get their own .table-responsive wrapper in each list blade.) */
.onboarding-page .container > .row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 575.98px) {
    /* !important: beats the template's w-25 / w-50 width utilities on some pages */
    .js-index-search-form {
        width: 100% !important;
    }
    .js-index-search-form .position-relative {
        flex: 1 1 100%;
    }
}

/* === Login page polish ===
   Brand header and password-visibility toggle for the auth pages. The
   dark/light logo swap mirrors the sidebar's approach: the "dark" logo is
   meant for light backgrounds and vice versa. */
.login-card .login-brand-logo {
    max-height: 48px;
    max-width: 200px;
    object-fit: contain;
}

.login-card .login-brand .dark-logo {
    display: block;
}

.login-card .login-brand .light-logo {
    display: none;
}

[data-theme="dark"] .login-card .login-brand .dark-logo {
    display: none;
}

[data-theme="dark"] .login-card .login-brand .light-logo {
    display: block;
}

.login-card .password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--app-text-muted);
    padding: 4px 8px;
    line-height: 1;
    z-index: 4;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.login-card .password-toggle:hover,
.login-card .password-toggle:focus {
    color: var(--app-primary);
}

.login-card .form-control.password-field {
    padding-right: 44px;
}

/* The DeskApp template does not ship Bootstrap's .d-grid / .gap-* utilities,
   so the demo credential stack previously fell back to content-width buttons
   with no spacing between them. Restore the intended full-width stacked grid
   (the icons need a visible gap to breathe on narrow screens). */
.login-card [data-demo-logins] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.login-card [data-demo-logins] .btn {
    width: 100%;
}

/* === Grid utility polyfill ===
   The DeskApp template does not ship Bootstrap's .d-grid / .gap-* classes,
   so .d-grid containers (login demo, export, import) fell back to block
   layout with content-width items and no spacing between them. Restore the
   intended full-width stacked grid. */
.d-grid {
    display: grid !important;
    grid-template-columns: 1fr;
}

.d-grid.gap-2 {
    gap: 0.5rem !important;
}