/* ==========================================================================
   26 Business Center - V2 STYLESHEET
   Pixel-matches mockup_incoming_v2.html. Tokens from 26brandingagency.com.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --c-ink-1000: #040612;
  --c-ink-900:  #0b0f1e;
  --c-ink-800:  #111728;
  --c-ink-700:  #1a2135;
  --c-ink-600:  #2a3045;
  --c-ink-500:  #4b5368;
  --c-ink-400:  #6b7489;
  --c-ink-300:  #9aa2b5;
  --c-ink-200:  #c9cdd9;
  --c-ink-100:  #e6e8ef;
  --c-white:    #ffffff;
  --c-red-700:  #c11616;
  --c-red-600:  #dc1f1f;
  --c-red-500:  #ef2929;
  --c-red-400:  #ff4545;

  --bg:          var(--c-ink-1000);
  --surface:     var(--c-ink-900);
  --surface-2:   var(--c-ink-800);
  --border:      rgba(201,205,217,0.06);
  --border-strong: rgba(201,205,217,0.10);
  --text:        var(--c-white);
  --text-soft:   var(--c-ink-200);
  --text-muted:  var(--c-ink-400);
  --text-dim:    var(--c-ink-500);

  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-5: 16px; --r-6: 24px; --r-full: 9999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --side-padding: 20px;
  --content-max: 780px;
  --shadow-md: 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.45);
  --shadow-glow: 0 0 0 1px rgba(239,41,41,.25), 0 8px 24px rgba(239,41,41,.22);
  --d-fast: .18s; --d-base: .32s;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.22,1,.36,1);
  --font-sans:  "Inter", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono:  "JetBrains Mono", monospace;
  --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 24px;

  /* Theme-driven overlay tokens (recomputed by [data-theme="light"] below) */
  --glass-bg: rgba(11,15,30,0.82);
  --dropdown-bg: #0B1020;
  --modal-overlay-bg: rgba(4,6,18,0.72);
  --urgent-gradient: linear-gradient(180deg, rgba(220,31,31,.10) 0%, var(--surface) 80%);

  /* Legacy aliases (so any unmigrated rules keep working harmlessly) */
  --bg-color: var(--bg);
  --surface-color: var(--surface);
  --border-color: var(--border-strong);
  --input-bg-color: var(--surface-2);
  --primary-text-color: var(--text);
  --secondary-text-color: var(--text-muted);
  --primary-accent: var(--c-red-600);
  --border-radius: var(--r-5);
  --btn-border-radius: var(--r-2);
  --font-family: var(--font-sans);
  --status-seen: #4b9eff;
  --status-working: #f59e0b;
  --status-completed: #4ade80;
  --note-color: #b65bff;
  --shadow: var(--shadow-md);
  --transition: all var(--d-fast) var(--ease-out);
}

/* ===== LIGHT THEME OVERRIDES =====
   Toggle by setting <html data-theme="light"> (controlled by JS in index.php).
   Only the surface/text/border tokens flip — brand red, status colors,
   font families and shadows stay the same.                                  */
:root[data-theme="light"] {
  --bg:          #fafbfd;
  --surface:     #ffffff;
  --surface-2:   #f5f6fa;
  --border:      rgba(11,15,30,0.06);
  --border-strong: rgba(11,15,30,0.14);
  --text:        #0b0f1e;
  --text-soft:   #2a3045;
  --text-muted:  #4b5368;
  --text-dim:    #6b7489;

  --glass-bg:    rgba(255,255,255,0.85);
  --dropdown-bg: #ffffff;
  --modal-overlay-bg: rgba(11,15,30,0.45);
  --urgent-gradient: linear-gradient(180deg, rgba(220,31,31,.06) 0%, var(--surface) 80%);

  --shadow-md: 0 4px 12px rgba(11,15,30,.08);
  --shadow-lg: 0 12px 40px rgba(11,15,30,.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--t-base); line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; padding-bottom: 92px; }
a, button { color: inherit; font-family: inherit; }
button { background: none; border: 0; cursor: pointer; }
.hidden { display: none !important; }

/* ============================================================
   APP CONTAINER
============================================================ */
.app-container { max-width: var(--content-max); margin: 0 auto; padding: 0; }

/* ============================================================
   TOP BAR (mockup)
============================================================ */
.app-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 16px var(--side-padding) 12px;
  background: linear-gradient(to bottom, var(--bg) 70%, rgba(4,6,18,0));
}
.app-header .header-left,
.app-header .header-controls {
  display: flex; align-items: center; gap: var(--s-2);
}
.app-header .spacer { flex: 1; }
.icon-btn, .header-icon-btn, .audio-btn {
  width: 40px; height: 40px;
  border-radius: var(--r-3);
  display: grid; place-items: center;
  color: var(--text);
  background: transparent;
  border: 0;
  font-size: 1.05rem;
  transition: background var(--d-fast) var(--ease-out);
}
.icon-btn:hover, .header-icon-btn:hover, .audio-btn:hover { background: var(--surface); }
.logo-emblem { width: 28px; height: 28px; }
.logo-container { display: none; }  /* hidden per mockup */
.logo-text { display: none; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lang-toggle {
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.lang-toggle button {
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.lang-toggle button.active { background: var(--text); color: var(--bg); }

/* Punch clock button (visible in top bar) */
#header-punch-btn, .punch-clock-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
#header-punch-btn:hover { border-color: rgba(201,205,217,.20); background: var(--surface-2); }
#header-punch-btn .punch-icon-wrapper {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  display: grid; place-items: center;
  font-size: 11px;
  transition: all var(--d-fast) var(--ease-out);
}
#header-punch-btn .punch-time-display { display: inline-flex; flex-direction: column; line-height: 1.05; text-align: left; }
#header-punch-btn .punch-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
#header-punch-btn .punch-timer {
  font-size: 12.5px; color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Punched-in state: green button, green dot, white timer */
#header-punch-btn.is-punched-in {
  background: rgba(74,222,128,0.12);
  border-color: rgba(74,222,128,0.40);
  color: #4ade80;
}
#header-punch-btn.is-punched-in .punch-icon-wrapper {
  background: #4ade80;
  color: #022c0d;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.18);
}
#header-punch-btn.is-punched-in .punch-label { color: #4ade80; }
#header-punch-btn.is-punched-in .punch-timer { color: #ffffff; }

/* Zen-time variant: purple */
#header-punch-btn.is-zen-time {
  background: rgba(182,91,255,0.12);
  border-color: rgba(182,91,255,0.40);
}
#header-punch-btn.is-zen-time .punch-icon-wrapper {
  background: var(--note-color);
  color: #1a0033;
  box-shadow: 0 0 0 3px rgba(182,91,255,0.18);
}
#header-punch-btn.is-zen-time .punch-label { color: var(--note-color); }

@media (max-width: 600px) {
  #header-punch-btn .punch-time-display { display: none; }
  #header-punch-btn { padding: 0; width: 38px; justify-content: center; }
}

/* Punch-in modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay[style*="display: flex"],
.modal-overlay.is-open { display: flex; }
.modal-content.punch-modal-content {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-5);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.punch-modal-content h3 {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: 1.6rem;
  margin: 0 0 6px;
  color: var(--text);
}
.punch-modal-content p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.punch-options { display: flex; flex-direction: column; gap: 10px; }
.punch-shift-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-4);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all var(--d-fast) var(--ease-out);
}
.punch-shift-btn:hover { border-color: rgba(201,205,217,.30); transform: translateY(-1px); }
.punch-shift-btn .icon-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.punch-shift-btn.regular .icon-circle { background: rgba(74,222,128,0.16); color: #4ade80; }
.punch-shift-btn.zen .icon-circle { background: rgba(182,91,255,0.16); color: var(--note-color); }
.punch-shift-btn.regular:hover { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.30); }
.punch-shift-btn.zen:hover { background: rgba(182,91,255,0.06); border-color: rgba(182,91,255,0.30); }

.modal-actions { display: flex; gap: 8px; }
#cancel-punch-modal,
.btn-secondary {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: var(--r-3);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
#cancel-punch-modal:hover { color: var(--text); border-color: rgba(201,205,217,.30); }

/* ============================================================
   DEADLINE MODAL + generic modal-content / btn styling
============================================================ */
.modal-overlay .modal-content {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  max-width: 440px;
  width: 100%;
  animation: cardIn .3s var(--ease-out) both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.modal-overlay .modal-content h3 {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: 1.6rem; line-height: 1.1;
  color: var(--text);
  margin: 0 0 6px;
}
.modal-overlay .modal-content > p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* Deadline preset grid */
#deadline-presets.deadline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.deadline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
  white-space: nowrap;
}
.deadline-btn:hover {
  border-color: var(--c-red-600);
  background: rgba(220,31,31,0.06);
  transform: translateY(-1px);
}
.deadline-btn.urgent {
  background: var(--c-red-600);
  border-color: var(--c-red-600);
  color: var(--c-white);
}
.deadline-btn.urgent:hover {
  background: var(--c-red-500);
  box-shadow: 0 0 0 1px rgba(239,41,41,0.20), 0 6px 18px rgba(239,41,41,0.22);
}
.deadline-btn[data-target="no_deadline"] {
  border-style: dashed !important;
  background: transparent;
  color: var(--text-muted);
}
.deadline-btn[data-target="no_deadline"]:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}

