:root {
    /* Layout */
    --sidebar-width: 240px;
    --header-height: 60px;
    --app-top-height: 60px;
    /* Core palette */
    --bg: #F4F7FB;
    --surface: #ffffff;
    --surface-muted: #F8FAFC;
    --text: #111827;
    --text-soft: #64748B;
    --line: #E2E8F0;
    /* Brand */
    --brand: #14B8A6;
    --brand-dark: #0F766E;
    --brand-soft: #CCFBF1;
    /* Sidebar */
    --sidebar-bg: #0F172A;
    --sidebar-text: #CBD5E1;
    --sidebar-active: #14B8A6;
    --sidebar-active-bg: rgba(20, 184, 166, 0.15);
    /* Header legacy */
    --header-start: #0F172A;
    --header-end: #1E293B;
    --nav-start: #f9fafb;
    --nav-end: #eef2f7;
    --nav-text: #334155;
    --nav-active-bg: #CCFBF1;
    --nav-active-border: #5EEAD4;
    /* Semantic */
    --danger: #DC2626;
    --warning: #F59E0B;
    --success: #059669;
    /* Radii */
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    /* Shadows */
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
    --shadow-lg: 0 4px 24px rgba(15, 23, 42, 0.10);
    --blur: 14px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}

/*
 * Khmer Unicode range — bump size by ~15% so glyphs are legible.
 * Inter handles Latin at normal size; Noto Sans Khmer takes over for Khmer.
 */
@supports (unicode-range: U+1780-17FF) {
    :root { --khmer-size-boost: 1.15; }
}

/* Any element that contains Khmer text gets auto-boosted via the fallback font.
   We target the most common containers explicitly for reliability. */
.order-product-names,
.order-tracking-table td:nth-child(5),
.order-tracking-table td:nth-child(7),
.sidebar-link-label,
.pos-product-card h4,
.kpi p,
td, th {
    font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
}

p {
    margin: 0;
    color: var(--text-soft);
}

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

.app-shell {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100%;
}

.app-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-top-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.app-header {
    background: var(--surface);
    color: var(--text);
    height: var(--header-height);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Sidebar ─────────────────────────────────────────── */
.app-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 200;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.sidebar-brand .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #14B8A6, #0d9488);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar-brand-name {
    font-size: 14px;
    font-weight: 700;
    color: #F1F5F9;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.01em;
}

.sidebar-brand-sub {
    font-size: 11px;
    color: #64748B;
}

.sidebar-nav-items {
    flex: 1;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.14s, color 0.14s;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.sidebar-link:active,
.sidebar-link:focus {
    background: transparent;
    color: inherit;
    outline: none;
}

.sidebar-link.is-active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active);
    border-color: rgba(20,184,166,0.18);
    font-weight: 600;
}

.sidebar-link i {
    font-size: 15px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.sidebar-footer {
    padding: 10px 8px 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sidebar-user {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #14B8A6, #0d9488);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-user-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-user-info strong {
    font-size: 12px;
    font-weight: 600;
    color: #F1F5F9;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-info span {
    font-size: 10.5px;
    color: #64748B;
}

.sidebar-logout-btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: #64748B;
    transition: background 0.14s, color 0.14s;
    flex-shrink: 0;
    text-decoration: none;
}

.sidebar-logout-btn:hover {
    background: rgba(220,38,38,0.12);
    color: #f87171;
}

.sidebar-logout-btn i {
    font-size: 14px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #073137;
    background: linear-gradient(140deg, #99f6e4, #fef3c7);
}

.brand p {
    color: #9eb5d8;
    font-size: 12px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.user-pill-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #14B8A6, #0d9488);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-pill-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.user-pill-info strong {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    display: block;
    line-height: 1.3;
}

.user-pill-info span {
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1;
}

.user-pill-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--text-soft);
    transition: background 0.14s, color 0.14s;
    text-decoration: none;
    font-size: 14px;
}

.user-pill-logout:hover {
    background: rgba(220,38,38,0.08);
    color: var(--danger);
}

.header-nav {
    background: linear-gradient(90deg, var(--nav-start), var(--nav-end));
    border: 1px solid #d7dde6;
    border-radius: 12px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: thin;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.menu-link {
    padding: 9px 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--nav-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease;
}

.menu-link:hover {
    color: #0f172a;
    background: #e9f1f8;
}

.menu-link.active {
    color: #0f766e;
    background: var(--nav-active-bg);
    border-color: var(--nav-active-border);
    font-weight: 600;
}

.main-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 24px 24px;
}

.topbar {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(var(--blur));
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: var(--shadow);
}

.topbar h2 {
    font-size: 1.3rem;
}

.eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--text-soft);
    font-weight: 500;
}

.module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.module-meta span {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(216, 225, 235, 0.8);
    font-size: 13px;
    color: var(--text-soft);
    box-shadow: 0 8px 18px rgba(12, 22, 33, 0.05);
}

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

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

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px 18px 16px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    min-width: 0;
}

.app-notification-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 24px));
    z-index: 1300;
}

.app-notification {
    border: 1px solid #cfe0ef;
    border-radius: 12px;
    background: #f8fbff;
    color: #12314f;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 10px;
    animation: appNotifyIn 0.2s ease-out;
}

.app-notification p {
    margin: 0;
    color: inherit;
    font-size: 13px;
}

.app-notification-close {
    border: 1px solid #bfd3e5;
    background: #fff;
    color: #38546e;
    border-radius: 8px;
    min-width: 26px;
    height: 26px;
    cursor: pointer;
}

.app-notification-success {
    border-color: #9ee6cb;
    background: #ecfdf5;
    color: #14532d;
}

.app-notification-warning {
    border-color: #f6d58c;
    background: #fff7e6;
    color: #7a4b10;
}

.app-notification-error {
    border-color: #f8b4b4;
    background: #fff1f2;
    color: #881337;
}

.app-notification.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

@keyframes appNotifyIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card h3 {
    margin-bottom: 8px;
}

.kpi {
    grid-column: span 3;
}

.kpi strong {
    display: block;
    font-size: 28px;
    margin-top: 8px;
    font-family: 'Space Grotesk', sans-serif;
}

.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-12 { grid-column: span 12; }

@media (max-width: 768px) {
    .kpi,
    .span-8,
    .span-7,
    .span-6,
    .span-5,
    .span-4 {
        grid-column: span 12;
    }
}

.table-responsive {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--line);
    max-height: 70vh;
    overscroll-behavior: contain;
}

.table-responsive .table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-muted);
}

.table-responsive > .table {
    margin-top: 0;
    border-radius: 0;
    overflow: visible;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.table th,
.table td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.table thead {
    background: var(--surface-muted);
}

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

.table tbody tr:hover {
    background: #f8fbff;
}

.badge {
    font-size: 12px;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    color: var(--text-soft);
}

.badge.low {
    color: var(--danger);
    border-color: #fecaca;
    background: #fef2f2;
}

.badge.badge-out-of-stock {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
    font-weight: 700;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: 14px;
}

.input,
select,
textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--line);
    padding: 10px;
    background: #fff;
}

.btn {
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(130deg, var(--brand), #0e9388);
    box-shadow: 0 12px 26px rgba(15, 118, 110, 0.25);
}

.btn-secondary {
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.btn-success {
    color: #fff;
    background: linear-gradient(130deg, #16a34a, #15803d);
    box-shadow: 0 12px 26px rgba(22, 163, 74, 0.25);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    gap: 10px;
}

.customer-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.customer-card-head p {
    margin-top: 4px;
    font-size: 13px;
}

.customer-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.customer-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: #496077;
}

.customer-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.customer-form-grid-main {
    align-items: end;
}

.customer-field {
    min-width: 0;
}

.customer-field-full {
    grid-column: span 2;
}

.customer-form-intro {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d3e4ef;
    background: linear-gradient(135deg, #f4fbff 0%, #eefaf7 55%, #f8f5ff 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.customer-form-intro p {
    font-size: 13px;
    color: #385063;
}

.customer-form-section {
    border: 1px solid #d6e3ef;
    border-radius: 14px;
    padding: 13px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(18, 39, 67, 0.05);
}

.customer-form-section-title {
    margin: 0 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #26435f;
}

.customer-form .input,
.customer-form select,
.customer-form textarea {
    min-height: 44px;
    border-color: #c4d6e8;
    background: #fcfeff;
    border-radius: 12px;
    padding: 11px 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.customer-form textarea {
    min-height: 98px;
    resize: vertical;
}

.customer-form .input:focus,
.customer-form select:focus,
.customer-form textarea:focus {
    border-color: #4ea6c8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14);
    background: #fff;
    outline: none;
}

.customer-form-actions {
    margin-top: 2px;
    padding: 10px;
    border: 1px solid #d3deea;
    border-radius: 13px;
    background: rgba(245, 249, 255, 0.95);
}

.customer-form-actions .btn {
    min-height: 42px;
    min-width: 112px;
}

.customer-directory-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 480px;
    overflow: auto;
    padding-right: 2px;
}

.customer-directory-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.customer-directory-item p {
    font-size: 12px;
}

.customer-directory-item.is-active {
    border-color: var(--nav-active-border);
    background: #f3fcf8;
}

.customer-directory-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.customer-action-btn {
    padding: 6px 10px;
    font-size: 12px;
}

.customer-action-btn.danger {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fff5f5;
}

.customer-crm-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #cdd6e2;
    background:
        radial-gradient(circle at 92% -14%, rgba(129, 230, 217, 0.32) 0, transparent 36%),
        radial-gradient(circle at -8% 0, rgba(147, 197, 253, 0.2) 0, transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);
}

.customer-crm-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, #0f766e, #3b82f6);
    opacity: 0.65;
    pointer-events: none;
}

.customer-crm-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #d6e0ea;
}

.customer-crm-head p {
    margin-top: 4px;
    font-size: 14px;
}

.customer-crm-head h3 {
    font-size: 31px;
    letter-spacing: -0.02em;
}

.customer-crm-head strong {
    color: #0f766e;
}

.customer-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.customer-head-actions .btn {
    min-height: 42px;
    padding: 10px 16px;
}

.customer-crm-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px 180px;
    gap: 8px;
}

.customer-crm-filters .input,
.customer-crm-filters select {
    background: rgba(255, 255, 255, 0.92);
    border-color: #c9d7e7;
    min-height: 44px;
}

.customer-create-modal {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.18) 0, transparent 30%),
        rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    z-index: 300;
    padding: 16px;
}

.customer-create-modal[hidden] {
    display: none;
}

.customer-create-modal-card {
    width: min(1100px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid #d4ddea;
    border-radius: 18px;
    background:
        radial-gradient(circle at 94% 2%, rgba(187, 247, 208, 0.35) 0, transparent 35%),
        radial-gradient(circle at 8% 0, rgba(191, 219, 254, 0.35) 0, transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 34px 84px rgba(15, 23, 42, 0.36);
    padding: 20px;
    animation: customerModalEnter 0.24s ease-out;
}

.customer-create-modal .input,
.customer-create-modal select,
.customer-create-modal textarea {
    font-size: 16px;
}

/* Ensure modal card is a positioning context for the quick-create overlay */
.customer-create-modal-card {
    position: relative;
}

/* Quick-create panel as a centered popup overlay inside the customer modal */
#pos-customer-quick-create {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, calc(100% - 32px));
    z-index: 40;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #d6e3ef;
    border-radius: 14px;
    box-shadow: 0 34px 84px rgba(15, 23, 42, 0.36);
    padding: 18px;
}

@media (max-width: 960px) {
    .customer-create-modal {
        padding: 10px;
    }

    .customer-create-modal-card {
        width: 100%;
        max-height: 94vh;
        padding: 16px;
    }
}

#pos-customer-quick-create[hidden] { display: none; }

/* Slightly dim the underlying modal content when quick-create is open */
.customer-create-modal-card.quick-create-open > *:not(#pos-customer-quick-create) {
    opacity: 0.6;
    pointer-events: none;
}

.customer-create-modal-card::before {
    content: '';
    display: block;
    height: 4px;
    margin: -18px -18px 14px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, #0f766e, #1d4ed8, #0ea5e9);
}

.customer-create-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

.customer-create-modal-head h4 {
    font-size: 28px;
    letter-spacing: -0.02em;
}

.customer-modal-close {
    padding: 9px 14px;
    border-radius: 12px;
}

.customer-table-wrap {
    overflow: auto;
    border: 1px solid #c9d7e7;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
    max-height: 70vh;
    height: 55vh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.customer-table {
    margin-top: 0;
    min-width: 980px;
}

.customer-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, #f8fbff 0, #eef4fb 100%);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #51657d;
}

.customer-table tbody tr:nth-child(odd) {
    background: #fcfeff;
}

.customer-table tbody tr:hover {
    background: #f4f9ff;
}

.customer-table td small {
    color: var(--text-soft);
    font-size: 12px;
}

.customer-table tbody tr.is-active {
    background: #eaf8f4;
}

.customer-row-actions {
    display: flex;
    gap: 6px;
}

.customer-action-btn {
    min-width: 74px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
}

.customer-action-view {
    border-color: #99d7ea;
    color: #0c5f82;
    background: #eef9ff;
}

.customer-action-btn.danger {
    border-color: #f8b4b4;
    color: #b42323;
    background: #fff1f1;
}

.customer-type-badge {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    font-size: 11px;
}

/* App modal (used for confirmations) */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(11, 20, 26, 0.48);
    z-index: 1400;
    padding: 20px;
    animation: modalFadeIn 0.18s ease-out;
}

