/* ============================================================
   Premium UI theme — global enhancement layer
   Scoped to .pui-page (the page content area) so it never touches
   the navbar/sidebar. Loaded after style.css; dark-mode.css owns
   the dark variants further down the cascade.
   ============================================================ */

.pui-page {
    /* Consistent breathing room below the topbar for every module page,
       so headers are never glued to the top bar. */
    padding-top: 18px;
    --pui-primary:   var(--app-primary);
    --pui-primary-d: var(--app-primary-dark);
    --pui-ink:       #0f172a;
    --pui-muted:     #94a3b8;
    --pui-border:    #eef1f5;
    --pui-soft:      #f6f9fc;
    --pui-radius:    10px;
    --pui-shadow:        0 1px 2px rgba(16,24,40,.04), 0 8px 20px -16px rgba(16,24,40,.14);
    --pui-shadow-hover:  0 1px 2px rgba(16,24,40,.04), 0 16px 32px -22px rgba(16,24,40,.22);
}

/* ── Cards ──────────────────────────────────────────── */
.pui-page .card {
    border: 1px solid var(--pui-border) !important;
    border-radius: var(--pui-radius) !important;
    box-shadow: var(--pui-shadow);
}
.pui-page .card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--pui-border);
    padding: 16px 22px;
    font-weight: 700;
    color: var(--pui-ink);
}
.pui-page .card .card-header h1,
.pui-page .card .card-header h2,
.pui-page .card .card-header h3,
.pui-page .card .card-header h4,
.pui-page .card .card-header h5,
.pui-page .card .card-header .card-title { font-weight: 800; color: var(--pui-ink); margin: 0; }
.pui-page .card .card-body { padding: 22px; }

