/*
 * navy-theme.css  -  BizSuite brand layer, loaded AFTER the Tixia stylesheet.
 *
 * apply-navy-theme.ps1 already recoloured Tixia's primary (#222fb9 -> #1e3a8a) in the app's copy of style.css.
 * This file adds the things that are a design decision rather than a find/replace:
 *   - a deeper navy (#0c1f4a) for the sidebar and the logo bar, so they read as "navy" and contrast with buttons;
 *   - page background, links and focus ring in the navy family.
 *
 * Change --biz-navy / --biz-navy-deep here to re-brand the whole app in one place.
 */
:root,
[data-bs-theme=light] {
    --biz-navy: #1e3a8a;          /* primary: buttons, links, accents */
    --biz-navy-deep: #0c1f4a;     /* sidebar + logo bar */
    --biz-navy-soft: #e8edf8;     /* very light navy tint for hovers / table stripes */
}

/* ---------- Logo bar and sidebar: deep navy ---------- */
[data-nav-headerbg=color_3],
[data-nav-headerbg=color_3][data-theme-version=dark] { --nav-headbg: var(--biz-navy-deep); }

[data-sidebarbg=color_3],
[data-sidebarbg=color_3][data-theme-version=dark] { --sidebar-bg: var(--biz-navy-deep); }

/* Tixia re-declares the sidebar colour with !important in the collapsed ("menu-toggle") state. */
[data-sidebarbg=color_3] .menu-toggle .deznav .metismenu li > ul,
[data-sidebarbg=color_3][data-theme-version=dark] .menu-toggle .deznav .metismenu li > ul {
    background: var(--biz-navy-deep) !important;
}

/* Active / hovered sidebar entry: a lighter navy pill instead of a flat fill */
[data-sidebarbg=color_3] .deznav .metismenu > li.mm-active > a,
[data-sidebarbg=color_3] .deznav .metismenu > li > a:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* ---------- Content area ---------- */
[data-bs-theme=light] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) { color: var(--biz-navy); }
[data-bs-theme=light] .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--biz-navy-soft); }
[data-bs-theme=light] .card-header.bg-primary { background-color: var(--biz-navy) !important; }

.form-control:focus, .form-select:focus {
    border-color: var(--biz-navy);
    box-shadow: 0 0 0 .2rem rgba(30, 58, 138, .18);
}

/* Pagination */
.pagination { --bs-pagination-active-bg: var(--biz-navy); --bs-pagination-active-border-color: var(--biz-navy); --bs-pagination-color: var(--biz-navy); }

/* Brand text in the logo bar */
.nav-header .brand-title { letter-spacing: .3px; }

/* Login page */
.biz-login-bg { background: linear-gradient(135deg, #0c1f4a 0%, #1e3a8a 100%); }

/* =====================================================================================
   POS: touch-friendly layout  (resources/views/livewire/pos/pos-terminal.blade.php)
   Desktop (>= 1200px) keeps the two-column till; below that the screen shows one panel at a time.
   ===================================================================================== */
[x-cloak] { display: none !important; }

/* ---------- POS product tiles ----------
   A tile is a plain <button> (NOT .btn: Tixia's .btn is a flex row, which squeezed everything side by side).
   Vertical card:  name (max 2 lines) / SKU / ... / price + status along the bottom, in-cart count in the corner. */
.pos-tile {
    position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    width: 100%; height: 100%; min-height: 112px; padding: 12px 14px; text-align: left; cursor: pointer;
    color: inherit; background: var(--bs-card-bg, #fff);
    border: 1.5px solid var(--bs-border-color, #dfe3ee); border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .06s ease;
}
.pos-tile:hover:not(:disabled) { border-color: var(--biz-navy); box-shadow: 0 6px 16px rgba(30, 58, 138, .16); }
.pos-tile:active:not(:disabled) { transform: scale(.98); }
.pos-tile:focus-visible { outline: 3px solid rgba(30, 58, 138, .35); outline-offset: 1px; }

.pos-tile__name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-weight: 600; font-size: 14.5px; line-height: 1.3; word-break: normal; overflow-wrap: break-word; hyphens: none;
}
.pos-tile--incart .pos-tile__name { padding-right: 26px; }   /* room for the in-cart bubble, only when it is shown */
.pos-tile__sku { margin-top: 2px; font-size: 11.5px; letter-spacing: .3px; color: #8a93a8; }
.pos-tile__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px;
    margin-top: auto; padding-top: 10px;
}
.pos-tile__price { font-size: 15px; font-weight: 700; color: var(--biz-navy); white-space: nowrap; }
.pos-tile__price--open { font-size: 13px; font-weight: 600; }
.pos-tile__qty {
    position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--biz-navy); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.pos-tile--incart { border-color: var(--biz-navy); background: var(--biz-navy-soft); }
.pos-tile--open { border-style: dashed; border-color: #9fb0dc; }          /* "key in amount" services look different */
.pos-tile--out { opacity: .5; cursor: not-allowed; }
.pos-tile .badge { font-weight: 600; }

[data-bs-theme=dark] .pos-tile { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
[data-bs-theme=dark] .pos-tile--incart { background: rgba(122, 162, 247, .16); border-color: #7aa2f7; }
[data-bs-theme=dark] .pos-tile__price { color: #7aa2f7; }
[data-bs-theme=dark] .pos-tile__qty { background: #7aa2f7; color: #0c1f4a; }

@media (max-width: 1199.98px) {
    /* More room for the till: drop the page title / breadcrumb (supported by Chrome / Android WebView 105+) */
    .container-fluid:has(#pos-root) > .page-title { display: none; }
    /* Keep the last row clear of the fixed bottom bar */
    .container-fluid:has(#pos-root) { padding-bottom: 5.5rem; }

    /* 16px inputs stop mobile browsers zooming the page when a field is focused; 46px = comfortable thumb target */
    .pos-root input, .pos-root select { font-size: 16px !important; min-height: 46px; }
    .pos-root .pos-qty .btn, .pos-root .pos-qty input { min-height: 48px; min-width: 48px; font-size: 20px !important; }
    .pos-root .pos-remove { min-height: 48px; min-width: 48px; }
    .pos-root .pos-tile { min-height: 112px; }
    .pos-root .btn-lg { min-height: 56px; font-size: 18px; }

    /* "View cart" bar pinned to the bottom of the screen while shopping */
    .pos-bottom-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: var(--biz-navy-deep); box-shadow: 0 -4px 16px rgba(0, 0, 0, .3);
    }
    .pos-bottom-bar .btn { width: 100%; min-height: 54px; font-size: 17px; border-radius: 12px; }

    /* "Charge" / "New sale" stays reachable at the bottom of the cart while scrolling */
    .pos-charge-footer {
        position: sticky; bottom: 0; z-index: 5; background: var(--bs-card-bg, #fff);
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
    }
}