/* Action separator inside the modal */
.modal-overlay .action-separator {
  height: 1px;
  background: var(--border);
  margin: 6px 0 14px;
}

/* Form group / labels inside modals */
.modal-overlay .form-group { margin-bottom: 14px; }
.modal-overlay .form-group label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.modal-overlay .form-group label i { color: var(--c-red-500); margin-right: 4px; }
.modal-overlay .form-control,
.modal-overlay input[type="datetime-local"],
.modal-overlay select.form-control {
  width: 100%;
  background: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-3) !important;
  color: var(--text) !important;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
}
[data-theme="light"] .modal-overlay .form-control,
[data-theme="light"] .modal-overlay input[type="datetime-local"],
[data-theme="light"] .modal-overlay select.form-control {
  color-scheme: light;
}
.modal-overlay .form-control:focus {
  outline: none;
  border-color: var(--c-red-600) !important;
  box-shadow: 0 0 0 3px rgba(220,31,31,0.18);
}
/* Custom caret for selects */
.modal-overlay select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}

/* Modal action row + buttons */
.modal-overlay .modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
.modal-overlay .btn-primary,
.modal-overlay .btn-secondary {
  padding: 10px 18px;
  border-radius: var(--r-3);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.modal-overlay .btn-primary {
  background: var(--c-red-600);
  color: var(--c-white);
  border: 1px solid var(--c-red-600);
}
.modal-overlay .btn-primary:hover {
  background: var(--c-red-500);
  box-shadow: 0 0 0 1px rgba(239,41,41,0.20), 0 6px 18px rgba(239,41,41,0.22);
  transform: translateY(-1px);
}
.modal-overlay .btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}
.modal-overlay .btn-secondary:hover {
  color: var(--text);
  border-color: rgba(201,205,217,0.30);
  background: var(--surface-2);
}

/* ============================================================
   DAY-OF-WEEK SELECTOR (recurring task modal)
============================================================ */
.day-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.day-chip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: all var(--d-fast) var(--ease-out);
}
.day-chip:hover {
  border-color: var(--c-red-600);
  color: var(--text);
  background: rgba(220,31,31,0.06);
}
/* Hide the checkbox visually but keep it functional + clickable via the label */
.day-chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.day-chip.is-checked,
.day-chip:has(input:checked) {
  background: var(--c-red-600);
  border-color: var(--c-red-600);
  color: var(--c-white);
}
.day-chip.is-checked span,
.day-chip:has(input:checked) span { color: var(--c-white); }

/* Section divider used inside the recurrence options block */
#rt-recurrence-options .form-group[style*="border-top"] {
  border-top: 1px solid var(--border) !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
}
#rt-recurrence-options small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--text-dim) !important;
  margin-top: 6px;
}

/* Notification bell with badge */
.header-icon-btn { position: relative; }
.header-icon-btn .notification-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--c-red-600);
  color: var(--c-white);
  border-radius: var(--r-full);
  font-size: 9.5px; font-weight: 700; font-family: var(--font-mono);
  display: grid; place-items: center;
  border: 2px solid var(--bg);
}

/* ============================================================
   PAGE HEADER (mockup)
============================================================ */
.page-header { padding: 4px var(--side-padding) 0; }
.page-header .crumb {
  color: var(--text-dim);
  font-size: var(--t-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.page-header .crumb b { color: var(--text-soft); font-weight: 600; }
.page-header h1.page-title {
  font-family: var(--font-serif);
  font-size: 44px; line-height: 1; letter-spacing: -0.01em;
  font-weight: 400; font-style: italic;
  margin: 0 0 8px;
}
.page-header .last-update {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-sm); color: var(--text-muted);
  margin-bottom: 20px;
}
.page-header .last-update::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.18);
}

/* Filter chips */
.filters {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--side-padding)) 18px;
  padding: 0 var(--side-padding) 4px;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--t-sm); font-weight: 500; color: var(--text-soft);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.chip:hover { border-color: var(--border-strong); }
.chip.active {
  background: var(--text); color: var(--bg);
  border-color: var(--text); font-weight: 600;
}
.chip .count {
  font-size: 10.5px; padding: 1px 6px;
  background: rgba(255,255,255,.08);
  border-radius: var(--r-full);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.chip.active .count { background: rgba(0,0,0,.18); color: var(--bg); }

/* Group label */
.group-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim);
  padding: 14px var(--side-padding) 8px;
}

/* ============================================================
   PANEL VIEWER + PANELS
============================================================ */
main.panel-viewer { padding: 0; }
.panel { display: none; }
.panel.is-active { display: block; }

.column-main-header {
  padding: 0;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
}
/* Hide the inner duplicate panel titles - page-header already shows them */
.column-title-toggle { display: none; }
.checklist-header h2 { display: none; }

/* When the panel has only an action button (no title), give it some padding so it doesn't crowd the page-header */
#activity-panel > .column-main-header,
#notes-panel > .column-main-header { padding: 0 var(--side-padding) 12px; }
#timesheet-panel > .column-main-header,
#shoots-panel > .column-main-header,
#mileage-panel > .column-main-header { padding: 0 0 8px; }
.checklist-header { margin-bottom: 8px !important; justify-content: flex-end; }
.column-main-header h2 {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: 32px; letter-spacing: -0.01em;
  margin: 0;
}

/* ============================================================
   TASK LIST (mockup pixel-match)
============================================================ */
.task-list {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 0 var(--side-padding);
}

.task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: 14px 16px;
  transition: border-color var(--d-fast) var(--ease-out);
}
.task-card:hover { border-color: var(--border-strong); }
.task-card[data-priority="urgent"] {
  background: var(--urgent-gradient);
  border-color: rgba(239,41,41,.22);
}
/* Don't use opacity here — it bleeds into children (including the status dropdown). */
.task-card.is-completed .task-desc { color: var(--text-muted); }
.task-card.is-completed .sender-line .name { color: var(--text-muted); }
.task-card.is-completed .sender-avatar { opacity: 0.6; }
.task-card.is-completed .task-row1 .priority-pill { opacity: 0.7; }
.task-card.is-completed .task-row1 .date-pill { opacity: 0.7; }
.task-card.is-completed .task-row1 .context-pill { opacity: 0.7; }
.task-card.is-completed .task-row1 .meta-time { opacity: 0.7; }

.task-card .task-row1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.priority-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-2);
  font-size: 11px; font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.priority-pill.normal { background: rgba(201,205,217,.10); color: var(--text-soft); }
.priority-pill.urgent { background: rgba(239,41,41,.16); color: var(--c-red-400); }
.priority-pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.date-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 500;
}
.date-pill.is-soon { background: rgba(245,158,11,.16); color: #f59e0b; border-color: rgba(245,158,11,.25); }
.date-pill.is-overdue { background: rgba(239,41,41,.16); color: var(--c-red-400); border-color: rgba(239,41,41,.25); }
.date-pill svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Work timer pill: Start Work starts it (amber, ticking), Complete stops it (green, total across sessions). */
.work-timer {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.work-timer svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.work-timer.is-live { background: rgba(245,158,11,.16); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.work-timer.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; animation: work-timer-pulse 1.2s ease-in-out infinite; }
@keyframes work-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .work-timer.is-live::before { animation: none; } }
.work-timer.is-done { background: rgba(74,222,128,.14); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.work-timer.is-paused { background: rgba(154,162,181,.14); color: var(--text-soft); border: 1px solid rgba(154,162,181,.25); }
/* Reopen log under the description: one line per reopen (when, and how long it took) */
.work-log { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; }
.work-log-line { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); }
.work-log-line svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Start Work button with its hint underneath */
.action-stack { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.action-hint { font-size: 10.5px; line-height: 1.3; color: var(--text-dim); text-align: right; max-width: 200px; }
.meta-time {
  margin-left: auto;
  font-size: var(--t-xs); color: var(--text-dim);
  font-family: var(--font-mono);
}
.context-pill {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-2);
  background: rgba(75,158,255,.14);
  color: #4b9eff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.task-card .task-body { display: flex; gap: 12px; align-items: flex-start; }
.sender-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  background: var(--surface-2);
}
.sender-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.task-content { flex: 1; min-width: 0; }
.sender-line { font-size: var(--t-xs); color: var(--text-muted); margin-bottom: 3px; }
.sender-line .name { color: var(--text); font-weight: 600; }
.task-desc {
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--text-soft);
  font-weight: 400;
  margin: 0;
  white-space: pre-line; /* preserve newlines authored in the compose textarea */
  overflow-wrap: anywhere;
}
/* Default: clamp to 2 lines. Removed when the user expands the card OR opens the reply thread. */
.task-card:not(.replies-open):not(.is-expanded) .task-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* "Show more / Show less" toggle — hidden by default, revealed only on cards whose
   description actually overflows (measured by JS, marked with .has-clamp) or that
   are already expanded (so the user can collapse). */
.desc-toggle {
  display: none;
  margin-top: 4px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: color var(--d-fast) var(--ease-out);
}
.task-card.has-clamp .desc-toggle,
.task-card.is-expanded .desc-toggle { display: inline-block; }
.desc-toggle:hover { color: var(--text); }
.desc-toggle .more-label { display: inline; }
.desc-toggle .less-label { display: none; }
.task-card.is-expanded .desc-toggle .more-label { display: none; }
.task-card.is-expanded .desc-toggle .less-label { display: inline; }

