@charset "UTF-8";
/* ==========================================================================
   KYTHU ADMIN THEME
   Jewelry & Rare Art — Obsidian / Champagne Gold dark identity.

   Loaded LAST in the cascade (after toastr.css) so it wins without needing
   to touch the vendor Front/Bootstrap 4.5.3 stylesheet.

   NOTE ON `!important`: theme.minc619.css compiles every colour as a literal
   (#FC6A57 appears 171 times) and reads no CSS custom properties at all, so
   redefining `--primary` alone is inert. Concrete selector overrides are the
   only reliable mechanism here, and many need `!important` to beat the
   vendor's specificity and the inline styles in the Blade views.

   Contrast (WCAG 2.1, verified):
     #DECEB9 on #0B0B0F ....... 12.75:1  AAA
     #DECEB9 on #181820 ....... 11.45:1  AAA
     #F5F3EB on #0B0B0F ....... 17.68:1  AAA
     #0B0B0F on #DECEB9 ....... 12.75:1  AAA  (gold buttons)
     #A8A296 on #0B0B0F ........ 7.74:1  AAA  (muted text)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces — elevation is expressed by lighter surfaces, not shadows. */
    --k-obsidian:      #0B0B0F;
    --k-surface:       #131319;
    --k-surface-2:     #181820;
    --k-surface-3:     #20202A;
    --k-surface-4:     #292933;

    /* Brand */
    --k-gold:          #DECEB9;
    --k-gold-bright:   #F2E7D6;
    --k-gold-deep:     #C0A483;
    --k-gold-dim:      #8A7A66;
    --k-oxblood:       #6E1F1F;
    --k-oxblood-soft:  #A83A3A;

    /* Text */
    --k-ivory:         #F5F3EB;
    --k-text:          #E6E2D8;
    --k-text-muted:    #A8A296;
    --k-text-faint:    #6F6A60;

    /* Hairlines — luxury reads as 1px low-opacity rules, never heavy shadow. */
    --k-line:          rgba(222, 206, 185, 0.14);
    --k-line-strong:   rgba(222, 206, 185, 0.26);
    --k-line-faint:    rgba(222, 206, 185, 0.07);

    /* Status — retuned for legibility on black (all >= 4.5:1 on --k-surface-2) */
    --k-success:       #4ADE80;
    --k-success-bg:    rgba(74, 222, 128, 0.12);
    --k-danger:        #F87171;
    --k-danger-bg:     rgba(248, 113, 113, 0.12);
    --k-warning:       #FBBF5C;
    --k-warning-bg:    rgba(251, 191, 92, 0.12);
    --k-info:          #7DD3E8;
    --k-info-bg:       rgba(125, 211, 232, 0.12);

    /* Typography */
    --k-font-display: 'Cormorant Garamond', 'Times New Roman', serif;
    --k-font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --k-font-ar:      'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;

    /* Geometry — restrained radii; luxury is sharp, not rounded. */
    --k-radius:       4px;
    --k-radius-lg:    6px;
    --k-track:        0.08em;   /* letter-spacing for labels */
    --k-track-wide:   0.18em;   /* letter-spacing for display/uppercase */

    /* Re-point the tokens style.css genuinely reads (32/9/12/5 uses). */
    --c1:      #DECEB9;
    --c1-rgb:  222, 206, 185;
    --c2:      #C0A483;
    --tc:      #E6E2D8;
    --base:    #DECEB9;
    --title-clr: #F5F3EB;

    /* Bootstrap's inert :root block — redefined for any third-party that reads it. */
    --primary: #DECEB9;
    --secondary: #A8A296;
    --success: #4ADE80;
    --info: #7DD3E8;
    --warning: #FBBF5C;
    --danger: #F87171;
    --light: #20202A;
    --dark: #0B0B0F;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html { background-color: var(--k-obsidian); }

body,
body.footer-offset {
    background-color: var(--k-obsidian) !important;
    color: var(--k-text) !important;
    font-family: var(--k-font-ui);
    font-size: 0.875rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[dir="rtl"] body,
body[dir="rtl"],
.rtl body { font-family: var(--k-font-ar); }

main.main,
#content,
.main .content,
.content.container-fluid,
.container-fluid { background-color: transparent !important; }

::selection { background: var(--k-gold); color: var(--k-obsidian); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--k-surface-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--k-obsidian); }
::-webkit-scrollbar-thumb {
    background: var(--k-surface-4);
    border: 2px solid var(--k-obsidian);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--k-gold-dim); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
/* Cormorant Garamond ships oldstyle figures by default, which renders 1 as a
   bare stem and 0 at x-height — unreadable for metrics. Force lining figures
   everywhere the display face is used, and tabular figures where numbers are
   compared in columns. */
h1, h2, h3, .page-header-title, .page-title,
.dashboard--card__title, .order-stats__title, .modal-title,
.k-auth-wordmark, .k-loader-word, .total--orders {
    font-variant-numeric: lining-nums;
    -webkit-font-feature-settings: "lnum" 1, "onum" 0;
    font-feature-settings: "lnum" 1, "onum" 0;
}
.dashboard--card__title, .order-stats__title, .total--orders,
.table td, .table th {
    font-variant-numeric: lining-nums tabular-nums;
    -webkit-font-feature-settings: "lnum" 1, "onum" 0, "tnum" 1;
    font-feature-settings: "lnum" 1, "onum" 0, "tnum" 1;
}

