/* ============================================================================
   checkin-system design system — Clean & Bright, indigo accent.
   Single global stylesheet. No build. Loaded via <link> on every page.
   Styles both shared component classes and the existing per-page hooks
   (e.g. .dot.working, table.week, .badge-active, button.approve, #msg.ok)
   so page JS never needs to change.
   ============================================================================ */
:root {
  --color-accent:#4f46e5; --color-accent-hover:#4338ca; --color-accent-soft:#eef2ff;
  --color-bg:#f1f5f9; --color-surface:#ffffff; --color-border:#e2e8f0;
  --color-text:#0f172a; --color-text-2:#475569; --color-text-muted:#94a3b8;
  --color-success:#16a34a; --color-success-soft:#dcfce7;
  --color-warn:#d97706;    --color-warn-soft:#fef3c7;
  --color-danger:#dc2626;  --color-danger-soft:#fee2e2;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(15,23,42,.06); --shadow-md:0 4px 12px rgba(15,23,42,.08);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC","PingFang TC",sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:28px;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font-sans); font-size:var(--fs-base); line-height:1.5;
  color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased;
}
h1 { font-size:var(--fs-xl); font-weight:700; margin:0; color:var(--color-text); }
h2 { font-size:var(--fs-lg); font-weight:600; margin:0; color:var(--color-text); }
h3 { font-size:var(--fs-md); font-weight:600; margin:0; color:var(--color-text); }
a { color:var(--color-accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Layout */
.page { max-width:720px; margin:0 auto; padding:var(--space-6) var(--space-4) var(--space-8); }
.page--wide { max-width:960px; }
.page-center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-4); }
.stack > * + * { margin-top:var(--space-3); }
.row { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.spread { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.label { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); font-weight:600; }
.text-2 { color:var(--color-text-2); }
.text-muted { color:var(--color-text-muted); }

/* App bar (page title row; the nav.js bar uses the same language) */
.app-bar {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  background:var(--color-surface); box-shadow:var(--shadow-sm);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  margin-bottom:var(--space-6);
}
.app-bar h1 { font-size:var(--fs-lg); }

/* Card */
.card {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:var(--space-4); margin-bottom:var(--space-4);
}
.card h2 { margin-bottom:var(--space-3); }

/* Buttons (shared + legacy hooks) */
.btn, button, button[type=submit] {
  font-family:inherit; font-size:var(--fs-base); font-weight:600; cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius-sm); padding:8px 16px;
  background:var(--color-accent); color:#fff; transition:background .15s,border-color .15s;
}
.btn:hover, button:hover, button[type=submit]:hover { background:var(--color-accent-hover); }
.btn-primary { background:var(--color-accent); color:#fff; border-color:transparent; }
.btn-primary:hover { background:var(--color-accent-hover); }
.btn-ghost, #logout {
  background:var(--color-surface); color:var(--color-text-2); border-color:var(--color-border);
}
.btn-ghost:hover, #logout:hover { background:var(--color-bg); color:var(--color-text); }
.btn-danger, .btn-deact, button.reject {
  background:var(--color-danger-soft); color:var(--color-danger); border-color:transparent;
}
.btn-danger:hover, .btn-deact:hover, button.reject:hover { background:var(--color-danger); color:#fff; }
button.approve, .btn-react { background:var(--color-success-soft); color:var(--color-success); border-color:transparent; }
button.approve:hover, .btn-react:hover { background:var(--color-success); color:#fff; }

/* Forms */
.field { display:flex; flex-direction:column; gap:var(--space-1); }
.field > label, form label { font-size:var(--fs-sm); color:var(--color-text-2); }
.input, input, select, textarea {
  font-family:inherit; font-size:var(--fs-base); color:var(--color-text);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-sm); padding:8px 10px;
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-accent-soft);
}

/* Tables (shared + legacy) */
.table-wrap { overflow-x:auto; border-radius:var(--radius-md); }
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
th { text-align:left; padding:10px 12px; background:#f8fafc; color:var(--color-text-2);
     font-weight:600; border-bottom:1px solid var(--color-border); }
td { padding:10px 12px; border-bottom:1px solid #f1f5f9; color:var(--color-text); }
tbody tr:hover td { background:#f8fafc; }

/* Badges / status pills (shared + legacy admin hooks) */
.badge { display:inline-block; padding:3px 10px; border-radius:var(--radius-pill);
         font-size:var(--fs-xs); font-weight:600; }
.badge-success, .badge-active { background:var(--color-success-soft); color:#15803d; }
.badge-warn { background:var(--color-warn-soft); color:#b45309; }
.badge-danger, .badge-inactive { background:var(--color-danger-soft); color:#b91c1c; }
.badge-muted { background:var(--color-bg); color:var(--color-text-2); }

/* Status dot (self_service today card) */
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.working      { background:var(--color-success); box-shadow:0 0 0 3px var(--color-success-soft); }
.dot.on_break     { background:var(--color-warning, #d97706); box-shadow:0 0 0 3px var(--color-warn-soft, #fef3c7); }
.dot.clocked_out  { background:var(--color-text-muted); box-shadow:0 0 0 3px var(--color-bg); }
.dot.not_yet      { background:var(--color-danger); box-shadow:0 0 0 3px var(--color-danger-soft); }

/* self_service today card + week table (existing hooks) */
.today-card { background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-4); max-width:420px; }
.today-state { font-weight:600; display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-md); }
.today-times { color:var(--color-text-2); font-size:var(--fs-sm); margin-top:var(--space-2); }
table.week { background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); overflow:hidden; max-width:560px; }

/* Alerts / inline messages (shared + legacy #msg/#err hooks) */
.alert { padding:9px 12px; border-radius:var(--radius-sm); font-size:var(--fs-sm); }
.alert-success, #msg.ok { background:var(--color-success-soft); color:#15803d; }
.alert-danger,  #msg.err, #err { color:var(--color-danger); }
.alert-warn { background:var(--color-warn-soft); color:#b45309; }
.empty, #loading { color:var(--color-text-muted); font-size:var(--fs-sm); padding:var(--space-2) 0; }
.flag { color:var(--color-warn); font-size:var(--fs-sm); }
.desc { font-size:var(--fs-sm); color:var(--color-text-2); margin-bottom:var(--space-3); }

/* ============================================================================
   Dark variant — only screen.html (<body class="theme-dark">)
   ============================================================================ */
body.theme-dark {
  --color-bg:#0f172a; --color-surface:#111827; --color-border:#1f2937;
  --color-text:#ffffff; --color-text-2:#9ca3af;
  background:var(--color-bg); color:var(--color-text);
}

/* Language switcher (js/settings.js) */
.lang-menu { position: relative; display: inline-block; }
.lang-gear { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  padding: 6px; border-radius: 8px; color: var(--color-text-2, #475569); }
.lang-gear:hover { background: var(--color-bg, #f1f5f9); }
.lang-list { position: absolute; right: 0; top: 100%; margin-top: 4px;
  background: var(--color-surface, #fff); box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,.12));
  border-radius: 8px; padding: 4px; z-index: 50; min-width: 120px; }
.lang-item { display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--color-text, #0f172a); }
.lang-item:hover { background: var(--color-bg, #f1f5f9); }
.lang-item.active { font-weight: 700; color: var(--color-accent, #4f46e5); }
.lang-fab { position: fixed; top: 10px; right: 12px; z-index: 100; }
.admin-nav .lang-menu { margin-left: 8px; }