/* Attachments row (compact thumbnails) */
.attachment-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.attachment-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
}
.attachment-pill:hover { color: var(--text); border-color: var(--border-strong); }
.attachment-pill i { font-size: 10px; }

/* ===== Task number on the card ===== */
.task-number {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: var(--r-2);
  padding: 3px 7px;
  flex: 0 0 auto;
}
.task-card.is-completed .task-row1 .task-number { opacity: .7; }
.context-pill.declaration-pill { background: rgba(245,158,11,.14); color: #f5b342; }
.context-pill.declaration-pill i { font-size: 10px; margin-right: 4px; }

/* ===== Declare sheet (three clicks: Declare > the client > type it) ===== */
.declare-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: var(--modal-overlay-bg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--ease-out), visibility var(--d-base);
}
.declare-backdrop.open { opacity: 1; visibility: visible; }
.declare-sheet {
  position: fixed; z-index: 61;
  left: 50%; bottom: 0;
  transform: translateX(-50%) translateY(104%);
  width: min(560px, calc(100% - 16px));
  max-height: min(86vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-6) var(--r-6) 0 0;
  box-shadow: var(--shadow-lg);
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  transition: transform var(--d-base) var(--ease-spring);
}
.declare-sheet.open { transform: translateX(-50%) translateY(0); }
.declare-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.declare-head h3 {
  margin: 0;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.5rem;
}
.declare-hint { margin: 4px 0 14px; color: var(--text-muted); font-size: var(--t-sm); }
.declare-clients { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.declare-client {
  padding: 9px 14px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.declare-client:hover { border-color: var(--border-strong); color: var(--text); }
.declare-client.selected {
  background: var(--c-red-600); border-color: var(--c-red-600); color: #fff; font-weight: 600;
}
.declare-empty { margin: 0; color: var(--text-muted); font-style: italic; font-size: var(--t-sm); }
.declare-group-title { flex: 0 0 100%; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin: 4px 0 -2px; }
.declare-client.is-internal { border-style: dashed; }
.declare-client.is-internal.selected { background: rgba(182,91,255,.22); border: 1px solid rgba(182,91,255,.7); color: #e2c4ff; }
.declare-text {
  width: 100%;
  background: var(--input-bg-color);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-4);
  color: var(--text);
  font-family: var(--font-sans); font-size: var(--t-base);
  padding: 12px 14px;
  resize: vertical;
  min-height: 62px;
}
.declare-text:focus { outline: none; border-color: var(--c-red-500); }
.declare-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.declare-error { color: var(--c-red-400); font-size: var(--t-sm); }
.declare-actions .action-btn { min-width: 132px; }
.declare-cta-row { margin: 0 0 14px; }

/* ===== Declarations panel ===== */
.declaration-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-4);
  overflow: hidden;
}
.declaration-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  gap: 2px 12px; padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.declaration-row:last-child { border-bottom: 0; }
.declaration-desc { grid-column: 1; grid-row: 1; min-width: 0; font-size: var(--t-sm); color: var(--text-soft); }
.declaration-meta { grid-column: 1; grid-row: 2; min-width: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.declaration-time { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); font-size: 12px; color: var(--text); white-space: nowrap; }
.declaration-list.is-completed .declaration-desc { color: var(--text-muted); }

/* ===== Type-of-work tag on the compose form and the task card ===== */
.work-type-row { display: none !important; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 6px 0 10px; }
.work-type-label { flex: 0 0 auto; padding-top: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.work-type-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 200px; min-width: 0; }
.work-type-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; cursor: pointer; transition: all var(--d-fast) var(--ease-out); }
.work-type-chip:hover { border-color: var(--border-strong); color: var(--text); }
.work-type-chip.selected { background: rgba(182,91,255,.16); border-color: rgba(182,91,255,.55); color: #d9a6ff; font-weight: 600; }
.context-pill.work-type-pill { background: rgba(182,91,255,.14); color: #c98cff; }

/* ===== Work statistics panel (drawer > Statistics, Jad only) ===== */
.stats-intro { margin: 0 0 12px; color: var(--text-muted); font-size: var(--t-sm); }
.stats-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.stats-sorts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.stats-sorts-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: 2px; }
.stats-sort-chip { padding: 5px 11px; font-size: var(--t-xs); }
.stats-dir-chip { margin-left: auto; border-style: dashed; }
.stats-dir-chip i { font-size: 11px; }
.stats-period { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--text-muted); margin: 0 0 14px; }
.stats-member { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: 14px 16px; margin-bottom: 12px; }
.stats-member-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stats-member-head .avatar { flex: 0 0 auto; }
.stats-member-name { flex: 1 1 160px; min-width: 0; }
.stats-member-name strong { display: block; font-size: var(--t-base); }
.stats-member-name span { display: block; font-size: var(--t-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-member-total { text-align: right; }
.stats-member-total .stat-current { font-size: 1.7rem; }
.stats-member-total .stat-target { display: block; }
.stats-running { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-full); background: rgba(245,158,11,.14); color: var(--status-working); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.stats-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; }
.stats-kpi { background: var(--surface-2); border-radius: var(--r-3); padding: 8px 10px; }
.stats-kpi b { display: block; font-size: var(--t-md); font-weight: 600; }
.stats-kpi span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.stats-section-title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 6px; }
.stats-bars { display: flex; flex-direction: column; gap: 7px; }
.stats-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.stats-bar-label { font-size: var(--t-sm); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-bar-value { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.stats-bar-value em { font-style: normal; opacity: .7; }
.stats-bar-track { grid-column: 1 / -1; }
.stats-bar-track .stat-progress-bar { background: var(--status-seen); }
.stats-bars.is-department .stat-progress-bar { background: var(--note-color); }
.stats-bars.is-priority .stat-progress-bar { background: var(--status-completed); }
.stats-bars.is-priority .stats-bar-row.is-urgent .stat-progress-bar { background: var(--c-red-500); }
.stats-tasks { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; }
/* Explicit cell placement: with only grid-row set, the time cell auto-placed into column 1 and overlapped the title. */
.stats-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.stats-task:last-child { border-bottom: 0; }
.stats-task-desc { grid-column: 1; grid-row: 1; min-width: 0; font-size: var(--t-sm); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-task-meta { grid-column: 1; grid-row: 2; min-width: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-task-time { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); font-size: 12px; color: var(--text); white-space: nowrap; }
.stats-section-title.is-now { color: var(--status-working); }
/* Tasks, day by day */
.stats-day { margin-bottom: 10px; }
.stats-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 5px; }
.stats-day-name { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--text); }
.stats-day-sum { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.stats-task.is-done .stats-task-desc { color: var(--text-muted); }
.stats-done-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(74,222,128,.16); color: #4ade80; font-size: 9px; margin-right: 6px; vertical-align: middle; }
.stats-days-more { display: block; }
.stats-days-toggle { margin: 2px 0 10px; }
/* Work in progress: the member card breathes amber and carries a badge with a pinging dot */
.stats-member.is-working { border-color: rgba(245,158,11,.40); animation: stats-breathe 2.6s ease-in-out infinite; }
@keyframes stats-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,.10), 0 0 10px rgba(245,158,11,.05); }
  50%      { box-shadow: 0 0 0 1px rgba(245,158,11,.34), 0 0 22px rgba(245,158,11,.16); }
}
.stats-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 5px 11px 5px 9px;
  border-radius: var(--r-full);
  background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.30); color: #f5b342;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap;
}
.stats-live-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; flex: 0 0 8px;
  animation: stats-ping 1.5s ease-out infinite;
}
@keyframes stats-ping { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.60); } 100% { box-shadow: 0 0 0 9px rgba(245,158,11,0); } }
@media (prefers-reduced-motion: reduce) { .stats-member.is-working, .stats-live-badge-dot { animation: none; } }
.stats-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--status-completed); margin: 0 5px 1px 0; animation: work-timer-pulse 1.6s ease-in-out infinite; }
.stats-tasks.is-now .stats-task { background: rgba(245,158,11,.07); }
.stats-tasks.is-now .stats-task-time .stats-running { margin-left: 0; }
.stats-idle { margin-top: 6px; color: var(--text-muted); font-size: var(--t-sm); }
.stats-idle b { font-weight: 500; color: var(--text-soft); }
@media (max-width: 480px) {
  .stats-kpis { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stats-kpi { padding: 7px 8px; }
  .stats-kpi b { font-size: var(--t-base); }
}


/* Edit form inline — toggled by .is-editing on the parent .task-card */
.task-edit-form { display: none; margin-top: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-3); }
.task-card.is-editing .task-edit-form { display: block; }
.task-card.is-editing .task-body { opacity: 0.45; pointer-events: none; }
.task-edit-form .form-row { display: flex; flex-direction: column; gap: 4px; }
.task-edit-form .form-row label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.task-edit-form .form-row select,
.task-edit-form .form-row input { background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-2); padding: 8px 10px; font-family: var(--font-sans); font-size: 13.5px; }
.task-edit-form .form-row select:focus,
.task-edit-form .form-row input:focus { outline: none; border-color: var(--c-red-600); box-shadow: 0 0 0 3px rgba(220,31,31,.18); }
.task-edit-form .edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.task-edit-form .edit-actions .action-btn { padding: 8px 16px; border-radius: var(--r-2); font-size: 13px; font-weight: 600; border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer; transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.task-edit-form .edit-actions .action-btn:hover { background: var(--surface); border-color: var(--text-dim); }
.task-edit-form .edit-actions .save-task-btn { border-color: transparent; }
.task-edit-form .edit-actions .save-task-btn:hover { filter: brightness(1.08); }
.task-edit-form textarea {
  width: 100%; min-height: 80px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--r-3);
  padding: 10px;
  font-family: var(--font-sans); font-size: var(--t-sm);
  resize: vertical;
}