h1, h2, h3, .page-header-title, .page-title {
    font-family: var(--k-font-display);
    color: var(--k-ivory) !important;
    font-weight: 500;
    letter-spacing: 0.01em;
}
h1, .page-header-title { font-size: 1.875rem; line-height: 1.25; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

h4, h5, h6, .card-title, .card-header-title {
    font-family: var(--k-font-ui);
    color: var(--k-ivory) !important;
    font-weight: 600;
    letter-spacing: var(--k-track);
    font-size: 0.9375rem;
}

/* Uppercase micro-labels — the strongest single "luxury" typographic signal. */
.nav-subtitle,
.input-label,
.table thead th,
.card-subtitle,
.dashboard--card__subtitle {
    text-transform: uppercase !important;
    letter-spacing: var(--k-track-wide) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: var(--k-text-muted) !important;
}

p, span, div, li, td, label, small { color: inherit; }
.text-dark, .text-body, .text-secondary { color: var(--k-text) !important; }
.text-muted { color: var(--k-text-muted) !important; }
.text-white { color: var(--k-ivory) !important; }
.text-black, .text-black-50 { color: var(--k-text) !important; }

a { color: var(--k-gold); transition: color .18s ease; }
a:hover, a:focus { color: var(--k-gold-bright); text-decoration: none; }

.text-primary, .c1, .text-c1 { color: var(--k-gold) !important; }
.text-c2, .c2 { color: var(--k-gold-deep) !important; }
.text-success { color: var(--k-success) !important; }
.text-danger  { color: var(--k-danger) !important; }
.text-warning { color: var(--k-warning) !important; }
.text-info    { color: var(--k-info) !important; }

hr, .border-top, .border-bottom, .border-left, .border-right, .border {
    border-color: var(--k-line) !important;
}
.border-primary { border-color: var(--k-gold) !important; }

/* --------------------------------------------------------------------------
   4. CARDS & PANELS
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--k-surface-2) !important;
    border: 1px solid var(--k-line) !important;
    border-radius: var(--k-radius-lg) !important;
    box-shadow: none !important;
    color: var(--k-text);
}
.card-header,
.card-footer {
    background-color: transparent !important;
    border-color: var(--k-line) !important;
    color: var(--k-ivory);
}
.card-body { color: var(--k-text); }
.card.card-hover-shadow:hover { border-color: var(--k-line-strong) !important; }

.bg-white, .bg-light { background-color: var(--k-surface-2) !important; }
.bg-dark { background-color: var(--k-obsidian) !important; }
.bg-primary { background-color: var(--k-gold) !important; color: var(--k-obsidian) !important; }
.bg-soft-primary { background-color: rgba(222, 206, 185, 0.10) !important; color: var(--k-gold) !important; }
.bg-soft-success { background-color: var(--k-success-bg) !important; color: var(--k-success) !important; }
.bg-soft-danger  { background-color: var(--k-danger-bg) !important;  color: var(--k-danger) !important; }
.bg-soft-warning { background-color: var(--k-warning-bg) !important; color: var(--k-warning) !important; }
.bg-soft-info    { background-color: var(--k-info-bg) !important;    color: var(--k-info) !important; }

/* Accent hairline at the top of stat cards. */
.dashboard--card,
.order-stats {
    background-color: var(--k-surface-2) !important;
    border: 1px solid var(--k-line) !important;
    border-radius: var(--k-radius-lg) !important;
    color: var(--k-text) !important;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease;
}
.dashboard--card::before,
.order-stats::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--k-gold), transparent);
    opacity: .5;
}
.dashboard--card:hover,
.order-stats:hover {
    border-color: var(--k-line-strong) !important;
    transform: translateY(-2px);
}
.dashboard--card__title,
.order-stats__title {
    font-family: var(--k-font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--k-gold) !important;
    letter-spacing: 0.01em;
}
.order-stats__subtitle {
    text-transform: uppercase;
    letter-spacing: var(--k-track);
    font-size: 0.6875rem;
    color: var(--k-text-muted) !important;
}
/* Stat icons are now inline SVG (see resources/views/components/kythu-icon.blade.php)
   and inherit colour directly. */
.dashboard--card__img,
.order-stats__img {
    color: var(--k-gold);
    display: inline-flex;
    align-items: center;
    opacity: .85;
    transition: opacity .2s ease;
}
.dashboard--card:hover .dashboard--card__img,
.order-stats:hover .order-stats__img { opacity: 1; }
.dashboard--card__img { position: absolute; top: 1.15rem; right: 1.25rem; }
html[dir="rtl"] .dashboard--card__img { right: auto; left: 1.25rem; }

/* Remaining raster icons (card headings, footer) are light-on-transparent PNGs;
   recolour them to the champagne gold so they sit on the dark surface.
   Scoped to the bundled asset path on purpose — a bare [src*="/icons/"] is a
   substring match and would flatten any *uploaded* product or banner image
   whose URL happens to contain "/icons/" into a solid gold silhouette. */
