/* ── 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: 14px;
    color: var(--text);
    line-height: 1.5;
}

/* ── 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: 11px;
    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;
}

/* ── 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: 18px; }

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

label, .form-group > label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    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: 13px;
    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: 13px;
    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: 13px;
    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: 12px;
    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: 13px;
    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 ── */
.back-link {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 7px 0;
    border-top: 1px solid var(--border);
}
.back-link:hover { color: var(--primary); text-decoration: none; }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
table th {
    background: var(--chrome);
    color: #e8edf5;
    padding: 9px 10px;
    font-weight: 600;
    white-space: nowrap;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: var(--text);
}
table tr:last-child td { border-bottom: none; }
table tr:hover td { background: var(--primary-light); }

.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: 10px;
    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: 13px;
    background: #f8f9fc;
    border: 1px solid var(--border);
}
.stat-card strong {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-weight: 600;
}
.stat-card span { font-size: 22px; font-weight: 700; color: var(--text); }

/* ── Pagination ── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; }
.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: 11px; }

/* ── Inline Action Buttons ── */
.btn-edit   { padding: 3px 9px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-sm); font-size: 11px; 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: 11px; 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: 11px; 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: 12px; font-weight: 600; }
.btn-clear    { padding: 7px 14px; background: #eef0f4; color: var(--text-muted); border-radius: var(--radius-sm); text-decoration: none; font-size: 12px; font-weight: 500; }
.btn-add      { padding: 7px 14px; background: var(--success); color: white; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; text-decoration: none; }
.btn-whatsapp { padding: 7px 12px; background: #25D366; color: white; border-radius: var(--radius-sm); font-size: 12px; 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: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ── 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: 10px; 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: 13px; 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: 12px; font-weight: 600;
}
.empty-state .empty-action:hover { background: var(--primary-dark); text-decoration: none; }

/* ── Breadcrumb ── */
.breadcrumb { font-size: 11px; color: var(--text-light); margin-bottom: 12px; padding: 5px 0; }
.breadcrumb a { color: var(--text-muted); font-weight: 500; font-size: 11px; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { margin: 0 5px; color: var(--border); }

/* ── 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:12px; color:var(--text-muted); }

.section-label { font-size:10px; 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:16px; font-weight:800; line-height:1.1; word-break:break-all; text-align:center; }
.kpi-lbl { font-size:9px; 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:13px; font-weight:700; color:var(--text); white-space:normal; word-break:break-word; }
.nav-item__desc  { font-size:11px; 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:13px; 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:11px; 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: 12px;
        display: flex; justify-content: space-between;
    }
    .mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600; color: var(--text-muted);
        font-size: 10px; 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: 13px;
    }

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

    h2 { font-size: 16px; 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: 14px; }

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

    /* 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: 13px;
    }

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

    /* 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: 15px; }
    .kpi-lbl { font-size: 9px; }

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

    /* 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: 12px; }

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

    /* 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:14px; font-weight:700; color:var(--text); margin-bottom:6px; }
.doc-step-body p { font-size:13px; 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:12px; 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:12px; color:#92400e; margin-top:16px; line-height:1.6; }