/* ============================================================
   JPS dark theme.
   Loaded AFTER each page's own <style>, so it wins on the cascade
   without any of that markup being touched. Remove the one <link>
   from a page and it goes straight back to how it was.

   Applies to the office pages only: / (dashboard), /registers, /board.
   NOT to /form. That is the labourers' page, it is in daily use by
   twenty people, and a light form on a phone in daylight is the right
   answer for it.

   Colour discipline
     Jewel Gold   brand furniture only: rules, active markers, the
                  diamond. It never carries data.
     One blue     the only data colour. Bars are all one hue and
                  length carries the magnitude.
     Red/amber/
     green        reserved for state, and always with words beside
                  them, never colour alone.

   Every value here was measured against the card surface #191D23,
   not eyeballed: blue 5.2:1, gold 6.4:1, red 5.9:1, amber 8.0:1,
   green 6.4:1, primary text 15.4:1, secondary 7.9:1, muted 4.7:1.
   ============================================================ */

:root {
  /* --- the dark scale --- */
  --jps-page:      #12151A;
  --jps-surface:   #191D23;
  --jps-surface-2: #1F242C;
  --jps-surface-3: #1C2128;   /* hover */
  --jps-hair:      #262B33;
  --jps-hair-soft: #20242B;

  --jps-ink:   #F2F4F7;
  --jps-ink-2: #A9B2C0;
  --jps-ink-3: #7C8797;

  --jps-data:     #4A93DB;
  --jps-data-dk:  #3B7CBB;
  --jps-data-dim: #2C4460;
  --jps-gold:     #C09A51;

  --jps-bad:  #E8776D;
  --jps-warn: #E0A94A;
  --jps-good: #46B183;

  /* --- the three pages' own variables, re-pointed --- */
  /* dashboard */
  --blue: #4A93DB;
  --blue-dk: #3B7CBB;
  --gold: #C09A51;
  --charcoal: #F2F4F7;
  --ink: #E6EAF0;
  --muted: #A9B2C0;
  --faint: #7C8797;
  --line: #262B33;
  --paper: #12151A;
  --white: #191D23;          /* every card on the dashboard uses this */
  --warn: #E0A94A;
  --warnbg: #2A2318;
  --warnline: #46381F;
  --bbbg: #241F16;
  --act: #C9AEDA;
  --actbg: #221C29;
  --actline: #3A3044;

  /* registers and board */
  --sub: #A9B2C0;
  --bg: #12151A;
  --red: #E8776D;    --redbg: #2E1D1B;
  --amber: #E0A94A;  --amberbg: #2A2318;
  --green: #46B183;  --greenbg: #16281F;

  color-scheme: dark;
}

html { background: var(--jps-page); }
body { background: var(--jps-page); color: var(--jps-ink-2); }

/* ------------------------------------------------------- type and rules */

h1, h2, h3 { color: var(--jps-ink); letter-spacing: -.4px; }
h1 { font-weight: 600; }
a { color: var(--jps-data); }

/* the gold rule under the page title, as on the mockup */
.rule { background: var(--jps-gold) !important; height: 3px; border-radius: 2px; }

.kicker, .lb, th {
  color: var(--jps-ink-3);
  letter-spacing: 1.6px;
}

/* the one hero figure per view */
.figure { color: var(--jps-ink); }
.period, .sub, .note, .hnone { color: var(--jps-ink-2); }

/* ------------------------------------------------------------- surfaces */

.module, .card, .stat, .panel, .calwrap, .absbox, .pc-detail,
.pc-form, .tile, .chase, .action, .conf {
  background: var(--jps-surface);
  border-color: var(--jps-hair);
}
.module, .card, .stat, .panel { border-radius: 14px; }
.stat, .card { background: var(--jps-surface) !important; }

