/*
  Design notes (kept here rather than left implicit, since the choices are
  functional, not decorative):

  - Light background, not dark: this app is used outdoors in UAE sun.
    Dark UIs lose to glare; high-contrast-on-light wins readability tests
    in direct sunlight even though dark mode is the "default modern" look.
  - System font stack, not a custom display face: the app ships in ar, en,
    hi, ur, bn, ml, ne, tl, ps. Almost no single font family has real
    glyph coverage across Latin, Arabic, Devanagari, Bengali, and
    Malayalam at once — shipping one anyway means silently ugly fallback
    rendering for most of the target users. The system stack picks the
    right font per script automatically. The icons carry the visual
    personality instead; the type stays a quiet, correct delivery vehicle.
  - Every spacing/position property is a logical property (inline/block,
    not left/right/top/bottom) so flipping dir="rtl" for Arabic/Urdu/Pashto
    later costs zero CSS changes — see BLUEPRINT.md §3.6.
*/

:root {
  --color-bg: #eef0e4;        /* pale sage-stone, not the generic AI cream */
  --color-surface: #ffffff;
  --color-text: #2a2318;      /* soil/bark, not pure black */
  --color-text-muted: #6b6455;
  --color-primary: #3d6b35;   /* leaf green — primary actions */
  --color-primary-dark: #2c4e27;
  --color-accent: #c98a2c;    /* wheat gold — priority/attention */
  --color-danger: #a8432f;    /* brick red — blocked/error, not #D97757 */
  --color-border: #d8d4c4;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  --radius: 10px;
  --tap-target: 48px; /* thumbs, gloves, sun glare — never go smaller */

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-block-size: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
               "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Bengali",
               "Noto Sans Malayalam", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

button {
  font: inherit;
  min-block-size: var(--tap-target);
  min-inline-size: var(--tap-target);
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
}

input {
  font: inherit;
  min-block-size: var(--tap-target);
  padding-inline: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  inline-size: 100%;
}

input:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Login ─────────────────────────────────────────────────────── */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 100vh;
  padding: var(--space-4);
}

.login-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  inline-size: 100%;
  max-inline-size: 360px;
  box-shadow: 0 4px 24px rgba(42, 35, 24, 0.08);
  text-align: center;
}

.login-mark {
  font-size: 2.5rem;
  margin-block-end: var(--space-2);
}

.login-card h1 {
  font-size: 1.25rem;
  margin-block: 0 var(--space-4);
}

.field {
  text-align: start;
  margin-block-end: var(--space-3);
}

.field label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-block-end: var(--space-1);
}

.btn-primary {
  inline-size: 100%;
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  margin-block-start: var(--space-2);
}
.btn-primary:active { background: var(--color-primary-dark); }

.login-error {
  color: var(--color-danger);
  font-size: 0.85rem;
  min-block-size: 1.2em;
  margin-block-start: var(--space-2);
}

/* ── App shell ─────────────────────────────────────────────────── */
#app-screen header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
  position: sticky;
  inset-block-start: 0;
}

#greeting { font-weight: 600; }

.badge {
  font-size: 0.75rem;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
}
.badge--online { background: #e3efdc; color: var(--color-primary-dark); }
.badge--offline { background: #f5e6d8; color: var(--color-accent); }

/* ── Task list — the signature element: icon-first, large tap targets,
   status carried by shape+color so it reads without literacy (§3.6) ── */
#task-list {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.task--done { opacity: 0.6; }

.task-icon { font-size: 1.75rem; line-height: 1; }

.task-body {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
}

.task-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-field { font-size: 0.8rem; color: var(--color-text-muted); }

.task-status { font-size: 1.1rem; }

.pending-clock { font-size: 0.9rem; }

.btn-done {
  background: var(--color-primary);
  color: white;
  padding-inline: var(--space-3);
  font-weight: 600;
  flex-shrink: 0;
}

.empty {
  text-align: center;
  color: var(--color-text-muted);
  padding-block: var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Manager dashboard ────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) 0;
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
  overflow-x: auto;
}

.tab-btn {
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius) var(--radius) 0 0;
  white-space: nowrap;
  min-block-size: 44px;
}
.tab-btn.active {
  color: var(--color-primary);
  background: var(--color-bg);
  border-block-end: 3px solid var(--color-primary);
}

.panel {
  padding: var(--space-3);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-block-end: var(--space-2);
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.card-title { font-weight: 600; }
.card-sub { font-size: 0.85rem; color: var(--color-text-muted); }

.pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
}
.pill--warn { background: #f5e6d8; color: var(--color-accent); }
.pill--danger { background: #f3ddd6; color: var(--color-danger); }
.pill--ok { background: #e3efdc; color: var(--color-primary-dark); }

select, textarea {
  font: inherit;
  min-block-size: var(--tap-target);
  padding-inline: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  inline-size: 100%;
  background: white;
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.btn-secondary {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  padding-inline: var(--space-3);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}
.stat-value { font-size: 1.5rem; font-weight: 700; }
.stat-label { font-size: 0.75rem; color: var(--color-text-muted); }

.toast {
  position: fixed;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-3);
  background: var(--color-primary-dark);
  color: white;
  padding: var(--space-3);
  border-radius: var(--radius);
  text-align: center;
  z-index: 100;
}
.toast--error { background: var(--color-danger); }