/* -----------------------------------------------
   SCHEDULING WORKSPACE (#1268)
   The /scheduling mode tabs render through the shared
   header .workspace-tabs chrome; only
   the pane frame and the canonical entry row are
   new here.

   Propshaft loads all CSS twice, so media queries
   MUST stay in this file next to the rules they
   override (same constraint as pages/hubs.css).
----------------------------------------------- */

.sched-workspace {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sched-pane {
  display: block;
  min-height: 0;
}

.sched-pane__loading {
  color: var(--text-3);
  font-size: 13px;
  padding: 24px 0;
}

.sched-pane__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  color: var(--text-3);
  text-align: center;
}
.sched-pane__empty-icon {
  display: block;
  font-size: 28px;
  opacity: 0.35;
  color: var(--text-3);
}
.sched-pane__empty-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-1);
  margin: 0;
}
.sched-pane__empty-body {
  font-size: 13px;
  margin: 0;
}
.sched-pane__empty-body .btn {
  margin-top: 12px;
}

/* --- My Day ------------------------------------ */

.sched-ledger {
  /* #7: a small floor so a near-empty pane doesn't collapse to one line —
     not a viewport-relative fill. The surface ends where its content ends. */
  min-height: 240px;
}
.sched-ledger--board {
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.sched-ledger__head {
  flex-shrink: 0;
}
.sched-ledger__count {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}
.sched-ledger__actions,
.sched-ledger__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.sched-ledger__actions {
  font-family: var(--font-ui);
}
.sched-ledger__body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.sched-ledger__body > .sched-cal,
.sched-ledger__body > .sched-page-layout {
  flex: 1;
  min-height: 0;
}
.sched-ledger__group {
  padding: 14px;
}
.sched-ledger__group + .sched-ledger__group {
  border-top: 1px solid var(--border);
}
.sched-ledger__quiet {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
}
/* Availability sections each own their "+ New", because a section that
   disappears when empty is one you cannot add the first row to. The action
   sits on the group's own rule, not on a band above it. */
.sched-availability__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sched-availability__group-head .ledger__group {
  flex: 1 1 auto;
  min-width: 0;
}
.sched-availability__group-head .btn-ghost-sm {
  flex-shrink: 0;
  margin-bottom: 10px;
}

.sched-myday__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.sched-myday__title {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0;
  color: var(--text-1);
}
.sched-myday__sub {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}
.sched-myday__sub .card-section-head__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--brass);
  background: var(--surface-hi);
  border-radius: 7px;
  font-size: 12px;
}
.sched-nav-btn--text {
  width: auto;
  font-size: 12px;
  padding: 0 10px;
}

.sched-myday__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 14px;
  margin: 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
}
.sched-myday__stat b {
  font-family: var(--font-mono);
  color: var(--text-1);
}
.sched-myday__basis {
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
}

/* [#1393 revision] My Day + My Route, side by side — the day schedule on the
   left, the route on the right, one pane. One elevated surface (the ledger
   itself) per the house rule — the route column is NOT a card-in-a-card, it's
   separated from the day column by a hairline only. Route column is
   admin/sales only; without it .sched-myday-split still just renders one
   column. */
.sched-myday-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 20px;
  padding: 14px;
}
.sched-myday-split__route {
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}
.sched-myday-split__route .route-salesperson {
  display: block;
  margin-bottom: 8px;
}

@media (max-width: 1024px) {
  .sched-myday-split {
    grid-template-columns: 1fr;
  }
  .sched-myday-split__route {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

.sched-myday__section {
  margin-bottom: 22px;
}
.sched-myday__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-1);
  margin: 0 0 2px;
}
.sched-myday__section-blurb,
.sched-myday__clear {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 8px;
}

/* --- Canonical entry row ----------------------- */

.sched-entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.sched-myday__timeline {
  flex: 1;
  position: relative;
  min-height: 112px;
  border: 1px solid var(--border-lo);
  border-radius: var(--card-radius);
  background: var(--surface);
}
/* No per-kind edge stripe on a timeline row: the row's own status pill
   carries its state, and a coloured edge is a second, weaker copy of it. */
