@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ink */
  --ink: #0b0b0b;
  --ink-secondary: #52514e;
  --ink-muted: #898781;
  /* surfaces */
  --page: #f7f7f5;
  --surface: #fcfcfb;
  --border: rgba(11, 11, 11, 0.09);
  --gridline: #e5e4dd;

  /* legacy aliases - existing rules keep working, now on-palette */
  --black: var(--ink);
  --gray-900: #1a1a1a;
  --gray-600: var(--ink-secondary);
  --gray-400: var(--ink-muted);
  --gray-200: var(--gridline);
  --gray-100: #f0efea;
  --gray-50: var(--page);
  --white: var(--surface);

  /* categorical (fixed order, never cycled) */
  --cat-blue: #2a78d6;
  --cat-aqua: #1baf7a;
  --cat-yellow: #eda100;
  --cat-green: #008300;
  --cat-violet: #4a3aa7;
  --cat-red: #e34948;
  --cat-magenta: #e87ba4;
  --cat-orange: #eb6834;
  --blue: var(--cat-blue);

  /* status (reserved, never reused as series color) */
  --good: #0ca30c;
  --good-soft: #e6f4e6;
  --warning: #fab219;
  --warning-soft: #fef3da;
  --serious: #ec835a;
  --critical: #d03b3b;
  --red: var(--critical);

  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05), 0 1px 1px rgba(11, 11, 11, 0.03);
  --shadow-md: 0 12px 28px rgba(11, 11, 11, 0.09), 0 3px 8px rgba(11, 11, 11, 0.05);
  --shadow-lg: 0 20px 45px rgba(11, 11, 11, 0.14), 0 6px 14px rgba(11, 11, 11, 0.06);

  --brand-gradient: linear-gradient(90deg, var(--cat-blue), var(--cat-violet));

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.top-bar {
  height: 4px;
  background: var(--brand-gradient);
}

/* ---------- Login page ---------- */

.login-page {
  min-height: calc(100vh - 4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(42, 120, 214, 0.07), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(74, 58, 167, 0.06), transparent 45%),
    var(--page);
}

.login-page .brand-logo-login {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin-bottom: 4px;
}

.login-page h1.brand {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 32px;
}

.login-card {
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 28px;
}

.login-card h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}

.login-card p.subtitle {
  font-size: 13px;
  color: var(--ink-secondary);
  margin: 0 0 24px;
  line-height: 1.5;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 6px;
}

/* Baseline for every <select> in the app, regardless of where it's placed -
   a bare <select> outside .field/.list-toolbar previously fell back to the
   browser's unstyled default, which is what caused the inconsistent look. */
select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

select:focus {
  outline: none;
  border-color: var(--cat-blue);
  box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.12);
}

/* Same reasoning as the bare <select> rule above - a .search-input outside
   .list-toolbar (e.g. task-types.html's sidebar list) previously fell back
   to the browser's unstyled default. */
.search-input {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--cat-blue);
  box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.12);
}

.field input, .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--cat-blue);
  box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.12);
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--ink);
  color: var(--surface);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-primary:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

.error-box {
  background: #fdf1f0;
  border: 1px solid rgba(208, 59, 59, 0.25);
  color: var(--critical);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: none;
}

/* ---------- Dashboard layout ---------- */

.app {
  display: flex;
  height: calc(100vh - 4px);
  overflow: hidden;
}

.sidebar {
  width: 260px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  margin-left: -260px;
  transition: margin-left 0.2s ease;
}

body.sidebar-open .sidebar {
  margin-left: 0;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 1400px) {
  .user-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Below tablet width the sidebar overlays the content instead of pushing it,
   with a dimmed backdrop (closing it is handled in layout.js). */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    box-shadow: var(--shadow-md);
  }

  body.sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(11, 11, 11, 0.45);
    z-index: 55;
  }

  .user-grid { grid-template-columns: repeat(2, 1fr); }
}

.sidebar .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
}

