/* ---------------------------------------------------------------------
   Theme.

   The portal was dark only, with its colours written straight into the
   rules. They are variables now so a light set can replace them, and the
   dark values below are the same ones that were there before -- dark
   mode looks exactly as it did.

   Names say what a colour is for rather than what it looks like, because
   "the surface a card sits on" survives a theme swap and "dark navy"
   does not.
   --------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --bg: #0b1220;
  --bg-glow: #152042;        /* bright corner of the background wash */
  --card: #121b2e;
  --text: #e9eefc;
  --muted: #a9b4d0;

  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.22);

  --surface: rgba(18,27,46,0.92);
  --surface-soft: rgba(18,27,46,0.75);
  --surface-strong: rgba(18,27,46,0.95);
  --overlay: rgba(11,18,32,0.92);

  /* Raised fills, lightest to heaviest. */
  --fill-1: rgba(255,255,255,0.03);
  --fill-2: rgba(255,255,255,0.04);
  --fill-3: rgba(255,255,255,0.05);
  --fill-4: rgba(255,255,255,0.06);

  /* Text at reduced emphasis. */
  --text-90: rgba(233,238,252,0.90);
  --text-85: rgba(233,238,252,0.85);
  --text-80: rgba(233,238,252,0.80);
  --text-70: rgba(233,238,252,0.70);
  --text-55: rgba(233,238,252,0.55);

  --accent: #2f6bff;
  --accent-line: rgba(47,107,255,0.45);
  --accent-line-strong: rgba(47,107,255,0.55);
  --accent-fill: rgba(47,107,255,0.10);
  --accent-fill-strong: rgba(47,107,255,0.22);
  --accent-ring: rgba(47,107,255,0.18);

  --shadow: rgba(0,0,0,0.25);
  --shadow-strong: rgba(0,0,0,0.35);

  /* Raw channels, for the many one-off veils the page stylesheets mix at
     their own alpha. Overlaying white on a dark page and near-black on a
     light one is the same gesture, so these flip and the alphas stay. */
  --ink-rgb: 255,255,255;
  --text-rgb: 233,238,252;
  --sunken: rgba(0,0,0,0.18);   /* recessed wells: inputs, lists */

  --danger-text: rgba(255,180,180,0.95);
  --danger-line: rgba(255,107,107,0.45);
  --danger-fill: rgba(255,107,107,0.10);
  --success-line: rgba(62,224,136,0.35);

  /* The logo artwork has a dark background baked in, so on a light page
     it is given a dark plate of its own rather than sitting in a stray
     black rectangle. */
  --logo-filter: brightness(1.25) contrast(1.05);
  --logo-bg: transparent;
  --logo-pad: 0;
  --logo-radius: 0;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eef2fa;
  --bg-glow: #dde6fb;
  --card: #ffffff;
  --text: #0f1729;
  --muted: #55607a;

  --line: rgba(15,23,41,0.14);
  --line-strong: rgba(15,23,41,0.30);

  --surface: rgba(255,255,255,0.94);
  --surface-soft: rgba(255,255,255,0.80);
  --surface-strong: rgba(255,255,255,0.98);
  --overlay: rgba(226,232,244,0.92);

  --fill-1: rgba(15,23,41,0.03);
  --fill-2: rgba(15,23,41,0.05);
  --fill-3: rgba(15,23,41,0.07);
  --fill-4: rgba(15,23,41,0.06);

  --text-90: rgba(15,23,41,0.90);
  --text-85: rgba(15,23,41,0.85);
  --text-80: rgba(15,23,41,0.78);
  --text-70: rgba(15,23,41,0.68);
  --text-55: rgba(15,23,41,0.55);

  --accent: #2456d8;
  --accent-line: rgba(36,86,216,0.40);
  --accent-line-strong: rgba(36,86,216,0.55);
  --accent-fill: rgba(36,86,216,0.08);
  --accent-fill-strong: rgba(36,86,216,0.14);
  --accent-ring: rgba(36,86,216,0.20);

  --shadow: rgba(15,23,41,0.10);
  --shadow-strong: rgba(15,23,41,0.16);

  --ink-rgb: 15,23,41;
  --text-rgb: 15,23,41;
  /* A dark well on a light page needs far less ink than a light one on a
     dark page, so this is not a straight channel swap. */
  --sunken: rgba(15,23,41,0.05);

  --danger-text: #b42318;
  --danger-line: rgba(180,35,24,0.40);
  --danger-fill: rgba(180,35,24,0.07);
  --success-line: rgba(22,135,80,0.40);

  --logo-filter: none;
  --logo-bg: #0b1220;
  --logo-pad: 8px;
  --logo-radius: 12px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 30% 10%, var(--bg-glow) 0%, var(--bg) 55%);
  color: var(--text);
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 44px;
}

