/* ==========================================================================
   Modern minimal theme for the authenticated app shell (Phase 1)
   Scope: header, sidebar, cards/boxes, buttons, tables/DataTables, dashboard
   Flat style: thin 1px borders for separation, no blurred drop-shadows,
   no hover animations. Overrides AdminLTE's per-business "skin-*" color
   classes on purpose so the whole app shares one consistent modern look.
   ========================================================================== */

:root {
    --app-accent: #4f46e5;
    --app-accent-dark: #423bd1;
    --app-accent-soft: #eeecfb;
    --app-bg: #ffffff;
    --app-hover-bg: #f3f4f7;
    --app-card-bg: #ffffff;
    --app-text: #22232e;
    --app-muted: #9395a3;
    --app-border: #e7e8f0;

    /* Sidebar-only palette, matching the UltimatePOS reference UI.
       Kept separate from --app-accent so the rest of the app (buttons,
       stat cards, table pagination) keeps its own accent color. */
    --sidebar-bar-bg: #0040c1;
    --sidebar-accent: #004eeb;
    --sidebar-accent-soft: rgba(0, 78, 235, .15);
    --sidebar-text: #4b5565;
    --sidebar-icon: #9ca3af;
    --sidebar-search-bg: #eef2f6;
    --sidebar-search-border: #e3e8ef;
    --sidebar-submenu-line: #eef2f6;
}

body.hold-transition:not(.lockscreen) {
    background: var(--app-bg) !important;
}

.content-wrapper {
    background: var(--app-bg) !important;
}

.content-header.content-header-custom,
.content-header {
    background: transparent;
}

.content-header > h1 {
    color: #32325d;
    font-weight: 700;
    font-size: 20px;
}

/* The bundled theme CSS has ".content-custom { margin-top: -210px; }" left
   over from the old tall "Welcome" banner layout, which used to sit above
   it and absorb that negative offset. Now that the banner is removed, that
   rule would pull page content up underneath the header -- neutralize it. */
.content-custom {
    margin-top: 0 !important;
}

/* -------------------------------------------------------------------- */
/* Topbar                                                                */
/* -------------------------------------------------------------------- */

.main-header {
    background: var(--app-card-bg) !important;
    border-bottom: 1px solid var(--app-border);
}

.main-header .logo {
    background: var(--app-card-bg) !important;
    color: var(--app-text) !important;
    border-bottom: none !important;
    border-right: 1px solid var(--app-border) !important;
    font-weight: 700;
}

.main-header .logo .logo-lg {
    color: var(--app-text) !important;
}

.main-header .navbar {
    background: var(--app-card-bg) !important;
}

.main-header .sidebar-toggle {
    color: var(--app-muted) !important;
    background: transparent !important;
}

.main-header .sidebar-toggle:hover {
    color: var(--app-accent) !important;
    background: var(--app-accent-soft) !important;
}

.main-header .navbar-custom-menu .btn,
.main-header .navbar-custom-menu button {
    border-radius: 8px !important;
    border: 1px solid var(--app-border) !important;
    background: var(--app-card-bg) !important;
    color: var(--app-muted) !important;
}

.main-header .navbar-custom-menu .btn-success,
.main-header .navbar-custom-menu .btn.btn-success {
    background: var(--app-card-bg) !important;
    color: var(--app-text) !important;
}

.main-header .navbar-custom-menu .btn-success:hover {
    border-color: var(--app-accent) !important;
    color: var(--app-accent) !important;
}

.main-header .navbar-custom-menu .btn-danger {
    background: #fdeceb !important;
    border-color: #fdeceb !important;
    color: #d64540 !important;
}

.main-header .navbar-nav > li > a {
    color: var(--app-muted) !important;
}

.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav > .open > a {
    background: var(--app-hover-bg) !important;
    color: var(--app-text) !important;
}

/* Notification bell + user name: same compact rounded-box hover treatment
   as the add/calculator header buttons, instead of a full-height rectangle. */
.main-header .navbar-nav > .notifications-menu > a,
.main-header .navbar-nav > .user-menu > a.dropdown-toggle {
    margin: 8px 4px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    border: 1px solid transparent;
    display: inline-flex !important;
    align-items: center;
}

.main-header .navbar-nav > .notifications-menu > a:hover,
.main-header .navbar-nav > .user-menu > a.dropdown-toggle:hover,
.main-header .navbar-nav > .user-menu.open > a.dropdown-toggle {
    background: var(--app-card-bg) !important;
    border-color: var(--app-accent) !important;
    color: var(--app-accent) !important;
}

.main-header .navbar-nav > .user-menu .user-image {
    border-radius: 50%;
}

.user-icon-avatar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--app-hover-bg);
    color: var(--app-muted);
}

.user-icon-avatar .header-icon {
    width: 16px;
    height: 16px;
}

.main-header .navbar-nav > .user-menu > .user-menu-dropdown {
    width: 220px !important;
    padding: 6px !important;
}

.user-menu-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 6px;
}

.user-menu-dropdown > li > a {
    padding: 8px 10px !important;
}

.user-menu-signed-in {
    font-size: 12px;
    color: var(--app-muted);
}

.user-menu-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text);
}

.user-menu-dropdown .divider {
    background-color: var(--app-border);
    margin: 4px 0;
}

.user-menu-dropdown > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-header .dropdown-menu,
.dropdown-menu {
    border: 1px solid var(--app-border);
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(30, 30, 60, 0.025);
    padding: 6px;
}

.main-header .dropdown-menu > li > a {
    border-radius: 8px;
    color: var(--app-text);
}

.main-header .dropdown-menu > li > a:hover {
    background: var(--app-hover-bg);
    color: var(--app-text);
}

.notifications-menu .notifications_count {
    background: #e3564f !important;
}

.header-bell-icon {
    margin-right: 0;
    vertical-align: middle;
}

.header-date-pill {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 600;
    font-family: 'SFMono-Regular', Consolas, monospace;
    padding: 6px 4px;
}

/* -------------------------------------------------------------------- */
/* Sidebar                                                               */
/* -------------------------------------------------------------------- */

.main-sidebar {
    background: var(--app-card-bg) !important;
    border-right: 1px solid var(--app-border) !important;
    box-shadow: none !important;
    width: 280px;
}

/* The business "theme_color" setting adds a body class like .skin-blue or
   .skin-blue-light (see the .treeview-menu override above for the same
   pattern) -- its per-skin rule kills the sidebar border with !important,
   so it must be neutralized explicitly for every skin. */
.skin-blue .main-sidebar,
.skin-blue-light .main-sidebar,
.skin-black .main-sidebar,
.skin-black-light .main-sidebar,
.skin-purple .main-sidebar,
.skin-purple-light .main-sidebar,
.skin-green .main-sidebar,
.skin-green-light .main-sidebar,
.skin-red .main-sidebar,
.skin-red-light .main-sidebar,
.skin-yellow .main-sidebar,
.skin-yellow-light .main-sidebar {
    border-right: 1px solid var(--app-border) !important;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    .content-wrapper,
    .main-footer {
        margin-left: 280px;
    }

    .main-header .navbar {
        margin-left: 280px;
    }

    .main-header .logo {
        width: 280px;
    }

    .sidebar-collapse .main-sidebar {
        transform: translate(-280px, 0);
    }
}

