/* ===========================================================================
   Cone Zone — shared web styling
   ---------------------------------------------------------------------------
   Every Cone Zone web page loads this: the marketing site, the operator
   dashboard, and the admin panel. Change the palette here and all three change
   together, which is the whole point — three separate copies would drift apart
   within a month.

   The colours match the apps (lib/theme.ts). Keep them in step.
   =========================================================================== */

:root{
  /* palette */
  --cream:#FFF6E9;
  --cream-deep:#FDF0DC;
  --navy:#2B3AA0;
  --navy-deep:#1F2B7D;
  --pink:#FF4D96;
  --pink-soft:#FFD9E7;
  --mint:#7ED0C1;
  --mint-soft:#DCF4EF;
  --orange:#F2A93B;
  --yellow:#F7E9A8;
  --ink:#2C2420;
  --soft:#6B5D54;
  --faint:#A8998E;
  --border:#E8DDD0;
  --white:#fff;
  --ok:#4CAF7D;
  --ok-soft:#E4F4EC;
  --ok-ink:#1E7A4F;
  --warn:#E9A23B;
  --warn-soft:#FCF1DC;
  --warn-ink:#8A5B08;
  --bad:#D9534F;
  --bad-soft:#FBE4E4;
  --bad-ink:#96201D;

  /* type
     Two faces, on purpose. The marketing site is advertising, so it uses the
     rounded display face from the apps. The admin and operator dashboards are
     where people do real work — reading numbers, checking statuses — so they
     use the plain system font, which is what every operating system optimises
     for legibility at small sizes. */
  --font-ui:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Fredoka',var(--font-ui);

  /* shape */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-pill:999px;
  --shadow:0 10px 30px rgba(44,36,32,.10);
  --shadow-sm:0 3px 10px rgba(44,36,32,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-ui);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-size:15px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* --- layout ------------------------------------------------------------- */
.cz-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.cz-main{padding:24px 0 60px}

/* --- top bar ------------------------------------------------------------ */
.cz-bar{
  background:var(--navy);color:#fff;position:sticky;top:0;z-index:40;
  padding:12px 0;
}
.cz-bar .cz-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cz-bar h1{font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px}
.cz-bar .cz-who{margin-left:auto;font-size:13px;opacity:.85;
  max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cz-bar button{
  background:rgba(255,255,255,.15);color:#fff;border:0;padding:8px 15px;
  border-radius:var(--r-pill);cursor:pointer;font-size:13px;font-family:inherit;
  font-weight:500;min-height:38px;
}
.cz-bar button:hover{background:rgba(255,255,255,.3)}

@media(max-width:640px){
  .cz-bar .cz-wrap{gap:8px}
  .cz-bar h1{font-size:15px;width:100%}
  .cz-bar .cz-who{margin-left:0;width:100%;max-width:none;order:3}
  .cz-bar button{flex:1;font-size:12.5px;padding:8px 10px}
}

/* --- typography --------------------------------------------------------- */
h2{font-size:19px;font-weight:600;color:var(--navy);letter-spacing:-.2px}
h3{font-size:17px;font-weight:600;color:var(--navy)}
.cz-note{color:var(--soft);font-size:14px;margin-top:4px;line-height:1.55}
.cz-hint{color:var(--faint);font-size:12.5px;line-height:1.55}
.cz-muted{color:var(--faint);font-size:13px}

/* Numbers line up in columns when they are tabular — makes a table of view
   counts scannable rather than ragged. */
.cz-stat .n,.cz-table td{font-variant-numeric:tabular-nums}

/* --- panels ------------------------------------------------------------- */
.cz-panel{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px 22px;margin-bottom:18px;
}
@media(max-width:640px){.cz-panel{padding:16px;border-radius:var(--r-md)}}

.cz-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin-bottom:22px}
.cz-stat{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-md);padding:15px}
.cz-stat .n{font-size:26px;font-weight:700;color:var(--navy);line-height:1.15}
.cz-stat .l{font-size:11.5px;color:var(--soft);margin-top:3px;text-transform:uppercase;
  letter-spacing:.5px;font-weight:600}
.cz-stat.alert .n{color:var(--bad)}
@media(max-width:640px){
  .cz-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .cz-stat .n{font-size:22px}
}

/* --- buttons ------------------------------------------------------------ */
.cz-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--navy);color:#fff;border:0;border-radius:var(--r-pill);
  padding:12px 20px;font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;text-decoration:none;min-height:46px;transition:transform .12s ease;
}
.cz-btn:hover{background:var(--navy-deep)}
.cz-btn:active{transform:scale(.985)}
.cz-btn.block{width:100%}
.cz-btn.sm{padding:8px 15px;font-size:13.5px;min-height:38px}
.cz-btn.ghost{background:var(--white);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--border)}
.cz-btn.ghost:hover{background:var(--cream)}
.cz-btn.pink{background:var(--pink)}
.cz-btn.ok{background:var(--ok)}
.cz-btn.bad{background:var(--bad)}
.cz-btn.warn{background:var(--warn)}
.cz-btn[disabled]{opacity:.55;cursor:default}