.sidebar .logo .brand-logo {
  width: 100%;
  max-width: 130px;
  height: auto;
  object-fit: contain;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-secondary);
  text-decoration: none;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item.active {
  background: rgba(42, 120, 214, 0.08);
  border-left-color: var(--cat-blue);
  color: var(--ink);
  font-weight: 700;
}
.nav-item.active svg { stroke: var(--cat-blue); }
.nav-item:hover:not(.active) { background: var(--gray-100); color: var(--ink); transform: translateX(2px); }

.sidebar-spacer { flex: 1; }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.user-chip .name { font-size: 13px; font-weight: 600; }
.user-chip .email { font-size: 12px; color: var(--gray-600); }

.main {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
}

.test-version-banner {
  text-align: center;
  color: #0d9488;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 0 0;
  letter-spacing: 0.3px;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(252, 252, 251, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.main-header .crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn-outline:hover { background: var(--gray-100); border-color: rgba(11, 11, 11, 0.16); }

.content { padding: 28px 32px 48px; }

.toolbar-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

h3.section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.stat-card, .user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.stat-card:hover, .user-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.user-card { cursor: pointer; }

.stat-card-clickable { cursor: pointer; }

.stat-card-link {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--cat-blue);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.stat-card-clickable:hover .stat-card-link { opacity: 1; transform: translateX(0); }

.stat-card .stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.stat-card .stat-head .stat-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-secondary);
}

.stat-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon-badge svg { width: 17px; height: 17px; }

.stat-card .stat-row {
  display: flex;
  gap: 32px;
}

.stat-card .stat-label { font-size: 12px; color: var(--ink-muted); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums;
}

.user-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.user-card { padding: 16px; position: relative; }

/* Applied to every card whose employee logged in or worked within the last
   30 minutes - several can be highlighted at once, since several people can
   be on shift simultaneously. */
.user-card-recent {
  border-color: var(--cat-blue);
  box-shadow: 0 0 0 1px var(--cat-blue), var(--shadow-sm);
}
.user-card-recent:hover { box-shadow: 0 0 0 1px var(--cat-blue), var(--shadow-md); }

.user-card .u-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.user-card .avatar { width: 34px; height: 34px; font-size: 13px; flex-shrink: 0; }

.user-card .u-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}

.user-card .u-row {
  display: flex;
  gap: 18px;
  margin-bottom: 12px;
}

.user-card .stat-value { font-size: 19px; letter-spacing: -0.01em; }
.user-card .stat-label { font-size: 10px; }

.user-card .login-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-muted);
  font-weight: 500;
}

.freshness-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-200);
  flex-shrink: 0;
}
.freshness-dot.is-live {
  background: var(--good);
  box-shadow: 0 0 0 3px var(--good-soft);
}

.live-emp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.user-card .progress-track { margin-top: 6px; margin-bottom: 12px; }

/* The "Horaire" (Début/Fin/Total) block - set apart from the plain Tâches/
   Aller/Retour row with its own tinted tile and section title, rather than
   reusing the exact same bare .u-row look, since mixing a time-tracking
   figure in with simple task counts read as sloppy/unfinished. */
.user-card .horaire-box {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.user-card .horaire-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.user-card .horaire-row { display: flex; gap: 14px; }

.user-card .horaire-item { flex: 1; min-width: 0; }

.user-card .horaire-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Toujours actif" is text, not a time - too long to read as a bold 15px
   value in a narrow column without this. */
.user-card .horaire-value-text { font-size: 11.5px; font-weight: 600; color: var(--ink-secondary); }

/* Total is the figure an admin actually comes here to check - set apart in
   the app's accent color so it reads first, same role --cat-blue plays for
   the goal-progress bar elsewhere on this card. */
.user-card .horaire-value-accent { color: var(--cat-blue); font-size: 17px; }

.progress-track {
  height: 6px;
  background: var(--gray-100);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--cat-blue);
  border-radius: 4px;
  transition: width 0.3s ease;
}


.empty-state {
  color: var(--gray-600);
  font-size: 14px;
  padding: 24px 0;
}

.loading {
  color: var(--gray-600);
  font-size: 14px;
}

/* ---------- Toolbar / list pages (Clients, Employees, Tasks, ...) ---------- */

.list-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.list-toolbar .search-input {
  flex: 1;
  min-width: 200px;
}

.list-toolbar select,
.list-toolbar input[type="date"],
.list-toolbar input[type="text"] {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--surface);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-dark:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-dark:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.card-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-secondary);
}

