/* ── Exhibition App — Software UI Stylesheet ── */
:root {
    --primary:       #3b6fd4;
    --primary-light: #eef2fb;
    --primary-dark:  #2d57b0;
    --text:          #1e2a3a;
    --text-muted:    #5a6a7e;
    --text-light:    #8a97a8;
    --border:        #dde3ec;
    --bg:            #f0f2f5;
    --surface:       #ffffff;
    --chrome:        #1e2a3a;
    --chrome-text:   #e8edf5;
    --success:       #2e7d5e;
    --success-bg:    #eaf5f0;
    --success-border:#b2d8c8;
    --warning:       #8a6200;
    --warning-bg:    #fdf6e3;
    --warning-border:#e8d48a;
    --danger:        #b83232;
    --danger-bg:     #fdf0f0;
    --danger-border: #e8b2b2;
    --radius:        8px;
    --radius-sm:     6px;
    --shadow:        0 2px 10px rgba(30,42,58,0.10);
    --shadow-sm:     0 1px 3px rgba(30,42,58,0.07);
    --chrome-h:      44px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    padding-top: calc(var(--chrome-h) + 12px);
    padding-bottom: 12px;
    font-size: 16px;
    color: var(--text);
    line-height: 1.6;
}

/* ── Top Chrome Bar ── */
.app-chrome {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--chrome-h);
    background: var(--chrome);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 1000;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.app-chrome .chrome-brand {
    display: flex;
    align-items: center;
}
.app-chrome .chrome-logo {
    height: 30px;
    width: auto;
    display: block;
}
.app-chrome .chrome-support {
    font-size: 13px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}
.app-chrome .chrome-support strong {
    color: #cbd5e1;
    font-weight: 600;
}

/* ── Main Container ── */
.container {
    background: var(--surface);
    padding: 18px 16px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 580px;
    border: 1px solid var(--border);
    overflow-x: auto;
}

/* Desktop: expand to full width */
@media (min-width: 769px) {
    body {
        font-size: 18px;
    }
    h2 {
        font-size: 24px;
    }
    .container {
        max-width: 1200px;
        padding: 28px 32px 32px;
        border-radius: 12px;
    }
    .site-footer {
        max-width: 1200px;
    }
}

/* ── Footer ── */
.site-footer {
    text-align: center;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-light);
    width: 100%;
    max-width: 580px;
    padding: 0 16px;
}

/* ── Headings ── */
h1, h2 {
    color: var(--text);
    margin-bottom: 16px;
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.2px;
}
h2 { font-size: 20px; }

/* ── Forms ── */
.form-group { margin-bottom: 14px; }

label, .form-group > label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="email"], input[type="time"],
input[type="tel"], textarea, select {
    width: 100%;
    padding: 8px 11px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fafbfc;
    color: var(--text);
    font-family: inherit;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,111,212,0.10);
    background: var(--surface);
}

/* ── Primary Button ── */
.btn {
    display: inline-block;
    padding: 9px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: background 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--primary-dark); box-shadow: 0 3px 10px rgba(59,111,212,0.22); text-decoration: none; }
.btn:active { background: var(--primary-dark); }
.btn:disabled, .btn.btn-loading {
    background: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Flash Messages ── */
.flash {
    background: var(--danger-bg);
    color: var(--danger);
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid var(--danger-border);
    animation: flashIn 0.25s ease;
}
.flash.success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Toast Notifications ── */
.toast-container {
    position: fixed;
    top: calc(var(--chrome-h) + 10px);
    right: 14px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}
.toast {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    animation: toastIn 0.25s ease, toastOut 0.3s ease 4.5s forwards;
    pointer-events: auto;
    max-width: 300px;
}
.toast.toast-success { background: var(--success); color: white; }
.toast.toast-error   { background: var(--danger);  color: white; }
.toast.toast-info    { background: var(--primary);  color: white; }
@keyframes toastIn  { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(-8px); } }

