@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#152337; --muted:#718096; --line:#dfe7f0; --canvas:#f4f7fb; --card:#fff; --red:#ed1c24; --red-dark:#b71822; --blue:#2878e3; --amber:#e59a20; --green:#18a46b; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { background:var(--canvas); color:var(--ink); font-family:'DM Sans',sans-serif; overflow:hidden; }
.dashboard-shell { min-height:100%; height:100vh; padding:2.5vh 3.7vw 2.2vh; display:flex; flex-direction:column; }
.dashboard-header { position:relative; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:2vw; min-height:8.5rem; padding:1vh 1.5vw 1.1vh; overflow:hidden; border:1px solid #d4d8de; border-top:5px solid var(--red); border-radius:1rem; background:#fff; box-shadow:0 14px 24px rgba(71,85,105,.25), 0 4px 8px rgba(71,85,105,.12); }
.dashboard-header::before { content:''; position:absolute; inset:0; z-index:0; background:transparent; }
.dashboard-header::after { content:''; position:absolute; left:30%; right:30%; bottom:0; z-index:1; height:.72rem; background-color:var(--red); background-image:radial-gradient(circle, #ffffff42 1px, transparent 1.5px), repeating-linear-gradient(135deg, transparent 0, transparent 8px, #ffffff1c 8px, #ffffff1c 10px); background-size:14px 8px, auto; clip-path:polygon(4% 0,96% 0,100% 100%,0 100%); }
.brand-lockup, .title-block, .header-meta { position:relative; z-index:2; }
.brand-lockup { display:flex; align-items:center; justify-content:flex-start; height:72%; padding-left:.4rem; padding-right:1.4vw; }
.sac-logo { display:block; width:9rem; height:5.8rem; object-fit:contain; object-position:center; }
.brand-name { color:var(--red-dark); font-size:clamp(.7rem, .95vw, 1.08rem); font-weight:700; letter-spacing:.12em; white-space:nowrap; }
.brand-subtitle,.eyebrow { color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-top:.35rem; }
.title-block { position:relative; width:auto; max-width:none; text-align:center; padding:.2rem 0 .35rem; transform:translateY(-.15rem); }
.title-block .eyebrow { margin:0 0 .4rem; font-size:.65rem; }
h1 { color:var(--red-dark); font:700 clamp(2.4rem,3.3vw,3.8rem)/.95 'Barlow Condensed'; letter-spacing:.17em; margin:0; }
.title-block p { color:var(--muted); margin:.7rem 0 0; font-size:clamp(1rem, 1.15vw, 1.3rem); }
.header-meta { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; height:72%; gap:.22rem; padding-left:1.4vw; text-align:right; }
.branch-label { color:var(--muted); font-size:.68rem; font-weight:600; letter-spacing:.15em; }
.branch-label strong { display:block; color:var(--ink); font-size:1.2rem; letter-spacing:.02em; margin-top:.22rem; }
.live-clock { color:var(--ink); font:600 clamp(1.45rem,2.1vw,2.4rem) 'Space Grotesk'; letter-spacing:.04em; line-height:1; margin-top:.2rem; }
.status-board { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4vw; flex:1; min-height:0; padding-top:1.5vh; }
.status-column { display:flex; flex-direction:column; min-height:0; border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:1rem; background:#edf2f8; padding:.75rem; box-shadow:0 14px 24px rgba(71,85,105,.23), 0 4px 8px rgba(71,85,105,.11); }
.status-column.ordered { --accent:var(--blue); } .status-column.preparing { --accent:var(--amber); } .status-column.counter { --accent:var(--green); background:#eaf6f1; }
.column-heading { display:flex; align-items:center; justify-content:space-between; padding:.1rem .2rem .55rem; }
.column-heading > div { display:flex; align-items:center; gap:.7rem; }
.column-tools { gap:.45rem !important; }
.status-dot { width:.75rem; height:.75rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
h2 { font:700 clamp(.95rem,1.2vw,1.35rem) 'Space Grotesk'; letter-spacing:.13em; margin:0; }
.order-count { min-width:2.25rem; padding:.35rem .55rem; border-radius:.6rem; background:var(--accent); color:#fff; text-align:center; font:700 1.05rem 'Space Grotesk'; }
.page-indicator { color:#7e8b9d; font:600 .68rem 'Space Grotesk'; letter-spacing:.04em; white-space:nowrap; }
.order-list { display:flex; flex:1; flex-direction:column; justify-content:flex-start; gap:.28rem; overflow:visible; }
.order-card { background:var(--card); border:1px solid #e4ebf3; border-left:4px solid var(--accent); border-radius:.6rem; padding:.28rem .5rem .25rem; box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent), 0 5px 14px #173c5d0b; animation:card-glow 3s ease-in-out infinite; }
.status-column.ordered .order-card { animation:ordered-card-glow 3s ease-in-out infinite; }
.status-column.counter .order-card { animation:counter-card-glow 3s ease-in-out infinite; }
.order-card.stage-2 { border-color:#e8b24b; border-left-color:var(--amber); box-shadow:0 0 0 1px #e8b24b, 0 0 14px #e59a2052, 0 7px 22px #e59a2024; animation:stage-two-glow 3s ease-in-out infinite; }
.preparing-phase.scanned { color:#b36c00; }
.order-card.ready { border-color:#a7dfc7; border-left-color:var(--green); box-shadow:0 0 0 1px #a7dfc7, 0 7px 22px #18a46b1c; animation:ready-glow 3s ease-in-out infinite; }
.status-column.counter .order-card.ready { animation:counter-card-glow 3s ease-in-out infinite; }
.card-primary { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; min-width:0; }
.order-id { flex:0 0 auto; font:700 1.6rem 'Space Grotesk'; letter-spacing:.035em; }
.customer-name { flex:1 1 auto; min-width:0; margin:.08rem 0 0; color:var(--muted); font-size:1.2rem; font-weight:700; line-height:1.1; text-align:right; text-transform:uppercase; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:normal; word-break:normal; }
.preparing-phase { display:flex; align-items:center; gap:.3rem; color:#b36c00; margin-top:.18rem; font-size:clamp(.48rem,.52vw,.59rem); font-weight:700; letter-spacing:.05em; }
.status-column.ordered .preparing-phase { color:var(--blue); }
.status-column.ordered .phase-mark { border-color:var(--blue); box-shadow:0 0 0 3px #2878e320; }
.phase-mark { width:.55rem; height:.55rem; border:2px solid var(--amber); border-radius:50%; box-shadow:0 0 0 3px #e59a2020; }
.card-divider { border:0; border-top:1px solid #edf0f4; margin:.18rem 0 .16rem; }
.card-meta { color:var(--muted); display:flex; justify-content:space-between; gap:.5rem; font-size:clamp(.48rem,.54vw,.63rem); font-weight:500; }
.card-meta.no-invoice { justify-content:flex-end; }
.ready-banner { display:flex; align-items:center; gap:.3rem; color:#087a4d; font-size:.46rem; font-weight:700; letter-spacing:.06em; margin-top:.16rem; }
.checkmark { display:grid; place-items:center; width:.9rem; height:.9rem; border-radius:50%; background:var(--green); color:#fff; font-size:.62rem; font-weight:700; }
.empty-state { color:#96a3b4; padding:2.5rem 1rem; text-align:center; font-size:.9rem; }
.dashboard-footer { display:flex; align-items:center; gap:1rem; color:var(--muted); padding-top:1.35vh; font-size:.72rem; letter-spacing:.03em; }
.connection-state { display:flex; align-items:center; gap:.45rem; color:var(--green); font-weight:700; letter-spacing:.1em; }
.connection-state.reconnecting { color:#d2870c; } .connection-dot { width:.55rem; height:.55rem; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 13%,transparent); }
.footer-note { margin-left:auto; }
.fullscreen-button { display:grid; place-items:center; width:1.8rem; height:1.8rem; margin-left:.25rem; border:1px solid #cbd5e1; border-radius:.4rem; background:#fff; color:#64748b; cursor:pointer; font-size:1.2rem; line-height:1; }
.fullscreen-button:hover { border-color:var(--red); color:var(--red); }
.fullscreen-button:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
@keyframes ready-glow { 0%,100%{box-shadow:0 0 0 1px #a7dfc7,0 7px 22px #18a46b1c} 50%{box-shadow:0 0 0 2px #73d0a6,0 8px 28px #18a46b38} }
@keyframes stage-two-glow { 0%,100%{box-shadow:0 0 0 1px #e8b24b,0 0 14px #e59a2042,0 7px 22px #e59a2020} 50%{box-shadow:0 0 0 2px #d99216,0 0 22px #e59a2070,0 8px 28px #e59a2030} }
@keyframes card-glow { 0%,100%{box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),0 0 10px color-mix(in srgb, var(--accent) 12%, transparent),0 5px 14px #173c5d0b} 50%{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 52%, transparent),0 0 20px color-mix(in srgb, var(--accent) 28%, transparent),0 7px 22px #173c5d16} }
@keyframes ordered-card-glow { 0%,100%{box-shadow:0 0 0 1px #2878e338,0 0 12px #2878e326,0 7px 18px #2878e31c} 50%{box-shadow:0 0 0 2px #2878e370,0 0 22px #2878e34d,0 10px 26px #2878e33b} }
@keyframes counter-card-glow { 0%,100%{box-shadow:0 0 0 1px #18a46b38,0 0 12px #18a46b26,0 7px 18px #18a46b1c} 50%{box-shadow:0 0 0 2px #18a46b70,0 0 22px #18a46b4d,0 10px 26px #18a46b38} }
@media (min-width:2200px) { .dashboard-shell { padding-left:4vw; padding-right:4vw; } .status-column { padding:1.5rem; } .order-card { padding:1.35rem; } }
@media (max-width:900px) { body { overflow:auto; } .dashboard-shell { height:auto; min-height:100vh; } .dashboard-header { grid-template-columns:1fr; gap:1.2rem; } .dashboard-header::after { left:25%; right:25%; } .brand-lockup { height:auto; padding:0; border:0; } .title-block,.header-meta { position:relative; left:auto; top:auto; width:auto; max-width:none; height:auto; text-align:left; transform:none; } .header-meta { align-items:flex-start; padding-left:0; border:0; } .status-board { grid-template-columns:1fr; } .status-column { min-height:260px; } .dashboard-footer { padding-bottom:1rem; } }