/* ==========================================================================
   App theme - one design system for the whole POS, based on the one-screen POS
   (css/pages/pos-screen.css). Loaded by layout/head.blade.php after the Metronic
   stylesheets; it only restyles existing markup (no routes / permissions / JS touched).
   ========================================================================== */

:root {
    --app-bg: #f5f7fb;
    --app-surface: #ffffff;
    --app-ink: #1f2a3d;
    --app-muted: #6b7a90;
    --app-line: #e4e9f1;
    --app-soft: #f1f5fb;
    --app-accent: #1e88e5;
    --app-accent-dark: #1669b5;
    --app-accent-soft: #e6f1fc;
    --app-highlight: #f59e0b;
    --app-success: #16a34a;
    --app-danger: #dc2626;
    --app-sidebar: #0f1b2d;
    --app-sidebar-hover: #17263d;
    --app-sidebar-text: #c3cee0;
    /* the sidebar background: fixed to the window, so the sidebar and the column below it (.page-container)
       show one gradient without a seam */
    --app-sidebar-bg: linear-gradient(180deg, #17325c 0%, #11274a 38%, #0c1c36 100%) fixed;
    --app-radius: 12px;
    --app-radius-sm: 8px;
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .06);
    --app-header-h: 50px;
}

body {
    background: var(--app-bg);
    color: var(--app-ink);
}