.app-modal {
    width: 100%;
    max-width: 520px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(210, 223, 236, 0.9);
    border-radius: 14px;
    box-shadow: 0 28px 64px rgba(11, 20, 26, 0.28);
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: modalSlideUp 0.18s ease-out;
}

.app-modal h4 {
    margin: 0;
    font-size: 18px;
    color: var(--text);
}

.app-modal p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
}

.app-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 6px;
}

.app-modal .btn-danger {
    background: linear-gradient(130deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 10px 28px rgba(220, 38, 38, 0.18);
}

.app-modal .btn-secondary {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.customer-type-regular {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

.customer-type-loyal {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.customer-type-vip {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

.customer-origin-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.customer-origin-walk_in {
    background: #f0fdf4;
    color: #166534;
    border-color: #86efac;
}

.customer-origin-online {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #93c5fd;
}

@keyframes customerModalEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.customer-info-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.customer-info-grid .list-row {
    margin: 0;
}

.customer-info-wide {
    grid-column: span 2;
}

.workspace-board {
    padding: 20px;
}

.workspace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.workspace-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.mini-kpi {
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
}

.mini-kpi span {
    display: block;
    color: var(--text-soft);
    font-size: 12px;
}

.mini-kpi strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
}

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

.workspace-section {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
}

.workspace-section h4 {
    margin-bottom: 8px;
}

.list-row.compact {
    margin-top: 10px;
}

.product-form-subtitle {
    margin-bottom: 10px;
    font-size: 14px;
}

.product-form-panel {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfdff;
}

.product-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-image-upload {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.product-image-upload img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
}

.product-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-soft);
}

.product-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.product-form-checks {
    display: grid;
    gap: 8px;
    font-size: 14px;
    color: var(--text-soft);
}

.product-form-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.product-stats {
    margin-top: 8px;
}

.product-filter {
    width: 100%;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.product-filter:hover {
    border-color: #9fb3c8;
}

.product-filter.is-active {
    border-color: var(--nav-active-border);
    background: var(--nav-active-bg);
}

.product-catalog-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.product-list-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.product-list-item h4 {
    margin: 3px 0;
}

.product-list-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-item-actions {
    display: flex;
    gap: 6px;
}

.product-action-btn {
    padding: 6px 10px;
    font-size: 12px;
}

.product-action-btn.danger {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fff5f5;
}

.inventory-flow {
    padding: 18px;
}

.inventory-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.inventory-kpis {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.reports-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.reports-seller-kpis {
    display: contents;
}

.inventory-kpi-card {
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.inventory-kpi-card strong {
    font-size: 34px;
    display: block;
    margin: 4px 0;
}

.inventory-kpi-card span {
    display: block;
    color: #16a34a;
    font-size: 13px;
}

.inventory-kpi-card.warning span {
    color: #ea580c;
}

.inventory-kpi-card.danger span {
    color: #dc2626;
}

.inventory-tabs {
    margin-top: 14px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface-muted);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    position: sticky;
    top: var(--app-top-height);
    z-index: 100;
}

.inventory-tab {
    border: 0;
    background: transparent;
    color: var(--text-soft);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.inventory-tab span {
    margin-left: 4px;
    display: inline-block;
    min-width: 18px;
    border-radius: 999px;
    background: #dbe5f2;
    color: #597089;
    font-size: 12px;
    padding: 1px 6px;
}

.inventory-tab.is-active {
    background: var(--brand);
    color: #fff;
}

.inventory-tab.is-active span {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.inventory-channel-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid #c9d7e6;
    background: #eef4fb;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.inventory-channel-pill span {
    color: #52657a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 4px;
}

.inventory-channel-option {
    border: 1px solid transparent;
    background: transparent;
    color: #31445b;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.inventory-channel-option.is-active[data-inventory-channel-option="online"] {
    background: #16a34a;
    color: #f0fdf4;
}

.inventory-channel-option.is-active[data-inventory-channel-option="offline"] {
    background: #dc2626;
    color: #fef2f2;
}

.inventory-channel-page-head {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.inventory-channel-page-head p {
    color: #5f7082;
}

.inventory-channel-modal .inventory-channel-panel {
    width: min(860px, 100%);
    border-color: #cdd9e8;
    background: linear-gradient(180deg, #fcfeff 0%, #f2f8ff 100%);
    color: var(--text);
}

.inventory-channel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.inventory-channel-head h4 {
    margin: 0;
    color: var(--text);
}

.inventory-channel-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inventory-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.inventory-channel-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #5f7082;
    letter-spacing: 0.04em;
}

.inventory-channel-form .input,
.inventory-channel-form select,
.inventory-channel-form textarea {
    background: #fff;
    border: 1px solid #d4e0ee;
    color: var(--text);
}

.inventory-channel-form .input::placeholder,
.inventory-channel-form textarea::placeholder {
    color: #8ca0b8;
}

.inventory-channel-form .input:focus,
.inventory-channel-form select:focus,
.inventory-channel-form textarea:focus {
    outline: none;
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.inventory-channel-partners h5 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 14px;
}

.inventory-channel-partner-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.inventory-channel-partner-tags {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.inventory-channel-partner-tag {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 8px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    cursor: pointer;
}

.inventory-channel-partner-tag span {
    border-radius: 6px;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 1px 6px;
    font-size: 11px;
}

.inventory-channel-partner-tag strong {
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1;
}

.inventory-channel-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.inventory-info {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-muted);
    padding: 12px;
}

.inventory-info ul {
    margin: 8px 0 0;
}

.inventory-list-head {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.inventory-toolbar {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1fr;
    gap: 8px;
}

.inventory-stock-filters {
    display: flex;
    gap: 6px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 3px;
}

.inventory-chip {
    border: 0;
    background: transparent;
    color: var(--text-soft);
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.inventory-chip:hover,
.inventory-chip:focus-visible {
    background: #e9f1f8;
    color: #0f172a;
    outline: none;
}

.inventory-create-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    padding: 16px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.inventory-create-modal[hidden] {
    display: none;
}

.inventory-create-panel {
    width: min(860px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid #cdd9e8;
    border-radius: 14px;
    background: linear-gradient(180deg, #fcfeff 0%, #f2f8ff 100%);
    padding: 14px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.35);
}

/* Anchored variant: position the panel absolutely inside the overlay */
.inventory-create-modal.anchored {
    display: block; /* keep overlay visible */
}
.inventory-create-modal.anchored .inventory-create-panel {
    position: absolute;
    transform: none;
    box-shadow: 0 20px 46px rgba(12, 22, 33, 0.28);
    max-height: calc(100vh - 24px);
}

.inventory-create-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.inventory-create-head p {
    margin-top: 4px;
    font-size: 14px;
}

.inventory-create-head h4 {
    margin: 0;
    font-size: 24px;
}

.inventory-create-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inventory-create-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5f7082;
    font-weight: 600;
}

.inventory-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.inventory-field-wide {
    grid-column: span 2;
}

.required-mark {
    color: #dc2626;
}

.inventory-field-help {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

.inventory-create-form textarea {
    resize: vertical;
}

.inventory-toggle-row {
    border-top: 1px solid #d6e2ef;
    padding-top: 8px;
}

.inventory-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.inventory-checkbox input {
    width: 16px;
    height: 16px;
}

.inventory-create-actions {
    justify-content: flex-end;
}

.inventory-category-panel {
    width: min(780px, 100%);
}

.category-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.category-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5f7082;
    font-weight: 600;
}

.inventory-product-image-field {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d4e0ee;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
}

.inventory-product-image-field img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #d4e0ee;
}

.inventory-product-image-field p {
    margin-top: 4px;
    font-size: 12px;
}

.inventory-ops-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.permission-panel {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-muted);
    padding: 12px;
}

.permission-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.permission-head h4 {
    margin: 0;
}

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

.permission-action-head {
    display: grid;
    grid-template-columns: 1.8fr repeat(4, 0.4fr);
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 4px;
    color: var(--text-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.permission-grid-matrix {
    display: flex;
    flex-direction: column;
}

.permission-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

.permission-item-matrix {
    display: grid;
    grid-template-columns: 1.8fr repeat(4, 0.4fr);
    align-items: center;
    gap: 8px;
}

.permission-module-label {
    min-width: 0;
}

.permission-cell {
    display: grid;
    place-items: center;
    margin: 0;
}

.permission-cell input {
    width: 16px;
    height: 16px;
}

.permission-item small {
    display: block;
    color: var(--text-soft);
    margin-top: 3px;
    font-size: 12px;
}

.permission-matrix {
    margin-top: 12px;
}

.permission-matrix h4 {
    margin-bottom: 8px;
}

.inventory-op-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-muted);
    padding: 12px;
}

.inventory-op-card h4 {
    margin-bottom: 8px;
}

.inventory-op-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inventory-op-form label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5f7082;
    font-weight: 600;
}

.inventory-stock-head {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    border: 1px solid #d4deea;
    border-radius: 14px;
    background: linear-gradient(160deg, #f9fcff 0%, #f2f7fc 100%);
    padding: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.inventory-stock-head-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.inventory-stock-head-main .eyebrow {
    color: #5f7082;
}

.inventory-stock-head-side {
    width: auto;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.inventory-stock-head-action {
    align-self: flex-start;
    white-space: nowrap;
    min-height: 40px;
    padding: 0 16px;
}

.inventory-stock-head h4 {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.02em;
}

.inventory-stock-subtitle {
    margin-top: 0;
    font-size: 17px;
    line-height: 1.45;
    color: #4a5d72;
}

.inventory-stock-status-panel {
    width: 100%;
    border: 1px solid #d7e2ee;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    padding: 8px;
    margin-left: auto;
}

.inventory-stock-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.inventory-stock-inline-alerts {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 6px 0 0;
}

.inventory-alert-chip-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.inventory-alert-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #fca5a5;
    background: #fff1f2;
    color: #9f1239;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.inventory-alert-chip.is-healthy {
    border-color: #86efac;
    background: #ecfdf5;
    color: #166534;
}

.inventory-stock-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
}

.inventory-stock-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.inventory-stock-block {
    border: 1px solid #d8e1eb;
    border-radius: 12px;
    background: #f9fcff;
    padding: 12px;
}

.inventory-stock-block h5 {
    margin: 0;
    font-size: 15px;
    color: #0f172a;
}

#inventory-table th,
#inventory-table td {
    padding: 14px 12px;
}

#inventory-table .inventory-product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

#inventory-table .inventory-product-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#inventory-table .inventory-product-name {
    font-weight: 600;
    color: #0f172a;
}

#inventory-table .inventory-product-id {
    font-size: 12px;
    color: #64748b;
}

#inventory-table .inventory-product-id-cell {
    font-family: "Courier New", monospace;
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
}

#inventory-table .inventory-product-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.inventory-stock-actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inventory-stock-launcher {
    width: 100%;
}

.inventory-stock-modal .inventory-stock-form-panel {
    width: min(560px, 100%);
}

.inventory-stock-form-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.inventory-stock-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.inventory-stock-block-head p {
    font-size: 12px;
}

.inventory-table-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.inventory-table-scroll > .table {
    margin-top: 0;
    border-radius: 0;
    overflow: visible;
}

.inventory-table-scroll-movement {
    max-height: 340px;
}

.inventory-table-scroll .table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-muted);
}

#inventory-movement-table td,
#inventory-movement-table th {
    white-space: nowrap;
}

#inventory-alert-list {
    max-height: none;
    overflow: visible;
}

.inventory-alerts,
.inventory-movement {
    margin-top: 12px;
}

.inventory-panel {
    margin-top: 14px;
}

.inventory-panel h4 {
    margin-bottom: 8px;
}

.inventory-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.inventory-panel-head h4 {
    margin: 0;
}

.inventory-menu-color {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.inventory-menu-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.2);
}

.inventory-attribute-summary {
    margin-bottom: 12px;
    border-radius: 12px;
    padding: 12px;
    background: linear-gradient(160deg, #f9fcff 0%, #f2f7fc 100%);
    border: 1px solid var(--line);
    color: var(--text);
}

.inventory-attribute-summary h4 {
    margin: 0 0 6px;
    color: var(--text);
}

.inventory-attribute-summary p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
}

.inventory-attribute-filters {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inventory-attribute-filter {
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--text-soft);
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer;
}

.inventory-attribute-filter span {
    margin-left: 4px;
    color: #7a8ea5;
}

.inventory-attribute-filter.is-active {
    border-color: var(--nav-active-border);
    background: var(--brand);
    color: #fff;
}

.inventory-attribute-filter.is-active span {
    color: #fff;
}

.reports-movement-filters {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.reports-movement-filters label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    font-weight: 600;
}

.reports-movement-actions {
    display: flex;
    align-items: end;
}

.reports-movement-actions .btn {
    width: 100%;
}

.reports-subnav {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.reports-subtab {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text-soft);
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
}

.reports-subtab.is-active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.reports-quick-filters {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.reports-quick-filters label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    font-weight: 600;
}

.reports-quick-actions {
    display: flex;
    align-items: end;
}

.reports-quick-actions .btn {
    width: 100%;
}

