/* ==========================================================================
   UnlockGrid - shell redesign pass (Aug 2026)
   --------------------------------------------------------------------------
   Loaded AFTER ub-panel.css (see layouts/app.blade.php <head>), so equal-
   specificity rules here win by source order without needing !important
   everywhere. New elements get fresh classnames (.app-sidebar/.app-topbar/
   etc.) rather than reusing .side-rail/.command-bar/.top-navbar, because
   those carry ~15 scattered, .is-admin-shell/.is-customer-shell-scoped
   patches in the base file - a clean namespace was safer than untangling
   that history. Nav internals (.side-nav a, .nav-parent, .nav-flyout,
   .nav-icon, .nav-stack) ARE reused: their unprefixed base rules in
   ub-panel.css already assume a dark rail (light-on-dark colors), so they
   work as-is against the new .app-sidebar background - EXCEPT .nav-parent
   itself, which resets to `color: inherit` (it's a <button>, so this strips
   the browser's default button text color). The old dark rail (.side-rail)
   set `color` explicitly, so that inherit resolved correctly there; ours
   must do the same (see the `color` line right below), or every .nav-parent
   flyout trigger (Finance, Inventory, Order History, Place Order, etc.)
   inherits the page's dark-on-light body text color instead and goes
   almost invisible against this dark sidebar. Only the admin-specific nav
   classes that turned out to be ENTIRELY dead outside .is-admin-shell
   (.admin-nav-item, .admin-nav-divider, .admin-submenu, .nav-count,
   .admin-nav-stack) get fresh definitions below.

   Only new custom properties are added to :root - nothing here redefines
   an existing token, so every other page that isn't touched by this pass
   keeps rendering exactly as before.
   ========================================================================== */

:root {
    --sidebar-bg-1: #0a0e17;
    --sidebar-bg-2: #151d2e;
    --sidebar-line: rgba(255, 255, 255, .08);
    --sidebar-active-bg: rgba(77, 160, 255, .16);
    --orange-deep: #b06a00;
    --violet-deep: #4c3fcf;
    --rose-deep: #b23350;
    --pastel-blue-bg: #e8f1ff;
    --pastel-violet-bg: #eeecfe;
    --pastel-green-bg: #e7f8ef;
    --pastel-orange-bg: #fff2e0;
    --pastel-rose-bg: #fdeef0;
    --hero-grad-1: var(--blue-deep);
    --hero-grad-2: var(--violet-deep);
}

body.theme-dark {
    --sidebar-bg-1: #05070c;
    --sidebar-bg-2: #0d121c;
    --pastel-blue-bg: rgba(77, 160, 255, .14);
    --pastel-violet-bg: rgba(141, 145, 255, .16);
    --pastel-green-bg: rgba(54, 199, 129, .14);
    --pastel-orange-bg: rgba(255, 179, 67, .14);
    --pastel-rose-bg: rgba(255, 102, 128, .14);
}

/* ==========================================================================
   Shell frame + sidebar
   ========================================================================== */

.app-frame {
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 85;
    display: flex;
    flex-direction: column;
    width: 264px;
    height: 100vh;
    padding: 16px 12px;
    gap: 10px;
    color: #d9e3f2;
    background: linear-gradient(180deg, var(--sidebar-bg-2), var(--sidebar-bg-1));
    border-right: 1px solid var(--sidebar-line);
    transition: transform .2s ease;
}

.app-sidebar .brand {
    flex: 0 0 auto;
    margin-bottom: 2px;
}