/* ---------- header ---------- */
.page-header.navbar {
    height: var(--app-header-h);
    min-height: var(--app-header-h);
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-line);
    box-shadow: 0 1px 8px rgba(16, 24, 40, .05);
}
.page-header.navbar .page-logo {
    display: flex;
    align-items: center;
    height: var(--app-header-h);
    padding: 0 14px;
}
.page-header.navbar .page-logo .logo-default {
    margin: 0;
    max-height: 38px;
    width: auto;
}
.page-header.navbar .top-menu .navbar-nav > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--app-header-h);
    padding: 0 12px;
    color: var(--app-muted);
    font-weight: 600;
    font-size: 13px;
    background: transparent;
    transition: color .15s, background-color .15s;
}
.page-header.navbar .top-menu .navbar-nav > li > a:hover,
.page-header.navbar .top-menu .navbar-nav > li.open > a {
    color: var(--app-accent);
    background: var(--app-soft);
}
.page-header.navbar .top-menu .navbar-nav > li > a > i { color: inherit; font-size: 14px; }
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > a img {
    width: 30px;
    height: 30px;
    margin: 0;
    border: 2px solid var(--app-line);
}
/* initials avatar when the user has no profile image */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > a .app-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--app-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(30, 136, 229, .18);
    color: var(--app-accent-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .username { color: var(--app-ink); }
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .fa-angle-down { color: var(--app-muted); }

/* dropdowns (user menu, quick add) */
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu,
.page-header.navbar .top-add-btn .dropdown-menu {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
    padding: 6px 0;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu > li > a {
    padding: 8px 16px;
    color: var(--app-ink);
    font-size: 13px;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu > li > a:hover {
    background: var(--app-soft);
    color: var(--app-accent);
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu:before,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu:after { display: none; }

/* quick add ( + ): a quiet action next to the logo (the logo stays the main element), set off by a
   thin divider; soft accent at rest, solid accent on hover / when open */
.page-header.navbar .top-add-btn {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--app-header-h);
    margin-left: 2px;
    padding-left: 12px;
}
.page-header.navbar .top-add-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 24px;
    margin-top: -12px;
    background: var(--app-line);
}
.page-header.navbar .top-add-btn > .dropdown > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: 13px;
    box-shadow: none;
    transition: background-color .15s, color .15s, transform .15s;
}
.page-header.navbar .top-add-btn > .dropdown > .btn:hover,
.page-header.navbar .top-add-btn > .dropdown > .btn:focus,
.page-header.navbar .top-add-btn > .dropdown.open > .btn {
    background: var(--app-accent);
    color: #fff;
    outline: 0;
}
.page-header.navbar .top-add-btn > .dropdown.open > .btn > .fa-plus { transform: rotate(45deg); }
.page-header.navbar .top-add-btn > .dropdown > .btn > .fa-plus { transition: transform .15s; }

/* cashier quick links (Sale Invoice, Coupon Code, Sale List, ...) */
.page-header.navbar .top-add-btn .app-quick-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-header.navbar .top-add-btn .app-quick-links > li > a {
    display: block;
    padding: 7px 12px;
    border-radius: var(--app-radius-sm);
    color: var(--app-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
.page-header.navbar .top-add-btn .app-quick-links > li > a:hover {
    background: var(--app-accent-soft);
    color: var(--app-accent-dark);
}

/* ---------- sidebar ---------- */
.page-sidebar,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
.page-sidebar-wrapper { background: var(--app-sidebar-bg); }
.page-sidebar { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06); }
/* the sidebar is only as tall as its menu: on long pages the column below it showed the page background.
   The container carries the sidebar colour (the content area paints its own background), so the sidebar
   column stays dark down to the end of the page. */
body:not(.pos-page) .page-container:has(.page-sidebar) { background: var(--app-sidebar-bg); }
.page-sidebar .page-sidebar-menu { padding: 10px 8px 20px; }
.page-sidebar .page-sidebar-menu > li { margin-bottom: 2px; }
.page-sidebar .page-sidebar-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0 !important;
    border-radius: var(--app-radius-sm);
    color: var(--app-sidebar-text);
    font-size: 13px;
    font-weight: 600;
    transition: background-color .15s, color .15s;
}
.page-sidebar .page-sidebar-menu > li > a > i {
    width: 18px;
    margin: 0;
    font-size: 15px;
    color: #8ea4c4;
    text-align: center;
}
.page-sidebar .page-sidebar-menu > li > a > .title { flex: 1 1 auto; }
.page-sidebar .page-sidebar-menu > li > a > .arrow { margin-left: auto; }
.page-sidebar .page-sidebar-menu > li > a > .arrow:before { color: #7f8fa8; }
.page-sidebar .page-sidebar-menu > li:hover > a,
.page-sidebar .page-sidebar-menu > li.open > a {
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
}
.page-sidebar .page-sidebar-menu > li:hover > a > i,
.page-sidebar .page-sidebar-menu > li.open > a > i { color: #ffffff; }
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a,
.page-sidebar .page-sidebar-menu > li.active > a:hover,
.page-sidebar .page-sidebar-menu > li.active.open > a:hover {
    background: linear-gradient(90deg, var(--app-accent) 0%, #3aa0ff 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(30, 136, 229, .35);
}
.page-sidebar .page-sidebar-menu > li.active > a > i,
.page-sidebar .page-sidebar-menu > li.active > a > .arrow:before { color: #ffffff; }
.page-sidebar .page-sidebar-menu > li.active > a > .selected { display: none; }

/* sub menus: a guide line along the items of the open menu */
.page-sidebar .page-sidebar-menu .sub-menu {
    margin: 4px 0 6px 20px;
    padding: 0 0 0 6px;
    border-left: 1px solid rgba(255, 255, 255, .1);
    background: transparent;
}
.page-sidebar .page-sidebar-menu .sub-menu > li > a {
    display: block;
    padding: 8px 12px 8px 14px;
    border-radius: var(--app-radius-sm);
    color: var(--app-sidebar-text);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
}
.page-sidebar .page-sidebar-menu .sub-menu > li > a > i { color: #7f8fa8; margin-right: 6px; }
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a {
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
    background: rgba(58, 160, 255, .2);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #4aa8ff;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a > i { color: #ffffff; }

/* sidebar collapsed (menu toggler) keeps Metronic's behaviour, only the colours change */
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a { justify-content: center; }
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu {
    margin-left: 0;
    border-left: 0;
    background: #11274a;
    border-radius: 0 var(--app-radius-sm) var(--app-radius-sm) 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

/* a print page inside the POS receipt popup (?embed=1): the slip only */
.app-embed .page-header,
.app-embed .page-sidebar-wrapper,
.app-embed .page-bar,
.app-embed .page-title { display: none !important; }
.app-embed .page-container { margin-top: 0 !important; background: var(--app-bg) !important; }
.app-embed .page-content-wrapper .page-content { margin-left: 0 !important; min-height: 0 !important; padding: 12px 15px 20px; }

/* table transfer: a table with another order cannot be chosen (Sales/table-transfer.blade.php) */
.card.table-transfer-busy { cursor: not-allowed; opacity: .5; }
.card.table-transfer-busy:hover { transform: none; box-shadow: none; }

/* pages without the sidebar (cashier): no sidebar togglers in the header, the page background under the content */
.app-no-sidebar .page-sidebar-wrapper { display: none; }
.app-no-sidebar .page-content-wrapper .page-content { margin-left: 0; }
body:not(.pos-page) .page-container.app-no-sidebar { background: var(--app-bg); }
body:has(.page-container.app-no-sidebar) .page-header.navbar .menu-toggler { display: none !important; }

/* ---------- page shell ---------- */
.page-content-wrapper .page-content { background: var(--app-bg); }
/* side margins match Metronic's .page-content padding (15px desktop, 20px tablet, 10px phone),
   so the bar spans the content edge to edge without pushing the page sideways */
.page-bar {
    margin: -10px -15px 16px;
    padding: 10px 15px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-line);
}
@media (min-width: 768px) and (max-width: 991px) {
    .page-bar { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 767px) {
    .page-bar { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
}
.page-bar .page-breadcrumb > li > a,
.page-bar .page-breadcrumb > li > span { color: var(--app-muted); font-size: 13px; }
.page-bar .page-breadcrumb > li > a:hover { color: var(--app-accent); }
.page-bar .page-breadcrumb > li > i { color: #b3bfcf; }
.page-title {
    color: var(--app-ink);
    font-size: 22px;
    font-weight: 700;
}
.page-title small { color: var(--app-muted); font-size: 13px; font-weight: 500; }

/* ---------- buttons (shape only; Metronic colour classes keep their meaning) ---------- */
.btn {
    border-radius: var(--app-radius-sm);
    font-weight: 600;
    transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn:focus,
.btn:active:focus { outline: none; box-shadow: 0 0 0 3px rgba(30, 136, 229, .2); }
.btn-circle { border-radius: 999px !important; }

/* ---------- button colours (Phase 15): one palette ----------
   Pages mix Metronic colour classes (.blue #4994C3, .green #4EB121, .red #CE1E22 ...) and
   Bootstrap ones (.btn-primary #428bca, .btn-success #5cb85c, .btn-danger #F3565D, .btn-info
   #89C4F4 ...). Each pair now draws from the app palette. The POS screen keeps its own buttons. */
:root {
    --app-btn-warning: #f59e0b;
    --app-btn-warning-dark: #d97706;
    --app-btn-info: #0ea5e9;
    --app-btn-info-dark: #0284c7;
    --app-btn-purple: #7c3aed;
    --app-btn-purple-dark: #6d28d9;
    --app-success-dark: #15803d;
    --app-danger-dark: #b91c1c;
}
body:not(.pos-page) .btn.blue,
body:not(.pos-page) .btn.btn-primary { --btn-bg: var(--app-accent); --btn-bg-dark: var(--app-accent-dark); }
body:not(.pos-page) .btn.green,
body:not(.pos-page) .btn.btn-success { --btn-bg: var(--app-success); --btn-bg-dark: var(--app-success-dark); }
body:not(.pos-page) .btn.red,
body:not(.pos-page) .btn.btn-danger { --btn-bg: var(--app-danger); --btn-bg-dark: var(--app-danger-dark); }
body:not(.pos-page) .btn.yellow,
body:not(.pos-page) .btn.btn-warning { --btn-bg: var(--app-btn-warning); --btn-bg-dark: var(--app-btn-warning-dark); }
body:not(.pos-page) .btn.btn-info { --btn-bg: var(--app-btn-info); --btn-bg-dark: var(--app-btn-info-dark); }
body:not(.pos-page) .btn.purple { --btn-bg: var(--app-btn-purple); --btn-bg-dark: var(--app-btn-purple-dark); }

body:not(.pos-page) .btn:is(.blue, .btn-primary, .green, .btn-success, .red, .btn-danger, .yellow, .btn-warning, .btn-info, .purple) {
    border-color: var(--btn-bg);
    background-color: var(--btn-bg);
    background-image: none;
    color: #fff;
}
body:not(.pos-page) .btn:is(.blue, .btn-primary, .green, .btn-success, .red, .btn-danger, .yellow, .btn-warning, .btn-info, .purple):is(:hover, :focus, :active, .active),
body:not(.pos-page) .open > .dropdown-toggle.btn:is(.blue, .btn-primary, .green, .btn-success, .red, .btn-danger, .yellow, .btn-warning, .btn-info, .purple) {
    border-color: var(--btn-bg-dark);
    background-color: var(--btn-bg-dark);
    color: #fff;
}
body:not(.pos-page) .btn:is(.default, .btn-default) {
    border: 1px solid var(--app-line);
    background-color: var(--app-surface);
    background-image: none;
    color: var(--app-ink);
}
body:not(.pos-page) .btn:is(.default, .btn-default):is(:hover, :focus, :active, .active),
body:not(.pos-page) .open > .dropdown-toggle.btn:is(.default, .btn-default) {
    border-color: #cfd8e3;
    background-color: var(--app-soft);
    color: var(--app-ink);
}
body:not(.pos-page) .btn:is([disabled], .disabled) { opacity: .55; }

/* ---------- global styles moved from the inline <style> of layout/head.blade.php ---------- */
.ui.search > .results {
    height: 220px;
    overflow-y: scroll;
    width: 600px;
}
@media (max-width: 767px) {
    .ui.search > .results {
        height: 220px;
        overflow-y: scroll;
        width: 300px;
    }
    .ui.search > .results > .result > .content { font-size: 12px; }
}
.ui.search > .results > .result > .content { font-size: 14px; }
.ui.dashboard.search .prompt {
    border-radius: 0px;
    width: 100%;
}
.k-grid .k-grid-header .k-header .k-link { height: auto; }
.k-grid .k-grid-header .k-header { white-space: normal; }
.tooltip { z-index: 10000000; }

/* ---------- responsive header ---------- */
@media (max-width: 991px) {
    .page-header.navbar .top-add-btn .app-quick-links { display: none; }
}
@media (max-width: 767px) {
    /* the top menu wraps to its own row on phones: keep it light like the rest of the header (Metronic paints it #383d43) */
    .page-header.navbar .top-menu {
        background: var(--app-surface);
        border-top: 1px solid var(--app-line);
    }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle,
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-user.open > .dropdown-toggle { background: transparent; }
    .page-header.navbar .top-menu .navbar-nav > li > a { padding: 0 8px; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .username { display: none; }
}

/* POS shortcut in the header (cashiers) */
.page-header.navbar .top-menu .navbar-nav > li.app-pos-link > a {
    height: 34px;
    margin: 8px 8px 0 0;
    padding: 0 16px;
    border-radius: var(--app-radius-sm);
    background: var(--app-success);
    color: #fff;
}
.page-header.navbar .top-menu .navbar-nav > li.app-pos-link > a:hover { background: #15803d; color: #fff; }