.task-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
  gap: 10px;
}
.task-stats {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--t-xs); color: var(--text-muted);
}
.task-stats .stat { display: inline-flex; align-items: center; gap: 5px; }
.task-stats .stat.has-replies { color: #4b9eff; }
.task-stats svg, .task-stats i { font-size: 11px; }
.task-status-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  border-radius: var(--r-2);
  cursor: pointer;
  display: inline-flex; align-items: center;
  transition: background var(--d-fast) var(--ease-out);
}
button.task-status-tag:hover { background: var(--surface-2); }
.task-status-tag.pending   { color: var(--text-dim); }
.task-status-tag.seen      { color: #4b9eff; }
.task-status-tag.working   { color: #f59e0b; }
.task-status-tag.completed { color: #4ade80; }

/* Status dropdown menu - opens when task-status-menu has .is-active */
.task-status-menu { position: relative; display: inline-block; }
.task-status-menu .status-dropdown {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; right: auto;
  background-color: var(--dropdown-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  min-width: 180px;
  width: max-content;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  isolation: isolate;
}
/* When the menu sits near the right edge of its card, flip the dropdown so
   it opens leftward instead of overflowing the viewport. The card-level
   `.flip-right` modifier is set by the click handler. */
.task-status-menu.flip-right .status-dropdown {
  left: auto;
  right: 0;
}
.task-status-menu.is-active .status-dropdown { display: block; }
.status-dropdown .status-option {
  display: block;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
  background-color: var(--dropdown-bg);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease-out);
}
.status-dropdown .status-option:hover { background-color: var(--surface-2); }
.status-dropdown .status-option:not(:last-child) { border-bottom: 1px solid var(--border); }

/* === CTA buttons (lifted from .cta-26 on the site) === */
.task-actions { display: flex; gap: 8px; align-items: center; }
.cta, .action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-2);
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .01em;
  position: relative; overflow: hidden;
  cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
  background: transparent; color: var(--text-soft);
  transition: transform var(--d-base) var(--ease-spring),
              box-shadow var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.cta::before, .action-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s var(--ease-out);
  pointer-events: none;
}
.cta:hover, .action-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cta:hover::before, .action-btn:hover::before { transform: translateX(100%); }

.cta-ghost, .action-btn {
  background: transparent;
  color: var(--text-soft);
  border-color: var(--border-strong);
}
.cta-ghost:hover, .action-btn:hover { background: var(--surface-2); color: var(--text); }

.cta-primary,
.complete-btn,
.acknowledge-btn,
.start-work-btn {
  background: var(--c-red-600);
  color: var(--c-white);
  border-color: var(--c-red-600);
}
.cta-primary:hover,
.complete-btn:hover,
.acknowledge-btn:hover,
.start-work-btn:hover {
  background: var(--c-red-500);
  border-color: var(--c-red-500);
  color: var(--c-white);
  box-shadow: var(--shadow-glow);
}

.delete-btn { color: var(--c-red-400); border-color: rgba(239,41,41,0.22); }
.delete-btn:hover { background: rgba(239,41,41,0.12); color: var(--c-red-400); border-color: rgba(239,41,41,0.32); }

.edit-task-btn { padding: 7px 10px; }
.edit-task-btn:hover { color: var(--text); }

/* Icon-only buttons inside task-stats (reply, like) */
.icon-stat-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px;
  background: transparent; border: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  border-radius: var(--r-2);
  transition: color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.icon-stat-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-stat-btn.is-liked { color: var(--c-red-500); }
.icon-stat-btn.has-replies { color: #4b9eff; }
.icon-stat-btn .notification-badge {
  position: static;
  border: 0;
  min-width: 14px; height: 14px; padding: 0 4px;
  background: var(--c-red-600); color: #fff;
  font-size: 9px;
}

/* Reply thread */
.reply-thread { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.task-card.replies-open .reply-thread { display: block; }
.reply-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.reply-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: 10px;
}
.reply-message > img {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
.reply-content { flex: 1; min-width: 0; }
.reply-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.reply-header strong { font-size: 12.5px; color: var(--text); }
.reply-header time { margin-left: auto; font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono); }
.reply-header .delete-reply-btn {
  background: transparent; border: 0; padding: 2px 4px;
  color: var(--text-dim); cursor: pointer; font-size: 11px;
  border-radius: var(--r-2); line-height: 1;
}
.reply-header .delete-reply-btn:hover { color: var(--c-red-500); }
.reply-text { font-size: 13.5px; color: var(--text-soft); line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.reply-footer { margin-top: 6px; }
.reply-footer .like-container { display: inline-flex; align-items: center; gap: 4px; }
.reply-footer .like-btn {
  background: transparent; border: 0; padding: 2px;
  color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1;
  transition: color var(--d-fast) var(--ease-out);
}
.reply-footer .like-btn:hover { color: var(--c-red-500); }
.reply-footer .like-btn.is-liked { color: var(--c-red-500); }
.reply-footer .like-count { font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono); }

.reply-form { display: flex; gap: 6px; margin-top: 10px; }
.reply-form input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--r-3);
  padding: 8px 12px;
  font-size: var(--t-sm); font-family: var(--font-sans);
}
.reply-form input:focus { outline: none; border-color: var(--c-red-600); box-shadow: 0 0 0 3px rgba(220,31,31,.18); }
.reply-form button {
  background: var(--c-red-600); color: var(--c-white);
  border: 0; border-radius: var(--r-3);
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out);
}
.reply-form button:hover { background: var(--c-red-500); }

/* Status menu (sender-side, click status pill) */
.task-status-menu { position: relative; margin-left: auto; }
.status-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  z-index: 20; min-width: 160px;
  overflow: hidden;
}
.task-status-menu.is-open .status-dropdown { display: block; }
.status-option {
  display: block;
  padding: 9px 12px;
  font-size: var(--t-sm);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out);
}
.status-option:hover { background: var(--surface); color: var(--text); }

.load-more-container { display: flex; justify-content: center; padding: 16px; }
.load-more-btn {
  padding: 8px 16px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  font-size: var(--t-sm);
  font-family: var(--font-mono);
  cursor: pointer;
}
.load-more-btn:hover { color: var(--text); border-color: rgba(201,205,217,.20); }

.empty-state {
  text-align: center; padding: 28px 20px;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
}

/* Panel-level loading skeleton */
.panel-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.panel-loading::before {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid rgba(201,205,217,0.20);
  border-top-color: var(--c-red-500);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: 14px 16px;
  margin-bottom: 10px;
  height: 130px;
  position: relative; overflow: hidden;
}
.skeleton-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,205,217,0.04) 50%, transparent 100%);
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ============================================================
   BOTTOM NAV (mockup glass pill)
============================================================ */
.bottom-nav-container {
  position: fixed; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  width: calc(100% - 24px); max-width: 480px;
  z-index: 50;
  pointer-events: none;
}
.bottom-nav {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  min-height: 60px;
}
.bottom-nav .nav-btn {
  flex: 1; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--text-muted);
  position: relative;
  background: transparent;
  border: 0;
  transition: color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.bottom-nav .nav-btn span:not(.notification-badge) { display: none; }
.bottom-nav .nav-btn svg { width: 22px; height: 22px; }
.bottom-nav .nav-btn:hover { color: var(--text); }
.bottom-nav .nav-btn.active { color: var(--text); background: var(--surface-2); }
.bottom-nav .compose-btn {
  flex: 0 0 auto;
  margin: 0 4px;
  height: 44px;
  width: 52px;
  display: grid; place-items: center;   /* centers the wrapper both axes */
  padding: 0;
}
.bottom-nav .compose-btn-icon-wrapper {
  width: 40px; height: 40px;       /* smaller than nav-btn (44px) and pill internal (44px) */
  border-radius: 50%;
  background: var(--c-red-600);
  color: var(--c-white);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(239,41,41,.20), 0 4px 14px rgba(239,41,41,.20);
  transition: transform var(--d-fast) var(--ease-spring), background var(--d-fast) var(--ease-out);
}
.bottom-nav .compose-btn-icon-wrapper svg { width: 18px; height: 18px; }
.bottom-nav .compose-btn:hover .compose-btn-icon-wrapper { transform: scale(1.06); background: var(--c-red-500); }
.bottom-nav .notification-badge {
  position: absolute; top: 6px; right: 26%;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--c-red-600); color: var(--c-white);
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  display: grid; place-items: center;
  border: 2px solid var(--bg);
}

