/* PACS Time Clock — shared design system
   Matches Claude Design mockup 1a "Crest Classic": navy masthead, crimson
   action, corporate calm, on a clean off-white page. */

/* Fonts are bundled locally (web/fonts/) so the app renders instantly and
   identically with no internet access - never fetch them from the web. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/PublicSans.woff2') format('woff2');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/SplineSansMono.woff2') format('woff2');
}

:root {
  --navy: #16304f;
  --navy-dark: #0f2340;
  --crimson: #a91e32;
  --crimson-dark: #93192b;
  --crimson-darker: #7d1424;
  --blue: #2458b3;
  --blue-tint: #eef4fc;
  --green: #1c7a43;
  --green-dark: #156335;
  --green-tint: #eef6f0;
  --green-border: #cfe5d6;
  --green-bright: #65d18e;
  --amber-text: #8a5a12;
  --amber-bg: #fcf3e2;
  --amber-border: #f0dfba;
  --danger-text: #a91e32;
  --danger-bg: #fbf1f2;
  --danger-border: #ecc9ce;
  --ink: #25303d;
  --text: #5a6472;
  --text-2: #6b7581;
  --muted: #8a94a1;
  --muted-2: #9aa3ad;
  --line: #e3e6ea;
  --line-2: #eef0f3;
  --line-3: #f2f4f6;
  --field-border: #d4dae1;
  --panel-bg: #fafbfc;
  --page-bg: #eceef1;
  --radius-lg: 10px;
  --radius-md: 9px;
  --radius-sm: 7px;
  --shadow-card: 0 12px 32px -12px rgba(22, 48, 79, .25), 0 1px 3px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.mono { font-family: 'Spline Sans Mono', 'Consolas', monospace; }

button { font-family: inherit; }

/* ---- layout shells --------------------------------------------------- */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #fff;
}

.masthead {
  background: var(--navy);
  padding: 20px 28px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.masthead .titles .app-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
}

.masthead .titles .app-sub {
  font-size: 11px;
  color: #a9bcd6;
  font-weight: 500;
  margin-top: 2px;
}

/* ---- buttons ----------------------------------------------------------- */
.btn {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  font-family: 'Public Sans', sans-serif;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.btn-primary {
  background: var(--crimson);
  color: #fff;
  font-size: 16px;
  padding: 14px;
  border-radius: var(--radius-lg);
  letter-spacing: .3px;
  box-shadow: 0 2px 0 var(--crimson-darker);
}
.btn-primary:hover { background: var(--crimson-dark); }
.btn-primary:disabled { background: var(--muted-2); box-shadow: none; cursor: default; }

.btn-navy {
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
}
.btn-navy:hover { background: var(--navy-dark); }

.btn-crimson-sm {
  background: var(--crimson);
  color: #fff;
  font-size: 12px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
}
.btn-crimson-sm:hover { background: var(--crimson-dark); }

.btn-outline-blue {
  color: var(--blue);
  border: 1.5px solid var(--blue);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}
.btn-outline-blue:hover { background: var(--blue-tint); }

.btn-outline {
  color: var(--text);
  border: 1px solid var(--field-border);
  font-size: 11.5px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-outline-danger {
  color: var(--crimson);
  border: 1px solid var(--danger-border);
  font-size: 11.5px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
}
.btn-outline-danger:hover { background: var(--danger-bg); }

.btn-success {
  background: var(--green);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
}
.btn-success:hover { background: var(--green-dark); }

.btn-link {
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-link:hover { color: var(--navy); }

/* ---- badges -------------------------------------------------------- */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  letter-spacing: .3px;
}
.badge-success { color: var(--green); background: var(--green-tint); }
.badge-muted { color: var(--muted); background: var(--line-3); }
.badge-danger { color: var(--danger-text); background: var(--danger-bg); }
.badge-warning { color: var(--amber-text); background: var(--amber-bg); border: 1px solid var(--amber-border); }
.badge-count { color: var(--text); background: var(--line-2); }

/* ---- form fields ----------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.field input[type=text], .field input[type=password], .field input[type=email],
.field input[type=tel], .field input[type=number], .field input[type=date],
.field select, .field textarea {
  font-family: 'Public Sans', sans-serif;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: #fbfcfd;
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy);
}
.field.mono-field input { font-family: 'Spline Sans Mono', monospace; }

/* ---- tables ------------------------------------------------------------ */
.data-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.data-table .row {
  display: grid;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-3);
}
.data-table .row:last-child { border-bottom: none; }
.data-table .head {
  background: var(--panel-bg);
  border-bottom: 1px solid var(--line-2);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 14px;
}
.data-table .row.body:hover { background: #f6f9fd; }

/* ---- scrollbars (kept subtle) ----------------------------------------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cfd6dd; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- modal ---------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 25, 40, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow: auto;
}
.modal-head {
  background: var(--navy);
  color: #fff;
  padding: 16px 22px;
  font-size: 14px;
  font-weight: 800;
}
.modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot {
  padding: 14px 22px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal-error {
  font-size: 12px;
  color: var(--crimson);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: none;
}
.modal-error.show { display: block; }

/* ---- toast / status banners -------------------------------------------- */
.banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 12px;
  line-height: 1.5;
}
.banner-success { background: var(--green-tint); border: 1px solid var(--green-border); color: #1d5533; }
.banner-error { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--crimson); }
.banner .dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.banner-success .dot { background: var(--green); }
.banner-error .dot { background: var(--crimson); }

/* ---- admin shell --------------------------------------------------- */
.admin-shell { display: flex; flex-direction: column; height: 100vh; min-height: 0; background: #fff; }
.admin-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 16px 0;
  background: var(--navy);
  flex: none;
  overflow-x: auto;
}
.admin-tab {
  font-size: 12px;
  font-weight: 600;
  padding: 9px 16px 10px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  color: #a9bcd6;
  background: rgba(255, 255, 255, .06);
  white-space: nowrap;
}
.admin-tab.active { color: var(--navy); background: #fff; }
.admin-tab:hover:not(.active) { color: #fff; }
.admin-panel { display: none; flex: 1; min-height: 0; overflow-x: auto; overflow-y: scroll; scrollbar-gutter: stable; flex-direction: column; }
.admin-panel.active { display: flex; }

.panel-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  flex: none;
}
.panel-title { font-size: 14px; font-weight: 800; color: var(--navy); }

.summary-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 12px 20px 16px;
  background: var(--navy);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  flex: none;
}
.summary-bar .stat-label {
  font-size: 10px; font-weight: 700; color: #8fa2ba;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.summary-bar .stat-value { font-size: 20px; font-weight: 600; color: #fff; margin-top: 2px; }
.summary-bar .stat-value.green { color: var(--green-bright); }

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}