/*!
 * The Momo Hub - Admin UI Enhancement Layer
 * A presentation-only override layer on top of Bootstrap 3 / SB Admin 2.
 * This file only restyles existing markup - no behaviour, ids, class hooks
 * or scripts are changed by it.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
    /* --brand is the literal brand colour -- solid fills, borders, and
       foregrounds on dark surfaces (sidebar/topbar). It's a light, high-
       luminance yellow, so text/icons placed directly on top of a solid
       --brand fill use --ink (dark), not white -- white-on-yellow falls
       far short of readable contrast. --brand-dark is a deep gold tuned
       for the opposite case: brand-coloured text/icons/borders sitting on
       white or near-white surfaces (links, hover states, focus rings),
       where the base yellow itself would be too pale to read. */
    --brand:          #ffc800;
    --brand-dark:     #7a6000;
    --brand-light:    #ffdb4d;
    --brand-tint:     #fff7df;

    --sidebar-bg:     #151d2c;
    --sidebar-bg-alt: #1d283b;
    --sidebar-line:   rgba(255, 255, 255, .06);
    --sidebar-text:   #9fadc2;
    --sidebar-hover:  #ffffff;

    --ink:            #1f2937;
    --ink-soft:       #5b6675;
    --ink-muted:      #8b95a5;

    --canvas:         #f4f6fa;
    --surface:        #ffffff;
    --line:           #e6eaf0;
    --line-soft:      #eef1f6;

    --ok:             #1f9d55;
    --warn:           #d9932b;
    --info:           #2b7fd4;
    --danger:         #d64545;
    --neutral:        #7a869a;

    --radius:         10px;
    --radius-sm:      7px;
    --shadow-sm:      0 1px 2px rgba(16, 24, 40, .05);
    --shadow:         0 1px 3px rgba(16, 24, 40, .07), 0 6px 18px -8px rgba(16, 24, 40, .12);
    --shadow-lg:      0 12px 32px -10px rgba(16, 24, 40, .22);
    --ease:           cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html {
    /* Keep in-page anchor targets clear of the fixed top bar. */
    scroll-padding-top: 70px;
}

/* Opening a Bootstrap 3 modal locks body scrolling and pads the body by the
   scrollbar width. A fixed top bar ignores body padding, so it would widen by
   ~10px the moment a modal opens. Reserving the scrollbar gutter permanently
   keeps the viewport width constant, which makes that compensation redundant.
   Guarded so browsers without gutter support keep Bootstrap's own behaviour. */
@supports (scrollbar-gutter: stable) {
    html { scrollbar-gutter: stable; }
    body.modal-open { padding-right: 0 !important; }
}

body {
    background-color: var(--canvas);
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

a { color: var(--brand-dark); transition: color .16s var(--ease); }
a:hover, a:focus { color: var(--ink); text-decoration: none; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand-dark);
    outline-offset: 2px;
}

hr { border-top-color: var(--line-soft); }

::selection { background: rgba(255, 200, 0, .35); }

/* Refined scrollbars where supported */
* { scrollbar-width: thin; scrollbar-color: #c6cedb transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #c6cedb;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #aab4c4; background-clip: content-box; }

/* ==========================================================================
   3. Top bar
   ========================================================================== */
#wrapper > .navbar-static-top {
    background: var(--surface);
    border: 0;
    border-radius: 0;
    min-height: 56px;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 20;
}

/* The sidebar is fixed from 768px up, so the top bar has to be pinned too --
   otherwise the dark brand block scrolls away and splits the column in two.
   Below the breakpoint the sidebar is in flow inside this nav, so the whole
   bar scrolls with the page as before and the collapse menu still pushes. */
@media (min-width: 768px) {
    #wrapper > .navbar-static-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
    }
}

/* The hairline stops where the dark brand block begins, so the brand block
   and the sidebar below it read as one continuous column. */
#wrapper > .navbar-static-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--line);
}

/* --- Brand block: matches the sidebar, not the top bar -------------------- */
.navbar-default .navbar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding-right: 10px;
    background: var(--sidebar-bg);
    position: relative;
    z-index: 1;
}