.app-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.app-sidebar-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.side-nav-label {
    margin: 14px 10px 4px;
    color: rgba(151, 163, 186, .75);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.app-sidebar-scroll > .side-nav-label:first-child {
    margin-top: 2px;
}

/* Admin-only nav classes that had zero unprefixed definition in the base
   stylesheet (they only ever existed as .is-admin-shell .xxx) - the shell
   unification below drops that wrapper class, so these give them a real,
   permanent, dark-rail-appropriate look instead of falling back to
   unstyled browser defaults. */
.admin-nav-item {
    min-height: 42px;
}

.admin-nav-divider {
    height: 1px;
    margin: 10px 10px;
    background: var(--sidebar-line);
}

.admin-nav-stack .nav-flyout {
    /* Base .nav-flyout (ub-panel.css) already renders a dark popout card -
       reused as-is, just widen slightly for the longer admin sub-labels. */
    width: 250px;
}

/* The sidebar nav can now scroll (.app-sidebar-scroll below, needed since
   both roles' items live in one column and can outgrow a short viewport).
   A position:absolute flyout's containing block would be clipped by that
   scrolling ancestor - switched to position:fixed instead (JS in
   layouts/app.blade.php computes left/top from getBoundingClientRect, so
   it now matches this positioning scheme correctly; previously the JS's
   viewport-relative math was feeding a position:absolute element, which
   only looked right by coincidence). Fixed positioning also isn't clipped
   by the scroll container, so submenus always pop out into open page
   space instead of being cut off at the sidebar's edge. */
.app-sidebar .nav-flyout {
    position: fixed;
    left: auto;
}

.admin-submenu a {
    grid-template-columns: 20px minmax(0, 1fr) auto;
}

.nav-dot {
    justify-self: center;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #5c6b82;
}

.nav-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #c3cee0;
    font-size: 10.5px;
    font-weight: 800;
    text-align: center;
}

.side-nav a.active .nav-count,
.nav-stack.active .nav-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* Sidebar foot: system status card + account chip (account-menu.blade.php,
   included with placement=sidebar - see partials/account-menu.blade.php). */
.app-sidebar-foot {
    flex: 0 0 auto;
    display: grid;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--sidebar-line);
}

.system-status-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
}

.system-status-card .status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(24, 166, 99, .22);
}

.system-status-card .status-dot.warn {
    background: var(--orange);
    box-shadow: 0 0 0 3px rgba(245, 155, 24, .22);
}

.system-status-card div {
    min-width: 0;
}

.system-status-card strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-status-card small {
    display: block;
    overflow: hidden;
    color: #8b98ad;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Account trigger/dropdown reused from ub-panel.css as-is (already
   theme-token-driven), just widened to fill the sidebar foot and flipped
   to open upward since it now sits at the bottom of the viewport. */
.app-sidebar-foot .account-menu {
    width: 100%;
}

.app-sidebar-foot .account-trigger {
    width: 100%;
    max-width: none;
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.app-sidebar-foot .account-trigger:hover {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
}

.app-sidebar-foot .account-trigger-text strong {
    color: #fff;
}

.app-sidebar-foot .account-trigger-text small {
    color: #8b98ad;
}

.app-sidebar-foot .account-chevron {
    color: #8b98ad;
}

.app-sidebar-foot .account-dropdown {
    top: auto;
    right: auto;
    bottom: calc(100% + 8px);
    left: 0;
    width: 100%;
}

/* ==========================================================================
   Topbar
   ========================================================================== */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.theme-dark .app-topbar {
    background: rgba(23, 29, 39, .9);
}

.app-topbar-toggle {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: var(--card);
    cursor: pointer;
}

.app-topbar-toggle .nav-svg {
    width: 17px;
    height: 17px;
}

.app-topbar-crumb {
    flex: 0 0 auto;
    min-width: 0;
    display: none;
}

.app-topbar-crumb small {
    display: block;
    overflow: hidden;
    color: var(--quiet);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-topbar-crumb strong {
    display: block;
    overflow: hidden;
    max-width: 220px;
    color: var(--ink);
    font-size: 14.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 641px) {
    .app-topbar-crumb {
        display: block;
    }
}

.app-topbar-search {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto;
}

.app-topbar-search input {
    min-width: 0;
}

.app-topbar-search button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    padding: 0;
}

.app-topbar-search button .nav-svg {
    width: 16px;
    height: 16px;
}

.app-topbar-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--card);
    cursor: pointer;
}

.icon-btn:hover {
    color: var(--blue);
    border-color: rgba(22, 119, 232, .3);
}

.icon-btn .nav-svg {
    width: 17px;
    height: 17px;
}

.locale-toggle {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--card);
    font-size: 11px;
    font-weight: 850;
}

.locale-toggle:hover {
    color: var(--blue);
    border-color: rgba(22, 119, 232, .3);
}

.notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    display: inline-grid;
    min-width: 16px;
    height: 16px;
    place-items: center;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--rose);
    color: #fff;
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1;
}

.notif-menu {
    position: relative;
}

.notif-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 130;
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.theme-dark .notif-dropdown {
    box-shadow: 0 18px 34px rgba(0, 0, 0, .4);
}