.card-header img[src*="assets/admin/img/icons/"],
.card-body   img[src*="assets/admin/img/icons/"],
.footer      img[src*="assets/admin/img/icons/"],
h4 img[src*="assets/admin/img/icons/"],
h5 img[src*="assets/admin/img/icons/"] {
    filter: brightness(0) saturate(100%) invert(88%) sepia(14%) saturate(430%) hue-rotate(348deg) brightness(94%) contrast(89%);
    opacity: .88;
}

/* Segmented period selector (This Year / This Month / This Week).
   The active pill inherited a muted grey label on gold — 1.9:1. */
/* Markup is <label><input type=radio hidden checked><span>…</span></label>,
   so the styled target is the span adjacent to the checked input. */
.option-select-btn {
    background-color: var(--k-surface-3) !important;
    border: 1px solid var(--k-line) !important;
    border-radius: var(--k-radius);
}
.option-select-btn li label span,
.option-select-btn .btn {
    color: var(--k-text-muted) !important;
    letter-spacing: var(--k-track);
    border-radius: var(--k-radius);
}
.option-select-btn input:checked + span,
.option-select-btn .btn.active {
    background-color: var(--k-gold) !important;
    color: var(--k-obsidian) !important;
    font-weight: 600;
    border-radius: var(--k-radius);
}

/* --------------------------------------------------------------------------
   5. SIDEBAR
   -------------------------------------------------------------------------- */
.navbar-vertical-aside,
.navbar-vertical .navbar-vertical-container,
.navbar-vertical-aside .navbar-vertical-footer {
    background-color: var(--k-surface) !important;
    border-right: 1px solid var(--k-line) !important;
}
/* Must mirror all three selectors the LTR rule above sets border-right on,
   or the container and footer keep a hairline on the physical right. */
html[dir="rtl"] .navbar-vertical-aside,
html[dir="rtl"] .navbar-vertical .navbar-vertical-container,
html[dir="rtl"] .navbar-vertical-aside .navbar-vertical-footer {
    border-right: 0 !important;
    border-left: 1px solid var(--k-line) !important;
}
.navbar-vertical-aside .navbar-brand-wrapper {
    background-color: var(--k-surface) !important;
    border-bottom: 1px solid var(--k-line) !important;
}

.navbar-vertical .nav-link {
    color: var(--k-text-muted) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--k-radius);
    margin: 1px 8px;
    padding: 0.5rem 0.75rem;
    transition: background-color .18s ease, color .18s ease;
}
.navbar-vertical .nav-link:hover {
    color: var(--k-ivory) !important;
    background-color: rgba(222, 206, 185, 0.06);
}
.navbar-vertical .nav-link .nav-icon {
    color: var(--k-text-faint) !important;
    font-size: 1.0625rem;
    transition: color .18s ease;
    opacity: 1;
}
.navbar-vertical .nav-link:hover .nav-icon { color: var(--k-gold) !important; }

/* Active item — gold rule on the inline edge, never a filled block. */
.navbar-vertical .nav-link.active,
.navbar-vertical .navbar-vertical-aside-has-menu.active > .nav-link,
.navbar-vertical .nav-sub .nav-item.active > .nav-link {
    color: var(--k-gold) !important;
    background-color: rgba(222, 206, 185, 0.09) !important;
    box-shadow: inset 2px 0 0 var(--k-gold);
}
html[dir="rtl"] .navbar-vertical .nav-link.active,
html[dir="rtl"] .navbar-vertical .navbar-vertical-aside-has-menu.active > .nav-link {
    box-shadow: inset -2px 0 0 var(--k-gold);
}
.navbar-vertical .nav-link.active .nav-icon { color: var(--k-gold) !important; }

.navbar-vertical .nav-sub {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: var(--k-radius);
    margin: 2px 8px 6px;
    padding: 4px 0;
}
.navbar-vertical .nav-sub .nav-link {
    font-size: 0.78125rem;
    padding-left: 2.5rem;
    margin: 0 4px;
}
html[dir="rtl"] .navbar-vertical .nav-sub .nav-link {
    padding-left: 0.75rem;
    padding-right: 2.5rem;
}

.navbar-vertical .nav-subtitle {
    color: var(--k-text-faint) !important;
    padding: 1.25rem 1.25rem 0.375rem;
    display: block;
}
.nav-subtitle-replacer { color: var(--k-text-faint) !important; }

/* Sidebar search */
.sidebar--search-form .form--control,
.sidebar--search-form .form-control {
    background-color: var(--k-obsidian) !important;
    border: 1px solid var(--k-line) !important;
    color: var(--k-text) !important;
}
.sidebar--search-form .btn { color: var(--k-text-muted) !important; background: transparent; }
.sidebar--search-form .form-control::placeholder { color: var(--k-text-faint) !important; }

.navbar-vertical-aside-toggle-short-align,
.navbar-vertical-aside-toggle-full-align { color: var(--k-text-muted) !important; }

/* --------------------------------------------------------------------------
   6. TOP NAVBAR
   -------------------------------------------------------------------------- */
