/* ===== Requisitions UI: "Fresh Light" + "Midnight" dark theme ===== */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800; font-style: normal; font-display: swap;
}

:root, [data-theme="light"] {
    --bg: #f4f6fb; --surface: #ffffff; --surface-2: #f8fafc; --border: #e2e8f0; --border-strong: #cbd5e1;
    --text: #0f172a; --muted: #5b6478; --accent: #4f46e5; --accent-strong: #4338ca; --accent-soft: #eef2ff; --on-accent: #fff;
    --shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
    --header-bg: #ffffff; --tab-bg: rgba(255,255,255,.97); --tab-muted: #64748b;
    --approve-bg: #15803d; --approve-text: #fff; --approve-shadow: 0 6px 16px rgba(22,163,74,.25);
    --reject-bg: #fff; --reject-text: #b91c1c; --reject-border: #fecaca;
    --ok: #15803d; --danger: #b91c1c;
    --st-amber-bg: #fff4e0; --st-amber: #9a4a07; --st-amber-bd: transparent;
    --st-green-bg: #e0f7ec; --st-green: #046c4e; --st-green-bd: transparent;
    --st-teal-bg: #dcf5f3; --st-teal: #0f6b63; --st-teal-bd: transparent;
    --st-lime-bg: #ecfccb; --st-lime: #3f6212; --st-lime-bd: transparent;
    --st-blue-bg: #e0ecff; --st-blue: #1d4ed8; --st-blue-bd: transparent;
    --st-red-bg: #fde7e7; --st-red: #b91c1c; --st-red-bd: transparent;
    --page-glow: none;
    color-scheme: light;
}
[data-theme="dark"] {
    --bg: #0b1020; --surface: rgba(255,255,255,.055); --surface-2: rgba(255,255,255,.07); --border: rgba(255,255,255,.12); --border-strong: rgba(255,255,255,.22);
    --text: #e2e8f0; --muted: #9aa6b8; --accent: #22d3ee; --accent-strong: #67e8f9; --accent-soft: rgba(34,211,238,.14); --on-accent: #0b1020;
    --shadow: 0 8px 24px rgba(0,0,0,.25);
    --header-bg: rgba(11,16,32,.98); --tab-bg: rgba(11,16,32,.95); --tab-muted: #8391a7;
    --approve-bg: linear-gradient(135deg,#22c55e,#a3e635); --approve-text: #052e16; --approve-shadow: 0 6px 18px rgba(132,204,22,.22);
    --reject-bg: rgba(239,68,68,.1); --reject-text: #fca5a5; --reject-border: rgba(239,68,68,.45);
    --ok: #6ee7b7; --danger: #fca5a5;
    --st-amber-bg: rgba(245,158,11,.13); --st-amber: #fcd34d; --st-amber-bd: rgba(245,158,11,.45);
    --st-green-bg: rgba(16,185,129,.13); --st-green: #6ee7b7; --st-green-bd: rgba(16,185,129,.45);
    --st-teal-bg: rgba(45,212,191,.13); --st-teal: #5eead4; --st-teal-bd: rgba(45,212,191,.45);
    --st-lime-bg: rgba(163,230,53,.13); --st-lime: #bef264; --st-lime-bd: rgba(163,230,53,.45);
    --st-blue-bg: rgba(96,165,250,.13); --st-blue: #93c5fd; --st-blue-bd: rgba(96,165,250,.45);
    --st-red-bg: rgba(239,68,68,.13); --st-red: #fca5a5; --st-red-bd: rgba(239,68,68,.45);
    --page-glow: radial-gradient(circle at 15% -10%, rgba(30,58,138,.55) 0, transparent 45%), radial-gradient(circle at 110% 35%, rgba(6,95,70,.4) 0, transparent 40%);
    color-scheme: dark;
}

/* Bootstrap variable bridge */
:root, [data-theme] {
    --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--border);
    --bs-secondary-color: var(--muted); --bs-link-color-rgb: 79,70,229; --bs-link-hover-color-rgb: 67,56,202;
    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-border-radius: .75rem; --bs-focus-ring-color: rgba(79,70,229,.3);
}
[data-theme="dark"] { --bs-link-color-rgb: 34,211,238; --bs-link-hover-color-rgb: 103,232,249; --bs-focus-ring-color: rgba(34,211,238,.3); }