.notif-menu.open .notif-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.notif-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 6px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 4px;
}

.notif-dropdown-head strong {
    font-size: 13px;
    color: var(--ink);
}

.notif-dropdown-list {
    display: grid;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.notif-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: flex-start;
    padding: 7px 8px;
    border-radius: 8px;
    color: inherit;
}

.notif-item:hover {
    background: var(--card-soft);
}

.notif-item-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--pastel-blue-bg);
    color: var(--blue-deep);
}

.notif-item-icon .nav-svg {
    width: 15px;
    height: 15px;
}

.notif-item strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-item span {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
}

.notif-empty {
    padding: 22px 12px;
    color: var(--quiet);
    text-align: center;
    font-size: 12.5px;
}

/* ==========================================================================
   Announcement ticker, now living below .app-topbar for every customer
   page (previously inside .top-navbar). Reuses .top-navbar-ticker and its
   children exactly as-is from ub-panel.css - those inner classes were
   never scoped behind .is-customer-shell, only the outer row wrappers
   were, so the visual (gradient strip, marquee animation) is untouched.

   This row is now a direct grid-row child of .workspace (grid-template-
   columns is left as the implicit single "auto" track - see ub-panel.css).
   An auto grid track sizes to its widest item's MAX-CONTENT, not the
   container's available width, so the marquee's un-clipped double-wide
   .ticker-track (by design: width:max-content, for a seamless scroll loop)
   was blowing the whole column - and therefore .app-topbar and every other
   row sharing that column - out to the marquee's full text width. The
   inner .ticker-viewport already clips correctly (min-width:0 + overflow:
   hidden), but that only constrains the ticker's own children, not this
   row's contribution to its grid parent. min-width:0 + overflow:hidden
   here closes that gap without touching the shared .workspace rule. */
.app-ticker-row {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

/* ==========================================================================
   Mobile: off-canvas sidebar drawer
   ========================================================================== */

@media (min-width: 981px) {
    .app-frame {
        padding-left: 264px;
        transition: padding-left .2s ease;
    }

    .app-frame.sidebar-hidden {
        padding-left: 0;
    }

    .app-frame.sidebar-hidden .app-sidebar {
        transform: translateX(-100%);
    }
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 980px) {
    .app-sidebar {
        transform: translateX(-100%);
        box-shadow: 0 24px 54px rgba(0, 0, 0, .35);
    }

    .app-frame.sidebar-mobile-open .app-sidebar {
        transform: translateX(0);
    }

    .app-frame.sidebar-mobile-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 80;
        background: rgba(6, 9, 16, .55);
    }

    .app-topbar-search {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .app-topbar {
        gap: 8px;
        padding: 8px 12px;
    }

    .app-topbar-search {
        order: 5;
        flex: 1 1 100%;
        max-width: none;
    }
}

/* ==========================================================================
   Stat cards - shared .kpi-card (admin pipeline-strip + customer
   kpi-strip already use this class) gets a pastel icon-chip treatment on
   top of its existing ub-panel.css recipe (radius/shadow/hover already
   fine as-is, only the icon + a touch more breathing room change here).
   ========================================================================== */

/* .kpi-strip is exclusive to customer/dashboard.blade.php (grep-confirmed -
   admin's equivalent row is the separate .pipeline-strip class), so this is
   safe to tune without affecting any other page. Its base ub-panel.css
   minmax(170px, 1fr) was sized for the original 4-card row; this redesign
   pass added 2 more cards (Locked Amount, Total Receipts) to the same
   strip, and at 170px/card six columns now fit on one row at common
   desktop widths - which isn't enough room for "Waiting Action"/"Locked
   Amount"/"Total Receipts" and clips them with an ellipsis. 280px keeps
   every current label whole (longest measures ~104px of the ~250px+ a card
   gets at that width) and reflows to 3 or fewer columns per row instead. */
.kpi-strip {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.kpi-card {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 16px;
}

.kpi-icon {
    border-radius: 12px;
    background: var(--pastel-blue-bg);
    color: var(--blue-deep);
}

.kpi-card.pending .kpi-icon,
.kpi-card.processing .kpi-icon {
    background: var(--pastel-blue-bg);
    color: var(--blue-deep);
}

.kpi-card.completed .kpi-icon {
    background: var(--pastel-green-bg);
    color: var(--green-deep);
}

.kpi-card.rejected .kpi-icon,
.kpi-card.spent .kpi-icon {
    background: var(--pastel-rose-bg);
    color: var(--rose-deep);
}

.kpi-card.all .kpi-icon {
    background: var(--pastel-violet-bg);
    color: var(--violet-deep);
}

.kpi-card strong {
    font-size: 24px;
}

/* Fresh top-row stat cards (revenue/active/profit/customers on admin,
   optional extras on customer) - same visual language as .kpi-card but no
   status-bucket color coding, just a rotating pastel set per position. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.stat-card {
    position: relative;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.stat-card::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 90px;
    height: 90px;
    border-radius: 999px;
    background: currentColor;
    opacity: .05;
}

.stat-card-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 11px;
    background: var(--pastel-blue-bg);
    color: var(--blue-deep);
}

.stat-card:nth-child(2) .stat-card-icon {
    background: var(--pastel-violet-bg);
    color: var(--violet-deep);
}

.stat-card:nth-child(3) .stat-card-icon {
    background: var(--pastel-green-bg);
    color: var(--green-deep);
}

.stat-card:nth-child(4) .stat-card-icon {
    background: var(--pastel-orange-bg);
    color: var(--orange-deep);
}

.stat-card-icon .nav-svg {
    width: 19px;
    height: 19px;
}

.stat-card span {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-card strong {
    display: block;
    margin: 3px 0;
    color: var(--ink);
    font-size: 25px;
    line-height: 1.15;
    font-weight: 900;
}

.stat-card small {
    display: block;
    color: var(--green-deep);
    font-size: 11.5px;
    font-weight: 750;
}

.stat-card small.flat {
    color: var(--muted);
}

/* ==========================================================================
   Gradient hero balance card (customer dashboard)
   ========================================================================== */

.balance-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 26px 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hero-grad-1), var(--hero-grad-2));
    box-shadow: 0 20px 40px rgba(15, 23, 42, .18);
    overflow: hidden;
}