.navbar-default .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 13px 16px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 11px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus { color: #fff; }

.navbar-brand__mark {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink);
    background: linear-gradient(150deg, var(--brand-light), var(--brand));
    box-shadow: 0 4px 10px -4px rgba(255, 200, 0, .5);
}
.navbar-brand__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .navbar-default .navbar-header {
        width: 250px;
        padding-right: 0;
    }
    #wrapper > .navbar-static-top::after { left: 250px; }
}

/* Hamburger sits on the dark block, so it reads light */
.navbar-default .navbar-toggle {
    float: none;
    margin: 0;
    padding: 7px 9px;
    border-color: rgba(255, 255, 255, .18);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: rgba(255, 255, 255, .14); }
.navbar-default .navbar-toggle .icon-bar { background-color: #cbd4e2; }

/* --- Sidebar collapse toggle --------------------------------------------- */
/* Desktop only: below 768px the sidebar is already a collapsible navbar
   menu driven by the hamburger inside .navbar-header. */
.sidebar-toggle { display: none; }

@media (min-width: 768px) {
    .sidebar-toggle {
        display: inline-flex;
        float: left;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin: 9px 0 0 12px;
        padding: 0;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--ink-soft);
        font-size: 16px;
        transition: background-color .16s var(--ease), color .16s var(--ease);
    }
    .sidebar-toggle:hover,
    .sidebar-toggle:focus {
        background: var(--brand-tint);
        color: var(--brand-dark);
    }
}

/* --- Top bar links ------------------------------------------------------- */
.navbar-top-links {
    display: flex;
    align-items: stretch;
    margin-right: 0;
    padding-right: 6px;
}
.navbar-top-links > li { display: flex; }
.navbar-top-links li:last-child { margin-right: 0; }

.navbar-top-links li a {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    color: var(--ink-soft);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color .16s var(--ease), background-color .16s var(--ease),
                border-color .16s var(--ease);
}
.navbar-top-links li a:hover,
.navbar-top-links li a:focus,
.navbar-top-links .open > a {
    color: var(--brand-dark);
    background-color: var(--brand-tint);
}
/* sb-admin-2.js flags the link matching the current URL */
.navbar-top-links > li > a.active {
    color: var(--brand-dark);
    background-color: var(--brand-tint);
    border-bottom-color: var(--brand-dark);
}
.navbar-top-links li a .fa { font-size: 14px; }

/* --- User menu ----------------------------------------------------------- */
.topbar-user { border-left: 1px solid var(--line); }
.topbar-user > a { padding: 0 14px; }

.topbar-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--brand-light), var(--brand));
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 10px -5px rgba(255, 200, 0, .5);
}

.topbar-user__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
    min-width: 0;
    text-align: left;
}
.topbar-user__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    transition: color .16s var(--ease);
}
.topbar-user__role {
    font-size: 11px;
    color: var(--ink-muted);
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.topbar-user > a:hover .topbar-user__name,
.topbar-user.open .topbar-user__name { color: var(--brand-dark); }

.topbar-user__caret {
    font-size: 15px;
    opacity: .5;
    transition: transform .18s var(--ease);
}
.topbar-user.open .topbar-user__caret { transform: rotate(180deg); opacity: .9; }

.navbar-top-links .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin-top: 2px;
}
.navbar-top-links .dropdown-menu li a {
    min-height: 0;
    padding: 9px 12px;
    border-radius: 6px;
    border-bottom: 0;
    font-weight: 500;
    color: var(--ink-soft);
}
.navbar-top-links .dropdown-menu li a:hover,
.navbar-top-links .dropdown-menu li a.active {
    background: var(--brand-tint);
    color: var(--brand-dark);
}
.navbar-top-links .dropdown-menu li a .fa { opacity: .75; }
.navbar-top-links .dropdown-menu .divider {
    background-color: var(--line-soft);
    margin: 6px 4px;
}
.navbar-top-links .dropdown-menu li a.dropdown-item--danger { color: var(--danger); }
.navbar-top-links .dropdown-menu li a.dropdown-item--danger:hover {
    background: #fdeded;
    color: #b93838;
}

/* Narrow screens: shed the labels, keep the affordances */
@media (max-width: 767px) {
    /* .navbar-right doesn't float below the breakpoint, so align it manually
       to line up with the hamburger above it. */
    .navbar-top-links { justify-content: flex-end; }
}
@media (max-width: 600px) {
    .topbar-link__text { display: none; }
    .navbar-top-links li a { padding: 0 13px; }
}
@media (max-width: 480px) {
    .topbar-user__meta { display: none; }
    .topbar-user > a { gap: 6px; }
}