/* dashboard drill cards */
.dcard { background: var(--jps-surface-2); border-color: var(--jps-hair); color: var(--jps-ink-2); }
.dcard:hover { background: var(--jps-surface-3) !important; border-color: #33465C !important; }
.dcard .t { color: var(--jps-ink); }

/* entity cards */
.cd.jps { background: #1A222B !important; border-color: #2A3B4E !important; }
.cd.bb  { background: var(--bbbg) !important; border-color: #46381F !important; }
.cd.off { background: #1B1F26 !important; border-color: var(--jps-hair) !important; }
.hd.has { border-color: #46381F !important; }
.hd.wknd { background: #171B21 !important; }
.off .away, .absbox { background: #1A1E25 !important; }
.calwrap, .pc-detail { background: #1A1E25 !important; }
.action .foot { background: #1C1E24 !important; border-top-color: var(--jps-hair) !important; }
.colophon { border-top-color: var(--jps-hair-soft) !important; color: var(--jps-ink-3); }

/* ---------------------------------------------------------------- bars */
/* single hue, length carries magnitude, no gridlines: the value at the
   end of the row is what an axis would otherwise be there to tell you. */
.mini .mt, .cbars .ct, .conf .track { background: #1D222A !important; }
.mini .mf, .cbars .cf { background: var(--jps-data) !important; }
.mini .mv, .cbars .cv, .mini .mn, .cbars .cn { color: var(--jps-ink); }
.mini .ml, .cbars .cl { color: var(--jps-ink-2); }

/* --------------------------------------------------------------- tables */

table { color: var(--jps-ink-2); }
th { border-bottom-color: var(--jps-hair) !important; }
td { border-bottom-color: var(--jps-hair-soft) !important; }
.sumtab td, .abstab td { border-bottom-color: var(--jps-hair-soft) !important; }
tr.click:hover td, tr.lab-row:hover, .pc-row:hover { background: var(--jps-surface-3) !important; }
tr.lab-row.open, .pc-call.open .pc-row { background: #1F2630 !important; }
tbody tr:hover { background: var(--jps-surface-3); }
td strong, td b { color: var(--jps-ink); }

/* ------------------------------------------------------- lists and rows */

.chase li, .action li { border-bottom-color: var(--jps-hair-soft) !important; }
.chase .who { color: var(--jps-ink); }
.chase .head { background: var(--warnbg); border-bottom-color: #46381F; }

/* ------------------------------------------------------ state and pills */
/* status colour never travels alone: these all carry their own text. */

.pill, .tag, .st.confirm { background: #1F2A36 !important; border-color: var(--jps-hair); color: var(--jps-ink-2); }
.st.missing, .st.unmapped { background: rgba(232,119,109,.14) !important; color: var(--jps-bad) !important; }
.dot.missing, .dot.unmapped { background: var(--jps-bad) !important; }
.p-red   { background: rgba(232,119,109,.14) !important; color: var(--jps-bad) !important; }
.p-amber { background: rgba(224,169,74,.14) !important;  color: var(--jps-warn) !important; }
.p-green { background: rgba(70,177,131,.14) !important;  color: var(--jps-good) !important; }
.p-grey  { background: var(--jps-surface-2) !important;  color: var(--jps-ink-2) !important; }
.absmsg.ok, .pc-msg.ok, .msg.ok { color: var(--jps-good) !important; }
.bad, .lock .bad, .msg.bad, .pc-msg.bad, .tomsg.bad { color: var(--jps-bad) !important; }
.pc-b.ok { background: #16281F !important; color: var(--jps-good) !important; }
.pc-emg { background: rgba(232,119,109,.10) !important; border-color: #4A2E2B !important; }
.pc-emg input { accent-color: var(--jps-bad) !important; }
.flag { background: var(--warnbg); color: var(--jps-warn); border-left-color: var(--jps-gold); }
.viewbadge { background: var(--jps-surface-2); color: var(--jps-ink-2); }

/* ------------------------------------------------------- controls, tabs */

button, .btn, .pc-btn, .tbtn, .absgo, .tab {
  font-family: inherit;
}
.tab {
  background: var(--jps-surface-2);
  border: 1px solid var(--jps-hair);
  color: var(--jps-ink-2);
  border-radius: 9px;
}
.tab:hover { color: var(--jps-ink); border-color: #38424F; }
.tab.on {
  background: #26303C;
  border-color: #3A4756;
  color: var(--jps-ink) !important;
  font-weight: 600;
}
.btn, .pc-btn, .absgo, .tosend, .send {
  background: var(--jps-surface-2);
  border: 1px solid var(--jps-hair);
  color: var(--jps-ink-2);
  border-radius: 9px;
}
.btn:hover, .pc-btn:hover { color: var(--jps-ink); border-color: #38424F; background: var(--jps-surface-3); }
.btn.primary, .absgo, .send, .tosend {
  background: var(--jps-data);
  border-color: var(--jps-data);
  color: #08182A;
  font-weight: 600;
}
.btn.primary:hover, .absgo:hover { background: #5CA0E4; }
.btn.danger { background: rgba(232,119,109,.10); border-color: #4A2E2B !important; color: var(--jps-bad); }
.pc-btn.ghost:hover { background: #1F2630 !important; }
.lock button[disabled], .absgo[disabled], .send[disabled], .tosend[disabled] {
  background: #333B47 !important; border-color: #333B47 !important; color: #8B95A3 !important;
}

/* !important is doing real work here. The dashboard's month picker
   (select#jps-mp) carries an inline style="background:#fff", and an inline
   style beats any stylesheet rule without it. Rather than chase each control
   one at a time, every form control on the office pages is claimed. */
input, select, textarea {
  background: var(--jps-surface-2) !important;
  border: 1px solid var(--jps-hair) !important;
  color: var(--jps-ink) !important;
}
option { background: var(--jps-surface-2); color: var(--jps-ink); }
select { appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, #A9B2C0 50%),
                    linear-gradient(135deg, #A9B2C0 50%, transparent 50%) !important;
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important; }
input::placeholder, textarea::placeholder { color: var(--jps-ink-3); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(74,147,219,.45);
  border-color: var(--jps-data);
}
input[type="search"] { background: var(--jps-surface-2); }
label { color: var(--jps-ink-2); }


/* filter chips on the registers page. Their own rules hardcode a white fill
   and use --ink for the selected state, which inverts badly on dark, so both
   states are restated here rather than left to the cascade. */
.chip {
  background: var(--jps-surface-2) !important;
  border: 1px solid var(--jps-hair) !important;
  color: var(--jps-ink-2) !important;
}
.chip:hover { color: var(--jps-ink) !important; border-color: #38424F !important; }
.chip.on {
  background: #26303C !important;
  border-color: #3A4756 !important;
  color: var(--jps-ink) !important;
  font-weight: 600;
}

/* .btn hardcodes white text in the pages' own CSS. Plain .btn is restated
   above as light text on a dark fill; .btn.primary keeps a blue fill with
   dark text on it. */
.btn { color: var(--jps-ink-2); }

/* --------------------------------------------------- higher-specificity fills */
/* Each of these sets a hardcoded light fill with a two-class selector, which
   outranks a single-class rule here. They have to be matched selector for
   selector. This was the third time a white-on-white control reached Jeremy,
   so the pages' own CSS was audited for every light fill rather than fixed
   one at a time. */
.btn.sec {
  background: var(--jps-surface-2) !important;
  color: var(--jps-ink-2) !important;
  border: 1px solid var(--jps-hair) !important;
  text-decoration: none;
}
.btn.sec:hover { background: var(--jps-surface-3) !important; color: var(--jps-ink) !important;
  border-color: #38424F !important; }
.pc-btn.grey { background: var(--jps-surface-2) !important; color: var(--jps-ink-2) !important; }
.ratepencil:hover { background: var(--jps-surface-3) !important; color: var(--jps-data) !important; }
.rateno { background: var(--jps-surface-2) !important; color: var(--jps-ink-2) !important; }
.pc-b.emgb { background: rgba(232,119,109,.14) !important; color: var(--jps-bad) !important; }
.pc-team label.on { background: #1F2A36 !important; border-color: var(--jps-data) !important; }
.pc-cnt { background: var(--jps-surface-2); color: var(--jps-ink-2); }

/* ------------------------------------------------------------ overlays */

.ov { background: rgba(6,9,13,.66); }
.sheet, .panel { background: var(--jps-surface); border: 1px solid var(--jps-hair); }
.sheet .sh { background: var(--jps-surface); border-bottom-color: var(--jps-hair); }
.x, .sheet .x { color: var(--jps-ink-3); }
.x:hover { color: var(--jps-ink); }

/* --------------------------------------------------------- sign-in card */

.lock, .login-box { background: var(--jps-surface); border: 1px solid var(--jps-hair); border-radius: 14px; }
.lock h2, .login-box h2 { color: var(--jps-ink); }

/* ----------------------------------------------------------- top strip */

.top { background: var(--jps-surface); border-bottom-color: var(--jps-hair); }
.topbar { border-bottom-color: var(--jps-hair); }
.stamp { color: var(--jps-ink-3); }

/* The logo PNG is dark ink on an OPAQUE white background: checked the file,
   it has no transparency at all. So it cannot be inverted or dropped onto a
   dark strip without becoming a white rectangle. Until there is a white-ink
   or transparent version of the mark, it sits on a deliberate light plaque,
   which reads as a logo card rather than as a mistake.
   Worth asking whoever holds the brand assets for an SVG. */
.top .wrap { padding-top: 16px; padding-bottom: 16px; }
/* The header logo is now /jps-logo-dark.svg: gold wordmark, white diamond,
   transparent. The white plaque that the old opaque PNG needed is gone. */
.top img { background: none; padding: 0; box-shadow: none; }

/* --------------------------------------------------------------- misc */

hr { border-color: var(--jps-hair); }
::selection { background: rgba(74,147,219,.32); }
* { scrollbar-color: #313A46 var(--jps-page); }

@media print {
  :root { --white: #fff; --paper: #fff; --ink: #111; --charcoal: #111; }
  html, body { background: #fff; color: #111; }
}


/* ------------------------------------------------------------ page width */
/* The sidebar takes 236px, and the dashboard's own wrap was capped at 880px,
   which left a wide empty gutter on a desktop screen. Widened to match the
   mockup. Registers and board were already 1080px. */
.wrap { max-width: 1180px !important; }
@media (max-width: 1100px) { .wrap { max-width: 100% !important; } }