@media (max-width: 767px) {
    .main-sidebar {
        transform: translate(-280px, 0);
    }

    .sidebar-open .main-sidebar {
        transform: translate(0, 0);
    }
}

.main-sidebar .logo {
    position: relative;
    background: var(--sidebar-bar-bg) !important;
    border-bottom: none !important;
}

.main-sidebar .logo .logo-lg {
    color: #ffffff !important;
    font-weight: 700;
}

.logo-online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: #22c55e;
    vertical-align: middle;
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 10px;
    padding: 6px 12px;
    background: var(--sidebar-search-bg);
    border: 1px solid var(--sidebar-search-border);
    border-radius: 8px;
}

.sidebar-search svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--sidebar-icon);
}

.sidebar-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    color: var(--app-text);
}

.sidebar-search input::placeholder {
    color: var(--sidebar-icon);
}

.sidebar-menu {
    padding: 8px;
}

.sidebar-menu > li > a {
    color: var(--sidebar-text) !important;
    background: transparent !important;
    border-radius: 8px;
    margin: 3px 4px;
    padding: 10px 12px !important;
    font-weight: 400;
    font-size: 13.5px;
    white-space: nowrap;
    border-left: 3px solid transparent !important;
}

.sidebar-menu > li > a:hover {
    color: var(--app-text) !important;
    background: var(--app-hover-bg) !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.active > a:hover,
.sidebar-menu li.active > a {
    color: var(--sidebar-accent) !important;
    background: var(--sidebar-accent-soft) !important;
    font-weight: 400 !important;
    border-left-color: transparent !important;
}

.sidebar-menu > li > a > i,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .far {
    width: 20px;
    text-align: center;
    margin-right: 6px;
    color: var(--sidebar-icon);
    font-size: 15px;
}

.sidebar-menu > li.active > a > i,
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .fas,
.sidebar-menu > li.active > a > .far {
    color: var(--sidebar-accent);
}

/* Colored full-width "pill" entries for add-on module top-level links,
   matching the HRM/Essentials/Cheque/Woocommerce blocks in the reference
   UI. Apply by adding class="sidebar-pill-link sidebar-pill--<color>" to
   the attributes array of a top-level $menu->url(...) item -- e.g.
   ['icon' => '...', 'class' => 'sidebar-pill-link sidebar-pill--purple'].
   Needs no presenter changes: AdminlteCustomPresenter already renders
   $item->getAttributes() onto the <a> tag. */
.sidebar-menu > li > a.sidebar-pill-link {
    color: #ffffff !important;
    font-weight: 500;
    margin: 10px 4px 0;
}

.sidebar-menu > li > a.sidebar-pill-link:hover {
    filter: brightness(0.95);
}

.sidebar-menu > li > a.sidebar-pill-link > i,
.sidebar-menu > li > a.sidebar-pill-link > .fa {
    color: #ffffff;
}

.sidebar-pill--purple { background: #605ca8 !important; }
.sidebar-pill--navy { background: #001f3f !important; }
.sidebar-pill--pink { background: #9e458b !important; }
.sidebar-pill--teal { background: #14817b !important; }
.sidebar-pill--orange { background: #b8722a !important; }
.sidebar-pill--green { background: #2f9e5b !important; }
.sidebar-pill--red { background: #c24a45 !important; }
.sidebar-pill--slate { background: #45526e !important; }

.sidebar-pill--yellow {
    background: #ffff00 !important;
}

.sidebar-pill--yellow,
.sidebar-pill--yellow > i,
.sidebar-pill--yellow > .fa {
    color: var(--sidebar-text) !important;
}

/* Custom sidebar icons: files live in /public/img/icons/, one SVG per
   top-level menu item. Rendered via CSS mask (not <img>/background-image)
   so they inherit the current text color and keep working through hover
   and active states, exactly like the Font Awesome glyphs they replaced.
   Drop in a replacement SVG with the SAME filename to update an icon --
   no code changes needed. Keep replacement icons as a single flat shape
   (fills only, no strokes) on a 24x24 viewBox for a clean mask. */
.sidebar-svg-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.sidebar-svg-icon--dashboard { -webkit-mask-image: url('/img/icons/dashboard.svg'); mask-image: url('/img/icons/dashboard.svg'); }
.sidebar-svg-icon--user-management { -webkit-mask-image: url('/img/icons/user-management.svg'); mask-image: url('/img/icons/user-management.svg'); }
.sidebar-svg-icon--contacts { -webkit-mask-image: url('/img/icons/contacts.svg'); mask-image: url('/img/icons/contacts.svg'); }
.sidebar-svg-icon--products { -webkit-mask-image: url('/img/icons/products.svg'); mask-image: url('/img/icons/products.svg'); }
.sidebar-svg-icon--purchases { -webkit-mask-image: url('/img/icons/purchases.svg'); mask-image: url('/img/icons/purchases.svg'); }
.sidebar-svg-icon--sale { -webkit-mask-image: url('/img/icons/sale.svg'); mask-image: url('/img/icons/sale.svg'); }
.sidebar-svg-icon--stock-transfers { -webkit-mask-image: url('/img/icons/stock-transfers.svg'); mask-image: url('/img/icons/stock-transfers.svg'); }
.sidebar-svg-icon--stock-adjustment { -webkit-mask-image: url('/img/icons/stock-adjustment.png'); mask-image: url('/img/icons/stock-adjustment.png'); }
.sidebar-svg-icon--expenses { -webkit-mask-image: url('/img/icons/expenses.svg'); mask-image: url('/img/icons/expenses.svg'); }
.sidebar-svg-icon--accounts { -webkit-mask-image: url('/img/icons/accounts.svg'); mask-image: url('/img/icons/accounts.svg'); }
.sidebar-svg-icon--reports { -webkit-mask-image: url('/img/icons/reports.svg'); mask-image: url('/img/icons/reports.svg'); }
.sidebar-svg-icon--backup { -webkit-mask-image: url('/img/icons/backup.svg'); mask-image: url('/img/icons/backup.svg'); }
.sidebar-svg-icon--modules { -webkit-mask-image: url('/img/icons/modules.svg'); mask-image: url('/img/icons/modules.svg'); }
.sidebar-svg-icon--booking { -webkit-mask-image: url('/img/icons/booking.svg'); mask-image: url('/img/icons/booking.svg'); }
.sidebar-svg-icon--kitchen { -webkit-mask-image: url('/img/icons/kitchen.svg'); mask-image: url('/img/icons/kitchen.svg'); }
.sidebar-svg-icon--service-staff { -webkit-mask-image: url('/img/icons/service-staff.svg'); mask-image: url('/img/icons/service-staff.svg'); }
.sidebar-svg-icon--notifications { -webkit-mask-image: url('/img/icons/notifications.svg'); mask-image: url('/img/icons/notifications.svg'); }
.sidebar-svg-icon--settings { -webkit-mask-image: url('/img/icons/settings.svg'); mask-image: url('/img/icons/settings.svg'); }
.sidebar-svg-icon--memo { -webkit-mask-image: url('/img/icons/memo.svg'); mask-image: url('/img/icons/memo.svg'); }
.sidebar-svg-icon--loan { -webkit-mask-image: url('/img/icons/loan.svg'); mask-image: url('/img/icons/loan.svg'); }

/* Top header bar icons */
.sidebar-svg-icon--sidebar-left { -webkit-mask-image: url('/img/icons/sidebar-left.svg'); mask-image: url('/img/icons/sidebar-left.svg'); }
.sidebar-svg-icon--add { -webkit-mask-image: url('/img/icons/add.svg'); mask-image: url('/img/icons/add.svg'); }
.sidebar-svg-icon--calculator { -webkit-mask-image: url('/img/icons/calculator.svg'); mask-image: url('/img/icons/calculator.svg'); }
.sidebar-svg-icon--pos { -webkit-mask-image: url('/img/icons/pos.svg'); mask-image: url('/img/icons/pos.svg'); }
.sidebar-svg-icon--profit { -webkit-mask-image: url('/img/icons/profit.svg'); mask-image: url('/img/icons/profit.svg'); }
.sidebar-svg-icon--calendar { -webkit-mask-image: url('/img/icons/calendar.svg'); mask-image: url('/img/icons/calendar.svg'); }
.sidebar-svg-icon--user-circle { -webkit-mask-image: url('/img/icons/user-circle.svg'); mask-image: url('/img/icons/user-circle.svg'); }
.sidebar-svg-icon--sign-out { -webkit-mask-image: url('/img/icons/off.svg'); mask-image: url('/img/icons/off.svg'); }

/* POS top toolbar (layouts/partials/header-pos.blade.php) action icons */
.sidebar-svg-icon--pos-back { -webkit-mask-image: url('/img/icons/back.svg'); mask-image: url('/img/icons/back.svg'); }
.sidebar-svg-icon--pos-close { -webkit-mask-image: url('/img/icons/close.svg'); mask-image: url('/img/icons/close.svg'); }
.sidebar-svg-icon--pos-register { -webkit-mask-image: url('/img/icons/register.svg'); mask-image: url('/img/icons/register.svg'); }
.sidebar-svg-icon--pos-return { -webkit-mask-image: url('/img/icons/sell return.svg'); mask-image: url('/img/icons/sell return.svg'); }
.sidebar-svg-icon--pos-suspend { -webkit-mask-image: url('/img/icons/view suspend sell.svg'); mask-image: url('/img/icons/view suspend sell.svg'); }
.sidebar-svg-icon--pos-fullscreen { -webkit-mask-image: url('/img/icons/full-screen.svg'); mask-image: url('/img/icons/full-screen.svg'); }
.sidebar-svg-icon--pos-expense { -webkit-mask-image: url('/img/icons/add expencse.svg'); mask-image: url('/img/icons/add expencse.svg'); }
.sidebar-svg-icon--pos-keyboard { -webkit-mask-image: url('/img/icons/keyboard.svg'); mask-image: url('/img/icons/keyboard.svg'); }

/* POS bottom action bar icons */
.sidebar-svg-icon--pos-draft { -webkit-mask-image: url('/img/icons/draft.svg'); mask-image: url('/img/icons/draft.svg'); }
.sidebar-svg-icon--pos-quote { -webkit-mask-image: url('/img/icons/quote.svg'); mask-image: url('/img/icons/quote.svg'); }
.sidebar-svg-icon--pos-credit { -webkit-mask-image: url('/img/icons/credit.svg'); mask-image: url('/img/icons/credit.svg'); }
.sidebar-svg-icon--pos-card { -webkit-mask-image: url('/img/icons/card.svg'); mask-image: url('/img/icons/card.svg'); }
.sidebar-svg-icon--pos-multiple-pay { -webkit-mask-image: url('/img/icons/multiple pay.svg'); mask-image: url('/img/icons/multiple pay.svg'); }
.sidebar-svg-icon--pos-cash { -webkit-mask-image: url('/img/icons/Pay.svg'); mask-image: url('/img/icons/Pay.svg'); }
.sidebar-svg-icon--pos-recent { -webkit-mask-image: url('/img/icons/Ledger.svg'); mask-image: url('/img/icons/Ledger.svg'); }

.header-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Dashboard stat-card icons: net/invoice-due/sell-return/purchase-due/
   purchase-return have no sidebar-menu equivalent, so these are new SVGs
   modeled on the reference UltimatePOS dashboard's icon set. */
.sidebar-svg-icon--net { -webkit-mask-image: url('/img/icons/net.svg'); mask-image: url('/img/icons/net.svg'); }
.sidebar-svg-icon--invoice-due { -webkit-mask-image: url('/img/icons/invoice-due.svg'); mask-image: url('/img/icons/invoice-due.svg'); }
.sidebar-svg-icon--sell-return { -webkit-mask-image: url('/img/icons/sell-return.svg'); mask-image: url('/img/icons/sell-return.svg'); }
.sidebar-svg-icon--purchase-due { -webkit-mask-image: url('/img/icons/purchase-due.svg'); mask-image: url('/img/icons/purchase-due.svg'); }
.sidebar-svg-icon--purchase-return { -webkit-mask-image: url('/img/icons/purchase-return.svg'); mask-image: url('/img/icons/purchase-return.svg'); }

.stat-card-icon .sidebar-svg-icon {
    width: 20px;
    height: 20px;
    margin-right: 0;
}

.sidebar-menu li.treeview.active > a,
.sidebar-menu li.treeview > a.active {
    color: var(--sidebar-accent) !important;
    background: var(--sidebar-accent-soft) !important;
    border-left-color: transparent !important;
}

.sidebar-menu .treeview-menu {
    background: transparent !important;
}

/* The business "theme_color" setting adds a body class like .skin-blue or
   .skin-blue-light (see app.blade.php + BusinessController::$theme_colors),
   and custom.css has a per-skin rule that fills the whole submenu box with
   a solid color (e.g. ".skin-blue-light .sidebar-menu > li > .treeview-menu
   { background: #f4f4f5 !important; }"). That selector is more specific
   than the generic rule above, so it wins regardless of source order --
   neutralize it explicitly for every skin so the submenu stays transparent
   no matter which theme color a business has selected. */
.skin-blue .sidebar-menu > li > .treeview-menu,
.skin-blue-light .sidebar-menu > li > .treeview-menu,
.skin-black .sidebar-menu > li > .treeview-menu,
.skin-black-light .sidebar-menu > li > .treeview-menu,
.skin-purple .sidebar-menu > li > .treeview-menu,
.skin-purple-light .sidebar-menu > li > .treeview-menu,
.skin-green .sidebar-menu > li > .treeview-menu,
.skin-green-light .sidebar-menu > li > .treeview-menu,
.skin-red .sidebar-menu > li > .treeview-menu,
.skin-red-light .sidebar-menu > li > .treeview-menu,
.skin-yellow .sidebar-menu > li > .treeview-menu,
.skin-yellow-light .sidebar-menu > li > .treeview-menu {
    background: transparent !important;
}

.sidebar-menu .treeview-menu {
    border-left: 1px solid var(--sidebar-submenu-line) !important;
    margin-left: 26px;
    padding-left: 0;
}

.sidebar-menu .treeview-menu > li {
    border-left: none;
    margin-left: 0;
}

.sidebar-menu .treeview-menu > li > a {
    color: var(--app-muted) !important;
    background: transparent !important;
    border-radius: 8px;
    margin: 2px 0;
    padding: 8px 14px !important;
    font-size: 14px !important;
    white-space: nowrap;
}

.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a {
    color: var(--sidebar-accent) !important;
    background: transparent !important;
}

.sidebar-menu > li.header {
    color: #b3b4c0 !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    margin: 18px 0 2px !important;
    padding: 0 24px !important;
}

.sidebar-form {
    border-radius: 8px !important;
    overflow: hidden;
    border: 1px solid var(--app-border) !important;
    background: var(--app-hover-bg) !important;
}

/* -------------------------------------------------------------------- */
/* Cards / boxes (components.widget) -- cascades to the whole app       */
/* -------------------------------------------------------------------- */

.box {
    background: var(--app-card-bg);
    border-top: none !important;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: none;
}

.box.box-solid {
    border: 1px solid var(--app-border);
}

.box-header {
    border-radius: 14px 14px 0 0;
    background: transparent !important;
    padding: 16px 20px 6px;
}

.box.box-solid > .box-header {
    background: transparent !important;
    color: var(--app-text) !important;
}

.box-title {
    color: #32325d;
    font-weight: 700;
    font-size: 15px;
    vertical-align: middle;
}

/* Chart/warning card headers on the dashboard put their icon in the same
   filled colored-square badge as the stat cards above them (reusing
   .stat-card-icon / .stat-card-icon--<color> as-is) instead of a plain
   FA glyph. .chart-card and .box-warning are only used in home/index, so
   this flex layout is dashboard-only and safe to scope broadly. */
.chart-card > .box-header,
.box-warning > .box-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.box-body {
    padding: 14px 20px 20px;
}

.box-primary,
.box.box-primary {
    border-top: none !important;
}

/* Tabbed card wrapper used on list pages (Products, Purchases, Sell, ...)
   -- same card treatment as .box above, so tabbed and non-tabbed list
   pages look consistent app-wide. */
.nav-tabs-custom {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: none;
    overflow: hidden;
}

.nav-tabs-custom > .nav-tabs {
    border-radius: 14px 14px 0 0;
    margin: 0;
}

.nav-tabs-custom > .tab-content {
    padding: 20px;
}

/* -------------------------------------------------------------------- */
/* Buttons                                                               */
/* -------------------------------------------------------------------- */

.btn {
    border-radius: 8px;
}

.btn.btn-flat {
    border-radius: 8px !important;
}

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

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

/* -------------------------------------------------------------------- */
/* Tables / DataTables (global wrapper markup, applies app-wide)        */
/* -------------------------------------------------------------------- */

.table {
    color: var(--app-text);
    font-size: 14px;
}

.table > thead > tr > th {
    border-bottom: 2px solid var(--app-border) !important;
    color: var(--app-text);
    font-weight: 700;
    font-size: 14px;
    text-transform: none;
    letter-spacing: normal;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--app-border) !important;
    vertical-align: middle;
    font-size: 14px;
}

.table > tbody > tr:hover > td {
    background: var(--app-hover-bg);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: #f9f9f9;
}

/* Reference UltimatePOS tables have no grid lines -- just the header/row
   separators above -- so neutralize Bootstrap's table-bordered cell/outer
   borders app-wide instead of touching the 140+ views that use it. */
.table-bordered {
    border: none;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border: none !important;
    border-top: 1px solid var(--app-border) !important;
}

.table-bordered > thead > tr > th {
    border-top: none !important;
    border-bottom: 2px solid var(--app-border) !important;
}

/* Table horizontal scrollbar: invisible at rest, appears as a thin light
   rounded pill only while hovering the scroll container -- overrides the
   heavier global grey scrollbar (public/css/app.css) for table wrappers
   specifically. */
.table-responsive,
div.dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.table-responsive:hover,
div.dataTables_scrollBody:hover {
    scrollbar-color: var(--app-border) transparent;
}

.table-responsive::-webkit-scrollbar,
div.dataTables_scrollBody::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track,
div.dataTables_scrollBody::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb,
div.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}

.table-responsive:hover::-webkit-scrollbar-thumb,
div.dataTables_scrollBody:hover::-webkit-scrollbar-thumb {
    background: var(--app-border);
}

.table-responsive::-webkit-scrollbar-thumb:hover,
div.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-icon);
}

.dt-toolbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* DataTables Buttons sets an inline dark background on this click-outside
   overlay when the Export/Column-visibility dropdown opens -- neutralize
   it (the element still catches the outside click to close the dropdown,
   it just stays invisible instead of dimming the page). */
div.dt-button-background {
    background-color: transparent !important;
}

/* Something upstream (public/css/app.css's ".bg-info { background-color:
   #00c0ef !important; }") is landing on the export dropdown, painting it
   solid aqua. Force it white regardless of which element in the collection
   actually carries that class -- !important required to outrank the other
   !important rule. */
.dt-button-collection,
.dt-button-collection.dropdown-menu,
ul.dt-button-collection,
div.dt-button-collection {
    background-color: #ffffff !important;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 20, 50, .12);
    padding: 6px;
}

.dt-button-collection.dropdown-menu .dt-button,
.dt-button-collection .dt-button {
    background-color: transparent !important;
    border-radius: 8px;
    color: var(--app-text) !important;
    border: none;
}

.dt-button-collection.dropdown-menu .dt-button:hover,
.dt-button-collection .dt-button:hover {
    background-color: var(--app-hover-bg) !important;
}

div.dt-buttons.btn-group {
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

div.dt-buttons .btn {
    background: transparent !important;
    color: var(--sidebar-icon) !important;
    border: 1px solid var(--sidebar-icon) !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none !important;
}

div.dt-buttons .btn:hover {
    background: var(--app-hover-bg) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 5px 10px;
    background: var(--app-hover-bg);
}

div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
    outline: none;
    border-color: var(--app-accent);
}

.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span {
    border-radius: 8px !important;
    margin: 0 2px;
    border: 1px solid var(--app-border);
    background: var(--app-card-bg);
    color: var(--app-text);
    box-shadow: none;
}

.dataTables_wrapper .pagination > li:first-child > a,
.dataTables_wrapper .pagination > li:last-child > a {
    border-radius: 50% !important;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
}

.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > a:hover,
.dataTables_wrapper .pagination > .active > span {
    background: var(--app-card-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    font-weight: 700;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
}

/* -------------------------------------------------------------------- */
/* Dashboard: toolbar (location filter + date filter)                   */
/* -------------------------------------------------------------------- */

.dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 20px;
    padding-top: 16px;
}

.dashboard-toolbar-location {
    margin-right: auto;
    min-width: 220px;
}

.dashboard-toolbar #dashboard_date_filter {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
}

/* -------------------------------------------------------------------- */
/* Dashboard: stat cards (bento grid)                                   */
/* -------------------------------------------------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 1199px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    display: flex;
    flex-direction: column;
    background: var(--app-card-bg);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 18px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .15s ease-in-out;
}

a.stat-card:hover {
    border-color: rgba(0, 0, 0, .08);
}

/* Muted, low-saturation wash per card -- distinct hue per card, never
   vibrant/saturated so the numbers stay the visual focus. */
.stat-card--orange {
    background: #fbf1e8;
}

.stat-card--green {
    background: #eaf7ee;
}

.stat-card--blue {
    background: #eaf4fb;
}

.stat-card--purple {
    background: #f1eefb;
}

.stat-card--pink {
    background: #fbeef0;
}

.stat-card--red {
    background: #fbecec;
}

.stat-card--teal {
    background: #eaf6f4;
}

.stat-card--yellow {
    background: #fbf6e8;
}

.stat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.stat-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.stat-card-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.stat-card-icon--orange {
    background: #f6dfc4;
    color: #b8722a;
}

.stat-card-icon--green {
    background: #d3f0dc;
    color: #2f9e5b;
}

.stat-card-icon--blue {
    background: #d2e9f8;
    color: #2178a8;
}

.stat-card-icon--purple {
    background: #e1dbf7;
    color: #6c5cd6;
}

.stat-card-icon--pink {
    background: #f6d9de;
    color: #c24c63;
}

.stat-card-icon--red {
    background: #f6d6d6;
    color: #c24a45;
}

.stat-card-icon--teal {
    background: #d2eee9;
    color: #1f8f7d;
}

.stat-card-icon--yellow {
    background: #f5eac0;
    color: #a87f1a;
}

.stat-card-label {
    font-size: 13px;
    font-weight: 600;
    color: #5c5e6b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-card-arrow {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted);
    font-size: 11px;
}

a.stat-card:hover .stat-card-arrow {
    color: var(--app-accent);
}

.stat-card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-card-sub {
    font-size: 12px;
    color: var(--app-muted);
    margin: 6px 0 0;
}

/* -------------------------------------------------------------------- */
/* Dashboard: chart cards                                               */
/* -------------------------------------------------------------------- */

.chart-card .box-body {
    padding-top: 6px;
}

/* -------------------------------------------------------------------- */
/* Dashboard: two-column layout (main content + right notifications)    */
/* -------------------------------------------------------------------- */

.dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

.dashboard-main {
    min-width: 0;
}

.dashboard-aside {
    min-width: 0;
    padding-top: 4px;
}

@media (max-width: 1199px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-aside {
        border-top: 1px solid var(--app-border);
        padding-top: 20px;
        margin-top: 4px;
    }
}

/* -------------------------------------------------------------------- */
/* Dashboard: right-sidebar notifications / activity panel              */
/* -------------------------------------------------------------------- */

.notif-panel-box {
    display: flex;
    flex-direction: column;
}

.notif-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text);
    margin-bottom: 14px;
}

.notif-panel-title--activities {
    margin-top: 8px;
}

.notif-list {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
}

.notif-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.notif-icon--warning {
    background: #fdf3d6;
    color: #c8961e;
}

.notif-icon--success {
    background: #dcf6e4;
    color: #1f9d55;
}

.notif-icon--muted {
    background: var(--app-hover-bg);
    color: var(--app-muted);
}

.notif-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--app-text);
    line-height: 1.35;
}

