/* -------------------------------------------------------
   Typography
------------------------------------------------------- */
@font-face {
    font-family: 'Rabar';
    src: url('../fonts/Rabar_022.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: 'Sora', sans-serif;
    --font-head: 'Space Grotesk', sans-serif;

    /* ── Light mode defaults ─── */
    --bg-page: #f1f5f9;
    --bg-card: #ffffff;
    --bg-strong: #f8fafc;

    --ink-950: #0f172a;
    --ink-800: #1e293b;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-450: #64748b;

    --line-soft: rgba(0, 0, 0, 0.08);

    --primary: #6366f1;
    --primary-soft: rgba(99, 102, 241, 0.12);
    --accent: #f97316;
    --accent-soft: #fff7ed;
    --danger: #ef4444;

    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.08);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --topbar-height: 66px;
    --sidebar-width: 240px;

    /* ── Alias tokens (used across views/components) ── */
    --bg-subtle: #f1f5f9;
    --bg-primary: #ffffff;
    --bg-hover: rgba(15, 23, 42, 0.04);
    --text-primary: var(--ink-800);
    --text-secondary: var(--ink-450);
    --text-main: var(--ink-950);
    --text-muted: var(--ink-450);
    --border-color: #e2e8f0;
}

/* ── Dark mode variable overrides ─────────────────── */
/* (full override block kept near Dark Theme section below) */

html[dir="rtl"] {
    --font-body: 'Rabar', Tahoma, sans-serif;
    --font-head: 'Rabar', Tahoma, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--ink-800);
    background: var(--bg-page);
    letter-spacing: 0.1px;
    overflow-x: hidden;
    transition: background 0.2s ease, color 0.2s ease;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-head);
    color: var(--ink-950);
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* -------------------------------------------------------
   Decorative Background
------------------------------------------------------- */
.app-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.bg-shape {
    position: absolute;
    border-radius: 999px;
    filter: blur(0.5px);
    opacity: 0;
    display: none;
}