.reports-table-wrap {
    width: 100%;
    overflow: auto;
    max-height: 70vh;
    overscroll-behavior: contain;
}

.reports-table-wrap .table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-muted);
}

.reports-table-wrap .table {
    margin-top: 0;
}

.reports-table-wrap > .table {
    border-radius: 0;
    overflow: visible;
}

.reports-table-wide {
    min-width: 1850px;
}

.reports-table-medium {
    min-width: 1200px;
}

.reports-date-range-filters {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.reports-date-range-filters label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    font-weight: 600;
}

.reports-movement-results {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-soft);
}

.product-hub {
    background: linear-gradient(160deg, #071328, #0b1f3e);
    border-color: #15325b;
    color: #e6f0ff;
}

.product-hub p,
.product-hub li {
    color: #a7bddc;
}

.product-hub .input,
.product-hub select,
.product-hub textarea {
    background: #081a33;
    border-color: #1f3d6a;
    color: #e6f0ff;
}

.product-hub .input::placeholder {
    color: #6f86a8;
}

.product-hub-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.product-kpis {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.product-kpi-card {
    background: #0d2142;
    border: 1px solid #1a406f;
    border-radius: 12px;
    padding: 12px;
}

.product-kpi-card strong {
    font-size: 34px;
    display: block;
    margin: 4px 0;
    color: #f8fbff;
}

.product-kpi-card span {
    color: #76d99a;
    font-size: 13px;
}

.product-kpi-card.warning span {
    color: #ffb454;
}

.product-kpi-card.danger span {
    margin-top: 0;
}

.product-kpi-card.success span {
    color: #89f0b3;
}

.product-tabs {
    margin-top: 14px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #1a406f;
    background: #081a33;
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.product-tab {
    border: 0;
    background: transparent;
    color: #bfd0ea;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.product-tab span {
    margin-left: 4px;
    display: inline-block;
    min-width: 18px;
    border-radius: 999px;
    background: #0f274b;
    color: #8fb4e3;
    font-size: 12px;
    padding: 1px 6px;
}

.product-tab.is-active {
    background: #2f80ed;
    color: #fff;
}

.product-tab.is-active span {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.product-info {
    margin-top: 14px;
    border: 1px solid #1a406f;
    border-radius: 12px;
    background: #0b2141;
    padding: 12px;
}

.product-info ul {
    margin: 8px 0 0;
}

.product-list-head {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.product-toolbar {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1fr;
    gap: 8px;
}

.product-stock-filters {
    display: flex;
    gap: 6px;
    background: #081a33;
    border: 1px solid #1f3d6a;
    border-radius: 10px;
    padding: 3px;
}

.stock-chip {
    border: 0;
    background: transparent;
    color: #a9c0e2;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.stock-chip.is-active {
    background: #2f80ed;
    color: #fff;
}

.product-table {
    margin-top: 10px;
}

.product-table th,
.product-table td {
    border-color: #1a406f;
}

.product-table thead {
    background: #0f274b;
}

.product-table tbody tr {
    background: rgba(9, 27, 54, 0.9);
}

.product-table tbody tr:hover {
    background: #0f2f5a;
}

.product-table td,
.product-table th {
    color: #d8e6fb;
}

.badge.success {
    color: #166534;
    background: #dcfce7;
    border-color: #86efac;
}

.pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
    align-items: start;
}

.pos-products {
    min-height: 720px;
}

.pos-topbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pos-search {
    flex: 1;
    min-width: 200px;
}

.pos-category-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.pos-product-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.pos-product-image {
    width: 100%;
    height: 145px;
    object-fit: cover;
    background: #EFF6FF;
    flex-shrink: 0;
}

.pos-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.11);
}

.pos-product-card h4 {
    font-size: 13.5px;
    line-height: 1.4;
    padding: 10px 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
    min-height: 38px;
}

.pos-product-card p {
    font-size: 11.5px;
    padding: 0 12px;
    color: var(--text-soft);
}

.pos-product-card .pos-product-meta {
    margin-top: 4px;
    padding: 4px 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-category-btn.is-active {
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.2);
}

.pos-product-card[hidden] {
    display: none;
}

.pos-cart-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 720px;
}

.pos-cart-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.pos-cart-header-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pos-customer-indicator {
    font-size: 12px;
    color: #4f6479;
}

.pos-cart-count {
    margin: 0;
    font-size: 13px;
    color: #6b7f95;
}

.pos-customer-card {
    border: 1px solid #cddded;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fc 100%);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pos-customer-card-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pos-customer-card-label {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6c8096;
}

.pos-customer-card-main strong {
    font-size: 16px;
    color: #10243b;
}

.pos-customer-card-meta {
    margin: 0;
    font-size: 12px;
    color: #5f7388;
}

.pos-cart-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    overflow: auto;
}

.pos-cart-item {
    border: 1px solid #d3e0ed;
    border-radius: 12px;
    background: #f9fbfe;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "info total"
        "controls controls";
    align-items: flex-start;
    gap: 8px 12px;
}

.pos-cart-item p {
    font-size: 12px;
    color: #5f7388;
    margin: 2px 0 0;
}

.pos-cart-item-info {
    grid-area: info;
    min-width: 0;
}

.pos-cart-item-info strong {
    display: block;
    color: #11263e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-cart-item-total {
    grid-area: total;
    color: #0d8e83;
    font-size: 18px;
    line-height: 1;
}

.pos-cart-item-controls {
    grid-area: controls;
    display: flex;
    gap: 4px;
}

.pos-qty-btn {
    padding: 4px 8px;
    min-width: 30px;
    min-height: 30px;
}

.pos-qty-btn.danger {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fff5f5;
}

.pos-empty {
    border: 1px dashed #bfcedf;
    border-radius: 10px;
    padding: 14px;
    color: var(--text-soft);
    font-size: 13px;
    text-align: center;
    background: #fbfdff;
}

.pos-summary {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-summary .total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 18px;
}

.pos-payment-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pos-checkout-template {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pos-checkout-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pos-checkout-field label {
    font-size: 12px;
    color: #4f6479;
}

.pos-checkout-field-full {
    grid-column: 1 / -1;
}

.required-mark {
    color: #b91c1c;
}

.pos-change-row {
    background: var(--brand-soft);
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.pos-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-actions .btn {
    width: 100%;
}

.pos-payment-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1150;
}

.pos-payment-modal[hidden] {
    display: none;
}

.pos-payment-modal-card {
    width: min(980px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.28);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pos-payment-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pos-payment-modal-head h3 {
    margin-bottom: 4px;
}

.pos-payment-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pos-payment-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pos-payment-card {
    border: 1px solid #cddded;
    border-radius: 12px;
    background: #f8fbff;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pos-payment-order-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-payment-order-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

.pos-payment-order-line span {
    color: var(--text-soft);
}

.pos-payment-summary-foot,
.pos-payment-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-payment-total-row strong {
    color: #2563eb;
    font-size: 26px;
}

.pos-payment-detail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pos-payment-detail-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pos-payment-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pos-payment-method {
    border: 1px solid #bfd3e5;
    border-radius: 10px;
    background: #fff;
    color: #12314f;
    min-height: 48px;
    font-weight: 600;
    cursor: pointer;
}

.pos-payment-method.is-active {
    border-color: var(--brand);
    box-shadow: 0 10px 20px rgba(15, 118, 110, 0.16);
    color: var(--brand-dark);
    background: #ecfdf5;
}

.pos-payment-amount-label {
    font-size: 13px;
    color: var(--text-soft);
}

.pos-payment-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pos-payment-quick-row .btn {
    min-width: 94px;
}

.pos-payment-change-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #a7f3d0;
    background: #d1fae5;
    border-radius: 10px;
    padding: 10px;
}

.pos-payment-change-card strong {
    color: #065f46;
    font-size: 24px;
}

.pos-payment-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pos-payment-modal-actions .btn {
    width: 100%;
}

.order-tracking-layout {
    display: block;
}

.order-tracking-card {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
}

.order-tracking-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}

.order-tracking-head h3 {
    color: var(--text);
    margin-bottom: 4px;
}

.order-tracking-head p {
    color: var(--text-soft);
}

.order-tracking-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.order-currency-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
    font-size: 13px;
}

.order-currency-picker select {
    min-width: 190px;
    background: var(--surface);
    color: var(--text);
    border-color: var(--line);
}

.order-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.order-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.order-kpi-row article {
    border: 1px solid var(--line);
    background: var(--surface-muted);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-kpi-row span {
    font-size: 12px;
    color: var(--text-soft);
}

.order-kpi-row strong {
    font-size: 20px;
    color: var(--text);
}

.order-table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    max-height: 70vh;
}

.order-tracking-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
}

.order-tracking-table thead th {
    background: var(--surface-muted);
    color: var(--text);
    border-bottom: 1px solid var(--line);
    padding: 12px 10px;
    text-align: left;
    font-size: 14px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.order-tracking-table td {
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--line);
    padding: 10px;
    vertical-align: middle;
}

.order-tracking-table tbody tr:hover td {
    background: #f8fbff;
}

.order-product-names {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.6;
    max-width: 180px;
}

.order-product-names div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-product-qty {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    line-height: 1.6;
    text-align: center;
}

.order-product-qty div {
    white-space: nowrap;
}

.order-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-meta strong {
    color: var(--brand);
}

.order-meta span,
.order-meta small {
    color: var(--text-soft);
}

.order-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
    font-size: 12px;
}

.order-status {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}

.order-status.is-open {
    color: #92400e;
    border-color: #fcd34d;
    background: #fffbeb;
}

.order-status.is-completed {
    color: #166534;
    border-color: #86efac;
    background: #f0fdf4;
}

/* Workflow step circular toggles */
.wf-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.wf-step input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.wf-step-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--surface);
    color: transparent;
    font-size: 15px;
    line-height: 1;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}

.wf-step:hover .wf-step-pill {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px #d1fae5;
}

.wf-step input[type="checkbox"]:checked + .wf-step-pill {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 3px #d1fae5;
}

.wf-completed-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.order-action-row {
    display: flex;
    gap: 6px;
}

.receipt-paper-wrap {
    margin-top: 12px;
    padding: 16px;
    border: 1px dashed #c5d2df;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.receipt-paper {
    width: min(420px, 100%);
    margin: 0 auto;
    background: #fff;
    border: 1px solid #d6dee8;
    border-radius: 10px;
    padding: 16px 14px;
    color: #111827;
    font-family: "Space Grotesk", "Outfit", sans-serif;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
}

.receipt-head {
    text-align: center;
    border-bottom: 1px dashed #bcc9d8;
    padding-bottom: 10px;
}

.receipt-shop-name {
    margin: 0;
    font-size: 34px;
    letter-spacing: 0.05em;
}

.receipt-shop-sub {
    margin-top: 2px;
    font-size: 12px;
    color: #475569;
}

.receipt-shop-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #475569;
}

.receipt-meta-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
}

.receipt-meta-grid div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.receipt-meta-grid span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.receipt-meta-grid strong {
    font-size: 12px;
    color: #0f172a;
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 12px;
}

.receipt-table th,
.receipt-table td {
    padding: 6px 4px;
    border-bottom: 1px dashed #d2dce8;
}

.receipt-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}

.receipt-table th:nth-child(1),
.receipt-table td:nth-child(1) {
    width: 9%;
}

.receipt-table th:nth-child(2),
.receipt-table td:nth-child(2) {
    width: 45%;
}

.receipt-table th:nth-child(3),
.receipt-table td:nth-child(3),
.receipt-table th:nth-child(4),
.receipt-table td:nth-child(4),
.receipt-table th:nth-child(5),
.receipt-table td:nth-child(5) {
    text-align: right;
}

.receipt-totals,
.receipt-payments {
    margin-top: 10px;
    border: 1px dashed #c9d6e3;
    border-radius: 8px;
    padding: 8px;
    display: grid;
    gap: 5px;
}

.receipt-totals div,
.receipt-payments div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.receipt-totals div strong,
.receipt-payments div strong {
    color: #0f172a;
}

.receipt-foot {
    margin-top: 12px;
    border-top: 1px dashed #bcc9d8;
    padding-top: 10px;
    text-align: center;
    font-size: 12px;
}

.receipt-copy {
    margin-top: 6px;
    font-size: 11px;
    color: #64748b;
}

#pos-amount-received {
    appearance: textfield;
    -moz-appearance: textfield;
}

#pos-amount-received::-webkit-outer-spin-button,
#pos-amount-received::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.login-body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(56, 189, 154, 0.22), transparent 40%),
        radial-gradient(circle at 88% 8%, rgba(245, 158, 11, 0.2), transparent 34%),
        linear-gradient(120deg, #e6edf4 0%, #edf2f8 48%, #f7f3eb 100%);
}

.login-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.22;
    background-image: linear-gradient(rgba(15, 23, 42, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, black 35%, transparent 85%);
}

.login-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(10px);
    animation: authGlowDrift 10s ease-in-out infinite;
}

.login-glow-left {
    width: 320px;
    height: 320px;
    left: -90px;
    top: 12%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, rgba(16, 185, 129, 0) 68%);
}

.login-glow-right {
    width: 360px;
    height: 360px;
    right: -110px;
    bottom: 8%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.32) 0%, rgba(251, 191, 36, 0) 70%);
    animation-delay: 1.2s;
}