.sched-entry {
  display: grid;
  grid-template-columns: 84px 1fr 150px 140px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.sched-entry:last-child {
  border-bottom: none;
}
.sched-entry--itinerary {
  grid-template-columns: 74px 18px minmax(0, 1fr) 132px auto;
  gap: 10px;
  min-height: 76px;
  padding: 12px 14px;
  border-bottom-color: var(--border-lo);
}
.sched-entry--itinerary:hover {
  background: color-mix(in srgb, var(--brass) 4%, var(--surface));
}
.sched-entry__marker {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  color: var(--brass);
  font-size: 7px;
}
.sched-entry__marker::before,
.sched-entry__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: calc(50% - 7px);
  transform: translateX(-50%);
  background: var(--border);
}
.sched-entry__marker::before { top: -12px; }
.sched-entry__marker::after { bottom: -12px; }
.sched-entry--itinerary:first-child .sched-entry__marker::before,
.sched-entry--itinerary:last-child .sched-entry__marker::after { display: none; }
.sched-entry--itinerary .sched-entry__when {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.sched-entry--itinerary .sched-entry__body {
  gap: 2px;
}
.sched-entry--itinerary .sched-entry__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}
.sched-entry--itinerary .sched-entry__sub {
  font-size: 11.5px;
}
.sched-entry--itinerary .sched-entry__kind {
  width: fit-content;
  margin-top: 3px;
  padding: 2px 6px;
  color: var(--text-2);
  background: var(--surface-hi);
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.sched-entry--itinerary .sched-entry__owner {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sched-entry--itinerary .sched-entry__owner i {
  color: var(--text-3);
  font-size: 10px;
}
/* Availability rows carry the Edit/Delete that used to live on the retired
   index pages, so those rows get a fifth column. Every other mode passes no
   actions and keeps the four-column grid above. */
.sched-availability .sched-entry {
  grid-template-columns: 84px 1fr 150px 140px auto;
}
.sched-entry__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.sched-entry__actions form {
  display: inline;
  margin: 0;
}
.sched-availability__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.sched-availability__pager-state {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.sched-entry__when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.sched-entry__allday {
  font-family: var(--font-ui);
  color: var(--text-3);
}
.sched-entry__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sched-entry__title {
  color: var(--text-1);
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sched-entry__title:hover {
  text-decoration: underline;
}
.sched-entry__sub {
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sched-entry__kind {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sched-entry__owner {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Muted-tint pills, matching the house .stage-pill family (light tint, tinted
   text) rather than saturated solid fills. The earlier contrast fix brightened
   the TEXT on a saturated ground, which made every pill shout — on a schedule
   the row's own content is the message and the pill is a qualifier.
   Only non-default states render one at all (see the entry partial). */
.sched-entry__status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  justify-self: start;
  background: var(--surface-hi);
  color: var(--text-2);
}
.sched-entry__status--info {
  background: #eff6ff;
  color: #1d4ed8;
}
.sched-entry__status--warn {
  background: #fffbeb;
  color: #b45309;
}
.sched-entry__status--success {
  background: #f0fdf4;
  color: #15803d;
}
.sched-entry__status--active {
  background: var(--brass-pill);
  color: var(--brass-lo);
}
.sched-entry__status--muted {
  background: var(--surface-hi);
  color: var(--text-2);
}
.sched-entry__status--neutral {
  background: var(--surface-hi);
  color: var(--text-2);
}
/* Keeps the row's status column aligned when a default-state row renders no
   pill, so the columns do not jump between rows. */
.sched-entry__status-empty {
  display: block;
}

@media (max-width: 768px) {
  .sched-myday__head {
    flex-direction: column;
    gap: 10px;
  }
  .sched-myday__basis {
    margin-left: 0;
  }
  .sched-entry {
    grid-template-columns: 66px 1fr;
    row-gap: 4px;
  }
  .sched-entry__owner,
  .sched-entry__status {
    grid-column: 2;
    justify-self: start;
  }
  .sched-entry--itinerary {
    grid-template-columns: 62px 16px minmax(0, 1fr);
    gap: 8px;
    min-height: 82px;
    padding: 12px 10px;
  }
  .sched-entry--itinerary .sched-entry__when {
    grid-column: 1;
    text-align: right;
  }
  .sched-entry--itinerary .sched-entry__marker {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  .sched-entry--itinerary .sched-entry__body,
  .sched-entry--itinerary .sched-entry__owner,
  .sched-entry--itinerary .sched-entry__status,
  .sched-entry--itinerary .sched-entry__status-empty {
    grid-column: 3;
  }
}

@media (max-width: 520px) {
  .sched-ledger__controls .schedule-page-controls .sched-view-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }
}

/* --- Install workspace -------------------------- */

.sched-install-ledger .sched-page-layout {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 0;
  overflow: hidden;
}
.sched-install-ledger .sched-page-layout--without-install-rail {
  grid-template-columns: minmax(0, 1fr);
}
.sched-install-ledger {
  /* The main shell is one viewport tall. Its 64px topbar plus 26px top and
     bottom content insets leave 117px outside this ledger; accounting for all
     three prevents the main pane from gaining a pointless 22px scrollbar. */
  height: calc(100dvh - 117px);
  min-height: 560px;
  max-height: calc(100dvh - 117px);
}
.sched-install-ledger .sched-cal > .sched-legend {
  display: none;
}
.sched-install-ledger .sched-empty {
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.sched-install-ledger .sched-cal--workspace-week .sched-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  flex-direction: column;
}
.sched-install-workspace-rail {
  display: flex;
  flex-direction: column;
  width: 300px;
  gap: 0;
  background: var(--surface);
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--border);
}
.sched-install-workspace-rail .panel {
  margin: 0;
  padding: 14px;
  border-top: 0;
  border-bottom: 1px solid var(--border);
}
.sched-install-workspace-rail .sched-needs-list,
.sched-install-workspace-rail .sched-blocked-list {
  gap: 0 !important;
}
.sched-install-workspace-rail .sched-needs-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}
.sched-install-workspace-rail .sched-needs-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sched-empty--designed {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  gap: 7px;
  color: var(--text-3);
  text-align: center;
}
.sched-empty--designed strong {
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 15px;
}
.sched-empty--designed > span:last-child {
  max-width: 300px;
  font-size: 12px;
}
.sched-empty__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  border: 1px solid var(--border-lo);
  border-radius: 50%;
  background: var(--surface-hi);
  color: var(--brass-lo);
  font-size: 15px;
}

.sched-ledger__context {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.sched-ledger__context-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--brass-soft);
  color: var(--brass-lo);
}
.sched-ledger__context strong,
.sched-ledger__context small {
  display: block;
}
.sched-ledger__context strong {
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 14px;
}
.sched-ledger__context small {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 11px;
}
.sched-ledger__quiet--designed {
  display: flex;
  min-height: 132px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.sched-ledger__quiet--designed i {
  color: var(--brass-lo);
  font-size: 16px;
}
.sched-install-workspace-rail .ledger__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 0;
  color: inherit;
  text-decoration: none;
}
.sched-install-workspace-rail .sched-needs-item > div,
.sched-install-workspace-rail .sched-blocked-item {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.sched-install-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.sched-install-rail__head .panel-title {
  margin: 0;
}
.sched-install-rail__row strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-size: 12px;
}
.sched-install-rail__row small,
.sched-install-rail__quiet {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
}
.sched-install-crew-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface-lo);
}
.sched-install-crew-legend .crew-pip,
.sched-install-day-list .crew-pip {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
}
.sched-install-day-list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Sales Visits workspace -------------------- */

