:root {
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --gray-bg: #f4f5f7;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --border: #dcdfe4;
  --text: #1f2430;
  --muted: #667085;
  --danger: #d92d20;
  --green: #12805c;
  --badge-active-bg: #e6f6ef;
  --badge-inactive-bg: #f2f2f2;
  --badge-edit-bg: #e8f0fe;
  --badge-delete-bg: #fdeceb;
  --badge-warning-bg: #fef3e6;
  --badge-neutral-bg: #eef0f3;
  --warning: #b5590a;
  --row-stripe: #f8f9fb;
  --row-hover: #eef2ff;
  --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] {
  --blue: #5b8def;
  --blue-dark: #7ea6f2;
  --gray-bg: #14161a;
  --card-bg: #1e2128;
  --input-bg: #20242c;
  --border: #343841;
  --text: #e8eaed;
  --muted: #9aa1ac;
  --danger: #f2705d;
  --green: #4ac694;
  --badge-active-bg: #16302a;
  --badge-inactive-bg: #2b2f38;
  --badge-edit-bg: #1e2a44;
  --badge-delete-bg: #3a1f1c;
  --badge-warning-bg: #3a2c14;
  --badge-neutral-bg: #2b2f38;
  --warning: #e0a458;
  --row-stripe: #1a1d24;
  --row-hover: #232838;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--gray-bg);
  color: var(--text);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Smooth, consistent hover/active feedback on every button and tab across
   the whole app, not just one page. */
button { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }

#app { max-width: 1100px; margin: 0 auto; padding: 16px; }

.app-footer { text-align: center; color: var(--muted); font-size: 12px; padding: 20px 0 8px; }
.version-link {
  background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer;
  padding: 0; text-decoration: underline; text-decoration-color: transparent;
}
.version-link:hover { color: var(--blue); text-decoration-color: var(--blue); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 18, 24, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal-box {
  background: var(--card-bg); border-radius: 12px; padding: 24px; max-width: 460px;
  width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.modal-box h2 { margin: 0 0 4px; font-size: 18px; }
.modal-box .empty-note { margin-top: 0; margin-bottom: 16px; }
.changelog-entry { margin-bottom: 16px; }
.changelog-entry:last-child { margin-bottom: 0; }
.changelog-version { font-weight: 700; margin-bottom: 4px; }
.changelog-entry ul { margin: 0; padding-left: 20px; font-size: 14px; }
.changelog-entry li { margin-bottom: 3px; }

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

.app-header h1 { margin: 8px 0 16px; font-size: 24px; }

.theme-toggle {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px;
  width: 40px; height: 40px; font-size: 18px; cursor: pointer; line-height: 1;
}
.theme-toggle:hover { background: var(--gray-bg); }

.live-clock { text-align: center; margin-bottom: 14px; }
.live-clock-time { font-size: 32px; font-weight: 700; letter-spacing: 0.02em; }
.live-clock-date { font-size: 14px; color: var(--muted); margin-top: 2px; }

.tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--border); flex-wrap: wrap; }

.tab-btn {
  background: none; border: none; padding: 10px 16px; font-size: 15px;
  cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent;
}
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

.tab-panel { display: none; padding-top: 16px; }
.tab-panel.active { display: block; }

.card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px; margin-bottom: 16px; box-shadow: var(--card-shadow);
}

.clock-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; }
@media (max-width: 800px) { .clock-layout { grid-template-columns: 1fr; } }

.clock-card label { display: block; font-weight: 600; margin: 12px 0 6px; font-size: 14px; }
select, input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], textarea {
  width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px;
  background: var(--input-bg); color: var(--text); font-family: inherit;
}
textarea { resize: vertical; min-height: 60px; }

.pin-display {
  height: 44px; display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 22px; letter-spacing: 6px; background: var(--gray-bg);
  border-radius: 8px; border: 1px solid var(--border);
}

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.key {
  padding: 16px 0; font-size: 18px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text); cursor: pointer;
}
.key:active { background: var(--gray-bg); }
.key-secondary { background: var(--gray-bg); font-size: 14px; }

.primary-btn {
  background: var(--blue); color: #fff; border: none; padding: 12px 18px;
  border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 14px;
}
.primary-btn:hover { background: var(--blue-dark); }
.full-width { width: 100%; }