.pagination-controls { display: flex; align-items: center; gap: 6px; }

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--gray-900);
}
.page-btn:hover:not(:disabled) { background: var(--gray-100); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }

table.data-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}

/* Client-facing tables (My Requests, History) reuse .data-table but drop the
   admin table's wide min-width and generous padding - those pages are read
   by a client on any screen size, not an admin scanning dozens of dense rows. */
table.data-table.client-table { min-width: 0; }
table.data-table.client-table th,
table.data-table.client-table td { padding: 10px 12px; font-size: 13px; }

table.data-table th {
  text-align: left;
  background: var(--gray-50);
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

table.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
  color: var(--ink-secondary);
}

table.data-table tbody tr { transition: background 0.1s ease; }
table.data-table tbody tr:hover { background: var(--gray-50); }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table td.strong { font-weight: 700; color: var(--ink); }

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.badge-active { background: var(--good); }
.badge-inactive { background: var(--critical); }
.badge-submitted { background: var(--cat-blue); }
.badge-in_progress { background: var(--warning); color: var(--ink); }
.badge-ready { background: var(--good); }
.badge-in_transit { background: var(--warning); color: var(--ink); }
.badge-delivered { background: var(--good); }
.badge-priority-low { background: var(--gray-100); color: var(--ink-secondary); }
.badge-priority-medium { background: var(--warning); color: var(--ink); }
.badge-priority-high { background: var(--critical); }

.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-secondary);
  cursor: pointer;
  margin-right: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.icon-btn:hover { background: var(--gray-100); color: var(--ink); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn.danger:hover { background: #fdf1f0; border-color: rgba(208, 59, 59, 0.3); color: var(--critical); }

/* A small styled preview box on hover, e.g. for a task's comment on tasks.html
   - explicit feedback: the plain browser tooltip a native title="..." gives
   is easy to miss and slow to appear, and "juste en passant la souris" asked
   for something more like a visible little card instead. CSS-only (no JS)
   so it works anywhere data-tooltip is set. */
.tooltip-trigger { position: relative; }
.tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background: var(--ink);
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: left;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.tooltip-trigger:hover::after {
  opacity: 1;
  visibility: visible;
}

#editModeToggle.active { background: var(--cat-blue); color: #fff; border-color: var(--cat-blue); }

.editable-label { position: relative; }
.edit-pencil {
  display: none;
  margin-left: 5px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.6;
}
.edit-pencil:hover { opacity: 1; }
/* Only shown while Edit Mode is on (layout.js toggles this body class) -
   otherwise every admin-configurable header would permanently show a pencil,
   which is noisy for the vast majority of time nobody's renaming anything. */
body.edit-mode-active .edit-pencil { display: inline-block; }
body.edit-mode-active .editable-label { outline: 1px dashed var(--cat-blue); outline-offset: 3px; border-radius: 3px; }

/* Custom-column controls (reorder/delete arrows on a header, the "+ add
   column" button) - same reasoning as .edit-pencil: only worth showing while
   Edit Mode is on, otherwise they're just noise next to every table. */
.custom-column-controls, .add-column-btn { display: none; }
body.edit-mode-active .custom-column-controls { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
body.edit-mode-active .add-column-btn { display: inline-flex; }

.actions-cell { white-space: nowrap; }

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 11, 0.45);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Leaflet's own panes/controls (user-tasks.html, clients.html,
     live-tracking.html) default to z-index values up to 1000 - comfortably
     higher than this overlay's old z-index:50, which let a map painted
     further down the page show through a modal on top of it instead of
     being covered like every other element. Cleared well above that. */
  z-index: 1500;
  padding: 20px;
}

.modal-box {
  background: var(--surface);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  /* table.data-table has a 640px min-width, wider than the modal itself on
     any phone screen - without this, a table inside a modal (e.g. the
     Outbound/Return summary) overflows the box instead of scrolling. */
  overflow-x: auto;
  box-shadow: var(--shadow-md);
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--ink);
}