html { background: var(--bg); }
body { background: var(--page-glow), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; min-height: 100vh; }
body.has-tabbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.text-muted { color: var(--muted) !important; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-sm { width: 14px; height: 14px; }

/* Header */
.app-header { position: sticky; top: 0; z-index: 1020; background: var(--header-bg); border-bottom: 1px solid var(--border); }
.app-header-inner { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .brand-logo { background: linear-gradient(135deg,#22d3ee,#a3e635); }
.brand-logo-lg { width: 56px; height: 56px; border-radius: 16px; font-size: 1.5rem; margin: 0 auto 14px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { min-width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; font-weight: 600; font-size: .9rem; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn:focus-visible, .topnav a:focus-visible, .tabbar a:focus-visible { outline: 3px solid var(--bs-focus-ring-color); outline-offset: 2px; }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; color: #fcd34d; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
.topnav { display: none; }

/* Bottom tab bar (phones) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; justify-content: space-around; background: var(--tab-bg); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; justify-content: center; font-size: .72rem; font-weight: 600; color: var(--tab-muted); text-decoration: none; border-radius: 12px; }
.tabbar a.active { color: var(--accent); }
.tabbar a.active .ic { stroke-width: 2.4; }

@media (min-width: 768px) {
    .tabbar { display: none; }
    body.has-tabbar { padding-bottom: 24px; }
    .topnav { display: flex; gap: 4px; margin-left: 24px; }
    .topnav a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--muted); text-decoration: none; }
    .topnav a:hover { color: var(--text); background: var(--surface-2); }
    .topnav a.active { color: var(--accent); background: var(--accent-soft); }
    .app-header-inner { padding: 10px 32px; }
}

/* Page */
.app-main { max-width: 820px; margin: 0 auto; padding: 18px 16px 24px; }
.page-head { margin-bottom: 14px; }
.page-head h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.hint { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.hint .count { color: var(--accent); font-size: 1.05rem; }
.empty-state { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 16px; padding: 22px 18px; text-align: center; color: var(--muted); }
.empty-state a { font-weight: 700; }

/* Cards / panels (also restyles Bootstrap .card on the capture page) */
.card, .panel, .req-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); color: var(--text); }
[data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .req-card { border-color: transparent; }
.card.shadow-sm { box-shadow: var(--shadow) !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 14px 16px; border-radius: 18px 18px 0 0 !important; }
.card-body { padding: 16px; }
.panel { padding: 22px 18px; }

/* Forms */
.form-label { font-weight: 700; font-size: .85rem; margin-bottom: 6px; }
.form-control, .form-select { min-height: 46px; border-radius: 12px; background-color: var(--surface-2); border-color: var(--border); color: var(--text); font-size: 1rem; }
.form-control::placeholder { color: var(--muted); opacity: .85; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); background-color: var(--surface-2); color: var(--text); }
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); opacity: 1; color: var(--text); }
[data-theme="dark"] .form-select option { background: #111827; color: var(--text); }
.form-control-lg { min-height: 52px; }

/* Buttons */
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--on-accent); --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong); --bs-btn-hover-color: var(--on-accent); --bs-btn-active-bg: var(--accent-strong); --bs-btn-active-border-color: var(--accent-strong); --bs-btn-active-color: var(--on-accent); }
.btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: transparent; --bs-btn-bg: var(--accent-soft); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--on-accent); }
.btn-cta { min-height: 54px; box-shadow: 0 10px 24px rgba(79,70,229,.3); }
[data-theme="dark"] .btn-cta { box-shadow: 0 8px 22px rgba(34,211,238,.2); }
.btn-outline-danger { --bs-btn-color: var(--reject-text); --bs-btn-border-color: var(--reject-border); --bs-btn-bg: var(--reject-bg); --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; --bs-btn-hover-color: #fff; }
.btn-approve, .btn-reject { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; }
.btn-approve { background: var(--approve-bg); color: var(--approve-text); border: 0; box-shadow: var(--approve-shadow); }
.btn-approve:hover, .btn-approve:focus { color: var(--approve-text); filter: brightness(1.06); }
.btn-reject { background: var(--reject-bg); color: var(--reject-text); border: 1.5px solid var(--reject-border); }
.btn-reject:hover, .btn-reject:focus { background: #dc2626; color: #fff; border-color: #dc2626; }
.alert { border-radius: 14px; }

/* Capture page */
.line .form-control, .line .btn { min-height: 46px; }
.line .remove-line { width: 46px; font-size: 1.3rem; line-height: 1; padding: 0; }
.item-input.picked { border-color: #22c55e; background-color: rgba(34,197,94,.08); }
.suggest { position: absolute; z-index: 1000; left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5); max-height: 260px; overflow-y: auto; box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.18); border-radius: 12px; }
.suggest .list-group-item { cursor: pointer; min-height: 44px; }
[data-theme="dark"] .suggest .list-group-item { background: #141b2e; color: var(--text); border-color: var(--border); }

/* Filter */
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.filter-label { font-weight: 700; font-size: .85rem; margin: 0; }
.filter-bar .form-select { flex: 1; background-color: var(--surface); }

/* Request cards */
.req-list { display: flex; flex-direction: column; gap: 12px; }
.req-card { overflow: hidden; }
.req-card[open] { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
details.req > summary { list-style: none; cursor: pointer; padding: 15px 16px; display: block; }
details.req > summary::-webkit-details-marker { display: none; }
details.req > summary:focus-visible { outline: 3px solid var(--bs-focus-ring-color); outline-offset: -3px; border-radius: 18px; }
.req-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.req-title { min-width: 0; }
.req-no { font-weight: 800; font-size: 1rem; }
.req-ref { font-size: .84rem; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.req-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .8rem; color: var(--muted); margin-top: 10px; }
.req-meta + .req-meta { margin-top: 6px; }
.req-meta span { display: inline-flex; align-items: center; gap: 5px; }
.chev { margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px,-2px); transition: transform .15s; }
details[open] .chev { transform: rotate(-135deg); }
.req-lines { margin: 0 16px; padding: 10px 0 8px; border-top: 1px dashed var(--border-strong); }
.req-lines-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.req-lines ul { list-style: none; margin: 0; padding: 0; }
.req-lines li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: .93rem; }
.req-lines li + li { border-top: 1px solid var(--border); }
.req-lines .qty { font-weight: 700; color: var(--accent); white-space: nowrap; }
.req-lines .linked { font-size: .78rem; color: var(--ok); }
.req-empty { padding: 0 16px 14px; font-size: .85rem; color: var(--muted); }
.req-actions { display: flex; gap: 10px; padding: 12px 16px 16px; }
.approve-btn { min-height: 48px; }

/* Status badges */
.st { font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; line-height: 1.2; }
.st-1 { background: var(--st-amber-bg); color: var(--st-amber); border-color: var(--st-amber-bd); }
.st-2, .st-5 { background: var(--st-green-bg); color: var(--st-green); border-color: var(--st-green-bd); }
.st-3 { background: var(--st-teal-bg); color: var(--st-teal); border-color: var(--st-teal-bd); }
.st-4, .st-7 { background: var(--st-lime-bg); color: var(--st-lime); border-color: var(--st-lime-bd); }
.st-6 { background: var(--st-blue-bg); color: var(--st-blue); border-color: var(--st-blue-bd); }
.st-8 { background: var(--st-red-bg); color: var(--st-red); border-color: var(--st-red-bd); }
.st-count { background: var(--accent-soft); color: var(--accent); }

/* Login / error */
.login-wrap { max-width: 420px; margin: 6vh auto 0; }
.login-hero { text-align: center; margin-bottom: 20px; }
.login-hero h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.login-hero p { color: var(--muted); margin: 6px 0 0; }
.error-panel { max-width: 460px; margin: 8vh auto 0; text-align: center; }
.error-panel h1 { font-size: 1.4rem; font-weight: 800; }
.error-panel p { color: var(--muted); }
.error-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; background: var(--st-red-bg); color: var(--st-red); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Signed-in user + store chip in the header */
.user-chip { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; max-width: 14rem; padding: .3rem .7rem .3rem .5rem; border-radius: 999px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); line-height: 1.1; }
.user-chip .ic { flex: 0 0 auto; opacity: .7; }
.user-chip-text { display: flex; flex-direction: column; min-width: 0; }
.user-chip-name { font-weight: 600; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip-store { font-size: .72rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { min-width: 0; }
@media (max-width: 575.98px) { .user-chip { max-width: 9.5rem; padding: .25rem .55rem .25rem .4rem; } .user-chip .ic { display: none; } }