/* Overlay uses inline styles in HTML for ultimate reliability,
     but these classes are kept for the .fading-out animation */
  #pwaUpdateOverlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1F4E79 0%, #163d61 50%, #0D2E4D 100%);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    direction: rtl;
    color: white;
    opacity: 1;
    transition: opacity 0.4s ease-out;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #pwaUpdateOverlay[hidden],
  #pwaUpdateOverlay.fading-out { opacity: 0; pointer-events: none; }
  #pwaUpdateOverlay.is-hidden { display: none !important; }
  #pwaUpdateOverlay .pwa-update-content {
    text-align: center;
    max-width: 320px;
    padding: 32px;
  }
  #pwaUpdateOverlay .pwa-update-logo {
    font-size: 64px;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  }
  #pwaUpdateOverlay .pwa-update-brand {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 36px;
    letter-spacing: 0.5px;
    opacity: 0.95;
  }
  #pwaUpdateOverlay .pwa-update-spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 28px;
    border: 4px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.95);
    border-radius: 50%;
    animation: pwaSpinCritical 1s linear infinite;
  }
  @keyframes pwaSpinCritical {
    to { transform: rotate(360deg); }
  }
  @keyframes idleSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  /* ============================================================
     MEETING MODE - מסתיר מספרים וסטטיסטיקות בזמן ישיבת יומן
     ============================================================ */
  body.meeting-mode #summary,
  body.meeting-mode .charts-row,
  body.meeting-mode .day-stats,
  body.meeting-mode #admStats,
  body.meeting-mode #admCount,
  body.meeting-mode #viewerBanner,
  body.meeting-mode #statsBtn,
  body.meeting-mode .summary-card .count,
  body.meeting-mode .summary-card .percent,
  body.meeting-mode .stats-mini,
  body.meeting-mode .lawyer-count-badge,
  body.meeting-mode .count-badge,
  body.meeting-mode .workload-badge,
  body.meeting-mode #totalCount,
  body.meeting-mode #completionRate,
  body.meeting-mode .total-count,
  body.meeting-mode .completion-rate,
  body.meeting-mode .stats-row,
  body.meeting-mode [data-meeting-hide="true"] {
    display: none !important;
  }
  
  /* קוביית "מצב ישיבת יומן" - אינדיקטור פעיל */
  body.meeting-mode::before {
    content: "📋 מצב ישיבת יומן פעיל";
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #7ba968 0%, #5e8a4d 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Heebo', sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 99;
    direction: rtl;
    pointer-events: none;
    animation: meetingModeFadeIn 0.4s ease-out;
  }
  @keyframes meetingModeFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  
  /* הסתרת הספרות בכרטיסיות סיכום ימיים */
  body.meeting-mode .day-tab-count,
  body.meeting-mode .day-tab-num {
    visibility: hidden !important;
  }
  
  /* כפתור פעיל - מראה שונה */
  #meetingModeBtn.active {
    background: linear-gradient(135deg, #7ba968 0%, #5e8a4d 100%) !important;
    border-color: rgba(255,255,255,0.5) !important;
    box-shadow: 0 0 0 2px rgba(123,169,104,0.3) !important;
  }
  #pwaUpdateOverlay .pwa-spinner-ring { display: none; }
  #pwaUpdateOverlay .pwa-update-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  #pwaUpdateOverlay .pwa-update-subtitle {
    font-size: 14px;
    opacity: 0.75;
  }