.navbar.navbar-container,
#header.navbar,
.navbar-bordered {
    background-color: var(--k-surface-2) !important;
    border-bottom: 1px solid var(--k-line) !important;
    box-shadow: none !important;
}
.navbar .btn-ghost-secondary {
    color: var(--k-text-muted) !important;
    background: transparent !important;
}
.navbar .btn-ghost-secondary:hover {
    color: var(--k-gold) !important;
    background-color: rgba(222, 206, 185, 0.08) !important;
}
.navbar .topbar-link, .navbar .topbar-text { color: var(--k-text-muted) !important; }
.btn-status.btn-status-c1,
.btn-status {
    background-color: var(--k-oxblood-soft) !important;
    color: var(--k-ivory) !important;
    border-color: var(--k-surface-2) !important;
}
.avatar-status.avatar-status-success { background-color: var(--k-success) !important; border-color: var(--k-surface-2) !important; }
.avatar-img { border: 1px solid var(--k-line); }

/* --------------------------------------------------------------------------
   7. DROPDOWNS, MODALS, POPOVERS
   -------------------------------------------------------------------------- */
.dropdown-menu,
.navbar-dropdown-menu,
.hs-unfold-content {
    background-color: var(--k-surface-3) !important;
    border: 1px solid var(--k-line-strong) !important;
    border-radius: var(--k-radius-lg) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65) !important;
    color: var(--k-text);
}
.dropdown-item { color: var(--k-text) !important; }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(222, 206, 185, 0.10) !important;
    color: var(--k-gold) !important;
}
.dropdown-divider { border-color: var(--k-line) !important; }
.dropdown-header { color: var(--k-text-faint) !important; text-transform: uppercase; letter-spacing: var(--k-track-wide); font-size: 0.6875rem; }

.modal-content {
    background-color: var(--k-surface-2) !important;
    border: 1px solid var(--k-line-strong) !important;
    border-radius: var(--k-radius-lg) !important;
    color: var(--k-text);
}
.modal-header, .modal-footer { border-color: var(--k-line) !important; }
.modal-title { font-family: var(--k-font-display); color: var(--k-ivory) !important; font-size: 1.25rem; }
.modal-backdrop.show { background-color: #000; opacity: .78 !important; }
/* Bootstrap 4 markup is <button class="close"><span>&times;</span></button>,
   so the visible glyph lives in the span. The hover must target the span too,
   otherwise the !important on `.close span` pins it and hover never shows. */
.close, .close span { color: var(--k-text-muted) !important; text-shadow: none !important; opacity: 1; }
.close:hover, .close:hover span,
.close:focus, .close:focus span { color: var(--k-gold) !important; }

.popover, .tooltip-inner {
    background-color: var(--k-surface-4) !important;
    color: var(--k-text) !important;
    border-color: var(--k-line-strong) !important;
}
.tooltip .arrow::before { border-top-color: var(--k-surface-4) !important; border-bottom-color: var(--k-surface-4) !important; }

/* --------------------------------------------------------------------------
   8. TABLES
   -------------------------------------------------------------------------- */
.table {
    color: var(--k-text) !important;
    border-color: var(--k-line) !important;
}
.table thead th {
    background-color: var(--k-surface-3) !important;
    color: var(--k-text-muted) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--k-line-strong) !important;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}
.table td, .table th {
    border-top: 1px solid var(--k-line-faint) !important;
    padding: 0.8125rem 1rem;
    vertical-align: middle;
}
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover,
.table-hover tbody tr:hover {
    background-color: rgba(222, 206, 185, 0.045) !important;
    color: var(--k-ivory) !important;
}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.018) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--k-line) !important; }
.table .btn-link { color: var(--k-gold) !important; }
.table-align-middle td { vertical-align: middle; }

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--k-text-muted) !important; }

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
textarea.form-control {
    background-color: var(--k-obsidian) !important;
    border: 1px solid var(--k-line) !important;
    color: var(--k-text) !important;
    border-radius: var(--k-radius) !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
    background-color: var(--k-obsidian) !important;
    border-color: var(--k-gold) !important;
    box-shadow: 0 0 0 3px rgba(222, 206, 185, 0.14) !important;
    color: var(--k-ivory) !important;
    outline: none;
}
.form-control::placeholder { color: var(--k-text-faint) !important; opacity: 1; }
.form-control:disabled, .form-control[readonly] {
    background-color: var(--k-surface-3) !important;
    color: var(--k-text-muted) !important;
}
.input-label, .col-form-label, label { color: var(--k-text-muted) !important; }
.input-group-text {
    background-color: var(--k-surface-3) !important;
    border-color: var(--k-line) !important;
    color: var(--k-text-muted) !important;
}
.form-text, .form-hint { color: var(--k-text-faint) !important; }
.is-invalid, .form-control.is-invalid { border-color: var(--k-danger) !important; }
.invalid-feedback { color: var(--k-danger) !important; }

/* Checkboxes / radios / switches */
.custom-control-label { color: var(--k-text) !important; }
.custom-control-label::before {
    background-color: var(--k-obsidian) !important;
    border-color: var(--k-line-strong) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--k-gold) !important;
    border-color: var(--k-gold) !important;
}
.custom-control-input:checked ~ .custom-control-label::after { color: var(--k-obsidian); }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230B0B0F' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(222, 206, 185, 0.16) !important;
}
.toggle-switch-input:checked + .toggle-switch-label { background-color: var(--k-gold) !important; }
.toggle-switch-label { background-color: var(--k-surface-4) !important; }