.balance-hero::before,
.balance-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.balance-hero::before {
    top: -60px;
    right: 40px;
    width: 180px;
    height: 180px;
}

.balance-hero::after {
    bottom: -70px;
    right: 180px;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, .06);
}

.balance-hero-figure {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.balance-hero-figure span {
    display: block;
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.balance-hero-figure strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.1;
}

.balance-hero-figure small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .7);
    font-size: 12.5px;
    font-weight: 650;
}

.balance-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.balance-hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 9px;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}

.balance-hero-actions a.primary {
    color: var(--blue-deep);
    background: #fff;
}

.balance-hero-actions a.primary:hover {
    background: #f2f6fc;
}

.balance-hero-actions a.ghost {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
}

.balance-hero-actions a.ghost:hover {
    background: rgba(255, 255, 255, .24);
}

.page-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--blue-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.section-head-sub {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
}

/* ==========================================================================
   Quick order row (customer dashboard "Hızlı Sipariş")
   ========================================================================== */

.quick-order-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.quick-order-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.quick-order-card:hover {
    border-color: rgba(22, 119, 232, .3);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.quick-order-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--pastel-blue-bg);
    color: var(--blue-deep);
    font-size: 12px;
    font-weight: 900;
}

.quick-order-card:nth-child(2) .quick-order-avatar {
    background: var(--pastel-violet-bg);
    color: var(--violet-deep);
}

.quick-order-card:nth-child(3) .quick-order-avatar {
    background: var(--pastel-green-bg);
    color: var(--green-deep);
}

.quick-order-card:nth-child(4) .quick-order-avatar {
    background: var(--pastel-orange-bg);
    color: var(--orange-deep);
}