/* ==========================================================================
   4. Sidebar
   ========================================================================== */
.navbar-default .sidebar,
.sidebar {
    background: var(--sidebar-bg);
}

@media (min-width: 768px) {
    .sidebar {
        margin-top: 56px;
        width: 250px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 28px;
        box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
        scrollbar-color: rgba(255, 255, 255, .18) transparent;
    }
    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .16);
        background-clip: content-box;
    }
    /* Bootstrap 3 caps .navbar-collapse at 340px; the sidebar scrolls itself instead. */
    .sidebar .sidebar-nav.navbar-collapse {
        max-height: none;
        overflow: visible;
    }
}

.sidebar .sidebar-nav.navbar-collapse { padding: 0; }
.sidebar ul.nav { padding: 8px 10px 0; }

.sidebar ul li { border-bottom: 0; }

.sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    transition: background-color .16s var(--ease), color .16s var(--ease);
}

.sidebar ul li a .fa,
.sidebar ul li a .glyphicon {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex: 0 0 18px;
    opacity: .85;
    top: 0;
}

.sidebar ul li a:hover,
.sidebar ul li a:focus,
.sidebar ul li.active > a {
    background-color: var(--sidebar-bg-alt);
    color: var(--sidebar-hover);
}
.sidebar ul li a:hover .fa,
.sidebar ul li.active > a .fa { opacity: 1; }

/* Current page. Solid fill rather than the old two-stop gradient -- a
   fade toward transparency would blend the light brand yellow into the
   dark sidebar background at the tail end, reading as a muddy edge
   instead of a clean pill. Dark ink text/icons, since white on this
   light yellow falls short of readable contrast (see the --brand note
   in the tokens block above). */
.sidebar ul li a.active,
.sidebar ul li a.active:hover,
.sidebar ul li a.active:focus {
    background: var(--brand);
    color: var(--ink);
    box-shadow: 0 4px 12px -4px rgba(255, 200, 0, .55);
}
.sidebar ul li a.active .fa,
.sidebar ul li a.active .glyphicon { opacity: 1; }
.sidebar ul li a.active .nav-hit { color: var(--ink); }

/* Parent of the current submenu page (e.g. "Reports" while viewing
   Reports > Orders). Marked by scripts.blade.php by matching the current
   URL, not by :has(), since the target browsers here predate it. Reuses
   the same muted highlight as hover/focus so it reads as "you're in this
   section" rather than competing with the brand-coloured exact-match
   pill above. */
.sidebar ul li.has-active-child > a {
    background-color: var(--sidebar-bg-alt);
    color: var(--sidebar-hover);
}
.sidebar ul li.has-active-child > a .fa { opacity: 1; }

/* Collapsible groups */
.sidebar .arrow {
    margin-left: auto;
    font-size: 11px;
    opacity: .55;
    transition: transform .18s var(--ease);
}
.sidebar li.active > a > .arrow { opacity: .9; }

.sidebar .nav-second-level {
    padding: 2px 0 4px;
    margin-left: 12px;
    border-left: 1px solid var(--sidebar-line);
}
.sidebar .nav-second-level li a {
    padding-left: 16px;
    font-size: 13px;
    font-weight: 400;
    color: #8d9bb1;
}
.sidebar .nav-second-level li a:hover { color: #fff; }
.sidebar .nav-second-level li a .fa { font-size: 13px !important; }

/* Search */
.sidebar .sidebar-search { padding: 14px 12px 10px; }
.sidebar .sidebar-search .input-group { width: 100%; }
.sidebar .sidebar-search .form-control {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    color: #e6ebf3;
    height: 38px;
    box-shadow: none;
    font-size: 13px;
}
.sidebar .sidebar-search .form-control::placeholder { color: #75839a; }
.sidebar .sidebar-search .form-control:focus {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 200, 0, .6);
}
.sidebar .sidebar-search .btn {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--sidebar-text);
    height: 38px;
}
.sidebar .sidebar-search .btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* --- Menu search ---------------------------------------------------------- */
.sidebar .nav-label { min-width: 0; }

.sidebar .nav-hit {
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(255, 219, 77, .32);
    color: #fff;
    font-weight: 600;
}
.sidebar ul li a.active .nav-hit { background: rgba(255, 255, 255, .32); }