.notif-time {
    font-size: 11.5px;
    color: var(--app-muted);
}

.notif-empty {
    font-size: 12.5px;
    color: var(--app-muted);
    padding: 4px 0 14px;
}

/* -------------------------------------------------------------------- */
/* Calculator popover                                                   */
/* -------------------------------------------------------------------- */

#calculator {
    width: 244px;
}

.calc-topbar {
    display: flex;
    justify-content: flex-start;
    padding: 10px 14px 0;
}

/* The legacy #calculator button rule bundled in vendor.css forces a fixed
   35x35 size with !important-free but ID-level specificity, which beats a
   plain class selector -- prefix with #calculator to win the cascade. */
#calculator .calc-history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: var(--app-hover-bg);
    color: var(--app-muted);
    cursor: pointer;
}

#calculator .calc-history-btn:hover,
#calculator .calc-history-btn.is-active {
    background: var(--sidebar-accent-soft);
    color: var(--sidebar-accent);
}

.calc-history-btn svg {
    width: 16px;
    height: 16px;
}

.calc-display {
    padding: 6px 18px 16px;
    text-align: right;
}

.calc-expression {
    min-height: 18px;
    font-size: 14px;
    color: var(--app-muted);
    overflow-x: auto;
    white-space: nowrap;
}

.calc-result {
    font-size: 34px;
    font-weight: 700;
    color: var(--app-text);
    overflow-x: auto;
    white-space: nowrap;
}