.secondary-btn {
  background: var(--card-bg); color: var(--blue); border: 1px solid var(--blue);
  padding: 9px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.secondary-btn:hover { background: #eef3ff; }

.danger-btn { color: var(--danger); border-color: var(--danger); }
.danger-btn:hover { background: #fdeceb; }

.message { margin-top: 10px; font-size: 14px; min-height: 18px; }
.message.success { color: var(--green); }
.message.error { color: var(--danger); }

/* Table look is defined once here so every table in the app (Currently on
   the clock, Daily Detail, Weekly Summary, Employees, Activity Log) stays
   visually consistent automatically. */
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:nth-child(even) { background: var(--row-stripe); }
tbody tr:hover { background: var(--row-hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.empty-note { color: var(--muted); font-size: 14px; margin-top: 10px; }
.hidden { display: none !important; }

.subtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.subtab-btn {
  background: var(--card-bg); color: var(--text); border: 1px solid var(--border); padding: 8px 14px;
  border-radius: 20px; cursor: pointer; font-size: 14px;
}
.subtab-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filters label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--muted); gap: 4px; min-width: 160px; }
.filters button { height: 42px; margin-top: 20px; }

.report-header { display: flex; justify-content: space-between; align-items: center; }

.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inline-form input, .inline-form select { width: auto; flex: 1 1 160px; }
.inline-form textarea { width: 100%; flex: 1 1 100%; }
.inline-form input[type="time"] { flex: 1 1 110px; }
.inline-form input[type="number"] { flex: 0 1 70px; }

.checkbox-label {
  display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text);
  flex: 0 0 100%; white-space: nowrap; justify-content: flex-start;
}
.checkbox-label input[type="checkbox"] { width: auto; flex: 0 0 auto; }

.admin-session-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--gray-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; margin-bottom: 14px; font-size: 14px;
}

.pin-gate { max-width: 320px; text-align: center; }
.pin-gate input { margin-bottom: 10px; }

.punch-line { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.punch-line + .punch-line { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.punch-line-actions { display: flex; gap: 10px; flex-shrink: 0; }
.punch-line-actions button { background: none; border: none; cursor: pointer; font-size: 12px; padding: 0; }
.punch-edit-btn { color: var(--blue); }
.punch-delete-btn { color: var(--danger); }
.deduction-note { color: var(--muted); font-size: 11px; }
.muted-tag { color: var(--muted); font-size: 11px; }

.punch-edit-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.punch-edit-fields input[type="time"] { width: auto; padding: 4px 6px; font-size: 13px; }
.deduction-field { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.deduction-field input[type="number"] { width: 55px; padding: 4px 6px; font-size: 13px; }

.status-badge { padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.status-active { background: var(--badge-active-bg); color: var(--green); }
.status-inactive { background: var(--badge-inactive-bg); color: var(--muted); }
/* Same badge language as Active/Inactive/Admin above, applied to Activity
   Log actions so status indicators look consistent everywhere. */
.status-edit { background: var(--badge-edit-bg); color: var(--blue); }
.status-delete { background: var(--badge-delete-bg); color: var(--danger); }
.status-warning { background: var(--badge-warning-bg); color: var(--warning); }
.status-neutral { background: var(--badge-neutral-bg); color: var(--muted); }

.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions button { font-size: 12px; padding: 6px 10px; }

/* A list of short lines inside one table cell (punch times, activity
   details) — dashed dividers keep multiple items scannable without a
   nested table. */
.stacked-lines > div + div { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border); }

/* Every table in the app is wrapped in this on narrow screens so wide
   tables (Daily Detail, Activity Log, Employees) scroll horizontally
   instead of squeezing columns unreadably thin or breaking the layout. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Slim animated bar across the very top of the page while any request is
   in flight — mainly so a Cloud Run cold-start (a couple seconds after the
   service has been idle) doesn't look like the page is just frozen. */
.loading-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 300;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-dark) 50%, var(--blue) 100%);
  background-size: 200% 100%;
  animation: loading-bar-sweep 1.1s linear infinite;
}
@keyframes loading-bar-sweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Small non-blocking status message, replacing browser alert() popups for
   errors and action confirmations across the admin screens. */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--text); color: var(--card-bg); padding: 10px 18px; border-radius: 8px;
  font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 300; max-width: 90vw; text-align: center;
}
.toast.success { background: var(--green); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }

.location-note { display: block; margin-top: 8px; text-align: center; }

/* ==================== Responsive layout ====================
   Two breakpoints: ~800px (tablet and below — already used above for the
   Clock In/Out two-column layout) and ~640px (phones — tightens spacing,
   font sizes, and stacks anything that was side-by-side). */

@media (max-width: 800px) {
  #app { padding: 12px; }
  .app-header h1 { font-size: 21px; }
  .tab-btn { padding: 9px 12px; font-size: 14px; }
  .filters { align-items: stretch; }
  .filters label { min-width: 0; flex: 1 1 140px; }
  .report-header { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 640px) {
  #app { padding: 8px; }
  .card { padding: 14px; }
  .app-header h1 { font-size: 19px; margin: 6px 0 12px; }
  .header-top { gap: 8px; }
  .theme-toggle { width: 36px; height: 36px; font-size: 16px; }
  .tabs { gap: 4px; }
  .tab-btn { padding: 8px 9px; font-size: 13px; }

  .live-clock-time { font-size: 26px; }

  .keypad { gap: 6px; }
  .key { padding: 14px 0; font-size: 16px; }

  /* Filters, the Add Employee form, and the PIN-change form all go from a
     row of side-by-side fields to a single stacked column so nothing gets
     squeezed to an unusable width. */
  .filters { flex-direction: column; }
  .filters label { width: 100%; }
  .filters button { width: 100%; margin-top: 6px; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input, .inline-form select { width: 100%; flex: 1 1 auto; }
  .checkbox-label { white-space: normal; }

  .admin-session-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .admin-session-bar button { width: 100%; }

  .row-actions { flex-direction: column; align-items: stretch; }
  .row-actions button { width: 100%; }

  table { font-size: 13px; }
  th, td { padding: 7px 8px; }

  .modal-box { padding: 16px; }
}