/* Swap the search affordance for a clear affordance once there's a query */
#sidebarSearchClear .fa::before { content: "\f002"; }
#sidebarSearchClear.is-active .fa::before { content: "\f00d"; }
#sidebarSearchClear.is-active { color: #fff; }

/* Filtering hides items outright; submenus are forced open so matches
   nested one level down are actually reachable. */
.sidebar .is-hidden { display: none !important; }
#side-menu.is-searching .nav-second-level {
    display: block !important;
    height: auto !important;
}
#side-menu.is-searching .arrow { display: none; }

.sidebar .sidebar-no-results {
    padding: 14px 14px 16px;
    color: #75839a;
    font-size: 12.5px;
    font-style: italic;
}
.sidebar .sidebar-no-results .fa { margin-right: 6px; opacity: .7; }

/* Group label */
.sidebar .nav-section {
    padding: 16px 12px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #64728a;
    pointer-events: none;
}
.sidebar .nav-section:first-child { padding-top: 6px; }

/* Mobile: the sidebar folds into the collapsed navbar */
@media (max-width: 767px) {
    .navbar-default .navbar-collapse { border-color: var(--line); }
    .sidebar { border-radius: 0; }
    .sidebar ul.nav { padding: 6px 8px 10px; }
}

/* ==========================================================================
   5. Page canvas
   ========================================================================== */
#page-wrapper {
    background-color: transparent;
    padding: 22px 26px 32px;
    /* sb-admin-2.js writes an inline min-height derived from the viewport.
       Border-box keeps our padding inside that figure instead of adding to
       it, so a short page doesn't end up with a screenful of dead scroll. */
    box-sizing: border-box;
}
@media (min-width: 768px) {
    #page-wrapper {
        margin: 0 0 0 250px;
        /* 56px clears the now-fixed top bar. */
        padding: 82px 30px 36px;
        border-left: 0;
    }
}

.page-header {
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}
.page-header a { color: inherit; }
.page-header a:hover { color: var(--brand-dark); }
.page-header small { color: var(--ink-muted); font-weight: 400; }

/* Header block with an optional right-hand slot */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.page-head__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.page-head__title a { color: var(--ink); }
.page-head__title a:hover { color: var(--brand-dark); }
.page-head__sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ink-muted);
}

/* ==========================================================================
   6. Stat cards
   ========================================================================== */
.stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
    overflow: hidden;
    transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    border-color: #dbe1ea;
}
.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--stat-accent, var(--brand));
}

.stat-card__body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
}

.stat-card__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 19px;
    color: var(--stat-accent, var(--brand-dark));
    background: var(--stat-accent-soft, var(--brand-tint));
}

.stat-card__meta { min-width: 0; }
.stat-card__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.stat-card__label {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.stat-card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding: 11px 18px;
    border-top: 1px solid var(--line-soft);
    background: #fbfcfe;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background-color .16s var(--ease), color .16s var(--ease);
}
.stat-card__link:hover,
.stat-card__link:focus {
    background: var(--stat-accent-soft, var(--brand-tint));
    color: var(--stat-accent, var(--brand-dark));
}
.stat-card__link .fa { transition: transform .18s var(--ease); }
.stat-card__link:hover .fa { transform: translateX(3px); }