:root {
  /* v128 redesign — cool, clean neutrals (Apple-like), chosen not defaulted */
  --bg: #f4f5f7;
  --ink: #1d1d1f;
  --accent: #c9472a;
  --accent-soft: #f4d9d0;
  --olive: #5a6b3a;
  --gold: #b8924a;
  --paper: #ffffff;
  --line: #e6e6ea;
  --muted: #6e6e73;
  /* muted, harmonious category (lawyer) hues */
  --almog: #4f9d78;
  --hadar: #5386b6;
  --amir: #c08a4f;
  --roi: #b09a44;
  --reject: #c0504a;
  --shadow: 0 1px 2px rgba(18,18,25,0.04), 0 8px 24px rgba(18,18,25,0.05);
  --row-hover: #f7f7f9;
  --soft-bg: #f2f3f6;
  --info-bg: #eaf1f9;
  --warn-bg: #fdf6ea;
  --warn-border: #e6c073;
  --error-bg: #fbeceb;
  --error-border: #eecbc8;
  --success-bg: #e9f4ee;
  /* secondary/tertiary ink + hairline scale */
  --ink-2: #55555c;
  --ink-3: #8a8a90;
  --hairline: #e6e6ea;
  --hairline-strong: #d9d9df;

  /* ===== v121 design tokens ===== */
  /* Brand navy-blue — the ONE accent (v128: refined cleaner, used sparingly) */
  --brand-blue: #1f5fa8;
  --brand-blue-2: #184d87;   /* darker gradient stop */
  --brand-blue-3: #123a67;   /* darkest gradient stop */
  --brand-blue-weak: #eaf1f9;
  /* Keyboard-focus ring — theme-aware (see dark override) */
  --focus-ring: #1f5fa8;
  /* Corner-radius scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* Overlay scrim dim level */
  --overlay-dim: rgba(0,0,0,0.5);
  /* z-index scale — replaces the ad-hoc magic numbers scattered in the code */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

[data-theme="dark"] {
  /* v128 redesign — clean Apple-dark neutrals */
  --bg: #000000;
  --ink: #f5f5f7;
  --accent: #e0654a;
  --accent-soft: #5a2d23;
  --paper: #1c1c1e;
  --line: #2a2a2d;
  --muted: #9a9aa1;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.5);
  --row-hover: #232325;
  --soft-bg: #161618;
  --info-bg: #16273a;
  --warn-bg: #33280f;
  --warn-border: #856028;
  --error-bg: #35191a;
  --error-border: #6e3022;
  --success-bg: #17301f;
  --ink-2: #a1a1a8;
  --ink-3: #6c6c72;
  --hairline: #2a2a2d;
  --hairline-strong: #38383c;

  /* v128 — brand-blue lighter so it reads on dark surfaces */
  --brand-blue: #4d94e0;
  --brand-blue-2: #3f82c8;
  --brand-blue-3: #336fac;
  --brand-blue-weak: #16273a;
  --focus-ring: #6ea8dc;     /* light-blue ring, visible on near-black */
  --overlay-dim: rgba(0,0,0,0.6);
}

[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] th { background: var(--soft-bg) !important; color: var(--muted); }
[data-theme="dark"] tr:hover td { background: var(--row-hover) !important; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: var(--paper); color: var(--ink); border-color: var(--line);
}
[data-theme="dark"] .upload-zone { background: var(--paper); }
[data-theme="dark"] .summary-card { background: var(--paper); }
[data-theme="dark"] .chart-card { background: var(--paper); }
[data-theme="dark"] .action-bar { background: var(--paper); }
[data-theme="dark"] .day-content { background: var(--paper); }
[data-theme="dark"] .day-header { background: linear-gradient(to bottom, #2a2825 0%, #242422 100%); }
[data-theme="dark"] .modal { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .settings-panel { background: var(--paper); }
[data-theme="dark"] .lawyer-config { background: #2c2a27; }
[data-theme="dark"] .modal-options button { background: var(--paper); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .modal-options button:hover { background: var(--soft-bg); }
[data-theme="dark"] .modal-close { color: var(--muted); border-color: var(--line); }
[data-theme="dark"] .modal-close:hover { background: var(--soft-bg); color: var(--ink); }
[data-theme="dark"] .note { color: var(--accent); }

/* ===== v122 dark-mode coverage — note/instruction fields carry inline light
   backgrounds baked into JS templates across several render paths (main table,
   viewer cards, modals). !important lets the dark theme win over the inline
   style, in ONE place, without editing every template. Only active in dark. */
[data-theme="dark"] .note[style*="e7f3ff"],
[data-theme="dark"] div[style*="#e7f3ff"] {
  background: var(--info-bg) !important;
  color: #9cc4e8 !important;
  border-color: var(--brand-blue) !important;
}
/* matched via the inline hex so ONLY filled fields get the tint — empty ones
   stay transparent and inherit the plain dark input background */
[data-theme="dark"] div[style*="#fffdf0"],
[data-theme="dark"] input[style*="#fffdf0"] {
  background: var(--warn-bg) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] div[style*="#f0f7e8"],
[data-theme="dark"] input[style*="#f0f7e8"] {
  background: var(--success-bg) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .row-delete-btn {
  background: var(--paper);
  border-color: #6e3022;
  color: var(--accent);
}
/* secondary action buttons carry assorted pale inline tints — unify them in dark */
[data-theme="dark"] .btn.secondary {
  background: var(--soft-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] kbd {
  background: var(--soft-bg) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
/* general/private note editor modals are built with inline white shells */
[data-theme="dark"] #privateNoteModalOverlay > div,
[data-theme="dark"] #generalNoteModalOverlay > div {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] #privateNoteModalOverlay h3,
[data-theme="dark"] #generalNoteModalOverlay h3 { color: var(--ink) !important; }
[data-theme="dark"] #privateNoteModalOverlay div[style*="#fafaf7"],
[data-theme="dark"] #generalNoteModalOverlay div[style*="#fafaf7"] { background: var(--soft-bg) !important; }
[data-theme="dark"] #privateNoteModalOverlay textarea,
[data-theme="dark"] #generalNoteModalOverlay textarea {
  background: var(--soft-bg) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] #privateNoteModalOverlay button[style*="background:#fff"],
[data-theme="dark"] #generalNoteModalOverlay button[style*="background:#fff"] {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* ===== v122 dark coverage: mobile admin view (.adm-*) — 48 selectors were all
   light-hardcoded, rendering as glaring white in dark mode. Colored lawyer
   chips (.adm-chip-*) and the terracotta time are intentionally left alone. */
[data-theme="dark"] .adm-date-row,
[data-theme="dark"] .adm-qa-btn,
[data-theme="dark"] .adm-week-strip,
[data-theme="dark"] .adm-stat-card,
[data-theme="dark"] .adm-empty,
[data-theme="dark"] .adm-card,
[data-theme="dark"] .adm-edit-sheet,
[data-theme="dark"] .adm-rec-item {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .adm-week-day,
[data-theme="dark"] .adm-date-row input[type="date"],
[data-theme="dark"] .adm-date-row button,
[data-theme="dark"] .adm-card-tik {
  background: var(--soft-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .adm-qa-label,
[data-theme="dark"] .adm-card-court { color: var(--ink) !important; }
[data-theme="dark"] .adm-stat-label,
[data-theme="dark"] .adm-card-judge,
[data-theme="dark"] .adm-count,
[data-theme="dark"] .adm-empty { color: var(--muted) !important; }
[data-theme="dark"] .adm-stat-num { color: var(--brand-blue) !important; }
[data-theme="dark"] .adm-card-note {
  background: var(--warn-bg) !important;
  color: #e8c86a !important;
  border-right-color: var(--warn-border) !important;
}
[data-theme="dark"] .adm-card-instr { background: var(--warn-bg) !important; }
[data-theme="dark"] .adm-card-gnote {
  background: var(--success-bg) !important;
  color: var(--ink) !important;
  border-color: #4a6b38 !important;
}

/* ===== v122 dark coverage: freelancer recording view (.fl-*) ===== */
[data-theme="dark"] .fl-card,
[data-theme="dark"] .fl-rec-item,
[data-theme="dark"] .fl-empty,
[data-theme="dark"] .fl-rec-stop-btn {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .fl-card-court { color: var(--ink) !important; }
[data-theme="dark"] .fl-card-judge,
[data-theme="dark"] .fl-card-meta { color: var(--muted) !important; }

/* ===== v122 dark coverage: edit-assignment modal (openEditModal) inner surfaces.
   Specificity mirrors the base rules (+ [data-theme]) so no !important needed. */
[data-theme="dark"] .modal-info { background: var(--soft-bg); }
[data-theme="dark"] .modal-options .custom-input-row { background: var(--soft-bg); }
[data-theme="dark"] .modal-options .custom-input-row input { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .modal-options .custom-input-row button:disabled { background: var(--line); color: var(--muted); }

/* ===== v122 dark coverage: common light inline backgrounds baked into JS
   templates (attention center, report modals, panels). Matched by the
   `background:#hex` inline substring so ONLY backgrounds are remapped (not text
   colors), grouped by hue → the matching theme var. Print windows are separate
   documents without data-theme, so their light styling is unaffected. */
[data-theme="dark"] [style*="background:#f7f5f0"],
[data-theme="dark"] [style*="background:#fafaf5"],
[data-theme="dark"] [style*="background:#fafaf7"],
[data-theme="dark"] [style*="background:#f4f1ea"],
[data-theme="dark"] [style*="background:#f5f5f5"],
[data-theme="dark"] [style*="background:#f0f0f0"],
[data-theme="dark"] [style*="background:#f5f7f9"],
[data-theme="dark"] [style*="background:#e0e9f3"] {
  background: var(--soft-bg) !important;
}
[data-theme="dark"] [style*="background:#fef0f0"],
[data-theme="dark"] [style*="background:#fdecea"],
[data-theme="dark"] [style*="background:#fce8e8"],
[data-theme="dark"] [style*="background:#f5d0d0"] {
  background: var(--error-bg) !important;
}
[data-theme="dark"] [style*="background:#fef9e7"],
[data-theme="dark"] [style*="background:#fef4e0"],
[data-theme="dark"] [style*="background:#fff8e6"],
[data-theme="dark"] [style*="background:#fefce8"],
[data-theme="dark"] [style*="background:#fef9f7"],
[data-theme="dark"] [style*="background:#fff1e6"],
[data-theme="dark"] [style*="background:#fdf6f0"],
[data-theme="dark"] [style*="background:#fef5f0"],
[data-theme="dark"] [style*="background:#fdf0e6"],
[data-theme="dark"] [style*="background:#fff3e6"] {
  background: var(--warn-bg) !important;
}
[data-theme="dark"] [style*="background:#f0f8e8"],
[data-theme="dark"] [style*="background:#e8f5e9"],
[data-theme="dark"] [style*="background:#e6f0e0"] {
  background: var(--success-bg) !important;
}

/* ===== v121 keyboard-focus visibility (a11y) =====
   Interactive elements had no visible focus state — keyboard users couldn't
   tell where they were. :focus-visible only shows the ring on keyboard nav
   (not on mouse click), so it doesn't disturb pointer users. Theme-aware via
   --focus-ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.week-btn:focus-visible,
.lawyer-badge:focus-visible,
.tag-btn:focus-visible,
.time-editable:focus-visible,
.day-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Heebo', sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

/* Header */
header {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 24px;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand h1 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand .subtitle {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.brand-decoration {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.brand-line {
  height: 1px;
  width: 40px;
  background: var(--accent);
}

.brand-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Stages */
.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stage {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 2px;
  position: relative;
  transition: all 0.3s;
}

.stage.active {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.stage.done {
  border-color: var(--olive);
  background: #f7f9f3;
}

.stage-num {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--line);
  line-height: 1;
}

.stage.active .stage-num { color: var(--accent); }
.stage.done .stage-num { color: var(--olive); }

.stage h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  padding-right: 50px;
}

.stage p {
  font-size: 13px;
  color: var(--muted);
  padding-right: 50px;
}

/* Upload Zone */
.upload-zone {
  background: var(--paper);
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.upload-zone.uploaded {
  padding: 14px 18px;
  border-style: solid;
  border-color: var(--line);
  text-align: right;
  cursor: default;
}

.upload-zone.uploaded:hover {
  background: var(--paper);
  border-color: var(--line);
  transform: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.upload-zone:hover {
  border-color: var(--accent);
  background: #fef9f7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.01);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 12px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.upload-zone:hover .upload-icon {
  transform: scale(1.1);
}

.upload-zone h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.upload-zone p {
  color: var(--muted);
  font-size: 14px;
}

.upload-zone input[type="file"],
#fileInput {
  display: none;
}

/* Buttons */
.btn {
  background: var(--ink);
  color: var(--bg);
  border: none;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.btn:hover {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.primary {
  background: var(--accent);
}

.btn.primary:hover {
  background: #a8381f;
}

.btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: none;
}

.btn.secondary:hover {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* Settings Panel */
.settings-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  display: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.settings-panel.show { display: block; }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.lawyer-config {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  background: #fdfcfa;
}

.lawyer-config h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lawyer-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.config-row label {
  color: var(--muted);
}

.config-row input {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 13px;
  text-align: center;
}

/* Controls */
.controls {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.week-selector {
  display: flex;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 2px;
  justify-content: center;
  flex-wrap: wrap;
}

.week-btn {
  padding: 8px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.week-btn:hover {
  background: var(--bg);
}

.week-btn.active {
  background: var(--ink);
  color: var(--bg);
}

/* Results */
.results {
  display: none;
}

.results.show { display: block; }

/* Summary Cards */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.summary-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: var(--line);
}

.summary-card.almog::before { background: var(--almog); }
.summary-card.hadar::before { background: var(--hadar); }
.summary-card.amir::before { background: var(--amir); }
.summary-card.roi::before { background: var(--roi); }
.summary-card.sivan::before { background: #9b6b9e; }
.summary-card.reject::before { background: var(--reject); }

.summary-card .name {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}

.summary-card .count {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  margin: 8px 0 4px;
}

.summary-card .pct {
  font-size: 14px;
  color: var(--muted);
}

/* Charts */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .charts-row { grid-template-columns: 1fr; }
}

.chart-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.chart-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

.chart-card canvas {
  max-height: 280px;
}

/* Day Tabs */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--line);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.tabs::-webkit-scrollbar {
  height: 4px;
}
.tabs::-webkit-scrollbar-track {
  background: transparent;
}
.tabs::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 2px;
}

.tab {
  padding: 12px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all 0.15s ease;
  border-radius: 4px 4px 0 0;
}

.tab:hover { 
  color: var(--ink); 
  background: rgba(0,0,0,0.02);
}
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

/* Day Table */
.day-content {
  display: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.day-content.active { display: block; }

.day-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(to bottom, #fcfbf8 0%, #ffffff 100%);
}

.day-content.is-today {
  position: relative;
  border-right: 4px solid #c9472a;
}

.day-content.is-today .day-header {
  background: linear-gradient(to bottom, #fef5f0 0%, #fefcfa 100%);
}

.day-header h2 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 28px;
  font-weight: 700;
}

.day-stats {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

.day-stats strong {
  color: var(--ink);
  font-weight: 700;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #f7f5f0;
  padding: 12px 16px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s ease;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafaf5; }

.lawyer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.lawyer-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.lawyer-badge.almog { background: #e6f0e0; color: #3d5828; }
.lawyer-badge.hadar { background: #dde9f0; color: #2c4c5c; }
.lawyer-badge.amir { background: #f5e3d3; color: #6e4220; }
.lawyer-badge.roi { background: #f5ecd0; color: #6e5520; }
.lawyer-badge.sivan { background: #e8d6e9; color: #4e2d50; }
.lawyer-badge.tomer { background: #e8d6e9; color: #4e2d50; }
.lawyer-badge.eli { background: #e8d6e9; color: #4e2d50; }
.lawyer-badge.shlomo { background: #f5c8c8; color: #6e1818; border: 1px solid #c9472a; }
.lawyer-badge.invalid { background: #f5c8c8; color: #6e1818; border: 1px solid #a8201d; }
.lawyer-badge.postpone { background: #e8d4ed; color: #4e2862; border: 1px solid #7a3c8f; }
.lawyer-badge.compromise { background: #d0e7e2; color: #1f4d44; border: 1px solid #3a8a7a; }
/* Small minus button to delete a row */
.row-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #d4a39a;
  background: #fff;
  color: #a83820;
  font-size: 18px;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  padding: 0;
  transition: all 0.15s;
  font-family: monospace;
}
.row-delete-btn:hover {
  background: #c9472a;
  color: #fff;
  border-color: #c9472a;
  transform: scale(1.1);
}
.row-delete-btn:focus { outline: 2px solid #c9472a; outline-offset: 1px; }
.lawyer-badge.reject { background: #f5d8d0; color: #6e2820; }
.lawyer-badge.pending { background: #ececec; color: #555; border: 1px dashed #888; }
.lawyer-badge.sivan-pending { background: #f0e6df; color: #6b4d3e; border: 1px dashed #b89a8c; }
.lawyer-badge.tomer-pending { background: #f0e6df; color: #6b4d3e; border: 1px dashed #b89a8c; }
.lawyer-badge.eli-pending { background: #f0e6df; color: #6b4d3e; border: 1px dashed #b89a8c; }

.lawyer-badge:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow);
}

.note {
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
  margin-top: 2px;
}

/* Edit Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 46, 77, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  /* Use max() with env() to ensure content stays within safe area on iOS */
  padding-top: max(16px, env(safe-area-inset-top, 16px));
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  padding-left: max(16px, env(safe-area-inset-left, 16px));
  padding-right: max(16px, env(safe-area-inset-right, 16px));
  animation: modalOverlayIn 0.2s ease-out;
}

/* Mobile: extra padding so close (X) buttons aren't in iOS edge-swipe areas */
@media (max-width: 768px) {
  .modal-overlay {
    padding-top: max(20px, env(safe-area-inset-top, 20px)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    padding-left: max(20px, env(safe-area-inset-left, 20px)) !important;
    padding-right: max(20px, env(safe-area-inset-right, 20px)) !important;
    /* CRITICAL: Anchor modal to TOP, not center.
       Otherwise tall modals get vertically centered and their top portion
       (containing X close button) overflows ABOVE the viewport. */
    align-items: flex-start !important;
  }
  /* Modal max-height should respect safe-area so it never overflows viewport */
  .modal-overlay > .modal {
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 60px) !important;
  }
  /* Make X close buttons in modals bigger and more touchable */
  .modal button[onclick*="close"],
  .modal-overlay button[onclick*="close"],
  .modal > div > button[onclick*="closeDocumentsModal"],
  .modal > div > button[onclick*="closeManualAssign"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 24px !important;
    touch-action: manipulation;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Custom inline-styled overlays (Net-compare, Restore) get the same safe-area + top-anchor treatment */
  #netCompareModal, #restoreModal {
    align-items: flex-start !important;
    padding: max(16px, env(safe-area-inset-top, 16px)) 12px max(16px, env(safe-area-inset-bottom, 16px)) !important;
  }
  #netCompareModal > div, #restoreModal > div {
    width: 100% !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 36px) !important;
  }
}

@keyframes modalOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-overlay.show { display: flex; }

.modal {
  background: var(--paper);
  padding: 28px;
  max-width: 400px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25), 0 5px 15px rgba(0,0,0,0.1);
  animation: modalContentIn 0.25s ease-out;
}

@keyframes modalContentIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal h3 {
  margin-bottom: 16px;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 24px;
}

.modal-info {
  background: #f7f5f0;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  border-radius: 6px;
  border-right: 3px solid var(--gold);
}

.modal-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-options .section-header {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin: 14px 0 4px 0;
  padding: 0 4px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-options .section-header::before,
.modal-options .section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.modal-options .section-header:first-child { margin-top: 0; }

/* Quick-filter chips: bigger, touch-friendly tap targets */
.quick-filter-btn {
  padding: 8px 14px !important;
  min-height: 40px !important;
}

/* Shared modal close-button sizing (touch-friendly) */
.modal-x{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;line-height:1;}

.modal-options .options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}

.modal-options .options-grid button {
  padding: 10px 8px;
  text-align: center;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  line-height: 1.2;
  word-break: break-word;
}

.modal-options .custom-input-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  padding: 10px;
  border: 1px dashed #b89a8c;
  border-radius: 6px;
  background: #fafaf7;
  align-items: center;
}
.modal-options .custom-input-row input {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  direction: rtl;
  background: white;
  min-width: 0;
}
.modal-options .custom-input-row input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}
.modal-options .custom-input-row button {
  padding: 9px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: all 0.15s;
}
.modal-options .custom-input-row button:hover:not(:disabled) {
  background: var(--accent-dark, #a83820);
  transform: translateY(-1px);
}
.modal-options .custom-input-row button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.modal-options .custom-current-badge {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
}

.modal-options button {
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit;
  cursor: pointer;
  text-align: right;
  font-size: 14px;
  transition: all 0.15s ease;
  border-radius: 6px;
}

.modal-options button:hover {
  border-color: var(--accent);
  background: #fef9f7;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.modal-close {
  margin-top: 16px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--muted);
  transition: all 0.15s ease;
}
.modal-close:hover {
  background: var(--bg);
  color: var(--ink);
}

/* Action Bar */
.action-bar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.action-bar-info {
  font-size: 13px;
  color: var(--muted);
}

.action-bar-info strong {
  color: var(--ink);
  font-weight: 700;
}

/* Toggle */
.toggle-settings {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.toggle-settings:hover {
  border-color: var(--ink);
  background: var(--bg);
}

/* Mobile */
@media (max-width: 768px) {
  .container { padding: 16px; }
  .summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .summary-card { padding: 14px; }
  .stages { grid-template-columns: 1fr; }
  table { font-size: 12px; }
  td, th { padding: 8px; }
  .brand h1 { font-size: 24px; }
  .modal { padding: 20px; }
  .modal h3 { font-size: 20px; }
  #userBar { font-size: 11px; padding: 6px 12px; }
  #userBar .role-badge { font-size: 10px; padding: 1px 6px; }
  .action-bar { padding: 12px 16px; }
  .charts-row { gap: 16px; }
  .chart-card { padding: 16px; }
  .upload-zone { padding: 32px 16px; }
  .upload-icon { font-size: 36px; }
  .upload-zone h2 { font-size: 16px; }
}

/* ============================================================
   VIEWER-ONLY VIEW STYLES
   Clean lawyer interface - no stats, just their hearings.
   ============================================================ */
.viewer-welcome {
  background: linear-gradient(135deg, #1F4E79 0%, #0D2E4D 100%);
  color: white;
  padding: 24px 24px;
  border-radius: 12px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(31, 78, 121, 0.15);
  position: relative;
}

/* Logout text-link at bottom of welcome banner - subtle, doesn't compete with main actions */
.viewer-logout-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 16px;
  border-radius: 18px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 14px;
  touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
}
.viewer-logout-link:hover, .viewer-logout-link:active {
  background: rgba(201, 71, 42, 0.4);
  color: white;
  border-color: rgba(255, 200, 180, 0.4);
}
/* Next hearing badge in welcome banner */
.viewer-next-hearing {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 8px 14px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  animation: cardFadeIn 0.4s ease-out;
}
.next-h-icon {
  font-size: 16px;
}
.next-h-time {
  font-weight: 700;
  color: white;
}
.next-h-court {
  opacity: 0.85;
  font-size: 12px;
}
.next-h-until {
  background: rgba(255, 255, 255, 0.18);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.next-h-until.urgent {
  background: rgba(212, 145, 95, 0.9);
  color: white;
  animation: nextHUrgentPulse 2s ease-in-out infinite;
}
@keyframes nextHUrgentPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Buttons placed at the BOTTOM of the welcome banner (after the name + subtitle) */
.viewer-welcome-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.docs-btn-banner {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 18px;
  border-radius: 22px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, transform 0.15s;
  min-height: 42px;
}
.docs-btn-banner:hover, .docs-btn-banner:active {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.docs-btn-banner .docs-badge {
  background: #c9472a;
  color: white;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  margin-right: 2px;
  line-height: 1.4;
}
.viewer-welcome h2 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: white;
}
.viewer-welcome p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}
.viewer-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: var(--paper);
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.viewer-tab {
  flex: 1;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.viewer-tab:hover {
  background: var(--soft-bg);
  color: var(--ink);
}
.viewer-tab.active {
  background: #1F4E79;
  color: white;
  box-shadow: 0 2px 6px rgba(31, 78, 121, 0.2);
}
.viewer-tab-icon { font-size: 18px; }

/* New horizontal day strip - replaces tabs */
.viewer-day-strip-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  align-items: stretch;
  padding: 8px 0;
  position: relative;
  /* Sticky to top during scroll for quick day-switching */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  /* Subtle shadow when scrolled (visible only when not at top) */
  transition: box-shadow 0.2s ease;
}

/* Add shadow when scrolled past top (visual cue for sticky) */
body.is-scrolled .viewer-day-strip-wrap {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.viewer-day-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  scrollbar-width: none;
  padding: 2px 2px;
  scroll-padding-inline: 12px;
  scroll-behavior: smooth;
}
.viewer-day-strip::-webkit-scrollbar { display: none; }

.viewer-day-chip {
  flex-shrink: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 8px 7px;
  text-align: center;
  cursor: pointer;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  font-family: inherit;
  position: relative;
  touch-action: manipulation;
  color: var(--ink);
}
.viewer-day-chip:active { transform: scale(0.96); }
.viewer-day-chip:hover { background: var(--soft-bg); }

.viewer-day-chip.active {
  background: #1F4E79;
  color: white;
  border-color: #1F4E79;
  box-shadow: 0 2px 8px rgba(31, 78, 121, 0.25);
}

/* Today indicator - small orange dot in top-right (RTL: top-left visual) */
.viewer-day-chip.today::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4915f;
  box-shadow: 0 0 0 2px var(--paper);
}
.viewer-day-chip.active.today::after {
  background: #ffd166;
  box-shadow: 0 0 0 2px #1F4E79;
}

.viewer-day-chip .day-name {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: 0.3px;
}
.viewer-day-chip.active .day-name { opacity: 0.9; }

.viewer-day-chip .day-num {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
}
.viewer-day-chip .day-month {
  font-size: 10px;
  opacity: 0.55;
}
.viewer-day-chip.active .day-month { opacity: 0.85; }

.viewer-day-chip .day-count {
  font-size: 10px;
  background: #d4915f;
  color: white;
  border-radius: 9px;
  padding: 1px 6px;
  margin-top: 3px;
  font-weight: 700;
  min-width: 18px;
}
.viewer-day-chip.active .day-count {
  background: rgba(255, 255, 255, 0.28);
}

/* The "All" chip - distinguished */
.viewer-day-chip-all {
  background: linear-gradient(135deg, #f4f1ea, #ebe7dc);
  min-width: 62px;
}
.viewer-day-chip-all.active {
  background: linear-gradient(135deg, #1F4E79, #163d61);
}
.viewer-day-chip-all .all-icon { font-size: 16px; }
.viewer-day-chip-all .all-label {
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

/* Date picker button */
.viewer-date-pick-btn {
  flex-shrink: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  cursor: pointer;
  min-width: 48px;
  height: auto;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.viewer-date-pick-btn:hover, .viewer-date-pick-btn:active {
  background: var(--soft-bg);
}

.viewer-content {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-height: 200px;
}
.viewer-day-block {
  border-bottom: 1px solid var(--line);
}
.viewer-day-block:last-child { border-bottom: none; }
.viewer-day-header {
  padding: 14px 20px;
  background: var(--soft-bg);
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.viewer-day-header.is-today {
  background: linear-gradient(to bottom, #fef5f0 0%, #fefcfa 100%);
  border-right: 4px solid #c9472a;
}
.viewer-day-header .today-pill {
  background: #c9472a;
  color: white;
  font-size: 11px;
  font-family: 'Heebo', sans-serif;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}
.viewer-hearing-row {
  padding: 14px 20px;
  border-bottom: 1px solid var(--soft-bg);
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 16px;
  align-items: center;
  transition: background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.viewer-hearing-row:last-child { border-bottom: none; }
.viewer-hearing-row:hover { background: #fdfcf8; }

/* ============================================================
   UX POLISH LAYER - smoother mobile experience
   Adds: tap feedback, smooth transitions, refined animations
   ============================================================ */

/* Remove ugly iOS tap highlight on all interactive elements */
button, a, .viewer-hearing-row, .viewer-day-chip,
.modal-overlay, .docs-btn-banner, .viewer-tab, .viewer-logout-link,
[onclick], [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Smooth tap feedback on ALL buttons - scale down slightly on press */
button:active:not(:disabled),
.docs-btn-banner:active,
.viewer-day-chip:active,
.viewer-tab:active,
.viewer-logout-link:active,
.viewer-date-pick-btn:active,
.modal-close:active,
.print-ctrl-btn:active {
  transform: scale(0.97);
  transition: transform 0.08s ease-out;
}

/* Smooth transition for all buttons (override sharp colors changes) */
button {
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

/* Hearing cards: subtle fade-in stagger when rendered */
.viewer-hearing-row {
  animation: cardFadeIn 0.35s ease-out backwards;
}
.viewer-hearing-row:nth-child(1) { animation-delay: 0.00s; }
.viewer-hearing-row:nth-child(2) { animation-delay: 0.05s; }
.viewer-hearing-row:nth-child(3) { animation-delay: 0.10s; }
.viewer-hearing-row:nth-child(4) { animation-delay: 0.13s; }
.viewer-hearing-row:nth-child(5) { animation-delay: 0.16s; }
.viewer-hearing-row:nth-child(6) { animation-delay: 0.19s; }
.viewer-hearing-row:nth-child(7) { animation-delay: 0.21s; }
.viewer-hearing-row:nth-child(8) { animation-delay: 0.23s; }
.viewer-hearing-row:nth-child(n+9) { animation-delay: 0.25s; }

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Day chip: smooth color/scale transitions */
.viewer-day-chip {
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.1s ease-out;
}
.viewer-day-chip:active {
  transform: scale(0.93);
}

/* Day chip: pulse when freshly selected */
.viewer-day-chip.active {
  animation: chipPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes chipPop {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Modal: smooth slide-up animation on mobile (iOS-native feel) */
@media (max-width: 768px) {
  .modal-overlay {
    animation: overlayFadeIn 0.25s ease-out;
  }
  @keyframes overlayFadeIn {
    from { background: rgba(13, 46, 77, 0); }
    to   { background: rgba(13, 46, 77, 0.55); }
  }
  .modal {
    animation: modalSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  @keyframes modalSlideUp {
    from {
      opacity: 0;
      transform: translateY(24px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* Buttons get a refined, soft drop shadow on hover (desktop) */
@media (hover: hover) {
  .docs-btn-banner:hover,
  .viewer-date-pick-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
  }
}

/* Recording button: smooth pulse animation */
@keyframes recordingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
}
button.recording-active,
.recording-active {
  animation: recordingPulse 1.6s infinite;
}

/* Smooth content transitions */
.viewer-content,
#viewerContent {
  transition: opacity 0.2s ease;
}

/* Hearings list: smooth container appearance */
.viewer-hearings-section {
  animation: cardFadeIn 0.3s ease-out;
}

/* Better focus states (keyboard navigation) without being ugly */
button:focus-visible,
.viewer-day-chip:focus-visible,
input:focus-visible {
  outline: 2px solid #1F4E79;
  outline-offset: 2px;
}
button:focus:not(:focus-visible) {
  outline: none;
}

/* Smooth scrolling everywhere */
html { scroll-behavior: smooth; }
.viewer-day-strip,
.modal,
.modal-overlay > .modal {
  scroll-behavior: smooth;
}

/* Disable text selection on UI chrome (buttons, chips) - feels more app-like */
button, .viewer-day-chip, .viewer-tab,
.docs-btn-banner, .viewer-date-pick-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* But allow selection on content (text, names, etc.) */
.viewer-hearing-court,
.viewer-hearing-judge,
.viewer-hearing-tik,
.viewer-hearing-note {
  -webkit-user-select: text;
  user-select: text;
}

/* Smooth shadows on cards for subtle depth */
.viewer-hearings-section,
.viewer-content {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
}

/* Refined card edge transitions */
.viewer-hearing-row {
  position: relative;
}
.viewer-hearing-row::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background 0.15s ease;
}
.viewer-hearing-row:active::after {
  background: rgba(31, 78, 121, 0.04);
}

/* No transitions on slow devices / reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Smooth font rendering on iOS */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent text from being too small to read on iOS form fields */
input, textarea, select {
  font-size: 16px;  /* Prevents iOS auto-zoom on focus */
}
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* Remove iOS double-tap zoom (but keep pinch-zoom for accessibility) */
button, a, [role="button"], [onclick], .viewer-day-chip,
.viewer-hearing-row, .docs-btn-banner, .modal-close,
.viewer-tab, .shakuy-confirm-actions button {
  touch-action: manipulation;
}

/* Smooth touch scrolling on iOS for all scrollable areas */
.modal, .viewer-content, .modal-overlay, .viewer-day-strip,
[style*="overflow-y"], [style*="overflow:auto"], [style*="overflow: auto"] {
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   UNIFIED UI HELPERS - styles for showConfirm() and showSkeleton()
   ============================================================ */

/* Confirmation modal overlay */
.shakuy-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 46, 77, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: max(20px, env(safe-area-inset-top, 20px));
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  opacity: 0;
  transition: opacity 0.2s ease-out;
  direction: rtl;
}
.shakuy-confirm-overlay.visible {
  opacity: 1;
}

.shakuy-confirm-box {
  background: var(--paper, white);
  border-radius: 18px;
  padding: 28px 24px 20px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-family: 'Heebo', Arial, sans-serif;
  transform: scale(0.92) translateY(8px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out;
}
.shakuy-confirm-overlay.visible .shakuy-confirm-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.shakuy-confirm-icon {
  font-size: 40px;
  margin-bottom: 8px;
  line-height: 1;
}

.shakuy-confirm-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.shakuy-confirm-message {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 22px;
  white-space: pre-line;
}

.shakuy-confirm-actions {
  display: flex;
  gap: 10px;
  flex-direction: row-reverse;
}

.shakuy-confirm-actions button {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  touch-action: manipulation;
  min-height: 46px;
  -webkit-tap-highlight-color: transparent;
}
.shakuy-confirm-actions button:active { transform: scale(0.97); }

.shakuy-confirm-ok {
  background: linear-gradient(135deg, #1F4E79, #163d61);
  color: white;
  box-shadow: 0 2px 8px rgba(31, 78, 121, 0.25);
}
.shakuy-confirm-ok:hover {
  box-shadow: 0 4px 12px rgba(31, 78, 121, 0.35);
}

.shakuy-confirm-cancel {
  background: var(--soft-bg, #f4f1ea);
  color: var(--ink);
  border: 1px solid var(--line) !important;
}
.shakuy-confirm-cancel:hover {
  background: #ebe7dc;
}

/* Skeleton loaders */
.shakuy-skeleton-wrap {
  padding: 8px 0;
}

.shakuy-skeleton-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--soft-bg);
  align-items: center;
}

.shakuy-skeleton-time {
  width: 60px;
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0ece2 0%, #e6e1d5 50%, #f0ece2 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s linear infinite;
}

.shakuy-skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shakuy-skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0ece2 0%, #e6e1d5 50%, #f0ece2 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s linear infinite;
}

.shakuy-skeleton-tag {
  height: 18px;
  border-radius: 4px;
  margin-top: 2px;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Dark mode support for confirm modal */
[data-theme="dark"] .shakuy-confirm-box {
  background: #2c3845;
  color: #f0ece2;
}
[data-theme="dark"] .shakuy-confirm-title,
[data-theme="dark"] .shakuy-confirm-message {
  color: #f0ece2;
}
[data-theme="dark"] .shakuy-confirm-cancel {
  background: #1f2935;
  color: #f0ece2;
}
[data-theme="dark"] .shakuy-skeleton-time,
[data-theme="dark"] .shakuy-skeleton-line {
  background: linear-gradient(90deg, #2c3845 0%, #353f4d 50%, #2c3845 100%);
  background-size: 200% 100%;
}

/* ============================================================
   PWA UPDATE OVERLAY - full-screen update transition
   Bridges across page reloads so user sees ONE consistent screen
   ============================================================ */
#pwaUpdateOverlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1F4E79 0%, #163d61 50%, #0D2E4D 100%);
  z-index: 9999999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Heebo', 'Arial', sans-serif;
  direction: rtl;
  color: white;
  /* Smooth fade in/out */
  opacity: 1;
  transition: opacity 0.4s ease-out;
  /* Cover iOS safe areas */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

#pwaUpdateOverlay.fading-out {
  opacity: 0;
  pointer-events: none;
}

.pwa-update-content {
  text-align: center;
  max-width: 320px;
  padding: 32px;
  animation: pwaContentIn 0.5s ease-out;
}

@keyframes pwaContentIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pwa-update-logo {
  font-size: 64px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
  animation: pwaLogoFloat 3s ease-in-out infinite;
}

@keyframes pwaLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.pwa-update-brand {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 36px;
  letter-spacing: 0.5px;
  opacity: 0.95;
}

.pwa-update-spinner {
  width: 56px;
  height: 56px;
  margin: 0 auto 28px;
  position: relative;
}

.pwa-spinner-ring {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  animation: pwaSpinSmooth 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pwaSpinSmooth {
  to { transform: rotate(360deg); }
}

.pwa-update-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0.98;
}

.pwa-update-subtitle {
  font-size: 14px;
  opacity: 0.7;
  font-weight: 400;
  letter-spacing: 0.2px;
}
.viewer-hearing-time {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 22px;
  font-weight: 700;
  color: #1F4E79;
}

/* Relative time labels: "בעוד 25 דק׳" / "עבר" etc */
.viewer-hearing-time-rel {
  font-family: 'Heebo', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 8px;
  display: inline-block;
  white-space: nowrap;
}
.viewer-hearing-time-rel.past {
  background: #f0ece2;
  color: #888;
}
.viewer-hearing-time-rel.now {
  background: #c9472a;
  color: white;
  animation: pulseNow 1.5s ease-in-out infinite;
}
.viewer-hearing-time-rel.imminent {
  background: #d4915f;
  color: white;
  animation: pulseNow 2s ease-in-out infinite;
}
.viewer-hearing-time-rel.soon {
  background: #e8c474;
  color: #5a4408;
}
.viewer-hearing-time-rel.later {
  background: #e0e8f0;
  color: #1F4E79;
}

@keyframes pulseNow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Past hearings (today only): subtle de-emphasis */
.viewer-hearing-row.time-past {
  opacity: 0.65;
}
.viewer-hearing-row.time-past .viewer-hearing-time {
  color: #888;
}

/* Imminent (upcoming in <15 min): subtle highlight */
.viewer-hearing-row.time-imminent {
  background: linear-gradient(90deg, rgba(212, 145, 95, 0.06), transparent 80%);
  border-right: 3px solid #d4915f;
}
.viewer-hearing-row.time-now {
  background: linear-gradient(90deg, rgba(201, 71, 42, 0.08), transparent 80%);
  border-right: 3px solid #c9472a;
}
.viewer-hearing-details { min-width: 0; }
.viewer-hearing-court {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 3px;
}
.viewer-hearing-judge {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 3px;
}
.viewer-hearing-tik {
  font-family: monospace;
  font-size: 12px;
  color: #1F4E79;
  background: var(--soft-bg);
  border: 1px solid var(--line);
  padding: 2px 9px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 600;
}
.viewer-hearing-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
/* Touch-friendly action buttons (📝 📎 💬) in each hearing row */
.viewer-act-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  min-height: 42px;
  min-width: 46px;
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, background 0.15s ease;
}
.viewer-act-btn:active { transform: scale(0.94); background: var(--soft-bg); }
.viewer-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
}
.viewer-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.viewer-empty-text {
  font-size: 15px;
  font-weight: 500;
}
.viewer-empty-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

.viewer-empty-suggestion {
  margin-top: 18px;
  background: linear-gradient(135deg, #1F4E79, #163d61);
  color: white;
  border: none;
  padding: 11px 22px;
  border-radius: 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(31, 78, 121, 0.2);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.viewer-empty-suggestion:hover {
  box-shadow: 0 4px 12px rgba(31, 78, 121, 0.3);
  transform: translateY(-1px);
}
.viewer-empty-suggestion:active {
  transform: scale(0.97);
}

@media (max-width: 600px) {
  .viewer-welcome { padding: 20px; }
  .viewer-welcome h2 { font-size: 24px; }
  .viewer-tabs { flex-direction: row; gap: 4px; padding: 4px; }
  .viewer-tab { padding: 10px 6px; font-size: 13px; flex-direction: column; gap: 2px; }
  .viewer-tab-icon { font-size: 20px; }
  .viewer-hearing-row { grid-template-columns: 1fr; gap: 6px; padding: 14px; }
  .viewer-hearing-time { font-size: 18px; }
  .viewer-hearing-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
}

/* Hide viewer-only elements from non-viewers */
body:not(.is-viewer) #viewerView { display: none !important; }

/* Hide stats elements from viewers */
body.is-viewer #results,
body.is-viewer .controls,
body.is-viewer #weekControls,
body.is-viewer #quickFilterBar,
body.is-viewer #todayBadge,
body.is-viewer .upload-zone,
body.is-viewer #fileInput,
body.is-viewer .container > header,
body.is-viewer .container > .footer-note,
body.is-viewer .settings-panel,
body.is-viewer #settingsPanel,
body.is-viewer .toggle-settings,
body.is-viewer #weekSelector,
body.is-viewer #weekStatsContainer {
  display: none !important;
}

/* AGGRESSIVE: in viewer mode, only #viewerView is visible inside container.
   This eliminates any leftover spacing from invisible siblings. */
body.is-viewer .container > *:not(#viewerView):not(.footer-note) {
  display: none !important;
}

@media (max-width: 480px) {
  .container { padding: 12px; }
  .summary { grid-template-columns: 1fr; }
  .week-btn { padding: 6px 12px; font-size: 12px; }
  .tab { padding: 10px 14px; font-size: 13px; }
  .btn { padding: 10px 18px; font-size: 13px; }
}

/* ============================================================
   COMPREHENSIVE MOBILE OPTIMIZATION (≤ 768px)
   Touch-friendly, modal-friendly, input-friendly.
   ============================================================ */

/* ============ SAFE AREA SUPPORT (iPhone X+ notch / Android edge) ============ */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* User bar respects iOS notch + status bar.
   On iOS with black-translucent status bar, env() works correctly with viewport-fit=cover.
   On other devices, the 8px fallback is sufficient. */
#userBar {
  padding-top: max(env(safe-area-inset-top, 0px), 8px) !important;
  padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

/* SOLUTION: On mobile in viewer mode, HIDE the entire userBar.
   Everything important is already in the viewer-welcome banner below.
   This completely eliminates the iOS status bar overlap problem. */
@media (max-width: 768px) {
  body.is-viewer #userBar {
    display: none !important;
  }
  /* Body stays cream/var(--bg) - white below banner.
     Only a small fixed pseudo-element covers the iOS status bar area in blue.
     HTML element is set to blue via JS for iOS overscroll bounce. */
  body.is-viewer {
    background: var(--bg) !important;
  }
  /* Fixed bar at very top that covers safe-area-inset area in blue.
     This is the ONLY blue thing at the top besides the banner itself. */
  body.is-viewer::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #1F4E79;
    z-index: 100;
    pointer-events: none;
  }
  /* Banner snugly at top — zero gap from iOS status bar */
  body.is-viewer .container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    background: var(--bg);
  }
  body.is-viewer #viewerView {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* The welcome banner itself */
  body.is-viewer .viewer-welcome {
    margin: 0 0 12px 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    padding-bottom: 20px !important;
    border-radius: 0 0 16px 16px !important;
  }
  /* Content below the banner needs side padding */
  body.is-viewer #viewerView > *:not(.viewer-welcome) {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  body.is-viewer #viewerView > *:last-child {
    margin-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  
  /* Non-viewer mobile users (admins in non-mobile-mode): keep small bar with padding */
  body:not(.is-viewer) #userBar {
    padding-top: max(env(safe-area-inset-top, 0px), 50px) !important;
    padding-bottom: 10px !important;
    min-height: 44px;
    flex-wrap: nowrap !important;
    gap: 4px;
  }
  body:not(.is-viewer) #userBar button {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    touch-action: manipulation;
  }
  body:not(.is-viewer) #userBar {
    font-size: 13px !important;
  }
  #userBar .role-badge {
    display: none !important;
  }
}

/* Standalone PWA mode: even more padding for non-viewers */
@media (display-mode: standalone) {
  body:not(.is-viewer) #userBar {
    padding-top: max(env(safe-area-inset-top, 0px), 50px) !important;
  }
}

/* Tiny phones */
@media (max-width: 480px) {
  body:not(.is-viewer) #userBar > span:first-child {
    font-size: 12px !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.is-viewer) #userBar button {
    font-size: 12px !important;
    padding: 7px 9px !important;
    min-width: 36px !important;
  }
}

/* Modals respect notch */
.modal-overlay {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 768px) {
  /* Prevent iOS auto-zoom on focus by ensuring 16px input font */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="date"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* Bigger tap targets on buttons */
  button:not(.viewer-tab):not(.week-btn):not(.tag-btn):not(.tab) {
    min-height: 40px;
  }
  
  /* --- userBar - mobile optimized --- */
  #userBar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px !important;
  }
  #userBar > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px !important;
  }
  #userBar .role-badge {
    display: none;  /* save space on mobile */
  }
  #userBar > div {
    gap: 4px !important;
    flex-wrap: wrap;
  }
  #userBar button {
    padding: 6px 8px !important;
    font-size: 12px !important;
    min-height: 36px;
  }
  /* Hide long-text admin buttons - keep just icons */
  #userBar button[onclick*="openUserManagement"] {
    font-size: 0 !important;  /* hide text */
    padding: 6px 9px !important;
  }
  #userBar button[onclick*="openUserManagement"]::before {
    content: "👥";
    font-size: 14px;
  }
  #userBar button[onclick*="openMonthlyReport"] {
    font-size: 0 !important;
    padding: 6px 9px !important;
  }
  #userBar button[onclick*="openMonthlyReport"]::before {
    content: "📊";
    font-size: 14px;
  }
  #userBar button[onclick*="openPeripheryPlanner"] {
    font-size: 0 !important;
    padding: 6px 9px !important;
  }
  #userBar button[onclick*="openPeripheryPlanner"]::before {
    content: "🗺️";
    font-size: 14px;
  }
  /* Tools menu button - icon only */
  #toolsMenuBtn {
    font-size: 0 !important;
    padding: 6px 9px !important;
  }
  #toolsMenuBtn::before {
    content: "🛠";
    font-size: 14px;
  }
  /* Tools dropdown menu - wider, fixed position */
  #toolsMenu {
    position: fixed !important;
    top: 50px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: 70vh;
    overflow-y: auto;
  }
  #toolsMenu button {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
  
  /* --- container needs top padding for fixed userBar --- */
  body:not(.is-viewer):not(.freelancer-mode):not(.admin-mobile-mode) .container {
    margin-top: 60px !important;
  }
  
  /* --- VIEWER MODE mobile - container handled in earlier rules (no margin-top here) --- */
  body.is-viewer .container {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  
  /* Viewer welcome banner — perfectly polished */
  .viewer-welcome {
    padding: 22px 18px !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(31, 78, 121, 0.18) !important;
  }
  .viewer-welcome h2 {
    font-size: 26px !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }
  .viewer-welcome p {
    font-size: 13px !important;
    opacity: 0.85 !important;
    margin: 0 !important;
  }
  /* Buttons in welcome banner: bigger touch target, clean centering */
  .viewer-welcome-top {
    margin-bottom: 18px !important;
    gap: 8px !important;
  }
  .docs-btn-banner {
    padding: 11px 18px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    border-radius: 24px !important;
  }
  
  /* Viewer tabs - icon + label stacked, larger touch area */
  .viewer-tabs {
    padding: 5px !important;
    gap: 4px !important;
  }
  .viewer-tab {
    padding: 12px 8px !important;
    font-size: 12px !important;
    min-height: 60px;
  }
  .viewer-tab-icon { font-size: 22px !important; }
  
  /* Viewer hearing row - bigger, easier to tap */
  .viewer-hearing-row {
    grid-template-columns: 70px 1fr !important;
    grid-template-rows: auto auto !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .viewer-hearing-actions {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--soft-bg);
  }
  .viewer-hearing-actions button {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    min-width: 46px !important;
    padding: 8px 13px !important;
    font-size: 16px !important;
  }
  .viewer-hearing-time {
    font-size: 20px !important;
    align-self: start;
  }
  .viewer-hearing-court {
    font-size: 14px !important;
    line-height: 1.3;
  }
  .viewer-hearing-judge {
    font-size: 13px !important;
  }
  .viewer-hearing-tik {
    font-size: 12px !important;
  }
  .viewer-day-header {
    padding: 12px 14px !important;
    font-size: 15px !important;
  }
  
  /* --- MODALS go full-screen on mobile --- */
  .modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .modal-overlay > .modal {
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 100vh;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-y: auto;
  }
  /* Modal close button - bigger */
  .modal-overlay > .modal > div:first-child > button,
  .modal-overlay > .modal h2 + button,
  .modal-overlay > .modal h3 + button {
    width: 40px;
    height: 40px;
    font-size: 28px !important;
  }
  .modal-close {
    min-height: 48px !important;
    font-size: 15px !important;
  }
  
  /* Documents modal - stack recipient + description vertically */
  #documentsModal .modal > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Documents list rows */
  #documentsModal div[style*="border:1px solid var(--line)"] {
    flex-wrap: wrap;
  }
  
  /* Lawyer report modal - stack columns */
  #lawyerReportModal .modal > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #lawyerReportModal .modal > div[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Range/lawyer chips wrap better */
  #lawyerReportModal button {
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-height: 40px;
  }
  /* Modal headers smaller font */
  .modal h2, .modal h3 {
    font-size: 18px !important;
  }
  
  /* Tag selector modal - status buttons larger */
  #tagSelectorModal .modal {
    max-width: 100% !important;
  }
  #tagSelectorModal button {
    min-height: 44px !important;
  }
  
  /* Global search - full screen on mobile */
  #globalSearchModal > div {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }
  #globalSearchInput {
    font-size: 16px !important;
  }
  
  /* Disable hover effects on touch devices */
  @media (hover: none) {
    button:hover { transform: none !important; }
    .viewer-tab:hover { background: transparent !important; }
    .viewer-hearing-row:hover { background: transparent !important; }
  }
}

/* ============================================================
   EXTRA SMALL SCREENS (≤ 380px) - phones in portrait
   ============================================================ */
@media (max-width: 380px) {
  .viewer-welcome { padding: 14px 12px !important; }
  .viewer-welcome h2 { font-size: 20px !important; }
  .viewer-tab { font-size: 11px !important; padding: 10px 4px !important; }
  .viewer-tab-icon { font-size: 20px !important; }
  
  /* Lawyer report KPI cards - 1 column on very small */
  #lawyerReportModal .modal > div[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   PRINT STYLESHEET
   Lawyers often print the daily journal. This makes the printout
   clean - removes UI chrome, expands all day cards, hides interactive controls.
   ============================================================ */
@media print {
  /* Hide all UI chrome */
  header, .header, #userBar, .controls, .summary, .charts-row,
  #settingsPanel, .toggle-settings, .upload-zone, #weekControls,
  .tab-bar, .tabs, #tabs, #monthlyReportModal, #notificationsModal,
  #globalSearchModal, #toolsMenu, .modal-overlay,
  .cloud-status, #cloudStatus, #recalculatePrompt,
  button[onclick*="openTagSelector"], button[onclick*="shareHearing"],
  button[onclick*="openPrivateNoteEditor"], 
  button[onclick*="openEditModal"], .tag-btn,
  .day-header .day-stats span:not(:first-child),
  input[type="text"][placeholder*="חיפוש"],
  #adminDLBtn, #notifBtn, #toolsMenuBtn, #themeToggle,
  #viewerBanner {
    display: none !important;
  }
  
  /* Page setup */
  @page {
    size: A4;
    margin: 1.2cm 1cm;
  }
  
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
    font-family: 'Heebo', sans-serif;
  }
  
  /* Expand all day cards (in case some are hidden via tabs) */
  .day-content {
    display: block !important;
    page-break-after: always;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    margin-bottom: 16px;
    background: white !important;
  }
  
  .day-content.is-today {
    border-right: 4px solid #c9472a !important;
  }
  
  .day-header {
    background: #f5f5f5 !important;
    padding: 12px 14px !important;
  }
  
  .day-header h2 {
    font-size: 16pt;
    margin: 0;
  }
  
  /* Table */
  table {
    width: 100%;
    page-break-inside: avoid;
    border-collapse: collapse;
  }
  
  table th {
    background: #e8e8e8 !important;
    color: black !important;
    font-size: 9pt;
    padding: 5px 7px !important;
    border: 1px solid #999;
  }
  
  table td {
    font-size: 10pt;
    padding: 5px 7px !important;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
  
  /* Lawyer badges - print friendly */
  .lawyer-badge {
    border: 1px solid #666 !important;
    color: black !important;
    background: #f8f8f8 !important;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
  }
  
  /* Hide secretary instruction input but show value as text */
  input[type="text"]:not([readonly]) {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 10pt;
  }
  
  /* Add a print header with date */
  .day-content:first-of-type::before {
    content: "יומן דיונים - משרד שקואי";
    display: block;
    text-align: center;
    font-size: 16pt;
    font-weight: 700;
    font-family: 'Frank Ruhl Libre', serif;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1F4E79;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.3;
}

/* Footer note */
.footer-note {
  margin-top: 48px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.footer-note strong { color: var(--ink); }

/* Tools menu - all child buttons must not wrap text */
#toolsMenu button {
  white-space: nowrap !important;
}

/* ============================================================
   MULTI-SELECT MODE
   Active when body.select-mode is set.
   Highlights selectable rows + shows checkmarks on selected.
   ============================================================ */
/* ============================================================
   ASSIGNMENT MODE
   Active when body.assignment-mode is set.
   Defers cloud saves; flushes all on exit.
   ============================================================ */
body.assignment-mode #assignmentModeBtn {
  background: #d4915f !important;
  color: white !important;
  border-color: #b87440 !important;
  font-weight: 600;
}
#assignmentModeBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #d4915f 0%, #b87440 100%);
  color: white;
  padding: 10px 20px;
  text-align: center;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  z-index: 9700;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
#assignmentModeBanner.show { display: flex; }
#assignmentModeBanner .pending-count {
  background: rgba(255,255,255,0.25);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
}
#assignmentModeBanner button.exit-btn {
  background: white;
  color: #b87440;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: transform 0.1s;
}
#assignmentModeBanner button.exit-btn:hover { transform: scale(1.05); }
#assignmentModeBanner button.discard-btn {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 5px 12px;
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  font-size: 12px;
}
body.assignment-mode {
  /* Push everything down to make room for banner */
  padding-top: 44px;
}

body.select-mode #selectModeBtn {
  background: #1F4E79 !important;
  color: white !important;
  border-color: #1F4E79 !important;
}
body.select-mode tr[data-idx] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.12s;
}
body.select-mode tr[data-idx]:hover {
  background: rgba(31, 78, 121, 0.06) !important;
}
body.select-mode tr[data-idx].selected {
  background: rgba(31, 78, 121, 0.14) !important;
  box-shadow: inset 4px 0 0 #1F4E79;
}
body.select-mode tr[data-idx].selected td {
  background: transparent !important;
}
body.select-mode tr[data-idx].selected td:first-child::before {
  content: '✓';
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #1F4E79;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  margin-left: 6px;
  vertical-align: middle;
}
/* When in select mode, disable badge clicks/edit actions */
body.select-mode .lawyer-badge,
body.select-mode tr[data-idx] button,
body.select-mode tr[data-idx] input {
  pointer-events: none;
  opacity: 0.65;
}

/* Floating bulk-action bar */
#bulkActionBar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: linear-gradient(135deg, #1F4E79 0%, #163d61 100%);
  color: white;
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.22);
  z-index: 9500;
  direction: rtl;
  font-family: 'Heebo', sans-serif;
  flex-wrap: wrap;
  max-width: calc(100vw - 24px);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#bulkActionBar.show {
  transform: translateX(-50%) translateY(0);
}
#bulkActionBar .bulk-count {
  font-size: 15px;
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  white-space: nowrap;
}
#bulkActionBar .bulk-separator {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.25);
}
#bulkActionBar select {
  background: white;
  color: #1a1816;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  min-width: 140px;
}
#bulkActionBar .bulk-or {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  padding: 0 4px;
  white-space: nowrap;
}
#bulkActionBar input.bulk-custom-input {
  background: white;
  color: #1a1816;
  border: 1px dashed #b89a8c;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  direction: rtl;
  min-width: 0;
  width: 180px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#bulkActionBar input.bulk-custom-input:focus {
  border: 1px solid #7ba968;
  box-shadow: 0 0 0 2px rgba(123,169,104,0.3);
}
#bulkActionBar input.bulk-custom-input::placeholder {
  color: #999;
  font-size: 12px;
}
#bulkActionBar button.apply-btn {
  background: #7ba968;
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
#bulkActionBar button.apply-btn:hover { background: #5e8a4d; }
#bulkActionBar button.apply-btn:active { transform: scale(0.97); }
#bulkActionBar button.apply-btn:disabled {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
  cursor: not-allowed;
}
#bulkActionBar button.cancel-btn {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
#bulkActionBar button.cancel-btn:hover { background: rgba(255,255,255,0.1); }
#bulkActionBar button.select-all-btn {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 7px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
#bulkActionBar button.select-all-btn:hover { background: rgba(255,255,255,0.25); }