.modal-box .field { margin-bottom: 14px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* ---------- Groups / Team page ---------- */

.groups-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.group-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
}
.group-row:hover { background: var(--gray-50); }
.group-row.selected { background: var(--gray-100); }
.group-row:last-child { border-bottom: none; }

/* ---------- Toast notifications ---------- */

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  /* Above .modal-overlay (1500) - a toast (e.g. a failed-save error) must
     stay visible even while a modal is open on top of it. */
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}

.toast {
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-visible { opacity: 1; transform: translateY(0); }
.toast-error { background: var(--critical); }
.toast-success { background: var(--good); }
.toast-info { background: var(--ink); }

@media (max-width: 640px) {
  .toast-container { top: 12px; right: 12px; left: 12px; max-width: none; }
}

.tab-row {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.tab-btn {
  padding: 10px 20px;
  border: none;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-secondary);
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn:not(:last-child) { border-right: 1px solid var(--border); }
.tab-btn:hover:not(.active) { background: var(--gray-100); }
.tab-btn.active { background: var(--ink); color: var(--surface); }
.tab-btn .tab-count { opacity: 0.75; }

.panel-title {
  font-weight: 700;
  font-size: 15px;
  padding: 16px;
  border-bottom: 1px solid var(--gray-200);
}

.checkbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* ---------- Task types page ---------- */

.tasktype-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}

.tasktype-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}
.tasktype-row:hover { background: var(--gray-50); }
.tasktype-row.selected { border-color: var(--black); }

.option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}

/* ---------- Employee "My Tasks" experience (separate, simpler chrome, no sidebar) ---------- */

.emp-page { min-height: calc(100vh - 4px); background: var(--white); padding-bottom: 100px; }

.emp-logo-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 6px 16px;
}
.emp-logo-banner img { height: 46px; width: auto; }
/* Absolutely positioned so the logo stays perfectly centered regardless of
   the language switcher's width - keeps it out of the header row below,
   which is already tight on a phone screen (client pill, switch client,
   clock out, log out). */
.emp-logo-banner .lang-switch-corner { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
/* Mirrors the language switcher above, on the opposite side - the vehicle
   locator (magnifying glass) needs to be reachable from every page, so it
   sits next to the logo rather than buried in one specific screen. */
.vehicle-search-corner { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }

.emp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-200);
}

.emp-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.emp-header .crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}
.emp-header .crumb a { color: var(--gray-900); display: flex; align-items: center; }

.emp-content { max-width: 1200px; margin: 0 auto; padding: 20px 24px; }

.goal-status-card {
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.goal-status-card .goal-title { font-weight: 600; margin-bottom: 12px; }
.goal-status-card .progress-track { height: 8px; }

.task-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.emp-task-card {
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px;
}

.emp-task-card .row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-black {
  display: inline-block;
  padding: 5px 12px;
  background: var(--black);
  color: var(--white);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-right: 6px;
}

.pill-outline {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.emp-task-card .client-name { font-weight: 700; font-size: 16px; margin-bottom: 8px; }

.emp-task-card .meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 6px;
}
.emp-task-card .meta-row svg { width: 14px; height: 14px; flex-shrink: 0; }

.view-details-btn {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--gray-100);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--gray-900);
}
.view-details-btn:hover { background: var(--gray-200); }