.stat-card--brand   { --stat-accent: var(--brand-dark); --stat-accent-soft: var(--brand-tint); }
.stat-card--success { --stat-accent: #1f9d55; --stat-accent-soft: #eaf7f0; }
.stat-card--warning { --stat-accent: #cf8a1e; --stat-accent-soft: #fdf5e6; }
.stat-card--danger  { --stat-accent: #d64545; --stat-accent-soft: #fdeded; }
.stat-card--info    { --stat-accent: #2b7fd4; --stat-accent-soft: #ebf3fc; }

/* Keep the legacy SB Admin panels tidy if any page still uses them */
.panel .huge { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }

/* ==========================================================================
   7. Panels / cards
   ========================================================================== */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
}
.panel > .panel-heading {
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 15px 18px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.panel-default { border-color: var(--line); }
.panel-body { padding: 18px; }
.panel-footer {
    background: #fbfcfe;
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Panel heading laid out as a title + trailing toolbar */
.panel-heading--flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-height: 58px;
}
.panel-heading__title {
    display: flex;
    align-items: center;
    gap: 9px;
}
.panel-heading__title .fa { color: var(--brand-dark); }
.panel-heading__count {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.panel-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.panel-toolbar .form-control,
.panel-toolbar .select2-container { min-width: 210px; }

/* ==========================================================================
   8. Tables
   ========================================================================== */
.table-wrap {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-wrap > .table { margin-bottom: 0; border: 0; }

.table > thead > tr > th {
    background: #f7f9fc;
    border-bottom: 1px solid var(--line) !important;
    border-top: 0;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    padding: 11px 12px;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--line-soft);
    padding: 12px;
    vertical-align: middle;
    color: var(--ink);
}
.table-hover > tbody > tr:hover { background-color: #f8fafd; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fcfdfe; }
.table-striped > tbody > tr:nth-of-type(odd):hover { background-color: #f8fafd; }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--line-soft); }

.cell-removed {
    color: var(--ink-muted);
    font-size: 12px;
    font-style: italic;
}
.cell-strong { font-weight: 600; }
.cell-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

.table-empty {
    padding: 44px 16px;
    text-align: center;
    color: var(--ink-muted);
}
.table-empty .fa { font-size: 30px; opacity: .35; display: block; margin-bottom: 10px; }

/* Retained from the previous theme: DataTables header treatment */
table#dataTables-example tr th {
    text-align: center;
    vertical-align: middle;
    background: var(--brand);
    color: var(--ink);
    border-color: rgba(0, 0, 0, .12) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    box-shadow: none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--ink-muted); font-size: 13px; }

/* ==========================================================================
   9. Badges & status pills
   ========================================================================== */
.badge,
span.badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .01em;
    background-color: var(--neutral);
    color: #fff;
}
.badge-pill { border-radius: 999px; }

span.badge-success { background: var(--ok); }
span.badge-warning { background: var(--warn); color: #fff; }
span.badge-primary { background: var(--info); }
span.badge-info    { background: #3aa8c1; }
span.badge-default { background: var(--neutral); }
span.badge-danger  { background: var(--danger); }

.badge hr {
    margin: 3px 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
}
/* Multi-line status pills read better as a rounded rect than a long oval */
.badge-stack,
span.badge-stack {
    display: inline-block;
    max-width: 190px;
    padding: 5px 10px;
    border-radius: 8px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}

/* ==========================================================================
   10. Buttons
   ========================================================================== */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    padding: 7px 14px;
    border-width: 1px;
    box-shadow: none;
    transition: background-color .16s var(--ease), border-color .16s var(--ease),
                color .16s var(--ease), box-shadow .16s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-xs { padding: 3px 9px; font-size: 11.5px; border-radius: 6px; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-lg { padding: 11px 22px; font-size: 15px; border-radius: var(--radius); }

.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    /* Bootstrap's own .btn-primary sets white text for a dark-blue fill;
       our --brand is a light yellow, so it needs a dark foreground instead. */
    color: var(--ink);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    /* A step darker than --brand for the pressed feel, but not as dark as
       --brand-dark -- that shade is tuned for text on white and is too
       dark for the --ink label sitting on top of this fill to stay readable. */
    background-color: #e6b400;
    border-color: #e6b400;
    box-shadow: 0 4px 12px -5px rgba(255, 200, 0, .55);
}

.btn-default {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink-soft);
}
.btn-default:hover,
.btn-default:focus { background-color: #f6f8fb; border-color: #d6dde7; color: var(--ink); }

.btn-success { background-color: var(--ok); border-color: var(--ok); }
.btn-success:hover, .btn-success:focus { background-color: #178043; border-color: #178043; }
.btn-danger  { background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:focus { background-color: #b93838; border-color: #b93838; }
.btn-info    { background-color: var(--info); border-color: var(--info); }
.btn-warning { background-color: var(--warn); border-color: var(--warn); }

/* Square icon-only action button */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   11. Forms
   ========================================================================== */
.form-control {
    height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--ink);
    font-size: 13.5px;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.form-control:focus {
    border-color: var(--brand-dark);
    box-shadow: 0 0 0 3px rgba(255, 200, 0, .25);
}
.form-control::placeholder { color: #a8b1bf; }
label { font-weight: 600; font-size: 13px; color: var(--ink-soft); }

.field-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 3px;
}

.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    color: var(--ink);
    font-size: 13.5px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-dark);
}
.select2-dropdown {
    border-color: var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand);
    color: var(--ink);
}

/* ==========================================================================
   12. Pagination (Laravel ships Bootstrap 4 markup)
   ========================================================================== */
.pagination { margin: 18px 0 4px; display: inline-flex; flex-wrap: wrap; gap: 4px; padding-left: 0; }
.pagination > li, .pagination .page-item { display: inline-block; }
.pagination > li > a,
.pagination > li > span,
.pagination .page-link {
    position: relative;
    display: block;
    min-width: 34px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm) !important;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin-left: 0;
    transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.pagination > li > a:hover,
.pagination .page-link:hover {
    background: var(--brand-tint);
    border-color: #ffe38a;
    color: var(--brand-dark);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination .page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink);
}
.pagination > .disabled > span,
.pagination .page-item.disabled .page-link {
    color: #b9c1cd;
    background: #f7f9fc;
    border-color: var(--line-soft);
}
nav[role="navigation"] p.text-sm { color: var(--ink-muted); font-size: 13px; }

/* ==========================================================================
   13. Modal
   ========================================================================== */
.modal-content {
    border: 0;
    border-radius: var(--radius);
    box-shadow: 0 24px 60px -18px rgba(16, 24, 40, .35);
}
.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-soft);
}
.modal-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modal-header .close { font-size: 24px; opacity: .4; text-shadow: none; }
.modal-header .close:hover { opacity: .8; }
.modal-body { padding: 18px 20px; }
.modal-backdrop.in { opacity: .45; }

/* Order-items modal detail blocks */
.detail-card {
    background: #fafbfd;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.detail-card__title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 9px;
}
.detail-card label {
    display: block;
    margin: 0 0 3px;
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-soft);
}
.detail-card .detail-strong { color: var(--ink); font-weight: 600; }

.order-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}
.order-line:last-child { border-bottom: 0; }
.order-line__index {
    flex: 0 0 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--brand-tint);
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 700;
}
.order-line__name { flex: 1 1 auto; color: var(--ink); }
.order-line__qty { color: var(--ink-muted); font-size: 12px; white-space: nowrap; }
.order-line__amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.order-totals { width: 100%; }
.order-totals th {
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    border-top: 1px solid var(--line-soft);
}
.order-totals th:last-child {
    text-align: right;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.order-totals tr:last-child th { border-top: 2px solid var(--line); }
.order-totals tr:last-child th:last-child { color: var(--brand-dark); font-size: 15px; }

/* ==========================================================================
   14. Footer
   ========================================================================== */
#footer.section-grey {
    background: transparent;
    border-top: 1px solid var(--line);
    margin-top: 8px;
    padding: 18px 0;
}
@media (min-width: 768px) {
    #footer.section-grey { margin-left: 250px; }
}
#footer .footer-copyright {
    color: var(--ink-muted);
    font-size: 12px !important;
    letter-spacing: .03em;
}
#footer .footer-copyright .fa { color: var(--brand-dark); }