/* ============================================================
   DRAWER
============================================================ */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; left: 0;
  width: 320px; max-width: 88vw; height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform var(--d-base) var(--ease-out);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-header h3 {
  font-family: var(--font-serif);
  font-weight: 400; font-style: italic;
  font-size: 1.75rem; letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.drawer-header small {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .02em;
  color: var(--text-muted);
}
.drawer-section { padding: 14px 14px 6px; }
.drawer-section h4 {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 10px;
  padding: 0 6px;
}
.drawer-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-3);
  background: transparent; border: 0;
  color: var(--text-soft);
  font-size: 14px; font-weight: 500;
  font-family: var(--font-sans);
  text-align: left; cursor: pointer;
  text-decoration: none;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.drawer-item i { width: 16px; text-align: center; color: var(--text-muted); }
.drawer-item:hover { background: var(--surface-2); color: var(--text); }
.drawer-item:hover i { color: var(--text); }

.drawer-team-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 6px 4px;
}
.drawer-team-item {
  flex: 0 0 calc(33.333% - 4px);
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  cursor: pointer;
  text-align: center;
  transition: all var(--d-fast) var(--ease-out);
}
.drawer-team-item:hover { border-color: var(--border-strong); }
.drawer-team-item.active { background: rgba(220,31,31,.10); border-color: var(--c-red-600); }
.drawer-team-item img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.drawer-team-item span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ============================================================
   MODALS
============================================================ */
.modal-backdrop, .modal {
  position: fixed; inset: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal.open, .modal.is-active, .modal-backdrop.open { display: flex; }
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-lg);
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h2, .modal-header h3 {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: 1.5rem;
  margin: 0;
}
.modal-close, .close-modal-btn {
  background: transparent; border: 0;
  color: var(--text-muted);
  font-size: 1.3rem; cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-3);
  transition: all var(--d-fast) var(--ease-out);
}
.modal-close:hover, .close-modal-btn:hover { color: var(--text); background: var(--surface-2); }
.modal-body { padding: 20px 22px; }
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ============================================================
   FORMS (compose, modals, payment panel)
============================================================ */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="tel"],
input[type="url"], input[type="search"], textarea, select, .form-control {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  width: 100%;
}
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
input:focus, textarea:focus, select:focus, .form-control:focus {
  outline: none;
  border-color: var(--c-red-600);
  box-shadow: 0 0 0 3px rgba(220,31,31,.18);
}
label { font-weight: 600; color: var(--text-soft); font-size: var(--t-sm); display: block; }
.form-group { margin-bottom: 14px; }

/* ============================================================
   COMPOSE PANEL
============================================================ */
#compose-panel { padding: 0 var(--side-padding) 24px; }
.command-center, #task-creation-area { background: transparent; border: 0; padding: 0; margin: 0; }
.master-builder-section { margin-bottom: 14px; }
.builder-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); overflow: hidden; }
.builder-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; cursor: pointer;
}
.builder-header label { margin: 0; color: var(--text-muted); cursor: pointer; }
.builder-row.collapsed .builder-content { display: none; }
.builder-content { padding: 12px 16px; border-top: 1px solid var(--border); }

.context-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px; overflow-x: auto;
}
.tab-btn {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 10px;
  border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color var(--d-fast) var(--ease-out);
}
.tab-btn:hover { color: var(--text-soft); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--c-red-600); }

.context-grid, .task-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.context-btn, .task-btn {
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.context-btn:hover, .task-btn:hover { border-color: rgba(201,205,217,.22); color: var(--text); }
.context-btn.selected, .task-btn.selected { background: var(--text); color: var(--bg); border-color: var(--text); }

.compose-area { display: flex; gap: 10px; margin-bottom: 14px; }
.custom-task-input { flex: 1; }
#task-description {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--r-4);
  padding: 14px 16px;
  font-family: var(--font-sans); font-size: 15px;
  min-height: 60px;
  width: 100%;
}
#task-description:focus { border-color: var(--c-red-600); box-shadow: 0 0 0 3px rgba(220,31,31,.18); }
.attachment-btn {
  width: 50px; height: 50px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-3);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text-muted); cursor: pointer;
}
.attachment-btn:hover { color: var(--text); }

.send-actions-v2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.send-btn-v2 {
  padding: 10px 14px;
  border-radius: var(--r-3);
  font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.send-btn-v2:hover { transform: translateY(-1px); border-color: rgba(201,205,217,.20); }
.send-btn-v2.notify        { background: rgba(245,158,11,.16); color: #f59e0b; border-color: rgba(245,158,11,.30); }
.send-btn-v2.note          { background: rgba(182,91,255,.16); color: var(--note-color); border-color: rgba(182,91,255,.30); }
.send-btn-v2.request       { background: rgba(75,158,255,.14); color: #4b9eff; border-color: rgba(75,158,255,.28); }
.send-btn-v2.declare       { background: rgba(245,158,11,.14); color: #f5b342; border-color: rgba(245,158,11,.30); }
/* Normal / Urgent chooser at the top of the deadline popup (one Request button) */
.priority-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.priority-choice-btn {
  padding: 10px 12px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-soft);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.priority-choice-btn i { margin-right: 6px; font-size: 12px; }
.priority-choice-btn.active { background: rgba(75,158,255,.16); color: #4b9eff; border-color: rgba(75,158,255,.45); }
.priority-choice-btn.urgent.active { background: var(--c-red-600); color: var(--c-white); border-color: var(--c-red-600); }
/* Header quick Declare button, beside the punch clock */
.header-declare-btn .punch-icon-wrapper {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(245,158,11,.16); color: #f5b342;
  display: grid; place-items: center; font-size: 11px;
}
.header-declare-btn .punch-time-display { display: inline-flex; line-height: 1.05; }
.header-declare-btn .punch-label { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.header-declare-btn:hover { border-color: rgba(245,158,11,.45); background: var(--surface-2); }
.app-header .header-controls { flex-wrap: nowrap; min-width: 0; }
.app-header .header-left { flex: 0 0 auto; }
/* Nothing in the header may be squeezed: a flex row under pressure shrinks its items, and the avatar's frame turned into an
   oval (Jad 2026-09-17: "my face became an oval, should remain circle"). When space is short the labels drop (rules below). */
.app-header .header-controls > *, .app-header .header-left > * { flex: 0 0 auto; }
/* The break time pill shows only while a break is running (Jad 2026-09-18: "if no one clicked on it yet then no it doesn't
   show the time pill"). punch_clock.js sets .is-on-break on the button while the break is active; idle = icon + Break label. */
.app-header #header-break-btn:not(.is-on-break) .punch-timer { display: none !important; }
/* Nothing leaves the header's own area on either side (Jad 2026-09-17: "keep it neat"). The row is sized to fit down to
   360 px with the rules below; this clip is the guard for anything narrower. */
.app-header { overflow-x: clip; }
.app-header .header-controls { margin-left: auto; }
.app-header .avatar, .app-header .avatar img { flex: 0 0 auto; aspect-ratio: 1 / 1; border-radius: 50%; }
/* The round icon frames (fingerprint, mug, hand) are rigid: never narrower than they are tall, whatever their button does. */
.punch-clock-btn .punch-icon-wrapper, #header-punch-btn .punch-icon-wrapper, #header-break-btn .punch-icon-wrapper, .header-declare-btn .punch-icon-wrapper {
  flex: 0 0 24px; width: 24px; height: 24px; min-width: 24px; aspect-ratio: 1 / 1; border-radius: 50%;
}
@media (max-width: 900px) {
  /* punched in: punch + break + Declare all show; keep them on one row by dropping the labels, never by pushing Declare off */
  .header-declare-btn { padding: 0 8px; }
  .header-declare-btn .punch-time-display { display: none; }
}
@media (max-width: 640px) {
  /* Icon-only at this width. The label rules must WIN over the inline <style> block in index.php (which sets the break
     label to inline-flex at every width): higher specificity plus !important, because a browser holding a cached index.php
     would otherwise force the 38 px width from here while still showing the "15:00" balance past the circle (Andy's
     account, 2026-09-18). overflow hidden is the guard: nothing can render outside the button whatever the HTML version. */
  .app-header #header-punch-btn .punch-time-display, .app-header #header-break-btn .punch-time-display, .app-header .header-declare-btn .punch-time-display { display: none !important; }
  .app-header #header-punch-btn, .app-header #header-break-btn, .app-header .header-declare-btn { width: 38px !important; min-width: 38px; padding: 0 !important; margin-left: 0; justify-content: center; gap: 0; overflow: hidden; }
  .app-header { padding-left: 12px; padding-right: 12px; gap: var(--s-2); }
}
@media (max-width: 480px) {
  /* phone: hamburger + EN/FR on the left, six controls on the right, all on one row down to 360 px */
  .app-header .header-left, .app-header .header-controls { gap: 4px; }
  .app-header .icon-btn, .app-header .header-icon-btn { width: 34px; height: 34px; }
  .app-header .avatar { width: 32px; height: 32px; }
  .app-header #header-punch-btn, .app-header #header-break-btn, .app-header .header-declare-btn { height: 34px; width: 34px !important; min-width: 34px; padding: 0 !important; justify-content: center; gap: 0; overflow: hidden; }
  .lang-toggle button { padding: 4px 6px; font-size: 11px; }
}
/* ON BREAK, narrow screens: the countdown must be visible (Jad 2026-09-18: "if you click on it there is a countdown we need
   to see"). Placed AFTER the <=640 and <=480 icon-only rules so it wins on source order: the button widens to fit the
   countdown, the Break label stays hidden to keep it compact, and the pill disappears again when the break ends. */
@media (max-width: 640px) {
  .app-header #header-break-btn.is-on-break { width: auto !important; min-width: 38px; padding: 0 10px 0 6px !important; gap: 6px; }
  .app-header #header-break-btn.is-on-break .punch-time-display { display: inline-flex !important; }
  .app-header #header-break-btn.is-on-break .punch-label { display: none; }
  .app-header #header-break-btn.is-on-break .punch-timer { display: block !important; }
}
.action-separator { grid-column: 1 / -1; height: 1px; background: var(--border); margin: 6px 0; }

/* ============================================================
   PAYMENT PANEL
============================================================ */
#payment-panel .form-control { padding: 12px 14px; font-size: 14px; }
#payment-panel button[type="submit"] {
  background: var(--c-red-600);
  color: var(--c-white);
  border: 1px solid var(--c-red-600);
  border-radius: var(--r-2);
  padding: 12px 18px;
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
#payment-panel button[type="submit"]:hover { background: var(--c-red-500); box-shadow: var(--shadow-glow); }

/* ============================================================
   NOTES PANEL
============================================================ */
.notes-list-container { padding: 0 var(--side-padding); display: flex; flex-direction: column; gap: 10px; }
.note-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: 14px 16px;
}
.note-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.note-header img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.note-header strong { font-size: 14px; color: var(--text); }
.note-header time { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.note-card textarea {
  background: transparent;
  border: 0;
  width: 100%;
  color: var(--text-soft);
  font-size: 14px;
  resize: none;
  padding: 0;
}
.note-card textarea:focus { outline: none; }
.note-actions { display: flex; gap: 8px; margin-top: 10px; }
.note-actions button { padding: 6px 12px; border-radius: var(--r-2); font-size: 12px; font-weight: 600; border: 1px solid var(--border-strong); background: transparent; color: var(--text-soft); cursor: pointer; }
.note-actions button:hover { color: var(--text); border-color: rgba(201,205,217,.20); }

/* ============================================================
   ACTIVITY FEED
============================================================ */
.activity-list-container { padding: 0 var(--side-padding); display: flex; flex-direction: column; gap: 6px; }
.activity-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 12px 14px;
  transition: border-color var(--d-fast) var(--ease-out);
  cursor: pointer;
}
.activity-item:hover { border-color: var(--border-strong); }
.activity-item.unread { background: rgba(220,31,31,.06); border-color: rgba(239,41,41,.18); }
.activity-item .activity-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 14px;
}
.activity-item.unread .activity-icon { background: rgba(220,31,31,.16); color: var(--c-red-400); }
.activity-item .activity-text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.4;
}
.activity-item.unread .activity-text { color: var(--text); }
.activity-item .activity-text em { font-style: italic; color: var(--text); font-weight: 500; }
.activity-item .activity-time {
  flex-shrink: 0;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  letter-spacing: .02em;
}
#mark-all-read-btn {
  padding: 7px 14px;
  border-radius: var(--r-2);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
}
#mark-all-read-btn:hover { color: var(--text); border-color: rgba(201,205,217,.20); }

/* ============================================================
   TIMESHEET
============================================================ */
#timesheet-panel .column-main-header { padding: 4px 0 14px; margin-bottom: 0 !important; }
.timesheet-dashboard {
  display: flex; flex-direction: column;
  gap: 14px;
}
.timesheet-overall-card {
  background: var(--surface) !important;
  border-radius: var(--r-5) !important;
  border-width: 1px !important;
  padding: 18px !important;
  margin-bottom: 0 !important;
}
.timesheet-overall-card h3 {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  color: var(--text-muted) !important;
  margin: 0 0 6px !important;
}
.timesheet-overall-card > div {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 3rem !important;
  line-height: 1 !important;
}
.timesheet-overall-card p {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  margin: 8px 0 0 !important;
}

.timesheet-header-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 14px 16px;
}
.timesheet-header-card h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 4px;
}
.timesheet-header-card p {
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: .03em !important;
  color: var(--text-muted) !important;
}

