/* 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 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; } h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--text); letter-spacing: -0.01em; } /* ---- App shell: sidebar + main content ---- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--border); padding: 22px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; } .brand { display: flex; align-items: center; gap: 11px; padding: 0 4px 22px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } .brand-logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; } .brand-text { line-height: 1.3; min-width: 0; } .brand-name { font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--text); } .brand-phone { font-size: 12px; color: var(--muted); } /* Nav links: stacked vertically as real nav items — a filled pill for the active page rather than the plain-text-with-underline treatment a horizontal top bar uses, since that reads better in a sidebar list. */ .sidebar nav { display: flex; flex-direction: column; gap: 2px; } .sidebar nav a { display: flex; align-items: center; color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 9px 12px; border-radius: 8px; white-space: nowrap; transition: color 0.15s, background 0.15s; } .sidebar nav a:hover { color: var(--text); background: var(--panel-2); } .sidebar nav a.active { color: var(--accent); background: rgba(179,105,10,0.1); font-weight: 600; } html[data-theme="dark"] .sidebar nav a.active { background: rgba(255,176,32,0.12); } .sidebar-bottom { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .sidebar-toggles { display: flex; gap: 8px; } .sidebar-toggles .lang-toggle { flex: 1; } .sidebar-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar-user form { flex-shrink: 0; } .sidebar-version { font-size: 11px; color: var(--muted); opacity: 0.6; font-family: var(--mono); } .lang-toggle { font-size: 13px; padding: 7px 10px; 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, Arabic, Badini) — sidebar moves to the right, border flips to the near edge, and internal rows (user info + logout) mirror their alignment. */ /* RTL (Sorani Kurdish, Arabic, Badini) — note: .app-shell doesn't need an explicit row-reverse here. display:flex with the default flex-direction (row) is already direction-aware and mirrors automatically once the document has dir="rtl" — adding row-reverse on top of that cancels the automatic mirroring back out and puts the sidebar back on the left, which is exactly the bug this comment is here to prevent reintroducing. The border and internal row alignments below still need manual mirroring since border-right/left and justify-content aren't direction-aware the same way. */ html[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--border); } 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; width: 100%; 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: 900px) { /* Below this width, a fixed 248px sidebar eats too much of the screen — it collapses into a normal horizontal block at the top of the page instead, same idea as the original top nav but built from the same sidebar markup (no separate mobile-only HTML needed). */ .app-shell, html[dir="rtl"] .app-shell { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; border-right: none; border-left: none; border-bottom: 1px solid var(--border); padding: 14px 16px; } html[dir="rtl"] .sidebar { border-left: none; } .brand { padding-bottom: 14px; margin-bottom: 14px; } .sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 4px; } .sidebar-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 14px; } .sidebar-user { flex: 1 1 auto; } 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; } }