/* ==========================================================================
   15. Utilities
   ========================================================================== */
.text-muted { color: var(--ink-muted); }
.u-nums { font-variant-numeric: tabular-nums; }
.u-nowrap { white-space: nowrap; }

/* ========================================================================
   15. Collapsed sidebar: icon rail
   ========================================================================== */
/* --- Collapsed state: icon rail, not a full hide --------------------------
   Collapsing narrows the sidebar to an icon-only rail (62px, matching the
   brand mark's own column) instead of sliding it away. Labels tuck behind
   an accessible-but-invisible clip rather than disappearing from the a11y
   tree, section headings become dividers, and a submenu opens as a hover
   flyout so every item stays reachable at a glance and a click. */
@media (min-width: 768px) {
    .sidebar,
    #page-wrapper,
    #footer.section-grey,
    .navbar-default .navbar-header,
    #wrapper > .navbar-static-top::after {
        transition: width .22s var(--ease), margin-left .22s var(--ease),
                    left .22s var(--ease);
    }

    .sidebar-is-collapsed .sidebar { width: 62px; overflow-x: hidden; }
    .sidebar-is-collapsed #page-wrapper { margin-left: 62px; }
    .sidebar-is-collapsed #footer.section-grey { margin-left: 62px; }

    /* The brand block shrinks to its mark so the top bar stays balanced
       and the dark column keeps one consistent width top to bottom. The
       mark is centered on the same 62px column as the icon rail below it
       (justify-content: center against a zero-padding box), rather than
       relying on the expanded state's left padding + a now-invisible label
       to land it in the right place -- that combination left it off-centre
       and mis-aligned with the icons underneath it. */
    .sidebar-is-collapsed .navbar-default .navbar-header { width: 62px; }
    .sidebar-is-collapsed .navbar-default .navbar-brand {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .sidebar-is-collapsed .navbar-brand__text { display: none; }
    .sidebar-is-collapsed #wrapper > .navbar-static-top::after { left: 62px; }

    /* Labels stay in the DOM (screen readers still get them) but take no
       visual space, so only the icon remains -- sized up so it reads at a
       glance, matching the weight of the brand mark next to it. Scoped to
       #side-menu's direct-child items only: a flyout's own <ul> matches
       "ul li a" too, and its sub-items need their normal label and icon
       size, not the rail treatment. */
    .sidebar-is-collapsed #side-menu { padding: 8px 0 0; }
    .sidebar-is-collapsed #side-menu > li > a {
        position: relative;
        justify-content: center;
        height: 46px;
        margin: 3px 8px;
        padding: 0;
        gap: 0;
    }
    .sidebar-is-collapsed #side-menu > li > a .nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .sidebar-is-collapsed #side-menu > li > a .fa,
    .sidebar-is-collapsed #side-menu > li > a .glyphicon {
        width: auto;
        flex: 0 0 auto;
        font-size: 17px;
    }
    .sidebar-is-collapsed #side-menu > li > a .arrow { display: none; }

    /* Collapsed rail: the flyout hides the child links, so the only way to
       show "you're currently in this section" is on the parent icon itself
       -- a brand-coloured flag flush with the rail's edge, plus tinting the
       icon to match. Mirrors the exact-match pill's brand colour without
       competing with it (that pill fills the whole 46px button; this is a
       quieter cue for a section you're inside but not directly on). */
    .sidebar-is-collapsed #side-menu > li.has-active-child { position: relative; }
    .sidebar-is-collapsed #side-menu > li.has-active-child::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 22px;
        border-radius: 0 3px 3px 0;
        background: var(--brand-light);
    }
    .sidebar-is-collapsed #side-menu > li.has-active-child > a .fa {
        color: var(--brand-light);
        opacity: 1;
    }

    /* Section labels become plain dividers -- there's no room for the word,
       but the grouping is still worth keeping visible. */
    .sidebar-is-collapsed .nav-section {
        height: auto;
        padding: 12px 0 6px;
        font-size: 0;
        line-height: 0;
    }
    .sidebar-is-collapsed .nav-section:first-child { padding-top: 2px; }
    .sidebar-is-collapsed .nav-section::after {
        content: "";
        display: block;
        height: 1px;
        margin: 0 18px;
        background: var(--sidebar-line);
    }

    /* The search field has no room at 62px; collapse it to its icon and let
       the click-to-expand handler in scripts.blade.php take over. */
    .sidebar-is-collapsed .sidebar-search { padding: 10px 8px; }
    .sidebar-is-collapsed .sidebar-search .custom-search-form { display: flex; }
    .sidebar-is-collapsed .sidebar-search .form-control { display: none; }
    .sidebar-is-collapsed .sidebar-search .input-group-btn { width: 100%; }
    .sidebar-is-collapsed .sidebar-search .btn {
        width: 100%;
        height: 40px;
        border-left: 1px solid rgba(255, 255, 255, .09);
        border-radius: var(--radius-sm);
    }

    /* Submenus can't render inline at 62px, so they open as a flyout panel
       positioned by JS (fixed, not absolute -- the rail scrolls, and an
       absolutely-positioned child would be clipped by that same scroll
       box). Same anchors, same hrefs; only the presentation changes.

       sb-admin-2.js adds Bootstrap's .in (expanded) class to the submenu
       that owns the current page on every load, regardless of sidebar
       state -- left alone, landing on e.g. Reports > Orders would render
       that submenu inline at full width inside the 62px rail. Force it
       closed here; only the JS-driven flyout is allowed to show it while
       collapsed. */
    .sidebar-is-collapsed .nav-second-level:not(.flyout-open) {
        display: none !important;
    }
    .sidebar-is-collapsed .nav-second-level.flyout-open {
        display: block;
        position: fixed;
        width: 216px;
        max-height: none;
        margin: 0;
        padding: 6px;
        border-left: 0;
        border-radius: var(--radius);
        background: var(--sidebar-bg-alt);
        box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .08);
        z-index: 1040;
    }
    .sidebar-is-collapsed .nav-second-level.flyout-open::before {
        content: attr(data-flyout-title);
        display: block;
        padding: 6px 10px 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--sidebar-line);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #7c89a0;
    }
    .sidebar-is-collapsed .nav-second-level.flyout-open li a {
        padding-left: 12px;
        border-radius: 6px;
    }

    /* Single-line label popouts for items with no submenu. One shared
       element (#sidebarTip), positioned by the same hover/focus handlers. */
    .sidebar-tip {
        position: fixed;
        transform: translateY(-50%);
        padding: 7px 11px;
        border-radius: 6px;
        background: var(--sidebar-bg-alt);
        color: #fff;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .08);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .12s var(--ease);
        z-index: 1040;
    }
    .sidebar-tip.is-visible { opacity: 1; visibility: visible; }
}
@media (max-width: 767px) {
    /* The rail is a desktop-only affordance; never let a stray flyout or
       tooltip render on the in-flow mobile menu. */
    .nav-second-level.flyout-open { position: static !important; }
    .sidebar-tip { display: none; }
}