.quick-order-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.quick-order-copy strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-order-copy small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.quick-order-price {
    flex: 0 0 auto;
    color: var(--blue-deep);
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

/* ==========================================================================
   Services catalog - card grid style (customer/services.blade.php, the
   "Place A New Order" pages).

   Named .service-list-row rather than the shorter, more obvious
   .service-row: the EXISTING admin service catalog
   (admin/services.blade.php) already has an unrelated, actively-used
   `<tr class="service-row">` with its own ub-panel.css rules for that
   table's expandable service-group rows. This block originally used that
   shorter .service-row name - and even though it was never referenced by
   any template yet, the CSS class itself is global, so it collided
   immediately: the admin table's `<tr>` picked up `display: grid` with a
   5-column template meant for this card row, corrupting that page's
   layout (rows collapsed to ~64px wide, cells overlapping). Confirmed via
   getComputedStyle + matching stylesheet rules while spot-checking every
   page for shell regressions. Keep this .service-list-row prefix so it
   can't collide again.

   Second pass (Aug 2026): the original version above laid every service
   out as one full-width row per service, stacked in a single column -
   fine for a handful of services, tall and unbalanced once a group has
   more than a few. Switched to a responsive card grid (2-3 per row
   depending on viewport width), matching the tile-card language already
   used on the homepage (.home-feature-card, .stat-card) instead of a
   dense admin-style table row. The price+Order button - previously two
   separate grid cells in the wide row - are now grouped under one
   .service-list-row-foot wrapper (small, additive change in
   services.blade.php) so they can sit as their own line at the bottom of
   each card; every data attribute the open/close dialog JS relies on
   (data-open-dialog on both the row and the button, looked up by id, not
   DOM position) is untouched. */
.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.service-list-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

/* The whole row opens Place Order (role="button" tabindex="0" in
   services.blade.php, same keyboard-reachable pattern .service-card-dynamic
   used before this restyle) - carries the same focus-visible ring. */
.service-list-row:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.service-list-row:hover {
    border-color: rgba(22, 119, 232, .28);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.service-list-row-avatar {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 11px;
    background: var(--pastel-blue-bg);
    color: var(--blue-deep);
    font-size: 12px;
    font-weight: 900;
}

.service-list-row:nth-child(3n+2) .service-list-row-avatar {
    background: var(--pastel-violet-bg);
    color: var(--violet-deep);
}

.service-list-row:nth-child(3n+3) .service-list-row-avatar {
    background: var(--pastel-green-bg);
    color: var(--green-deep);
}

.service-list-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-list-row-copy {
    min-width: 0;
}

.service-list-row-copy h3 {
    display: -webkit-box;
    margin: 0 0 4px;
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.service-list-row-copy p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.service-list-row-copy .badges {
    margin-top: 8px;
}

/* Groups price + the Order button on their own line at the card's bottom
   edge - see the blade-template note in the section header comment above. */
.service-list-row-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}

.service-list-row-price {
    text-align: left;
    white-space: nowrap;
}

.service-list-row-price span {
    display: block;
    color: var(--quiet);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.service-list-row-price strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
}

@media (max-width: 640px) {
    .service-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Admin dashboard - order volume bar chart + resource health panel
   ========================================================================== */

.chart-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.chart-card-head h2 {
    margin: 0;
    font-size: 15px;
}

.chart-card-head p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11.5px;
}

.chart-card-total {
    text-align: right;
}

.chart-card-total strong {
    display: block;
    color: var(--ink);
    font-size: 20px;
    font-weight: 900;
}

.chart-card-total small {
    color: var(--muted);
    font-size: 10.5px;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
    padding-top: 22px;
}

.bar-chart-col {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-width: 0;
}

.bar-chart-bar {
    position: relative;
    width: 100%;
    min-height: 3px;
    border-radius: 5px 5px 2px 2px;
    background: var(--pastel-blue-bg);
    transition: transform .16s ease;
}

.bar-chart-col.is-peak .bar-chart-bar {
    background: linear-gradient(180deg, var(--blue), var(--blue-deep));
}

.bar-chart-col:hover .bar-chart-bar {
    transform: scaleY(1.02);
}

.bar-chart-value {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 2px);
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
}

.bar-chart-col:hover .bar-chart-value,
.bar-chart-col.is-peak .bar-chart-value {
    opacity: 1;
    transform: translate(-50%, 0);
}

.bar-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--quiet);
    font-size: 10px;
}

.health-list {
    display: grid;
    gap: 4px;
}

.health-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-radius: 9px;
}

.health-row:hover {
    background: var(--card-soft);
}

.health-avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--pastel-violet-bg);
    color: var(--violet-deep);
    font-size: 11px;
    font-weight: 900;
}

.health-copy {
    min-width: 0;
}

.health-copy strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-copy small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.health-status {
    text-align: right;
    white-space: nowrap;
}

.health-status small {
    display: block;
    color: var(--quiet);
    font-size: 10px;
}

.health-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
}