.timesheet-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.timesheet-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 14px;
}
.timesheet-stat-card .stat-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.timesheet-stat-card .stat-header h4 {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.stat-values { display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px; }
.stat-current {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: 2rem;
  color: var(--text);
  line-height: 1;
}
.stat-target {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.stat-progress-bg {
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.stat-progress-bar {
  height: 100%;
  border-radius: var(--r-full);
  transition: width var(--d-base) var(--ease-out);
}

.timesheet-dashboard h3:not(.timesheet-header-card h3) {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  margin: 14px 0 8px !important;
}

.weekly-schedule-list, .punch-log-list {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  overflow: hidden;
}
.schedule-list-item, .punch-log-item {
  display: flex; align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.schedule-list-item:last-child, .punch-log-item:last-child { border-bottom: 0; }
.day-name {
  flex: 0 0 80px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.day-time {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--text-soft);
}
.shift-line { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; }
.shift-badge {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 5px;
  border-radius: var(--r-2);
  background: rgba(75,158,255,.16);
  color: #4b9eff;
}
.day-time em { color: var(--text-muted); font-style: normal; font-size: 11.5px; font-family: var(--font-mono); }
.day-total {
  flex: 0 0 50px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.punch-log-item.is-zen { background: rgba(182,91,255,.06); }
.punch-log-date {
  flex: 0 0 110px;
  display: flex; flex-direction: column; gap: 3px;
}
.punch-log-date strong { font-size: 12.5px; color: var(--text); }
.zen-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-2);
  background: rgba(182,91,255,.16);
  color: var(--note-color);
  align-self: flex-start;
}
.punch-log-times {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-soft);
}
.punch-log-duration {
  flex: 0 0 65px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

/* ============================================================
   MILEAGE, TIMESHEET, RECURRING, CHECKLIST, SHOOTS (generic)
============================================================ */
#mileage-panel, #timesheet-panel, #recurring-panel, #shoots-panel, #checklist-panel, #payment-panel { padding: 0 var(--side-padding) 24px; }
.recurring-task-card, .visit-card, .mileage-log-card, .checklist-item, .timesheet-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.checklist-item {
  display: flex; align-items: center; gap: 12px;
}
.checklist-item.is-completed { opacity: 0.6; }
.checklist-item.is-completed .checklist-item-text { text-decoration: line-through; }
.checklist-item input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--c-red-600);
}

/* ============================================================
   PUSHER PRESENCE INDICATOR (online dot)
============================================================ */
.sender-avatar.is-online::after,
.drawer-team-list .team-member-card.is-online::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  background: #4ade80;
  border-radius: 50%; border: 2px solid var(--surface);
}

