/* ============================================================
   Schedule page (STEP 4.6)
   Ported from _design/zain-os/project/Schedule - B.html
   Week calendar + left rail + pending approval queue.
   Follow-ups preserved as an inner tab (legacy feature).
   ============================================================ */

.sched-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sched-hd-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex-wrap: wrap; }
.sched-hd h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1; margin: 0; color: var(--text); }
.sched-hd .meta { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sched-hd .meta .sep { margin: 0 8px; color: var(--text-tertiary); }
.sched-hd-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sched-page-seg { display: inline-flex; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; margin-right: 4px; }
.sched-page-seg button { padding: 5px 14px; background: transparent; border: 0; border-radius: 4px; color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.sched-page-seg button.is-active { background: var(--hover); color: var(--text); }
.sched-page-seg button .n { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.sched-page-seg button.is-active .n { color: var(--text-secondary); }
.sched-page-seg button svg { width: 13px; height: 13px; }

.sched-nav-arrows { display: inline-flex; align-items: center; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px; }
.sched-nav-arrows button { width: 26px; height: 26px; background: transparent; border: 0; border-radius: 4px; color: var(--text-secondary); font-family: var(--font-mono); font-size: 14px; cursor: pointer; }
.sched-nav-arrows button:hover { background: var(--hover); color: var(--text); }
.sched-today-btn { height: 28px; padding: 0 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
.sched-today-btn:hover { border-color: var(--brand-dim); }

.sched-view-seg { display: inline-flex; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; }
.sched-view-seg button { padding: 4px 11px; background: transparent; border: 0; border-radius: 4px; color: var(--text-secondary); font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit; }
.sched-view-seg button.is-active { background: var(--hover); color: var(--text); }

.sched-primary-add { height: 30px; padding: 0 14px; background: var(--brand); color: #fff; border: 0; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.sched-primary-add:hover { background: var(--brand-hover); }
.sched-primary-add svg { width: 12px; height: 12px; }

/* Grid layout */
.sched-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 900px) { .sched-grid { grid-template-columns: 1fr; } }

/* Left rail */
.sched-rail { display: flex; flex-direction: column; gap: 18px; }
.sched-rail-block { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--r-sm); padding: 14px 16px; }
.sched-rail-block h4 { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; margin: 0 0 10px; font-family: var(--font-mono); }

/* Mini month */
.mini-month { font-family: var(--font-mono); }
.mini-mo-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mini-mo-hd .m { font-size: 12px; font-weight: 500; color: var(--text); font-family: var(--font-sans); letter-spacing: -0.005em; }
.mini-mo-hd button { width: 20px; height: 20px; background: transparent; border: 0; color: var(--text-secondary); font-size: 12px; cursor: pointer; border-radius: 3px; font-family: var(--font-mono); }
.mini-mo-hd button:hover { background: var(--hover); color: var(--text); }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-size: 10.5px; }
.mini-grid .dow { color: var(--text-tertiary); text-align: center; font-size: 9px; padding: 2px 0; }
.mini-grid .d { text-align: center; padding: 4px 0; color: var(--text-secondary); cursor: pointer; border-radius: 3px; position: relative; font-variant-numeric: tabular-nums; }
.mini-grid .d:hover { background: var(--hover); color: var(--text); }
.mini-grid .d.dim { color: var(--text-tertiary); opacity: 0.5; }
.mini-grid .d.has-v { color: var(--text); font-weight: 500; }
.mini-grid .d.has-v::after { content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--text-tertiary); }
.mini-grid .d.in-week { background: rgba(232,97,58,0.04); }
.mini-grid .d.today { background: var(--brand); color: #fff; font-weight: 600; }
.mini-grid .d.today::after { background: #fff; }

/* Filter lists */
.sched-filter-list { display: flex; flex-direction: column; gap: 2px; }
.sched-filter-row { display: flex; align-items: center; padding: 5px 8px; margin: 0 -8px; border-radius: 4px; cursor: pointer; font-size: 12.5px; color: var(--text-secondary); user-select: none; }
.sched-filter-row:hover { background: var(--hover); color: var(--text); }
.sched-filter-row.is-on { color: var(--text); }
.sched-filter-row .sw { width: 9px; height: 9px; border-radius: 2.5px; margin-right: 10px; background: var(--text-tertiary); flex-shrink: 0; }
.sched-filter-row.c-approved .sw { background: #6A8A70; }
.sched-filter-row.c-pending .sw { background: #C99A52; }
.sched-filter-row.c-broker .sw { background: #7A8A9B; }
.sched-filter-row.c-site .sw { background: #A47A6D; }
.sched-filter-row.c-decline .sw { background: var(--text-tertiary); opacity: 0.6; }
.sched-filter-row .n { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }

/* Week grid */
.sched-week { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--r-sm); overflow: hidden; }
.sched-week-head { display: grid; grid-template-columns: 54px repeat(7, 1fr); border-bottom: 1px solid var(--border-light); }
.sched-week-head .tc-corner { border-right: 1px solid var(--border-light); }
.sched-week-head .wh-cell { padding: 10px 10px 9px; border-right: 1px solid var(--border-light); text-align: center; cursor: pointer; }
.sched-week-head .wh-cell:last-child { border-right: 0; }
.sched-week-head .wh-cell .dow { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; font-family: var(--font-mono); }
.sched-week-head .wh-cell .d { font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.sched-week-head .wh-cell.today .d { color: var(--brand); }
.sched-week-head .wh-cell.today .dow { color: var(--brand); }
.sched-week-head .wh-cell .cnt { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 2px; }

.sched-week-body { position: relative; display: grid; grid-template-columns: 54px repeat(7, 1fr); }
.sched-week-body .tc-col { border-right: 1px solid var(--border-light); display: flex; flex-direction: column; }
.sched-week-body .tc-col .hh { height: 48px; padding: 0 8px 0 12px; font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); text-align: right; position: relative; top: -6px; }
.sched-week-body .tc-col .hh:first-child { top: 0; }

.sched-week-body .day-col { border-right: 1px solid var(--border-light); position: relative; min-height: 624px; }
.sched-week-body .day-col:last-child { border-right: 0; }
.sched-week-body .day-col .slot { height: 48px; border-top: 1px dashed var(--border-light); }
.sched-week-body .day-col .slot:first-child { border-top: 0; }
.sched-week-body .day-col.today { background: rgba(232,97,58,0.015); }

.sched-now-line { position: absolute; left: 4px; right: 4px; height: 1px; background: var(--brand); z-index: 3; pointer-events: none; }
.sched-now-line::before { content: ''; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* Visit pills */
.sched-vp { position: absolute; left: 3px; right: 3px; background: var(--hover); border: 1px solid var(--border); border-left: 2px solid var(--text-tertiary); border-radius: 4px; padding: 4px 6px; cursor: pointer; overflow: hidden; z-index: 2; transition: all var(--dur-default) var(--ease); color: var(--text); font-family: inherit; text-align: left; }
.sched-vp:hover { z-index: 4; border-color: var(--brand-dim); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.sched-vp.pending { border-left-color: #C99A52; background: rgba(201,154,82,0.06); }
.sched-vp.approved { border-left-color: #6A8A70; }
.sched-vp.broker { border-left-color: #7A8A9B; }
.sched-vp.site { border-left-color: #A47A6D; }
.sched-vp.completed { opacity: 0.65; border-left-color: var(--text-tertiary); }
.sched-vp.cancelled { opacity: 0.45; border-left-color: var(--text-tertiary); text-decoration: line-through; }
.sched-vp.is-selected { border-color: var(--brand); border-left: 2px solid var(--brand); box-shadow: 0 0 0 1px var(--brand); z-index: 5; }
.sched-vp .t { font-size: 9.5px; color: var(--text-secondary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sched-vp .n { font-size: 11px; font-weight: 500; color: var(--text); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.sched-vp .u { font-size: 10px; color: var(--text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; font-family: var(--font-mono); }
.sched-vp.small { padding: 3px 6px; }
.sched-vp.small .u { display: none; }

/* Pending queue */
.sched-queue { margin-top: 20px; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--r-sm); overflow: hidden; }
.sched-queue-hd { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-light); gap: 12px; flex-wrap: wrap; }
.sched-queue-hd h3 { font-size: 13px; font-weight: 500; margin: 0; letter-spacing: -0.005em; color: var(--text); }
.sched-queue-hd .badge-pending { display:inline-flex; align-items:center; height: 20px; font-size: 10px; font-family: var(--font-mono); background: rgba(201,154,82,0.12); color: #C99A52; padding: 0 8px; border-radius: var(--r-pill); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.sched-queue-hd .sub { font-size: 12px; color: var(--text-secondary); }
.sched-queue-hd .spacer { flex: 1; }
.sched-queue-hd button { height: 26px; padding: 0 10px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-secondary); font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit; }
.sched-queue-hd button:hover { color: var(--text); border-color: var(--brand-dim); }

.sched-qrow { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border-light); transition: background var(--dur-default) var(--ease); }
.sched-qrow:last-child { border-bottom: 0; }
.sched-qrow:hover { background: var(--hover); }
.sched-qrow .q-when { font-size: 11px; color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sched-qrow .q-when .d { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.sched-qrow .q-body .name { font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.sched-qrow .q-body .det { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.sched-qrow .q-body .det .sep { margin: 0 6px; color: var(--text-tertiary); }
.sched-qrow .q-body .det .u { font-family: var(--font-mono); color: var(--text); }
.sched-qrow .q-source { font-size: 10.5px; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.sched-qrow .q-acts { display: flex; gap: 6px; }
.sched-qrow .q-acts button { height: 26px; padding: 0 11px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.sched-qrow .q-acts button:hover { color: var(--text); border-color: var(--brand-dim); }
.sched-qrow .q-acts button svg { width: 11px; height: 11px; }
.sched-qrow .q-acts .approve { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.sched-qrow .q-acts .approve:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }

/* Legend */
.sched-legend { display: flex; gap: 16px; margin-top: 14px; font-size: 11px; color: var(--text-tertiary); flex-wrap: wrap; }
.sched-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sched-legend .sw { width: 10px; height: 4px; border-radius: 2px; display: inline-block; }

/* ───── Follow-up type filter colors (left rail) ───── */
.sched-filter-row.t-initial .sw { background: #6A8A70; }
.sched-filter-row.t-pricing .sw { background: #C99A52; }
.sched-filter-row.t-visit-rem .sw { background: #7A8A9B; }
.sched-filter-row.t-install .sw { background: #A47A6D; }
.sched-filter-row.t-closing .sw { background: var(--brand); }
.sched-filter-row.t-general .sw { background: var(--text-secondary); }

/* ───── Follow-up chips (week grid) ───── */
.sched-fup { position: absolute; left: 3px; right: 3px; background: var(--card); border: 1px solid var(--border); border-left: 2px solid var(--text-tertiary); border-radius: 4px; padding: 3px 7px 3px 6px; cursor: pointer; overflow: hidden; z-index: 2; transition: all var(--dur-default) var(--ease); height: 36px; display: flex; flex-direction: column; justify-content: center; color: var(--text); font-family: inherit; text-align: left; }
.sched-fup:hover { z-index: 4; border-color: var(--brand-dim); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.sched-fup.initial { border-left-color: #6A8A70; }
.sched-fup.pricing { border-left-color: #C99A52; background: rgba(201,154,82,0.04); }
.sched-fup.visit-rem { border-left-color: #7A8A9B; }
.sched-fup.install { border-left-color: #A47A6D; }
.sched-fup.closing { border-left-color: var(--brand); background: var(--brand-soft); }
.sched-fup.general { border-left-color: var(--text-secondary); }
.sched-fup.draft { border-style: dashed; }
.sched-fup.overdue { opacity: 0.62; }
.sched-fup.is-selected { border-color: var(--brand); border-left: 2px solid var(--brand); box-shadow: 0 0 0 1px var(--brand); z-index: 5; }
.sched-fup .t-row { display: flex; align-items: center; gap: 4px; }
.sched-fup .t { font-size: 9.5px; color: var(--text-secondary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sched-fup .ai-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); display: inline-block; }
.sched-fup .n { font-size: 11px; font-weight: 500; color: var(--text); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.sched-fup .n.ar { font-family: var(--font-arabic); direction: rtl; text-align: right; }
.sched-stack-badge { display: none; }

/* Baseline transitions so left/width/height animate smoothly when
   a clustered chip hovers to full width. */
.sched-fup, .sched-vp {
  transition: left 180ms var(--ease), width 180ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease), z-index 0ms;
}

/* ───── Clustered overlap (Google Calendar pattern) ─────
   Side-by-side columns at (100% / cols) width, full height preserved.
   Priority when narrow: NAME first, then time. Late/overdue is signalled
   by the border-left color (already set by .overdue class), not by text.
   Hover zooms chip past the column gutter, reveals full unit/meta. */

/* Clustered = tighter padding so name has room */
.sched-vp.is-clustered { padding: 4px 6px; display: flex; align-items: center; overflow: hidden; }
.sched-fup.is-clustered { padding: 4px 7px; display: flex; align-items: center; overflow: hidden; }

/* Clustered body — name is hero, meta is subtle sub-line */
.sched-vp .vp-row-stacked, .sched-fup .fup-row-stacked {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; width: 100%;
}
.vp-name-primary, .fup-name-primary {
  font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: -0.003em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.fup-name-primary.ar { font-family: var(--font-arabic); direction: rtl; text-align: right; }
.vp-meta-small, .fup-time-small {
  font-size: 9.5px; color: var(--text-secondary);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 4px;
}
.fup-time-small .ai-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }

/* Hairline divider between packed columns */
.sched-vp.is-clustered[data-col]:not([data-col="0"]),
.sched-fup.is-clustered[data-col]:not([data-col="0"]) {
  box-shadow: inset 1px 0 0 rgba(0,0,0,0.25);
}

/* Clustered chips stay at their packed column width. "+N more" is the
   primary affordance for seeing hidden items — no hover-expand effect. */

/* "+N more" pill on the first chip of an oversized cluster.
   Bottom-right of the chip — covers the tiny time label (redundant with
   the hour rail on the left of the week grid) and leaves the name
   unobstructed. */
.sched-cluster-more {
  /* Now a sibling of the chip (not a child) — positioned absolutely inside
     the day column. The top/left of the chip it relates to is passed via
     inline style. */
  position: absolute; right: 5px;
  height: 16px; padding: 0 7px;
  background: var(--brand); color: #fff;
  font-size: 9px; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 0; border-radius: 8px;
  display: inline-flex; align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  cursor: pointer; z-index: 6;
  line-height: 1;
  transform: translateY(-50%);
  margin-top: -2px;
}
.sched-cluster-more:hover { background: var(--brand-hover); }

/* Cluster popover — full list of overlapping items */
.sched-cluster-popover {
  position: fixed; z-index: 200;
  width: 320px; max-height: 320px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md), 0 0 0 1px rgba(232,97,58,0.15);
}
.sched-cluster-popover .cp-hd {
  padding: 12px 14px; border-bottom: 1px solid var(--border-light);
}
.sched-cluster-popover .cp-title {
  font-size: 11px; font-family: var(--font-mono); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary);
}
.sched-cluster-popover .cp-list { display: flex; flex-direction: column; padding: 4px; }
.sched-cluster-popover .cp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: transparent; border: 0; border-radius: var(--r-sm);
  cursor: pointer; font-family: inherit; text-align: left;
  color: var(--text); transition: background var(--dur-fast) var(--ease);
}
.sched-cluster-popover .cp-row:hover { background: var(--hover); }
.sched-cluster-popover .cp-bar {
  width: 3px; height: 28px; border-radius: 2px; background: var(--text-tertiary); flex-shrink: 0;
}
.sched-cluster-popover .cp-bar.approved { background: #6A8A70; }
.sched-cluster-popover .cp-bar.pending  { background: #C99A52; }
.sched-cluster-popover .cp-bar.broker   { background: #7A8A9B; }
.sched-cluster-popover .cp-bar.site     { background: #A47A6D; }
.sched-cluster-popover .cp-bar.initial  { background: #6A8A70; }
.sched-cluster-popover .cp-bar.pricing  { background: #C99A52; }
.sched-cluster-popover .cp-bar.visit-rem{ background: #7A8A9B; }
.sched-cluster-popover .cp-bar.install  { background: #A47A6D; }
.sched-cluster-popover .cp-bar.closing  { background: var(--brand); }
.sched-cluster-popover .cp-bar.general  { background: var(--text-secondary); }
.sched-cluster-popover .cp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sched-cluster-popover .cp-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-cluster-popover .cp-sub { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Week head overdue indicator for follow-ups */
.sched-week-head .wh-cell.overdue .cnt { color: var(--danger); }

/* ───── Overdue queue + AI drafts queue ───── */
.sched-q-badge-overdue { display: inline-flex; align-items: center; height: 20px; font-size: 10px; font-family: var(--font-mono); background: rgba(200,80,60,0.12); color: var(--danger); padding: 0 8px; border-radius: var(--r-pill); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.sched-q-badge-ai { display: inline-flex; align-items: center; height: 20px; font-size: 10px; font-family: var(--font-mono); background: var(--brand-soft); color: var(--brand); padding: 0 8px; border-radius: var(--r-pill); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }

.sched-fq-row { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border-light); transition: background var(--dur-default) var(--ease); }
.sched-fq-row:last-child { border-bottom: 0; }
.sched-fq-row:hover { background: var(--hover); }
.sched-fq-row .q-when { font-size: 11px; color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sched-fq-row .q-when .d { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; color: var(--text-tertiary); }
.sched-fq-row.overdue .q-when .d { color: var(--danger); }
.sched-fq-row .q-body .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-fq-row .q-body .name { font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.sched-fq-row .q-body .name.ar { font-family: var(--font-arabic); direction: rtl; }
.sched-fq-row .q-body .type { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); padding: 1px 7px; background: var(--bg); border-radius: var(--r-pill); }
.sched-fq-row .q-body .ai-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); display: inline-block; }
.sched-fq-row .q-body .det { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-fq-row .q-body .det .u { font-family: var(--font-mono); color: var(--text); }
.sched-fq-row .q-body .det .sep { margin: 0 6px; color: var(--text-tertiary); }
.sched-fq-row .q-body .preview { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.sched-fq-row .q-body .preview::before { content: '"'; color: var(--text-tertiary); }
.sched-fq-row .q-body .preview::after { content: '"'; color: var(--text-tertiary); }
.sched-fq-row .q-body .preview.ar { font-family: var(--font-arabic); direction: rtl; text-align: right; }
.sched-fq-row .q-source { font-size: 10.5px; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; text-align: right; white-space: nowrap; }
.sched-fq-row .q-acts { display: flex; gap: 6px; }
.sched-fq-row .q-acts button { height: 26px; padding: 0 11px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.sched-fq-row .q-acts button:hover { color: var(--text); border-color: var(--brand-dim); }
.sched-fq-row .q-acts button svg { width: 11px; height: 11px; }
.sched-fq-row .q-acts .send { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.sched-fq-row .q-acts .send:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }

/* Follow-ups empty state */
.sched-fu-empty { padding: 48px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.sched-fu-empty .title { font-size: 14px; color: var(--text); font-weight: 500; margin-bottom: 4px; }

/* ───── Month view ───── */
.sched-month { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--r-sm); overflow: hidden; }
.sched-month-hd { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); }
.sched-month-hd .m { font-size: 14px; font-weight: 500; color: var(--text); min-width: 160px; text-align: center; }
.sched-month-hd button { width: 26px; height: 26px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-secondary); font-family: var(--font-mono); cursor: pointer; }
.sched-month-hd button:hover { color: var(--text); border-color: var(--brand-dim); }
.sched-month-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-light); }
.sched-month-dow span { padding: 8px 10px; font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; text-align: right; }
.sched-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(104px, auto); }
.sched-month-cell { border-right: 1px solid var(--border-light); border-top: 1px solid var(--border-light); padding: 6px 8px; min-height: 104px; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 3px; transition: background var(--dur-fast) var(--ease); }
.sched-month-cell:hover { background: var(--hover); }
.sched-month-cell.dim { color: var(--text-tertiary); opacity: 0.45; cursor: default; }
.sched-month-cell.dim:hover { background: transparent; }
.sched-month-cell.today { background: rgba(232,97,58,0.04); }
.sched-month-cell:nth-child(7n) { border-right: 0; }
.sched-month-cell .md { font-size: 12px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.sched-month-cell.today .md { color: var(--brand); font-weight: 700; }
.sched-month-item { display: flex; align-items: center; gap: 5px; padding: 2px 5px; font-size: 10px; border-radius: 3px; border-left: 2px solid var(--text-tertiary); background: var(--bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.sched-month-item .tt { font-family: var(--font-mono); font-size: 9px; color: var(--text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sched-month-item.approved { border-left-color: #6A8A70; }
.sched-month-item.pending { border-left-color: #C99A52; }
.sched-month-item.broker { border-left-color: #7A8A9B; }
.sched-month-item.site { border-left-color: #A47A6D; }
.sched-month-item.completed { opacity: 0.55; }
.sched-month-item.cancelled { opacity: 0.4; text-decoration: line-through; }
.sched-month-item.initial { border-left-color: #6A8A70; }
.sched-month-item.pricing { border-left-color: #C99A52; }
.sched-month-item.visit-rem { border-left-color: #7A8A9B; }
.sched-month-item.install { border-left-color: #A47A6D; }
.sched-month-item.closing { border-left-color: var(--brand); }
.sched-month-item.general { border-left-color: var(--text-secondary); }
.sched-month-item.overdue { opacity: 0.62; }
.sched-month-more { font-size: 9px; color: var(--brand); font-family: var(--font-mono); padding: 0 5px; }

/* ───── List view ───── */
.sched-list { display: flex; flex-direction: column; gap: 20px; }
.sched-list-empty { padding: 48px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--r-sm); }
.sched-list-group { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--r-sm); overflow: hidden; }
.sched-list-day { padding: 10px 16px; background: var(--hover); border-bottom: 1px solid var(--border-light); font-size: 11px; color: var(--text); font-weight: 500; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.sched-list-row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--border-light); background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); transition: background var(--dur-fast) var(--ease); }
.sched-list-row:last-child { border-bottom: 0; }
.sched-list-row:hover { background: var(--hover); }
.sched-list-row .lr-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 100px; }
.sched-list-row.overdue .lr-time { color: var(--danger); }
.sched-list-row .lr-bar { width: 3px; height: 26px; border-radius: 2px; background: var(--text-tertiary); flex-shrink: 0; }
.sched-list-row .lr-bar.approved { background: #6A8A70; }
.sched-list-row .lr-bar.pending { background: #C99A52; }
.sched-list-row .lr-bar.broker { background: #7A8A9B; }
.sched-list-row .lr-bar.site { background: #A47A6D; }
.sched-list-row .lr-bar.initial { background: #6A8A70; }
.sched-list-row .lr-bar.pricing { background: #C99A52; }
.sched-list-row .lr-bar.visit-rem { background: #7A8A9B; }
.sched-list-row .lr-bar.install { background: #A47A6D; }
.sched-list-row .lr-bar.closing { background: var(--brand); }
.sched-list-row .lr-bar.general { background: var(--text-secondary); }
.sched-list-row .lr-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sched-list-row .lr-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-list-row .lr-det { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───────────────────────── Schedule forms (visit + follow-up) ───────── */
.sched-form { display: flex; flex-direction: column; gap: 16px; padding: 4px 0; }

.sf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sf-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); display: flex; align-items: center; gap: 8px; }
.sf-label .sf-req { color: var(--brand); font-weight: 700; }
.sf-label .sf-optional { color: var(--text-tertiary); font-size: 9px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.sf-hint { margin-left: auto; background: transparent; border: 1px dashed var(--brand-dim); color: var(--brand); font-size: 10px; font-family: var(--font-mono); padding: 2px 8px; border-radius: var(--r-pill); cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 4px; }
.sf-hint:hover { background: var(--brand-soft); }

.sf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .sf-row-2, .sf-row-3 { grid-template-columns: 1fr; } }

.sf-input { height: 40px; padding: 0 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 13px; font-family: inherit; box-sizing: border-box; width: 100%; }
.sf-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sf-textarea { padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 13px; font-family: inherit; resize: vertical; min-height: 72px; line-height: 1.5; }
.sf-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sf-textarea-hint { font-size: 11px; color: var(--text-tertiary); margin-top: -2px; }

/* Combobox (client / unit / broker picker) */
.sf-combobox { position: relative; }
.sf-combo-display { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.sf-combo-display:hover { border-color: var(--brand-dim); }
.sf-combobox.is-open .sf-combo-display { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sf-combobox.is-open .sf-caret { transform: rotate(180deg); }
.sf-caret { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
.sf-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--hover); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; text-transform: uppercase; }
.sf-unit-thumb { width: 30px; height: 30px; border-radius: 6px; overflow: hidden; background: var(--bg-900, #1a1815); border: 1px solid var(--border-light); flex-shrink: 0; display: inline-block; }
.sf-combo-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sf-combo-name { font-size: 13px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-combo-meta { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-placeholder { color: var(--text-tertiary); font-size: 13px; }

.sf-combo-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-md); z-index: 100; overflow: hidden; }
.sf-combobox.is-open .sf-combo-menu { display: flex; flex-direction: column; }
.sf-combo-search { margin: 8px; height: 32px; padding: 0 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 12px; font-family: inherit; }
.sf-combo-search:focus { outline: none; border-color: var(--brand); }
.sf-combo-list { max-height: 280px; overflow-y: auto; padding: 4px; border-top: 1px solid var(--border-light); }
.sf-combo-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; color: var(--text); text-align: left; }
.sf-combo-opt:hover { background: var(--hover); }
.sf-combo-opt-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sf-combo-opt-title { font-size: 12.5px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-combo-opt-meta { font-size: 10.5px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-combo-empty { padding: 20px; text-align: center; color: var(--text-tertiary); font-size: 12px; }

/* Pills (duration / visit type) */
.sf-pills { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; flex-wrap: wrap; }
.sf-pill { padding: 6px 12px; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--text-secondary); font-size: 12px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sf-pill:hover { color: var(--text); }
.sf-pill.is-on { background: var(--brand); color: #fff; font-weight: 600; }

/* Follow-up type grid — color-coded rectangular pills */
.sf-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 640px) { .sf-type-grid { grid-template-columns: repeat(2, 1fr); } }
.sf-type-pill { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 12.5px; font-family: inherit; cursor: pointer; text-align: left; transition: all var(--dur-fast) var(--ease); }
.sf-type-pill:hover { border-color: var(--brand-dim); }
.sf-type-pill.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand-soft); }
.sf-type-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--text-tertiary); flex-shrink: 0; }
.sf-type-pill.initial .sf-type-sw { background: #6A8A70; }
.sf-type-pill.pricing .sf-type-sw { background: #C99A52; }
.sf-type-pill.visit-rem .sf-type-sw { background: #7A8A9B; }
.sf-type-pill.install .sf-type-sw { background: #A47A6D; }
.sf-type-pill.closing .sf-type-sw { background: var(--brand); }
.sf-type-pill.general .sf-type-sw { background: var(--text-secondary); }

/* Quick date presets */
.sf-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 0; border-top: 1px solid var(--border-light); }
.sf-preset-label { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.sf-preset { height: 26px; padding: 0 10px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-secondary); font-size: 11.5px; font-family: inherit; cursor: pointer; }
.sf-preset:hover { color: var(--brand); border-color: var(--brand-dim); background: var(--brand-soft); }

/* Live preview card */
.sf-preview { padding: 14px 16px; background: var(--hover); border: 1px dashed var(--border); border-radius: var(--r-sm); }
.sf-preview-empty { font-size: 11px; color: var(--text-tertiary); font-style: italic; text-align: center; }
.sf-preview-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--text-tertiary); border-radius: var(--r-sm); }
.sf-preview-card.approved { border-left-color: #6A8A70; }
.sf-preview-card.pending { border-left-color: #C99A52; }
.sf-preview-card.broker { border-left-color: #7A8A9B; }
.sf-preview-card.initial { border-left-color: #6A8A70; }
.sf-preview-card.pricing { border-left-color: #C99A52; }
.sf-preview-card.visit-rem { border-left-color: #7A8A9B; }
.sf-preview-card.install { border-left-color: #A47A6D; }
.sf-preview-card.closing { border-left-color: var(--brand); }
.sf-preview-card.general { border-left-color: var(--text-secondary); }
.sf-preview-t { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sf-preview-n { font-size: 14px; color: var(--text); font-weight: 500; letter-spacing: -0.005em; }
.sf-preview-u { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); }
.sf-preview-msg { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; font-style: italic; line-height: 1.4; }

.sf-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-light); margin-top: 4px; }

/* Visit detail popover */
.sched-visit-popover { position: fixed; z-index: 60; width: 320px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-md); display: none; }
.sched-visit-popover.is-open { display: block; }
.sched-visit-popover .vp-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.sched-visit-popover .vp-sub { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); margin-bottom: 10px; }
.sched-visit-popover .vp-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12px; margin-bottom: 10px; }
.sched-visit-popover .vp-kv .k { color: var(--text-secondary); }
.sched-visit-popover .vp-kv .v { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.sched-visit-popover .vp-acts { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border-light); }
.sched-visit-popover .vp-acts button { height: 26px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 500; cursor: pointer; font-family: inherit; }
.sched-visit-popover .vp-acts button:hover { color: var(--text); border-color: var(--brand-dim); }
.sched-visit-popover .vp-acts button.primary { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.sched-visit-popover .vp-acts button.primary:hover { background: var(--brand-hover); }
.sched-visit-popover .vp-acts button.danger { color: var(--danger); }

/* ============================================================
   Responsive (tablet / phone / touch) — additive only.
   Calendar is inherently desktopish — only resize, never restructure.
   Operator-facing list/queue rows collapse to card view at ≤640px.
   ============================================================ */
@media (max-width: 1024px) {
  .sched-hd { gap: 12px; }
  .sched-hd-controls { width: 100%; flex-wrap: wrap; gap: 8px; }
  .sched-week-head .wh-cell { padding: 8px 4px; }
  .sched-week-head .wh-cell .d { font-size: 13px; }
  .sched-week-head { grid-template-columns: 40px repeat(7, 1fr); }
  .sched-week-body { grid-template-columns: 40px repeat(7, 1fr); }
  .sched-week-body .tc-col .hh { padding: 0 4px 0 6px; font-size: 9px; }
  .sched-vp .u { display: none; }
  /* Queue/list rows: simplify */
  .sched-qrow { grid-template-columns: 96px 1fr auto; gap: 10px; }
  .sched-qrow .q-source { display: none; }
  .sched-fq-row { grid-template-columns: 80px 1fr auto; gap: 10px; }
  .sched-fq-row .q-source { display: none; }
}

@media (max-width: 640px) {
  .sched-hd h1 { font-size: 19px; }
  .sched-hd-left { flex-wrap: wrap; gap: 10px; }
  .sched-page-seg button { padding: 5px 10px; font-size: 11.5px; }
  .sched-view-seg button { padding: 4px 8px; }
  .sched-primary-add { padding: 0 10px; }

  /* Week-grid horizontal scroll so day columns keep a usable min width */
  .sched-week { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sched-week-head,
  .sched-week-body { min-width: 640px; }

  /* Month view: tighter cells */
  .sched-month-cell { min-height: 72px; padding: 4px 5px; }
  .sched-month-cell .md { font-size: 11px; }
  .sched-month-item { font-size: 9.5px; padding: 1px 4px; }
  .sched-month-grid { grid-auto-rows: minmax(72px, auto); }

  /* List view rows: keep, just tighten time min-width */
  .sched-list-row { gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
  .sched-list-row .lr-time { min-width: 80px; font-size: 11px; }

  /* Pending visit queue → card view (Pattern B variant for grid rows) */
  .sched-queue-hd { padding: 12px 14px; gap: 8px; }
  .sched-qrow {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
  }
  .sched-qrow .q-when {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .sched-qrow .q-when .d { margin-bottom: 0; }
  .sched-qrow .q-acts { flex-wrap: wrap; }
  .sched-qrow .q-acts button { flex: 1 1 auto; min-width: 84px; }

  /* Follow-ups queue → card view */
  .sched-fq-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
  }
  .sched-fq-row .q-when {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .sched-fq-row .q-when .d { margin-bottom: 0; }
  .sched-fq-row .q-acts { flex-wrap: wrap; }
  .sched-fq-row .q-acts button { flex: 1 1 auto; min-width: 84px; }

  /* Forms full-width on phone */
  .sf-row-2, .sf-row-3 { grid-template-columns: 1fr; }
  .sf-type-grid { grid-template-columns: repeat(2, 1fr); }

  /* Visit popover: take most of screen */
  .sched-visit-popover { width: calc(100vw - 24px); max-width: 360px; }
}

@media (hover: none) and (pointer: coarse) {
  .sched-today-btn,
  .sched-primary-add,
  .sched-page-seg button,
  .sched-view-seg button,
  .sched-nav-arrows button,
  .sched-qrow .q-acts button,
  .sched-fq-row .q-acts button,
  .sched-queue-hd button,
  .sched-visit-popover .vp-acts button,
  .sf-pill,
  .sf-preset { min-height: 36px; }
  /* Inputs ≥16px to prevent iOS zoom */
  .sf-input, .sf-textarea, .sf-combo-search { font-size: 16px; }
  .sched-nav-arrows button { width: 36px; }
  .sched-filter-row { min-height: 36px; padding: 8px 8px; }
  .sf-combo-display { min-height: 48px; }
  .sf-combo-opt { min-height: 44px; }
  .sf-type-pill { min-height: 44px; }
  .mini-grid .d { min-height: 28px; padding: 6px 0; }
}

/* ============================================================
   Additional mobile gaps — header controls, mini-month rail,
   list view name spacing, cluster popover sizing.
   ============================================================ */

/* Tablet (≤1024px) — header controls stack neatly under page title */
@media (max-width: 1024px) {
  .sched-hd { flex-direction: column; align-items: stretch; }
  .sched-hd-left { width: 100%; justify-content: space-between; }
  .sched-hd-controls { width: 100%; justify-content: flex-start; }
  .sched-page-seg,
  .sched-view-seg { flex-wrap: wrap; }
  /* Sched grid: keep rail at the side until ≤900 (existing rule), but
     make the rail blocks tighter so the week grid has more room. */
  .sched-rail-block { padding: 12px 14px; }
  /* Month grid: tighter cells on iPad portrait */
  .sched-month-cell { min-height: 84px; padding: 5px 6px; }
  /* List rows: more breathing room on touch */
  .sched-list-row { padding: 12px 14px; }
  /* Visit popover narrower on iPad */
  .sched-visit-popover { width: 320px; }
}

/* Phone (≤640px) — final tightening */
@media (max-width: 640px) {
  /* Page header — title + nav-arrows + today on row 1, segs on row 2 */
  .sched-hd-left { gap: 8px; }
  .sched-hd-controls {
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .sched-hd-controls::-webkit-scrollbar { display: none; }
  .sched-hd-controls > * { flex-shrink: 0; }
  .sched-nav-arrows button { width: 30px; height: 30px; }
  .sched-today-btn { height: 30px; padding: 0 10px; font-size: 11.5px; }
  .sched-primary-add { height: 32px; font-size: 11.5px; }
  /* Rail blocks: compact even more */
  .sched-rail { gap: 12px; }
  .sched-rail-block { padding: 12px 14px; }
  .sched-rail-block h4 { margin-bottom: 8px; }
  /* Filter rows: bigger tap target */
  .sched-filter-row { padding: 8px 8px; font-size: 13px; }
  /* Mini month: bigger date cells for thumb tapping */
  .mini-grid { font-size: 11px; gap: 2px; }
  .mini-grid .d { padding: 6px 0; }
  /* Month grid: even tighter, but kept readable */
  .sched-month-hd { padding: 10px 12px; }
  .sched-month-hd .m { font-size: 13px; min-width: 0; }
  /* List view: prevent the bar from squishing the name */
  .sched-list-row { flex-wrap: wrap; }
  .sched-list-row .lr-time { flex: 0 0 auto; min-width: 0; }
  .sched-list-row .lr-bar { height: 22px; }
  .sched-list-row .lr-body { flex: 1 1 100%; min-width: 0; order: 3; padding-top: 2px; }
  .sched-list-day { padding: 10px 14px; font-size: 11px; }
  /* Cluster popover: fits the screen instead of a fixed 320px */
  .sched-cluster-popover {
    width: calc(100vw - 24px);
    max-width: 380px;
    max-height: 60vh;
  }
  /* Forms: pills become full-width and easier to tap */
  .sf-pills { width: 100%; flex-wrap: wrap; }
  .sf-pill { flex: 1 1 auto; justify-content: center; min-height: 36px; }
  .sf-preview { padding: 12px 14px; }
  .sf-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .sf-actions > * { flex: 1 1 auto; min-height: 40px; }
  /* Pending/AI queue header: badges stack under title */
  .sched-queue-hd .sub { flex-basis: 100%; }
  /* Queue card rows on phone — actions go full-width, not 50/50 squish */
  .sched-qrow .q-source,
  .sched-fq-row .q-source { display: none; }
  .sched-qrow .q-acts button,
  .sched-fq-row .q-acts button { min-height: 40px; padding: 0 14px; }
}

/* ==========================================================================
   Phone fix: sched-grid 1fr column was expanding to mini-month's natural
   width (~642px) and clipping the right side. Force the 1fr to be a
   constrainable minmax(0,1fr) so the rail shrinks to fit, and make the
   mini-grid cells flexible.
   ========================================================================== */
@media (max-width: 900px) {
  .sched-grid { grid-template-columns: minmax(0, 1fr); }
  .sched-rail,
  .sched-rail-block { min-width: 0; max-width: 100%; }
  .mini-month { width: 100%; max-width: 100%; min-width: 0; }
  .mini-grid { width: 100%; min-width: 0; }
  .mini-grid .d,
  .mini-grid .dow { min-width: 0; overflow: hidden; }
}
@media (max-width: 640px) {
  /* Tighter mini-month on small phones so all 7 days fit comfortably */
  .mini-grid { font-size: 11px; gap: 1px; }
  .mini-grid .d { padding: 6px 2px; min-height: 32px; }
  .mini-grid .dow { font-size: 9px; padding: 4px 2px; }
  .sched-rail-block { padding: 12px; }
}