/* Mobile: make bar full-width */
@media (max-width: 600px) {
  #bulkActionBar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: calc(100vw - 16px);
    bottom: 10px;
  }
  #bulkActionBar select { width: 100%; }
  #bulkActionBar .bulk-separator { display: none; }
}

/* ============================================================
   ADMIN MOBILE - comprehensive improvements
   Targets admin/editor/recorder roles (not viewer-only role).
   Specifically: action-bar layout, summary cards, table scroll,
   day tabs, week selector, headers.
   ============================================================ */
@media (max-width: 768px) {
  /* Tighter container padding for more usable width */
  body:not(.is-viewer):not(.freelancer-mode) .container {
    padding: 10px !important;
  }
  
  /* === ACTION BAR === */
  body:not(.is-viewer):not(.freelancer-mode) .action-bar {
    padding: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .action-bar-info {
    text-align: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    font-size: 12px;
  }
  body:not(.is-viewer):not(.freelancer-mode) .action-bar > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .action-bar .btn {
    padding: 10px 8px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    min-height: 42px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body:not(.is-viewer):not(.freelancer-mode) #totalCount,
  body:not(.is-viewer):not(.freelancer-mode) #completionRate {
    font-size: 16px;
  }
  
  /* === SUMMARY CARDS === */
  body:not(.is-viewer):not(.freelancer-mode) .summary {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .summary-card {
    padding: 12px 10px !important;
    border-radius: 10px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .summary-card h3 {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .summary-card .count {
    font-size: 22px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .summary-card .label {
    font-size: 10px !important;
  }
  
  /* === WEEK SELECTOR === */
  body:not(.is-viewer):not(.freelancer-mode) #weekControls {
    margin-bottom: 14px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .week-selector {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 6px;
  }
  body:not(.is-viewer):not(.freelancer-mode) .week-selector::-webkit-scrollbar {
    display: none;
  }
  body:not(.is-viewer):not(.freelancer-mode) .week-btn {
    flex-shrink: 0;
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 36px;
    border-radius: 8px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) #weekControls > div[style*="flex"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) #weekControls button {
    width: 100% !important;
    min-height: 44px;
  }
  
  /* === DAY TABS === */
  body:not(.is-viewer):not(.freelancer-mode) .tabs {
    margin-bottom: 14px !important;
    gap: 2px;
    padding: 0 2px;
  }
  body:not(.is-viewer):not(.freelancer-mode) .tab {
    padding: 10px 12px !important;
    font-size: 12px !important;
    min-width: 78px;
    flex-shrink: 0;
  }
  
  /* === DAY HEADER === */
  body:not(.is-viewer):not(.freelancer-mode) .day-header {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-header h2 {
    font-size: 18px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-stats {
    font-size: 11px !important;
    gap: 6px !important;
  }
  
  /* === DAY NAVIGATION ARROWS === */
  body:not(.is-viewer):not(.freelancer-mode) #adminDayNav {
    padding: 10px 12px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) #adminDayNav button {
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 18px !important;
  }
  
  /* === HEARINGS TABLE === */
  /* Wrap table in horizontal scroll, make columns narrower */
  body:not(.is-viewer):not(.freelancer-mode) .day-content {
    border-radius: 10px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content table {
    font-size: 11px !important;
    table-layout: auto;
    width: 100%;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content thead {
    display: none; /* Hide table header on mobile - use card-like layout */
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 4px 8px;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody tr td {
    padding: 2px 0 !important;
    border: none !important;
    font-size: 12px;
  }
  /* Hide redundant cells, show key info inline */
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody td:nth-child(1) {
    /* Time - top left */
    grid-column: 1;
    grid-row: 1;
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
    white-space: nowrap;
    padding-left: 8px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody td:nth-child(2) {
    /* Judge - top middle */
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
    color: var(--ink);
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody td:nth-child(3) {
    /* Tik - top right */
    grid-column: 3;
    grid-row: 1;
    font-family: monospace;
    font-size: 11px;
    color: var(--muted);
    text-align: left;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody td:nth-child(4) {
    /* Court - row 2, spans */
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 11px;
    color: var(--muted);
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody td:nth-child(5) {
    /* Lawyer badge - row 3 */
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: right;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody td:nth-child(6) {
    /* Instructions input + buttons - row 4 */
    grid-column: 1 / -1;
    grid-row: 4;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody td:nth-child(6) input {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .day-content tbody td:nth-child(6) button {
    padding: 4px 8px !important;
    font-size: 10px !important;
    min-height: 40px;
  }
  /* Lawyer badge - keep it tappable */
  body:not(.is-viewer):not(.freelancer-mode) .lawyer-badge {
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 14px;
    display: inline-block;
    min-height: 40px;
    line-height: 18px;
  }
  /* Note (secretary instructions) */
  body:not(.is-viewer):not(.freelancer-mode) .note {
    font-size: 11px !important;
    margin-top: 4px;
  }
  
  /* === TOP BAR (search, AI, notif, tools, logout) === */
  body:not(.is-viewer):not(.freelancer-mode) #userBar > div {
    gap: 4px !important;
  }
  
  /* === BULK ACTION BAR adjustments for mobile === */
  body:not(.is-viewer):not(.freelancer-mode) #bulkActionBar {
    bottom: 10px;
  }
}

/* Tiny phones - even more aggressive */
@media (max-width: 380px) {
  body:not(.is-viewer):not(.freelancer-mode) .container {
    padding: 6px !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .action-bar > div:last-child {
    grid-template-columns: 1fr !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .summary {
    grid-template-columns: 1fr !important;
  }
  body:not(.is-viewer):not(.freelancer-mode) .tab {
    padding: 8px 10px !important;
    font-size: 11px !important;
    min-width: 64px;
  }
}

/* ============================================================
   GENERAL POLISH - smooth focus states, better tap targets,
   improved hover feedback, accessibility (no specificity changes,
   only additive enhancements).
   ============================================================ */

/* Better focus visible (keyboard navigation) - subtle, not ugly */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--focus-ring);   /* v121: tokenized so it stays visible in dark mode */
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* Disable user-select on UI controls (better UX on long-press) */
button, .tab, .week-btn, .lawyer-badge, .summary-card {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Minimum tap target size on mobile (44x44 per Apple HIG) */
/* v121: raised 36 → 44 to actually meet the HIG target the comment promises.
   The small chip controls (lawyer badge, tag, delete, time) get a 44px min via
   line-height/padding rather than min-height so the table layout stays compact. */
@media (pointer: coarse) {
  button:not(.adm-week-day):not(.lawyer-badge):not(.tag-btn):not(.row-delete-btn) {
    min-height: 44px;
  }
  .lawyer-badge, .tag-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* Better disabled state across all buttons */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Smooth scrollbars (Chrome/Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Empty state styling */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* Improved transitions across the app */
button, .lawyer-badge, .week-btn, .tab, .summary-card, .adm-card {
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease,
              box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Subtle hover lift on interactive cards */
@media (hover: hover) {
  .summary-card:hover,
  .adm-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
  }
}

/* Better print styles - hide overlay during print */
@media print {
  #pwaUpdateOverlay,
  #bulkActionBar,
  #whatsappReminderBanner,
  .adm-fab {
    display: none !important;
  }
}

/* ============================================================
   CUSTOM MODALS - responsive on mobile
   (globalSearchModal, monthlyCalendarModal, whatsappSenderModal,
    notificationsModal, aiAssistantModal)
   These use inline styles instead of .modal class, so we need
   to target them specifically for mobile responsiveness.
   ============================================================ */
@media (max-width: 768px) {
  /* Search modal - full width, less top padding */
  #globalSearchModal {
    padding-top: 5vh !important;
  }
  #globalSearchModal > div {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    max-height: 85vh !important;
    border-radius: 14px !important;
  }
  #globalSearchInput {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  
  /* Monthly calendar modal - full width */
  #monthlyCalendarModal {
    padding: 8px !important;
  }
  #monthlyCalendarModal > div {
    width: 100% !important;
    max-width: none !important;
    max-height: 95vh !important;
  }
  
  /* WhatsApp modal */
  #whatsappSenderModal {
    padding: 8px !important;
  }
  #whatsappSenderModal > div {
    width: 100% !important;
    max-width: none !important;
    max-height: 95vh !important;
  }
  /* Stack the date inputs vertically on mobile */
  #whatsappSenderModal div[style*="display:flex;gap:12px;align-items:flex-end"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Date input full width */
  #wsFromInput, #wsToInput {
    width: 100% !important;
    font-size: 16px !important; /* Prevents iOS zoom */
  }
  /* Preset buttons - smaller text */
  #whatsappSenderModal button[onclick*="setWhatsAppRangePreset"] {
    flex: 1;
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
  
  /* Bulk action bar - mobile bottom-fixed */
  #bulkActionBar {
    flex-direction: column !important;
    align-items: stretch !important;
    width: calc(100vw - 12px) !important;
    bottom: 8px !important;
    padding: 10px 14px !important;
    gap: 6px !important;
  }
  #bulkActionBar .bulk-separator { display: none !important; }
  #bulkActionBar select {
    width: 100% !important;
    font-size: 14px !important;
  }
  #bulkActionBar button {
    width: 100%;
  }
  
  /* Notifications modal - if exists */
  #notificationsModal > .modal {
    max-height: 90vh !important;
  }
}

      @keyframes loginFadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      #loginForm input:focus {
        outline: none;
        border-color: #1F4E79;
        box-shadow: 0 0 0 3px rgba(31,78,121,0.1);
      }
      #loginForm input {
        transition: all 0.15s ease;
      }
      #loginForm button:hover:not(:disabled) {
        background: #163d61 !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(31,78,121,0.3);
      }
      #loginForm button:disabled {
        background: #ccc !important;
        cursor: not-allowed !important;
      }
      #loginForm button {
        transition: all 0.15s ease;
      }
      #loginScreen a:hover {
        text-decoration: underline !important;
      }
    