.shape-a {
    inline-size: 380px;
    block-size: 380px;
    background: radial-gradient(circle at 30% 30%, #56d4c8 0%, #56d4c800 65%);
    top: -120px;
    inset-inline-end: -90px;
}

.shape-b {
    inline-size: 320px;
    block-size: 320px;
    background: radial-gradient(circle at 70% 20%, #f8b96b 0%, #f8b96b00 70%);
    inset-block-end: -100px;
    inset-inline-start: -60px;
}

.shape-c {
    inline-size: 180px;
    block-size: 180px;
    background: radial-gradient(circle at 50% 50%, #59a5d8 0%, #59a5d800 70%);
    top: 42%;
    inset-inline-start: 42%;
}

/* -------------------------------------------------------
   Main Layout
------------------------------------------------------- */
.app-frame {
    position: relative;
    z-index: 1;
    margin-top: var(--topbar-height);
    min-height: 100vh;
    width: 100%;
}

/* ── Sidebar ─────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: var(--topbar-height);
    inset-inline-start: 0;
    inset-inline-end: auto;
    bottom: 0;
    inline-size: var(--sidebar-width);
    z-index: 110;
    background: #0b0f1a;
    color: #56647a;
    border-inline-end: 1px solid rgba(99, 102, 241, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(calc(-100% - 12px));
    transition: transform 0.26s ease, background 0.2s ease, border-color 0.2s ease;
}

html[dir="rtl"] .sidebar {
    transform: translateX(calc(100% + 12px));
}

body.sidebar-open .sidebar {
    transform: translateX(0);
}

html[dir="rtl"] body.sidebar-open .sidebar {
    transform: translateX(0);
}

.brand-block {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 14px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-logo {
    flex-shrink: 0;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.brand-title {
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.brand-subtitle {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #2e3a4e;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.side-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.18) transparent;
}

.side-nav::-webkit-scrollbar {
    width: 3px;
}

.side-nav::-webkit-scrollbar-track {
    background: transparent;
}

.side-nav::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.18);
    border-radius: 99px;
}

.nav-caption {
    font-size: 10px;
    font-weight: 700;
    color: #2a3448;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 14px 8px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-caption::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
    padding: 8px 8px 8px 10px;
    color: #56647a;
    font-size: 14.5px;
    font-weight: 500;
    min-width: 0;
    position: relative;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-link i {
    flex-shrink: 0;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-link span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}

.nav-link:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #a5b4fc;
}

.nav-link:hover i {
    background: rgba(99, 102, 241, 0.14);
    color: #a5b4fc;
}

.nav-link.is-active {
    background: rgba(99, 102, 241, 0.13);
    color: #c7d2fe;
}

.nav-link.is-active i {
    background: rgba(99, 102, 241, 0.22);
    color: #a5b4fc;
}

.nav-link.is-active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: #6366f1;
}

html[dir="rtl"] .nav-link.is-active::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
    border-radius: 3px 0 0 3px;
}

.side-user {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: rgba(0, 0, 0, 0.2);
}

.user-avatar {
    flex-shrink: 0;
    inline-size: 33px;
    block-size: 33px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}

.user-meta {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #c9d4e3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.user-role {
    margin-top: 2px;
    font-size: 10.5px;
    color: #2e3a4e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.logout-btn {
    flex-shrink: 0;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a3448;
    transition: background 0.15s ease, color 0.15s ease;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.workspace {
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: calc(100vh - var(--topbar-height));
}

.topbar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 120;
    min-height: var(--topbar-height);
    background: #161b27;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    border-radius: 0;
    box-shadow: 0 1px 12px rgba(0,0,0,0.35);
    backdrop-filter: blur(3px);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.topbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
}

.mobile-nav-btn {
    display: inline-flex;
    text-decoration: none;
    inline-size: 36px;
    block-size: 36px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
}

.mobile-nav-btn:hover {
    background: rgba(255,255,255,0.1);
}

.sidebar-backdrop {
    position: fixed;
    inset-block-start: var(--topbar-height);
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 108;
    border: 0;
    background: rgba(5, 15, 30, 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.sidebar-open {
    overflow: hidden;
    touch-action: none;
}

.topbar-dot {
    inline-size: 9px;
    block-size: 9px;
    border-radius: 999px;
    background: linear-gradient(120deg, #6366f1, #8b5cf6);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
}

.topbar-title h1 {
    font-size: 17px;
    font-weight: 700;
    color: #e2e8f0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Vertical separator */
.tb-sep {
    display: block;
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    margin-inline: 4px;
    flex-shrink: 0;
}

/* Icon-only action button (theme toggle) */
.tb-icon-btn {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #475569;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    font-size: 13px;
    flex-shrink: 0;
}
.tb-icon-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.14);
}
.tb-icon-btn .sun-icon { display: none; }
html[data-theme="dark"] .tb-icon-btn .moon-icon { display: none; }
html[data-theme="dark"] .tb-icon-btn .sun-icon  { display: inline-block; }

/* Currency selector dropdown */
.tb-currency { position: relative; }
.tb-currency-btn { width: auto; gap: 5px; padding: 0 9px; }
.tb-currency-code { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.tb-currency-caret { font-size: 9px; opacity: .55; }
.tb-currency-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 190px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: var(--shadow-soft, 0 8px 30px rgba(0,0,0,.12));
    padding: 6px;
    z-index: 1200;
    display: none;
}
.tb-currency-menu.is-open { display: block; }
.tb-currency-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary, #1e293b);
    font-size: 13px;
    cursor: pointer;
}
.tb-currency-item:hover { background: var(--bg-subtle, #f1f5f9); }
.tb-currency-item.is-active { background: var(--primary-soft, rgba(99,102,241,.12)); }
.tb-currency-item-code { font-weight: 700; min-width: 40px; font-size: 12px; }
.tb-currency-item-name { color: var(--text-secondary, #64748b); flex: 1; white-space: nowrap; }
.tb-currency-item-check { display: none; color: var(--primary, #6366f1); font-size: 12px; }
.tb-currency-item.is-active .tb-currency-item-check { display: inline-block; }

/* Legacy classes — keep for backward compat but neutralise */
.theme-toggle { display: none !important; }
.lang-switch  { display: none !important; }
.today-pill   { display: none !important; }

.page-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* -------------------------------------------------------
   Form container (single-column centered form pages)
------------------------------------------------------- */
.form-container {
    width: 100%;
    /* Let forms breathe */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.breadcrumb-link {
    color: inherit;
    opacity: 0.8;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.breadcrumb-link:hover {
    opacity: 1;
}

/* ── Purchase Items – Tabulator theme overrides ── */
.pit-wrap {
    border-radius: var(--radius-sm, 8px);
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
}
.pit-wrap .tabulator {
    font-family: inherit;
    font-size: 13px;
    background: var(--bg-primary, #fff);
    border: none;
    border-radius: 0;
}
.pit-wrap .tabulator .tabulator-header {
    background: var(--bg-subtle, #f8fafc);
    border-bottom: 2px solid var(--border-color, #e2e8f0) !important;
}
.pit-wrap .tabulator .tabulator-col {
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-right: 1px solid var(--border-color, #e2e8f0) !important;
}
.pit-wrap .tabulator .tabulator-col:last-child { border-right: none !important; }
.pit-wrap .tabulator .tabulator-row {
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #0f172a);
}
.pit-wrap .tabulator .tabulator-row:last-child { border-bottom: none !important; }
.pit-wrap .tabulator .tabulator-row:hover { background: var(--bg-hover, rgba(0,0,0,.025)) !important; }
.pit-wrap .tabulator .tabulator-cell {
    border-right: 1px solid var(--border-color, #e2e8f0) !important;
    padding: 7px 10px;
    vertical-align: middle;
}
.pit-wrap .tabulator .tabulator-cell:last-child { border-right: none !important; }
.pit-wrap .tabulator .tabulator-col-resize-handle { width: 4px; background: transparent; }
.pit-wrap .tabulator .tabulator-col-resize-handle:hover { background: var(--primary, #0f766e); opacity: .4; }
/* Input inside Tabulator editors */
.pit-wrap .tabulator .tabulator-editing .input-control { height: 32px; font-size: 13px; padding: 4px 8px; }
/* Dark mode */
[data-theme="dark"] .pit-wrap { border-color: var(--border-color); }
[data-theme="dark"] .pit-wrap .tabulator { background: var(--bg-primary) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .pit-wrap .tabulator .tabulator-header { background: var(--bg-subtle) !important; border-bottom-color: var(--border-color) !important; }
[data-theme="dark"] .pit-wrap .tabulator .tabulator-col { background: transparent !important; color: var(--text-secondary) !important; border-right-color: var(--border-color) !important; }
[data-theme="dark"] .pit-wrap .tabulator .tabulator-col-title { color: var(--text-secondary) !important; }
[data-theme="dark"] .pit-wrap .tabulator .tabulator-row { background: var(--bg-primary) !important; color: var(--text-primary) !important; border-bottom-color: var(--border-color) !important; }
[data-theme="dark"] .pit-wrap .tabulator .tabulator-row:hover { background: var(--bg-hover) !important; }
[data-theme="dark"] .pit-wrap .tabulator .tabulator-cell { border-right-color: var(--border-color) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .pit-wrap .tabulator .tabulator-placeholder { background: var(--bg-primary) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .pit-wrap .tabulator .tabulator-footer { background: var(--bg-subtle) !important; color: var(--text-secondary) !important; }

/* Row highlighted while editing in input panel */
.pit-wrap .tabulator .tabulator-row.pit-row-editing {
    background: rgba(15, 118, 110, 0.07) !important;
    outline: 2px solid var(--primary, #0f766e);
    outline-offset: -2px;
}
.pit-wrap .tabulator .tabulator-row { cursor: pointer; }

/* ── Purchase Item Input Panel ── */
.pit-input-panel {
    display: grid;
    grid-template-columns: 56px 1fr 1fr;
    gap: 10px 14px;
    align-items: end;
    padding: 16px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-sm, 8px);
}
[data-theme="dark"] .pit-input-panel { background: var(--bg-subtle); border-color: var(--border-color); }

.pit-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.pit-field-img     { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.pit-field-name    { grid-column: 2; grid-row: 1; }
.pit-field-barcode { grid-column: 3; grid-row: 1; }
.pit-field-cost    { grid-column: 2; grid-row: 2; }
.pit-field-sell    { grid-column: 3; grid-row: 2; }
.pit-field-qty     { grid-column: 2; grid-row: 3; }
.pit-field-serial  { grid-column: 3; grid-row: 3; }
.pit-field-cat     { grid-column: 2; grid-row: 4; }
.pit-field-tag     { grid-column: 3; grid-row: 4; }
.pit-field-actions { grid-column: 2 / span 2; grid-row: 5; display: flex; gap: 8px; align-items: flex-end; }

.pit-image-pick {
    width: 56px;
    height: 56px;
    border: 2px dashed var(--border-color, #e2e8f0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-secondary, #94a3b8);
    overflow: hidden;
    transition: border-color 0.18s, color 0.18s;
    background: var(--bg-card, #fff);
}
.pit-image-pick:hover { border-color: var(--primary, #0f766e); color: var(--primary, #0f766e); }
[data-theme="dark"] .pit-image-pick { background: var(--bg-card); border-color: var(--border-color); }

@media (max-width: 640px) {
    .stepper-body {
        padding: 16px;
    }
    .pit-input-panel {
        grid-template-columns: 56px 1fr;
    }
    .pit-field-img     { grid-column: 1; grid-row: 1 / span 2; }
    .pit-field-name    { grid-column: 2; grid-row: 1; }
    .pit-field-barcode { grid-column: 2; grid-row: 2; }
    .pit-field-cost    { grid-column: 1 / span 2; grid-row: 3; }
    .pit-field-sell    { grid-column: 1 / span 2; grid-row: 4; }
    .pit-field-qty     { grid-column: 1 / span 2; grid-row: 5; }
    .pit-field-serial  { grid-column: 1 / span 2; grid-row: 6; }
    .pit-field-cat     { grid-column: 1 / span 2; grid-row: 7; }
    .pit-field-tag     { grid-column: 1 / span 2; grid-row: 8; }
    .pit-field-actions { grid-column: 1 / span 2; grid-row: 9; }
}

.required-star { color: var(--danger, #ef4444); margin-left: 2px; }

/* ── Account Autocomplete ── */
.ac-wrap {
    position: relative;
    width: 100%;
}
.ac-wrap .input-control {
    padding-right: 36px;
}
.ac-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
    pointer-events: none;
}
.ac-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    list-style: none;
    margin: 0;
}
.ac-list.ac-open { display: block; }
.ac-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary, #0f172a);
    transition: background .12s;
}
.ac-list li:hover { background: var(--bg-subtle, #f1f5f9); }
.ac-list li i { color: var(--text-secondary, #94a3b8); font-size: 12px; flex-shrink: 0; }
.ac-type {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
    background: var(--bg-subtle, #f1f5f9);
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Payment Status Segmented Button ── */
.ps-group {
    display: inline-flex;
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-subtle, #f1f5f9);
    padding: 4px;
    gap: 4px;
}
.ps-btn {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    transition: color .15s, background .15s, box-shadow .15s;
}
.ps-btn:hover { color: var(--text-primary, #0f172a); }
.ps-btn.ps-active {
    background: var(--surface, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
[data-theme="dark"] .ps-btn.ps-active { background: var(--bg-card, #1e293b); }
.ps-btn-paid.ps-active  { color: #16a34a; }
.ps-btn-unpaid.ps-active { color: #dc2626; }

/* Large centered status group */
.ps-group-lg {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 6px;
    gap: 8px;
}
.ps-group-lg .ps-btn {
    flex: 1;
    max-width: 220px;
    padding: 12px 28px;
    font-size: 15px;
    border-radius: 10px;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Toggle Switch ── */
.toggle-switch-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-color, #cbd5e1);
    border-radius: 24px;
    cursor: pointer;
    transition: background .2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--primary, #0f766e);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}
.toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    min-width: 48px;
}

/* ── Purchase Items Section (inside panel) ── */
.purchase-items-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.purchase-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.purchase-items-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin: 0 0 2px;
}
.purchase-items-hint {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    margin: 0;
}

/* -------------------------------------------------------
   Users Page
------------------------------------------------------- */








.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.stat-card {
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-soft);
    padding: 15px 16px;
}

.stat-icon {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    font-size: 15px;
}

.tone-teal .stat-icon {
    background: #d7f5f0;
    color: #0f766e;
}

.tone-amber .stat-icon {
    background: #ffedd5;
    color: #c2410c;
}

.tone-cyan .stat-icon {
    background: #dff4f7;
    color: #0e7490;
}

.tone-blue .stat-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.tone-green .stat-icon {
    background: #dcfce7;
    color: #15803d;
}

.tone-orange .stat-icon {
    background: #fff1e2;
    color: #ea580c;
}

.tone-red .stat-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.tone-violet .stat-icon {
    background: #ede9fe;
    color: #6d28d9;
}

.tone-gray .stat-icon {
    background: #e9edf3;
    color: #475569;
}

.stat-label {
    font-size: 12px;
    color: var(--ink-600);
}

.stat-value {
    margin-top: 4px;
    font-size: 24px;
    line-height: 1;
}

/* Repairs stats — 9 compact cards */
.repairs-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 9px;
}
.repairs-stats-grid .stat-card { padding: 10px 12px; }
.repairs-stats-grid .stat-icon {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 9px;
    margin-bottom: 6px;
    font-size: 13px;
}
.repairs-stats-grid .stat-label { font-size: 11px; }
.repairs-stats-grid .stat-value { font-size: 18px; margin-top: 2px; }

/* Employees stats (2 cards) */
.employees-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employees-stat-card {
    position: relative;
    overflow: hidden;
    border: none;
    min-height: 124px;
    padding: 18px 20px;
    color: #ebfffc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.employees-stat-card::after {
    content: '';
    position: absolute;
    inline-size: 122px;
    block-size: 122px;
    border-radius: 50%;
    inset-inline-end: -32px;
    inset-block-start: -36px;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.employees-stat-employees {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 52%, #6366f1 100%);
}

.employees-stat-salary {
    background: linear-gradient(135deg, #0e7490 0%, #1593b6 48%, #22c3df 100%);
}

.employees-stat-card .stat-icon {
    inline-size: 42px;
    block-size: 42px;
    margin-bottom: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.employees-stat-card .stat-label {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(236, 255, 252, 0.9);
    letter-spacing: 0.3px;
}

.employees-stat-card .stat-value {
    margin-top: 12px;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.06;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

/* Accounts stats (5 cards) */
.accounts-stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1200px) {
    .accounts-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .stepper-body {
        padding: 16px;
    }
    .accounts-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.accounts-stat-card {
    position: relative;
    overflow: hidden;
    border: none;
    min-height: 124px;
    padding: 18px 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.accounts-stat-card::after {
    content: '';
    position: absolute;
    inline-size: 110px;
    block-size: 110px;
    border-radius: 50%;
    inset-inline-end: -28px;
    inset-block-start: -30px;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}

.accounts-stat-total {
    background: linear-gradient(135deg, #4f46e5 0%, #6d5ff7 50%, #818cf8 100%);
}

.accounts-stat-customers {
    background: linear-gradient(135deg, #0891b2 0%, #0ea5e9 50%, #38bdf8 100%);
}

.accounts-stat-suppliers {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
}

.accounts-stat-credit {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
}

.accounts-stat-debt {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
}

.accounts-stat-card .stat-icon {
    inline-size: 40px;
    block-size: 40px;
    margin-bottom: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.accounts-stat-card .stat-label {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.3px;
}

.accounts-stat-card .stat-value {
    margin-top: 10px;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.06;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Account modal form */
.account-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.account-modal-full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .stepper-body {
        padding: 16px;
    }
    .account-modal-grid {
        grid-template-columns: 1fr;
    }
}

.required-star {
    color: #ef4444;
    margin-inline-start: 2px;
}

.input-control:disabled,
.readonly-field {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--bg-subtle, #f3f4f6);
}

/* Display-only disabled field — full opacity, readable in dark mode */
.input-control--display:disabled {
    opacity: 1;
    cursor: not-allowed;
    background: #f3f4f6;
    color: var(--ink-800, #173433);
    -webkit-text-fill-color: var(--ink-800, #173433);
}
html[data-theme="dark"] .input-control--display:disabled {
    background: var(--bg-strong, #102c2a);
    color: var(--ink-800, #d2e5e2);
    -webkit-text-fill-color: var(--ink-800, #d2e5e2);
}

/* -------------------------------------------------------
   Category Tabs
------------------------------------------------------- */
.cat-tabs, .account-invoices-tabs, .products-tab-nav, .rep-tab-nav {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    padding-bottom: 0;
}

.cat-tab-btn, .tab-btn, .ptab-btn, .rep-tab-btn {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
    white-space: nowrap;
}

.cat-tab-btn:hover, .tab-btn:hover, .ptab-btn:hover, .rep-tab-btn:hover {
    color: var(--text-primary, #111827);
    background: var(--bg-subtle, #f3f4f6);
}

.cat-tab-btn.is-active, .tab-btn.is-active, .ptab-btn.ptab-active, .rep-tab-btn.rep-tab-active {
    color: var(--accent, #6366f1);
    border-bottom-color: var(--accent, #6366f1);
    background: transparent;
}

.cat-tab-btn .fa-solid, .tab-btn .fa-solid, .ptab-btn .fa-solid, .rep-tab-btn .fa-solid {
    font-size: 0.8rem;
}

.cat-tab-badge, .tab-count {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
    background: var(--bg-subtle, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    transition: background .18s, color .18s;
}

.cat-tab-btn.is-active .cat-tab-badge, .tab-btn.is-active .tab-count, .ptab-btn.ptab-active .tab-count, .rep-tab-btn.rep-tab-active .tab-count {
    background: var(--accent, #6366f1);
    color: #fff;
}

[data-theme="dark"] .cat-tab-btn:hover, [data-theme="dark"] .tab-btn:hover, [data-theme="dark"] .ptab-btn:hover, [data-theme="dark"] .rep-tab-btn:hover {
    background: rgba(255,255,255,.06);
}

[data-theme="dark"] .cat-tab-badge, [data-theme="dark"] .tab-count {
    background: rgba(255,255,255,.1);
    color: var(--text-secondary, #9ca3af);
}

.panel-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    background: var(--bg-card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.panel-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-head h3 {
    font-size: 16px;
}

.panel-head p {
    margin-top: 3px;
    font-size: 12px;
    color: var(--ink-450);
}

.repairs-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.repairs-search-input {
    width: 420px;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 220px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: var(--bg-card);
    color: var(--ink-900);
    padding: 0 12px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.16s, box-shadow 0.16s;
}

.repairs-status-filter {
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: var(--bg-card);
    color: var(--ink-900);
    padding: 0 12px;
    font-size: 13px;
    min-width: 160px;
    flex: 0 0 auto;
    outline: none;
}

.repairs-status-filter:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}

.repairs-search-input::placeholder {
    color: var(--ink-450);
}

.repairs-search-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}

.repairs-search-form .btn {
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
}

.panel-count {
    border-radius: 999px;
    background: #f1f8f7;
    border: 1px solid #deecea;
    color: var(--ink-600);
    font-size: 12px;
    padding: 6px 11px;
    white-space: nowrap;
}

.table-scroll {
    overflow-x: auto;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

.users-table th,
.users-table td {
    text-align: start;
    padding: 13px 16px;
    border-bottom: 1px solid #edf5f4;
    vertical-align: middle;
    font-size: 13px;
}

.users-table th {
    background: #f8fcfb;
    color: var(--ink-600);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.users-table tr:last-child td {
    border-bottom: none;
}

.users-table tbody tr:hover {
    background: #f8fcfb;
}

.mono-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #7a9290;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.name-avatar {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(130deg, #6366f1, #4f46e5);
    flex-shrink: 0;
}

.name-text {
    font-weight: 600;
    color: var(--ink-800);
}

.role-badge {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
}

.role-admin {
    background: #dcf1ee;
    color: #0f766e;
}

.role-manager {
    background: #fff0dc;
    color: #b45309;
}

.role-inactive {
    background: #fee2e2;
    color: #dc2626;
}

.role-badge i {
    font-size: 10px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.badge-gray {
    background: #e5e7eb;
    color: #374151;
}

.badge-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-orange {
    background: #ffedd5;
    color: #c2410c;
}

.badge-green {
    background: #dcfce7;
    color: #166534;
}

.badge-violet {
    background: #ede9fe;
    color: #6d28d9;
}

.badge-red {
    background: #fee2e2;
    color: #b91c1c;
}

.badge-amber {
    background: #fef3c7;
    color: #b45309;
}

.badge-cyan {
    background: #cffafe;
    color: #0e7490;
}

[data-theme="dark"] .badge-gray {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .badge-blue {
    background: #1e3a8a;
    color: #bfdbfe;
}

[data-theme="dark"] .badge-orange {
    background: #7c2d12;
    color: #fdba74;
}

[data-theme="dark"] .badge-green {
    background: #14532d;
    color: #bbf7d0;
}

[data-theme="dark"] .badge-violet {
    background: #4c1d95;
    color: #ddd6fe;
}

[data-theme="dark"] .badge-red {
    background: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] .badge-amber {
    background: #78350f;
    color: #fde68a;
}

[data-theme="dark"] .badge-cyan {
    background: #164e63;
    color: #a5f3fc;
}

.action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.icon-btn {
    border: none;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: 0.2s ease;
}

.view-invoices-btn {
    background: #eef2ff;
    color: #4338ca;
}

.view-invoices-btn:hover {
    background: #e0e7ff;
}

.view-btn {
    background: #eef2ff;
    color: #4f46e5;
}

.view-btn:hover {
    background: #e0e7ff;
}

.view-invoices-btn {
    background: #f0fdfa;
    color: #0f766e;
}

.view-invoices-btn:hover {
    background: #ccfbf1;
}

.edit-btn {
    background: #f8f5eb;
    color: #a16207;
}

.edit-btn:hover {
    background: #fef3c7;
}

.delete-btn {
    background: #fdf2f2;
    color: #b91c1c;
}

.delete-btn:hover {
    background: #fee2e2;
}

.icon-btn-danger {
    background: #fdf2f2;
    color: #b91c1c;
    font-size: 13px;
}

.icon-btn-danger:hover {
    background: #fee2e2;
}

[data-theme="dark"] .icon-btn-danger {
    background: #3b1e20;
    color: #ffb8be;
}

[data-theme="dark"] .icon-btn-danger:hover {
    background: #4a2528;
}

.empty-state {
    text-align: center;
    padding: 54px 20px;
    color: var(--ink-450);
}

.empty-state i {
    display: block;
    font-size: 26px;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* -------------------------------------------------------
   Buttons & Forms
------------------------------------------------------- */
.btn {
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 11px 14px;
    transition: 0.2s ease;
}

.btn i {
    font-size: 12px;
}

.btn-primary {
    color: #ffffff;
    background: linear-gradient(125deg, #6366f1, #4f46e5);
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-accent {
    color: #ffffff;
    background: linear-gradient(130deg, #f97316, #ea580c);
}

.btn-accent:hover {
    filter: brightness(0.96);
}

.btn-subtle {
    color: #94a3b8;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
}

.btn-subtle:hover {
    background: rgba(255,255,255,0.1);
}

.btn-danger {
    color: #ffffff;
    background: linear-gradient(130deg, #ef4444, #dc2626);
}

.btn-danger:hover {
    filter: brightness(0.95);
}

.btn-warning {
    color: #ffffff;
    background: linear-gradient(130deg, #f59e0b, #d97706);
}

.btn-warning:hover {
    filter: brightness(0.95);
}

.field-row {
    margin-bottom: 14px;
}

.field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-700, #2f4b49);
    margin-bottom: 7px;
}

.field-label small {
    font-weight: 500;
    color: var(--ink-450);
    margin-inline-start: 6px;
}

.input-control {
    width: 100%;
    border: 1px solid #d6e5e3;
    border-radius: var(--radius-sm);
    background: #ffffff;
    font-size: 14px;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-control:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

/* Payment Method input-group (image addon + select) */
.pm-input-group {
    display: flex;
    border: 1px solid #d6e5e3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #ffffff;
}
.pm-input-group:focus-within {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}
.pm-input-group .pm-img-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f9f8;
    border-right: 1px solid #d6e5e3;
    min-width: 50px;
    width: 50px;
    flex-shrink: 0;
}
.pm-input-group .pm-img-addon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
}
.pm-input-group .pm-img-addon .fa-credit-card {
    font-size: 17px;
    color: #9ca3af;
}
.pm-input-group .input-control {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
    background: transparent;
}
.pm-input-group .input-control:focus {
    box-shadow: none;
    border: none;
}

html[data-theme="dark"] .pm-input-group {
    border-color: #315350;
    background: #0f2a29;
}
html[data-theme="dark"] .pm-input-group:focus-within {
    border-color: #1fb8a9;
    box-shadow: 0 0 0 3px rgba(25, 177, 164, 0.2);
}
html[data-theme="dark"] .pm-input-group .pm-img-addon {
    background: #0a1f1e;
    border-right-color: #315350;
}
html[data-theme="dark"] .pm-input-group .input-control {
    background: transparent;
    border: none;
}

/* -------------------------------------------------------
   Account live-search combobox
------------------------------------------------------- */
.ac-wrap {
    position: relative;
    width: 100%;
}
.ac-input-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.ac-input-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ac-input-row .input-control {
    border: none;
    box-shadow: none;
    flex: 1;
    min-width: 0;
}
.ac-input-row .input-control:focus {
    box-shadow: none;
    border: none;
}
.ac-clear-btn {
    background: none;
    border: none;
    padding: 0 10px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    display: none;
    align-items: center;
}
.ac-clear-btn:hover { color: var(--text-primary); }
.ac-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 240px;
    overflow-y: auto;
}
.ac-dropdown.is-open { display: block; }
.ac-option {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ac-option:hover,
.ac-option.is-focused {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ac-option-name { font-weight: 500; }
.ac-option-debt {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.ac-no-results {
    padding: 10px 14px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}
.ac-debt-badge {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    margin-top: 6px;
}
.ac-debt-badge i { font-size: 12px; }
html[data-theme="dark"] .ac-input-row {
    background: var(--bg-card);
    border-color: var(--line-soft);
}
html[data-theme="dark"] .ac-dropdown {
    background: var(--bg-card);
    border-color: var(--line-soft);
}

.alert {
    border-radius: var(--radius-sm);
    font-size: 13px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.alert ul {
    margin: 0;
    padding-inline-start: 18px;
}

.alert-danger {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.alert-info {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.alert-info .alert-info-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #3b82f6;
    padding: 0 2px;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

.alert-info .alert-info-clear:hover { color: #1e40af; }

html[data-theme="dark"] .alert-info {
    border-color: #1e3a5f;
    background: #0f172a;
    color: #93c5fd;
}

html[data-theme="dark"] .alert-info .alert-info-clear { color: #60a5fa; }

/* -------------------------------------------------------
   Modal
------------------------------------------------------- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    background: rgba(7, 24, 24, 0.46);
    backdrop-filter: blur(4px);
    padding: calc(var(--topbar-height) + 12px) 18px 18px;
    overflow-y: auto;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    inline-size: min(520px, 100%);
    max-block-size: calc(100vh - var(--topbar-height) - 36px);
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2efed;
    box-shadow: 0 26px 60px rgba(5, 31, 30, 0.22);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-in 0.2s ease;
    margin: auto;
}

.modal-sm {
    inline-size: min(420px, 100%);
}

/* Modal with autocomplete dropdown — allows ac-list to overflow */
.modal-ac {
    overflow: visible;
}
.modal-ac .modal-body {
    overflow: visible;
}
.modal-ac .modal-header {
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}
.modal-ac .modal-footer {
    border-radius: 0 0 18px 18px;
    overflow: hidden;
}

/* Checkbox grid (repair diagnostics / work types) */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 16px;
}
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}
.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color, #3b82f6);
    cursor: pointer;
    flex-shrink: 0;
}

.modal-lg {
    inline-size: min(980px, 100%);
}
.modal-xl {
    inline-size: min(1440px, 96vw);
}

/* Invoice Detail Modal */
.invoice-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 16px 20px;
}
.invoice-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.invoice-meta-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary, #94a3b8);
}
.invoice-meta-value {
    font-size: 14px;
    color: var(--text-primary, #0f172a);
    font-weight: 500;
}

.employee-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.employee-modal-col {
    min-width: 0;
}

.employee-modal-image-row {
    grid-column: 1 / -1;
    border: 1px dashed #cfe2df;
    border-radius: 12px;
    background: #f8fcfb;
    padding: 12px;
}

.employee-hint {
    display: block;
    margin-top: 6px;
    color: var(--ink-450);
    font-size: 12px;
}

.employee-preview-wrap {
    margin-top: 10px;
    min-height: 44px;
}

.employee-preview {
    width: 110px;
    height: 110px;
    border-radius: 12px;
    border: 1px solid #d8e7e4;
    object-fit: cover;
    background: #ffffff;
}

.employee-thumb-link {
    display: inline-flex;
    text-decoration: none;
}

.employee-thumb {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    object-fit: cover;
    border: 1px solid #d8e7e4;
    background: #ffffff;
}

/* -------------------------------------------------------
   Drag & Drop image zone
------------------------------------------------------- */
.drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--border-color, #cce0dd);
    border-radius: 14px;
    background: var(--bg-subtle, #f8fcfb);
    padding: 20px 16px 16px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    min-height: 100px;
    text-align: center;
}

.drop-zone:hover,
.drop-zone-over {
    border-color: #0f766e;
    background: #ecfaf8;
}

.drop-zone-icon {
    font-size: 28px;
    color: #0f766e;
    line-height: 1;
    pointer-events: none;
}

.drop-zone-label {
    font-size: 12.5px;
    color: var(--ink-500, #6b7280);
    pointer-events: none;
    line-height: 1.5;
}

.drop-zone-label span {
    color: #0f766e;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.drop-zone-hint {
    font-size: 11px;
    color: var(--ink-400, #9ca3af);
    pointer-events: none;
}

/* Preview state */
.drop-zone-preview {
    display: none;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #cce0dd;
    pointer-events: none;
}

.drop-zone.drop-zone-has-image .drop-zone-icon,
.drop-zone.drop-zone-has-image .drop-zone-label,
.drop-zone.drop-zone-has-image .drop-zone-hint {
    display: none;
}

.drop-zone.drop-zone-has-image .drop-zone-preview {
    display: block;
}

.drop-zone.drop-zone-has-image .drop-zone-remove {
    display: inline-flex;
    text-decoration: none;
}

.drop-zone-remove {
    display: none;
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 2;
    transition: background-color 0.15s;
}

.drop-zone-remove:hover {
    background: #dc2626;
}

html[data-theme="dark"] .drop-zone {
    border-color: #2a4a46;
    background: #0f2320;
}

html[data-theme="dark"] .drop-zone:hover,
html[data-theme="dark"] .drop-zone-over {
    border-color: #14b8a6;
    background: #0d2e2a;
}

html[data-theme="dark"] .drop-zone-icon {
    color: #2dd4bf;
}

html[data-theme="dark"] .drop-zone-label span {
    color: #2dd4bf;
}

html[data-theme="dark"] .drop-zone-preview {
    border-color: #2a4a46;
}

.modal-header {
    padding: 16px 18px;
    border-bottom: 1px solid #e7f0ef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2 {
    font-size: 16px;
}

.modal-close {
    border: none;
    background: transparent;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 10px;
    color: var(--ink-600);
    cursor: pointer;
    transition: 0.2s ease;
}

.modal-close:hover {
    background: #eff7f6;
    color: var(--ink-800);
}

.modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.modal-footer {
    padding: 14px 18px 18px;
    border-top: 1px solid #ebf3f2;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.modal-delete-body {
    text-align: center;
    padding-top: 24px;
}

.modal-delete-body h2 {
    font-size: 18px;
}

.modal-delete-body p {
    margin-top: 8px;
    color: var(--ink-600);
    font-size: 14px;
}

.danger-orb {
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: #fee2e2;
    color: #dc2626;
    display: grid;
    place-items: center;
    font-size: 22px;
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* -------------------------------------------------------
   Toast
------------------------------------------------------- */
.toast-stack {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 9px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-inline-size: 220px;
    max-inline-size: 300px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 13px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.toast-success {
    background: linear-gradient(130deg, #4f46e5, #6366f1);
}

.toast-error {
    background: linear-gradient(130deg, #ef4444, #b91c1c);
}

/* -------------------------------------------------------
   Misc
------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 8px;
}

/* -------------------------------------------------------
   Dark Theme
------------------------------------------------------- */
html[data-theme="dark"] {
    --bg-page: #0d1117;
    --bg-card: rgba(22, 27, 39, 0.95);
    --bg-strong: #1e293b;

    --ink-950: #f1f5f9;
    --ink-800: #e2e8f0;
    --ink-700: #cbd5e1;
    --ink-600: #94a3b8;
    --ink-450: #64748b;

    --line-soft: rgba(255, 255, 255, 0.08);

    --primary: #6366f1;
    --primary-soft: rgba(99, 102, 241, 0.15);
    --accent: #fb923c;
    --accent-soft: #431407;
    --danger: #f87171;

    --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.5);

    /* ── Alias tokens (dark overrides) ── */
    --bg-subtle: #1e293b;
    --bg-primary: #161b27;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --text-primary: var(--ink-950);
    --text-secondary: var(--ink-600);
    --text-main: var(--ink-950);
    --text-muted: var(--ink-600);
    --border-color: rgba(255, 255, 255, 0.08);
}

/* ── Dark mode variable overrides (canonical block above) ── */

html[data-theme="dark"] body {
    background: #0d1117;
    color: var(--ink-800);
}

html[data-theme="dark"] .bg-shape {
    opacity: 0;
    display: none;
}

html[data-theme="dark"] .sidebar {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* dark mode overrides — base values already dark, just kept for shadow/specificity */
html[data-theme="dark"] .topbar {
    background: #161b27;
    border-bottom-color: rgba(255,255,255,0.07);
    box-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

html[data-theme="dark"] .mobile-nav-btn {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
}

html[data-theme="dark"] .mobile-nav-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* -------------------------------------------------------
   Light mode — topbar
------------------------------------------------------- */
html[data-theme="light"] .topbar {
    background: #ffffff;
    border-bottom-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] .topbar-title h1 {
    color: #0f172a;
}

html[data-theme="light"] .mobile-nav-btn {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: #64748b;
}

html[data-theme="light"] .mobile-nav-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #334155;
}

html[data-theme="light"] .tb-sep {
    background: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .tb-icon-btn {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: #64748b;
}

html[data-theme="light"] .tb-icon-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #334155;
    border-color: rgba(0, 0, 0, 0.14);
}

/* -------------------------------------------------------
   Light mode — sidebar
------------------------------------------------------- */
html[data-theme="light"] .sidebar {
    background: #ffffff;
    border-inline-end-color: rgba(0, 0, 0, 0.09);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .brand-block {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] .brand-title {
    color: #0f172a;
}

html[data-theme="light"] .brand-subtitle {
    color: #94a3b8;
}

html[data-theme="light"] .side-nav::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
}

html[data-theme="light"] .nav-caption {
    color: #94a3b8;
}

html[data-theme="light"] .nav-caption::after {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .nav-link {
    color: #475569;
}

html[data-theme="light"] .nav-link i {
    background: rgba(0, 0, 0, 0.04);
    color: #64748b;
}

html[data-theme="light"] .nav-link:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #4338ca;
}

html[data-theme="light"] .nav-link:hover i {
    background: rgba(99, 102, 241, 0.13);
    color: #4f46e5;
}

html[data-theme="light"] .nav-link.is-active {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
}

html[data-theme="light"] .nav-link.is-active i {
    background: rgba(99, 102, 241, 0.18);
    color: #4f46e5;
}

html[data-theme="light"] .nav-link.is-active::before {
    background: #4f46e5;
}

html[data-theme="light"] .side-user {
    border-top-color: rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .user-name {
    color: #0f172a;
}

html[data-theme="light"] .user-role {
    color: #94a3b8;
}

html[data-theme="light"] .logout-btn {
    color: #94a3b8;
}

html[data-theme="light"] .logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* -------------------------------------------------------
   Right Panel
------------------------------------------------------- */
.right-panel {
    position: fixed;
    top: var(--topbar-height);
    inset-inline-end: 0;
    inset-inline-start: auto;
    bottom: 0;
    inline-size: 280px;
    z-index: 110;
    background: #0b0f1a;
    color: #56647a;
    border-inline-start: 1px solid rgba(99, 102, 241, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(110%);
    transition: transform 0.26s ease, background 0.2s ease, border-color 0.2s ease;
}

html[dir="rtl"] .right-panel {
    /* inset-inline-end:0 (base) already flips to the left edge in RTL — only the
       physical translate needs flipping so the panel hides/opens on the left. */
    transform: translateX(-110%);
}

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

.right-panel-backdrop {
    display: none;
    position: fixed;
    inset-block-start: var(--topbar-height);
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 105;
    border: 0;
    background: rgba(5, 15, 30, 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.right-panel-open .right-panel-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Header */
.rp-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rp-title {
    font-size: 11px;
    font-weight: 700;
    color: #c9d4e3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rp-close-btn {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: #56647a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    font-size: 13px;
    transition: background 0.15s ease, color 0.15s ease;
}

.rp-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #a5b4fc;
}

/* Body */
.rp-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.18) transparent;
}

.rp-section-label {
    font-size: 10px;
    font-weight: 700;
    color: #2a3448;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rp-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
}

/* Language buttons */
.rp-lang-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border-radius: 9px;
    text-decoration: none;
    color: #56647a;
    font-size: 14.5px;
    font-weight: 500;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
}

.rp-lang-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #a5b4fc;
}

.rp-lang-btn.is-active {
    background: rgba(99, 102, 241, 0.13);
    color: #c7d2fe;
}

.rp-lang-btn.is-active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: #6366f1;
}

html[dir="rtl"] .rp-lang-btn.is-active::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
    border-radius: 3px 0 0 3px;
}

.rp-lang-code {
    flex-shrink: 0;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}

.rp-lang-btn:hover .rp-lang-code {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

.rp-lang-btn.is-active .rp-lang-code {
    background: rgba(99, 102, 241, 0.22);
    color: #a5b4fc;
}

.rp-lang-check {
    margin-inline-start: auto;
    font-size: 11px;
    color: #6366f1;
}

/* -------------------------------------------------------
   Right Panel — Light mode
------------------------------------------------------- */
html[data-theme="light"] .right-panel {
    background: #ffffff;
    border-inline-start-color: rgba(0, 0, 0, 0.09);
    box-shadow: -3px 0 16px rgba(0, 0, 0, 0.07);
}

html[dir="rtl"][data-theme="light"] .right-panel {
    border-inline-end-color: rgba(0, 0, 0, 0.09);
    box-shadow: 3px 0 16px rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] .rp-header {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] .rp-title {
    color: #0f172a;
}

html[data-theme="light"] .rp-close-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
}

html[data-theme="light"] .rp-close-btn:hover {
    background: rgba(0, 0, 0, 0.09);
    color: #4f46e5;
}

html[data-theme="light"] .rp-section-label {
    color: #94a3b8;
}

html[data-theme="light"] .rp-section-label::after {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .rp-lang-btn {
    color: #475569;
}

html[data-theme="light"] .rp-lang-btn:hover {
    background: rgba(99, 102, 241, 0.07);
    color: #4338ca;
}

html[data-theme="light"] .rp-lang-btn.is-active {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
}

html[data-theme="light"] .rp-lang-btn.is-active::before {
    background: #4f46e5;
}

html[data-theme="light"] .rp-lang-code {
    background: rgba(0, 0, 0, 0.04);
    color: #64748b;
}

html[data-theme="light"] .rp-lang-btn:hover .rp-lang-code {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

html[data-theme="light"] .rp-lang-btn.is-active .rp-lang-code {
    background: rgba(99, 102, 241, 0.18);
    color: #4f46e5;
}

html[data-theme="light"] .rp-lang-check {
    color: #4f46e5;
}

html[data-theme="light"] .right-panel-backdrop {
    background: rgba(15, 23, 42, 0.3);
}

html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .modal {
    background: var(--bg-card);
    border-color: var(--line-soft);
}

html[data-theme="dark"] .panel-count {
    background: #122f2d;
    border-color: #2c4d4a;
    color: var(--ink-600);
}

html[data-theme="dark"] .users-table th,
html[data-theme="dark"] .users-table td {
    border-bottom-color: #213d3a;
}

html[data-theme="dark"] .users-table th {
    background: #102b2a;
    color: var(--ink-600);
}

html[data-theme="dark"] .users-table tbody tr:hover {
    background: #0f2625;
}

html[data-theme="dark"] .mono-cell {
    color: #89a6a2;
}

html[data-theme="dark"] .view-btn {
    background: #1e1b4b;
    color: #818cf8;
}

html[data-theme="dark"] .view-btn:hover {
    background: #312e81;
}

html[data-theme="dark"] .view-invoices-btn {
    background: #134e4a;
    color: #5eead4;
}

html[data-theme="dark"] .view-invoices-btn:hover {
    background: #115e59;
}

html[data-theme="dark"] .edit-btn {
    background: #3b3018;
    color: #f8d08f;
}

html[data-theme="dark"] .edit-btn:hover {
    background: #4a3a1b;
}

html[data-theme="dark"] .delete-btn {
    background: #3b1e20;
    color: #ffb8be;
}

html[data-theme="dark"] .delete-btn:hover {
    background: #4a2528;
}

html[data-theme="dark"] .btn-subtle {
    background: rgba(255,255,255,0.06);
    color: #94a3b8;
    border-color: rgba(255,255,255,0.1);
}

html[data-theme="dark"] .btn-subtle:hover {
    background: rgba(255,255,255,0.1);
}

html[data-theme="dark"] .input-control {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--ink-800);
}

html[data-theme="dark"] .input-control:focus {
    border-color: #1fb8a9;
    box-shadow: 0 0 0 3px rgba(25, 177, 164, 0.2);
}

html[data-theme="dark"] .alert-danger {
    border-color: #7d2f36;
    background: #3a1f22;
    color: #ffc8cc;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: #274542;
}

html[data-theme="dark"] .modal-close:hover {
    background: #183c3a;
}

html[data-theme="dark"] .employee-modal-image-row {
    border-color: #335856;
    background: #112f2d;
}

html[data-theme="dark"] .employee-preview,
html[data-theme="dark"] .employee-thumb {
    border-color: #335856;
    background: #0f2625;
}

html[data-theme="dark"] .danger-orb {
    background: #4e262c;
    color: #ff9aa4;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #335856;
}

/* -------------------------------------------------------
   Responsive
------------------------------------------------------- */
@media (max-width: 1080px) {
    .app-frame {
        margin-top: var(--topbar-height);
    }

    .workspace {
        padding: 12px;
        min-width: 0;
        inline-size: 100%;
    }

    .sidebar {
        inline-size: min(88vw, 320px);
        max-inline-size: calc(100vw - 16px);
        border-radius: 0 18px 18px 0;
        z-index: 140;
        box-shadow: 0 18px 40px rgba(3, 22, 21, 0.24);
    }

    html[dir="rtl"] .sidebar {
        border-radius: 18px 0 0 18px;
    }

    .sidebar-backdrop {
        z-index: 130;
    }

    .side-nav {
        padding-bottom: 16px;
    }

    .topbar {
        gap: 12px;
    }

    .topbar-title,
    .topbar-actions {
        min-width: 0;
    }
}

@media (max-width: 820px) {
    

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .employee-modal-grid {
        grid-template-columns: 1fr;
    }

    .users-table th:nth-child(4),
    .users-table td:nth-child(4),
    .users-table th:nth-child(5),
    .users-table td:nth-child(5) {
        display: none;
    }

    .repairs-search-input {
        width: 320px;
        min-width: 180px;
    }

    .repairs-status-filter {
        min-width: 140px;
    }
}

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

    .topbar-title {
        gap: 8px;
    }

    .topbar-title h1 {
        font-size: 15px;
    }

    .mobile-nav-btn {
        flex: 0 0 auto;
    }

    .topbar-actions {
        gap: 4px;
        flex-wrap: nowrap;
    }

    .panel-head {
        flex-direction: column;
        align-items: flex-start;
    }

    

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }

    .toast-stack {
        inset-inline-end: 12px;
        inset-inline-start: 12px;
    }

    .toast-item {
        max-inline-size: none;
    }
}

/* -------------------------------------------------------
   Products & Purchases Stats Grid
------------------------------------------------------- */
.products-stats-grid,
.products-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.products-stats-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.products-stats-grid.cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1200px) {
    .products-stats-grid,
    .products-stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .products-stats-grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .products-stats-grid.cols-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .stepper-body {
        padding: 16px;
    }
    .products-stats-grid,
    .products-stats-row,
    .products-stats-grid.cols-3,
    .products-stats-grid.cols-5 {
        grid-template-columns: 1fr 1fr;
    }
}

.products-stat-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-inline-start: 4px solid var(--stat-color, #6366f1);
    border-radius: 12px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    min-height: 88px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.products-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1);
}

.products-stat-total { --stat-color: #6366f1; --stat-bg: #e0e7ff; }
.products-stat-qty   { --stat-color: #06b6d4; --stat-bg: #cffafe; }
.products-stat-cost  { --stat-color: #f59e0b; --stat-bg: #fef3c7; }
.products-stat-sell  { --stat-color: #10b981; --stat-bg: #d1fae5; }
.products-stat-debt  { --stat-color: #f43f5e; --stat-bg: #ffe4e6; }

[data-theme="dark"] .products-stat-total { --stat-bg: rgba(99, 102, 241, 0.15); --stat-color: #818cf8; }
[data-theme="dark"] .products-stat-qty   { --stat-bg: rgba(6, 182, 212, 0.15);  --stat-color: #22d3ee; }
[data-theme="dark"] .products-stat-cost  { --stat-bg: rgba(245, 158, 11, 0.15); --stat-color: #fbbf24; }
[data-theme="dark"] .products-stat-sell  { --stat-bg: rgba(16, 185, 129, 0.15); --stat-color: #34d399; }
[data-theme="dark"] .products-stat-debt  { --stat-bg: rgba(244, 63, 94, 0.15);  --stat-color: #fb7185; }

.products-stat-card .stat-icon {
    position: static;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    inline-size: 52px;
    block-size: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: var(--stat-bg);
    color: var(--stat-color);
    flex-shrink: 0;
}

.products-stat-card .stat-value {
    grid-column: 2;
    grid-row: 1;
    color: var(--text-main, #0f172a);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
    align-self: end;
}

.ledger-bal-pos { color: #16a34a !important; }
.ledger-bal-neg { color: #dc2626 !important; }
html[data-theme="dark"] .ledger-bal-pos { color: #4ade80 !important; }
html[data-theme="dark"] .ledger-bal-neg { color: #f87171 !important; }

.products-stat-card .stat-label {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    margin: 0;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.5;
    align-self: start;
}

/* -------------------------------------------------------
   Product / Purchase image thumbnail
------------------------------------------------------- */
.product-thumb {
    display: block;
    inline-size: 38px;
    block-size: 38px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-subtle, #f3f4f6);
}

.product-thumb-empty {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 8px;
    border: 1px dashed var(--border-color, #d1d5db);
    background: var(--bg-subtle, #f9fafb);
    color: var(--text-muted, #9ca3af);
    font-size: 16px;
}

/* Quantity badges (products table) */
.qty-badge {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.qty-badge-green {
    background: #d1fae5;
    color: #065f46;
}
.qty-badge-blue {
    background: #dbeafe;
    color: #1e40af;
}
.qty-badge-green i,
.qty-badge-blue i {
    font-size: 10px;
}

/* -------------------------------------------------------
   Product / Purchase modal grid
------------------------------------------------------- */
.product-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 18px;
}

.product-modal-full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .stepper-body {
        padding: 16px;
    }
    .product-modal-grid {
        grid-template-columns: 1fr;
    }
    .product-modal-full {
        grid-column: 1;
    }
}

/* -------------------------------------------------------
   Purchase info note banner
------------------------------------------------------- */
.purchase-info-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.22);
    color: #4338ca;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.purchase-info-note i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 15px;
}

html[data-theme="dark"] .purchase-info-note {
    background: rgba(129, 140, 248, 0.12);
    border-color: rgba(129, 140, 248, 0.25);
    color: #a5b4fc;
}

/* -------------------------------------------------------
   Barcode input with icon
------------------------------------------------------- */
.input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--text-muted, #9ca3af);
    font-size: 14px;
    pointer-events: none;
}

.input-with-icon {
    padding-inline-start: 34px;
}

/* -------------------------------------------------------
   Field hint text
------------------------------------------------------- */
.field-hint {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-muted, #9ca3af);
}

/* -------------------------------------------------------
   Text muted utility
------------------------------------------------------- */
.text-muted {
    color: var(--text-muted, #9ca3af);
    font-size: 13px;
}

/* -------------------------------------------------------
   Breadcrumb (global — pill container style)
------------------------------------------------------- */
.account-breadcrumb { display: inline-flex; align-items: center; }

/* Connected breadcrumb (CodePen-like segmented capsule) */
.account-breadcrumb-list {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-card) 86%, #0f172a 14%);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.account-breadcrumb-item {
    display: flex;
    transition: background-color 0.15s;
    align-items: center;
    position: relative;
    background: color-mix(in srgb, var(--bg-card) 90%, #0f172a 10%);
}

.account-breadcrumb-item:not(:last-of-type)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -19px;
    width: 36px;
    height: 36px;
    transform: translateY(-50%) rotate(45deg);
    background: color-mix(in srgb, var(--bg-card) 90%, #0f172a 10%);
    border-top: 1px solid color-mix(in srgb, var(--line-soft) 70%, #334155 30%);
    border-right: 1px solid color-mix(in srgb, var(--line-soft) 70%, #334155 30%);
    z-index: 2;
    transition: background-color 0.15s;
}

/* Separators are generated by item pseudo-elements */
.account-breadcrumb-sep {
    display: none;
}

/* Link items */
.account-breadcrumb-link {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-600);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
    line-height: 1;
    padding: 13px 44px 13px 22px;
    position: relative;
    z-index: 3;
}
.account-breadcrumb-link:hover {
    color: var(--ink-950);
}
.account-breadcrumb-item:hover,
.account-breadcrumb-item:hover::after {
    background: color-mix(in srgb, var(--bg-strong) 82%, #1d4ed8 18%);
}
.account-breadcrumb-link i { font-size: 16px; flex-shrink: 0; }

/* Current (last) item */
.account-breadcrumb-current {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-950);
    white-space: nowrap;
    line-height: 1;
    padding: 13px 28px 13px 22px;
    pointer-events: none;
    position: relative;
    z-index: 3;
}
.account-breadcrumb-current i { font-size: 16px; flex-shrink: 0; }

.account-breadcrumb-item ~ .account-breadcrumb-item .account-breadcrumb-link,
.account-breadcrumb-item ~ .account-breadcrumb-item .account-breadcrumb-current {
    padding-left: 44px;
}


.account-breadcrumb-item.is-current,
.account-breadcrumb-item.is-current::after {
    background: color-mix(in srgb, var(--bg-strong) 76%, #1d4ed8 24%);
}

.account-breadcrumb-item ~ .account-breadcrumb-item.is-current .account-breadcrumb-current {
    color: var(--ink-950);
    padding-left: 54px;
}

@media (max-width: 640px) {
    .stepper-body {
        padding: 16px;
    }
    .account-breadcrumb-list {
        border-radius: 8px;
    }

    .account-breadcrumb-item:not(:last-of-type)::after {
        right: -13px;
        width: 24px;
        height: 24px;
    }

    .account-breadcrumb-link {
        font-size: 13px;
        padding: 8px 28px 8px 14px;
    }

    .account-breadcrumb-current {
        font-size: 13px;
        padding: 8px 14px;
    }
    .account-breadcrumb-item ~ .account-breadcrumb-item .account-breadcrumb-link,
    .account-breadcrumb-item ~ .account-breadcrumb-item .account-breadcrumb-current {
        padding-left: 28px;
    }
    .account-breadcrumb-item ~ .account-breadcrumb-item.is-current .account-breadcrumb-current {
        padding-left: 36px;
    }

}




/* ── Generic Toolbar (Migrated from users) ─────────────────────────────────── */
/* ── Users Page ─────────────────────────────────── */
.u-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.u-toolbar-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.u-toolbar-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink-950);
    font-family: var(--font-head);
    line-height: 1.2;
}
.u-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.u-header-btn {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 11px;
    background: linear-gradient(125deg, #6366f1, #4f46e5);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: filter 0.18s, transform 0.12s;
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
.u-header-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.u-header-btn:active { transform: translateY(0); }
.u-header-btn i { font-size: 12px; }

    @media (max-width: 640px) {
    .stepper-body {
        padding: 16px;
    }
    .u-toolbar { gap: 10px; }
    .u-toolbar-title { font-size: 18px; }
    .u-stats-row { grid-template-columns: 1fr; }
    .u-stat-card { min-height: 80px; padding: 16px 18px; }
    .u-stat-value { font-size: 26px; }
    .u-panel-head { flex-direction: column; align-items: stretch; }
    .u-panel-head > div:last-child { flex-direction: column; }
    .u-search { width: 100%; }
    .u-search-wrap { width: 100%; }
    .u-badge-count { align-self: flex-start; }
    .u-badge-count { align-self: flex-start; }
}


/* ── Stepper ─────────────────────────────────────── */
.stepper-body {
    padding: 24px 30px;
}

.repair-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.repair-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    text-align: center;
    gap: 6px;
}

.step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 2px solid var(--border-color, #e5e7eb);
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #6b7280);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.repair-step.step-done .step-dot {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.repair-step.step-current .step-dot {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(59,130,246,.2);
}

.step-line {
    flex: 1;
    height: 2px;
    background: var(--border-color, #e5e7eb);
    align-self: flex-start;
    margin-top: 17px;
    min-width: 16px;
    flex-shrink: 0;
}

.step-line-done {
    background: #22c55e;
}

.step-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.step-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
}

.repair-step.step-current .step-name {
    color: #3b82f6;
}

.repair-step.step-done .step-name {
    color: #15803d;
}

.step-date {
    font-size: 10px;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
}

[data-theme="dark"] .step-dot {
    background: var(--bg-card, #1e293b);
    border-color: var(--border-color, #334155);
    color: #94a3b8;
}

[data-theme="dark"] .repair-step.step-done .step-dot {
    background: #16a34a;
    border-color: #16a34a;
}

[data-theme="dark"] .repair-step.step-current .step-dot {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(59,130,246,.25);
}

[data-theme="dark"] .step-line {
    background: var(--border-color, #334155);
}

[data-theme="dark"] .step-line-done {
    background: #16a34a;
}
@media (max-width: 640px) {
    .stepper-body {
        padding: 16px;
    }
    .repair-stepper {
        flex-direction: column;
        align-items: stretch;
    }

    .repair-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: start;
        gap: 12px;
        flex: 0 0 auto;
    }

    .step-info {
        align-items: flex-start;
        padding-top: 7px;
    }

    .step-line {
        flex: 0 0 auto;
        width: 2px;
        height: 20px;
        margin-top: 0;
        margin-inline-start: 17px;
        min-width: 0;
    }

    .step-name {
        white-space: normal;
    }

    .step-date {
        white-space: normal;
    }
}


.repair-step.step-cancelled .step-dot {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.repair-step.step-cancelled .step-name {
    color: #dc2626;
}

.step-line-cancelled {
    background: #ef4444;
}

.repair-step.step-not-repaired .step-dot {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.repair-step.step-not-repaired .step-name {
    color: #dc2626;
}

.step-line-not-repaired {
    background: #ef4444;
}

.repair-step.step-not-invoiced .step-dot {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.repair-step.step-not-invoiced .step-name {
    color: #dc2626;
}

.step-line-not-invoiced {
    background: #ef4444;
}

[data-theme="dark"] .repair-step.step-cancelled .step-dot {
    background: #dc2626;
    border-color: #dc2626;
}

[data-theme="dark"] .step-line-cancelled {
    background: #dc2626;
}

[data-theme="dark"] .repair-step.step-not-repaired .step-dot {
    background: #dc2626;
    border-color: #dc2626;
}

[data-theme="dark"] .step-line-not-repaired {
    background: #dc2626;
}

[data-theme="dark"] .repair-step.step-not-invoiced .step-dot {
    background: #dc2626;
    border-color: #dc2626;
}

[data-theme="dark"] .step-line-not-invoiced {
    background: #dc2626;
}


.repair-step.step-clickable {
    cursor: pointer;
}

.repair-step.step-clickable .step-dot {
    transition: transform 0.15s, filter 0.15s;
}

.repair-step.step-clickable:hover .step-dot {
    transform: scale(1.12);
    filter: brightness(1.18);
}

/* Inline cancel / not-repaired button inside a step */
.step-inline-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    margin-top: 3px;
    flex-shrink: 0;
}

.step-inline-btn:hover {
    background: #dc2626;
}

/* Custom Autocomplete */
.autocomplete-wrapper {
    position: relative;
    flex: 1;
}
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: none;
    margin-top: 4px;
}
.autocomplete-dropdown.open {
    display: block;
}
.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
}
.autocomplete-item:hover, .autocomplete-item.active {
    background: var(--bg-color);
    color: var(--primary);
}
.autocomplete-add-btn {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 6px;
}
.autocomplete-add-btn:hover {
    background: #eef2ff;
}