/* Select2 */
.select2-dropdown {
    background-color: var(--k-surface-3) !important;
    border-color: var(--k-line-strong) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(222, 206, 185, 0.14) !important;
    color: var(--k-gold) !important;
}
.select2-container--default .select2-results__option { color: var(--k-text) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--k-text) !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--k-obsidian) !important;
    border-color: var(--k-line) !important;
    color: var(--k-text) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(222, 206, 185, 0.14) !important;
    border-color: var(--k-line-strong) !important;
    color: var(--k-gold) !important;
}

/* --------------------------------------------------------------------------
   10. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--k-radius) !important;
    font-weight: 500;
    letter-spacing: var(--k-track);
    font-size: 0.8125rem;
    transition: all .18s ease;
}
.btn-primary {
    background-color: var(--k-gold) !important;
    border-color: var(--k-gold) !important;
    color: var(--k-obsidian) !important;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--k-gold-bright) !important;
    border-color: var(--k-gold-bright) !important;
    color: var(--k-obsidian) !important;
    box-shadow: 0 0 0 3px rgba(222, 206, 185, 0.18) !important;
}
.btn-outline-primary {
    color: var(--k-gold) !important;
    border-color: var(--k-line-strong) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background-color: rgba(222, 206, 185, 0.10) !important;
    border-color: var(--k-gold) !important;
    color: var(--k-gold-bright) !important;
}
.btn-secondary, .btn-light, .btn-default {
    background-color: var(--k-surface-3) !important;
    border-color: var(--k-line) !important;
    color: var(--k-text) !important;
}
.btn-secondary:hover, .btn-light:hover {
    background-color: var(--k-surface-4) !important;
    color: var(--k-ivory) !important;
}
.btn-danger  { background-color: var(--k-oxblood) !important; border-color: var(--k-oxblood) !important; color: var(--k-ivory) !important; }
.btn-danger:hover { background-color: var(--k-oxblood-soft) !important; border-color: var(--k-oxblood-soft) !important; }
.btn-success { background-color: var(--k-success) !important; border-color: var(--k-success) !important; color: var(--k-obsidian) !important; }
.btn-warning { background-color: var(--k-warning) !important; border-color: var(--k-warning) !important; color: var(--k-obsidian) !important; }
.btn-info    { background-color: var(--k-info) !important; border-color: var(--k-info) !important; color: var(--k-obsidian) !important; }
.btn-link { color: var(--k-gold) !important; }
.btn-ghost-primary { color: var(--k-gold) !important; background: transparent !important; }
.btn-ghost-primary:hover { background-color: rgba(222, 206, 185, 0.10) !important; }
.btn-white {
    background-color: var(--k-surface-3) !important;
    border-color: var(--k-line) !important;
    color: var(--k-text) !important;
}
.btn-white:hover { background-color: var(--k-surface-4) !important; color: var(--k-ivory) !important; }
.btn-icon { color: var(--k-text-muted); }
.btn:focus { box-shadow: 0 0 0 3px rgba(222, 206, 185, 0.16) !important; }

/* --------------------------------------------------------------------------
   11. BADGES & STATUS
   -------------------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: var(--k-track); border-radius: 3px; padding: 0.35em 0.6em; }
.badge-primary { background-color: var(--k-gold) !important; color: var(--k-obsidian) !important; }
.badge-soft-primary, .badge-soft-c1 {
    background-color: rgba(222, 206, 185, 0.12) !important;
    color: var(--k-gold) !important;
}
.badge-soft-success { background-color: var(--k-success-bg) !important; color: var(--k-success) !important; }
.badge-soft-danger  { background-color: var(--k-danger-bg) !important;  color: var(--k-danger) !important; }
.badge-soft-warning { background-color: var(--k-warning-bg) !important; color: var(--k-warning) !important; }
.badge-soft-info    { background-color: var(--k-info-bg) !important;    color: var(--k-info) !important; }
.badge-success { background-color: var(--k-success) !important; color: var(--k-obsidian) !important; }
.badge-danger  { background-color: var(--k-danger) !important;  color: var(--k-obsidian) !important; }
.badge-warning { background-color: var(--k-warning) !important; color: var(--k-obsidian) !important; }
.badge-info    { background-color: var(--k-info) !important;    color: var(--k-obsidian) !important; }
.badge-dark, .badge-secondary { background-color: var(--k-surface-4) !important; color: var(--k-text) !important; }

/* --------------------------------------------------------------------------
   12. NAV, TABS, PAGINATION, ALERTS
   -------------------------------------------------------------------------- */
.nav-tabs { border-bottom-color: var(--k-line) !important; }
.nav-tabs .nav-link {
    color: var(--k-text-muted) !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    letter-spacing: var(--k-track);
}
.nav-tabs .nav-link:hover { color: var(--k-ivory) !important; }
.nav-tabs .nav-link.active {
    color: var(--k-gold) !important;
    background: transparent !important;
    border-bottom-color: var(--k-gold) !important;
}

.page-link {
    background-color: var(--k-surface-2) !important;
    border-color: var(--k-line) !important;
    color: var(--k-text-muted) !important;
}
.page-link:hover { background-color: var(--k-surface-3) !important; color: var(--k-gold) !important; }
.page-item.active .page-link {
    background-color: var(--k-gold) !important;
    border-color: var(--k-gold) !important;
    color: var(--k-obsidian) !important;
}
.page-item.disabled .page-link { background-color: var(--k-surface) !important; color: var(--k-text-faint) !important; }