body.freelancer-mode #mainApp,
body.freelancer-mode #userBar,
body.freelancer-mode #settingsPanel { display: none !important; }
body.freelancer-mode #freelancerView { display: block !important; }

.fl-view { display: none; min-height:100vh; padding:16px; max-width:600px; margin:0 auto; padding-bottom: env(safe-area-inset-bottom, 16px); background:#f4f1ea; }
.fl-header { background:#1f4e79; color:white; padding:16px; border-radius:12px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }
.fl-greeting { font-size:16px; }
.fl-date { font-size:13px; opacity:0.85; margin-top:2px; }
.fl-logout-btn { background:rgba(255,255,255,0.2); color:white; border:none; padding:6px 12px; border-radius:6px; font-size:13px; cursor:pointer; font-family:inherit; }
.fl-subgreeting { font-size:13px; opacity:0.95; margin-top:2px; }
.fl-header-actions { display:flex; gap:6px; align-items:flex-start; }
.fl-refresh-btn { background:rgba(255,255,255,0.2); color:white; border:none; padding:6px 10px; border-radius:6px; font-size:14px; cursor:pointer; font-family:inherit; }
.fl-refresh-btn.spinning { animation:flSpin 1s linear infinite; }
@keyframes flSpin { 100% { transform: rotate(360deg); } }
#flAudioPlayer { display:none; }
.fl-rec-actions { display:flex; gap:4px; margin-right:auto; }
.fl-rec-btn-mini { background: var(--paper); border:1px solid var(--line); border-radius:6px; padding:4px 8px; cursor:pointer; font-size:13px; font-family:inherit; }
.fl-rec-btn-mini:hover { background: var(--soft-bg); }
.fl-rec-btn-mini.playing { background:#1f4e79; color:white; border-color:#1f4e79; }
.fl-rec-btn-mini.delete:hover { background:#fee; border-color:#c9472a; color:#c9472a; }

.fl-hearings-title { font-size:14px; color:#666; margin:8px 4px 12px 4px; }
.fl-no-hearings { background: var(--paper); border:1px solid var(--line); padding:32px 16px; text-align:center; border-radius:12px; color:#999; }

.fl-card { background: var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.fl-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.fl-card-time { font-size:22px; font-weight:700; color:#1f4e79; }
.fl-card-tik { font-size:13px; color:#666; font-family:monospace; }
.fl-card-court { font-size:14px; color:#333; margin-bottom:4px; }
.fl-card-judge { font-size:13px; color:#666; }

.fl-recs { margin-top:12px; padding-top:12px; border-top:1px solid #eee; }
.fl-rec-item { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; color:#555; }
.fl-rec-dot { width:8px; height:8px; border-radius:50%; background:#7ba968; flex-shrink:0; }
.fl-rec-item.pending .fl-rec-dot { background:#d4915f; }
.fl-rec-item.error .fl-rec-dot { background:#c9472a; }

.fl-record-btn { width:100%; margin-top:12px; background:#c9472a; color:white; border:none; padding:16px; border-radius:10px; font-size:16px; font-weight:600; cursor:pointer; font-family:inherit; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.fl-record-btn:active { transform:scale(0.98); }
.fl-record-btn.is-pressing { background:#d4915f; }

.fl-rec-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; flex-direction:column; justify-content:center; align-items:center; z-index:9999; color:white; padding:24px; }
.fl-rec-overlay.show { display:flex; }
.fl-rec-overlay h2 { font-size:24px; margin:0 0 24px 0; }
.fl-rec-timer { font-size:64px; font-weight:300; font-family:monospace; margin-bottom:16px; }
.fl-rec-info { font-size:14px; opacity:0.8; margin-bottom:32px; text-align:center; line-height:1.6; }
.fl-rec-stop-btn { background:white; color:#a8201d; border:none; padding:16px 32px; border-radius:50px; font-size:18px; font-weight:700; cursor:pointer; font-family:inherit; }
.fl-rec-pulse { width:80px; height:80px; border-radius:50%; background:#c9472a; margin-bottom:32px; animation:flBigPulse 1.5s infinite; }
@keyframes flBigPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

.fl-status { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#333; color:white; padding:12px 20px; border-radius:24px; font-size:14px; z-index:10000; display:none; max-width:90%; }
.fl-status.show { display:block; }
.fl-status.success { background:#7ba968; }
.fl-status.error { background:#c9472a; }

#adminDLBtn { position:fixed; bottom:20px; left:20px; z-index:998; padding:10px 18px; background:#1f4e79; color:white; border:none; border-radius:24px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.15); font-family:inherit; font-size:14px; font-weight:600; display:none; }
#adminDLBtn:hover { background:#163a5c; }
body.freelancer-mode #adminDLBtn { display:none !important; }
#adminDLDialog { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background: var(--paper); border:1px solid var(--line); padding:24px; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.2); z-index:9999; min-width:320px; max-width:90vw; }
#adminDLDialog h3 { margin:0 0 16px 0; font-size:18px; }
#adminDLDialog label { font-size:13px; color:#666; display:block; margin-bottom:6px; }
#adminDLDialog input[type=date] { width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; font-family:inherit; font-size:14px; margin-bottom:16px; }
#adminDLStatus { font-size:13px; color:#555; margin-bottom:16px; min-height:20px; }
.adminDL-progress { background:#eee; border-radius:4px; overflow:hidden; height:6px; margin-top:6px; }
.adminDL-progress-fill { background:#7ba968; height:100%; transition:width 0.2s; width:0%; }
#adminDLDialog .dl-buttons { display:flex; gap:8px; }
#adminDLDialog .dl-btn-go { flex:1; padding:11px; background:#7ba968; color:white; border:none; border-radius:6px; cursor:pointer; font-weight:600; font-family:inherit; }
#adminDLDialog .dl-btn-go:disabled { opacity:0.5; cursor:not-allowed; }
#adminDLDialog .dl-btn-close { padding:11px 16px; background:#ccc; color:#333; border:none; border-radius:6px; cursor:pointer; font-family:inherit; }
#adminDLOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:9998; }

body.admin-mobile-mode #mainApp,
body.admin-mobile-mode #userBar,
body.admin-mobile-mode #settingsPanel,
body.admin-mobile-mode #adminDLBtn { display:none !important; }
body.admin-mobile-mode #adminMobileView { display:block !important; }
body.admin-mobile-mode { background: linear-gradient(180deg, #f5f7fa 0%, #fafaf7 200px) !important; }

.adm-view {
  display: none;
  min-height: 100vh;
  padding: 12px 14px;
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 90px;
  padding-top: max(env(safe-area-inset-top, 0px), 12px);
}

/* === HEADER === */
.adm-header {
  background: linear-gradient(135deg, #1F4E79 0%, #163d61 100%);
  color: white;
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(31, 78, 121, 0.18);
}
.adm-header .greet {
  font-size: 17px;
  font-weight: 600;
}
.adm-header .role {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 3px;
  letter-spacing: 0.3px;
}
.adm-header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.adm-header button {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  min-height: 38px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.adm-header button:active {
  background: rgba(255,255,255,0.25);
  transform: scale(0.96);
}

/* === DATE ROW === */
.adm-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid #e6e1da;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* === QUICK ACTIONS ROW === */
.adm-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.adm-qa-btn {
  background: white;
  border: 1px solid #e6e1da;
  border-radius: 12px;
  padding: 12px 4px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 64px;
}
.adm-qa-btn:active {
  background: #f5f7fa;
  transform: scale(0.96);
  border-color: #1F4E79;
}
.adm-qa-icon {
  font-size: 22px;
  line-height: 1;
}
.adm-qa-label {
  font-size: 11px;
  color: #1a1816;
  font-weight: 600;
  line-height: 1;
}
.adm-date-row input[type="date"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e6e1da;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  background: #fafaf7;
  color: #1a1816;
  font-weight: 500;
  min-height: 42px;
}
.adm-date-row button {
  background: #f4f1ea;
  border: 1px solid #e6e1da;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1F4E79;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.adm-date-row button:active {
  background: #1F4E79;
  color: white;
  transform: scale(0.94);
}
.adm-date-row .today-btn {
  padding: 0 14px;
  font-size: 13px;
  width: auto;
  font-weight: 600;
}

/* === WEEK STRIP === */
.adm-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: white;
  border: 1px solid #e6e1da;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.adm-week-day {
  background: #fafaf7;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.adm-week-day:active {
  background: #f0eddf;
  transform: scale(0.96);
}
.adm-week-day.active {
  background: #1F4E79;
  color: white;
  border-color: #1F4E79;
  box-shadow: 0 2px 8px rgba(31,78,121,0.3);
}
.adm-week-day.today {
  border-color: #c9472a;
}
.adm-week-day.today.active {
  background: #c9472a;
  border-color: #c9472a;
  box-shadow: 0 2px 8px rgba(201,71,42,0.35);
}
.adm-week-day.has-hearings::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7ba968;
}
.adm-week-day.active.has-hearings::after {
  background: rgba(255,255,255,0.85);
}
.adm-week-day-name {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  text-transform: none;
}
.adm-week-day-num {
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
}

/* === DAY STATS === */
.adm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.adm-stat-card {
  background: white;
  border: 1px solid #e6e1da;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.adm-stat-num {
  font-size: 24px;
  font-weight: 700;
  color: #1F4E79;
  font-family: 'Frank Ruhl Libre', serif;
}
.adm-stat-label {
  font-size: 11px;
  color: #8a8378;
  margin-top: 2px;
  font-weight: 500;
}

/* === COUNT (legacy compatibility) === */
.adm-count {
  font-size: 13px;
  color: #666;
  margin: 4px 4px 10px 4px;
  font-weight: 500;
}

.adm-empty {
  background: white;
  border: 1px solid #e6e1da;
  padding: 40px 20px;
  text-align: center;
  border-radius: 12px;
  color: #999;
  font-size: 14px;
}

/* === HEARING CARDS === */
.adm-card {
  background: white;
  border: 1px solid #e6e1da;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.adm-card:active {
  transform: scale(0.99);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.adm-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.adm-card-time {
  font-size: 22px;
  font-weight: 700;
  color: #c9472a;
  font-family: 'Frank Ruhl Libre', serif;
  letter-spacing: 0.5px;
  line-height: 1;
}
.adm-card-court {
  font-size: 14px;
  color: #1a1816;
  margin-top: 8px;
  font-weight: 500;
  line-height: 1.3;
}
.adm-card-judge {
  font-size: 12.5px;
  color: #8a8378;
  margin-top: 3px;
}
.adm-card-tik {
  font-size: 12px;
  color: #8a8378;
  font-family: 'Menlo', monospace;
  background: #fafaf7;
  padding: 3px 8px;
  border-radius: 5px;
  display: inline-block;
}
.adm-card-note {
  font-size: 12.5px;
  color: #7a5500;
  background: linear-gradient(to right, #fef9d6 0%, #fefce8 100%);
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 10px;
  border-right: 3px solid #f5c45c;
  line-height: 1.4;
}

/* === LAWYER CHIPS - bigger, more visible === */
.adm-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  background: #eee;
  color: #333;
  letter-spacing: 0.2px;
}
.adm-chip-almog   { background: #dff0d8; color: #3e6b2e; }
.adm-chip-hadar   { background: #d8e4f0; color: #34556e; }
.adm-chip-amir    { background: #f7d9c4; color: #7a4818; }
.adm-chip-roi     { background: #f0e2b9; color: #7a5c14; }
.adm-chip-sivan, .adm-chip-tomer, .adm-chip-eli, .adm-chip-frilans {
  background: #e8d6e9; color: #5a3a5d;
}
.adm-chip-shlomo  { background: #fee; color: #a02020; }
.adm-chip-invalid { background: #eee; color: #888; }

/* === CARD ACTIONS === */
.adm-card-bottom {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.adm-card-bottom button {
  background: #1F4E79;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  flex: 1;
  min-width: 120px;
  min-height: 42px;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.adm-card-bottom button:active {
  background: #163d61;
  transform: scale(0.97);
}
.adm-card-bottom button.secondary {
  background: #f4f1ea;
  color: #1a1816;
  border: 1px solid #e6e1da;
}
.adm-card-bottom button.secondary:active {
  background: #e6e1da;
}
.adm-card-bottom button.recs-toggle {
  background: white;
  color: #1F4E79;
  border: 1px solid #e6e1da;
}

/* === RECORDINGS === */
.adm-recs {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0ebe2;
  display: none;
}
.adm-recs.open { display: block; }
.adm-rec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: #555;
}
.adm-rec-info { flex: 1; }
.adm-rec-btn {
  background: white;
  border: 1px solid #e6e1da;
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  min-width: 38px;
  min-height: 38px;
  -webkit-tap-highlight-color: transparent;
}
.adm-rec-btn:active { background: #f4f1ea; }
.adm-rec-btn.playing {
  background: #1F4E79;
  color: white;
  border-color: #1F4E79;
}

/* === FAB === */
.adm-fab {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  left: 20px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1F4E79 0%, #163d61 100%);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(31,78,121,0.35);
  z-index: 50;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s;
}
.adm-fab:active { transform: scale(0.92); }

/* === EDIT OVERLAY === */
.adm-edit-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 46, 77, 0.6);
  z-index: 200;
  justify-content: center;
  align-items: flex-end;
  backdrop-filter: blur(2px);
}
.adm-edit-overlay.show { display: flex; }
.adm-edit-sheet {
  background: white;
  width: 100%;
  max-width: 640px;
  border-radius: 18px 18px 0 0;
  padding: 22px 20px max(env(safe-area-inset-bottom, 0px), 20px);
  max-height: 80vh;
  overflow-y: auto;
  animation: admSlideUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes admSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.adm-edit-sheet h3 {
  margin: 0 0 12px 0;
  font-size: 19px;
  font-weight: 700;
  font-family: 'Frank Ruhl Libre', serif;
}
.adm-edit-sheet .info {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: #fafaf7;
  border-radius: 6px;
}
.adm-edit-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.adm-edit-options button {
  padding: 14px;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  min-height: 50px;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.adm-edit-options button.current {
  border-color: #1a1816;
  box-shadow: 0 0 0 3px rgba(26,24,22,0.1);
}
.adm-edit-options button:active { transform: scale(0.96); }
.adm-edit-close {
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  background: #f4f1ea;
  border: 1px solid #e6e1da;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
}

/* === Admin day navigation buttons === */
.adm-nav-btn {
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.adm-nav-btn:hover {
  background: #fafaf7 !important;
  border-color: #1F4E79 !important;
}
.adm-nav-btn:active {
  transform: scale(0.94);
}

/* ============================================================
   PRINT WEEKLY STYLES
   ============================================================ */
#printWeeklyContainer {
  display: none;
}

/* ============================================================
   PRINT PREVIEW - FULL SCREEN OVERLAY
   Shown WHEN printing-weekly is on body (visible on screen).
   When user clicks "save PDF", print-active is added to hide the control bar.
   ============================================================ */

/* Default: hidden */
#printWeeklyContainer {
  display: none;
}

/* When in print mode: show as fullscreen overlay (hides app underneath) */
body.printing-weekly #printWeeklyContainer {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  color: black;
  font-family: 'Heebo', 'Arial', sans-serif;
  direction: rtl;
  z-index: 100000;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

/* Hide the rest of the app while preview is open */
body.printing-weekly > *:not(#printWeeklyContainer) {
  display: none !important;
}

/* Control bar at top of preview */
.print-controls {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: #1F4E79;
  color: white;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 10;
  direction: rtl;
}

.print-ctrl-title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  text-align: center;
}

.print-ctrl-btn {
  background: rgba(255,255,255,0.18);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 9px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 38px;
}

.print-ctrl-btn:active { transform: scale(0.97); }

.print-ctrl-save {
  background: #7ba968;
  border-color: #5d8f4a;
}

.print-ctrl-save:hover { background: #5d8f4a; }

/* Hide control bar when actually printing */
body.print-active .print-controls {
  display: none !important;
}

/* Print page content (on screen and on paper) */
body.printing-weekly .print-page {
  background: white;
  color: black;
  direction: rtl;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

body.printing-weekly .print-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 3px double #1F4E79;
}

body.printing-weekly .print-logo {
  font-size: 14pt;
  color: #1F4E79;
  font-weight: 700;
  margin-bottom: 6px;
}

body.printing-weekly .print-title {
  font-size: 22pt;
  font-weight: 700;
  color: #1F4E79;
  font-family: 'Frank Ruhl Libre', 'Times New Roman', serif;
  margin: 4px 0;
}

body.printing-weekly .print-subtitle {
  font-size: 12pt;
  color: #333;
  margin: 3px 0;
}

body.printing-weekly .print-subtitle strong {
  color: #1F4E79;
}

body.printing-weekly .print-generated {
  font-size: 10pt;
  color: #888;
  margin-top: 8px;
}

body.printing-weekly .print-day {
  margin-bottom: 18px;
  page-break-inside: avoid;
  border: 1px solid #d4d0c4;
  border-radius: 8px;
  overflow: hidden;
}

body.printing-weekly .print-day-header {
  background: linear-gradient(135deg, #1F4E79, #0D2E4D);
  color: white;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 6px;
}

body.printing-weekly .print-day-name {
  font-size: 14pt;
}

body.printing-weekly .print-day-date {
  font-size: 12pt;
  opacity: 0.95;
}

body.printing-weekly .print-day-count {
  font-size: 11pt;
  background: rgba(255,255,255,0.2);
  padding: 3px 12px;
  border-radius: 12px;
}

body.printing-weekly .print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11pt;
}

body.printing-weekly .print-table thead {
  background: #f4f1ea;
}

body.printing-weekly .print-table th {
  padding: 8px 10px;
  text-align: right;
  font-weight: 700;
  border: 1px solid #ccc;
  color: #1F4E79;
  font-size: 10.5pt;
}

body.printing-weekly .print-table td {
  padding: 8px 10px;
  border: 1px solid #ddd;
  text-align: right;
  vertical-align: top;
}

body.printing-weekly .print-table tr:nth-child(even) td {
  background: #fafafa;
}

body.printing-weekly .print-time {
  font-weight: 700;
  color: #1F4E79;
  font-size: 12pt;
  white-space: nowrap;
}

body.printing-weekly .print-tik {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  font-size: 11pt;
  white-space: nowrap;
}

body.printing-weekly .print-note {
  font-size: 10pt;
  color: #555;
}

body.printing-weekly .print-footer {
  margin-top: 24px;
  padding: 12px 0;
  border-top: 1px solid #ddd;
  font-size: 10pt;
  color: #888;
  text-align: center;
}

/* ============================================================
   PRINT MEDIA - actual paper output
   ============================================================ */
@media print {
  body.printing-weekly {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hide the control bar when printing */
  .print-controls {
    display: none !important;
  }
  
  /* No fixed positioning when printing */
  body.printing-weekly #printWeeklyContainer {
    position: static !important;
    overflow: visible !important;
  }
  
  @page {
    size: A4 portrait;
    margin: 1.5cm 1cm;
  }
  
  body.printing-weekly .print-page {
    padding: 0;
    max-width: none;
  }
  
  body.printing-weekly .print-day {
    border: 1px solid #999;
    page-break-inside: auto;
    overflow: visible;
    page-break-before: always;
  }

  /* First day stays with the header; every later day starts on a fresh page,
     so a day never begins on the previous day's overflow/continuation page. */
  body.printing-weekly .print-header + .print-day { page-break-before: avoid; }

  /* Let tall days/tables flow across pages instead of forcing blank pages */
  body.printing-weekly .print-table { page-break-inside: auto; }
  body.printing-weekly .print-table thead { display: table-header-group; }
  body.printing-weekly .print-table tr { page-break-inside: avoid; }
  body.printing-weekly .print-day-header { page-break-after: avoid; }

  body.printing-weekly .print-table th,
  body.printing-weekly .print-table td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  body.printing-weekly .print-day-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================================
   GENERAL POLISH — smoother animations, better focus, etc.
   ============================================================ */

/* Smoother transitions everywhere */
button, .btn, .modal, .week-btn, .tab, .viewer-tab,
.viewer-hearing-row, .modal-overlay, input, select, textarea {
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Better focus rings (accessible) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1F4E79;
  outline-offset: 2px;
}

/* Inputs: cleaner default state */
input[type="text"]:not(.no-style),
input[type="email"]:not(.no-style),
input[type="password"]:not(.no-style),
input[type="tel"]:not(.no-style),
input[type="search"]:not(.no-style),
input[type="number"]:not(.no-style),
input[type="date"]:not(.no-style),
textarea:not(.no-style),
select:not(.no-style) {
  border-radius: 6px;
}

/* Buttons: subtle scale on press */
button:not(:disabled):active {
  transform: scale(0.97);
}

/* Smoother modal entry */
.modal-overlay {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-overlay.show .modal {
  animation: modalSlideUp 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Better text selection color */
::selection {
  background: rgba(31, 78, 121, 0.2);
  color: #0D2E4D;
}

/* Cleaner scrollbars (WebKit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f4f1ea;
}
::-webkit-scrollbar-thumb {
  background: #c8c0b0;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a89e8a;
}

/* PWA standalone mode improvements */
html.is-pwa #userBar {
  /* Make user bar feel more app-like */
}

/* Empty state cleanups */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted, #888);
}
.empty-state-icon {
  font-size: 48px;
  opacity: 0.4;
  margin-bottom: 12px;
}

/* Manual assignment indicator (subtle) */
.manual-assignment-badge {
  display: inline-block;
  background: linear-gradient(135deg, #d4915f, #b87440);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 6px;
}

/* Better disabled state */
button:disabled, input:disabled, select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Loading shimmer effect */
.loading-shimmer {
  background: linear-gradient(90deg, #f4f1ea 25%, #e9e5d6 50%, #f4f1ea 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Subtle hover effect on hearing rows */
@media (hover: hover) {
  .viewer-hearing-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  }
}

#cloudLoadingOverlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(31,78,121,0.92) 0%, rgba(22,61,97,0.95) 50%, rgba(13,46,77,0.92) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2147483646;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  direction: rtl;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Heebo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
#cloudLoadingOverlay.show {
  display: flex;
  opacity: 1;
}
#cloudLoadingOverlay .cloud-content {
  text-align: center;
  max-width: 320px;
  padding: 32px;
}
#cloudLoadingOverlay .cloud-logo {
  font-size: 56px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  animation: cloudFloat 2s ease-in-out infinite;
}
@keyframes cloudFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
#cloudLoadingOverlay .cloud-spinner {
  width: 48px;
  height: 48px;
  margin: 16px auto 24px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: rgba(255,255,255,0.95);
  border-radius: 50%;
  animation: cloudSpin 0.9s linear infinite;
}
@keyframes cloudSpin {
  to { transform: rotate(360deg); }
}
#cloudLoadingOverlay .cloud-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
#cloudLoadingOverlay .cloud-subtitle {
  font-size: 14px;
  opacity: 0.75;
  min-height: 20px;
}
#cloudLoadingOverlay .cloud-progress {
  margin-top: 20px;
  height: 3px;
  width: 200px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
#cloudLoadingOverlay .cloud-progress-fill {
  height: 100%;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease;
  animation: cloudProgressIndeterminate 1.5s ease-in-out infinite;
}
@keyframes cloudProgressIndeterminate {
  0% { width: 0%; margin-left: 0; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0%; margin-left: 100%; }
}

#recordingsCenterModal .rc-modal {
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  max-width: 920px;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25), 0 5px 15px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  direction: rtl;
  overflow: hidden;
  animation: modalContentIn 0.25s ease-out;
}
#recordingsCenterModal .rc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
#recordingsCenterModal .rc-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 21px; font-weight: 700; margin: 0; flex: 1;
}
#recordingsCenterModal .rc-close {
  background: none; border: none; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 6px;
}
#recordingsCenterModal .rc-close:hover { background: var(--line); color: var(--ink); }
#recordingsCenterModal .rc-toolbar {
  padding: 12px 22px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
#recordingsCenterModal .rc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#recordingsCenterModal .rc-chip {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: 12px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
#recordingsCenterModal .rc-chip:hover { border-color: var(--muted); }
#recordingsCenterModal .rc-chip.active { background: #1F4E79; color: #fff; border-color: #1F4E79; }
#recordingsCenterModal .rc-chip .rc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 5px; vertical-align: middle; }
#recordingsCenterModal .rc-search {
  flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 6px; font-family: inherit; font-size: 13px; background: var(--paper); color: var(--ink);
}
#recordingsCenterModal .rc-transcribe-all {
  background: #7a3c8f; color: #fff; border: none; border-radius: 6px;
  padding: 8px 14px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#recordingsCenterModal .rc-transcribe-all:disabled { opacity: 0.5; cursor: not-allowed; }
#recordingsCenterModal .rc-body { overflow-y: auto; padding: 8px 22px 22px; flex: 1; }
#recordingsCenterModal .rc-group { margin-top: 16px; }
#recordingsCenterModal .rc-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 8px; color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
#recordingsCenterModal .rc-group-head .rc-group-meta { font-weight: 400; font-size: 12px; opacity: 0.92; }
#recordingsCenterModal .rc-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 12px; border: 1px solid var(--line); border-top: none; background: var(--paper);
}
#recordingsCenterModal .rc-group .rc-row:first-of-type { border-top: 1px solid var(--line); }
#recordingsCenterModal .rc-row:nth-child(even) { background: var(--bg, rgba(0,0,0,0.015)); }
#recordingsCenterModal .rc-row-main { flex: 1; min-width: 200px; }
#recordingsCenterModal .rc-row-tik { font-weight: 600; font-size: 14px; }
#recordingsCenterModal .rc-row-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
#recordingsCenterModal .rc-row-rec { font-size: 11px; color: var(--muted); margin-top: 2px; }
#recordingsCenterModal .rc-row-dur { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
#recordingsCenterModal .rc-badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
#recordingsCenterModal .rc-badge.pending { background: #ececec; color: #555; }
#recordingsCenterModal .rc-badge.transcribing { background: #dde9f0; color: #1F4E79; }
#recordingsCenterModal .rc-badge.done { background: #e6f0e0; color: #466c33; }
#recordingsCenterModal .rc-badge.error { background: #f5d0d0; color: #a8201d; }
#recordingsCenterModal .rc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
#recordingsCenterModal .rc-btn {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 6px; padding: 6px 10px; font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#recordingsCenterModal .rc-btn:hover { border-color: var(--muted); }
#recordingsCenterModal .rc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#recordingsCenterModal .rc-btn.go { border-color: #7a3c8f; color: #7a3c8f; }
#recordingsCenterModal .rc-player { flex-basis: 100%; }
#recordingsCenterModal .rc-player audio { width: 100%; margin-top: 8px; }
#recordingsCenterModal .rc-transcript {
  flex-basis: 100%; margin-top: 8px; padding: 12px; background: var(--bg, rgba(0,0,0,0.03));
  border-radius: 6px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
#recordingsCenterModal .rc-empty { text-align: center; color: var(--muted); padding: 50px 20px; font-size: 14px; }
@media (max-width: 768px) {
  #recordingsCenterModal .rc-modal { max-height: 92vh; }
  #recordingsCenterModal .rc-row-main { min-width: 140px; }
}
/* Mobile overflow safeguards (audit 2026-06-24): cap over-wide min-widths so
   dialogs/rows never force horizontal page-scroll on phones. Desktop unaffected. */
@media (max-width: 430px) {
  #adminDLDialog { min-width: 0 !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; padding: 18px !important; }
  #toolsMenu { min-width: 0 !important; max-width: calc(100vw - 16px) !important; }
  #recordingsCenterModal .rc-row-main { min-width: 0 !important; }
  #recordingsCenterModal .rc-row { gap: 6px !important; }
}
/* ===== Visual polish pass (2026-06-24) — additive, layout-safe ===== */
::selection { background: var(--accent-soft); color: var(--ink); }
html { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }
button { transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
button:not(:disabled):active { transform: scale(0.97); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal { box-shadow: 0 14px 48px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.05); }

.rh-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 8px; border:1px solid var(--line); border-radius:12px; background:var(--paper); cursor:pointer; font-family:inherit; min-height:94px; transition:background .12s ease, transform .1s ease; }
.rh-cell:hover { background:var(--soft-bg); }
.rh-cell:active { transform:scale(.96); }
.rh-label { font-size:13px; font-weight:600; color:var(--ink); text-align:center; line-height:1.25; }


/* ===== Design language v2 (v116) — cohesive rounded controls + softer cards (visual only) ===== */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"], input[type="time"],
select, textarea { border-radius: 8px; }
.summary-card { border-radius: 10px; }
.day-content { border-radius: 10px; }
.modal { border-radius: 14px; }
.lawyer-badge { border-radius: 7px; }

/* Mobile admin — editable secretary-instruction field on cards (v117) */
.adm-card-instr { width:100%; box-sizing:border-box; margin-top:8px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:16px; background:#fffdf0; direction:rtl; color:var(--ink); }
.adm-card-instr:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,71,42,0.12); }

/* Mobile admin — editable general-note field on cards (v118) */
.adm-card-gnote { width:100%; box-sizing:border-box; margin-top:6px; padding:9px 11px; border:1px solid #c8dfb3; border-radius:8px; font-family:inherit; font-size:16px; background:#f0f7e8; direction:rtl; color:#3d5e2c; }
.adm-card-gnote:focus { outline:none; border-color:#7ba968; box-shadow:0 0 0 3px rgba(123,169,104,0.18); }

/* ===== v119: הוספת דיון ידנית + שינוי שעה עם "הוזז מ־" ===== */
/* v121: enlarged tap target (was a bare 20px-tall span — too small to tap on mobile) */
.time-editable {
  cursor: pointer;
  display: inline-block;
  padding: 8px 6px;
  margin: -8px -2px;   /* negative margin keeps the visual layout unchanged while growing the hit area */
  border-radius: var(--radius-sm);
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.time-editable:hover { color: var(--brand-blue); background: var(--soft-bg); }
body.view-only .time-editable { cursor: default; pointer-events: none; padding: 0; margin: 0; }
.time-moved-note {
  font-size: 10.5px;
  color: #a8571f;
  background: #fdf3e7;
  border: 1px solid #ead9b8;
  border-radius: 8px;
  padding: 1px 6px;
  margin-top: 3px;
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
}
.viewer-hearing-time .time-moved-note { display: block; margin-top: 4px; }
[data-theme="dark"] .time-moved-note { background: #3a2c1a; border-color: #5e4a2a; color: #e8b57a; }
.day-add-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  margin-right: 10px;
  vertical-align: middle;
  transition: all 0.15s;
}
.day-add-btn:hover { background: #1F4E79; color: white; border-color: #1F4E79; }

/* ============================================================
   v128 — DESIGN REDESIGN (Apple-inspired). Restyles the core
   screen to the approved mockup: cool neutrals, one navy-blue
   accent used sparingly, muted category dots, hairlines instead
   of heavy borders/gradients, clean sans type, tabular numerals.
   Styled through theme tokens so light & dark both work.
   ============================================================ */

/* Clean sans everywhere; retire the ornate serif display */
body,
body button, body input, body select, body textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Heebo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.brand h1, .day-header h2, .summary-card .count,
.stat-num, .adm-stat-num, .adm-card-time, .viewer-hearing-time {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Heebo", system-ui, sans-serif !important;
}
.tnum, .adm-card-time, .adm-card-tik, .viewer-hearing-time,
td:first-child, .summary-card .count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Page header ---- */
header { border-bottom: 1px solid var(--hairline); padding-bottom: 20px; }
.brand h1 { font-weight: 680; letter-spacing: -0.02em; }
.brand .subtitle { text-transform: none; letter-spacing: 0.01em; color: var(--ink-3); font-weight: 500; }
.brand-line { background: var(--brand-blue); }
.brand-dot { background: var(--brand-blue); }

/* ---- Week selector → clean segmented control ---- */
.week-selector { background: transparent; border: none; padding: 0; gap: 6px; justify-content: flex-start; }
.week-btn { border-radius: 12px; padding: 9px 15px; color: var(--ink-2); font-weight: 550; }
.week-btn:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.week-btn.active { background: var(--brand-blue); color: #fff; }

/* ---- Summary → quiet stat tiles (dot + big tabular number) ---- */
.summary-card { border-radius: var(--radius-md, 10px); padding: 15px 16px; box-shadow: none; }
.summary-card:hover { transform: none; box-shadow: var(--shadow); }
.summary-card::before { display: none; }   /* drop the color rail */
.summary-card .name {
  text-transform: none; letter-spacing: 0; color: var(--ink-2); font-weight: 550; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.summary-card .name::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto;
}
.summary-card.almog .name::before { background: var(--almog); }
.summary-card.hadar .name::before { background: var(--hadar); }
.summary-card.amir  .name::before { background: var(--amir); }
.summary-card.roi   .name::before { background: var(--roi); }
.summary-card.sivan .name::before { background: #8f7bab; }
.summary-card.reject .name::before { background: var(--reject); }
.summary-card .count { font-size: 30px; font-weight: 640; letter-spacing: -0.02em; margin: 8px 0 2px; }
.summary-card .pct { font-size: 12.5px; color: var(--ink-3); }

/* ---- Day panel → flat surface, hairline, sans heading ---- */
.day-content { border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow); border-color: var(--hairline); }
.day-header { background: var(--surface, var(--paper)); border-bottom: 1px solid var(--hairline); padding: 18px 22px; }
.day-header h2 { font-weight: 640; letter-spacing: -0.02em; font-size: 22px; }
.day-content.is-today { border-right: none; }
.day-content.is-today .day-header { background: var(--paper); box-shadow: inset 3px 0 0 var(--brand-blue); }
.day-stats strong { color: var(--ink); }

/* ---- Hearing table → clean scannable rows ---- */
th {
  background: transparent; text-transform: none; letter-spacing: 0.01em;
  font-weight: 600; font-size: 12px; color: var(--ink-3);
  border-bottom: 1px solid var(--hairline); padding: 11px 16px 9px;
}
td { border-bottom: 1px solid var(--hairline); padding: 13px 16px; }
tr:hover td { background: var(--row-hover); }
td:first-child { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }

/* ---- Lawyer chips → neutral pill + colored dot (color = information) ---- */
.lawyer-badge {
  border-radius: 980px; padding: 5px 11px 5px 10px; font-weight: 550; font-size: 13px;
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink);
  border: none;
}
.lawyer-badge:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.lawyer-badge::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto;
}
/* neutralize the old colored fills (they out-specify the base .lawyer-badge) */
.lawyer-badge.almog, .lawyer-badge.hadar, .lawyer-badge.amir, .lawyer-badge.roi,
.lawyer-badge.sivan, .lawyer-badge.tomer, .lawyer-badge.eli,
.lawyer-badge.sivan-pending, .lawyer-badge.tomer-pending, .lawyer-badge.eli-pending {
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink);
}
.lawyer-badge.almog::before { background: var(--almog); }
.lawyer-badge.hadar::before { background: var(--hadar); }
.lawyer-badge.amir::before  { background: var(--amir); }
.lawyer-badge.roi::before   { background: var(--roi); }
.lawyer-badge.sivan::before,
.lawyer-badge.tomer::before,
.lawyer-badge.eli::before   { background: #8f7bab; }
/* status chips: quiet outline, semantic dot */
.lawyer-badge.postpone, .lawyer-badge.compromise, .lawyer-badge.shlomo,
.lawyer-badge.invalid, .lawyer-badge.reject, .lawyer-badge.pending {
  background: transparent; border: 1px solid var(--hairline-strong); color: var(--ink-2);
}
.lawyer-badge.postpone::before   { background: #8f7bab; }
.lawyer-badge.compromise::before { background: var(--almog); }
.lawyer-badge.shlomo::before,
.lawyer-badge.invalid::before,
.lawyer-badge.reject::before     { background: var(--reject); }
.lawyer-badge.pending::before    { background: var(--ink-3); }

/* ---- Notes → hairline-led, quiet ---- */
.note {
  background: transparent !important; border: none !important;
  padding: 6px 0 0 !important; color: var(--ink-2) !important;
  border-inline-start: 2px solid var(--hairline-strong) !important;
  padding-inline-start: 10px !important; border-radius: 0 !important;
  margin-top: 6px !important; font-size: 12.5px;
}

/* ---- Primary buttons carrying the old navy: refine to the accent ---- */
.btn.secondary { border-radius: 980px; }

/* (v128 flatten block superseded by the v136 translucent bar below) */

/* ============================================================
   v128 — LIGHT-MODE PALETTE SWEEP. Hundreds of JS templates bake
   in warm-cream inline backgrounds (#f7f5f0 ×46, #fafaf7, #fdfcf8…)
   that now clash with the cool neutral palette. Remap the common
   NEUTRAL creams to theme tokens by inline-hex substring so the
   whole app (modals, panels, reports) matches — both themes, since
   the tokens are theme-aware. Only backgrounds are remapped, never
   text colors. Semantic tints (red/green/amber) are left alone.
   ============================================================ */
[style*="background:#f7f5f0"], [style*="background: #f7f5f0"],
[style*="background:#fafaf5"], [style*="background:#fafaf7"],
[style*="background:#f4f1ea"], [style*="background:#f5f2ea"],
[style*="background:#faf9f5"], [style*="background:#fbfaf6"],
[style*="background:#f9f7f2"], [style*="background:#f7f6f1"] {
  background: var(--soft-bg) !important;
}
[style*="background:#fdfcf8"], [style*="background:#fefdfb"],
[style*="background:#fffdf8"], [style*="background:#fcfbf8"],
[style*="background:#fdfcfa"] {
  background: var(--paper) !important;
}

/* class-based warm backgrounds (not inline) → cool tokens */
.modal-info { background: var(--soft-bg); border-inline-start-color: var(--brand-blue); }
.adm-card-instr { background: var(--warn-bg); }
.adm-card-gnote { background: var(--success-bg); color: var(--ink); border-color: var(--hairline-strong); }
.filter-empty-msg { background: var(--soft-bg) !important; }

/* ===== v131 — date-range picker (replaces week tabs) ===== */
.range-picker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--hairline);
  padding: 7px 11px; border-radius: 12px; direction: rtl;
}
.range-lbl { font-size: 12.5px; color: var(--ink-2); font-weight: 550; }
.range-input {
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: var(--soft-bg); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 6px 9px; direction: ltr; text-align: center;
  min-height: 34px; color-scheme: light dark;
}
.range-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; }
.range-sep { width: 1px; height: 20px; background: var(--hairline-strong); margin: 0 2px; }
.range-preset {
  font-family: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--hairline-strong); border-radius: 980px; padding: 6px 14px;
  min-height: 34px; transition: background .15s, color .15s, border-color .15s;
}
.range-preset:hover { background: var(--brand-blue-weak); color: var(--brand-blue); border-color: var(--brand-blue-weak); }
.range-preset.active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

/* ===== v132 — typeable range fields (dd/mm/yyyy text + calendar button) ===== */
.range-field { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.range-field .range-input { width: 118px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.range-input::placeholder { color: var(--ink-3); opacity: .8; font-size: 12px; }
.range-input.invalid { border-color: var(--reject); background: var(--error-bg); }
.range-cal-btn {
  display: inline-grid; place-items: center; cursor: pointer;
  width: 34px; height: 34px; padding: 0; border-radius: 8px;
  background: transparent; border: 1px solid var(--hairline);
  color: var(--ink-2); transition: background .15s, color .15s;
}
.range-cal-btn:hover { background: var(--brand-blue-weak); color: var(--brand-blue); }
.range-cal-btn svg { width: 16px; height: 16px; }

/* ===== v133 — day lock (קיבוע ימים) ===== */
.day-lock-btn {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 550;
  padding: 3px 10px;
  border-radius: 980px;
  cursor: pointer;
  font-family: inherit;
  margin-right: 6px;
  vertical-align: middle;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.day-lock-btn:hover { background: var(--brand-blue-weak); color: var(--brand-blue); border-color: var(--brand-blue-weak); }
.day-lock-btn.locked {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.day-lock-btn.locked:hover { filter: brightness(1.08); }
#lockRangeBtn.locked { background: var(--brand-blue-weak) !important; color: var(--brand-blue) !important; border-color: var(--brand-blue) !important; }

/* ===== v134 — toolbar/button system (one accent, quiet secondaries) ===== */
.btn {
  border-radius: 980px;
  font-weight: 590;
  padding: 10px 20px;
  box-shadow: none;
}
.btn:hover { background: var(--ink-2); transform: none; box-shadow: none; }
.btn.primary { background: var(--brand-blue); color: #fff; border: none; }
.btn.primary:hover { background: var(--brand-blue-2); }
.btn.secondary {
  background: var(--paper) !important;   /* beats leftover inline styles */
  color: var(--ink-2) !important;
  border: 1px solid var(--hairline-strong) !important;
}
.btn.secondary:hover { background: var(--soft-bg) !important; color: var(--ink) !important; }
.btn.secondary.danger { color: var(--reject) !important; border-color: color-mix(in srgb, var(--reject) 35%, transparent) !important; }
.btn.secondary.danger:hover { background: var(--error-bg) !important; }
.controls { align-items: center; gap: 8px; }

/* remaining terracotta accents on core chrome → the one brand accent */
#todayBadge {
  background: var(--brand-blue-weak) !important;
  color: var(--brand-blue) !important;
  border-color: transparent !important;
}
.tab.active { background: var(--brand-blue); color: #fff; }
.day-content.is-today .day-header h2 { color: var(--brand-blue); }

/* ===== v134 — modal & report surfaces to the clean language ===== */
.modal-overlay { background: var(--overlay-dim); }
.modal {
  border-radius: 18px !important;      /* beats the stray 14px fragment */
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgba(0,0,0,0.22) !important;
}
.modal h3 { font-weight: 640; letter-spacing: -0.01em; }
.modal-x {
  border-radius: 50%;
  border: none;
  background: var(--soft-bg);
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.modal-x:hover { background: var(--hairline); color: var(--ink); }
/* report tables inside modals: hairline header instead of the beige band */
.modal th, [id$="Modal"] th { background: transparent; color: var(--ink-3); }
/* section headers in the edit modal */
.modal-options .section-header { color: var(--ink-3); font-weight: 600; }

/* ============================================================
   v135 — Part B: mobile views + JS-built panels to the clean
   language. Token-based ⇒ light & dark both correct.
   ============================================================ */

/* ---- mobile admin (.adm-*) ---- */
.adm-week-day.active { background: var(--brand-blue); border-color: var(--brand-blue); box-shadow: 0 2px 8px rgba(31,95,168,0.25); }
.adm-week-day.today { border-color: var(--brand-blue); }
.adm-card-time { font-family: inherit; color: var(--ink); font-weight: 640; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.adm-stat-num { color: var(--brand-blue); font-family: inherit; font-weight: 640; }
.adm-qa-btn:active { border-color: var(--brand-blue); }
.adm-date-row, .adm-qa-btn, .adm-week-strip, .adm-stat-card, .adm-card, .adm-empty { border-color: var(--hairline); box-shadow: none; }
.adm-card { border-radius: 14px; }
/* adm lawyer chips → neutral pill + category dot (matches desktop) */
.adm-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); border-radius: 980px; }
.adm-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.adm-chip-almog   { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.adm-chip-almog::before { background: var(--almog); }
.adm-chip-hadar   { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.adm-chip-hadar::before { background: var(--hadar); }
.adm-chip-amir    { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.adm-chip-amir::before { background: var(--amir); }
.adm-chip-roi     { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.adm-chip-roi::before { background: var(--roi); }
.adm-chip-sivan, .adm-chip-tomer, .adm-chip-eli, .adm-chip-frilans { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.adm-chip-sivan::before, .adm-chip-tomer::before, .adm-chip-eli::before, .adm-chip-frilans::before { background: #8f7bab; }
.adm-chip-shlomo  { background: transparent; border: 1px solid var(--hairline-strong); color: var(--ink-2); }
.adm-chip-shlomo::before { background: var(--reject); }
.adm-chip-invalid { background: transparent; border: 1px solid var(--hairline-strong); color: var(--ink-2); }
.adm-chip-invalid::before { background: var(--reject); }

/* ---- viewer (lawyer) view ---- */
.viewer-day-chip.active { background: var(--brand-blue); border-color: var(--brand-blue); box-shadow: 0 2px 8px rgba(31,95,168,0.25); }
.viewer-hearing-time { font-family: inherit; color: var(--ink); font-weight: 640; letter-spacing: -0.01em; }
.viewer-hearing-row, .viewer-day-block { border-color: var(--hairline); }

/* ---- freelancer view header ---- */
.fl-header { background: var(--brand-blue) !important; }

/* ---- JS-built panels: retire the OLD navy + terracotta inline colors ----
   background:#1F4E79 buttons → the refined brand blue; #c9472a → calmer red.
   (onmouseover handlers that set inline hover colors lose to !important — the
   button simply keeps its base color on hover, which is fine.) */
[style*="background:#1F4E79"], [style*="background: #1F4E79"] { background: var(--brand-blue) !important; }
[style*="background:#163d61"] { background: var(--brand-blue-2) !important; }
[style*="color:#1F4E79"], [style*="color: #1F4E79"] { color: var(--brand-blue) !important; }
[style*="background:#c9472a"] { background: var(--reject) !important; }
[style*="color:#c9472a"] { color: var(--reject) !important; }
[style*="background:#7ba968"] { background: var(--almog) !important; }
[style*="border:1px solid #c9472a"] { border-color: var(--reject) !important; }

/* ============================================================
   v136 — APPLE-GRADE CHROME
   Top bar → translucent blurred surface (macOS-style): content
   scrolls beneath it, ink text, quiet buttons. Token-based ⇒
   correct in both themes.
   ============================================================ */
#userBar {
  background: color-mix(in srgb, var(--paper) 78%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  color: var(--ink) !important;
  border-bottom: 1px solid var(--hairline);
  box-shadow: none !important;
}
body #userBar > span { color: var(--ink); }
body #userBar button {
  background: transparent !important;
  color: var(--ink-2) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-weight: 500;
}
body #userBar button:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
  color: var(--ink) !important;
  transform: none;
}
#userBar .role-badge { background: var(--soft-bg) !important; color: var(--ink-3) !important; }
/* the tools dropdown stays a paper menu */
body #toolsMenu { background: var(--paper) !important; border-color: var(--hairline) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important; border-radius: 12px !important; }
body #toolsMenu button { background: none !important; color: var(--ink) !important; border: none !important; }
body #toolsMenu button:hover { background: var(--soft-bg) !important; }

/* ---- micro-interactions (Apple restraint) ---- */
::selection { background: color-mix(in srgb, var(--brand-blue) 22%, transparent); }
.btn:active, .week-btn:active, .range-preset:active, .day-add-btn:active, .day-lock-btn:active { transform: scale(0.97); }
.summary-card, .day-content, .modal { transition: box-shadow .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .week-btn:active, .range-preset:active, .day-add-btn:active, .day-lock-btn:active { transform: none; }
}

/* ===== v137 — Reports Hub as a grouped settings-style list ===== */
.rh2-panel {
  background: var(--paper);
  max-width: 480px; width: 100%;
  max-height: 88vh; overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--hairline);
  padding: 20px 20px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.rh2-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rh2-head h2 { margin: 0; font-size: 19px; font-weight: 640; letter-spacing: -0.01em; color: var(--ink); }
.rh2-x {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--soft-bg); color: var(--ink-2);
  display: grid; place-items: center; transition: background .15s;
}
.rh2-x:hover { background: var(--hairline); color: var(--ink); }
.rh2-group-title {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  margin: 18px 6px 6px; letter-spacing: 0.01em;
}
.rh2-group {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}
.rh2-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: right;
  padding: 12px 14px;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  border-bottom: 1px solid var(--hairline);
  transition: background .12s;
}
.rh2-row:last-child { border-bottom: none; }
.rh2-row:hover { background: var(--row-hover); }
.rh2-row:active { background: var(--soft-bg); }
.rh2-ic {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: var(--brand-blue-weak); color: var(--brand-blue);
  display: grid; place-items: center;
}
.rh2-ic svg { width: 16px; height: 16px; }
.rh2-label { flex: 1; font-size: 14px; font-weight: 550; color: var(--ink); }
.rh2-chev { color: var(--ink-3); display: grid; place-items: center; }
.rh2-chev svg { width: 15px; height: 15px; }

/* ===== v137 — top bar legibility (text was getting lost) ===== */
body #userBar { font-size: 13px; }
body #userBar > span { font-size: 13.5px; color: var(--ink); }
body #userBar button {
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  padding: 7px 13px !important;
}
body #userBar button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent) !important; }
#userBar .role-badge { font-size: 11.5px !important; font-weight: 550; }

/* ===== v139 — professional row actions ===== */
.row-act-btn {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  padding: 3px 10px;
  cursor: pointer;
  border-radius: 980px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  transition: background .12s, color .12s, border-color .12s;
}
.row-act-btn:hover { background: var(--soft-bg); color: var(--ink); border-color: var(--hairline-strong); }

/* ===== v140 — team roster management ===== */
.rst-sub { font-size: 12.5px; color: var(--ink-3); margin: 2px 6px 4px; line-height: 1.5; }
.rst-hint { font-weight: 500; color: var(--ink-3); font-size: 11px; }
.rst-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
}
.rst-row:hover { background: var(--row-hover); }
.rst-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.rst-name { flex: 1; font-size: 14px; font-weight: 550; color: var(--ink); }
.rst-actions { display: flex; gap: 6px; align-items: center; }
.rst-act {
  background: transparent; border: 1px solid var(--hairline-strong);
  color: var(--ink-2); font-size: 11.5px; font-weight: 500;
  padding: 3px 11px; border-radius: 980px; cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s;
}
.rst-act.approve { color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 35%, transparent); }
.rst-act.approve:hover { background: var(--brand-blue-weak); }
.rst-act.remove:hover { background: var(--error-bg); color: var(--reject); border-color: color-mix(in srgb, var(--reject) 35%, transparent); }
.rst-core { font-size: 11px; color: var(--ink-3); }
.rst-empty { padding: 14px; font-size: 13px; color: var(--ink-3); text-align: center; }
.rst-addrow { display: flex; gap: 8px; padding: 10px 14px; background: var(--surface-2, var(--soft-bg)); }
.rst-input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--hairline);
  border-radius: 8px; font-family: inherit; font-size: 13px;
  background: var(--paper); color: var(--ink); direction: rtl; min-width: 0;
}
.rst-add {
  background: var(--brand-blue); color: #fff; border: none;
  padding: 8px 16px; border-radius: 980px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 590;
}
.rst-add:hover { background: var(--brand-blue-2); }

/* ===== v142 — algorithm builder ===== */
.ab-panel { max-width: 560px; }
.ab-enable { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); margin: 8px 6px 2px; cursor: pointer; }
.ab-card { border: 1px solid var(--hairline); border-radius: 12px; margin-bottom: 10px; background: var(--paper); overflow: hidden; }
.ab-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); background: var(--surface-2, var(--soft-bg)); }
.ab-order { display: flex; flex-direction: column; gap: 2px; }
.ab-move { border: none; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 9px; padding: 1px 5px; border-radius: 4px; }
.ab-move:hover:not(:disabled) { background: var(--hairline); color: var(--ink); }
.ab-move:disabled { opacity: .3; cursor: default; }
.ab-name { font-size: 14.5px; font-weight: 600; color: var(--ink); flex: 1; }
.ab-prio { font-size: 11px; color: var(--ink-3); }
.ab-active { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.ab-card-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.ab-field { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.ab-field > span:first-child { flex: 0 0 210px; }
.ab-num { width: 70px; padding: 5px 8px; border: 1px solid var(--hairline); border-radius: 7px; font-family: inherit; font-size: 13px; background: var(--paper); color: var(--ink); text-align: center; }
.ab-text { padding: 5px 10px; border: 1px solid var(--hairline); border-radius: 7px; font-family: inherit; font-size: 13px; background: var(--paper); color: var(--ink); direction: rtl; width: 150px; }
.ab-text.time { direction: ltr; text-align: center; width: 80px; }
.ab-text.wide { width: 100%; max-width: 260px; }
.ab-select { padding: 6px 10px; border: 1px solid var(--hairline); border-radius: 7px; font-family: inherit; font-size: 13px; background: var(--paper); color: var(--ink); }
.ab-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ab-chip { border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-2); font-size: 11.5px; padding: 3px 11px; border-radius: 980px; cursor: pointer; font-family: inherit; transition: all .12s; }
.ab-chip.on { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.ab-chip.day.on { background: var(--reject); border-color: var(--reject); }
.ab-hintline { font-size: 11px; color: var(--ink-3); margin-right: 6px; }
.ab-globals { padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.ab-actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; }

/* ===== v149 — 200/0 descriptions uploader ===== */
.di-panel { max-width: 480px; }
.di-drop {
  border: 1.5px dashed var(--hairline-strong);
  border-radius: 14px;
  padding: 26px 18px;
  text-align: center;
  background: var(--surface-2, var(--soft-bg));
  transition: border-color .15s, background .15s;
  margin-top: 6px;
}
.di-drop.over { border-color: var(--brand-blue); background: var(--brand-blue-weak); }
.di-drop-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.di-drop-sub { font-size: 12px; color: var(--ink-3); margin: 6px 0 10px; }
.di-log { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.di-line { font-size: 12.5px; color: var(--ink-2); padding: 6px 10px; border-radius: 8px; background: var(--soft-bg); }
.di-line.ok { color: var(--almog); }
.di-line.warn { color: var(--amir); }
.di-line.err { color: var(--reject); background: var(--error-bg); }
.di-line.done { color: var(--ink); font-weight: 600; background: transparent; }

/* ===== v152 — dark-mode gaps found in the full system sweep =====
   The v134 button system and the v132 range fields force light values
   with !important (to beat legacy inline styles), so dark mode needs an
   equally specific override. */
[data-theme="dark"] .btn.secondary {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--hairline-strong) !important;
}
[data-theme="dark"] .btn.secondary:hover { background: var(--soft-bg) !important; }
[data-theme="dark"] .btn.secondary.danger { color: var(--reject) !important; }
[data-theme="dark"] .range-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--hairline);
}
[data-theme="dark"] .range-cal-btn { background: transparent; border-color: var(--hairline); color: var(--ink-2); }
[data-theme="dark"] .adm-nav-btn { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--hairline) !important; }

/* ============================================================
   v156 — search-jump highlight in the mobile admin view.
   Outline-based so it reads the same in light and dark themes.
   ============================================================ */
.adm-card-flash { animation: admCardFlash 1.7s ease; }
@keyframes admCardFlash {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
  12%, 62% { box-shadow: 0 0 0 3px var(--brand-blue); }
}