/* Self-hosted fonts (files in /public/fonts) rather than an external CDN
   like Google Fonts — this app is built to run fully offline on a local
   network (offline license activation, local SQLite, no required internet
   access), so depending on an external font CDN would undermine that the
   moment the server's internet connection is spotty or unavailable. Only
   148KB total across every weight actually used. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/public/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/public/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/public/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/public/fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/public/fonts/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/public/fonts/manrope-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/public/fonts/manrope-latin-800-normal.woff2') format('woff2');
}

:root {
  --bg: #0b1220;
  --panel: #121b2e;
  --panel-2: #172238;
  --border: #22304a;
  --text: #e6ebf5;
  --muted: #93a0b8;
  --accent: #ffb020;
  --good: #34d399;
  --bad: #f87171;
  --header-bg: rgba(18,27,46,0.7);
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  /* Two-font system: Manrope carries headings and brand moments (confident,
     geometric, a little more character than a pure UI grotesque); Inter
     handles body copy, labels, and data — it's specifically drawn for
     screen legibility at small sizes, which matters a lot on a form-heavy
     dashboard like this one. Both are now actually loaded (see <head> in
     every view) — previously "Inter" was only ever referenced in this
     file, never loaded, so every page was silently rendering in whatever
     default system font the OS happened to provide. */
  --display: 'Manrope', var(--sans);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Light mode — every color re-checked for contrast against its typical
   background (body text on --bg, panel text on --panel, muted labels on
   --panel-2) rather than just inverting the dark values, since a naive
   invert tends to produce washed-out or illegible text on white. */
html[data-theme="light"] {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --panel-2: #eef1f7;
  --border: #d7dce6;
  --text: #10182b;       /* near-black, not the muted-gray many light themes default to */
  --muted: #55617a;      /* darkened from a typical light-gray so labels stay readable on white */
  --accent: #b3690a;     /* darkened from the dark-mode gold — the bright version fails contrast on white */
  --good: #0f8f66;       /* darkened green — the dark-mode mint is too light on white */
  --bad: #d92d3f;        /* darkened red for the same reason */
  --header-bg: rgba(255,255,255,0.85); /* was a dark navy hardcoded value that never changed with theme — that's the bug: near-black --text on a permanently-dark header made nav links nearly invisible in light mode */
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at 20% -10%, rgba(255,176,32,0.06), transparent 40%),
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }

header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-text { line-height: 1.3; }

.brand-name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.brand-phone {
  font-size: 12px;
  color: var(--muted);
}

header.top nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 20px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s;
}
header.top nav a:hover, header.top nav a.active { color: var(--text); }

/* The header is a single flex row of several distinct pieces (brand, nav,
   language toggle, user info, logout) — none of those should ever wrap
   mid-phrase onto a second line individually; if the row runs out of
   room, the intended behavior is the whole header wrapping as a unit
   (see the mobile breakpoint below), not one label breaking internally. */
header.top, header.top * { white-space: nowrap; }
header.top nav { white-space: normal; }

.lang-toggle {
  margin-left: 20px;
  font-size: 13px;
  padding: 7px 12px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: var(--sans);
  cursor: pointer;
}
.lang-toggle:hover { border-color: var(--accent); }
select.lang-toggle option { background: var(--panel); color: var(--text); }

/* RTL (Sorani Kurdish) — mirror nav spacing, keep numbers/tags LTR-readable */
html[dir="rtl"] header.top nav a { margin-left: 0; margin-right: 20px; }
html[dir="rtl"] .lang-toggle { margin-left: 0; margin-right: 20px; }
html[dir="rtl"] body { font-family: 'Segoe UI', Tahoma, var(--sans); }
html[dir="rtl"] .sn, html[dir="rtl"] .tag { direction: ltr; display: inline-block; }
html[dir="rtl"] table { direction: rtl; }
html[dir="rtl"] .btnrow { flex-direction: row-reverse; justify-content: flex-end; }

main { max-width: 1180px; margin: 0 auto; padding: 32px 28px; }

.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

/* Panel headers: normal case, real size/weight instead of the small
   all-caps-plus-letterspacing treatment this used to have — that pattern
   reads as templated chrome rather than a deliberate choice, and normal
   case is easier to actually read at a glance, especially for the
   Kurdish/Arabic-script languages this app also renders in, where there's
   no separate "capital letter" form to begin with. */
.panel h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.led.on { background: var(--good); box-shadow: 0 0 8px var(--good); }
.led.off { background: var(--bad); box-shadow: 0 0 8px var(--bad); }