.cz-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:640px){
  .cz-actions .cz-btn{flex:1 1 auto}
}

/* --- forms -------------------------------------------------------------- */
label{display:block;font-size:13px;font-weight:600;color:var(--soft);margin-bottom:6px}
input,textarea,select{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);font-size:16px; /* 16px stops iOS zooming on focus */
  font-family:inherit;margin-bottom:14px;background:var(--white);color:var(--ink);
}
input:focus,textarea:focus{outline:none;border-color:var(--navy)}
textarea{min-height:90px;resize:vertical;line-height:1.5}

.cz-err{color:var(--bad);font-size:14px;margin-bottom:10px;min-height:20px;line-height:1.45}
.cz-ok{color:var(--ok-ink);font-size:14px;margin-bottom:10px;line-height:1.45}

/* --- sign in card ------------------------------------------------------- */
.cz-signin{
  max-width:400px;margin:60px auto;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;
}
.cz-signin h2{font-size:21px;margin-bottom:6px}
.cz-signin p{color:var(--soft);font-size:14px;line-height:1.55;margin-bottom:20px}
@media(max-width:640px){
  .cz-signin{margin:24px 16px;padding:22px}
}

/* --- pills -------------------------------------------------------------- */
.cz-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;
  border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.4px}
.cz-pill.good,.cz-pill.approved,.cz-pill.out,.cz-pill.live{background:var(--ok-soft);color:var(--ok-ink)}
.cz-pill.warn,.cz-pill.pending,.cz-pill.timed,.cz-pill.static{background:var(--warn-soft);color:var(--warn-ink)}
.cz-pill.bad,.cz-pill.suspended{background:var(--bad-soft);color:var(--bad-ink)}
.cz-pill.grey,.cz-pill.parked{background:#F1EFE8;color:#5F5E5A}

/* --- notices ------------------------------------------------------------ */
.cz-banner{background:var(--warn-soft);border:1px solid #EBD9B4;color:var(--warn-ink);
  padding:13px 16px;border-radius:var(--r-md);font-size:14px;margin-bottom:18px;
  line-height:1.5}

.cz-empty{background:var(--cream);border:1px dashed var(--border);
  border-radius:var(--r-md);padding:24px;text-align:center;color:var(--soft);font-size:14px}

/* --- tables that survive a phone ---------------------------------------- *
   On a wide screen these are ordinary tables. On a narrow one each row turns
   into its own little card, with the column name printed beside each value.
   That needs one thing from the markup: every <td> carries data-label.
   ------------------------------------------------------------------------ */
.cz-table{width:100%;border-collapse:collapse}
.cz-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--faint);padding:10px 12px;border-bottom:1px solid var(--border);
  font-weight:700;white-space:nowrap;
}
.cz-table td{padding:12px;border-bottom:1px solid #F5F0E7;font-size:14px;vertical-align:middle}
.cz-table tr:last-child td{border-bottom:0}

@media(max-width:760px){
  .cz-table,
  .cz-table tbody,
  .cz-table tr,
  .cz-table td{display:block;width:100%}
  .cz-table thead{display:none}
  .cz-table tr{
    background:var(--cream);border:1px solid var(--border);
    border-radius:var(--r-md);padding:12px 14px;margin-bottom:12px;
  }
  .cz-table td{
    border:0;padding:6px 0;display:flex;gap:14px;align-items:baseline;
    justify-content:space-between;text-align:right;
  }
  .cz-table td::before{
    content:attr(data-label);
    color:var(--faint);font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.4px;text-align:left;flex-shrink:0;
  }
  /* a cell holding buttons should use the full width */
  .cz-table td.cz-full{display:block;text-align:left;padding-top:10px}
  .cz-table td.cz-full::before{display:block;margin-bottom:8px}
}

/* --- chart -------------------------------------------------------------- */
.cz-chart{display:flex;align-items:flex-end;gap:5px;height:140px;padding-top:8px}
.cz-chart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.cz-chart .bar i{display:block;background:var(--navy);border-radius:5px 5px 0 0;min-height:3px}
.cz-chart .bar span{font-size:9.5px;color:var(--faint);text-align:center;margin-top:6px;
  white-space:nowrap;overflow:hidden}
@media(max-width:640px){
  .cz-chart{height:110px;gap:3px}
  .cz-chart .bar span{font-size:8px}
}

/* --- misc --------------------------------------------------------------- */
.cz-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cz-row > input{margin-bottom:0}
@media(max-width:640px){
  .cz-row{flex-direction:column;align-items:stretch}
  .cz-row .cz-btn{width:100%}
}

dialog{
  border:0;border-radius:var(--r-lg);padding:24px;max-width:400px;width:calc(100% - 32px);
  box-shadow:0 20px 60px rgba(44,36,32,.28);font-family:inherit;color:var(--ink);
}
dialog::backdrop{background:rgba(44,36,32,.45)}
dialog h3{margin-bottom:6px;font-size:19px}