/* ============================================================
   LEGACY FILTER CONTROLS (FYIs/Normal/Urgent + Refine collapsible)
============================================================ */
.list-controls {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  padding: 0 var(--side-padding) 10px;
}
.filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.filter-btn:hover { border-color: var(--border-strong); }
.filter-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.filter-btn.refine-btn { margin-left: auto; }
.filter-btn.refine-btn.active { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.filter-btn i { font-size: 11px; }
/* Declarations button (2026-10-02): five buttons in the row. On a narrow list the buttons tighten so Refine stays on
   the same line; wider lists are unchanged. Old design only (the new design fits as is). */
html:not(.nd) .list-controls { container-type: inline-size; }
@container (max-width: 432px) { .filter-btn { padding: 7px 10px; } }

.refine-panel {
  display: none;
  padding: 0 var(--side-padding) 12px;
  background: transparent;
  flex-direction: column;
  gap: 10px;
}
.refine-panel.is-open { display: flex; }
.refine-panel-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.refine-panel-row.search-sort-row { gap: 8px; }
.column-search-wrapper { flex: 1; min-width: 180px; }
.column-search-wrapper input.task-search {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--r-3);
  padding: 8px 12px;
  font-size: var(--t-sm); font-family: var(--font-sans);
}
.column-search-wrapper input.task-search:focus { outline: none; border-color: var(--c-red-600); box-shadow: 0 0 0 3px rgba(220,31,31,.18); }
.sort-control { display: inline-flex; align-items: center; gap: 6px; }
.sort-control label { color: var(--text-muted); font-size: var(--t-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.sort-control .sort-select {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--r-3);
  padding: 7px 24px 7px 10px;
  font-size: var(--t-sm); font-family: var(--font-sans);
}

.view-buttons-row { gap: 6px; flex-wrap: wrap; }
.view-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.view-btn {
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.view-btn:hover { color: var(--text); border-color: rgba(201,205,217,.22); }
.view-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ============================================================
   SHOOTS / VISITS
============================================================ */
#shoots-panel .column-main-header,
#shoots-panel .shoots-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 4px 0 14px;
}
#shoots-panel .schedule-visit-btn,
.shoots-header button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--c-red-600);
  color: var(--c-white);
  border: 1px solid var(--c-red-600);
  border-radius: var(--r-2);
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out);
}
#shoots-panel .schedule-visit-btn:hover { background: var(--c-red-500); }
.visit-card-pwa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.visit-card-pwa.overdue { border-color: rgba(239,41,41,.25); background: linear-gradient(180deg, rgba(220,31,31,.08) 0%, var(--surface) 80%); }
.visit-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.visit-info h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.visit-purpose { margin: 0; font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.visit-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.visit-meta > span:not(.visit-badge) { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.visit-badge {
  font-size: 10.5px; font-weight: 600;
  font-family: var(--font-mono); letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-2);
  background: rgba(201,205,217,.10); color: var(--text-soft);
}
.visit-badge.overdue { background: rgba(239,41,41,.16); color: var(--c-red-400); }
.visit-badge.upcoming { background: rgba(75,158,255,.14); color: #4b9eff; }
.visit-actions-group { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.visit-actions-group .icon-btn,
.visit-actions-group button {
  width: 34px; height: 34px;
  border-radius: var(--r-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-soft);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.visit-actions-group .icon-btn:hover,
.visit-actions-group button:hover { color: var(--text); border-color: var(--border-strong); }
.visit-actions-group .complete-visit-btn.success { background: rgba(74,222,128,.14); color: #4ade80; border-color: rgba(74,222,128,.30); }
.visit-actions-group .delete-visit-btn:hover { color: var(--c-red-400); border-color: rgba(239,41,41,.30); }

/* ============================================================
   CHECKLIST
============================================================ */
#checklist-panel .checklist-container { padding: 4px 0 0; }
.checklist-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.checklist-header h2 {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: 1.75rem;
  margin: 0;
}
#send-digest-now,
.checklist-header .action-btn {
  padding: 7px 14px;
  border-radius: var(--r-2);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
}
#send-digest-now:hover { color: var(--text); border-color: rgba(201,205,217,.20); }

.checklist-divider { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

.checklist-groups { display: flex; flex-direction: column; gap: 18px; }
.checklist-group h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  font-family: var(--font-sans);
}
.checklist-items { display: flex; flex-direction: column; gap: 6px; }

.checklist-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 12px 14px;
  margin: 0;
  transition: border-color var(--d-fast) var(--ease-out);
}
.checklist-item:hover { border-color: var(--border-strong); }
.checklist-item.is-completed { opacity: 0.65; }
.checklist-item .item-main-content { flex: 1; min-width: 0; }
.checklist-label {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.checklist-label input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.custom-checkbox {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: var(--r-2);
  border: 1.5px solid var(--text-muted);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: all var(--d-fast) var(--ease-out);
}
.checklist-label input:checked + .custom-checkbox {
  background: var(--c-red-600);
  border-color: var(--c-red-600);
}
.checklist-label input:checked + .custom-checkbox::after {
  content: "";
  position: absolute;
  top: 3px; left: 6px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist-item.is-completed .item-title { text-decoration: line-through; color: var(--text-muted); }
.item-details {
  display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-muted);
  font-family: var(--font-mono);
}
.item-details span { display: inline-flex; align-items: center; gap: 5px; }
.item-details i { font-size: 11px; }
.overdue-badge {
  font-size: 10px; font-weight: 700;
  font-family: var(--font-mono); letter-spacing: .05em;
  padding: 3px 7px;
  border-radius: var(--r-2);
  background: rgba(239,41,41,.16);
  color: var(--c-red-400);
  flex-shrink: 0;
  align-self: flex-start;
}
.item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.item-actions button {
  width: 28px; height: 28px;
  border-radius: var(--r-2);
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--d-fast) var(--ease-out);
}
.item-actions button:hover { color: var(--text); background: var(--surface-2); }
.item-actions .delete-checklist-btn:hover { color: var(--c-red-400); }

/* Collapsible group header in checklist (when grouped) */
.collapsible-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 8px 0;
}
.collapsible-header i { color: var(--text-muted); }

/* ============================================================
   MILEAGE
============================================================ */
.mileage-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: 16px;
  margin-bottom: 16px;
}
.mileage-summary-card .summary-header {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.mileage-summary-card .summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mileage-summary-card .summary-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: var(--r-3);
}
.mileage-summary-card .summary-value {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: 1.8rem;
  color: var(--text);
  line-height: 1;
}
.mileage-summary-card .summary-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mileage-list-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mileage-list-header h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
#add-trip-btn-panel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--c-red-600);
  color: var(--c-white);
  border: 1px solid var(--c-red-600);
  border-radius: var(--r-2);
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
}
#add-trip-btn-panel:hover { background: var(--c-red-500); }

.mileage-list { display: flex; flex-direction: column; gap: 6px; }
.mileage-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 12px 14px;
  transition: border-color var(--d-fast) var(--ease-out);
}
.mileage-card:hover { border-color: var(--border-strong); }
.mileage-card-left {
  flex: 0 0 70px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--border);
  padding-right: 12px;
}
.mileage-card-left .trip-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mileage-card-left .trip-dist {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
}
.mileage-card-center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mileage-card-center .trip-client {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mileage-card-center .trip-purpose {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mileage-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.mileage-card-actions button {
  width: 30px; height: 30px;
  border-radius: var(--r-2);
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--d-fast) var(--ease-out);
}
.mileage-card-actions button:hover { color: var(--text); background: var(--surface-2); }
.mileage-card-actions .delete-log-btn:hover { color: var(--c-red-400); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 600px) {
  .page-header h1.page-title { font-size: 36px; }
}
@media (min-width: 820px) {
  .task-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
}

/* ===== The work queue (2026-09-21): rank badge, Up next strip, reorder controls, Resume ===== */
.queue-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-2);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--border-strong);
  flex: 0 0 auto;
}
.queue-rank.is-first { background: var(--c-red-600); color: var(--c-white); border-color: var(--c-red-600); box-shadow: var(--shadow-glow); }
.task-card.is-completed .task-row1 .queue-rank { display: none; }

/* Same box as a task card: the list has padding 0 var(--side-padding), so the strip carries it as a MARGIN and its edges land
   exactly on the cards' edges (Jad 2026-09-22: "wider thatn the eother elements on the page ... should be same width and hight
   of the regular cards"). Surface, border and radius are the card's. */