.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 50px var(--shadow);
}

.pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--fill-2);
  color: var(--text-85);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.2px;
}

.hero-text h1 {
  margin: 10px 0 6px;
  font-size: 28px;
}

.tagline {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.hero-logo {
  width: min(312px, 70vw);
  height: 78px;
  max-width: 40vw;
  object-fit: contain;
  opacity: 1;
  filter: var(--logo-filter);
  background: var(--logo-bg);
  padding: var(--logo-pad);
  border-radius: var(--logo-radius);
}

.section {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

.section h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.section-sub {
  margin: 0 0 14px;
  color: var(--muted);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr; }
  .hero {
    flex-direction: column;
  }
  .hero-logo {
    align-self: flex-end;
    width: min(312px, 70vw);
    max-width: 100%;
  }
}

.tile {
  display: block;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--fill-1);
  border-radius: 14px;
  padding: 14px;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.tile:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: var(--fill-3);
}

.tile.primary {
  border-color: var(--accent-line);
  background: var(--accent-fill);
}

.tile-title {
  font-size: 15px;
  font-weight: 750;
  margin-bottom: 6px;
}

.tile-desc {
  color: var(--text-70);
  line-height: 1.35;
  font-size: 13px;
}

.footer {
  margin-top: 14px;
  color: var(--text-55);
}

/* Footer contact block (layout based on company letterhead) */
.footer-contact {
  margin: 18px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--text-70);
  font-size: 12.5px;
  line-height: 1.45;
}

.footer-line1 {
  font-weight: 600;
}

.footer-line2 {
  margin-top: 4px;
}

.footer-line2 .label {
  font-weight: 800;
  color: var(--text-90);
}

.footer-line2 .value {
  color: var(--text-80);
}

/* Main page password gate */
.auth {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--overlay);
  backdrop-filter: blur(10px);
}

.auth-card {
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: var(--surface-strong);
  box-shadow: 0 18px 50px var(--shadow-strong);
}

.auth-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.auth-title h1 {
  margin: 10px 0 6px;
  font-size: 24px;
}

.auth-title p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}

.field span {
  color: var(--text-80);
  font-size: 13px;
  font-weight: 650;
}

.field input {
  height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill-2);
  color: var(--text);
  outline: none;
}

.field input:focus {
  border-color: var(--accent-line-strong);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.auth-actions {
  display: flex;
  justify-content: flex-end;
}

.btn {
  font: inherit;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill-4);
  color: var(--text);
  cursor: pointer;
}

.btn.primary {
  border-color: var(--accent-line-strong);
  background: var(--accent-fill-strong);
}

.btn:hover {
  border-color: var(--line-strong);
}

.auth-error {
  margin-top: 10px;
  color: var(--danger-text);
  font-weight: 650;
}

.auth-note {
  margin: 12px 0 0;
  color: var(--text-55);
  font-size: 12px;
  line-height: 1.45;
}


/* Logout sits in the control bar now, not pinned to a corner. */
.logout-btn { padding: 7px 12px; font-size: 12px; border-radius: 10px; }

/* ---------------------------------------------------------------------
   Theme toggle, matching the one in the Attendance Tracker: a bordered
   button with a square-ish corner and an SVG icon, not a shadowed pill
   with a glyph. Two apps on one site should not have two toggles.

   It no longer positions itself. The pages that have a control bar put
   it in one; anything else gets the bar's own fallback position.
   --------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-80);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.theme-toggle:hover {
  background: var(--fill-2);
  color: var(--text);
}

.theme-toggle:focus-visible {
  outline: none;
  border-color: var(--accent-line-strong);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.theme-toggle .theme-toggle-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}
.theme-toggle .theme-toggle-icon svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   The control bar: theme first, then the way out. Top right of the page,
   scrolling with it rather than riding over the content.
   --------------------------------------------------------------------- */
.top-bar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* No bar on the page: the toggle anchors itself, as it used to. */
body > .theme-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2000;
  background: var(--surface);
}

@media (max-width: 520px) {
  .theme-toggle .theme-toggle-label { display: none; }
  .theme-toggle { padding: 8px; }
}

@media print {
  .theme-toggle, .top-bar { display: none; }
}

/* ---------------------------------------------------------------------
   Password visibility toggle on the sign-in panel.

   The eye starts struck through, because the password starts hidden. It
   is not a tab stop: tabbing out of the password box should reach Sign
   in, not a toggle.
   --------------------------------------------------------------------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 38px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.pw-toggle:hover { color: var(--text); background: var(--fill-2); }

/* ---------------------------------------------------------------------
   The dashboard on the home page: the same figures the tracker shows,
   for whoever is signed in.
   --------------------------------------------------------------------- */