.calc-history-panel {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    margin: 0 14px 10px;
    padding: 8px 10px;
    background: var(--app-hover-bg);
    border-radius: 10px;
}

.calc-history-panel.is-open {
    display: block;
}

.calc-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-muted);
    margin-bottom: 6px;
}

.calc-history-head a {
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--sidebar-accent);
}

.calc-history-empty {
    font-size: 12px;
    color: var(--app-muted);
    padding: 4px 0;
}

.calc-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calc-history-list li {
    padding: 6px 4px;
    border-bottom: 1px solid var(--app-border);
    cursor: pointer;
}

.calc-history-list li:last-child {
    border-bottom: none;
}

.calc-history-list li:hover {
    background: rgba(0, 0, 0, .03);
}

.calc-history-list .calc-history-expr {
    font-size: 11.5px;
    color: var(--app-muted);
}

.calc-history-list .calc-history-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--app-text);
    text-align: right;
}

.calc-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin: 0;
    background: var(--app-hover-bg);
    border-radius: 0 0 6px 6px;
    padding: 10px 8px;
}

.calc-row {
    display: contents;
}

/* #calculator prefix needed to out-specificity the legacy #calculator
   button rule bundled in vendor.css (fixed 35x35 size). */
#calculator .calc-key {
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 19px;
    font-weight: 500;
    color: var(--sidebar-text);
    cursor: pointer;
    transition: background-color .1s ease-in-out, color .08s ease-in-out, transform .08s ease-in-out;
}