.alert { border-radius: var(--k-radius); border-width: 1px; }
.alert-success { background-color: var(--k-success-bg) !important; border-color: rgba(74,222,128,.3) !important; color: var(--k-success) !important; }
.alert-danger  { background-color: var(--k-danger-bg) !important;  border-color: rgba(248,113,113,.3) !important; color: var(--k-danger) !important; }
.alert-warning { background-color: var(--k-warning-bg) !important; border-color: rgba(251,191,92,.3) !important; color: var(--k-warning) !important; }
.alert-info    { background-color: var(--k-info-bg) !important;    border-color: rgba(125,211,232,.3) !important; color: var(--k-info) !important; }
.alert-primary { background-color: rgba(222,206,185,.10) !important; border-color: var(--k-line-strong) !important; color: var(--k-gold) !important; }

/* Toastr */
#toast-container > div { box-shadow: 0 12px 32px rgba(0,0,0,.6) !important; opacity: 1; border-radius: var(--k-radius); }
#toast-container > .toast-success { background-color: #12341F !important; border-left: 3px solid var(--k-success); color: var(--k-ivory) !important; }
#toast-container > .toast-error   { background-color: #3A1414 !important; border-left: 3px solid var(--k-danger);  color: var(--k-ivory) !important; }
#toast-container > .toast-warning { background-color: #3A2C12 !important; border-left: 3px solid var(--k-warning); color: var(--k-ivory) !important; }
#toast-container > .toast-info    { background-color: #122C34 !important; border-left: 3px solid var(--k-info);    color: var(--k-ivory) !important; }

/* SweetAlert2.
   ~24 views pass `confirmButtonColor: '#FC6A57'`, which SweetAlert applies as an
   inline style. Overriding here with `!important` rebrands every dialog without
   touching those call sites — and lets us fix the contrast at the same time:
   SweetAlert renders white button text, which on champagne gold would be 1.4:1.
   Confirm buttons therefore get obsidian text on gold. */
.swal2-popup, .sweet-alert {
    background-color: var(--k-surface-2) !important;
    border: 1px solid var(--k-line-strong) !important;
    color: var(--k-text) !important;
    border-radius: var(--k-radius-lg) !important;
}
.swal2-title, .sweet-alert h2 { color: var(--k-ivory) !important; font-family: var(--k-font-display); }
.swal2-html-container, .swal2-content, .sweet-alert p { color: var(--k-text-muted) !important; }
.swal2-actions .swal2-confirm,
.swal2-confirm.btn {
    background-color: var(--k-gold) !important;
    background-image: none !important;
    border-color: var(--k-gold) !important;
    color: var(--k-obsidian) !important;
    font-weight: 600;
    letter-spacing: var(--k-track);
    border-radius: var(--k-radius) !important;
}
.swal2-actions .swal2-cancel,
.swal2-cancel.btn {
    background-color: var(--k-surface-4) !important;
    background-image: none !important;
    border-color: var(--k-line-strong) !important;
    color: var(--k-text) !important;
    border-radius: var(--k-radius) !important;
}
.swal2-actions .swal2-deny {
    background-color: var(--k-oxblood) !important;
    background-image: none !important;
    color: var(--k-ivory) !important;
}
.swal2-icon.swal2-warning { border-color: var(--k-warning) !important; color: var(--k-warning) !important; }
.swal2-icon.swal2-question { border-color: var(--k-gold) !important; color: var(--k-gold) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--k-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(74, 222, 128, .35) !important; }
.swal2-icon.swal2-error { border-color: var(--k-danger) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--k-danger) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
    background-color: var(--k-obsidian) !important;
    border: 1px solid var(--k-line) !important;
    color: var(--k-text) !important;
}
.swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .78) !important; }

/* --------------------------------------------------------------------------
   13. FOOTER, LOADER, MISC
   -------------------------------------------------------------------------- */
.footer {
    background-color: var(--k-surface) !important;
    border-top: 1px solid var(--k-line) !important;
    color: var(--k-text-muted) !important;
}
.footer a { color: var(--k-text-muted) !important; }
.footer a:hover { color: var(--k-gold) !important; }

/* Brand loader — replaces the stock loader.gif markup in the layout.
   Centring is done on the inner element with absolute + transform rather than
   flex, because the existing views toggle this overlay with jQuery `.show()`,
   which writes `display:block` as an inline style and would defeat flex. */
#loading {
    position: fixed;
    /* Physical offsets before `inset` — the cashier terminals running the
       local printer bridge may predate Chrome 87 / Safari 14.1, where a bare
       `inset` is ignored and the overlay collapses to content size. */
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 99999;
    background: var(--k-obsidian);
    display: none;
}
#loading > div {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: auto !important;
    text-align: center;
}
.k-loader-mark { width: 148px; height: 148px; display: block; margin: 0 auto; }
.k-loader-word {
    margin-top: 1.25rem;
    font-family: var(--k-font-display);
    font-size: 1rem;
    letter-spacing: var(--k-track-wide);
    text-transform: uppercase;
    color: var(--k-gold);
}
@media (prefers-reduced-motion: reduce) {
    .k-loader-mark { animation: none !important; }
}