.auth-shell {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: 1.15fr minmax(360px, 430px);
    gap: 22px;
    align-items: stretch;
}

.auth-showcase,
.auth-card {
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.13);
    backdrop-filter: blur(8px);
}

.auth-showcase {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 34px;
    background:
        linear-gradient(155deg, rgba(15, 23, 42, 0.88), rgba(15, 51, 65, 0.84)),
        radial-gradient(circle at 78% 20%, rgba(16, 185, 129, 0.32), transparent 56%);
    color: #f8fafc;
    animation: authPanelReveal 0.65s ease-out both;
}

.auth-showcase .eyebrow {
    color: rgba(226, 232, 240, 0.78);
}

.auth-showcase h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.auth-lead {
    color: rgba(226, 232, 240, 0.9);
    max-width: 56ch;
    line-height: 1.6;
    font-size: 16px;
}

.auth-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-pill-row span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.38);
    background: rgba(15, 23, 42, 0.28);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #dbeafe;
    animation: authTagReveal 0.55s ease both;
}

.auth-pill-row span:nth-child(2) { animation-delay: 0.12s; }
.auth-pill-row span:nth-child(3) { animation-delay: 0.24s; }

.auth-metric-card {
    margin-top: auto;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(226, 232, 240, 0.22);
    border-radius: 18px;
    padding: 18px;
}

.auth-metric-card h2 {
    font-family: 'Sora', sans-serif;
    font-size: 21px;
    color: #ecfeff;
    margin-bottom: 8px;
}

.auth-metric-card p {
    color: rgba(226, 232, 240, 0.86);
    line-height: 1.5;
}

.auth-metric-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.auth-metric-grid div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 12px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.24);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.auth-metric-grid strong {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
}

.auth-metric-grid span {
    font-size: 11px;
    color: rgba(203, 213, 225, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    animation: authPanelReveal 0.7s ease-out both;
    animation-delay: 0.08s;
}

.auth-card-head h2 {
    font-family: 'Sora', sans-serif;
    margin-top: 8px;
    font-size: 29px;
    letter-spacing: -0.02em;
}

.auth-card-head p {
    margin-top: 8px;
    line-height: 1.55;
}

.auth-card label {
    font-weight: 600;
    color: #1e293b;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.auth-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-form input,
.auth-form select {
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #fbfdff;
    padding: 11px 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-form input:focus,
.auth-form select:focus {
    outline: none;
    border-color: #0f766e;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.16);
}

.auth-form .btn {
    margin-top: 4px;
    min-height: 44px;
    border-radius: 12px;
}

.auth-note {
    margin-top: 18px;
    background: #e9fdf5;
    color: #065f46;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #9ce5ce;
    line-height: 1.45;
}

@keyframes authPanelReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authTagReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authGlowDrift {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-12px) scale(1.03);
    }
}

canvas {
    width: 100% !important;
    height: 290px !important;
}

@media (max-width: 1100px) {
    .kpi,
    .span-8,
    .span-7,
    .span-6,
    .span-5,
    .span-4 {
        grid-column: span 12;
    }

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

    .inventory-stock-layout {
        grid-template-columns: 1fr;
    }

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

    .inventory-stock-head-main {
        width: 100%;
    }

    .inventory-stock-head-side {
        width: 100%;
        min-width: 0;
        align-items: stretch;
    }

    .inventory-stock-head-action {
        align-self: flex-start;
    }

    .inventory-stock-legend {
        justify-content: flex-start;
    }

    .inventory-alert-chip-list {
        justify-content: flex-start;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        max-width: 700px;
    }

    .auth-showcase {
        min-height: 0;
    }

    .workspace-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pos-layout {
        grid-template-columns: 1fr;
    }

    .pos-products,
    .pos-cart-panel {
        min-height: auto;
    }

    .pos-payment-modal-body {
        grid-template-columns: 1fr;
    }

    .order-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-kpi-row {
        grid-template-columns: 1fr;
    }

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

    .order-tracking-head-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .app-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 500;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        width: 230px !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.sidebar-open .app-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(15,23,42,0.35);
    }

    .sidebar-link-label,
    .sidebar-brand-text,
    .sidebar-user-info {
        max-width: 200px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .sidebar-collapse-btn { display: none; }

    .app-header {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 8px 14px;
        height: auto;
    }

    .main-panel {
        padding: 14px;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .user-pill {
        width: 100%;
        justify-content: space-between;
    }

    .menu-link {
        font-size: 13px;
        padding: 8px 10px;
    }

    .card {
        padding: 14px;
    }

    .list-row {
        flex-wrap: wrap;
    }

    .workspace-header {
        flex-direction: column;
    }

    .workspace-kpis,
    .workspace-grid {
        grid-template-columns: 1fr;
    }

    .pos-payment-row {
        grid-template-columns: 1fr;
    }

    .pos-checkout-template {
        grid-template-columns: 1fr;
    }

    .pos-cart-item {
        grid-template-columns: 1fr;
    }

    .pos-cart-item-controls {
        justify-content: flex-start;
    }

    .pos-payment-method-grid,
    .pos-payment-modal-actions {
        grid-template-columns: 1fr;
    }

    .receipt-paper {
        padding: 14px 12px;
    }

    .receipt-meta-grid {
        grid-template-columns: 1fr;
    }

    .order-filters {
        grid-template-columns: 1fr;
    }

    .product-form-grid {
        grid-template-columns: 1fr;
    }

    .customer-form-grid {
        grid-template-columns: 1fr;
    }

    .reports-movement-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .login-body {
        padding: 14px;
    }

    .auth-card,
    .auth-showcase {
        padding: 20px;
        border-radius: 18px;
    }

    .auth-showcase h1 {
        font-size: clamp(28px, 9vw, 36px);
    }

    .auth-card-head h2 {
        font-size: 24px;
    }

    .auth-metric-grid {
        grid-template-columns: 1fr;
    }

    .login-glow {
        opacity: 0.7;
    }

    .customer-field-full {
        grid-column: span 1;
    }

    .reports-movement-filters {
        grid-template-columns: 1fr;
    }

    .customer-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: rgba(249, 252, 255, 0.96);
        backdrop-filter: blur(4px);
    }

    .customer-form-actions .btn {
        flex: 1 1 auto;
    }

    .customer-create-modal-card {
        padding: 14px;
    }

    .customer-create-modal-card::before {
        margin: -14px -14px 12px;
    }

    .customer-create-modal-head h4 {
        font-size: 22px;
    }

    .product-list-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-directory-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-directory-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

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

    .customer-crm-filters {
        grid-template-columns: 1fr 1fr;
    }

    .customer-crm-filters input[type="search"] {
        grid-column: span 2;
    }

    .customer-info-grid {
        grid-template-columns: 1fr;
    }

    .customer-info-wide {
        grid-column: span 1;
    }

    .product-list-meta {
        width: 100%;
        justify-content: space-between;
    }

    .product-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-table-wide {
        min-width: 1500px;
    }

    .reports-table-medium {
        min-width: 980px;
    }

    .product-hub-head,
    .product-list-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .inventory-channel-pill {
        width: auto;
        justify-content: flex-start;
    }

    .inventory-channel-page-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .inventory-channel-grid {
        grid-template-columns: 1fr;
    }

    .inventory-channel-partner-row {
        grid-template-columns: 1fr;
    }

    .product-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-head,
    .inventory-list-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .inventory-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-ops-grid {
        grid-template-columns: 1fr;
    }

    .inventory-table-scroll-movement {
        max-height: 280px;
    }

    .inventory-create-grid {
        grid-template-columns: 1fr;
    }

    .inventory-field-wide {
        grid-column: span 1;
    }

    .category-form-grid {
        grid-template-columns: 1fr;
    }

    .inventory-product-image-field {
        align-items: flex-start;
        flex-direction: column;
    }

    .inventory-create-modal {
        padding: 10px;
    }

    .inventory-create-head h4 {
        font-size: 20px;
    }

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

    .permission-action-head {
        display: none;
    }

    .permission-item-matrix {
        grid-template-columns: 1fr;
    }

    .permission-cell {
        justify-items: start;
    }
}

@media print {
    body {
        background: #fff;
    }

    .app-top-sticky,
    .app-header,
    .topbar,
    .grid > .card:not(#receipt-module),
    #receipt-print-btn,
    #receipt-save-digital-btn,
    #receipt-refresh-btn,
    #receipt-invoice-select,
    #receipt-paid-input,
    #receipt-rate-input,
    #receipt-status {
        display: none !important;
    }

    .grid {
        display: block;
    }

    .card {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .receipt-paper-wrap {
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
    }

    .receipt-paper {
        width: 78mm;
        max-width: 78mm;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
    }
}

/* ═══════════════════════════════════════════════
   Product Customizer Module  (#customize-module)
═══════════════════════════════════════════════ */

/* Overlay shared by both customize modals */
.cz-modal-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(11, 20, 26, 0.50);
    z-index: 1400;
    padding: 20px;
    animation: modalFadeIn 0.18s ease-out;
}

/* display:grid above overrides the native hidden attribute — restore it explicitly */
.cz-modal-overlay[hidden] {
    display: none !important;
}

.cz-modal-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border: 1px solid rgba(210, 223, 236, 0.9);
    border-radius: 16px;
    box-shadow: 0 28px 64px rgba(11, 20, 26, 0.28);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: modalSlideUp 0.18s ease-out;
    max-height: 92vh;
    overflow-y: auto;
}

.cz-modal-card-wide {
    max-width: 560px;
}

/* Modal header */
.cz-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cz-modal-head h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text);
}

.cz-modal-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-soft);
}

/* Product row inside modal */
.cz-modal-product-row {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.cz-modal-product-img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    background: #e2e8f0;
    flex-shrink: 0;
}

.cz-modal-product-name {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}

.cz-modal-product-price {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--primary, #2563eb);
    font-weight: 600;
}

.cz-modal-product-sku {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-soft);
}

/* Dynamic option fields */
.cz-modal-options-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cz-option-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cz-option-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.cz-option-field label .cz-required-star {
    color: #ef4444;
    margin-left: 2px;
}

.cz-option-field .input {
    width: 100%;
}

/* Checkbox option group */
.cz-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cz-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.12s, background 0.12s;
}