#calculator .calc-key:hover {
    background: rgba(0, 0, 0, .05);
}

/* Press feedback: number/function keys snap to full black + shrink
   slightly so a tap visibly "registers", then ease back on release. */
#calculator .calc-key:active {
    background: rgba(0, 0, 0, .08);
    color: #000000;
    transform: scale(0.94);
}

/* #calculator prefix needed here too, to out-specificity #calculator
   .calc-key's own color rule above. */
#calculator .calc-key--fn {
    font-size: 17px;
    font-weight: 600;
}

#calculator .calc-key--op {
    color: var(--sidebar-accent);
    font-weight: 600;
}

/* Keep the operator's brand-blue color on press instead of the generic
   number-key black flash -- same specificity as .calc-key:active, so
   source order (declared after it) decides the tie. */
#calculator .calc-key--op:active {
    color: var(--sidebar-accent);
}

#calculator .calc-key--equals {
    background: var(--sidebar-accent);
    color: #ffffff;
    font-weight: 600;
}

#calculator .calc-key--equals:hover {
    background: var(--sidebar-bar-bg);
}

#calculator .calc-key--equals:active {
    background: var(--sidebar-bar-bg);
    color: #ffffff;
}

/* -------------------------------------------------------------------- */
/* List-page header "+ Add" button                                      */
/* -------------------------------------------------------------------- */

.btn-pill-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px !important;
    border: none !important;
    border-radius: 9999px !important;
    background: var(--sidebar-accent) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    box-shadow: none !important;
}