/* ── Tables inside cards ────────────────────────────── */
.pui-page .card .table { margin: 0; }
.pui-page .card .table thead th {
    background: var(--pui-soft);
    color: var(--pui-muted);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    border-top: 0; border-bottom: 1px solid var(--pui-border);
    padding: 12px 18px; white-space: nowrap;
}
.pui-page .card .table tbody td {
    padding: 13px 18px; vertical-align: middle;
    border-top: 1px solid #f4f6f9; font-size: 13px; color: #334155;
}
.pui-page .card .table tbody tr { transition: background .12s; }
.pui-page .card .table tbody tr:hover td { background: #f9fbfd; }
.pui-page .card .table.table-borderless tbody td { border-top: 0; }

/* ── Form controls ──────────────────────────────────── */
.pui-page .form-control,
.pui-page .form-select,
.pui-page .custom-select,
.pui-page textarea.form-control {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 14px;
    font-size: 14px;
    color: #1e293b;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.pui-page .form-control:focus,
.pui-page .form-select:focus,
.pui-page .custom-select:focus,
.pui-page textarea.form-control:focus {
    border-color: var(--pui-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb),.13) !important;
    outline: none;
}
.pui-page .form-control::placeholder { color: #b6c0cd; }
.pui-page label,
.pui-page .form-label,
.pui-page .col-form-label { font-weight: 600; color: #334155; font-size: 13px; margin-bottom: 5px; }
.pui-page .input-group-text { border-radius: 8px; border: 1px solid #e5e7eb; background: #f7f9fc; }

/* ── Buttons ────────────────────────────────────────── */
.pui-page .btn { border-radius: 8px; font-weight: 600; transition: transform .1s, box-shadow .15s, background .15s, border-color .15s; }
.pui-page .btn:active { transform: translateY(0); }
.pui-page .btn-primary {
    background-image: linear-gradient(135deg, var(--pui-primary) 0%, var(--pui-primary-d) 100%);
    background-color: var(--pui-primary); border-color: var(--pui-primary-d);
    box-shadow: 0 8px 18px -8px rgba(var(--app-primary-rgb),.5);
}
.pui-page .btn-primary:hover { background-image: linear-gradient(135deg, var(--pui-primary) 0%, var(--pui-primary-d) 100%); transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(var(--app-primary-rgb),.6); }
.pui-page .btn-success {
    background-image: linear-gradient(135deg, #22b07d 0%, #1a9268 100%);
    background-color: #22b07d; border-color: #1a9268;
    box-shadow: 0 8px 18px -8px rgba(34,176,125,.5);
}
.pui-page .btn-success:hover { transform: translateY(-1px); }
.pui-page .btn-outline-primary { border-width: 1.5px; }
.pui-page .btn-outline-secondary { border-width: 1.5px; }
.pui-page .btn-sm { border-radius: 6px; }

/* ── Badges ─────────────────────────────────────────── */
.pui-page .badge { font-weight: 600; padding: .42em .72em; border-radius: 5px; letter-spacing: .01em; }

/* ── Flex gap utilities (this template runs Bootstrap 4,
   which doesn't ship .gap-* — buttons/fields touched) ── */
.pui-page .d-flex.gap-1, .pui-page .gap-1 { gap: .25rem !important; }
.pui-page .d-flex.gap-2, .pui-page .gap-2 { gap: .5rem !important; }
.pui-page .d-flex.gap-3, .pui-page .gap-3 { gap: 1rem !important; }
.pui-page .d-flex.gap-4, .pui-page .gap-4 { gap: 1.5rem !important; }
/* Row gutter helpers (Bootstrap 5 .g-*) */
.pui-page .row.g-2 { margin: -.25rem; }
.pui-page .row.g-2 > [class*="col"] { padding: .25rem; }
.pui-page .row.g-3 { margin: -.5rem; }
.pui-page .row.g-3 > [class*="col"] { padding: .5rem; }

/* ── Page header band (reusable) ────────────────────── */
.pui-page .page-header-band,
.pui-page .pui-header {
    background: linear-gradient(120deg, var(--pui-primary-d) 0%, var(--pui-primary) 45%, color-mix(in srgb, var(--pui-primary) 80%, #fff) 100%) !important;
    border: none !important;
    border-radius: 12px; padding: 22px 26px; color: #fff !important;
    margin-bottom: 24px; position: relative; overflow: hidden;
    box-shadow: 0 14px 30px -20px rgba(var(--app-primary-rgb),.45), 0 1px 3px rgba(16,24,40,.05);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.pui-page .page-header-band::after,
.pui-page .pui-header::after { content:''; position:absolute; right:-50px; top:-70px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle at center, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); pointer-events:none; }
.pui-page .pui-header h1, .pui-page .pui-header h2, .pui-page .pui-header h3, .pui-page .pui-header h4, .pui-page .pui-header h5, .pui-page .pui-header h6,
.pui-page .page-header-band h1, .pui-page .page-header-band h2, .pui-page .page-header-band h3, .pui-page .page-header-band h4, .pui-page .page-header-band h5, .pui-page .page-header-band h6 { color:#fff !important; font-weight:800; margin:0; letter-spacing:-.3px; }
.pui-page .pui-header p, .pui-page .page-header-band p { color:rgba(255,255,255,.88) !important; margin:4px 0 0; font-size:13px; }
.pui-page .page-header-band a:not(.btn), .pui-page .pui-header a:not(.btn) { color:#fff; }
.pui-page .pui-header .btn-hdr, .pui-page .page-header-band .btn-hdr {
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34); color:#fff; font-weight:600;
}
.pui-page .pui-header .btn-hdr:hover, .pui-page .page-header-band .btn-hdr:hover { background:rgba(255,255,255,.3); color:#fff; }

/* ── Header / section icon badge ────────────────────── */
.pui-page .hdr-ico {
    width:30px; height:30px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:17px; margin-right:11px; vertical-align:middle; flex-shrink:0;
}

/* ── Stat cards (reusable) ──────────────────────────── */
.pui-page .stat-card {
    background:#fff; border:1px solid var(--pui-border); border-radius:10px; padding:20px 22px;
    box-shadow:var(--pui-shadow); height:100%;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.pui-page .stat-card:hover { transform:translateY(-2px); box-shadow:var(--pui-shadow-hover); }
.pui-page .stat-card .sc-value { font-size:24px; font-weight:700; color:var(--pui-ink); line-height:1.05; letter-spacing:-.5px; }
.pui-page .stat-card .sc-label { font-size:11.5px; color:var(--pui-muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-top:6px; }
.pui-page .stat-card .sc-sub   { font-size:11.5px; margin-top:7px; font-weight:600; color:#64748b; }
.pui-page .stat-card .sc-icon {
    width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:20px; box-shadow:0 6px 14px -8px rgba(16,24,40,.24);
}
.pui-page .stat-card .sc-icon svg { width:20px; height:20px; }

/* ── Nav tabs / pills (e.g. settings) ───────────────── */
.pui-page .nav-tabs { border-bottom: 1px solid var(--pui-border); }
.pui-page .nav-tabs .nav-link { border:0; color:#64748b; font-weight:600; font-size:13.5px; padding:10px 16px; border-bottom:2px solid transparent; }
.pui-page .nav-tabs .nav-link:hover { color: var(--pui-primary); border-bottom-color: rgba(var(--app-primary-rgb),.3); }
.pui-page .nav-tabs .nav-link.active { color: var(--pui-primary); background: transparent; border-bottom-color: var(--pui-primary); }
.pui-page .nav-pills .nav-link { border-radius: 8px; font-weight: 600; color:#64748b; }
.pui-page .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--pui-primary), var(--pui-primary-d)); }

/* ── List-group (e.g. settings side nav) ────────────── */
.pui-page .list-group-item { border-color: var(--pui-border); font-weight: 600; font-size: 13.5px; color:#475569; }
.pui-page .list-group-item.active { background: linear-gradient(135deg, var(--pui-primary), var(--pui-primary-d)); border-color: transparent; color:#fff; }
.pui-page .list-group-item-action:hover { background: #f4fbff; color: var(--pui-primary); }

/* ── Settings side nav: professional icon badges ────── */
.pui-page .settings-nav .list-group-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px !important; font-size: 13.5px; font-weight: 600;
}
.pui-page .settings-nav .list-group-item i {
    font-size: 18px; width: 32px; height: 32px; border-radius: 8px; margin: 0 !important;
    background: rgba(var(--app-primary-rgb),.1); color: var(--pui-primary); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.pui-page .settings-nav .list-group-item:hover i { background: rgba(var(--app-primary-rgb),.2); }
/* On the active row the whole item is already the brand colour, so a solid
   brand tile behind the icon would be invisible. A translucent white one sits
   on it properly. */
.pui-page .settings-nav .list-group-item.active i {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.pui-page .settings-nav .list-group-item.active,
.pui-page .settings-nav .list-group-item.active:hover { color: #fff; }

/* ── Pagination ─────────────────────────────────────── */
.pui-page .pagination .page-link { border:1px solid var(--pui-border); color:#475569; margin:0 2px; border-radius:7px; font-weight:600; }
.pui-page .pagination .page-item.active .page-link { background: var(--pui-primary); border-color: var(--pui-primary); }

/* ── Empty states ───────────────────────────────────── */
.pui-page .pui-empty { text-align:center; padding:40px 20px; color:#94a3b8; }
.pui-page .pui-empty i, .pui-page .pui-empty svg { opacity:.4; }

/* ── RTL adjustments (for Arabic / Urdu) ────────────── */
[dir="rtl"] .pui-page .hdr-ico { margin-right: 0; margin-left: 11px; }
[dir="rtl"] .pui-page .settings-nav .list-group-item i { margin: 0 !important; }
[dir="rtl"] .pui-page .text-right { text-align: left !important; }
[dir="rtl"] .pui-page .text-left  { text-align: right !important; }
/* flex rows (header band, stat cards) auto-mirror with dir; these just fix
   utility-margin icons the RTL bootstrap may not cover for custom elements */
[dir="rtl"] .pui-page .me-1, [dir="rtl"] .pui-page .me-2, [dir="rtl"] .pui-page .me-3 { margin-right: 0 !important; }
[dir="rtl"] .pui-page .me-1 { margin-left: .25rem !important; }
[dir="rtl"] .pui-page .me-2 { margin-left: .5rem !important; }
[dir="rtl"] .pui-page .me-3 { margin-left: 1rem !important; }

/* ── Dark mode ──────────────────────────────────────── */
body.dark .pui-page .card { background:#23252b; border-color:#34353a !important; }
body.dark .pui-page .card .card-header { border-bottom-color:#34353a; color:#f1f5f9; }
body.dark .pui-page .card .table thead th { background:#2a2c31; color:#7c8693; border-bottom-color:#34353a; }
body.dark .pui-page .card .table tbody td { border-top-color:#33353b; color:#cbd5e1; }
body.dark .pui-page .card .table tbody tr:hover td { background:#26282e; }
body.dark .pui-page .form-control,
body.dark .pui-page .form-select { background:#1f2530 !important; border-color:#34353a !important; color:#e5e7eb; }
body.dark .pui-page label,
body.dark .pui-page .form-label { color:#cbd5e1; }
body.dark .pui-page .stat-card { background:#23252b; border-color:#34353a; }
body.dark .pui-page .stat-card .sc-value { color:#f1f5f9; }
body.dark .pui-page .list-group-item { background:#23252b; color:#cbd5e1; border-color:#34353a; }

/* ═══════════════════════════════════════════════════════════════════════════
   Global Checkbox → Toggle Switch
   Converts every checkbox in the system to a pill-shaped on/off toggle.
   No HTML changes needed — pure CSS override.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Base toggle appearance for all checkboxes */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    border-radius: 9px;
    background: #cbd5e1;
    border: none;
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
    transition: background .22s ease;
    outline: none;
}
input[type="checkbox"]:checked {
    background: var(--app-primary);
}
input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: left .22s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
input[type="checkbox"]:checked::before {
    left: 21px;
}
input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb),.25);
}
input[type="checkbox"]:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* 2. Reset Bootstrap .form-check layout — remove left padding, use flex */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    min-height: 0;
}
.form-check .form-check-input {
    float: none;
    margin: 0;
}
.form-check .form-check-label {
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}

/* 3. Inline label-wrap pattern  (<label><input type="checkbox"> Text</label>) */
label:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

/* 4. Unify .inv-switch (inventory variations) and label.switch (settings) */
.inv-switch, label.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    vertical-align: middle;
}
.inv-switch input[type="checkbox"],
label.switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.inv-switch .slider,
label.switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: 9px;
    transition: background .22s ease;
}
.inv-switch .slider::before,
label.switch .slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: left .22s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.inv-switch input:checked + .slider,
label.switch input:checked + .slider {
    background: var(--app-primary);
}
.inv-switch input:checked + .slider::before,
label.switch input:checked + .slider::before {
    left: 21px;
}
.inv-switch input:focus-visible + .slider,
label.switch input:focus-visible + .slider {
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb),.25);
}
.inv-switch input:disabled + .slider,
label.switch input:disabled + .slider {
    opacity: .45;
    cursor: not-allowed;
}

/* 5. Dark mode — use lighter off-state track */
body.dark input[type="checkbox"]:not(:checked) { background: #475569; }
body.dark .inv-switch .slider,
body.dark label.switch .slider { background: #475569; }
body.dark .inv-switch input:checked + .slider,
body.dark label.switch input:checked + .slider { background: var(--app-primary); }

/* ── Breathing room between a filter panel and the table under it ────────
   The filter card and the listing card were flush against each other on the
   customers, repairs and inventory screens, so the two read as one block and
   the Filter button looked attached to the table header. */
.pui-page .card + .card,
.pui-page .card + .table-responsive,
.pui-page .filter-card + .card { margin-top: 18px; }
.pui-page .card { margin-bottom: 18px; }
.pui-page .card:last-child { margin-bottom: 0; }

/* ── One radius across the till's filter bar ─────────────────────────────
   New Repair, Add Product, Search, Sort and Scan each had their own: two
   pills, three rounded rectangles, side by side in a single row. The system's
   own shape is the 10px card, so they all take that. */
.filter-bar .filter-btn button,
.filter-bar .filter-btn .pos-add-product,
.filter-bar .filter-search input,
.filter-bar .btn,
.filter-bar .dropdown-toggle {
    border-radius: 10px !important;
}