/* Pye-Barker PM Service Calendar — industrial, high-contrast, built for a shop
   office screen. Light and dark both supported.

   Brand palette taken from pyebarker.com:
     #ED1C24  Pye-Barker red   (logo, primary actions)
     #10232A  dark teal-charcoal (header, footer)
     Open Sans, with a system stack fallback (no external font hosts — the CSP
     forbids them, and a self-hosted webfont isn't worth the weight here). */

:root {
  --bg:        #f4f5f7;
  --surface:   #ffffff;
  --surface-2: #fafbfc;
  --border:    #d8dce2;
  --border-2:  #e8ebef;
  --text:      #14181d;
  --text-2:    #5a6472;
  --text-3:    #8a94a2;

  /* Brand */
  --brand-red:      #ED1C24;
  --brand-red-dark: #c8151c;
  --brand-navy:     #10232A;
  --brand-navy-2:   #1b333c;

  /* `--accent` drives interactive chrome. Deliberately NOT the brand red:
     red is reserved for the "past due" status so it keeps its urgency. */
  --accent:    #10232A;
  --accent-2:  #e7edef;

  /* status palette — chosen to stay distinguishable for red/green CVD:
     red-orange vs amber vs blue vs slate vs green, differing in lightness too */
  --past-due:      #b4232a;
  --past-due-bg:   #fdeceb;
  --overdue:       #c2610a;
  --overdue-bg:    #fdf1e3;
  --order-now:     #b8860b;
  --order-now-bg:  #fbf6e3;
  --scheduled:     #5a6472;
  --scheduled-bg:  #eef0f3;
  --created:       #1c7a4a;
  --created-bg:    #e7f5ed;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode builds off the brand navy rather than a neutral grey. */
    --bg:        #0b1a1f;
    --surface:   #10232A;
    --surface-2: #16303a;
    --border:    #27424c;
    --border-2:  #1d3841;
    --text:      #e8ecf1;
    --text-2:    #a3adbb;
    --text-3:    #7b8797;

    --brand-red:      #ff4d55;
    --brand-red-dark: #ED1C24;
    --brand-navy:     #0b1a1f;
    --brand-navy-2:   #16303a;

    /* Navy is the page ground in dark mode, so chrome needs a lighter accent. */
    --accent:    #7fb9cc;
    --accent-2:  #16303a;

    --past-due:     #ff6b6b;  --past-due-bg:   #35191b;
    --overdue:      #f0a04b;  --overdue-bg:    #33220f;
    --order-now:    #e0c04b;  --order-now-bg:  #2e280f;
    --scheduled:    #93a0b1;  --scheduled-bg:  #222833;
    --created:      #4cc98a;  --created-bg:    #14301f;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- top bar ---------- */
/* Dark navy bar carrying the Pye-Barker logo, with the brand red as a bottom
   rule — the same pairing the corporate site uses. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 11px 20px;
  background: var(--brand-navy);
  border-bottom: 3px solid var(--brand-red);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 14px; }
/* The logo's "ENGINEERED SOLUTIONS" tagline is near-black and vanishes against
   the navy bar, so the mark sits on a white chip — the same treatment the
   corporate site uses in its own dark footer. */
.brand-logo {
  height: 30px; width: auto; display: block;
  background: #fff; padding: 5px 10px; border-radius: 4px;
}
.topbar h1 {
  font-size: 15px; margin: 0; font-weight: 600; color: #fff;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,.22);
  letter-spacing: .01em;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
.badge {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px;
}
/* Sits on the dark header, so it carries its own light-on-amber treatment. */
.badge-mock { background: #f3c34b; color: #3a2c05; border: 1px solid #d8a92c; }

/* ---------- KPI row ---------- */
.kpis {
  display: grid; gap: 12px; padding: 16px 20px 4px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kpi {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow); cursor: pointer; font: inherit; color: inherit;
  transition: border-color .12s, transform .12s;
}
.kpi:hover { border-color: var(--accent); transform: translateY(-1px); }
.kpi-value { font-size: 30px; font-weight: 700; line-height: 1.1;
             font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 13px; font-weight: 600; }
.kpi-sub   { font-size: 11.5px; color: var(--text-3); }
.kpi-action { border-left: 4px solid var(--brand-red); }
.kpi-action .kpi-value { color: var(--brand-red); }

/* ---------- controls ---------- */
.controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 20px; justify-content: space-between;
}
.control-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period { font-size: 15px; font-weight: 600; margin: 0 0 0 6px; min-width: 150px; }

.btn {
  padding: 7px 12px; border-radius: 6px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: 13px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-icon { width: 32px; padding: 7px 0; font-size: 17px; line-height: 1; }

.seg { display: inline-flex; border: 1px solid var(--border);
       border-radius: 6px; overflow: hidden; }
.seg-btn {
  padding: 7px 13px; background: var(--surface); border: 0;
  border-right: 1px solid var(--border); cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-2);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn.is-active { background: var(--brand-red); color: #fff; font-weight: 600; }

.input {
  padding: 7px 10px; border-radius: 6px; font: inherit; font-size: 13px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
#search { min-width: 230px; }
.check { display: inline-flex; align-items: center; gap: 6px;
         font-size: 13px; color: var(--text-2); cursor: pointer; }

/* ---------- legend ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 20px 12px; }
.lg { display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--text-2); }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.s-past_due      { background: var(--past-due); }
.s-overdue_order { background: var(--overdue); }
.s-order_now     { background: var(--order-now); }
.s-scheduled     { background: var(--scheduled); }
.s-so_created    { background: var(--created); }
.s-so_cancelled  { background: var(--text-3); }

/* ---------- view shell ---------- */
.view { padding: 0 20px 40px; }
.loading, .empty {
  padding: 48px; text-align: center; color: var(--text-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ---------- month grid ---------- */
.cal { background: var(--surface); border: 1px solid var(--border);
       border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head div {
  padding: 9px 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border-2);
}
.cal-head div:last-child { border-right: 0; }

.cell {
  min-height: 118px; padding: 6px; background: var(--surface);
  border-right: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: 3px;
}
.cell:nth-child(7n) { border-right: 0; }
.cell.is-out { background: var(--surface-2); }
.cell.is-today { background: var(--accent-2); }
.cell-date {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums; margin-bottom: 1px;
}
.cell.is-today .cell-date { color: var(--accent); font-weight: 800; }
.cell.is-out .cell-date { color: var(--text-3); opacity: .55; }

.ev {
  border-radius: 4px; padding: 3px 6px; font-size: 11.5px; cursor: pointer;
  border-left: 3px solid transparent; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: inherit; font-size: 11.5px; width: 100%; display: block;
}
.ev:hover { filter: brightness(.96); }
.ev-past_due      { background: var(--past-due-bg);   border-left-color: var(--past-due);   color: var(--past-due); }
.ev-overdue_order { background: var(--overdue-bg);    border-left-color: var(--overdue);    color: var(--overdue); }
.ev-order_now     { background: var(--order-now-bg);  border-left-color: var(--order-now);  color: var(--order-now); }
.ev-scheduled     { background: var(--scheduled-bg);  border-left-color: var(--scheduled);  color: var(--text-2); }
.ev-so_created    { background: var(--created-bg);    border-left-color: var(--created);    color: var(--created); }
.ev-so_cancelled  { background: var(--scheduled-bg);  border-left-color: var(--text-3);
                    color: var(--text-3); text-decoration: line-through; }
.ev-more { font-size: 11px; color: var(--text-3); padding: 1px 6px;
           background: none; border: 0; cursor: pointer; text-align: left; }

/* ---------- table ---------- */
.tbl-wrap { background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; min-width: 900px; }
th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; white-space: nowrap;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--border-2); font-size: 13px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.num  { font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.pill-past_due      { background: var(--past-due-bg);  color: var(--past-due); }
.pill-overdue_order { background: var(--overdue-bg);   color: var(--overdue); }
.pill-order_now     { background: var(--order-now-bg); color: var(--order-now); }
.pill-scheduled     { background: var(--scheduled-bg); color: var(--text-2); }
.pill-so_created    { background: var(--created-bg);   color: var(--created); }
.pill-so_cancelled  { background: var(--scheduled-bg); color: var(--text-3); }
.pill-pma { background: var(--accent-2); color: var(--accent); }

/* ---------- drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -8px 0 28px rgba(16,24,40,.14);
  z-index: 50; overflow-y: auto; padding: 22px;
}
.drawer-close {
  position: absolute; top: 12px; right: 14px; font-size: 24px; line-height: 1;
  background: none; border: 0; color: var(--text-3); cursor: pointer;
}
.scrim { position: fixed; inset: 0; background: rgba(16,24,40,.34); z-index: 40; }
.d-title { font-size: 17px; font-weight: 700; margin: 4px 0 2px; }
.d-sub { color: var(--text-2); font-size: 13px; margin-bottom: 16px; }
.d-section { margin-top: 18px; }
.d-section h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); margin: 0 0 8px;
}
.d-row { display: flex; justify-content: space-between; gap: 14px;
         padding: 6px 0; border-bottom: 1px solid var(--border-2); font-size: 13px; }
.d-row dt { color: var(--text-2); }
.d-row dd { margin: 0; font-weight: 600; text-align: right; }
.callout {
  padding: 11px 13px; border-radius: 6px; font-size: 12.5px; line-height: 1.5;
  border-left: 3px solid;
}
.callout-act { background: var(--past-due-bg);  border-color: var(--past-due);  color: var(--past-due); }
.callout-warn{ background: var(--overdue-bg);   border-color: var(--overdue);   color: var(--overdue); }
.callout-ok  { background: var(--created-bg);   border-color: var(--created);   color: var(--created); }

/* ---------- utilities (kept out of inline styles for CSP) ---------- */
.callout-banner { margin-bottom: 14px; }
.muted { color: var(--text-3); }
.is-hidden { visibility: hidden; }

/* ---------- login page ---------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: var(--brand-navy);
}
.login-card {
  width: min(380px, 100%); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  border-top: 4px solid var(--brand-red);
  box-shadow: var(--shadow); padding: 28px;
}
.login-logo { height: 34px; width: auto; display: block; margin-bottom: 4px; }
.login-card h1 { font-size: 18px; margin: 14px 0 4px; }
.login-card p  { color: var(--text-2); font-size: 13px; margin: 0 0 20px; }
.login-card label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-2); margin-bottom: 6px;
}
.login-card input { width: 100%; padding: 10px 12px; font-size: 14px; }
.login-card button {
  width: 100%; margin-top: 14px; padding: 11px; font-size: 14px;
  font-weight: 700; background: var(--brand-red); color: #fff;
  border: 0; border-radius: 4px; cursor: pointer;
  letter-spacing: .02em;
}
.login-card button:hover { background: var(--brand-red-dark); }
.login-err { color: var(--past-due); font-size: 13px; margin-top: 12px; min-height: 18px; }

/* ---------- footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding: 16px 20px 30px; color: var(--text-3); font-size: 12px;
}

@media (max-width: 720px) {
  .cell { min-height: 84px; }
  .controls { gap: 8px; }
  #search { min-width: 150px; flex: 1; }
  .kpi-value { font-size: 25px; }
}