.dash-heading { margin: 0; font-size: 18px; font-weight: 700; }
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.dash-stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill-1);
  padding: 10px 12px;
}
.dash-stat-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dash-stat-value { margin-top: 3px; font-size: 20px; font-weight: 750; }
.dash-stat-sub { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.dash-stat-value.good { color: var(--success-text, #2e7d32); }
.dash-stat-value.bad { color: var(--danger-text); }
.dash-stat-value.warn { color: var(--warning-text, #b26a00); }

.dash-balances { margin-top: 14px; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dash-table th {
  text-align: right;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--line);
}
.dash-table th:first-child { text-align: left; }
.dash-table td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.dash-table td:first-child { text-align: left; font-weight: 600; }
.dash-table td.good { color: var(--success-text, #2e7d32); font-weight: 700; }
.dash-table td.bad { color: var(--danger-text); font-weight: 700; }
.dash-table td.muted { color: var(--muted); }
.dash-note { margin-left: 6px; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.dash-note-line { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

@media (max-width: 560px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   The home page uses the full width, as the Attendance Tracker does.

   responsive.css sets .container to min(var(--container-max), 100%), so
   raising the variable is what widens it -- a max-width here would lose
   to that rule. Scoped to the home page: the calculators and documents
   read better in a column, and a line of text the width of a desk is
   hard to follow.
   --------------------------------------------------------------------- */
body.home { --container-max: 100%; }
body.home .container { max-width: none; padding-left: 20px; padding-right: 20px; }

/* ---------------------------------------------------------------------
   The page bar, as the Attendance Tracker draws it.

   Sticky rather than fixed: it keeps its place in the flow, so the page
   below starts underneath it rather than beginning behind it and needing
   a padding guess to compensate. Full width of the window, not of the
   column, which is why it sits outside .container.

   The blur needs the background to be partly transparent to show, and a
   browser without backdrop-filter simply gets the solid colour.
   --------------------------------------------------------------------- */
.page-bar {
  position: sticky;
  top: 0;
  z-index: 1500;
  width: 100%;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}
@media (min-width: 640px) { .page-bar-inner { padding: 11px 20px; } }

.page-bar-brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.page-bar-logo { height: 26px; width: auto; }
.page-bar-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.page-bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Name, code and title on one line. It truncates rather than wrapping:
   a two-line name would make the whole bar taller on every page. */
.page-bar-who {
  font-size: 12.5px;
  color: var(--text-80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.page-bar-who .who-name { font-weight: 650; color: var(--text); }
.page-bar-who .who-sep { opacity: 0.5; margin: 0 5px; }

/* The role, in the tracker's colours: green for a super admin, blue for
   an admin, grey for everyone else. */
.role-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  background: var(--fill-2);
  color: var(--text-80);
}
.role-badge.is-super { background: rgba(34, 160, 90, 0.16); color: #22a05a; }
.role-badge.is-admin { background: rgba(43, 124, 233, 0.16); color: #5b9bf3; }
:root[data-theme='light'] .role-badge.is-super { color: #1b7a44; }
:root[data-theme='light'] .role-badge.is-admin { color: #1f5fbf; }

@media (max-width: 720px) {
  .page-bar-who { max-width: 34vw; }
  .page-bar-name { display: none; }
}
@media (max-width: 520px) {
  .page-bar-who .who-title { display: none; }
}
@media print { .page-bar { display: none; } }

/* The page bar carries its own border, so the container's 28px top
   padding and the first section's 18px margin stacked into a band of
   nothing underneath it.

   Spacing between sections comes from a flex gap rather than each
   section's own margin, because a flex gap skips a child that is
   display:none. The dashboard is the first section and is hidden until
   somebody signs in -- with margins, it left its spacing behind when it
   went, and a :first-child rule aimed at the section below it missed,
   because the hidden one is still the first child. */
body.home .container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 14px;
}
body.home .container > .section { margin-top: 0; }

/* The totals line under the balances. */
.dash-table tfoot td {
  border-top: 2px solid var(--line);
  border-bottom: 0;
  padding-top: 9px;
  font-weight: 750;
}

/* Return to the portal, matching the tracker's small secondary button. */
.page-bar .main-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 8px;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--text-80);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: none;
  box-shadow: 0 1px 2px var(--shadow);
  transition: background 150ms ease, color 150ms ease;
}
.page-bar .main-page-btn:hover { background: var(--fill-3); color: var(--text); }
.page-bar .main-page-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}