/* ==========================================================================
   16. Auth / Login
   ========================================================================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    background: var(--canvas);
}

/* Brand panel: hidden below 900px, where the form side takes the full
   viewport and shows its own compact brand row instead (.auth-card__mobile-brand). */
.auth-page__brand {
    display: none;
    position: relative;
    flex: 0 0 44%;
    max-width: 480px;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--sidebar-bg) 0%, var(--sidebar-bg-alt) 100%);
    color: #fff;
}
.auth-page__brand::before,
.auth-page__brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 219, 77, .35), transparent 70%);
    pointer-events: none;
}
.auth-page__brand::before { width: 380px; height: 380px; top: -140px; right: -140px; }
.auth-page__brand::after { width: 300px; height: 300px; bottom: -120px; left: -100px; opacity: .7; }

.auth-page__brand-top { position: relative; z-index: 1; }
.auth-page__mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 22px;
    color: var(--ink);
    background: linear-gradient(150deg, var(--brand-light), var(--brand));
    box-shadow: 0 10px 24px -8px rgba(255, 200, 0, .5);
}
.auth-page__brand-name {
    margin: 20px 0 4px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}
.auth-page__brand-tagline {
    max-width: 320px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #aab6c9;
}
.auth-page__brand-foot {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: #7c89a0;
}