.btn-pill-add:hover,
.btn-pill-add:focus {
    filter: brightness(0.95);
    color: #ffffff !important;
}

/* -------------------------------------------------------------------- */
/* Table row action buttons (Edit / View / Delete etc.) -- app-wide,    */
/* since every list page generates these the same way (see e.g.        */
/* ManageUserController@index's raw "action" column template).         */
/* -------------------------------------------------------------------- */

.table .btn-xs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px !important;
    margin: 1px 2px;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 14px;
    box-shadow: none !important;
    text-shadow: none !important;
}

.table .btn-xs.btn-primary {
    color: var(--app-accent) !important;
    border: 1px solid var(--app-accent) !important;
}

.table .btn-xs.btn-primary:hover {
    background: var(--app-accent-soft) !important;
}

.table .btn-xs.btn-info {
    color: #0ba5ec !important;
    border: 1px solid #0ba5ec !important;
}

.table .btn-xs.btn-info:hover {
    background: rgba(11, 165, 236, .1) !important;
}

.table .btn-xs.btn-danger {
    color: #e3564f !important;
    border: 1px solid #e3564f !important;
}

.table .btn-xs.btn-danger:hover {
    background: rgba(227, 86, 79, .1) !important;
}

.table .btn-xs.btn-success {
    color: #2f9e5b !important;
    border: 1px solid #2f9e5b !important;
}

.table .btn-xs.btn-success:hover {
    background: rgba(47, 158, 91, .1) !important;
}

.table .btn-xs.btn-warning {
    color: #f79009 !important;
    border: 1px solid #f79009 !important;
}

.table .btn-xs.btn-warning:hover {
    background: rgba(247, 144, 9, .1) !important;
}

/* -------------------------------------------------------------------- */
/* Contact profile-card popup (contact/profile_card.blade.php)          */
/* -------------------------------------------------------------------- */

.profile-card-dialog {
    max-width: 520px;
    margin: 60px auto;
}

.profile-card {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 20, 50, .15);
}

.profile-card-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    color: #ffffff;
    opacity: .85;
    text-shadow: none;
    font-size: 22px;
}

.profile-card-close:hover {
    color: #ffffff;
    opacity: 1;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 24px 22px;
    background: linear-gradient(135deg, var(--sidebar-bar-bg), var(--sidebar-accent));
    color: #ffffff;
}

.profile-card-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    border: 2px solid rgba(255, 255, 255, .4);
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}

.profile-card-heading {
    min-width: 0;
}

.profile-card-heading h4 {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.profile-card-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 8px;
}

.profile-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
}

.profile-card-badge--inactive {
    background: rgba(227, 86, 79, .85);
}

.profile-card-stats {
    display: flex;
    background: var(--app-hover-bg);
    border-bottom: 1px solid var(--app-border);
}

.profile-card-stat {
    flex: 1 1 0;
    text-align: center;
    padding: 14px 8px;
}

.profile-card-stat + .profile-card-stat {
    border-left: 1px solid var(--app-border);
}

.profile-card-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-muted);
    margin-bottom: 4px;
}

.profile-card-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--app-text);
}

.profile-card-body {
    max-height: 50vh;
    overflow-y: auto;
    padding: 20px 24px;
}

.profile-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.profile-card-field--wide {
    grid-column: 1 / -1;
}

.profile-card-field-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-muted);
    margin-bottom: 3px;
}

.profile-card-field-value {
    font-size: 14px;
    color: var(--app-text);
    word-break: break-word;
}

.profile-card-footer {
    border-top: 1px solid var(--app-border);
}

/* -------------------------------------------------------------------- */
/* Essentials sub-nav (essentials/partials/subnav.blade.php)            */
/* -------------------------------------------------------------------- */

.essentials-subnav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    margin-bottom: 20px;
}

.essentials-subnav-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    color: var(--app-text);
}

.essentials-subnav-brand .sidebar-svg-icon {
    width: 18px;
    height: 18px;
    margin-right: 0;
}

.essentials-subnav-link {
    display: inline-block;
    padding: 15px;
    font-size: 14px;
    color: var(--app-muted);
}

.essentials-subnav-link:hover {
    color: var(--app-text);
    text-decoration: none;
    background: var(--app-hover-bg);
}

.essentials-subnav-link.active {
    color: var(--app-text);
    background: var(--app-hover-bg);
    font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Todo dashboard + Kanban board (resources/views/todo/index.blade.php) */
/* -------------------------------------------------------------------- */

@media (min-width: 992px) {
    .col-md-2dot4 {
        width: 20%;
    }
}

.todo-status-dashboard {
    margin-bottom: 20px;
}

.todo-stat-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 15px;
    border-left: 4px solid var(--app-accent);
}

.todo-stat-card.todo-stat-not_started { border-left-color: #9395a3; }
.todo-stat-card.todo-stat-in_progress { border-left-color: #00c0ef; }
.todo-stat-card.todo-stat-on_hold { border-left-color: #f39c12; }
.todo-stat-card.todo-stat-completed { border-left-color: #00a65a; }
.todo-stat-card.todo-stat-cancelled { border-left-color: #dd4b39; }

.todo-stat-count {
    font-size: 26px;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.2;
}

.todo-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-muted);
}

.todo-view-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.todo-view-toggle .btn.active {
    background: var(--app-accent);
    color: #fff;
    border-color: var(--app-accent);
}

.todo-kanban-board {
    min-height: 60px;
}

.todo-kanban-board .kanban-container {
    background: transparent;
}

.todo-kanban-board .kanban-board {
    background: var(--app-hover-bg);
    border-radius: 14px;
}

.todo-kanban-board .kanban-board-header {
    border-radius: 14px 14px 0 0;
    background: var(--app-card-bg);
    border-bottom: 1px solid var(--app-border);
    color: var(--app-text);
    font-weight: 600;
}

.todo-kanban-board .kanban-item {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    color: var(--app-text);
}

.todo-kanban-board .kanban-item:hover {
    box-shadow: 0 4px 12px rgba(20, 20, 50, .1);
}

.todo-kanban-board .kanban-item .card-actions .action {
    color: var(--app-muted);
}

.todo-kanban-board .user_avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: 4px;
    object-fit: cover;
}

/* -------------------------------------------------------------------- */
/* Modal polish (app-wide -- Bootstrap's .modal-title has no font-size  */
/* of its own, so it was falling back to a cramped inherited default)   */
/* -------------------------------------------------------------------- */

.modal-header {
    border-bottom: 1px solid var(--app-border);
    padding: 18px 20px;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #32325d;
}

.modal-body .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: 6px;
}

.modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 20, 50, .15);
}

.modal-footer {
    border-top: 1px solid var(--app-border);
    padding: 16px 20px;
}

.modal-footer .btn {
    border-radius: 9999px;
    padding: 8px 22px;
    font-weight: 600;
}

/* Custom SVG icons used in row action dropdowns (Pay/View/Edit/Delete/
   Deactivate/Ledger/Purchase/Stock Report/Documents & Notes, etc.) --
   sized and aligned to match where the FontAwesome icons they replaced
   used to sit. */
.action-menu-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: text-bottom;
}