.device-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 16px;
  margin-bottom: 10px;
}
.device-card .row { display: flex; align-items: center; justify-content: space-between; }
.device-card .sn { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.device-card .name { font-weight: 600; font-size: 15px; }
.device-card .status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

.btnrow { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
button, .btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 15px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
button:hover { border-color: var(--accent); }
button:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button.primary { background: var(--accent); color: #1a1204; border-color: var(--accent); font-weight: 700; }
button.danger:hover { border-color: var(--bad); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#people { overflow-x: auto; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }

.person-thumb {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
}
.person-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px;
  max-width: 420px;
  width: 100%;
}
.modal-box h2 { margin-top: 0; font-size: 17px; }

th { color: var(--muted); font-weight: 600; font-size: 12.5px; }
tr:hover td { background: rgba(255,255,255,0.02); }

.tag { font-family: var(--mono); font-size: 11.5px; padding: 3px 7px; border-radius: 5px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; display: inline-block; }
.tag.entry { color: var(--good); border-color: var(--good); }
.tag.exit { color: var(--accent); border-color: var(--accent); }
.tag.warn { color: var(--bad); border-color: var(--bad); }

.cal-table { font-size: 11px; border-collapse: collapse; }
.cal-table th, .cal-table td { padding: 3px; text-align: center; border: 1px solid var(--border); }
.cal-table th.cal-name-col, .cal-table td.cal-name-col { text-align: left; padding: 6px 8px; white-space: nowrap; position: sticky; left: 0; background: var(--panel); }
.cal-cell { width: 26px; height: 26px; border-radius: 4px; font-weight: 600; cursor: default; }
.cal-present { background: rgba(52,211,153,0.18); color: var(--good); }
.cal-late { background: rgba(248,113,113,0.18); color: var(--bad); }
.cal-absent { background: rgba(248,113,113,0.35); color: var(--bad); }
.cal-holiday { background: rgba(255,176,32,0.18); color: var(--accent); }
.cal-day_off { background: var(--panel-2); color: var(--muted); }
.cal-leave { background: rgba(147,197,253,0.25); color: #60a5fa; }
.cal-business { background: rgba(196,181,253,0.25); color: #a78bfa; }
.cal-future { background: transparent; color: var(--muted); }
.cal-legend { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:12px; font-size:12.5px; }
.cal-legend span { display:inline-flex; align-items:center; gap:5px; }
.cal-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; }

/* Form labels: previously 12px, same muted color and weight as every other
   secondary bit of text on the page, sitting almost flush against the
   input below it — the actual complaint being addressed here. Now
   visibly its own thing: a size step up, medium weight, its own color,
   and enough space above/below to breathe. */
form.enroll-form { display: flex; flex-direction: column; gap: 18px; max-width: 480px; }
form.enroll-form label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: 7px;
  letter-spacing: -0.005em;
}
form.enroll-form input[type=text], form.enroll-form input[type=number], form.enroll-form select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 13px; border-radius: 8px; font-family: var(--sans); font-size: 14.5px;
  transition: border-color 0.15s;
}
form.enroll-form input[type=text]:focus, form.enroll-form input[type=number]:focus, form.enroll-form select:focus {
  border-color: var(--accent);
}
form.enroll-form input[type=file] { color: var(--muted); font-size: 13.5px; }
.checkbox-list { display: flex; flex-direction: column; gap: 7px; max-height: 160px; overflow-y: auto; border: 1px solid var(--border); padding: 12px; border-radius: 8px; background: var(--panel-2); }
.checkbox-list label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; color: var(--text); margin: 0; }

.empty { color: var(--muted); font-size: 13.5px; padding: 22px 0; text-align: center; }
.small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

form.enroll-form input[type=date] {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 13px; border-radius: 8px; font-family: var(--sans); font-size: 14.5px;
}

.photo-source-toggle { display: flex; gap: 9px; margin-bottom: 10px; }
.source-btn { flex: 1; padding: 11px 13px; }
.source-btn.active { background: var(--accent); color: #1a1204; border-color: var(--accent); font-weight: 700; }

#webcamVideo {
  width: 100%; max-width: 320px; border-radius: 9px; border: 1px solid var(--border);
  background: #000; display: block; margin-bottom: 10px;
}

#photoPreviewWrap { margin-top: 12px; }
#photoPreviewCanvas {
  width: 180px; height: 240px; border-radius: 9px; border: 1px solid var(--border);
  background: #fff; display: block; margin-top: 6px;
}

.crop-mode-toggle { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.crop-mode-toggle label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); margin: 0; font-weight: 400; }

/* ---- Mobile responsive ---- */
@media (max-width: 720px) {
  header.top { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  header.top nav a { margin-left: 0; margin-right: 16px; }
  main { padding: 20px 16px; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; gap: 14px; }
  form.enroll-form { max-width: 100%; }
  .device-card .btnrow button { flex: 1 1 calc(33% - 6px); }
  table { font-size: 12.5px; }
  th, td { padding: 8px 8px; }
  #webcamVideo, #photoPreviewCanvas { max-width: 100%; width: 100%; height: auto; }
  #photoPreviewCanvas { aspect-ratio: 480 / 640; }
}

.site-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  padding: 28px 20px;
  margin-top: 32px;
  border-top: 1px solid var(--border);
  opacity: 0.75;
}

.site-footer-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.site-footer-text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 480px) {
  .site-footer { flex-direction: column; text-align: center; gap: 8px; }
}