.fab-add-task {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 30px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

/* ---------- New task wizard ---------- */

.wizard-shell { max-width: 620px; margin: 40px auto 0; padding: 0 20px; }

.wizard-summary {
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.wizard-summary div { margin-bottom: 6px; font-weight: 600; }
.wizard-summary div:last-child { margin-bottom: 0; }

.wizard-title { text-align: center; font-weight: 700; font-size: 18px; margin-bottom: 20px; }

.type-choice-row { display: flex; gap: 14px; margin-bottom: 14px; }
.type-choice-row .btn-dark { flex: 1; justify-content: center; padding: 14px; font-size: 14px; }

.reg-input-row { display: flex; gap: 8px; }
.reg-input-row input { flex: 1; }
.reg-icon-btn {
  width: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.reg-icon-btn:hover { background: var(--gray-200); }

.tasktype-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.tasktype-choice {
  padding: 16px;
  background: var(--black);
  color: var(--white);
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.tasktype-choice:hover { background: var(--gray-900); }

.option-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}
.option-checkbox-row input { width: 18px; height: 18px; }

.vehicle-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }

.upload-dropzone {
  border: 1px dashed var(--gray-200);
  border-radius: 10px;
  padding: 32px 20px;
  text-align: center;
  color: var(--gray-600);
  font-size: 13px;
  margin: 16px 0;
  cursor: pointer;
}
.upload-dropzone svg { margin-bottom: 8px; }

textarea.notes-input {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  /* Title/hamburger on one side, bell + edit-toggle + lang switch + logout
     on the other - on a narrow phone with a longer page title these don't
     fit on one line. .emp-header (the employee-side equivalent) already
     wraps; this brings the admin header to parity. */
  .main-header { padding: 12px 16px; flex-wrap: wrap; row-gap: 10px; }
  .main-header .crumb { font-size: 14px; gap: 6px; }
  .content { padding: 16px 12px 40px; }

  .tasktype-layout { grid-template-columns: 1fr; }
  .groups-layout { grid-template-columns: 1fr; }
  .tasktype-grid { grid-template-columns: 1fr; }
  .type-choice-row { flex-direction: column; }

  .emp-header { padding: 12px 16px; }
  .emp-content { padding: 16px 12px; }

  .wizard-shell { margin-top: 20px; padding: 0 12px; }

  .modal-overlay { padding: 16px; }
  .modal-box { padding: 18px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { flex: 1 1 auto; }

  .stat-card .stat-row, .user-card .u-row { flex-wrap: wrap; gap: 16px; }

  .user-grid { grid-template-columns: 1fr; }

  .fab-add-task { bottom: 16px; padding: 12px 20px; font-size: 13px; left: 16px; right: 16px; transform: none; justify-content: center; }

  .list-toolbar .search-input { min-width: 100%; }

  /* iOS Safari/Chrome auto-zoom the whole page in when a tapped text field's
     font-size is under 16px, and critically never zoom back out on their own
     once the field loses focus - the visible symptom being "the search bar
     stays zoomed in until I pinch back out by hand". 16px is the documented
     threshold below which this kicks in. Matched by input type/tag rather
     than by class, so this also covers inline-styled fields that set no
     font-size of their own (e.g. the wizard's number-step inputs) - phone
     only, desktop keeps the tighter 14px look everywhere. */
  input[type="text"], input[type="search"], input[type="number"],
  input[type="date"], input[type="time"], input[type="email"],
  input[type="tel"], input[type="password"], select, textarea {
    font-size: 16px;
  }

  table.data-table th, table.data-table td { padding: 10px 12px; }

  /* .option-row/.tasktype-row/.group-row (queue on my-tasks, the type list on
     task-types, the group list on team) all pin their action buttons to one
     un-wrapping line via .actions-cell's white-space:nowrap - fine on
     desktop, but on a phone that line is wider than the screen and just runs
     off the edge instead of wrapping. Stack the info and the buttons, and
     let the buttons wrap onto multiple rows.
     Scoped to these three row types only - .actions-cell is also used as a
     plain <td> inside data tables (clients/employees/destinations/etc.),
     where display:flex would break table-cell layout; those already scroll
     the whole table horizontally instead, which is the right behaviour there. */
  .option-row, .tasktype-row, .group-row { flex-wrap: wrap; gap: 8px; align-items: flex-start; }
  .option-row .actions-cell, .tasktype-row .actions-cell, .group-row .actions-cell {
    white-space: normal; display: flex; flex-wrap: wrap; gap: 8px; width: 100%;
  }
}

/* ---------- Small phones ---------- */

@media (max-width: 420px) {
  .vehicle-row { flex-wrap: wrap; }
  .vehicle-row .vehicleBrand, .vehicle-row .vehicleReg { flex-basis: 100%; }
}

/* ---------- Language switcher ---------- */

#langSwitchMount {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-right: 10px;
}

.lang-switch-btn {
  padding: 7px 11px;
  border: none;
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switch-btn:not(:last-child) { border-right: 1px solid var(--border); }
.lang-switch-btn.active { background: var(--ink); color: var(--surface); }
.lang-switch-btn:hover:not(.active) { background: var(--gray-100); }