.modal-footer .btn-default {
    background: var(--app-text) !important;
    color: #ffffff !important;
    border-color: var(--app-text) !important;
}

.modal-footer .btn-default:hover {
    filter: brightness(1.15);
}

/* Icon-prefixed input groups (assigned-to / date / hours fields), matching
   the UltimatePOS reference form layout. */
.input-group .input-group-addon {
    background: var(--app-hover-bg);
    border: 1px solid var(--app-border);
    color: var(--app-muted);
}

/* -------------------------------------------------------------------- */
/* Header bell: slide-out notification panel (right side)               */
/* -------------------------------------------------------------------- */

.notification-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, 0.35);
    z-index: 2000;
}

.notification-panel-overlay--show {
    display: block;
}

.notification-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 360px;
    max-width: 90vw;
    background: var(--app-card-bg);
    box-shadow: -8px 0 24px rgba(20, 20, 30, 0.12);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.notification-panel--open {
    transform: translateX(0);
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--app-border);
    flex: 0 0 auto;
}

.notification-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--app-text);
}

.notification-panel-close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--app-muted);
    cursor: pointer;
    padding: 0;
}

.notification-panel-close:hover {
    color: var(--app-text);
}

.notification-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}

.notification-panel-body .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notification-panel-body .menu > li > a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-text);
}

.notification-panel-body .menu > li > a:hover {
    background: var(--app-hover-bg);
    text-decoration: none;
}

.notification-panel-body .notification-li.unread {
    background: var(--app-accent-soft);
}

.notification-panel-body .notif-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--app-accent);
}

.notification-panel-body .notif-info {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    white-space: normal;
}

.notification-panel-body .time {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--app-muted);
}

.notification-panel-body .no-notification {
    padding: 24px 20px;
    text-align: center;
    color: var(--app-muted);
}

.notification-panel-body .load_more_li {
    border-bottom: none;
}

.notification-panel-body .load_more_li a {
    display: block;
    padding: 12px 20px;
    text-align: center;
    color: var(--app-accent);
    font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* POS top toolbar (Location + quick-action icons)                      */
/* Lives OUTSIDE #add_pos_sell_form -- layouts/partials/header-pos.blade */
/* .php replaces the normal site header entirely when $pos_layout is    */
/* true, so it needs its own scope (safe: .pos-header is unique to the  */
/* POS page). Turned into its own white bento card matching the panels  */
/* below it, instead of bare text/buttons directly on the gray canvas.  */
/* -------------------------------------------------------------------- */

.pos-header {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 15px !important;
    margin: 15px 15px 15px !important;
    width: calc(100% - 30px);
}

.pos-header .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.pos-header p {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--app-text);
}

/* Muted/light button treatment instead of the solid saturated Bootstrap
   colors (bg-purple, btn-danger, btn-success, bg-yellow, btn-primary,
   btn-info, ...) these buttons ship with -- matching the same soft style
   already used for the main app header's buttons. */
.pos-header .btn {
    border-radius: 8px !important;
    background: var(--app-card-bg) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-muted) !important;
}

.pos-header .btn:hover {
    border-color: var(--app-accent) !important;
    color: var(--app-accent) !important;
}

/* -------------------------------------------------------------------- */
/* POS screen reskin (resources/views/sale_pos/create.blade.php)        */
/* Scoped under #add_pos_sell_form -- the unique id on the POS page's   */
/* <form> that wraps the whole layout (toolbar, cart, sidebar, actions) */
/* -- so none of this leaks onto other pages sharing the same Bootstrap */
/* input-group / table / btn classes. No JS touched: pos.js/product.js  */
/* still see the exact same ids/classes/data-attributes they always did.*/
/* -------------------------------------------------------------------- */

/* Cart card: match the 15px padding unit used everywhere else in the
   bento grid (the global .box-body rule is 14px 20px 20px, asymmetric). */
#add_pos_sell_form .box-body {
    padding: 15px !important;
}

/* Top toolbar: customer select + product search */
#add_pos_sell_form .input-group-addon {
    background: var(--app-hover-bg);
    border: 1px solid var(--app-border);
    color: var(--app-muted);
}

#add_pos_sell_form .input-group .form-control,
#add_pos_sell_form .input-group-btn .btn {
    border: 1px solid var(--app-border);
    background: var(--app-card-bg);
}

#add_pos_sell_form .input-group .form-control:focus {
    border-color: var(--app-accent);
    box-shadow: none;
}

#add_pos_sell_form .select2-container .select2-selection {
    border: 1px solid var(--app-border) !important;
    border-radius: 8px !important;
    min-height: 36px !important;
}

/* Cart table */
#add_pos_sell_form #pos_table {
    border: none;
}

#add_pos_sell_form #pos_table > thead > tr > th {
    background: transparent;
    border: none !important;
    border-bottom: 1px solid var(--app-border) !important;
    color: var(--app-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

#add_pos_sell_form #pos_table > tbody > tr > td {
    border: none !important;
    border-bottom: 1px solid var(--app-border) !important;
    vertical-align: middle;
    padding-top: 12px;
    padding-bottom: 12px;
}

#add_pos_sell_form #pos_table.table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent;
}

#add_pos_sell_form #pos_table > tbody > tr:hover {
    background: var(--app-hover-bg);
}

/* Empty-cart state: #pos_table > tbody genuinely has zero <tr> children
   when the cart is empty (pos.js appends/removes real rows), so this is
   pure CSS -- no JS toggle needed. */
#add_pos_sell_form #pos_table > tbody:empty {
    display: block;
    padding: 60px 20px;
}

#add_pos_sell_form #pos_table > tbody:empty::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background-color: var(--app-muted);
    -webkit-mask-image: url('/img/icons/sale.svg');
    mask-image: url('/img/icons/sale.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: .4;
}

#add_pos_sell_form #pos_table > tbody:empty::after {
    content: "Your cart is empty";
    display: block;
    text-align: center;
    color: var(--app-muted);
    font-size: 14px;
    font-weight: 600;
}

#add_pos_sell_form:has(#pos_table > tbody:empty) #pos_table > thead {
    display: none;
}

/* Sidebar filters: category / brand */
#add_pos_sell_form #product_category_div .select2-selection,
#add_pos_sell_form #product_brand_div .select2-selection {
    border: 1px solid var(--app-border) !important;
    border-radius: 999px !important;
    background: var(--app-hover-bg) !important;
}

#add_pos_sell_form #show_featured_products {
    border-radius: 999px !important;
}

/* Product grid cards */
#add_pos_sell_form .product_box {
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 10px;
    background: var(--app-card-bg);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
    height: 100%;
}

#add_pos_sell_form .product_box:hover {
    box-shadow: 0 4px 14px rgba(30, 30, 60, 0.08);
    transform: translateY(-2px);
    border-color: var(--app-accent);
}

#add_pos_sell_form .product_box .image-container {
    height: 90px;
    border-radius: 10px;
    background-color: var(--app-hover-bg);
    margin-bottom: 8px;
}

#add_pos_sell_form .product_box .text_div {
    text-align: left;
}

#add_pos_sell_form .product_box .text_div small.text {
    display: block;
    color: var(--app-text) !important;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#add_pos_sell_form .product_box .product-price {
    display: block;
    color: var(--app-accent);
    font-weight: 700;
    font-size: 13px;
    margin-top: 2px;
}