.progress { background-color: var(--k-surface-3) !important; }
.progress-bar { background-color: var(--k-gold) !important; }
.list-group-item {
    background-color: var(--k-surface-2) !important;
    border-color: var(--k-line) !important;
    color: var(--k-text) !important;
}
.breadcrumb { background-color: transparent !important; }
.breadcrumb-item, .breadcrumb-item a { color: var(--k-text-muted) !important; }
.breadcrumb-item.active { color: var(--k-gold) !important; }
.custom-file-label {
    background-color: var(--k-obsidian) !important;
    border-color: var(--k-line) !important;
    color: var(--k-text-muted) !important;
}
.custom-file-label::after {
    background-color: var(--k-surface-3) !important;
    color: var(--k-text) !important;
}
.dropzone, .dz-default {
    background-color: var(--k-obsidian) !important;
    border: 1px dashed var(--k-line-strong) !important;
    color: var(--k-text-muted) !important;
}
.daterangepicker {
    background-color: var(--k-surface-3) !important;
    border-color: var(--k-line-strong) !important;
    color: var(--k-text) !important;
}
.daterangepicker td.available:hover { background-color: rgba(222,206,185,.14) !important; }
.daterangepicker td.active { background-color: var(--k-gold) !important; color: var(--k-obsidian) !important; }

/* The Front "style switcher" panel is dead UI with broken image paths. */
#styleSwitcherDropdown, .direction-toggle + #styleSwitcherDropdown { display: none !important; }

/* FullCalendar (business-settings → time schedule). Unlike the main theme
   stylesheet, vendor.min.css genuinely does read CSS custom properties for
   this widget, so re-pointing the tokens is enough — no selector overrides. */
.fc {
    --fc-page-bg-color: var(--k-surface-2);
    --fc-neutral-bg-color: var(--k-surface-3);
    --fc-neutral-text-color: var(--k-text-muted);
    --fc-border-color: var(--k-line);
    --fc-event-bg-color: var(--k-gold);
    --fc-event-border-color: var(--k-gold);
    --fc-event-text-color: var(--k-obsidian);
    --fc-today-bg-color: rgba(222, 206, 185, 0.08);
    --fc-list-event-hover-bg-color: rgba(222, 206, 185, 0.10);
    color: var(--k-text);
}
.fc .fc-toolbar-title { color: var(--k-ivory); font-family: var(--k-font-display); }
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number { color: var(--k-text-muted); }

/* Charts */
.apexcharts-canvas text,
.apexcharts-legend-text { fill: var(--k-text-muted) !important; color: var(--k-text-muted) !important; }
.apexcharts-gridline { stroke: var(--k-line-faint) !important; }
.apexcharts-tooltip {
    background: var(--k-surface-4) !important;
    border: 1px solid var(--k-line-strong) !important;
    color: var(--k-text) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
}
.apexcharts-tooltip-title { background: var(--k-surface-3) !important; border-color: var(--k-line) !important; }

/* --------------------------------------------------------------------------
   14. LOGIN
   -------------------------------------------------------------------------- */
body.k-auth {
    background: var(--k-obsidian) !important;
    min-height: 100vh;
}
.k-auth .auth-wrapper {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}
.k-auth .auth-wrapper-left {
    flex: 1 1 52%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(222, 206, 185, 0.09), transparent 62%),
        var(--k-obsidian);
    border-right: 1px solid var(--k-line);
    overflow: hidden;
}
html[dir="rtl"] .k-auth .auth-wrapper-left {
    border-right: 0;
    border-left: 1px solid var(--k-line);
}
/* Faint engraved monogram behind the panel. */
.k-auth .auth-wrapper-left::after {
    content: "";
    position: absolute;
    width: 150%;
    padding-bottom: 150%;
    left: -25%;
    top: -25%;
    background: url('../svg/kythu-monogram.svg') center/contain no-repeat;
    color: var(--k-gold);
    opacity: 0.022;
    pointer-events: none;
}
.k-auth .auth-left-cont { position: relative; z-index: 1; text-align: center; max-width: 480px; }
.k-auth .k-auth-mark { width: 116px; height: auto; color: var(--k-gold); margin-bottom: 2rem; }
.k-auth .k-auth-wordmark {
    font-family: var(--k-font-display);
    font-size: 3.25rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--k-gold);
    margin: 0 0 0.5rem;
    text-indent: 0.34em;
}
.k-auth .k-auth-tagline {
    font-size: 0.6875rem;
    letter-spacing: var(--k-track-wide);
    text-transform: uppercase;
    color: var(--k-text-faint);
    margin-bottom: 2.25rem;
}
.k-auth .k-auth-rule {
    width: 64px;
    height: 1px;
    background: var(--k-gold);
    opacity: .55;
    margin: 0 auto 2.25rem;
}
.k-auth .k-auth-statement {
    font-family: var(--k-font-display);
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--k-text);
    font-weight: 300;
}

.k-auth .auth-wrapper-right {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--k-surface);
}
.k-auth .auth-wrapper-form { width: 100%; max-width: 400px; }
.k-auth .auth-header .title {
    font-family: var(--k-font-display);
    font-size: 2rem;
    color: var(--k-ivory) !important;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}
.k-auth .auth-header .badge {
    background: rgba(222, 206, 185, 0.10);
    color: var(--k-gold) !important;
    letter-spacing: var(--k-track);
}
/* The captcha bitmap carries its own opaque background from the generator.
   Don't recolour it — filtering the glyphs hurts legibility, which defeats the
   point. Just give it a neutral frame that matches the inputs beside it. */