/* ── Links ── */
a { color: var(--primary); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
.link-center { text-align: center; margin-top: 14px; }

/* ── Dashboard Grid Buttons ── */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.dashboard-btn {
    padding: 16px 12px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
    letter-spacing: 0.1px;
}
.dashboard-btn:hover { background: var(--primary-dark); box-shadow: var(--shadow); text-decoration: none; }

/* ── Back Link (shown as a button: "← Back to Dashboard", "← Back to Customers", …) ── */
.back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    margin: 22px auto 0;
    padding: 10px 22px;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.back-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.back-link:active { transform: translateY(1px); }
.back-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* back-btn — same visual weight as back-link but pill-shaped */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: #f1f5f9;
    color: #374151;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
    cursor: pointer;
}
.back-btn:hover { background: #e2e8f0; border-color: #9ca3af; text-decoration: none; color: #111827; box-shadow: 0 2px 6px rgba(0,0,0,.08); }

/* wrapper that centres a back-btn */
.back-btn-wrap {
    text-align: center;
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
table th {
    background: #f1f5f9;
    color: #374151;
    padding: 9px 10px;
    font-weight: 700;
    white-space: nowrap;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
    text-align: center;
}
table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eef0f4;
    font-size: 15px;
    color: var(--text);
    text-align: center;
}
table tr:last-child td { border-bottom: none; }
table tr:hover td { background: #f8fafc; }

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    max-width: 100%;
}
.table-wrap table { margin-top: 0; min-width: 400px; }

/* ── Filter Bar ── */
.filter-bar {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8f9fc;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.filter-bar form { width: 100%; }
.filter-bar small {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Stat Grid ── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.stat-card {
    padding: 12px;
    border-radius: var(--radius);
    text-align: center;
    font-size: 15px;
    background: #f8f9fc;
    border: 1px solid var(--border);
}
.stat-card strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-weight: 600;
}
.stat-card span { font-size: 24px; font-weight: 700; color: var(--text); }

/* ── Pagination ── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 12px; font-size: 15px; }
.pagination a, .pagination span { padding: 5px 11px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; }
.pagination a { background: #eef0f4; color: var(--text-muted); }
.pagination a:hover { background: var(--primary); color: white; text-decoration: none; }
.pagination .current { background: var(--primary); color: white; }
.pagination .info { color: var(--text-light); font-size: 13px; }

/* ── Inline Action Buttons ── */
.btn-edit   { padding: 3px 9px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; }
.btn-delete { padding: 3px 9px; background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: none; cursor: pointer; }
.btn-action { padding: 3px 9px; background: var(--success-bg); color: var(--success); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; }

/* ── Filter / Add Buttons ── */
.btn-filter   { padding: 7px 14px; background: var(--primary); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 600; }
.btn-clear    { padding: 7px 14px; background: #eef0f4; color: var(--text-muted); border-radius: var(--radius-sm); text-decoration: none; font-size: 14px; font-weight: 500; }
.btn-add      { padding: 7px 14px; background: var(--success); color: white; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; text-decoration: none; }
.btn-whatsapp { padding: 7px 12px; background: #25D366; color: white; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn-export   { padding: 7px 12px; background: #e8edf5; color: #1a2a4a; border: 1px solid #c8d0dc; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.breadcrumb a { display: inline-flex; align-items: center; padding: 3px 10px; background: #f1f5f9; border: 1.5px solid #e2e8f0; border-radius: 6px; font-size: 12px; font-weight: 600; color: #374151; text-decoration: none; transition: background .15s, border-color .15s; }
.breadcrumb a:hover { background: #e2e8f0; border-color: #9ca3af; color: #111827; text-decoration: none; }
.breadcrumb .sep { color: #9ca3af; margin: 0 3px; font-size: 12px; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 14px; padding: 0; }

/* ── Action Bar ── */
.action-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* ── Scrollable Stat Rows ── */
.stat-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 10px;
    padding-bottom: 4px;
}
.stat-scroll::-webkit-scrollbar { height: 3px; }
.stat-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.stat-scroll > div {
    display: flex;
    gap: 8px;
    min-width: max-content;
}
.stat-scroll > div > a,
.stat-scroll > div > div {
    min-width: 100px;
    flex-shrink: 0;
}

/* ── Section Divider ── */
.section-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* ── Status Badges ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }
.badge-blue   { background: var(--primary-light); color: var(--primary); }
.badge-green  { background: var(--success-bg); color: var(--success); }
.badge-yellow { background: var(--warning-bg); color: var(--warning); }
.badge-red    { background: var(--danger-bg); color: var(--danger); }
.badge-gray   { background: #eef0f4; color: var(--text-muted); }

/* ── Empty State ── */
.empty-state { text-align: center; padding: 36px 20px; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 40px; margin-bottom: 10px; opacity: 0.55; }
.empty-state .empty-text { font-size: 15px; margin-bottom: 14px; color: var(--text-light); }
.empty-state .empty-action {
    display: inline-block; padding: 9px 18px;
    background: var(--primary); color: white;
    border-radius: var(--radius-sm); text-decoration: none;
    font-size: 14px; font-weight: 600;
}
.empty-state .empty-action:hover { background: var(--primary-dark); text-decoration: none; }

/* ── Breadcrumb ── */


/* ── Nav-Pattern Components (hub pages) ── */
.pg-header { margin-bottom:16px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pg-header-text { flex:1; min-width:0; }
.pg-header h2 { margin-bottom:2px; text-align:left; }
.pg-sub { font-size:14px; color:var(--text-muted); }

.section-label { font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.7px; margin:16px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--border); }

/* KPI row — auto-wraps on mobile */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)); gap:8px; margin-bottom:16px; }
.kpi-card { display:flex; flex-direction:column; align-items:center; padding:9px 6px; border-radius:var(--radius); text-decoration:none; border:1.5px solid; transition:box-shadow .15s,transform .1s; }
.kpi-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); text-decoration:none; }
.kpi-val { font-size:18px; font-weight:800; line-height:1.1; word-break:break-all; text-align:center; }
.kpi-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-top:2px; text-align:center; }
.kpi-card--blue   { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.kpi-card--green  { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.kpi-card--purple { background:#fdf4ff; border-color:#e9d5ff; color:#7c3aed; }
.kpi-card--red    { background:#fef2f2; border-color:#fecaca; color:#dc2626; }
.kpi-card--amber  { background:#fffbeb; border-color:#fde68a; color:#d97706; }
.kpi-card--teal   { background:#f0fdfa; border-color:#6ee7b7; color:#059669; }
.kpi-card--muted  { background:#f8fafc; border-color:#e2e8f0; color:#475569; }
.kpi-card--silver { background:#f1f5f9; border-color:#cbd5e1; color:#475569; }
.kpi-card--gold   { background:#fffbeb; border-color:#fde68a; color:#d97706; }

/* Nav list */
.nav-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:14px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); text-decoration:none; transition:border-color .15s,box-shadow .15s; min-width:0; }
.nav-item:hover { border-color:var(--primary); box-shadow:var(--shadow-sm); text-decoration:none; }
.nav-item__icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.nav-item__icon--blue   { background:#eff6ff; }
.nav-item__icon--green  { background:#f0fdf4; }
.nav-item__icon--purple { background:#fdf4ff; }
.nav-item__icon--orange { background:#fff7ed; }
.nav-item__icon--red    { background:#fff1f2; }
.nav-item__body { flex:1; min-width:0; }
.nav-item__title { font-size:15px; font-weight:700; color:var(--text); white-space:normal; word-break:break-word; }
.nav-item__desc  { font-size:13px; color:var(--text-muted); margin-top:2px; white-space:normal; word-break:break-word; }
.nav-item__arrow { font-size:20px; color:var(--text-muted); font-weight:300; flex-shrink:0; }

/* Info banner */
.info-banner { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--radius); font-size:15px; margin-bottom:14px; flex-wrap:wrap; }
.info-banner--warn { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
.info-banner__link { font-weight:700; color:#92400e; text-decoration:underline; margin-left:auto; }

/* Alert row (CIT) */
.alert-row { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.alert-card { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; text-decoration:none; border:1.5px solid; transition:box-shadow .15s; }
.alert-card:hover { box-shadow:var(--shadow-sm); text-decoration:none; }
.alert-val { font-size:13px; font-weight:800; line-height:1; }
.alert-lbl { font-size:13px; font-weight:700; }
.alert-card--red    { background:#fff1f2; border-color:#fecdd3; color:#dc2626; }
.alert-card--orange { background:#fff7ed; border-color:#fed7aa; color:#ea580c; }

/* Mobile Card Tables ── */
@media (max-width: 520px) {
    .table-wrap table { min-width: unset; }
    .mobile-cards .table-wrap { border: none; box-shadow: none; }
    .mobile-cards table, .mobile-cards thead, .mobile-cards tbody,
    .mobile-cards th, .mobile-cards td, .mobile-cards tr { display: block; }
    .mobile-cards thead { display: none; }
    .mobile-cards tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px;
        margin-bottom: 7px;
        box-shadow: var(--shadow-sm);
    }
    .mobile-cards td {
        padding: 3px 0; border: none; font-size: 14px;
        display: flex; justify-content: space-between;
    }
    .mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600; color: var(--text-muted);
        font-size: 12px; text-transform: uppercase;
    }
    .mobile-cards tr:hover td { background: transparent; }
    .btn-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Toggle Button ── */
.btn-toggle {
    padding: 5px 11px; border-radius: 6px; font-weight: 700;
    font-size: 11px; cursor: pointer; border: 1px solid;
    transition: background 0.15s;
}
.btn-toggle.delivered { background: #dcfce7; border-color: #86efac; color: #059669; }
.btn-toggle.pending   { background: #fef3c7; border-color: #fde68a; color: #d97706; }
.btn-toggle:hover { opacity: 0.85; }

/* ── Mobile Responsive ── */
@media (max-width: 480px) {
    body {
        padding-top: calc(var(--chrome-h) + 8px);
        padding-bottom: 8px;
        font-size: 15px;
    }

    .container {
        padding: 14px 12px 16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    h2 { font-size: 18px; margin-bottom: 12px; }

    /* Forms */
    input[type="text"], input[type="password"], input[type="date"],
    input[type="number"], input[type="email"], input[type="time"],
    input[type="tel"], textarea, select {
        font-size: 16px; /* prevents iOS zoom on focus */
        padding: 10px 11px;
    }
    .btn { padding: 11px 20px; font-size: 16px; }

    /* Tables */
    .table-wrap table { min-width: 480px; }
    table th, table td { padding: 7px 8px; font-size: 14px; }

    /* Filter bar — stack to single column */
    .filter-bar { padding: 10px; }
    .filter-bar form > div[style*="grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Action bar — wrap and full-width buttons */
    .action-bar { flex-direction: column; }
    .action-bar a, .action-bar button {
        width: 100%; text-align: center;
        padding: 10px 14px; font-size: 15px;
    }

    /* Inline action buttons — bigger touch targets */
    .btn-edit, .btn-delete, .btn-action {
        padding: 6px 12px;
        font-size: 14px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }
    .btn-filter, .btn-clear, .btn-add, .btn-whatsapp, .btn-export {
        padding: 9px 14px;
        font-size: 15px;
    }

    /* Stat grid — 2 col on mobile is fine, but shrink padding */
    .stat-grid { gap: 6px; }
    .stat-card { padding: 10px 8px; }
    .stat-card span { font-size: 18px; }

    /* KPI row */
    .kpi-row { gap: 6px; }
    .kpi-card { padding: 8px 4px; }
    .kpi-val { font-size: 17px; }
    .kpi-lbl { font-size: 11px; }

    /* Nav list items */
    .nav-item { padding: 12px; gap: 10px; }
    .nav-item__icon { width: 32px; height: 32px; font-size: 15px; }
    .nav-item__title { font-size: 15px; }
    .nav-item__desc { font-size: 13px; }

    /* pg-header — stack on very small */
    .pg-header { flex-direction: column; gap: 6px; align-items: flex-start; }
    .doc-link { align-self: flex-start; }

    /* Pagination — tighter */
    .pagination { gap: 3px; flex-wrap: wrap; }
    .pagination a, .pagination span { padding: 5px 9px; font-size: 14px; }

    /* Back link */
    .back-link { font-size: 15px; padding: 10px 18px; }

    /* Section label */
    .section-label { margin: 12px 0 6px; }

    /* Alert row */
    .alert-row { gap: 6px; }
    .alert-card { padding: 5px 10px; }

    /* Doc pages */
    .doc-section { gap: 10px; padding: 12px 0; }
    .doc-step-body h3 { font-size: 13px; }
    .doc-step-body p, .doc-step-body ul li { font-size: 12px; }

    /* Chrome support text — hide on very small */
    .app-chrome .chrome-support { display: none; }
}

/* ── How It Works Doc Pages ── */
.doc-link { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#7c3aed; background:#fdf4ff; border:1px solid #e9d5ff; padding:4px 12px; border-radius:20px; text-decoration:none; white-space:nowrap; flex-shrink:0; margin-top:4px; }
.doc-link:hover { background:#ede9fe; text-decoration:none; }
.doc-body { display:flex; flex-direction:column; gap:0; }
.doc-section { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.doc-section:last-of-type { border-bottom:none; }
.doc-step-num { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#4a6cf7,#7c3aed); color:white; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.doc-step-body { flex:1; min-width:0; }
.doc-step-body h3 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.doc-step-body p { font-size: 15px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.6; }
.doc-step-body ul { padding-left: 16px; }
.doc-step-body ul li { font-size: 14px; color: #444; padding: 3px 0; line-height: 1.5; }
.doc-tip { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); padding: 12px 14px; font-size: 14px; color: #92400e; margin-top: 16px; line-height: 1.6; }


/* ══════════════════════════════════════════════════════
   Collapsible Card Component (reusable across views)
   ══════════════════════════════════════════════════════ */
.cc-card { background:var(--surface); border-radius:12px; margin-bottom:10px; border:1.5px solid var(--border); overflow:hidden; transition:box-shadow 0.2s; }
.cc-card:hover { box-shadow:0 4px 12px rgba(30,42,58,0.06); }
.cc-card.cc-warn { border-color:#fbbf24; }
.cc-card.cc-danger { border-color:var(--danger-border); background:var(--danger-bg); }

.cc-head { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; }
.cc-head:hover { background:var(--bg); }
.cc-id { font-size:13px; font-weight:700; color:var(--primary); background:var(--primary-light); padding:3px 8px; border-radius:4px; white-space:nowrap; }
.cc-title { font-size:16px; font-weight:600; line-height:1.3; }
.cc-title small { display:block; font-size:13px; color:var(--text-light); font-weight:400; margin-top:2px; }
.cc-badge { font-size:12px; font-weight:700; padding:4px 10px; border-radius:12px; text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap; }
.cc-badge-green { background:var(--success-bg); color:var(--success); }
.cc-badge-amber { background:var(--warning-bg); color:var(--warning); }
.cc-badge-blue { background:var(--primary-light); color:var(--primary); }
.cc-badge-red { background:var(--danger-bg); color:var(--danger); }
.cc-badge-grey { background:#f1f5f9; color:#64748b; }
.cc-badge-purple { background:#ede9fe; color:#5b21b6; }
.cc-chevron { font-size:18px; color:var(--text-light); transition:transform 0.2s; user-select:none; }
.cc-card.open .cc-chevron { transform:rotate(180deg); }

.cc-body { display:none; padding:0 14px 14px; border-top:1px solid var(--bg); }
.cc-card.open .cc-body { display:block; }

.cc-section { margin-top:12px; }
.cc-section-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); margin-bottom:6px; }
.cc-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cc-meta-item { background:var(--bg); padding:8px 10px; border-radius:8px; }
.cc-meta-item .cc-label { font-size:12px; color:var(--text-muted); font-weight:600; }
.cc-meta-item .cc-value { font-size:15px; font-weight:600; margin-top:2px; }

.cc-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.cc-btn { padding:7px 14px; border-radius:8px; font-size:14px; font-weight:600; border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.cc-btn:disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }
.cc-btn-primary { background:var(--primary); color:#fff; }
.cc-btn-green { background:#25d366; color:#fff; }
.cc-btn-amber { background:var(--warning-bg); color:var(--warning); border:1px solid var(--warning-border); }
.cc-btn-edit { background:var(--primary-light); color:var(--primary); border:1px solid #c8d8f5; }
.cc-btn-delete { background:var(--danger-bg); color:var(--danger); }

@media (max-width:600px) {
  .cc-meta { grid-template-columns:1fr 1fr; }
  .cc-head { grid-template-columns:1fr auto; gap:6px; }
  .cc-id { grid-column:1; }
  .cc-title { grid-column:1 / -1; }
}

/* Desktop card enhancements */
@media (min-width:769px) {
  .cc-meta { grid-template-columns:repeat(4,1fr); }
  .cc-head { padding:14px 20px; gap:14px; }
  .cc-body { padding:0 20px 20px; }
  .cc-title { font-size:18px; }
  .cc-title small { font-size:14px; }
  .cc-badge { font-size:13px; }
  .cc-meta-item .cc-value { font-size:16px; }
  .cc-section-title { font-size:13px; }
  .cc-btn { font-size:15px; padding:8px 16px; }
}


/* ══════════════════════════════════════════════════════
   Dark Mode
   ══════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --primary:       #818cf8;
  --primary-light: #1e1b4b;
  --primary-dark:  #a5b4fc;
  --text:          #e2e8f0;
  --text-muted:    #94a3b8;
  --text-light:    #64748b;
  --border:        #334155;
  --bg:            #0f172a;
  --surface:       #1e293b;
  --chrome:        #0f172a;
  --chrome-text:   #e2e8f0;
  --success:       #4ade80;
  --success-bg:    #052e16;
  --success-border:#166534;
  --warning:       #fbbf24;
  --warning-bg:    #422006;
  --warning-border:#92400e;
  --danger:        #f87171;
  --danger-bg:     #450a0a;
  --danger-border: #991b1b;
  --shadow:        0 2px 10px rgba(0,0,0,0.4);
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .app-chrome { background: #020617; border-bottom: 1px solid #1e293b; }
[data-theme="dark"] .site-footer { color: #475569; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: #0f172a; color: #e2e8f0; border-color: #334155;
}
[data-theme="dark"] .flash { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .flash.success { background: #052e16; border-color: #166534; color: #4ade80; }
[data-theme="dark"] table th { background: #1e293b; color: #cbd5e1; border-bottom-color: #334155; }
[data-theme="dark"] table td { border-color: #334155; }
[data-theme="dark"] table tr:hover td { background: #0f172a; }
[data-theme="dark"] .cc-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .cc-head:hover { background: #0f172a; }
[data-theme="dark"] .cc-meta-item { background: #0f172a; }

/* Theme toggle button */
.theme-toggle {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer; font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: 6px;
  color: #cbd5e1; transition: background 0.2s;
  white-space: nowrap;
}
.theme-toggle:hover { background: rgba(255,255,255,0.2); color: #fff; }
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }
[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }

/* ══════════════════════════════════════════════════════
   Global Search
   ══════════════════════════════════════════════════════ */
.chrome-search { flex: 1; max-width: 360px; position: relative; margin: 0 16px; }
.chrome-search input {
  width: 100%; padding: 7px 12px; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.12);
  font-size: 13px; color: #f1f5f9; outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.chrome-search input::placeholder { color: #94a3b8; }
.chrome-search input:focus {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.chrome-right { display: flex; align-items: center; gap: 12px; }

.search-results {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 4px; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  max-height: 360px; overflow-y: auto; z-index: 2000;
}
.sr-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--bg); }
.sr-badge {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sr-customer .sr-badge { background: #6366f1; }
.sr-order .sr-badge    { background: #8b5cf6; }
.sr-inventory .sr-badge{ background: #f59e0b; }
.sr-transaction .sr-badge { background: #10b981; }
.sr-vc .sr-badge       { background: #0ea5e9; }
.sr-cit .sr-badge      { background: #14b8a6; }
.sr-mfg .sr-badge      { background: #a855f7; }
.sr-invoice .sr-badge  { background: #1e3a8a; }
.sr-birthday .sr-badge { background: #ec4899; }
.sr-body { flex: 1; min-width: 0; }
.sr-body strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-body small { font-size: 13px; color: var(--text-muted); }
.sr-wa {
  background: #25d366; color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 12px; text-decoration: none; flex-shrink: 0;
}
.sr-wa:hover { background: #128c7e; }
.sr-empty { padding: 14px; text-align: center; font-size: 15px; color: var(--text-muted); }

@media (max-width: 600px) {
  .chrome-search { max-width: none; margin: 0 8px; }
  .chrome-search input { font-size: 12px; padding: 6px 10px; }
  .chrome-support { display: none; }
}

/* ══════════════════════════════════════════════════════
   WhatsApp One-Tap Helper
   ══════════════════════════════════════════════════════ */
.wa-tap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #25d366; color: #fff; font-size: 12px; font-weight: 700;
  text-decoration: none; margin-left: 4px; vertical-align: middle;
  line-height: 1;
}
.wa-tap:hover { background: #128c7e; transform: scale(1.1); }

/* ══════════════════════════════════════════════════════
   Color-Coded Feature Sections (breadcrumbs + headers)
   ══════════════════════════════════════════════════════ */


/* Feature color accents (applied via class on container or h2) */
.feat-customers  { --feat-color: #6366f1; }
.feat-orders     { --feat-color: #8b5cf6; }
.feat-inventory  { --feat-color: #f59e0b; }
.feat-transactions { --feat-color: #10b981; }
.feat-vc         { --feat-color: #0ea5e9; }
.feat-broadcast  { --feat-color: #ec4899; }
.feat-exhibition { --feat-color: #ef4444; }
.feat-cit        { --feat-color: #14b8a6; }
.feat-mfg        { --feat-color: #a855f7; }
.feat-diary      { --feat-color: #78716c; }

[class*="feat-"] h2,
[class*="feat-"] .page-title { color: var(--feat-color); }
[class*="feat-"] .breadcrumb a { color: var(--feat-color); }
[class*="feat-"] .btn-add,
[class*="feat-"] .cc-btn-primary { background: var(--feat-color); }

/* ══════════════════════════════════════════════════════
   Mobile usability layer (phones, ≤600px)
   Desktop/tablet are untouched: everything below is either hidden by
   default or scoped to the max-width:600px media query. Text below 12px and
   small tap targets are lifted by /static/js/mobile-fit.js, because many
   pages set those sizes inline.
   ══════════════════════════════════════════════════════ */
.chrome-search-toggle,
.chrome-search-close { display: none; }

@media (max-width: 600px) {
  /* ── Top bar: logo + icon buttons, search opens over the bar ── */
  .app-chrome { padding: 0 10px; gap: 6px; }
  .app-chrome .chrome-logo { height: 26px; }
  .chrome-right { gap: 6px; }
  .app-chrome .chrome-search { display: none; }

  .app-chrome .chrome-icon-btn,
  .app-chrome .chrome-pill,
  .app-chrome .theme-toggle {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-width: 40px;
    padding: 0 !important; border-radius: 10px !important;
    font-size: 18px !important; line-height: 1; flex-shrink: 0;
  }
  .app-chrome .chrome-icon-btn {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; cursor: pointer;
  }
  .app-chrome .chrome-pill-label { display: none; }
  .app-chrome .theme-toggle .theme-icon-light,
  .app-chrome .theme-toggle .theme-icon-dark { display: none !important; }
  .app-chrome .theme-toggle::before { content: '\1F319'; }            /* 🌙 */
  [data-theme="dark"] .app-chrome .theme-toggle::before { content: '\2600\FE0F'; }  /* ☀️ */

  .app-chrome.search-open .chrome-search {
    display: flex; align-items: center; gap: 6px;
    position: absolute; inset: 0; z-index: 2;
    max-width: none; margin: 0; padding: 0 8px;
    background: var(--chrome);
  }
  [data-theme="dark"] .app-chrome.search-open .chrome-search { background: #020617; }
  .app-chrome.search-open .chrome-search input {
    flex: 1; min-width: 0; height: 36px; font-size: 16px !important; padding: 6px 12px;
  }
  .app-chrome.search-open .chrome-search-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 16px;
  }
  .app-chrome.search-open .search-results { left: 8px; right: 8px; }
  .app-chrome .chrome-icon-btn:focus-visible,
  .app-chrome .chrome-pill:focus-visible,
  .app-chrome .theme-toggle:focus-visible,
  .app-chrome .chrome-search-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* ── Form fields: 16px stops iPhones zooming in on tap ── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  select {
    min-height: 40px;
  }
  /* Some pages make every input fill its container; checkboxes and radios
     must keep a fixed size or they get drawn on top of their label text. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important; height: 22px !important;
    min-width: 22px; flex: 0 0 22px; margin: 0 6px 0 0;
  }
}

/* ══════════════════════════════════════════════════════
   Design system colours (v1)
   One name per meaning. Pages use these instead of raw hex values so
   every feature looks consistent and dark mode works automatically.
   Rolled out feature by feature (Customers first).
   ══════════════════════════════════════════════════════ */
:root {
  /* Brand — every action (buttons, links, active tabs) */
  --ds-brand:          var(--primary);
  --ds-brand-hover:    var(--primary-dark);
  --ds-brand-text:     #2d57b0;
  --ds-brand-tint:     #eef3fc;
  --ds-brand-border:   #c7d6f3;

  /* Neutrals */
  --ds-text:           var(--text);
  --ds-text-2:         #334155;
  --ds-text-muted:     var(--text-muted);
  --ds-text-subtle:    var(--text-light);
  --ds-border:         var(--border);
  --ds-border-strong:  #c3ccd9;
  --ds-border-subtle:  #edf0f5;
  --ds-surface:        var(--surface);
  --ds-surface-2:      #f8fafc;
  --ds-surface-3:      #f1f5f9;
  --ds-neutral:        #64748b;  /* solid grey for badges with white text */

  /* Status — same meaning in every feature */
  --ds-success:        #059669;  --ds-success-fg: #047857;  --ds-success-bg: #ecfdf5;  --ds-success-border: #a7f3d0;
  --ds-warning:        #d97706;  --ds-warning-fg: #92400e;  --ds-warning-bg: #fffbeb;  --ds-warning-border: #fcd34d;
  --ds-danger:         #dc2626;  --ds-danger-fg:  #b91c1c;  --ds-danger-bg:  #fef2f2;  --ds-danger-border:  #fecaca;
  --ds-danger-hover:   #b91c1c;

  /* WhatsApp keeps its own brand colour */
  --ds-whatsapp:       #25d366;
  --ds-whatsapp-hover: #128c7e;

  /* Customer categories */
  --ds-cat-general-fg:  #475569;  --ds-cat-general-bg:  #f1f5f9;  --ds-cat-general-border:  #e2e8f0;
  --ds-cat-silver-fg:   #3f5a73;  --ds-cat-silver-bg:   #eef3f7;  --ds-cat-silver-border:   #c9d6e2;
  --ds-cat-gold-fg:     #92400e;  --ds-cat-gold-bg:     #fef3c7;  --ds-cat-gold-border:     #fcd34d;
  --ds-cat-platinum-fg: #6d28d9;  --ds-cat-platinum-bg: #f5f3ff;  --ds-cat-platinum-border: #ddd6fe;

  /* Feature accent (set per feature below) */
  --ds-accent:         var(--ds-brand);
  --ds-accent-text:    var(--ds-brand-text);
  --ds-accent-tint:    var(--ds-brand-tint);
  --ds-accent-border:  var(--ds-brand-border);
}
[data-feature="customers"] {
  --ds-accent: #4f46e5;  --ds-accent-text: #4338ca;  --ds-accent-tint: #eef2ff;  --ds-accent-border: #c7d2fe;
}
[data-feature="luckydraw"] {
  --ds-accent: #db2777;  --ds-accent-text: #be185d;  --ds-accent-tint: #fdf2f8;  --ds-accent-border: #fbcfe8;
}
[data-feature="orders"] {
  --ds-accent: #7c3aed;  --ds-accent-text: #6d28d9;  --ds-accent-tint: #f5f3ff;  --ds-accent-border: #ddd6fe;
}
[data-feature="inventory"] {
  --ds-accent: #0d9488;  --ds-accent-text: #0f766e;  --ds-accent-tint: #f0fdfa;  --ds-accent-border: #99f6e4;
}
[data-feature="transactions"] {
  --ds-accent: #0284c7;  --ds-accent-text: #0369a1;  --ds-accent-tint: #f0f9ff;  --ds-accent-border: #bae6fd;
}
[data-feature="vc"] {
  --ds-accent: #c026d3;  --ds-accent-text: #a21caf;  --ds-accent-tint: #fdf4ff;  --ds-accent-border: #f5d0fe;
}
[data-feature="diary"] {
  --ds-accent: #78716c;  --ds-accent-text: #57534e;  --ds-accent-tint: #f5f5f4;  --ds-accent-border: #d6d3d1;
}
[data-feature="invoice"] {
  --ds-accent: #ea580c;  --ds-accent-text: #c2410c;  --ds-accent-tint: #fff7ed;  --ds-accent-border: #fed7aa;
}

[data-theme="dark"] {
  --ds-brand-text:     #9db8f2;
  --ds-brand-tint:     #1b2a4a;
  --ds-brand-border:   #2f4a7d;
  --ds-text-2:         #cbd5e1;
  --ds-border-strong:  #475569;
  --ds-border-subtle:  #263449;
  --ds-surface-2:      #182234;
  --ds-surface-3:      #243044;
  --ds-neutral:        #475569;
  --ds-success:        #10b981;  --ds-success-fg: #6ee7b7;  --ds-success-bg: #0b2e24;  --ds-success-border: #14532d;
  --ds-warning:        #f59e0b;  --ds-warning-fg: #fcd34d;  --ds-warning-bg: #2e2410;  --ds-warning-border: #78501a;
  --ds-danger:         #ef4444;  --ds-danger-fg:  #fca5a5;  --ds-danger-bg:  #3a1414;  --ds-danger-border:  #7f1d1d;
  --ds-danger-hover:   #dc2626;
  --ds-cat-general-fg:  #cbd5e1;  --ds-cat-general-bg:  #243044;  --ds-cat-general-border:  #334155;
  --ds-cat-silver-fg:   #a5c2dc;  --ds-cat-silver-bg:   #1b2a3a;  --ds-cat-silver-border:   #34506b;
  --ds-cat-gold-fg:     #fcd34d;  --ds-cat-gold-bg:     #2e2410;  --ds-cat-gold-border:     #78501a;
  --ds-cat-platinum-fg: #c4b5fd;  --ds-cat-platinum-bg: #261d45;  --ds-cat-platinum-border: #4c3a8a;
}
[data-theme="dark"] [data-feature="customers"] {
  --ds-accent: #818cf8;  --ds-accent-text: #a5b4fc;  --ds-accent-tint: #1e1b4b;  --ds-accent-border: #3730a3;
}
[data-theme="dark"] [data-feature="luckydraw"] {
  --ds-accent: #f472b6;  --ds-accent-text: #f9a8d4;  --ds-accent-tint: #3a1027;  --ds-accent-border: #831843;
}
[data-theme="dark"] [data-feature="orders"] {
  --ds-accent: #a78bfa;  --ds-accent-text: #c4b5fd;  --ds-accent-tint: #241a45;  --ds-accent-border: #4c3a8a;
}
[data-theme="dark"] [data-feature="inventory"] {
  --ds-accent: #2dd4bf;  --ds-accent-text: #5eead4;  --ds-accent-tint: #0b2b29;  --ds-accent-border: #115e59;
}
[data-theme="dark"] [data-feature="transactions"] {
  --ds-accent: #38bdf8;  --ds-accent-text: #7dd3fc;  --ds-accent-tint: #0c2a3d;  --ds-accent-border: #075985;
}
[data-theme="dark"] [data-feature="vc"] {
  --ds-accent: #e879f9;  --ds-accent-text: #f0abfc;  --ds-accent-tint: #3b0f40;  --ds-accent-border: #86198f;
}
[data-theme="dark"] [data-feature="diary"] {
  --ds-accent: #a8a29e;  --ds-accent-text: #d6d3d1;  --ds-accent-tint: #292524;  --ds-accent-border: #57534e;
}
[data-theme="dark"] [data-feature="invoice"] {
  --ds-accent: #fb923c;  --ds-accent-text: #fdba74;  --ds-accent-tint: #3a1d0c;  --ds-accent-border: #9a3412;
}

/* ── Shared pieces built on the colours above ── */
.kpi-card--brand        { background:var(--ds-brand-tint);          border-color:var(--ds-brand-border);          color:var(--ds-brand-text); }
.kpi-card--cat-general  { background:var(--ds-cat-general-bg);      border-color:var(--ds-cat-general-border);    color:var(--ds-cat-general-fg); }
.kpi-card--cat-silver   { background:var(--ds-cat-silver-bg);       border-color:var(--ds-cat-silver-border);     color:var(--ds-cat-silver-fg); }
.kpi-card--cat-gold     { background:var(--ds-cat-gold-bg);         border-color:var(--ds-cat-gold-border);       color:var(--ds-cat-gold-fg); }
.kpi-card--cat-platinum { background:var(--ds-cat-platinum-bg);     border-color:var(--ds-cat-platinum-border);   color:var(--ds-cat-platinum-fg); }
.kpi-card--warning      { background:var(--ds-warning-bg);          border-color:var(--ds-warning-border);        color:var(--ds-warning-fg); }

.ds-chip { display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; border:1px solid transparent; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
.ds-chip--general  { background:var(--ds-cat-general-bg);  color:var(--ds-cat-general-fg);  border-color:var(--ds-cat-general-border); }
.ds-chip--silver   { background:var(--ds-cat-silver-bg);   color:var(--ds-cat-silver-fg);   border-color:var(--ds-cat-silver-border); }
.ds-chip--gold     { background:var(--ds-cat-gold-bg);     color:var(--ds-cat-gold-fg);     border-color:var(--ds-cat-gold-border); }
.ds-chip--platinum { background:var(--ds-cat-platinum-bg); color:var(--ds-cat-platinum-fg); border-color:var(--ds-cat-platinum-border); }

/* ── Feature identity: accent on icon tiles and under the page title only ── */
/* body always has data-feature; only pages that set a value get these.
   Shared components below still carry fixed colours for features not yet
   migrated; on migrated pages they switch to the design-system colours. */
[data-feature]:not([data-feature=""]) .kpi-card--blue   { background:var(--ds-brand-tint);   border-color:var(--ds-brand-border);   color:var(--ds-brand-text); }
[data-feature]:not([data-feature=""]) .kpi-card--green,
[data-feature]:not([data-feature=""]) .kpi-card--teal   { background:var(--ds-success-bg);   border-color:var(--ds-success-border); color:var(--ds-success-fg); }
[data-feature]:not([data-feature=""]) .kpi-card--red    { background:var(--ds-danger-bg);    border-color:var(--ds-danger-border);  color:var(--ds-danger-fg); }
[data-feature]:not([data-feature=""]) .kpi-card--amber  { background:var(--ds-warning-bg);   border-color:var(--ds-warning-border); color:var(--ds-warning-fg); }
[data-feature]:not([data-feature=""]) .kpi-card--purple { background:var(--ds-accent-tint);  border-color:var(--ds-accent-border);  color:var(--ds-accent-text); }
[data-feature]:not([data-feature=""]) .kpi-card--muted  { background:var(--ds-surface-2);    border-color:var(--ds-border);         color:var(--ds-text-2); }
[data-feature]:not([data-feature=""]) .cc-badge-grey    { background:var(--ds-cat-general-bg); color:var(--ds-cat-general-fg); }
[data-feature]:not([data-feature=""]) .cc-badge-purple  { background:var(--ds-accent-tint);  color:var(--ds-accent-text); }
[data-feature]:not([data-feature=""]) .cc-btn-edit      { background:var(--ds-brand-tint);   color:var(--ds-brand-text); border-color:var(--ds-brand-border); }
[data-feature]:not([data-feature=""]) .filter-bar       { background:var(--ds-surface-2); }
/* Invoice preview is a picture of the printed paper: always light, whatever the theme */
.invoice-paper { color:#1f2937; color-scheme:light; }
[data-theme="dark"] .invoice-paper table th { background:#fff; color:#111; border-bottom-color:#e5e7eb; }
.invoice-paper table td { color:#1f2937; }
[data-theme="dark"] .invoice-paper table td { border-color:#f0f0f0; border-bottom-color:#f0f0f0; }
[data-theme="dark"] .invoice-paper table tr:hover td { background:transparent; }
[data-feature]:not([data-feature=""]) .btn-clear        { background:var(--ds-surface-3); color:var(--ds-text-muted); }
[data-feature]:not([data-feature=""]) .btn-export       { background:var(--ds-surface-3); color:var(--ds-text); border-color:var(--ds-border-strong); }
[data-feature]:not([data-feature=""]) .nav-item__icon { background:var(--ds-accent-tint) !important; }
[data-feature]:not([data-feature=""]) .nav-item:hover { border-color:var(--ds-accent); }
[data-feature]:not([data-feature=""]) .container h2:first-of-type::after {
  content:''; display:block; width:32px; height:3px; border-radius:2px;
  background:var(--ds-accent); margin:6px auto 0;
}
[data-feature]:not([data-feature=""]) .pg-header h2::after { margin-left:0 !important; }
[data-feature]:not([data-feature=""]) .container h2 { color:var(--ds-text); }


/* ══════════════════════════════════════════════════════════════════════════
   EngageNGrow — Manufacturing brand theme (scoped to body[data-feature="mfg"])
   Retunes the colour tokens to the EngageNGrow violet identity for the
   Manufacturing section only. Because components reference these tokens,
   buttons, links, KPIs, badges, filters, tables and breadcrumbs all pick up
   the brand automatically. No other feature is affected.
   ══════════════════════════════════════════════════════════════════════════ */
body[data-feature="mfg"] {
  /* Colours sampled directly from the EngageNGrow app icon (icon-512.png):
     Colours sampled from the EngageNGrow app icon (icon-512.png):
     top-left #5287F6 (blue) → mid #6564F2 → bottom-right #7840ED (purple).
     Button LAYOUT follows the brand mock; COLOURS follow the app icon. */
  --primary:       #6564f2;   /* icon mid-tone — dominant brand colour */
  --primary-light: #ecebfe;
  --primary-dark:  #5247d6;

  /* Design-system brand + feature accent → icon blue-violet */
  --ds-brand:        #6564f2;
  --ds-brand-hover:  #5247d6;
  --ds-brand-text:   #5247d6;
  --ds-brand-tint:   #ecebfe;
  --ds-brand-border: #d4d2fb;
  --ds-accent:        #6564f2;
  --ds-accent-text:   #5247d6;
  --ds-accent-tint:   #ecebfe;
  --ds-accent-border: #d4d2fb;

  /* Signature brand gradient — the exact blue→purple diagonal from the app icon */
  --mfg-grad: linear-gradient(135deg, #5287f6 0%, #6564f2 50%, #7840ed 100%);

  /* Card-action button palette (lavender-blue) matching the icon tone */
  --mfg-act-bg:     #ecebfe;
  --mfg-act-text:   #5247d6;
  --mfg-act-border: #d4d2fb;
}

/* Signature primary button: subtle violet gradient + brand glow on hover */
body[data-feature="mfg"] .btn,
body[data-feature="mfg"] .btn-filter,
body[data-feature="mfg"] .dashboard-btn,
body[data-feature="mfg"] .empty-state .empty-action {
  background: var(--mfg-grad);
  border: none;
  letter-spacing: .2px;
  box-shadow: 0 1px 2px rgba(101,100,242,.20);
}
body[data-feature="mfg"] .btn:hover,
body[data-feature="mfg"] .btn-filter:hover,
body[data-feature="mfg"] .dashboard-btn:hover,
body[data-feature="mfg"] .empty-state .empty-action:hover {
  background: linear-gradient(135deg, #4674e8 0%, #5247d6 50%, #6a2fd6 100%);
  box-shadow: 0 4px 14px rgba(101,100,242,.32);
}
body[data-feature="mfg"] .btn:disabled,
body[data-feature="mfg"] .btn.btn-loading {
  background: #b4b2cf;
  box-shadow: none;
}

/* Branded focus ring on inputs within manufacturing */
body[data-feature="mfg"] input:focus,
body[data-feature="mfg"] textarea:focus,
body[data-feature="mfg"] select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(101,100,242,.16);
}

/* Breadcrumb current/links and type-tab accents lean violet */
body[data-feature="mfg"] .breadcrumb a { color: var(--primary-dark); }
body[data-feature="mfg"] a { color: var(--primary-dark); }

/* Dark theme: a matching lighter violet so the brand holds in dark mode */
[data-theme="dark"] body[data-feature="mfg"] {
  --primary:       #8f93f8;
  --primary-light: #222050;
  --primary-dark:  #b3b0fb;
  --ds-brand:        #8f93f8;
  --ds-brand-text:   #b3b0fb;
  --ds-brand-tint:   #1f1d47;
  --ds-brand-border: #3f3a86;
  --ds-accent:        #8f93f8;
  --ds-accent-text:   #b3b0fb;
  --ds-accent-tint:   #1f1d47;
  --ds-accent-border: #3f3a86;
  --mfg-grad: linear-gradient(135deg, #5287f6 0%, #6564f2 50%, #7840ed 100%);
  --mfg-act-bg:     #1f1d47;
  --mfg-act-text:   #b3b0fb;
  --mfg-act-border: #3f3a86;
}


/* ══════════════════════════════════════════════════════════════════════════
   EngageNGrow — Manufacturing: consistent BUTTON SYSTEM (per brand mock)
   Normalises shape/size across every MFG page so buttons are uniform
   regardless of per-template inline styles. Scoped to body[data-feature="mfg"].
   Shapes from the brand mock:
     • Primary (gradient)      radius 10px · ~40px tall · 13-15px/700 white
     • Secondary / filter      radius 10px · tinted brand
     • Card actions (ghost)    radius 8px  · ~32px tall · 13px/700
     • Back                    pill radius 999px · white · brand border/text
   ══════════════════════════════════════════════════════════════════════════ */

/* Primary buttons — one shape everywhere (override inline padding/size/radius) */
body[data-feature="mfg"] .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 20px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.1;
}
/* The header "+ New Item" — white fill with a blue→violet gradient border and
   brand-coloured text (so it stands out against the page, not a solid fill). */
body[data-feature="mfg"] .pg-header .btn,
body[data-feature="mfg"] .mfg-new-btn {
  width: auto !important;
  background: #fff !important;
  color: var(--primary-dark) !important;
  border: 1.5px solid transparent !important;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(135deg, #5287f6 0%, #6564f2 50%, #7840ed 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 1px 3px rgba(101,100,242,.18) !important;
}
body[data-feature="mfg"] .pg-header .btn:hover,
body[data-feature="mfg"] .mfg-new-btn:hover {
  color: var(--primary-dark) !important;
  box-shadow: 0 4px 12px rgba(101,100,242,.28) !important;
  background-image:
    linear-gradient(#f7f7ff, #f7f7ff),
    linear-gradient(135deg, #5287f6 0%, #6564f2 50%, #7840ed 100%) !important;
}

/* Filter "Apply" — primary, radius 8px to sit in the filter card */
body[data-feature="mfg"] .btn-filter {
  min-height: 34px;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
/* Filter "Clear" — solid brand fill with white text (clearly visible) */
body[data-feature="mfg"] .btn-clear {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--primary-dark) !important;
  color: #fff !important;
  border: 1px solid var(--primary-dark) !important;
}
body[data-feature="mfg"] .btn-clear:hover { filter: brightness(1.08); color: #fff !important; text-decoration: none; }

/* Card action buttons (Add Stock / History / Send / Edit / delete) — uniform shape */
body[data-feature="mfg"] .btn-ghost {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 6px 13px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-width: 1px !important;
  line-height: 1.1;
}
/* Lavender action buttons (History / Send / Edit) — per the brand mock */
body[data-feature="mfg"] .btn-ghost--act,
body[data-feature="mfg"] .btn-ghost--blue {
  background: var(--mfg-act-bg) !important;
  color: var(--mfg-act-text) !important;
  border-color: var(--mfg-act-border) !important;
}
body[data-feature="mfg"] .btn-ghost--act:hover,
body[data-feature="mfg"] .btn-ghost--blue:hover {
  border-color: var(--primary) !important;
  color: var(--primary-dark) !important;
  filter: brightness(.98);
}

/* Back button — brand pill */
body[data-feature="mfg"] .back-btn {
  min-height: 38px;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: #fff !important;
  color: var(--primary-dark) !important;
  border: 1.5px solid var(--ds-brand-border) !important;
}
body[data-feature="mfg"] .back-btn:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary-dark) !important;
}

/* Generic tab buttons / pagination keep consistent rounding */
body[data-feature="mfg"] .page-btn,
body[data-feature="mfg"] .pagination a,
body[data-feature="mfg"] .pagination span { border-radius: 8px !important; }


/* ══════════════════════════════════════════════════════════════════════════
   EngageNGrow — Manufacturing TYPOGRAPHY
   Goal: larger, clearer text for users with glasses, but LESS heavy/"fat".
   - Antialiased rendering makes strokes visibly thinner & crisper.
   - Slightly larger base size for readability.
   - Trim the very heavy weights (800/900 → 600, 700 → 600) so nothing looks
     chunky, while keeping a clear bold/regular hierarchy.
   Scoped to body[data-feature="mfg"] so only Manufacturing is affected.
   ══════════════════════════════════════════════════════════════════════════ */
body[data-feature="mfg"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: .1px;
}

/* Bump base size up a notch for legibility (desktop) */
@media (min-width: 769px) {
  body[data-feature="mfg"] { font-size: 19px; }
}

/* Soften heavy weights: 900/800/bolder → 650; 700 → 600.
   Attribute selectors also catch inline font-weight styles. */
body[data-feature="mfg"] [style*="font-weight:800"],
body[data-feature="mfg"] [style*="font-weight: 800"],
body[data-feature="mfg"] [style*="font-weight:900"],
body[data-feature="mfg"] [style*="font-weight: 900"],
body[data-feature="mfg"] [style*="font-weight:bold"],
body[data-feature="mfg"] [style*="font-weight: bold"] {
  font-weight: 650 !important;
}
body[data-feature="mfg"] [style*="font-weight:700"],
body[data-feature="mfg"] [style*="font-weight: 700"] {
  font-weight: 600 !important;
}

/* Headings & key numbers: bigger but not heavier */
body[data-feature="mfg"] h2 { font-weight: 600; }
body[data-feature="mfg"] .item-name { font-weight: 600; }
body[data-feature="mfg"] .kpi-block__val,
body[data-feature="mfg"] .item-card__qty-val { font-weight: 650; }

/* ══════════════════════════════════════════════════════════════════════════
   EngageNGrow — Manufacturing: MOBILE & installed-APP tuning
   Ensures the brand type + buttons stay large, legible and touch-friendly on
   phones and inside the PWA/TWA. Targets stay >=44px for comfortable tapping.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Larger base text on phones too (for users with glasses) */
  body[data-feature="mfg"] { font-size: 17px; }

  /* Primary buttons: taller + larger label, comfortable tap target */
  body[data-feature="mfg"] .btn {
    min-height: 46px;
    padding: 11px 20px !important;
    font-size: 16px !important;
  }
  /* Filter Apply / Clear: bigger on mobile */
  body[data-feature="mfg"] .btn-filter,
  body[data-feature="mfg"] .btn-clear {
    min-height: 44px;
    padding: 10px 16px !important;
    font-size: 15px !important;
  }
  /* Card action buttons (Add / History / Send / Edit): bigger + tappable */
  body[data-feature="mfg"] .btn-ghost {
    min-height: 42px;
    padding: 9px 14px !important;
    font-size: 15px !important;
  }
  /* Back pill */
  body[data-feature="mfg"] .back-btn {
    min-height: 44px;
    font-size: 15px !important;
  }
  /* Pagination touch targets */
  body[data-feature="mfg"] .page-btn,
  body[data-feature="mfg"] .pagination a,
  body[data-feature="mfg"] .pagination span {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 15px;
  }
  /* Form inputs: 16px avoids iOS auto-zoom and reads clearly */
  body[data-feature="mfg"] input,
  body[data-feature="mfg"] select,
  body[data-feature="mfg"] textarea {
    font-size: 16px !important;
  }
}

/* Installed app (PWA/TWA): same mobile sizing, and keep content clear of the
   fixed bottom nav the app injects. */
body.app-mode[data-feature="mfg"] .back-btn-wrap {
  margin-bottom: 8px;
}