.queue-upnext { display: none; margin: 0 var(--side-padding) 12px; padding: 14px 16px; border-radius: var(--r-5); background: var(--surface); border: 1px solid var(--border); }
.queue-upnext.has-items { display: block; }
.upnext-head { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.upnext-head i { margin-right: 5px; color: var(--c-red-400); }
.upnext-row { display: flex; align-items: flex-start; gap: 8px; }
.upnext-row + .upnext-row { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-strong); }
.upnext-who { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-soft); padding: 6px 0; min-width: 44px; }
.upnext-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 auto; }
.upnext-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 9px 5px 5px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; text-align: left;
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.upnext-chip:hover { border-color: var(--c-red-400); transform: translateY(-1px); }
.upnext-chip.is-urgent .upnext-rank { background: var(--c-red-600); color: var(--c-white); }
.upnext-rank { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: var(--surface); color: var(--text-soft); border: 1px solid var(--border-strong); flex: 0 0 auto; }
.upnext-chip.is-urgent .upnext-rank { border-color: var(--c-red-600); }
.upnext-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-completed); flex: 0 0 auto; animation: work-timer-pulse 1.6s ease-in-out infinite; }
.upnext-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.upnext-client { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.upnext-more { align-self: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

.queue-controls { display: inline-flex; gap: 3px; margin-right: 4px; }
.queue-btn {
  width: 26px; height: 26px; border-radius: var(--r-2);
  display: inline-grid; place-items: center;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-soft);
  font-size: 10px; cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.queue-btn:hover { background: var(--surface-2); color: var(--text); }
.queue-btn:disabled { opacity: .5; cursor: default; }
.task-card.is-reorderable { cursor: grab; }
/* Touch drag on phones (2026-09-30): the held card lifts and follows the finger; it lets touches through so the card under
   it can be found. While a card is held nothing on the page can be selected or open the long-press menu. */
.task-card.is-touch-dragging { position: relative; z-index: 60; pointer-events: none; transition: none; background-color: var(--surface); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
html.queue-touch-dragging, html.queue-touch-dragging * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (pointer: coarse) { .task-card.is-reorderable { -webkit-touch-callout: none; } }
.task-card.is-dragging { opacity: .45; }
.task-card.drag-over { outline: 2px dashed var(--c-red-400); outline-offset: 2px; }
.task-card.is-flash { animation: queue-flash 1.6s var(--ease-out); }
@keyframes queue-flash { 0% { box-shadow: 0 0 0 3px rgba(239,41,41,.55); } 100% { box-shadow: 0 0 0 0 rgba(239,41,41,0); } }

/* Compose popup: where an urgent request lands in the queue */
.queue-choice { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: center; margin: 2px 0 6px; }
.queue-choice-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.queue-choice-label i { margin-right: 4px; color: var(--c-red-400); }
.queue-choice-btn {
  padding: 8px 10px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-soft);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.queue-choice-btn i { margin-right: 5px; font-size: 11px; }
.queue-choice-btn.active { background: rgba(245,158,11,.16); color: #f5b342; border-color: rgba(245,158,11,.5); }

/* A paused task: Resume is the primary action, Complete steps back to a ghost button */
.complete-btn.cta-ghost { background: transparent; color: var(--text-soft); border-color: var(--border-strong); }
.complete-btn.cta-ghost:hover { background: var(--surface-2); color: var(--text); box-shadow: none; }

@media (max-width: 640px) {
  .queue-choice { grid-template-columns: 1fr 1fr; }
  .queue-choice-label { grid-column: span 2; }
  .upnext-who { min-width: 0; }
  .queue-btn { width: 30px; height: 30px; }
}

/* ===== Reminders (2026-09-21): compose tile, sheet, panel, popup ===== */
.send-btn-v2.reminder { grid-column: span 2; background: rgba(74,222,128,.12); color: #5ee08f; border-color: rgba(74,222,128,.30); }
.send-btn-v2.reminder i { margin-right: 6px; }

.reminder-sheet { max-height: min(92vh, 820px); }
.reminder-link { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.reminder-link i { color: #5ee08f; }
.reminder-input {
  width: 100%; box-sizing: border-box;
  background: var(--input-bg-color); border: 1px solid var(--border-strong); border-radius: var(--r-4);
  color: var(--text); font-family: var(--font-sans); font-size: var(--t-md); font-weight: 600;
  padding: 12px 14px; margin-bottom: 10px;
}
.reminder-input:focus { outline: none; border-color: var(--c-red-500); }
.reminder-note-input { min-height: 48px; margin-bottom: 12px; font-size: var(--t-sm); font-weight: 400; }
.reminder-field { margin-bottom: 12px; }
.reminder-label { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }
.reminder-when-summary { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #5ee08f; }
.reminder-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.reminder-chip {
  padding: 8px 12px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft);
  font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.reminder-chip.is-small { padding: 6px 10px; font-size: 12.5px; }
.reminder-chip:hover { border-color: var(--border-strong); color: var(--text); }
.reminder-chip.selected { background: var(--c-red-600); border-color: var(--c-red-600); color: #fff; font-weight: 600; }
.reminder-chip i { margin-right: 4px; font-size: 11px; }
.reminder-custom { margin-top: 8px; font-weight: 500; font-size: var(--t-base); color-scheme: dark; }
.reminder-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--text-soft); margin: 2px 0 4px; cursor: pointer; }
.reminder-toggle input { width: 16px; height: 16px; accent-color: var(--c-red-600); }
.reminder-confirm {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(12px); z-index: 70;
  background: var(--surface); border: 1px solid rgba(74,222,128,.45); color: var(--text);
  border-radius: var(--r-full); padding: 10px 16px; font-size: var(--t-sm); font-weight: 600;
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring);
}
.reminder-confirm.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.reminder-confirm i { color: #5ee08f; margin-right: 6px; }

.stats-section-title.is-hot { color: #f5b342; }
.reminder-day { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin: 10px 0 6px; }
.reminder-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.reminder-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-4);
  background: var(--surface); border: 1px solid var(--border-strong);
}
.reminder-row.is-fired { border-color: rgba(245,158,11,.45); background: linear-gradient(180deg, rgba(245,158,11,.08) 0%, var(--surface) 70%); }
.reminder-row.is-done, .reminder-row.is-cancelled { opacity: .72; }
.reminder-row.is-cancelled .reminder-title { text-decoration: line-through; }
.reminder-main { min-width: 0; flex: 1 1 auto; }
.reminder-title { font-weight: 600; font-size: var(--t-base); color: var(--text); overflow-wrap: anywhere; }
.reminder-note { margin-top: 3px; font-size: var(--t-sm); color: var(--text-soft); white-space: pre-line; overflow-wrap: anywhere; }
.reminder-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.reminder-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-2); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .03em; background: var(--surface-2); color: var(--text-soft); }
.reminder-pill.is-when { color: #5ee08f; background: rgba(74,222,128,.12); }
.reminder-pill.is-when.is-overdue { color: var(--c-red-400); background: rgba(239,41,41,.16); }
.reminder-pill.is-dim { color: var(--text-dim); }
.reminder-pill.is-task { cursor: pointer; color: #4b9eff; }
.reminder-pill.is-who { color: #f5b342; }
.reminder-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 0 0 auto; max-width: 52%; }
.reminder-actions .action-btn { padding: 6px 10px; font-size: 12.5px; }
.reminder-done { margin-top: 10px; }
.reminder-done summary { cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }

#reminder-popups { position: fixed; top: 76px; right: 16px; z-index: 80; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100% - 32px)); pointer-events: none; }
.reminder-popup {
  pointer-events: auto;
  background: var(--surface); border: 1px solid rgba(245,158,11,.55); border-radius: var(--r-5);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(245,158,11,.10);
  padding: 12px 14px 12px;
  opacity: 0; transform: translateY(-8px) scale(.98);
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring);
}
.reminder-popup.show { opacity: 1; transform: translateY(0) scale(1); }
.reminder-popup-head { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f5b342; }
.reminder-popup-head i { animation: work-timer-pulse 1.4s ease-in-out infinite; }
.reminder-popup-close { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; display: grid; place-items: center; }
.reminder-popup-close:hover { background: var(--surface-2); color: var(--text); }
.reminder-popup-title { margin-top: 6px; font-size: var(--t-md); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.reminder-popup-note { margin-top: 3px; font-size: var(--t-sm); color: var(--text-soft); white-space: pre-line; }
.reminder-popup-task { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: #4b9eff; cursor: pointer; }
.reminder-popup-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.reminder-popup-actions .action-btn { padding: 6px 10px; font-size: 12.5px; }

@media (max-width: 640px) {
  .reminder-row { flex-direction: column; }
  .reminder-actions { max-width: none; justify-content: flex-start; }
  #reminder-popups { top: 64px; right: 8px; width: calc(100% - 16px); }
}
.reminder-popup.is-notice { border-color: rgba(74,222,128,.45); box-shadow: var(--shadow-lg); }
.reminder-popup.is-notice .reminder-popup-head { color: #5ee08f; }

/* ===== Word of the week (2026-09-23): same box as a task card, first in the Inbox and Sent lists ===== */
.wotw { position: relative; overflow: hidden; margin: 0 var(--side-padding) 12px; padding: 16px 18px 16px 20px; border-radius: var(--r-5); background: var(--surface); border: 1px solid var(--border); }
.wotw::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-red-500); }
.wotw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.wotw-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.wotw-label i { margin-right: 5px; color: var(--c-red-400); }
.wotw-by { font-weight: 600; letter-spacing: .04em; color: var(--text-muted); }
.wotw-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.wotw-link { background: none; border: 1px solid var(--border-strong); border-radius: var(--r-full); color: var(--text-soft); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding: 4px 10px; cursor: pointer; transition: border-color var(--d-fast), color var(--d-fast); }
.wotw-link:hover, .wotw-link[aria-expanded="true"] { border-color: var(--c-red-400); color: var(--text); }
.wotw-link.is-accent { border-color: var(--c-red-500); color: var(--text); }
.wotw-word { font-family: var(--font-sans); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--text); margin: 2px 0 8px; overflow-wrap: anywhere; }
.wotw-quote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--text-soft); }
.wotw-day { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.wotw-note { margin: 0; font-size: 13px; color: var(--text-muted); }
.wotw-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wotw-btn { background: var(--c-red-500); color: #fff; border: 0; border-radius: var(--r-full); font-family: var(--font-sans); font-size: 13px; font-weight: 700; padding: 8px 16px; cursor: pointer; }
.wotw-btn:hover { background: var(--c-red-600); }
.wotw-list { display: grid; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.wotw-list-item { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--text-muted); }
.wotw-list-item b { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.wotw.is-new { animation: wotwIn 1.1s var(--ease-out) 1; box-shadow: var(--shadow-glow); }
@keyframes wotwIn { from { opacity: .35; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.wotw-hint { margin: 6px 0 12px; font-size: 13px; color: var(--text-muted); }
@media (max-width: 600px) { .wotw-word { font-size: 23px; } .wotw-quote { font-size: 18.5px; } }

/* ===== Statistics: coffee breaks (2026-09-23). Teal, so a break never reads as the amber work-in-progress badge ===== */
.stats-kpi.is-break b { color: #5ec8e0; }
.stats-break-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px; padding: 5px 11px 5px 9px;
  border-radius: var(--r-full);
  background: rgba(94,200,224,.12); border: 1px solid rgba(94,200,224,.32); color: #5ec8e0;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap;
}
.stats-member.is-on-break { border-color: rgba(94,200,224,.35); }
.stats-breaks { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; }
.stats-break-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-3); background: rgba(94,200,224,.07); font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
.stats-break-row i { color: #5ec8e0; font-size: 11px; }
.stats-break-when { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-break-row b { flex: 0 0 auto; font-weight: 700; color: var(--text); }
.stats-break-over { color: #f5b342; }
@media (max-width: 600px) { .stats-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Pin / unpin (2026-09-29). A pin is personal and lifts the card to the top of the pinner's own lists. The pin button sits
   with the like, reply and bell buttons; a pinned card carries a bar on its left edge and the pin stands upright. */
.pin-btn i { transform: rotate(45deg); transition: transform var(--d-fast) var(--ease-out); }
.pin-btn.is-pinned { color: var(--text); }
.pin-btn.is-pinned i { transform: rotate(0deg); }
.pin-btn:disabled { opacity: .5; cursor: default; }
.task-card.is-pinned { border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--text-soft); }

/* Card footer on narrow cards (2026-09-29, Jad: the Start Work hint was "touching the border on the right side" in the app
   window). The footer never wraps, so on a card under about 500px the actions were pushed past the right padding and over the
   border. Now the icons stay on the first line and, when the row cannot fit, the queue arrows + Start Work + hint move together
   to their own line, right-aligned inside the padding. The hint keeps at least 150px so it reads on one or two lines. */
.task-footer { flex-wrap: wrap; row-gap: 10px; }
.task-footer .task-actions { flex: 1 1 0; justify-content: flex-end; }
.task-footer .action-hint { min-width: 150px; }