.k-auth .input-icons {
    background: var(--k-obsidian) !important;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius);
    overflow: hidden;
}
.k-auth .default-recaptcha { max-height: 46px; width: auto; }
.k-auth .re-captcha { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.k-auth .tio-refresh { color: var(--k-gold); cursor: pointer; }
.k-auth #signInBtn { margin-top: 0.5rem; padding: 0.75rem; letter-spacing: var(--k-track-wide); text-transform: uppercase; }

@media (max-width: 991.98px) {
    .k-auth .auth-wrapper { flex-direction: column; }
    .k-auth .auth-wrapper-left { flex: 0 0 auto; padding: 3rem 1.5rem 2rem; border-right: 0; border-bottom: 1px solid var(--k-line); }
    html[dir="rtl"] .k-auth .auth-wrapper-left { border-left: 0; border-bottom: 1px solid var(--k-line); }
    .k-auth .k-auth-statement { display: none; }
    .k-auth .k-auth-wordmark { font-size: 2.25rem; }
    .k-auth .k-auth-mark { width: 80px; margin-bottom: 1.25rem; }
}

/* --------------------------------------------------------------------------
   15. PRINT

   Load-bearing, not cosmetic. `admin-views/order/invoice.blade.php` prints by
   assigning the receipt markup into `document.body.innerHTML` and calling
   window.print() — the print happens IN THIS DOCUMENT, so every rule above is
   still live against the receipt. Without this block a thermal receipt renders
   champagne-gold and ivory text on white paper: the store name, address, order
   ID and the ZATCA VAT number all come out blank or unreadable.

   Everything here is forced back to black on white. Keep this block last.
   -------------------------------------------------------------------------- */
@media print {
    html, body,
    body.footer-offset,
    #printableArea, #printableArea *,
    .content, .container-fluid, .card, .card-body, .card-header, .card-footer,
    .modal-content, .table, .table td, .table th, .table thead th {
        background: #FFF !important;
        background-color: #FFF !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    h1, h2, h3, h4, h5, h6,
    p, span, div, li, td, th, label, small, strong, em, a,
    .text-dark, .text-muted, .text-body, .text-secondary,
    .text-primary, .c1, .text-c1, .text-c2, .c2, .text-white,
    .dashboard--card__title, .order-stats__title, .order-stats__subtitle {
        color: #000 !important;
        letter-spacing: normal !important;
    }

    hr,
    .border, .border-top, .border-bottom, .border-left, .border-right,
    .border-primary, .table-bordered, .table-bordered td, .table-bordered th {
        border-color: #000 !important;
    }

    /* Receipts use the app's own type, not the display serif — and the
       Google Fonts @import may not have resolved on an offline terminal. */
    #printableArea, #printableArea * {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    }

    /* The ZATCA QR is a data: URI <img>; never filter or invert it. */
    #printableArea img,
    img[src^="data:image"] {
        filter: none !important;
        opacity: 1 !important;
    }

    /* Chrome-only, but the one that actually decides whether backgrounds print. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Nothing from the chrome should reach paper. */
    #loading, .direction-toggle, #styleSwitcherDropdown,
    .navbar, .navbar-vertical-aside, .footer, #toast-container { display: none !important; }
}

/* --------------------------------------------------------------------------
   16. RTL
   -------------------------------------------------------------------------- */
html[dir="rtl"] body { line-height: 1.85; }

/* Arabic letterforms join cursively — tracking pulls the joins apart and makes
   the text materially harder to read. Nothing in the Arabic UI may be tracked.
   This covers every selector in this file that sets letter-spacing; the
   Latin-only wordmark is re-exempted immediately below. */
html[dir="rtl"] .nav-subtitle,
html[dir="rtl"] .nav-subtitle-replacer,
html[dir="rtl"] .input-label,
html[dir="rtl"] .table thead th,
html[dir="rtl"] .card-subtitle,
html[dir="rtl"] .dashboard--card__subtitle,
html[dir="rtl"] .order-stats__subtitle,
html[dir="rtl"] .dropdown-header,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .card-title, html[dir="rtl"] .card-header-title,
html[dir="rtl"] .btn,
html[dir="rtl"] .badge,
html[dir="rtl"] .nav-tabs .nav-link,
html[dir="rtl"] .navbar-vertical .nav-link,
html[dir="rtl"] .option-select-btn li label span,
html[dir="rtl"] .swal2-confirm,
html[dir="rtl"] .swal2-cancel,
html[dir="rtl"] .k-loader-word,
html[dir="rtl"] .k-auth-tagline,
html[dir="rtl"] .k-auth #signInBtn,
html[dir="rtl"] .page-header .btn {
    letter-spacing: 0 !important;
}
/* "KYTHU" is always set in Latin, so it keeps its tracking in both directions. */
html[dir="rtl"] .k-auth .k-auth-wordmark { letter-spacing: 0.34em !important; }
html[dir="rtl"] .tio-first-page,
html[dir="rtl"] .tio-last-page,
html[dir="rtl"] .tio-chevron-left,
html[dir="rtl"] .tio-chevron-right { transform: scaleX(-1); }