.cz-checkbox-label:has(input:checked) {
    border-color: var(--primary, #2563eb);
    background: #eff6ff;
    color: var(--primary, #2563eb);
}

/* Notes / free text field */
.cz-modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cz-modal-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.cz-modal-field .input {
    resize: vertical;
}

/* Quantity row */
.cz-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cz-qty-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.cz-qty-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cz-qty-control .input {
    width: 66px;
    text-align: center;
    padding: 6px 8px;
}

/* Error message */
.cz-modal-error {
    color: #ef4444;
    font-size: 13px;
    margin: 0;
}

/* Modal action buttons */
.cz-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* ─── Cart item with customization note ────── */
.cz-cart-item-notes {
    font-size: 12px;
    color: var(--text-soft);
    margin: 2px 0 0;
    font-style: italic;
    line-height: 1.4;
}

/* ─── Confirmation modal order summary ──────── */
.cz-confirm-summary {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
}

.cz-confirm-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
}

.cz-confirm-item-info strong {
    display: block;
    font-size: 14px;
    color: var(--text);
}

.cz-confirm-item-info span {
    font-size: 12px;
    color: var(--text-soft);
    font-style: italic;
}

.cz-confirm-item-price {
    font-weight: 600;
    white-space: nowrap;
    color: var(--text);
}

.cz-confirm-total-row {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

/* ─── Success banner ─────────────────────────── */
.cz-success-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1600;
    animation: modalSlideUp 0.2s ease-out;
}

.cz-success-inner {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #16a34a;
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    box-shadow: 0 8px 28px rgba(22, 163, 74, 0.30);
}

/* ═══════════════════════════════════════════════
   Purchase Orders Module  (#po-module)
═══════════════════════════════════════════════ */

.po-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* KPI Row */
.po-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.po-kpi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.po-kpi-card p {
    margin: 0;
    font-size: 12px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.po-kpi-card strong {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
}

.po-kpi-draft strong   { color: #64748b; }
.po-kpi-sent strong    { color: #2563eb; }
.po-kpi-received strong{ color: #16a34a; }
.po-kpi-value strong   { color: #0891b2; }

/* Toolbar */
.po-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
}

.po-toolbar-left {
    display: flex;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}

.po-toolbar-left .input {
    min-width: 200px;
    flex: 1;
}

.po-toolbar-right {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Table */
.po-table-wrap {
    overflow: auto;
    padding: 0;
    max-height: 70vh;
}

.po-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.po-table th {
    background: #f8fafc;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
}

.po-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    vertical-align: middle;
}

.po-table tbody tr:last-child td {
    border-bottom: 0;
}

.po-table tbody tr:hover td {
    background: #f8fafc;
}

.po-table-empty {
    text-align: center;
    color: var(--text-soft);
    padding: 32px !important;
    font-size: 14px;
}

/* Status badge */
.po-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.po-status-draft     { background:#f1f5f9; color:#475569; }
.po-status-sent      { background:#dbeafe; color:#1d4ed8; }
.po-status-partial   { background:#fef3c7; color:#b45309; }
.po-status-received  { background:#dcfce7; color:#15803d; }
.po-status-cancelled { background:#fee2e2; color:#b91c1c; }

/* Modal Overlay */
.po-modal-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(11, 20, 26, 0.50);
    z-index: 1400;
    padding: 20px;
    animation: modalFadeIn 0.18s ease-out;
}

.po-modal-overlay[hidden] {
    display: none !important;
}

.po-modal-card {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border: 1px solid rgba(210, 223, 236, 0.9);
    border-radius: 16px;
    box-shadow: 0 28px 64px rgba(11, 20, 26, 0.28);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: modalSlideUp 0.18s ease-out;
    max-height: 92vh;
    overflow-y: auto;
}

.po-modal-card-lg {
    max-width: 780px;
}

.po-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.po-modal-head h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text);
}

.po-modal-subtitle {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--text-soft);
}

/* Form grid inside modal */
.po-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.po-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.po-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.po-field-full {
    grid-column: 1 / -1;
}

/* Product search autocomplete */
.po-item-adder {
    position: relative;
}

.po-item-search-wrap {
    position: relative;
}

.po-item-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(11,20,26,.14);
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
}

.po-item-suggestions[hidden] {
    display: none !important;
}

.po-suggestion-item {
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.po-suggestion-item:last-child { border-bottom: 0; }
.po-suggestion-item:hover { background: #f1f5f9; }

.po-suggestion-item .po-sug-sku {
    font-size: 11px;
    color: var(--text-soft);
}

/* Line items table inside modal */
.po-line-items-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    max-height: 60vh;
}

.po-line-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.po-line-table th {
    background: #f8fafc;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
}

.po-line-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.po-line-table tbody tr:last-child td {
    border-bottom: 0;
}

.po-line-table .input {
    padding: 5px 8px;
    font-size: 13px;
}

/* Totals row */
.po-totals-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.po-totals-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 13px;
    color: var(--text-soft);
}

.po-totals-summary strong {
    color: var(--text);
}

.po-grand-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text) !important;
}

.po-grand-label strong {
    color: var(--primary, #2563eb) !important;
}

/* View meta block */
.po-view-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
}

.po-view-meta div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.po-view-meta span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-soft);
}

.po-view-meta strong {
    color: var(--text);
}

/* Error */
.po-modal-error {
    color: #ef4444;
    font-size: 13px;
    margin: 0;
}

/* Modal actions */
.po-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Table action buttons */
.po-table-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pre-Orders Module
═══════════════════════════════════════════════════════════════════════════ */
.preo-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* KPI */
.preo-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.preo-kpi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.preo-kpi-card p {
    margin: 0;
    font-size: 12px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.preo-kpi-card strong {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}

.preo-kpi-pending   strong { color: #d97706; }
.preo-kpi-confirmed strong { color: #2563eb; }
.preo-kpi-ready     strong { color: #7c3aed; }
.preo-kpi-delivered strong { color: #16a34a; }
.preo-kpi-value     strong { color: #0891b2; }
.preo-kpi-deposit   strong { color: #db2777; }

/* Toolbar */
.preo-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
}

.preo-toolbar-left  { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; min-width: 0; }
.preo-toolbar-left .input { min-width: 200px; flex: 1; }
.preo-toolbar-right { display: flex; gap: 8px; flex-shrink: 0; }

/* Table */
.preo-table-wrap { overflow-x: auto; padding: 0; }

.preo-table-wrap {
    overflow: auto;
    max-height: 70vh;
}

.preo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.preo-table th {
    background: #f8fafc;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
}

.preo-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    vertical-align: middle;
}

.preo-table tbody tr:last-child td { border-bottom: 0; }
.preo-table tbody tr:hover td      { background: #f8fafc; }

.preo-table-empty {
    text-align: center;
    color: var(--text-soft);
    padding: 32px !important;
    font-size: 14px;
}

.preo-table-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Status badge */
.preo-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.preo-status-pending   { background: #fef3c7; color: #92400e; }
.preo-status-confirmed { background: #dbeafe; color: #1d4ed8; }
.preo-status-ready     { background: #ede9fe; color: #5b21b6; }
.preo-status-delivered { background: #dcfce7; color: #15803d; }
.preo-status-cancelled { background: #fee2e2; color: #b91c1c; }

/* Modal Overlay */
.preo-modal-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(11, 20, 26, 0.50);
    z-index: 1400;
    padding: 20px;
    animation: modalFadeIn 0.18s ease-out;
}

.preo-modal-overlay[hidden] { display: none !important; }

.preo-modal-card {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border: 1px solid rgba(210, 223, 236, 0.9);
    border-radius: 16px;
    box-shadow: 0 28px 64px rgba(11, 20, 26, 0.28);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: modalSlideUp 0.18s ease-out;
    max-height: 92vh;
    overflow-y: auto;
}

.preo-modal-card-lg { max-width: 800px; }

.preo-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.preo-modal-head h3   { margin: 0; font-size: 18px; color: var(--text); }
.preo-modal-subtitle  { margin: 3px 0 0; font-size: 13px; color: var(--text-soft); }

/* Form grid */
.preo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.preo-field           { display: flex; flex-direction: column; gap: 5px; }
.preo-field label     { font-size: 13px; font-weight: 500; color: var(--text); }
.preo-field-full      { grid-column: 1 / -1; }

/* Product search */
.preo-item-adder      { position: relative; }
.preo-item-search-wrap{ position: relative; }

.preo-item-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(11,20,26,.14);
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
}

.preo-item-suggestions[hidden]  { display: none !important; }

.preo-suggestion-item {
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.preo-suggestion-item:last-child { border-bottom: 0; }
.preo-suggestion-item:hover      { background: #f1f5f9; }
.preo-suggestion-item .preo-sug-sku { font-size: 11px; color: var(--text-soft); }

/* Line items table */
.preo-line-items-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.preo-line-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.preo-line-table th {
    background: #f8fafc;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.preo-line-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.preo-line-table tbody tr:last-child td { border-bottom: 0; }

.preo-line-table .input { padding: 5px 8px; font-size: 13px; }

/* Totals row */
.preo-totals-row {
    display: flex;
    justify-content: flex-end;
}

.preo-totals-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    text-align: right;
}

.preo-balance-label strong {
    color: var(--primary, #2563eb) !important;
    font-size: 15px;
}

/* View meta block */
.preo-view-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
}

.preo-view-meta div  { display: flex; flex-direction: column; gap: 2px; }
.preo-view-meta span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
.preo-view-meta strong { color: var(--text); }

/* Error / Actions */
.preo-modal-error   { color: #ef4444; font-size: 13px; margin: 0; }
.preo-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Customer quick-create sections */
.preo-cust-section {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preo-cust-section-title {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-soft);
}


/* ═══════════════════════════════════════════════════════════════
   MODERN POS REDESIGN — v2  (appended overrides & enhancements)
   Desktop Control Hub  |  Senior UX/UI Redesign
═══════════════════════════════════════════════════════════════ */

/* ─── Design tokens (augmented) ──────────────────────────────── */
:root {
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --sidebar-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --card-radius: 18px;
    --card-radius-sm: 14px;
    --shadow-card: 0 2px 6px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.06);
    --shadow-hover: 0 8px 32px rgba(15,23,42,0.13), 0 2px 8px rgba(15,23,42,0.06);
    --shadow-sidebar: 4px 0 24px rgba(15,23,42,0.18);
    --brand-gradient: linear-gradient(135deg, #14B8A6 0%, #0ea5e9 100%);
    --header-height: 64px;
}

/* ─── Smooth selective transitions ──────────────────────────── */
.app-sidebar { transition: width var(--sidebar-transition); }
.sidebar-brand-text,
.sidebar-user-info {
    overflow: hidden;
    max-width: 200px;
    transition: max-width var(--sidebar-transition), opacity 0.18s ease;
}
.sidebar-link-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    max-width: 200px;
    transition: max-width var(--sidebar-transition), opacity 0.18s ease;
}

/* ─── SIDEBAR — enhanced ────────────────────────────────────── */
.app-sidebar {
    width: var(--sidebar-width);
    box-shadow: var(--shadow-sidebar);
    border-right: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    transition: width var(--sidebar-transition);
    position: relative;
}

.app-sidebar .sidebar-nav-items {
    padding: 12px 10px;
    gap: 3px;
}

.sidebar-link {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13.5px;
    gap: 12px;
    transition: background 0.15s, color 0.15s, padding 0.22s;
    position: relative;
}

.sidebar-link i {
    font-size: 16px;
    width: 20px;
    flex-shrink: 0;
}

.sidebar-link.is-active {
    background: rgba(20,184,166,0.18);
    color: #5eead4;
    border-color: rgba(20,184,166,0.25);
}

.sidebar-link.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #14B8A6;
}

/* Brand mark improved */
.sidebar-brand .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #14B8A6, #0d9488);
    box-shadow: 0 4px 12px rgba(20,184,166,0.35);
}

.sidebar-brand {
    padding: 20px 14px 16px;
    gap: 12px;
}

.sidebar-brand-name { font-size: 15px; font-weight: 700; }
.sidebar-brand-sub  { font-size: 11.5px; color: #475569; }

/* Sidebar footer improved */
.sidebar-footer {
    padding: 12px 10px 16px;
    gap: 8px;
}

.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(20,184,166,0.3);
}

.sidebar-user-info strong { font-size: 12.5px; }
.sidebar-user-info span   { font-size: 11px; }

/* Collapse toggle button on sidebar */
.sidebar-collapse-btn {
    position: absolute;
    bottom: 68px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: #1E293B;
    color: #94A3B8;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.15s, color 0.15s, transform 0.22s;
    box-shadow: 0 2px 10px rgba(15,23,42,0.3);
}

.sidebar-collapse-btn:hover {
    background: #14B8A6;
    color: #fff;
    border-color: #14B8A6;
}

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

/* ─── SIDEBAR COLLAPSED STATE ────────────────────────────────── */
.app-shell.sidebar-collapsed .app-sidebar {
    width: var(--sidebar-collapsed-width);
}

.app-shell.sidebar-collapsed .sidebar-brand-text,
.app-shell.sidebar-collapsed .sidebar-link-label,
.app-shell.sidebar-collapsed .sidebar-user-info {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}

.app-shell.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 20px 0 16px;
}

.app-shell.sidebar-collapsed .sidebar-link {
    padding: 10px 0;
    justify-content: center;
    gap: 0;
    width: auto;
}

.app-shell.sidebar-collapsed .sidebar-link:hover {
    background: transparent;
    color: inherit;
}

.app-shell.sidebar-collapsed .sidebar-footer {
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.app-shell.sidebar-collapsed .sidebar-user {
    flex-direction: column;
    gap: 0;
}

.app-shell.sidebar-collapsed .sidebar-logout-btn {
    margin: 0;
}

.app-shell.sidebar-collapsed #sidebar-collapse-icon {
    transform: rotate(180deg);
}

.app-shell.sidebar-collapsed .sidebar-collapse-btn {
    right: 8px;
}

/* ─── HEADER — enhanced ──────────────────────────────────────── */
.app-header {
    height: var(--header-height);
    background: var(--surface);
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}

/* Sidebar toggle in header */
.sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
    background: var(--surface-muted);
    color: var(--text);
    border-color: #c4d0dc;
}

.sidebar-toggle-btn i { font-size: 18px; }

/* Header clock */
.header-clock {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    font-family: 'Space Grotesk', monospace;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.app-page-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

/* User pill improved */
.user-pill {
    border-radius: 12px;
    padding: 6px 10px 6px 6px;
    gap: 10px;
    box-shadow: none;
    border: 1px solid var(--line);
}

.user-pill-info strong { font-size: 13px; }
.user-pill-info span   { font-size: 11.5px; }

/* ─── MAIN PANEL ─────────────────────────────────────────────── */
.main-panel {
    padding: 20px 22px 28px;
    gap: 20px;
}

/* ─── CARDS — improved ───────────────────────────────────────── */
.card {
    border-radius: var(--card-radius);
    border: 1px solid rgba(226,232,240,0.7);
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
}

/* ─── KPI CARDS — modern dashboard style ────────────────────── */
.kpi {
    grid-column: span 3;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.kpi::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(14,165,233,0.06));
    transform: translate(20px, -20px);
    pointer-events: none;
}

.kpi > p {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    font-weight: 600;
    margin: 0;
}

.kpi > strong {
    font-size: 32px;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-top: 6px;
    margin-bottom: 0;
    display: block;
}

.kpi > span {
    font-size: 12px;
    color: var(--text-soft);
}

.kpi.success > strong { color: #059669; }
.kpi.warning > strong { color: #d97706; }
.kpi.danger  > strong { color: #dc2626; }

/* ─── INVENTORY KPI CARDS ────────────────────────────────────── */
.inventory-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.inventory-kpi-card {
    background: var(--surface);
    border: 1px solid rgba(226,232,240,0.7);
    border-radius: var(--card-radius-sm);
    padding: 18px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    overflow: hidden;
}

.inventory-kpi-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 0 0 14px 14px;
    background: var(--brand);
}

.inventory-kpi-card.warning::after { background: var(--warning); }
.inventory-kpi-card.danger::after  { background: var(--danger); }
.inventory-kpi-card.success::after { background: var(--success); }

.inventory-kpi-card > p {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    margin: 0;
}

.inventory-kpi-card > strong {
    font-size: 30px;
    font-weight: 800;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
    margin: 4px 0 0;
    display: block;
}

.inventory-kpi-card > span {
    font-size: 12px;
    color: var(--text-soft);
}

.inventory-kpi-card.warning > strong { color: #d97706; }
.inventory-kpi-card.danger  > strong { color: #dc2626; }
.inventory-kpi-card.success > strong { color: #059669; }

/* ─── TABS — modern pill style ───────────────────────────────── */
.inventory-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 5px;
    overflow-x: auto;
    margin-bottom: 4px;
}

.inventory-tab {
    padding: 8px 16px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.inventory-tab:hover { background: rgba(255,255,255,0.7); color: var(--text); }

.inventory-tab.is-active {
    background: var(--surface);
    color: var(--brand-dark);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15,23,42,0.08);
}

.inventory-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(20,184,166,0.12);
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    padding: 0 5px;
}

/* ─── BADGES — enhanced ──────────────────────────────────────── */
.badge {
    font-size: 11.5px;
    border-radius: 999px;
    padding: 3px 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-in-stock {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
    border: 1px solid #a7f3d0;
}

.badge-low-stock {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-out-of-stock,
.badge.badge-out-of-stock,
.badge.low {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ─── BUTTONS — improved ─────────────────────────────────────── */
.btn {
    border-radius: 11px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.14s, box-shadow 0.14s, background 0.14s;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: linear-gradient(135deg, #14B8A6 0%, #0d9488 100%);
    box-shadow: 0 4px 14px rgba(20,184,166,0.28);
    color: #fff;
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 6px 20px rgba(20,184,166,0.38);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}

.btn-secondary:hover {
    background: var(--surface-muted);
    border-color: #c4d0dc;
    transform: translateY(-1px);
}

.btn-danger,
.btn.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(220,38,38,0.22);
}

.btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(34,197,94,0.22);
}

.btn:active { transform: translateY(0) scale(0.98); }

/* Large / full CTA button */
.btn-cta {
    padding: 14px 24px;
    font-size: 16px;
    border-radius: 14px;
    letter-spacing: 0.02em;
}

/* ─── INPUTS — improved ──────────────────────────────────────── */
.input,
select,
textarea {
    border-radius: 11px;
    border: 1.5px solid var(--line);
    padding: 10px 13px;
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    color: var(--text);
    font-size: 14px;
}

.input:focus,
select:focus,
textarea:focus {
    border-color: #5eead4;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
    outline: none;
}

/* ─── TABLE — improved ───────────────────────────────────────── */
.table th {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
    padding: 12px 14px;
    background: var(--surface-muted);
}

.table td { padding: 11px 14px; }

.table tbody tr:hover { background: #f5f9ff; }

/* ─── POS LAYOUT — improved ──────────────────────────────────── */
.pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 18px;
    align-items: start;
}

.pos-products {
    border-radius: var(--card-radius);
    padding: 20px;
    min-height: calc(100vh - 120px);
}

/* POS Search Bar */
.pos-topbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    align-items: center;
}

.pos-search {
    flex: 1;
    min-width: 200px;
    font-size: 15px;
    padding: 12px 16px 12px 44px;
    border-radius: 13px;
    border: 1.5px solid var(--line);
    background: var(--surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 14px center;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.pos-search:focus {
    border-color: #5eead4;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.10);
    background-color: #fff;
    outline: none;
}

/* Scanner status badge */
.pos-scanner-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 7px 13px;
    border-radius: 999px;
    flex-shrink: 0;
}

.pos-scanner-status::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.25);
    animation: pulseGreen 1.6s infinite;
}

@keyframes pulseGreen {
    0%, 100% { box-shadow: 0 0 0 2px rgba(16,185,129,0.25); }
    50%       { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

/* ─── CATEGORY PILLS ─────────────────────────────────────────── */
.pos-category-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 10px;
    margin-bottom: 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pos-category-row::-webkit-scrollbar { display: none; }

.pos-category-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
    min-height: 40px;
    box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}

.pos-category-btn:hover {
    background: var(--surface-muted);
    border-color: #c4d0dc;
    color: var(--text);
}

.pos-category-btn.is-active {
    background: linear-gradient(135deg, #14B8A6, #0d9488);
    border-color: #14B8A6;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(20,184,166,0.3);
}

/* ─── PRODUCT GRID ────────────────────────────────────────────── */
.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 14px;
}

/* ─── PRODUCT CARD — modern redesign ────────────────────────── */
.pos-product-card {
    border-radius: var(--card-radius);
    border: 1.5px solid rgba(226,232,240,0.8);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease;
    overflow: hidden;
    position: relative;
}

.pos-product-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-hover);
    border-color: rgba(20,184,166,0.2);
}

.pos-product-card:active { transform: translateY(0) scale(0.99); }

/* Product image */
.pos-product-image {
    width: 100%;
    height: 158px;
    object-fit: cover;
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
    flex-shrink: 0;
    transition: opacity 0.18s;
}

.pos-product-card:hover .pos-product-image { opacity: 0.93; }

/* Image placeholder icon */
.pos-product-img-placeholder {
    width: 100%;
    height: 158px;
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #94A3B8;
    font-size: 38px;
}

/* Product body */
.pos-product-body {
    padding: 12px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.pos-product-card h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 13px 0;
    color: var(--text);
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-product-card p {
    font-size: 11.5px;
    padding: 0 13px;
    color: var(--text-soft);
    margin: 0;
}

/* Price */
.pos-product-price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
    padding: 0 13px !important;
}

/* Meta row (stock badge + add btn) */
.pos-product-card .pos-product-meta {
    padding: 6px 13px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 0;
}

/* Stock badges */
.pos-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.pos-stock-badge.in-stock {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.pos-stock-badge.low-stock {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.pos-stock-badge.out-of-stock {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Add button on card */
.pos-add-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #14B8A6, #0d9488);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 10px rgba(20,184,166,0.3);
    flex-shrink: 0;
    font-family: monospace;
    padding: 0;
    padding-bottom: 2px;
}

.pos-add-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 5px 16px rgba(20,184,166,0.45);
}

/* Out of stock card */
.pos-product-card.is-out-of-stock {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.pos-product-card.is-out-of-stock .pos-add-btn {
    background: #94A3B8;
    box-shadow: none;
}

.pos-product-card.is-out-of-stock .pos-product-image {
    filter: grayscale(0.5);
}

/* Out of stock overlay badge */
.pos-oos-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(220,38,38,0.9);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pos-low-stock-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(245,158,11,0.9);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── EMPTY STATE — improved ─────────────────────────────────── */
.pos-empty {
    border: 1.5px dashed #c8d8e8;
    border-radius: var(--card-radius-sm);
    padding: 36px 20px;
    text-align: center;
    background: var(--surface-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pos-empty-icon {
    font-size: 42px;
    color: #CBD5E1;
    line-height: 1;
    margin-bottom: 4px;
}

.pos-empty h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.pos-empty p {
    font-size: 13px;
    color: var(--text-soft);
    margin: 0;
    max-width: 220px;
}

/* ─── CHECKOUT CART PANEL — major redesign ───────────────────── */
.pos-cart-panel {
    border-radius: var(--card-radius);
    padding: 18px;
    gap: 14px;
    min-height: calc(100vh - 120px);
    border: 1.5px solid rgba(226,232,240,0.7);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
}

/* Cart Header */
.pos-cart-header {
    padding-bottom: 12px;
    border-bottom: 1.5px solid var(--line);
    flex-shrink: 0;
}

.pos-cart-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 2px;
}

.pos-cart-count {
    font-size: 12.5px;
    color: var(--text-soft);
    margin: 0;
}

/* Cart item count badge */
.pos-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Customer section */
.pos-customer-card {
    border: 1.5px solid #c4d4e8;
    border-radius: 13px;
    background: linear-gradient(135deg, #f8fbff 0%, #f3f9ff 100%);
    padding: 12px 13px;
    gap: 10px;
}

.pos-customer-card-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-soft);
    margin: 0;
}

.pos-customer-card-main strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.pos-customer-card .btn {
    padding: 8px 14px;
    font-size: 12.5px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Origin dropdown */
.pos-checkout-field label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
}

/* Cart items list */
.pos-cart-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
    padding-right: 2px;
}

.pos-cart-items::-webkit-scrollbar { width: 5px; }
.pos-cart-items::-webkit-scrollbar-track { background: transparent; }
.pos-cart-items::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }

/* Cart item row */
.pos-cart-item {
    background: #F8FAFC;
    border: 1.5px solid #E8EFF8;
    border-radius: 13px;
    padding: 11px 12px;
    gap: 8px 10px;
    transition: border-color 0.15s;
}

.pos-cart-item:hover { border-color: #c4d4e8; }

.pos-cart-item-info strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.pos-cart-item p {
    font-size: 12px;
    color: var(--text-soft);
    margin: 2px 0 0;
}

.pos-cart-item-total {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--brand-dark) !important;
    font-family: 'Space Grotesk', sans-serif;
}

/* Quantity stepper */
.pos-cart-item-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pos-qty-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s;
    line-height: 1;
}

.pos-qty-btn:hover:not(.danger) {
    background: var(--surface-muted);
    border-color: #c4d0dc;
}

.pos-qty-btn.danger {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fff5f5;
}

.pos-qty-btn.danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

/* Qty value display */
.pos-qty-val {
    min-width: 34px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
}

/* ─── CART SUMMARY ────────────────────────────────────────────── */
.pos-summary {
    border: 1.5px solid var(--line);
    border-radius: 13px;
    background: var(--surface-muted);
    padding: 13px 14px;
    flex-shrink: 0;
}

.pos-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    padding: 3px 0;
}

.pos-summary div span { color: var(--text-soft); }
.pos-summary div strong { font-weight: 600; color: var(--text); }

.pos-summary .total {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1.5px solid var(--line);
}

.pos-summary .total span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.pos-summary .total strong {
    font-size: 26px;
    font-weight: 800;
    color: #0f766e;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

/* ─── PAYMENT METHOD BUTTONS ─────────────────────────────────── */
.pos-payment-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 4px;
}

.pos-pay-method-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    border-radius: 11px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 46px;
}

.pos-pay-method-btn:hover {
    background: #F0FDF9;
    border-color: #5eead4;
    color: var(--brand-dark);
}

.pos-pay-method-btn.is-active {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #10b981;
    color: #047857;
    box-shadow: 0 3px 10px rgba(16,185,129,0.15);
}

.pos-pay-method-btn i { font-size: 16px; }

/* ─── COMPLETE SALE BUTTON ────────────────────────────────────── */
.pos-complete-btn {
    width: 100%;
    padding: 15px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 14px;
    background: linear-gradient(135deg, #14B8A6 0%, #0d9488 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.18s;
    box-shadow: 0 6px 20px rgba(20,184,166,0.35);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pos-complete-btn:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 8px 28px rgba(20,184,166,0.45);
    transform: translateY(-1px);
}

.pos-complete-btn:disabled,
.pos-complete-btn[disabled] {
    background: linear-gradient(135deg, #94A3B8, #64748B);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.pos-complete-btn i { font-size: 18px; }

/* Hold / secondary actions */
.pos-secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Change amount */
.pos-change-row {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1.5px solid #a7f3d0;
    color: #065f46;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.pos-change-row span {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #059669;
}

.pos-change-row strong {
    font-size: 22px;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    color: #047857;
    letter-spacing: -0.01em;
}

/* Checkout fields */
.pos-checkout-template {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pos-checkout-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.pos-checkout-field-full { grid-column: 1 / -1; }

/* Actions */
.pos-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 4px;
}

.pos-actions .btn { width: 100%; }

/* ─── PAYMENT MODAL — improved ──────────────────────────────── */
.pos-payment-modal-card {
    border-radius: 20px;
    box-shadow: 0 32px 80px rgba(15,23,42,0.32);
}

.pos-payment-method.is-active {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #10b981;
    color: #047857;
    box-shadow: 0 3px 12px rgba(16,185,129,0.18);
}

.pos-payment-total-row strong {
    color: #0f766e;
    font-size: 30px;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.pos-payment-change-card {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1.5px solid #a7f3d0;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-payment-change-card span {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #059669;
}

.pos-payment-change-card strong {
    font-size: 30px;
    font-weight: 800;
    color: #047857;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.pos-payment-modal-actions {
    display: flex;
    gap: 10px;
    padding-top: 4px;
}

.pos-payment-modal-actions .btn-primary {
    flex: 1;
    padding: 13px 24px;
    font-size: 15px;
}

/* ─── ORDERS MODULE — modern status pipeline ─────────────────── */
.order-status-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 2px 0 4px;
    scrollbar-width: none;
}

.order-status-tabs::-webkit-scrollbar { display: none; }

.order-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}

.order-status-tab:hover { background: var(--surface-muted); color: var(--text); }

.order-status-tab.is-active {
    border-color: var(--brand);
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: var(--brand-dark);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(20,184,166,0.15);
}

.order-status-tab .tab-count {
    background: rgba(20,184,166,0.15);
    color: var(--brand-dark);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
}

/* Order status badges */
.order-badge-new         { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.order-badge-confirmed   { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.order-badge-paid        { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }
.order-badge-preparing   { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }
.order-badge-delivering  { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
.order-badge-completed   { background: #f0fdf4; color: #14532d; border: 1px solid #86efac; }
.order-badge-cancelled   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.order-badge-returned    { background: #fdf4ff; color: #6b21a8; border: 1px solid #d8b4fe; }

/* Payment status */
.pay-badge-paid    { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }
.pay-badge-unpaid  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.pay-badge-partial { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

/* Platform source badges */
.src-badge-facebook  { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.src-badge-tiktok    { background: #fdf4ff; color: #7e22ce; border: 1px solid #d8b4fe; }
.src-badge-website   { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.src-badge-telegram  { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
.src-badge-walkin    { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; }

/* ─── REPORTS — KPI card row ─────────────────────────────────── */
.reports-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.reports-kpi-card {
    background: var(--surface);
    border: 1px solid rgba(226,232,240,0.7);
    border-radius: var(--card-radius);
    padding: 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.reports-kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(14,165,233,0.08));
    color: var(--brand-dark);
}

.reports-kpi-card.warning .reports-kpi-icon { background: rgba(245,158,11,0.10); color: #b45309; }
.reports-kpi-card.danger  .reports-kpi-icon { background: rgba(220,38,38,0.08);  color: #b91c1c; }
.reports-kpi-card.success .reports-kpi-icon { background: rgba(5,150,105,0.10);  color: #047857; }

.reports-kpi-body { flex: 1; min-width: 0; }
.reports-kpi-body p { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-soft); margin: 0; }
.reports-kpi-body strong { display: block; font-size: 28px; font-weight: 800; color: var(--text); font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; margin: 4px 0 2px; }
.reports-kpi-body small { font-size: 12px; color: var(--text-soft); }
.reports-kpi-trend { font-size: 12px; font-weight: 600; }
.reports-kpi-trend.up   { color: #059669; }
.reports-kpi-trend.down { color: #dc2626; }

/* Filter pills for reports */
.reports-filter-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.reports-filter-btn {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.14s;
}

.reports-filter-btn:hover { background: var(--surface-muted); color: var(--text); }

.reports-filter-btn.is-active {
    background: linear-gradient(135deg, #14B8A6, #0d9488);
    border-color: #14B8A6;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(20,184,166,0.25);
}

/* ─── CUSTOMERS MODULE ────────────────────────────────────────── */
.customer-crm-panel {
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
}

.customer-crm-head h3 {
    font-size: 26px;
    letter-spacing: -0.02em;
}

.customer-type-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ─── PURCHASE ORDERS & PRE-ORDERS MODULE ────────────────────── */
.po-status-draft      { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; }
.po-status-ordered    { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.po-status-partial    { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }
.po-status-received   { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }
.po-status-cancelled  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.preo-status-new          { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.preo-status-deposit-paid { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.preo-status-waiting      { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.preo-status-ready        { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.preo-status-completed    { background: #f0fdf4; color: #14532d; border: 1px solid #6ee7b7; }
.preo-status-cancelled    { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ─── TOAST NOTIFICATIONS — improved ────────────────────────── */
.app-notification {
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 10px 28px rgba(15,23,42,0.15);
}

.app-notification-success {
    border-color: #6ee7b7;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #064e3b;
}

.app-notification-warning {
    border-color: #fcd34d;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #78350f;
}

.app-notification-error {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #fff1f2, #fee2e2);
    color: #7f1d1d;
}

/* ─── MISC COMPONENTS ─────────────────────────────────────────── */

/* Confirmation modal */
.app-modal {
    border-radius: 18px;
    box-shadow: 0 28px 64px rgba(11,20,26,0.3);
}

/* Inventory table image thumb */
.inv-product-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface-muted);
    flex-shrink: 0;
}

/* Improved filter bar */
.inventory-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--line);
    margin-bottom: 4px;
}

.inventory-head h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}

.inventory-head p {
    font-size: 13px;
    color: var(--text-soft);
    margin: 0;
}

/* Accounts/Reports section card */
.chart-card {
    background: var(--surface);
    border: 1px solid rgba(226,232,240,0.7);
    border-radius: var(--card-radius);
    padding: 20px;
    box-shadow: var(--shadow-card);
}

.chart-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
}

/* ─── RESPONSIVE — collapsible on small desktop ──────────────── */
@media (max-width: 1200px) {
    .pos-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
    .pos-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    }
}

@media (max-width: 1024px) {
    .pos-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
    .inventory-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .reports-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .app-shell.sidebar-collapsed .app-sidebar {
        width: 0;
        overflow: hidden;
        border: none;
    }
    .pos-layout {
        grid-template-columns: 1fr;
    }
    .pos-cart-panel {
        position: static;
    }
}

/* ─── ACCESSIBILITY & FOCUS ──────────────────────────────────── */
:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: 2px;
}

button:focus-visible, a:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: 2px;
    border-radius: 8px;
}


/* ── ORDERS MODULE — KPI row improved ───────────────────────── */
.order-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.order-kpi-row article {
    background: var(--surface);
    border: 1px solid rgba(226,232,240,0.7);
    border-radius: var(--card-radius-sm);
    padding: 18px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-kpi-row span {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
}

.order-kpi-row strong {
    font-size: 30px;
    font-weight: 800;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
    margin-top: 4px;
}

.order-tracking-head {
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--line);
    margin-bottom: 16px;
}

.order-tracking-head h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.order-tracking-card {
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
}

.order-table-wrap {
    border-radius: var(--card-radius-sm);
    border: 1px solid rgba(226,232,240,0.7);
}

/* ── REPORTS — subnav improved ───────────────────────────────── */
.reports-subnav {
    display: flex;
    gap: 5px;
    margin-bottom: 16px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 5px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}

.reports-subnav::-webkit-scrollbar { display: none; }

.reports-subtab {
    border-radius: 10px;
    border: none;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 500;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.reports-subtab:hover {
    background: rgba(255,255,255,0.7);
    color: var(--text);
}

.reports-subtab.is-active {
    background: var(--surface);
    color: var(--brand-dark);
    font-weight: 700;
    border: none;
    box-shadow: 0 2px 8px rgba(15,23,42,0.08);
}

/* ── WORKSPACE / SETTINGS — clean card style ─────────────────── */
.workspace-board,
.settings-panel {
    border-radius: var(--card-radius);
}

/* ── PURCHASE ORDERS — improved head ─────────────────────────── */
.po-head,
.preo-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--line);
    margin-bottom: 16px;
}

/* ── MISC scrollbar polish ───────────────────────────────────── */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* ── POS product card — new element classes ─────────────────── */
.pos-product-img-placeholder {
    width: 100%;
    height: 158px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #94a3b8;
    flex-shrink: 0;
}

.pos-product-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-dark);
    padding: 4px 12px 0;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.01em;
}

/* ── POS empty state icon size ───────────────────────────────── */
.pos-empty-icon {
    font-size: 48px;
    color: #94a3b8;
    display: block;
    margin-bottom: 12px;
}

/* ── KBD hint in buttons ─────────────────────────────────────── */
.pos-complete-btn kbd,
.pos-btn-hint {
    opacity: 0.7;
    font-size: 11px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    padding: 1px 5px;
    background: rgba(255,255,255,0.15);
    margin-left: 6px;
    font-family: inherit;
}

/* ── Mobile sidebar drawer backdrop ─────────────────────────── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    z-index: 499;
    backdrop-filter: blur(2px);
}

body.sidebar-open .sidebar-backdrop {
    display: block;
}

/* ── Sidebar typography — clear, no jank ────────────────────── */
.sidebar-link {
    font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.sidebar-link-label {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
}

/* ── Sidebar icons centered when collapsed ───────────────────── */
/* (handled by the main collapsed-state block below) */

/* ── body font quality ───────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Responsive fixes ────────────────────────────────────────── */
@media (max-width: 1100px) {
    .pos-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 900px) {
    .pos-layout {
        grid-template-columns: 1fr;
    }
    .pos-cart-panel {
        position: static;
        min-height: auto;
    }
}

@media (max-width: 760px) {
    .app-header-left {
        gap: 10px;
    }
    .header-clock {
        display: none;
    }
    .user-pill-info {
        display: none;
    }
    .pos-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .order-filters {
        grid-template-columns: 1fr 1fr;
    }
    .order-kpi-row {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   ORDERS TABLE — TYPOGRAPHY & ALIGNMENT FIX
   Khmer requires larger base size (16px+), English normal
═══════════════════════════════════════════════════════════ */

/* Table base */
.order-tracking-table {
    font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Header row */
.order-tracking-table thead th {
    padding: 12px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    background: var(--surface-muted);
    white-space: nowrap;
    vertical-align: middle;
}

/* Body cells */
.order-tracking-table td {
    padding: 14px 12px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.5;
}

/* Row number */
.order-tracking-table td:first-child {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    text-align: center;
    width: 36px;
}

/* ── Product names: Khmer needs 15px minimum ── */
.order-product-names {
    font-size: 15px;
    font-weight: 500;
    font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
    color: var(--text);
    line-height: 1.75;
    max-width: 220px;
}

.order-product-names div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 0;
}

/* ── Qty column */
.order-product-qty {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-dark);
    line-height: 1.75;
    text-align: center;
    min-width: 32px;
}

.order-product-qty div {
    padding: 1px 0;
}

/* ── Order meta (invoice / ORD no / date) */
.order-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 180px;
}

.order-meta strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -0.01em;
}

.order-meta span {
    font-size: 12.5px;
    color: var(--text-soft);
}

.order-meta small {
    font-size: 11.5px;
    color: var(--text-soft);
}

/* ── Customer, Origin */
.order-tracking-table td:nth-child(5) {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
    min-width: 120px;
}

.order-tracking-table td:nth-child(6),
.order-tracking-table td:nth-child(7) {
    font-size: 13px;
    color: var(--text-soft);
    white-space: nowrap;
    font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
}

/* ── Channel (Khmer) */
.order-tracking-table td:nth-child(7) {
    font-size: 15px;
    font-weight: 500;
}

/* ── Payment pill */
.order-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
    line-height: 1.3;
}

/* ── Amount */
.order-tracking-table td:nth-child(9) strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

/* ── Status badge */
.order-status {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.order-status.is-open {
    color: #92400e;
    border: 1px solid #fcd34d;
    background: #fffbeb;
}

.order-status.is-completed {
    color: #166534;
    border: 1px solid #86efac;
    background: #f0fdf4;
}

/* ── Workflow step checkboxes */
.wf-step {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.wf-step-pill {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    display: grid;
    place-items: center;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
    color: transparent;
}

.wf-step input:checked + .wf-step-pill {
    border-color: #14B8A6;
    background: #14B8A6;
    color: #fff;
}

.wf-completed-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* ── Print Receipt button */
.order-action-row .btn {
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR — COMPLETE REDESIGN v3  (overrides everything above)
   Clean dark navy, smooth icons, clear active state, perfect type
════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    --sb-width:        240px;
    --sb-mini:          64px;
    --sb-bg:           #0F172A;
    --sb-border:       rgba(255,255,255,0.06);
    --sb-text:         #94A3B8;
    --sb-text-hover:   #E2E8F0;
    --sb-active-bg:    rgba(20,184,166,0.14);
    --sb-active-text:  #5EEAD4;
    --sb-active-bar:   #14B8A6;
    --sb-ease:         0.22s cubic-bezier(0.4,0,0.2,1);
    --sidebar-width:   var(--sb-width);
    --sidebar-collapsed-width: var(--sb-mini);
}

/* ── Shell layout ───────────────────────────────────────────────── */
.app-shell {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100%;
}

/* ── Sidebar base ───────────────────────────────────────────────── */
.app-sidebar {
    width: var(--sb-width) !important;
    min-height: 100vh;
    height: 100vh;
    position: sticky;
    top: 0;
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 200;
    transition: width var(--sb-ease);
    box-shadow: 2px 0 16px rgba(0,0,0,0.20);
    scrollbar-width: none;
}

.app-sidebar::-webkit-scrollbar { display: none; }

/* ── Brand header ────────────────────────────────────────────────── */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 14px 16px;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-brand .brand-mark {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #14B8A6 0%, #0891b2 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(20,184,166,0.40);
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    max-width: 170px;
    transition: max-width var(--sb-ease), opacity var(--sb-ease);
    white-space: nowrap;
}

.sidebar-brand-name {
    font-size: 14px;
    font-weight: 700;
    color: #F1F5F9;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.sidebar-brand-sub {
    font-size: 10.5px;
    color: #475569;
    letter-spacing: 0.03em;
}

/* ── Nav items ───────────────────────────────────────────────────── */
.sidebar-nav-items {
    flex: 1;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.sidebar-nav-items::-webkit-scrollbar { display: none; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    color: var(--sb-text);
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.sidebar-link:active,
.sidebar-link:focus {
    background: transparent;
    color: inherit;
    outline: none;
}

.sidebar-link i {
    font-size: 15px;
    width: 18px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.sidebar-link-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: inherit;
    max-width: 180px;
    transition: max-width var(--sb-ease), opacity var(--sb-ease);
}

/* Active state */
.sidebar-link.is-active {
    background: var(--sb-active-bg);
    color: var(--sb-active-text);
    border-color: rgba(20,184,166,0.20);
    font-weight: 600;
}

.sidebar-link.is-active i {
    color: var(--sb-active-text);
}

/* Active left bar indicator */
.sidebar-link.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    height: 64%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sb-active-bar);
}

/* ── Footer / user area ──────────────────────────────────────────── */
.sidebar-footer {
    padding: 10px 8px 14px;
    border-top: 1px solid var(--sb-border);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-user {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.sidebar-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #14B8A6, #0d9488);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    flex-shrink: 0;
}

.sidebar-user-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    max-width: 140px;
    transition: max-width var(--sb-ease), opacity var(--sb-ease);
}

.sidebar-user-info strong {
    font-size: 12px;
    font-weight: 600;
    color: #E2E8F0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

.sidebar-user-info span {
    font-size: 10.5px;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout-btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 7px;
    color: #475569;
    transition: background 0.14s, color 0.14s;
    text-decoration: none;
    flex-shrink: 0;
}

.sidebar-logout-btn:hover {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}

.sidebar-logout-btn i { font-size: 14px; }

/* ── Collapse button ─────────────────────────────────────────────── */
.sidebar-collapse-btn {
    position: absolute;
    bottom: 72px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: #1E293B;
    color: #64748B;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.sidebar-collapse-btn:hover {
    background: var(--sb-active-bar);
    color: #fff;
    border-color: var(--sb-active-bar);
}

.sidebar-collapse-btn i { font-size: 11px; }

/* ── COLLAPSED STATE ─────────────────────────────────────────────── */
.sidebar-collapsed #app-shell .app-sidebar,
.app-shell.sidebar-collapsed .app-sidebar {
    width: var(--sb-mini) !important;
}

/* Hide text labels */
.sidebar-collapsed #app-shell .sidebar-brand-text,
.sidebar-collapsed #app-shell .sidebar-user-info,
.app-shell.sidebar-collapsed .sidebar-brand-text,
.app-shell.sidebar-collapsed .sidebar-user-info {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}

.sidebar-collapsed #app-shell .sidebar-link-label,
.app-shell.sidebar-collapsed .sidebar-link-label {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}

/* Center brand */
.sidebar-collapsed #app-shell .sidebar-brand,
.app-shell.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 18px 0 16px;
    gap: 0;
}

/* Center nav items — stretch links to full width for reliable clicking */
.sidebar-collapsed #app-shell .sidebar-nav-items,
.app-shell.sidebar-collapsed .sidebar-nav-items {
    padding: 10px 6px;
    align-items: stretch;
}

.sidebar-collapsed #app-shell .sidebar-link,
.app-shell.sidebar-collapsed .sidebar-link {
    padding: 10px 0;
    justify-content: center;
    gap: 0;
    border-radius: 8px;
    width: auto;
    min-height: 40px;
}

/* Hide active bar when collapsed */
.sidebar-collapsed #app-shell .sidebar-link.is-active::before,
.app-shell.sidebar-collapsed .sidebar-link.is-active::before {
    display: none;
}

/* No hover effect in collapsed (icon-only) mode */
.sidebar-collapsed #app-shell .sidebar-link:hover,
.app-shell.sidebar-collapsed .sidebar-link:hover {
    background: transparent;
    color: inherit;
    border-color: transparent;
}

/* Add tooltip support via title attribute (shown by browser default) */
.sidebar-collapsed #app-shell .sidebar-link i,
.app-shell.sidebar-collapsed .sidebar-link i {
    font-size: 17px;
    width: auto;
}

/* Center footer */
.sidebar-collapsed #app-shell .sidebar-footer,
.app-shell.sidebar-collapsed .sidebar-footer {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0 14px;
}

.sidebar-collapsed #app-shell .sidebar-user,
.app-shell.sidebar-collapsed .sidebar-user {
    justify-content: center;
    gap: 0;
}

.sidebar-collapsed #app-shell .sidebar-logout-btn,
.app-shell.sidebar-collapsed .sidebar-logout-btn {
    margin: 0;
}

/* Flip chevron */
.app-shell.sidebar-collapsed #sidebar-collapse-icon {
    transform: rotate(180deg);
}

.app-shell.sidebar-collapsed .sidebar-collapse-btn {
    right: 8px;
}

/* ── HEADER bar ──────────────────────────────────────────────────── */
.app-header {
    height: 60px;
    background: #ffffff;
    padding: 0 20px;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-page-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Space Grotesk', sans-serif;
}

.sidebar-toggle-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid #E2E8F0;
    background: transparent;
    color: #64748B;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.14s, color 0.14s;
}

.sidebar-toggle-btn:hover {
    background: #F1F5F9;
    color: #111827;
}

.sidebar-toggle-btn i { font-size: 18px; }

/* Header clock */
.header-clock {
    font-size: 12.5px;
    font-weight: 600;
    color: #64748B;
    font-family: 'Space Grotesk', monospace;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* User pill in header */
.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 5px 12px 5px 5px;
    border-radius: 10px;
    flex-shrink: 0;
}

.user-pill-avatar {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, #14B8A6, #0d9488);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-pill-info strong {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    display: block;
    line-height: 1.2;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

.user-pill-info span {
    font-size: 11px;
    color: #64748B;
    display: block;
    line-height: 1.1;
}

.user-pill-logout {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: #94A3B8;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.14s, color 0.14s;
    margin-left: 2px;
}

.user-pill-logout:hover {
    background: rgba(239,68,68,0.10);
    color: #ef4444;
}

/* ── Main content area ───────────────────────────────────────────── */
.app-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F4F7FB;
}

.app-top-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #F4F7FB;
}

.main-panel {
    padding: 22px 24px 32px;
    flex: 1;
}

/* ── MOBILE sidebar drawer (≤760px) ─────────────────────────────── */
@media (max-width: 760px) {
    .app-sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 500;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;
        width: 230px !important;
        overflow-y: auto;
    }

    body.sidebar-open .app-sidebar {
        transform: translateX(0);
        box-shadow: 6px 0 40px rgba(15,23,42,0.35);
    }

    /* Force show labels on mobile drawer */
    body.sidebar-open .sidebar-brand-text,
    body.sidebar-open .sidebar-link-label,
    body.sidebar-open .sidebar-user-info {
        max-width: 200px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.sidebar-open .sidebar-link {
        padding: 9px 11px !important;
        justify-content: flex-start !important;
        width: auto !important;
        gap: 10px !important;
    }

    body.sidebar-open .sidebar-link.is-active::before {
        display: block !important;
    }

    .sidebar-collapse-btn { display: none !important; }

    .app-page-title { font-size: 15px; }
    .header-clock { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   STOCK COLUMN MANAGER — UI styles
════════════════════════════════════════════════════════════════ */

/* Modal panel width override */
.stock-col-mgr-panel {
    max-width: 480px;
    width: 100%;
}

/* Column row list */
.stock-col-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}

.stock-col-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid var(--line, #E2E8F0);
    background: var(--surface, #fff);
    transition: background 0.13s;
}

.stock-col-row:hover {
    background: var(--surface-muted, #F8FAFC);
}

/* Toggle label */
.stock-col-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.stock-col-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #14B8A6;
    flex-shrink: 0;
    cursor: pointer;
}

.stock-col-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-col-badge {
    font-size: 10px;
    font-weight: 600;
    color: #64748B;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    padding: 1px 6px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.stock-col-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.stock-col-actions .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    border-radius: 7px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 28px;
}

.stock-col-actions .btn-sm i { font-size: 12px; }

/* Add row */
.stock-col-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line, #E2E8F0);
}

.stock-col-add-row .input {
    flex: 1;
    min-width: 0;
}

.stock-col-add-row .input.input-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.15);
}

/* Footer */
.stock-col-mgr-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line, #E2E8F0);
    display: flex;
    justify-content: flex-end;
}

/* Custom editable cell */
.stock-custom-cell {
    display: block;
    min-width: 80px;
    min-height: 20px;
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-size: 13px;
    color: var(--text, #111827);
    outline: none;
    transition: border-color 0.13s, background 0.13s;
    cursor: text;
}

.stock-custom-cell:focus,
.stock-custom-cell:hover {
    border-color: #14B8A6;
    background: rgba(20,184,166,0.05);
}

.stock-custom-cell:empty::before {
    content: attr(placeholder);
    color: #94A3B8;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   CUSTOM FIELD MANAGER — Add Field modal + custom fields zone
════════════════════════════════════════════════════════════════ */

/* ── Header action group ────────────────────────────────────────── */
.inventory-create-head-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Teal outline button variant */
.btn-outline-teal {
    background: transparent;
    color: #14B8A6;
    border: 1.5px solid #14B8A6;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.14s, color 0.14s;
    white-space: nowrap;
}
.btn-outline-teal:hover {
    background: #14B8A6;
    color: #fff;
}
.btn-outline-teal i { font-size: 14px; }

/* ── Add Field Modal overlay ──────────────────────────────────────── */
.inv-field-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15,23,42,0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.inv-field-modal-overlay[hidden] { display: none; }

.inv-field-modal-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.22);
    width: 100%;
    max-width: 440px;
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 90vh;
    overflow-y: auto;
}

/* Modal header */
.inv-field-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.inv-field-modal-head h4 {
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    letter-spacing: -0.01em;
}

.inv-field-modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #64748B;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.13s, color 0.13s;
}
.inv-field-modal-close:hover { background: #F1F5F9; color: #0F172A; }

/* Form rows */
.inv-field-modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.inv-field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inv-field-row[hidden] { display: none !important; }

.inv-field-row label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.01em;
}

.inv-field-hint {
    font-size: 11.5px;
    font-weight: 400;
    color: #14B8A6;
    margin-left: 4px;
}

.inv-field-row-inline {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.inv-field-row-inline > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.inv-field-sort-input { max-width: 100px; }

.inv-field-active-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    padding-top: 18px;
    white-space: nowrap;
}

.inv-field-active-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #14B8A6;
    cursor: pointer;
}

/* Actions row */
.inv-field-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #E2E8F0;
}

/* ── Custom Fields Zone (in product form) ────────────────────────── */
.inv-custom-fields-zone {
    margin-top: 16px;
    border: 1.5px dashed #CBD5E1;
    border-radius: 12px;
    padding: 14px 16px 16px;
    background: #F8FAFC;
}

.inv-custom-fields-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.inv-custom-fields-header span {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-custom-fields-header i { font-size: 14px; color: #14B8A6; }

/* ── Inline field manager list ───────────────────────────────────── */
.inv-field-manager-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #E2E8F0;
    padding-top: 12px;
}

.inv-field-mgr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #E2E8F0;
}

.inv-field-mgr-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.inv-field-mgr-label {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-field-mgr-meta {
    font-size: 11px;
    color: #64748B;
    font-family: monospace;
}

.inv-field-mgr-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.inv-field-mgr-actions .btn-sm {
    padding: 4px 8px;
    width: 30px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
}
.inv-field-mgr-actions .btn-sm i { font-size: 12px; }

.inv-field-list-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12px;
}

.inv-field-row--filter {
    width: 320px;
    max-width: 100%;
}

.inv-field-empty {
    font-size: 13px;
    color: #94A3B8;
    text-align: center;
    padding: 8px 0;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   ADD FIELD INLINE DRAWER (replaces fixed overlay)
════════════════════════════════════════════════════════════════ */

/* Remove old overlay styles — drawer sits inline inside the panel */
.inv-field-drawer {
    margin: 0 -28px;          /* bleed to panel edges */
    border-top: 2px solid #14B8A6;
    background: #F0FDFA;
    animation: inv-drawer-in 0.22s ease;
    overflow: hidden;
}

.inv-field-drawer--panel {
    margin: 14px 0 0;
    border: 1px solid #d7efe8;
    border-top: 2px solid #14B8A6;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.inv-field-drawer[hidden] { display: none; }

@keyframes inv-drawer-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.inv-field-drawer-inner {
    padding: 20px 28px 20px;
}

/* Two-column grid for the form fields */
.inv-field-drawer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin-bottom: 14px;
}

.inv-field-drawer-grid .inv-field-row--wide,
.inv-field-drawer-grid #inv-field-options-row {
    grid-column: 1 / -1;
}

.inv-field-drawer-grid .inv-field-row-inline {
    grid-column: 1 / -1;
}

/* Hide class for options row in Add Field drawer */
.inv-field-row--hidden { display: none !important; }

/* -- Field manager list inside drawer (no top border — list is at top) */
.inv-field-manager-list { margin-top: 0; border-top: none; padding-top: 0; }

/* -- Section divider between list and add/edit form */
.inv-field-drawer-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748B;
}
.inv-field-drawer-section-head::before,
.inv-field-drawer-section-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}

/* ── Custom Field Chips Bar ─────────────────────────────────────────── */
.inv-cf-chips-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-wrap: wrap;
}
.inv-cf-chips-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.inv-cf-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.inv-cf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 10px;
    border-radius: 20px;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    font-size: 12px;
    line-height: 1.4;
    transition: box-shadow .15s;
}
.inv-cf-chip:hover { box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.inv-cf-chip--inactive { opacity: .5; filter: grayscale(.6); }
.inv-cf-chip-label { font-weight: 600; color: #0369a1; }
.inv-cf-chip-type {
    font-size: 10px;
    color: #64748b;
    background: #fff;
    padding: 1px 5px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
}
.inv-cf-chip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    font-size: 11px;
    transition: background .12s, color .12s;
}
.inv-cf-chip-btn:hover { background: #dbeafe; color: #1d4ed8; }
.inv-cf-chip-del:hover { background: #fee2e2; color: #dc2626; }

/* -- Page fade-in on load + smooth sidebar nav -- */
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.main-panel { animation: pageFadeIn .18s ease both; }