/* ==========================================================
   AGX Schedule — Outlook-style monthly calendar layout
   Phase 1 — local persistence only.
   ========================================================== */

.sch-page {
  display: flex;
  gap: 14px;
  align-items: stretch;
  /* Fixed height (not min-height) so the sidebar list can actually
     scroll. min-height let the sidebar grow to fit all jobs, which
     defeated the inner overflow-y:auto. */
  height: calc(100vh - 200px);
  min-height: 480px;
}

/* ─── Sidebar — in-progress jobs ─────────────────────────── */
.sch-sidebar {
  width: 280px;
  flex: 0 0 280px;
  background: var(--surface, #181820);
  border: 1px solid var(--border, #2e3346);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sch-sidebar-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #2e3346);
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.10), rgba(139, 92, 246, 0.06));
}
.sch-sidebar-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text, #e4e6f0);
}
.sch-sidebar-sub {
  font-size: 10px;
  color: var(--text-dim, #888);
  margin-top: 2px;
}
.sch-sidebar-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #2e3346);
}
.sch-sidebar-search input {
  width: 100%;
  background: var(--card-bg, #0f0f1e);
  color: var(--text, #e4e6f0);
  border: 1px solid var(--border, #2e3346);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
}
.sch-sidebar-search input:focus {
  outline: none;
  border-color: rgba(79, 140, 255, 0.6);
}
/* Status filter pill bar — multi-select toggles. Pills wrap to a
   second line on narrow viewports rather than overflowing. */
.sch-sidebar-status-bar {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #2e3346);
}
.sch-sidebar-status-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #888);
  margin-bottom: 6px;
}
.sch-sidebar-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sch-status-pill {
  background: transparent;
  border: 1px solid var(--border, #2e3346);
  color: var(--text-dim, #aaa);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.sch-status-pill:hover {
  border-color: rgba(79, 140, 255, 0.5);
  color: var(--text, #e4e6f0);
}
.sch-status-pill.active {
  background: rgba(79, 140, 255, 0.18);
  border-color: rgba(79, 140, 255, 0.6);
  color: #4f8cff;
}

.sch-sidebar-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sch-sidebar-empty {
  padding: 18px;
  font-size: 11px;
  color: var(--text-dim, #888);
  text-align: center;
}

/* Slim job card — single-line "JOB# Title" header + tight bottom
   meta row. ~40-45px per card vs the old ~70-80px so ~2x as many
   visible at once. Title truncates with ellipsis (single-line)
   rather than the old two-line clamp. */
.sch-job-card {
  background: var(--card-bg, #0f0f1e);
  border: 1px solid var(--border, #2e3346);
  border-left: 3px solid var(--job-color, #4f8cff);
  border-radius: 5px;
  padding: 5px 8px;
  cursor: grab;
  transition: border-color 0.12s, transform 0.12s;
  user-select: none;
}
.sch-job-card:hover {
  border-color: rgba(79, 140, 255, 0.6);
  transform: translateX(1px);
}
.sch-job-card:active { cursor: grabbing; }
.sch-job-card.dragging {
  opacity: 0.4;
}
.sch-job-card-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sch-job-card-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--job-color, #4f8cff);
  letter-spacing: 0.4px;
  flex: 0 0 auto;
}
.sch-job-card-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text, #e4e6f0);
  line-height: 1.25;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sch-job-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  font-size: 9px;
  color: var(--text-dim, #888);
  font-family: 'SF Mono', Consolas, monospace;
}
.sch-job-card-pct {
  color: #34d399;
}

/* ─── Calendar wrapper ───────────────────────────────────── */
.sch-cal-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface, #181820);
  border: 1px solid var(--border, #2e3346);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}
.sch-cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #2e3346);
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.06), rgba(139, 92, 246, 0.04));
  flex-wrap: wrap;
}
.sch-cal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sch-cal-month {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #e4e6f0);
  margin: 0 8px;
  min-width: 160px;
  text-align: center;
}
.sch-btn {
  background: var(--card-bg, #0f0f1e);
  color: var(--text, #e4e6f0);
  border: 1px solid var(--border, #2e3346);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.sch-btn:hover {
  border-color: rgba(79, 140, 255, 0.5);
  background: rgba(79, 140, 255, 0.08);
}
.sch-btn-primary {
  background: linear-gradient(135deg, #4f8cff, #6a76d9);
  border-color: transparent;
  color: #fff;
}
.sch-btn-primary:hover {
  filter: brightness(1.1);
}
.sch-btn-icon {
  width: 30px;
  padding: 5px 0;
  font-size: 14px;
  text-align: center;
}
.sch-toolbar-spacer { flex: 1; }
.sch-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim, #aaa);
  cursor: pointer;
  user-select: none;
}
.sch-toolbar-toggle input { margin: 0; cursor: pointer; }

/* ─── Month grid ─────────────────────────────────────────── */
/* Layout: 7-col grid for the day-of-week header, then 6 week rows
   stacked beneath. Each week row is its own positioned container
   so multi-day entry bars can absolute-position over it and span
   columns continuously. */
/* Sun-start week with weekend bookends. Sat / Sun cols are 0.5fr —
   half the width of weekday cols — so weekends visually frame the
   workweek rather than competing for equal space. The
   `.sch-cal-grid.sch-no-weekends` modifier collapses them to 0fr
   when the user toggles them off, which keeps the weekday columns
   the same width as in the 7-day view (no jarring re-flow). */
.sch-cal-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
  grid-auto-rows: auto;
  gap: 1px;
  background: var(--border, #2e3346);
  min-height: 0;
}
.sch-cal-grid.sch-no-weekends {
  grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 0fr;
}
.sch-cal-dow {
  background: var(--card-bg, #0f0f1e);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim, #888);
  text-align: center;
  padding: 3px 0;
}
/* Weekend day-of-week labels lighten so Mon-Fri reads as the focus.
   Index 1 = Sun (first), index 7 = Sat (last) in the Sun-start
   layout. */
.sch-cal-dow:nth-child(1),
.sch-cal-dow:nth-child(7) {
  color: rgba(255, 255, 255, 0.35);
}
.sch-cal-week-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
  gap: 1px;
  background: var(--border, #2e3346);
  position: relative;
  /* 78px tightens the rows further now that the week-summary lives
     in the toolbar instead of a footer strip — the calendar uses
     more of the workspace. */
  min-height: 78px;
  transition: background 0.15s;
}

/* Focus rail — slim vertical handle on the LEFT edge of each week.
   Click pins that week as the target for the toolbar's week-summary
   metrics. Always faintly visible (AGX green at low alpha) so the
   user can discover it; brightens on hover and recedes when its row
   becomes the focused one — the top/bottom border glow takes over
   the highlight job there. Overlaps the leftmost (Sunday) column so
   it sits inside the row's visual frame, not outside it. */
.sch-week-focus-rail {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 2px;
  width: 4px;
  border-radius: 2px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(27, 133, 65, 0.18);
  transition: background 0.15s, width 0.15s, box-shadow 0.15s;
  z-index: 5;
}
.sch-week-focus-rail-glow {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.sch-week-focus-rail:hover {
  background: rgba(27, 133, 65, 0.65);
  width: 5px;
}
.sch-cal-week-row.sch-week-focused .sch-week-focus-rail {
  background: #1B8541;
  width: 4px;
  box-shadow: 0 0 8px rgba(27, 133, 65, 0.7);
}
/* Focused-week highlight — full-width glowing AGX-green bars across
   the top and bottom of the row. Implemented as absolutely-positioned
   pseudo-elements so the bars sit ABOVE the day cells (z-index 4,
   above entry bars at z-index 1) and span edge-to-edge regardless of
   weekend collapse. The outer drop-shadow gives the soft bloom that
   matches the "glow" feel rather than a hard line. */
.sch-cal-week-row.sch-week-focused::before,
.sch-cal-week-row.sch-week-focused::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #1B8541;
  box-shadow:
    0 0 4px rgba(27, 133, 65, 0.9),
    0 0 12px rgba(27, 133, 65, 0.6),
    0 0 22px rgba(27, 133, 65, 0.35);
  z-index: 4;
  pointer-events: none;
  border-radius: 1px;
}
.sch-cal-week-row.sch-week-focused::before { top: 0; }
.sch-cal-week-row.sch-week-focused::after  { bottom: 0; }
/* Very faint AGX-green wash so the row reads as "selected" in
   addition to the glowing bars. Subtle — the borders do the work. */
.sch-cal-week-row.sch-week-focused {
  background: linear-gradient(90deg, rgba(27, 133, 65, 0.06) 0%, rgba(27, 133, 65, 0.02) 100%), var(--border, #2e3346);
}
body.light-mode .sch-week-focus-rail {
  background: rgba(27, 133, 65, 0.20);
}
body.light-mode .sch-week-focus-rail:hover {
  background: rgba(27, 133, 65, 0.65);
}
body.light-mode .sch-cal-week-row.sch-week-focused .sch-week-focus-rail {
  background: #1B8541;
  box-shadow: 0 0 8px rgba(27, 133, 65, 0.45);
}
body.light-mode .sch-cal-week-row.sch-week-focused {
  background: linear-gradient(90deg, rgba(27, 133, 65, 0.10) 0%, rgba(27, 133, 65, 0.02) 100%), var(--border, #d1d5db);
}
body.light-mode .sch-cal-week-row.sch-week-focused::before,
body.light-mode .sch-cal-week-row.sch-week-focused::after {
  box-shadow:
    0 0 4px rgba(27, 133, 65, 0.55),
    0 0 12px rgba(27, 133, 65, 0.35);
}
.sch-cal-grid.sch-no-weekends .sch-cal-week-row {
  grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 0fr;
}
.sch-cal-day {
  background: var(--surface, #181820);
  padding: 4px 5px;
  min-height: 78px;
  cursor: pointer;
  transition: background 0.12s, outline 0.12s;
  position: relative;
  overflow: hidden;
}
/* Weekend cells get a slightly muted background so the workweek
   reads as the visual primary. Applies whether or not "Show Sat/
   Sun" is on — when off, the cell just collapses to zero width. */
.sch-cal-day.sch-weekend {
  background: rgba(255, 255, 255, 0.012);
}
.sch-cal-day:hover {
  background: rgba(79, 140, 255, 0.04);
}
.sch-cal-day.sch-other-month {
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-dim, #555);
}
.sch-cal-day.sch-today {
  outline: 2px solid #4f8cff;
  outline-offset: -2px;
}
.sch-cal-day.sch-drop-target {
  background: rgba(79, 140, 255, 0.18);
  outline: 2px dashed #4f8cff;
  outline-offset: -2px;
}
.sch-cal-day-hidden {
  visibility: hidden;
}
.sch-cal-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #e4e6f0);
  display: block;
  line-height: 1;
}
.sch-cal-day.sch-other-month .sch-cal-day-num { color: var(--text-dim, #555); }
.sch-cal-day.sch-today .sch-cal-day-num {
  color: #4f8cff;
  font-weight: 700;
}

/* ─── Entry bars (multi-day continuous) ───────────────────
   Layered on top of the day cells using an absolutely-positioned
   container that spans the full week row. Each bar uses left+width
   percentages so it snaps to the underlying 7-col grid and stays
   aligned when the row resizes. */
.sch-cal-bars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  /* Bars live above the cells; clicks pass through the empty space
     to the day cells via pointer-events:none on this container,
     while the bars themselves re-enable pointer events. */
}
.sch-entry-bar {
  position: absolute;
  height: 16px;
  background: var(--entry-color, rgba(79, 140, 255, 0.9));
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 0 7px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-left: 2px solid rgba(255, 255, 255, 0.30);
  border-right: 2px solid rgba(0, 0, 0, 0.20);
  line-height: 16px;
  transition: filter 0.12s, transform 0.12s;
  pointer-events: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  /* Slight inset margin so the bar doesn't kiss the cell border. */
  margin-left: 2px;
}
.sch-entry-bar:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
  z-index: 5;
}
.sch-entry-bar.sch-entry-bar-done {
  opacity: 0.55;
  text-decoration: line-through;
}
.sch-entry-bar.sch-entry-bar-rolled {
  opacity: 0.55;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(255, 255, 255, 0.12) 4px, rgba(255, 255, 255, 0.12) 8px
  );
}
.sch-entry-bar-meta {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.85;
  margin-left: 4px;
}
/* Resize handle on the right edge of the LAST segment of an entry.
   Wide enough to grab without being precise; visible only on hover
   so quiet entries don't show clutter. */
.sch-entry-bar-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.45) 60%,
    rgba(255, 255, 255, 0.45) 100%
  );
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 2;
}
.sch-entry-bar:hover .sch-entry-bar-handle {
  opacity: 1;
}
.sch-entry-bar-label {
  /* So the bar text doesn't overflow into the handle area. */
  display: inline-block;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* While a resize-drag is active, dim the cursor everywhere on the
   page to ew-resize so the user knows they're in resize mode and
   the UI stays responsive when the cursor leaves the bar. */
body.sch-resizing,
body.sch-resizing * {
  cursor: ew-resize !important;
  user-select: none !important;
}

/* ─── Toolbar metric tiles ──────────────────────────────────
   Production metrics that used to live in a footer strip now sit
   inline in the calendar toolbar. Each tile = a small uppercase
   label over a value, separated by 1px dividers. Wraps onto a new
   line on narrow viewports rather than crushing. */
.sch-week-metrics {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin: 0 8px 0 14px;
  flex-wrap: wrap;
}
.sch-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}
.sch-metric:first-child { border-left: none; padding-left: 0; }
.sch-metric-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #888);
  line-height: 1.2;
}
.sch-metric-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #e4e6f0);
  font-family: 'SF Mono', Consolas, monospace;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
}
.sch-metric-val.sch-metric-val-rev { color: #34d399; }

/* Pinned-week indicator. When the user picks a specific week via
   the calendar's left-edge focus rail, the toolbar metrics get a
   subtle AGX-green accent so the link between rail → metrics is
   obvious. A thin green stripe on the left edge of the metric
   cluster + a 📌 emoji prefix on the "Week of" label. */
.sch-week-metrics.sch-week-metrics-pinned {
  position: relative;
  background: linear-gradient(90deg, rgba(27, 133, 65, 0.10) 0%, rgba(27, 133, 65, 0) 60%);
  border-radius: 4px;
  padding-left: 8px;
  margin-left: 6px;
  box-shadow: inset 3px 0 0 0 #1B8541;
}
.sch-week-metrics.sch-week-metrics-pinned .sch-metric:first-child {
  padding-left: 6px;
}
.sch-metric-pin {
  display: inline-block;
  font-size: 9px;
  margin-right: 2px;
  filter: drop-shadow(0 0 2px rgba(27, 133, 65, 0.6));
}
body.light-mode .sch-week-metrics.sch-week-metrics-pinned {
  background: linear-gradient(90deg, rgba(27, 133, 65, 0.10) 0%, rgba(27, 133, 65, 0) 60%);
  box-shadow: inset 3px 0 0 0 #1B8541;
}

/* Compact icon-style toggle for show/hide weekends. Replaces the
   old checkbox+label that was eating header space and rendering
   as block-level uppercase due to global label rules. */
.sch-btn.sch-btn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim, #aaa);
  background: var(--card-bg, #0f0f1e);
  border: 1px solid var(--border, #2e3346);
}
.sch-btn.sch-btn-toggle.active {
  background: rgba(79, 140, 255, 0.15);
  border-color: rgba(79, 140, 255, 0.4);
  color: #4f8cff;
}
.sch-btn.sch-btn-toggle:hover {
  filter: brightness(1.15);
}

/* ─── Entry editor modal ─────────────────────────────────── */
.sch-modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sch-modal-form label {
  font-size: 11px;
  color: var(--text-dim, #aaa);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: block;
  margin-bottom: 4px;
}
.sch-modal-form input,
.sch-modal-form select,
.sch-modal-form textarea {
  width: 100%;
  background: var(--card-bg, #0f0f1e);
  color: var(--text, #e4e6f0);
  border: 1px solid var(--border, #2e3346);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}
.sch-modal-form textarea { resize: vertical; min-height: 50px; }
.sch-crew-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: var(--card-bg, #0f0f1e);
  border: 1px solid var(--border, #2e3346);
  border-radius: 6px;
  min-height: 40px;
  max-height: 140px;
  overflow-y: auto;
}
.sch-crew-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2e3346);
  color: var(--text-dim, #aaa);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  user-select: none;
}
.sch-crew-pill:hover {
  border-color: rgba(79, 140, 255, 0.4);
}
.sch-crew-pill.selected {
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.85), rgba(139, 92, 246, 0.7));
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
/* Ghost pill — assigned to a user that's been deleted/deactivated.
   Striped so it reads as broken; clicking still removes it. */
.sch-crew-pill.sch-crew-pill-missing {
  background-image: repeating-linear-gradient(
    45deg, rgba(248, 113, 113, 0.55), rgba(248, 113, 113, 0.55) 4px,
    rgba(248, 113, 113, 0.30) 4px, rgba(248, 113, 113, 0.30) 8px
  );
  border-color: rgba(248, 113, 113, 0.6);
}
.sch-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Light-mode overrides. The tabs use the same surfaces as the rest of
   the app, so we mostly let var(--surface) etc. handle the swap. */
body.light-mode .sch-cal-day {
  background: #fff;
}
body.light-mode .sch-cal-day.sch-other-month {
  background: #f5f6f8;
}
body.light-mode .sch-cal-day.sch-weekend {
  background: #fafbfd;
}
body.light-mode .sch-cal-grid { background: #d6dae3; }