.sched-sales-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.sched-sales-board {
  display: flex;
  min-width: 0;
  min-height: 0;
}
.sched-sales-board > .sched-cal {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.sched-sales-rail {
  width: 0;
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .sched-install-ledger {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .sched-install-ledger .sched-page-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(440px, 60vh) auto;
  }
  .sched-install-workspace-rail {
    width: auto;
  }
  .sched-install-workspace-rail .sched-needs-list {
    max-height: 360px;
  }
}

@media (max-width: 768px) {
  .sched-ledger__actions,
  .sched-ledger__controls {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .sched-ledger__controls .schedule-page-controls {
    width: 100%;
    flex-wrap: wrap;
  }
  .sched-install-ledger .sched-page-layout {
    display: block;
    overflow: visible !important;
  }
  .sched-cal--workspace-week > .sched-days,
  .sched-cal--workspace-week > .sched-body {
    display: none;
  }
  .sched-install-day-list {
    display: block;
  }
  .sched-cal--workspace-week {
    min-height: 0 !important;
    overflow: visible;
  }
  .sched-install-day {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    border-bottom: 1px solid var(--border-lo);
  }
  .sched-install-day__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 11px 8px;
    border-right: 1px solid var(--border-lo);
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
  }
  .sched-install-day__date strong {
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 18px;
  }
  .sched-install-day.is-today .sched-install-day__date {
    background: var(--brass-soft);
  }
  .sched-install-day__commitments {
    min-width: 0;
    padding: 7px 10px;
  }
  .sched-install-day__row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: center;
    gap: 5px 8px;
    min-width: 0;
    padding: 6px 0;
    color: var(--text-1);
    font-size: 12px;
    text-decoration: none;
  }
  .sched-install-day__row small {
    grid-column: 2;
    color: var(--text-3);
  }
  .sched-install-day__row.is-blocked {
    display: block;
    color: var(--text-2);
  }
  .sched-install-day-list__quiet {
    display: flex;
    min-height: 280px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 30px 16px;
    color: var(--text-3);
    font-size: 12px;
    text-align: center;
  }
  .sched-install-day-list__quiet strong {
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 15px;
  }
}

/* The Events and Blocked Dates forms, reached from the Availability pane.
   Promoted from inline max-width/padding on each page. */
.internal-event-form,
.internal-event-detail,
.blocked-date-form {
  max-width: 720px;
}
.internal-event-form,
.internal-event-detail {
  padding: 24px;
}