#add_pos_sell_form .product_box .product-stock {
    display: block;
    color: var(--app-muted);
    font-size: 11px;
}

/* Bottom action bar. Its wrapping .row now lives inside the same
   .row.mb-12 > .col-md-12 container as the cart/sidebar row (see
   create.blade.php), matching the "1/1, 1" grid structure. But the bar
   itself is app.css's .pos-form-actions{position:fixed; width:100%},
   pinned to the viewport regardless of DOM nesting -- so its horizontal
   alignment has to be fixed with explicit left/right insets here, not
   normal-flow margin/width. */
#add_pos_sell_form .pos-form-actions {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 15px;
    left: 15px !important;
    right: 15px !important;
    bottom: 15px !important;
    width: auto !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#add_pos_sell_form .pos-form-actions .btn {
    border-radius: 10px !important;
    border: none !important;
    font-weight: 600;
    padding: 10px 16px !important;
}

/* Same muted pastel-wash formula as the dashboard stat cards
   (.stat-card--X / .stat-card-icon--X) instead of the solid saturated
   Bootstrap colors (bg-info, bg-yellow, bg-red, bg-purple, bg-maroon,
   bg-navy, btn-success, btn-danger) these buttons ship with -- same hue
   per button, just a light wash with a matching darker text/icon color
   (the icon inherits it automatically via currentColor). */
#add_pos_sell_form .pos-form-actions #pos-draft {
    background: #eaf4fb !important;
    color: #2178a8 !important;
}

#add_pos_sell_form .pos-form-actions #pos-quotation {
    background: #fbf6e8 !important;
    color: #a87f1a !important;
}

#add_pos_sell_form .pos-form-actions [data-pay_method="suspend"] {
    background: #fbecec !important;
    color: #c24a45 !important;
}

#add_pos_sell_form .pos-form-actions [data-pay_method="credit_sale"] {
    background: #f1eefb !important;
    color: #6c5cd6 !important;
}

#add_pos_sell_form .pos-form-actions [data-pay_method="card"] {
    background: #fbeef0 !important;
    color: #c24c63 !important;
}

#add_pos_sell_form .pos-form-actions #pos-finalize {
    background: #eaf6f4 !important;
    color: #1f8f7d !important;
}

#add_pos_sell_form .pos-form-actions [data-pay_method="cash"] {
    background: #eaf7ee !important;
    color: #2f9e5b !important;
}

#add_pos_sell_form .pos-form-actions #pos-cancel {
    background: #fbf1e8 !important;
    color: #b8722a !important;
}

#add_pos_sell_form .pos-form-actions #recent-transactions {
    background: #eaf4fb !important;
    color: #2178a8 !important;
    border-radius: 10px !important;
}

/* app.css's .pos-total span.text has a fixed width:60px, which wraps
   "Total Payable" onto two lines and makes this pill (and the whole bar
   around it) noticeably taller than the top toolbar card. Let it size to
   its content on one line instead, matching the button heights next to it. */
#add_pos_sell_form .pos-total {
    background: #e7eaf4 !important;
    color: #2c3968 !important;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

#add_pos_sell_form .pos-total span.text {
    width: auto !important;
    white-space: nowrap;
}

#add_pos_sell_form .pos-total span.number {
    font-size: 16px !important;
}

/* Right-hand product sidebar: full-height, full-width colored panel that
   always matches the cart panel's height (align-items: stretch on the row
   they share), instead of a short content box leaving a bare gray gap
   below it. #product_list_body already had its own internal scroll
   (see app.css) for pos.js's infinite-scroll pagination -- letting it
   flex-fill the panel instead of stopping at a fixed 485px means the
   scrollable area now actually uses the full available height. */
/* :not(:has(.pos-form-actions)) matters here -- .pos-form-actions' own
   wrapping .row became a SIBLING of this one after the create.blade.php
   restructuring (both now live directly under the same .col-md-12), and
   .pos-form-actions itself is position:fixed (out of flow), so without
   this exclusion the min-height below would apply to THAT now-empty
   sibling row too, adding a second ~991px blank block and forcing a
   page scrollbar for no visible reason. */
#add_pos_sell_form > .row.mb-12 > .col-md-12 > .row:not(:has(.pos-form-actions)) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Fill the space down to the fixed bottom action bar instead of
       sizing to content and leaving a bare gray gap when the cart is
       short (e.g. empty). 94px ~= .pos-header's own margin+height+gap
       above; 130px ~= .pos-form-actions' fixed height+padding+bottom
       inset reserved below. Both cards still grow taller than this if
       their content needs more room. */
    min-height: calc(100vh - 94px - 130px);
}

/* Balance every gap in the bento grid to the same 15px unit already used
   for the page's outer content padding (section.content { padding: 15px })
   and the .pos-header card margins above -- .pr-12/.mb-12 are shared
   utility classes used elsewhere in the app, so they're overridden here
   scoped to the POS page only, not redefined globally. */
#add_pos_sell_form .pr-12 {
    padding-right: 15px !important;
}

#add_pos_sell_form > .row.mb-12 {
    margin-bottom: 15px !important;
}

#add_pos_sell_form .col-md-5.no-padding {
    display: flex;
    flex-direction: column;
    background: var(--app-card-bg) !important;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 15px !important;
}

/* The cart's .box.box-solid carries "mb-12 mb-40" (see pos_form.blade.php)
   for spacing that made sense in the old non-stretched layout -- with
   align-items: stretch now equalizing both column heights, that leftover
   bottom margin just eats into the stretched height, making the cart card
   visibly shorter than the sidebar card next to it. Zero it out here, and
   make the box itself (not just its column) actually fill that stretched
   height instead of staying at its own intrinsic content height. */
#add_pos_sell_form .box.box-solid.mb-12 {
    margin-bottom: 0 !important;
}

#add_pos_sell_form .col-md-7.no-padding {
    display: flex;
    flex-direction: column;
}

#add_pos_sell_form .col-md-7.no-padding > .box.box-solid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Give the cart its own internal scrollbar (matching #product_list_body's
   pattern on the sidebar) instead of letting a long cart push the whole
   page taller and scroll -- the customer/search row stays fixed at top,
   the totals row stays fixed at bottom, and only the actual cart table
   in between scrolls. min-height: 0 is required at every level of this
   flex chain -- flex items default to min-height: auto, which refuses to
   shrink below content size and would silently defeat the overflow rule. */
#add_pos_sell_form .box-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#add_pos_sell_form .box-body > .row:has(.pos_product_div) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#add_pos_sell_form .pos_product_div {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

#add_pos_sell_form .col-md-5.no-padding > .row:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#add_pos_sell_form #product_list_body {
    max-height: none !important;
    flex: 1 1 auto;
    overflow-y: auto !important;
    min-height: 0;
}

/* Totals summary row */
#add_pos_sell_form .pos_form_totals table {
    background: var(--app-hover-bg);
    border-radius: 12px;
    border: none;
}

#add_pos_sell_form .pos_form_totals table > tbody > tr > td {
    border: none;
    padding: 10px 16px;
}

@media (max-width: 480px) {
    .notification-panel {
        width: 100vw;
        max-width: 100vw;
    }
}