.health-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.health-pill.ok {
    color: var(--green-deep);
    background: var(--pastel-green-bg);
}

.health-pill.warn {
    color: var(--orange-deep);
    background: var(--pastel-orange-bg);
}

.live-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pastel-green-bg);
    color: var(--green-deep);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.live-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--green);
    animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .live-chip::before {
        animation: none;
    }
}

/* ==========================================================================
   Chat / support mascot widget (both roles) - a fixed-position wrap holding
   the round trigger button plus a popover menu (Support / WhatsApp /
   Telegram, whichever are configured) that opens upward on click, same
   open/close idiom as the account and notification menus.
   ========================================================================== */

.chat-widget-wrap {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
}

.chat-widget {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep));
    color: #fff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .28);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
}

.chat-widget:hover {
    box-shadow: 0 18px 34px rgba(15, 23, 42, .34);
    transform: translateY(-2px);
}

.chat-widget .nav-svg {
    width: 24px;
    height: 24px;
}

.chat-widget-ping {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--green);
}

.chat-widget-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    z-index: 1;
    display: grid;
    gap: 2px;
    width: 200px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.theme-dark .chat-widget-menu {
    box-shadow: 0 18px 34px rgba(0, 0, 0, .4);
}

.chat-widget-wrap.open .chat-widget-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.chat-widget-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    border-radius: 8px;
    padding: 0 9px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 750;
}

.chat-widget-menu a:hover {
    background: var(--card-soft);
}

.chat-widget-menu a .nav-svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
}

@media (max-width: 640px) {
    .chat-widget-wrap {
        right: 14px;
        bottom: 14px;
    }

    .chat-widget {
        width: 48px;
        height: 48px;
    }
}

/* ==========================================================================
   Public homepage - hero + trust strip (Aug 2026)
   --------------------------------------------------------------------------
   Structural rules (max-width, centering, grid columns) for .home-hero and
   friends stay in ub-panel.css - this layers a gradient card treatment on
   top (reusing the same --hero-grad-1/2 tokens as the customer dashboard's
   .balance-hero, so it matches the app's own visual language instead of
   inventing a new one) and adds a trust strip built from the existing
   admin-dashboard .stat-row/.stat-card components. Same additive technique
   as the rest of this file: equal-specificity selectors win by load order,
   so only the properties that actually change are restated here.
   ========================================================================== */
.home-hero {
    position: relative;
    padding: 64px 32px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--hero-grad-1), var(--hero-grad-2));
    box-shadow: 0 24px 48px rgba(15, 23, 42, .18);
    overflow: hidden;
}

.home-hero::before,
.home-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.home-hero::before {
    top: -80px;
    right: -40px;
    width: 260px;
    height: 260px;
}

.home-hero::after {
    bottom: -90px;
    left: -60px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .05);
}

.home-hero-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-hero h1,
.home-hero p,
.home-hero-actions {
    position: relative;
    z-index: 1;
}

.home-hero h1 {
    color: #fff;
}

.home-hero p {
    color: rgba(255, 255, 255, .82);
}

.home-hero-actions .ghost-btn {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .32);
}

.home-hero-actions .ghost-btn:hover {
    background: rgba(255, 255, 255, .22);
}

.home-hero-actions .primary-btn {
    color: var(--blue-deep);
    background: #fff;
}

.home-hero-actions .primary-btn:hover {
    background: #f2f6fc;
}

.home-hero-note {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, .72) !important;
}

.home-hero-note a {
    color: #fff !important;
    font-weight: 800;
    text-decoration: underline;
}

.home-trust-strip {
    max-width: 1080px;
    margin: -30px auto 0;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.home-section-tinted {
    padding-top: 32px;
    padding-bottom: 8px;
}

.home-section-tinted .home-feature-grid {
    padding: 28px;
    border-radius: 16px;
    background: var(--card-soft);
    border: 1px solid var(--line-soft);
}

.home-feature-card:nth-child(2) span {
    background: var(--violet);
}

.home-feature-card:nth-child(3) span {
    background: var(--cyan);
}

.home-feature-card:nth-child(4) span {
    background: var(--orange);
}

@media (max-width: 640px) {
    .home-hero {
        padding: 44px 20px;
    }

    .home-trust-strip {
        margin-top: -18px;
    }

    .home-section-tinted .home-feature-grid {
        padding: 18px;
    }
}