@media (min-width: 900px) {
    .auth-page__brand { display: flex; }
}

.auth-page__form-side {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.auth-card { width: 100%; max-width: 380px; }

.auth-card__mobile-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 28px;
}
.auth-card__mobile-brand .auth-page__mark { width: 40px; height: 40px; font-size: 17px; border-radius: 10px; }
.auth-card__mobile-brand-name { font-size: 16px; font-weight: 700; color: var(--ink); }

@media (min-width: 900px) {
    .auth-card__mobile-brand { display: none; }
}

.auth-card__heading {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}
.auth-card__lead { margin: 0 0 28px; font-size: 13.5px; color: var(--ink-muted); }

.auth-field { margin-bottom: 18px; }
.auth-field .field-label { margin-bottom: 6px; }
.auth-field .form-control { height: 42px; }
.auth-field .form-control.is-invalid { border-color: var(--danger); }
.auth-field .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(214, 69, 69, .14); }
.auth-field__error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--danger);
}

.auth-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}
.auth-checkbox input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--brand);
}

.auth-form__forgot {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-dark);
    white-space: nowrap;
}
.auth-form__forgot:hover { color: var(--ink); }

.auth-form__submit {
    width: 100%;
    height: 44px;
    font-size: 14px;
}

@media print {
    .sidebar, #wrapper > .navbar-static-top, #footer { display: none !important; }
    #page-wrapper {
        margin-left: 0 !important;
        padding-top: 0 !important;
        min-height: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}