/*
 * Core collection workspaces
 *
 * Equipment, projects, and work orders all use the same operational rhythm:
 * context first, controls second, then an even record grid.  The selectors
 * intentionally stop at the four core screens so specialised modules keep
 * their own layouts.
 */

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks, #screen-schedule) {
  --collection-card-radius: 22px;
  --collection-space: clamp(12px, 2vw, 28px);
  --collection-line: color-mix(in srgb, var(--line, #e4ebf1) 92%, #b8cad8);
  min-width: 0;
}

/* Admin/superadmin-only bulk-delete action bar (Equipment + Work Orders) */
.bulk-delete-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 12px 0;
  padding: 10px 14px;
  background: var(--coral-soft, rgba(255,107,87,.14));
  border: 1px solid var(--coral, #ff6b57);
  border-radius: 14px;
  color: var(--ink, #1f2d3d);
  font-size: 13px;
  font-weight: 700;
}
.bulk-delete-bar__actions {
  display: flex;
  gap: 8px;
}
.bulk-delete-bar__select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 0 0 auto;
}
.bulk-delete-bar__select-all input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--coral, #ff6b57);
  cursor: pointer;
}
.bulk-select-checkbox {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-inline-end: 4px;
  accent-color: var(--coral, #ff6b57);
  cursor: pointer;
}

/* Work Orders month calendar — count of work orders per day, click a day
   to filter the list. Sits directly under the header. */
:is(#screen-all-tasks, #screen-schedule) .tasks-calendar {
  margin: 8px 12px 0;
  padding: 8px 10px 9px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e4ebf1);
  border-radius: 14px;
  box-shadow: var(--shadow-card, 0 10px 24px rgba(52,79,103,.065));
}

@media (min-width: 769px) {
  :is(#screen-all-tasks, #screen-schedule) .tasks-calendar {
    max-width: 480px;
    margin-inline: auto;
  }
}

:is(#screen-all-tasks, #screen-schedule) .tasks-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

:is(#screen-all-tasks, #screen-schedule) .tasks-calendar__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  text-align: center;
}

:is(#screen-all-tasks, #screen-schedule) .tasks-calendar__title strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink, #1f2d3d);
}

#screen-all-tasks .tasks-calendar__clear {
  border: 0;
  background: none;
  color: var(--coral, #ff6b57);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

/* ── Work Orders month-grid calendar ─────────────────────────────────
   A real calendar grid (like any calendar app) instead of a Gantt for
   this screen — Schedule keeps its Gantt (.tasks-gantt, untouched below).
   Each day is a button; a count badge + up to 3 colored dots per day,
   click opens the day detail panel below. */
:is(#screen-all-tasks, #screen-schedule) .tcal-month-wrap { margin-top: 8px; }

:is(#screen-all-tasks, #screen-schedule) .tcal-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 4px;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-weekdays span {
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-muted, #9aa9b6);
}

:is(#screen-all-tasks, #screen-schedule) .tcal-month-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  aspect-ratio: 1 / 1;
  min-height: 40px;
  padding: 3px 2px 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--surface-soft, #f5f8fb);
  color: var(--ink, #1f2d3d);
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell--empty {
  background: none;
  cursor: default;
  pointer-events: none;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell.is-weekend { background: color-mix(in srgb, var(--surface-soft, #f5f8fb) 70%, #fff3f0); }
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell:hover { background: var(--surface-blue, #eef5fa); }
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell.is-today {
  border-color: var(--navy, #426482);
  box-shadow: inset 0 0 0 1px var(--navy, #426482);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell.is-today .tcal-month-daynum {
  color: var(--navy, #426482);
  font-weight: 900;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell.is-selected {
  background: var(--navy, #426482);
  border-color: var(--navy, #426482);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell.is-selected .tcal-month-daynum,
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell.is-selected .tcal-month-count { color: #fff; }
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell.has-items { font-weight: 700; }

:is(#screen-all-tasks, #screen-schedule) .tcal-month-daynum { font-size: 11px; font-weight: 700; line-height: 1; }
:is(#screen-all-tasks, #screen-schedule) .tcal-month-count {
  position: absolute;
  top: 2px;
  right: 3px;
  min-width: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--navy, #426482);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell.is-selected .tcal-month-count { background: rgba(255, 255, 255, .25); }

:is(#screen-all-tasks, #screen-schedule) .tcal-month-chips {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 6px;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-chip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-more {
  font-size: 7px;
  font-weight: 800;
  color: var(--ink-muted, #9aa9b6);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-month-cell.is-selected .tcal-month-more { color: rgba(255, 255, 255, .8); }

/* ── Day detail modal ─────────────────────────────────────────────── */
.tcal-day-box { max-width: 420px; }
.tcal-day-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
  margin: 10px 0;
}
.tcal-day-empty { padding: 20px; text-align: center; font-size: 12.5px; color: var(--ink-muted, #9aa9b6); }
.tcal-day-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--surface-soft, #f5f8fb);
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s ease;
}
.tcal-day-item:hover { background: var(--surface-blue, #eef5fa); }
/* Expanded variant (Work Orders day panel): stacks a detail line — project/
   equipment context, date span, priority, assignees — under the main row
   instead of showing only the truncated title + status. */
.tcal-day-item--expanded { flex-direction: column; align-items: stretch; gap: 4px; }
.tcal-day-item__row { display: flex; align-items: center; gap: 8px; }
.tcal-day-item__detail {
  padding-inline-start: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-muted, #9aa9b6);
}
.tcal-day-item__dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }
.tcal-day-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #1f2d3d);
}
/* Schedule's day panel adds a project/equipment context subline under
   each item's label — .tcal-day-item__main wraps both lines so the
   status badge still aligns to the row's vertical center. */
.tcal-day-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tcal-day-item__main .tcal-day-item__label { flex: initial; }
.tcal-day-item__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted, #9aa9b6);
}
.tcal-day-item__status {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tcal-day-item__status--start { background: color-mix(in srgb, #059669 16%, transparent); color: #059669; }
.tcal-day-item__status--end { background: color-mix(in srgb, #dc453f 14%, transparent); color: #dc453f; }
.tcal-day-item__status--mid { background: color-mix(in srgb, #0284c7 14%, transparent); color: #0284c7; }
.tcal-day-item__status--both { background: color-mix(in srgb, #7c3aed 15%, transparent); color: #7c3aed; }
.tcal-day-item__done {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  color: #059669;
}

/* Gantt-style work order calendar — one row per work order, a bar spanning
   its start→due days. Wide by design (a day column per day of the month),
   so it scrolls horizontally on narrow screens rather than shrinking days
   into illegible slivers. */
:is(#screen-all-tasks, #screen-schedule) .tasks-gantt {
  max-width: none !important;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-scroll {
  margin-top: 8px;
  max-height: min(64vh, 620px);
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line, #e4ebf1);
  border-radius: 10px;
  /* Keep the scrollbars visible and grabbable at all times (touch and
     desktop) instead of relying on the OS's auto-hiding overlay style,
     which made it unclear the Gantt could be scrolled at all. */
  scrollbar-width: auto;
  scrollbar-color: var(--navy, #426482) var(--surface-soft, #f5f8fb);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-scroll::-webkit-scrollbar-track {
  background: var(--surface-soft, #f5f8fb);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-scroll::-webkit-scrollbar-thumb {
  background: var(--navy, #426482);
  border-radius: 6px;
  border: 2px solid var(--surface-soft, #f5f8fb);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--navy-dark, #2f4a63);
}
/* The header row must stay pinned to the top of the scroll box (not just
   the page) now that the box scrolls vertically on its own. */
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-row--header {
  position: sticky;
  top: 0;
  z-index: 3;
}

@media (max-width: 640px) {
  :is(#screen-all-tasks, #screen-schedule) .tcal-gantt-scroll {
    max-height: min(56vh, 520px);
  }
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-grid {
  min-width: max-content;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-row {
  display: grid;
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid var(--line, #e4ebf1);
  cursor: pointer;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-row:hover {
  background: var(--surface-blue, #edf4fa);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-row--header {
  cursor: default;
  background: var(--surface-soft, #f5f8fb);
  min-height: 26px;
  position: sticky;
  top: 0;
  z-index: 1;
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-row--header:hover { background: var(--surface-soft, #f5f8fb); }

:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink, #1f2d3d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--line, #e4ebf1);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-row:not(.tcal-gantt-row--header) .tcal-gantt-label {
  background: var(--surface, #fff);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-row:hover .tcal-gantt-label {
  background: var(--surface-blue, #edf4fa);
}

:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-daycell {
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--ink-muted, #9aa9b6);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-daycell.is-weekend {
  color: var(--coral, #ff6b57);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-daycell.is-today {
  color: var(--navy, #16324f);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The bar itself: rounded + a bright inset edge on whichever side is a
   REAL start/end (has-start / has-end) — a bar clipped at the edge of the
   visible month (spilling from last month or into next month) stays flat
   and unrounded on that side, so it visually reads as "continues off
   screen" rather than falsely looking like it starts or ends here. */
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-bar {
  display: block;
  height: 14px;
  border-radius: 3px;
  opacity: .92;
  box-shadow: 0 1px 3px rgba(20, 40, 60, .18);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-bar.has-start {
  border-radius: 7px 3px 3px 7px;
  box-shadow: 0 1px 3px rgba(20, 40, 60, .18), inset 3px 0 0 rgba(255, 255, 255, .95);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-bar.has-end {
  border-radius: 3px 7px 7px 3px;
  box-shadow: 0 1px 3px rgba(20, 40, 60, .18), inset -3px 0 0 rgba(255, 255, 255, .95);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-bar.has-start.has-end {
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(20, 40, 60, .18), inset 3px 0 0 rgba(255, 255, 255, .95), inset -3px 0 0 rgba(255, 255, 255, .95);
}
:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-bar.is-done {
  opacity: .55;
}

:is(#screen-all-tasks, #screen-schedule) .tcal-gantt-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-muted, #9aa9b6);
}

/* Gantt grid dims briefly while a tab/month switch is loading data (the
   Routine tab's first load is a real network request) instead of jumping
   straight from old content to new with no transition. */
#screen-schedule .tcal-gantt-grid.is-loading {
  opacity: .35;
  pointer-events: none;
  transition: opacity .12s ease;
}

/* ── Schedule screen hero ─────────────────────────────────────────── */
#screen-schedule {
  --sched-space: clamp(12px, 2vw, 24px);
}
#screen-schedule .sched-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: var(--sched-space) var(--sched-space) 0;
  padding: 20px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--navy-dark, #0f2438), var(--navy, #16324f));
  color: #fff;
  box-shadow: 0 16px 34px rgba(20, 40, 60, .18);
}
#screen-schedule .sched-hero__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  margin-bottom: 4px;
}
#screen-schedule .sched-hero__copy h1 {
  margin: 0 0 4px;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
}
#screen-schedule .sched-hero__copy p {
  margin: 0;
  max-width: 460px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}
#screen-schedule .sched-hero__stats {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}
#screen-schedule .sched-hero__stat {
  flex-shrink: 0;
  text-align: center;
  min-width: 84px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
}
#screen-schedule .sched-hero__stat strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}
#screen-schedule .sched-hero__stat span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}
#screen-schedule #sched-today {
  color: var(--ink, #1f2d3d);
}

/* ── Toolbar: search + status filter + expand/collapse-all ─────────── */
#screen-schedule .sched-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px var(--sched-space) 0;
  padding: 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--collection-line, #e4ebf1);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(45, 73, 96, .06);
}
#screen-schedule .sched-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 0;
  padding: 0 12px;
  min-height: 42px;
  background: var(--surface-soft, #f5f8fb);
  border: 1px solid color-mix(in srgb, var(--collection-line, #e4ebf1) 84%, #9fb8cc);
  border-radius: 12px;
  color: var(--ink-muted, #9aa9b6);
}
#screen-schedule .sched-search svg { flex-shrink: 0; width: 15px; height: 15px; }
#screen-schedule .sched-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: 13px;
  color: var(--ink, #1f2d3d);
}
#screen-schedule .sched-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#screen-schedule .sched-select {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--collection-line, #e4ebf1) 84%, #9fb8cc);
  border-radius: 12px;
  background: var(--surface-soft, #f5f8fb);
  color: var(--ink, #1f2d3d);
  font-size: 12.5px;
  font-weight: 700;
}
#screen-schedule .btn-chip {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--collection-line, #e4ebf1) 84%, #9fb8cc);
  border-radius: 12px;
  background: var(--surface-blue, #eef5fa);
  color: var(--navy, #426482);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
#screen-schedule .btn-chip:hover {
  background: var(--navy, #426482);
  color: #fff;
}

/* Legend row explaining the bar-edge effect up front. */
#screen-schedule .sched-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 4px 12px;
  margin-top: 2px;
  border-bottom: 1px solid var(--line, #e4ebf1);
}
#screen-schedule .sched-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft, #64748b);
}
#screen-schedule .sched-legend__swatch {
  width: 20px;
  height: 8px;
  border-radius: 4px;
  background: var(--navy, #16324f);
}
#screen-schedule .sched-legend__swatch--start {
  border-radius: 4px 1px 1px 4px;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .95);
}
#screen-schedule .sched-legend__swatch--end {
  border-radius: 1px 4px 4px 1px;
  box-shadow: inset -2px 0 0 rgba(255, 255, 255, .95);
}
#screen-schedule .sched-legend__swatch--done {
  opacity: .5;
}
#screen-schedule .sched-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy, #16324f);
}
#screen-schedule .sched-legend__dot--project { background: #0f2438; }
#screen-schedule .sched-legend__dot--equipment { background: #0284c7; }
#screen-schedule .sched-legend__dot--task { background: #7c3aed; }

/* ── Hierarchical tree rows: Project → Equipment → Work Order ──────── */
#screen-schedule .tcal-gantt-grid--tree .tcal-gantt-row.sched-row {
  cursor: pointer;
}
#screen-schedule .sched-tree-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: calc(10px + var(--sched-indent, 0) * 20px) !important;
}
#screen-schedule .sched-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 10px;
  color: var(--ink-muted, #9aa9b6);
  cursor: pointer;
}
#screen-schedule .sched-toggle--spacer { cursor: default; }
#screen-schedule .sched-node-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
#screen-schedule .sched-node-dot--project { background: #0f2438; width: 9px; height: 9px; }
#screen-schedule .sched-node-dot--equipment { background: #0284c7; }
#screen-schedule .sched-node-dot--task { background: #7c3aed; }
#screen-schedule .sched-tree-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#screen-schedule .sched-row--project .sched-tree-text {
  font-weight: 800;
  color: var(--ink, #1f2d3d);
}
#screen-schedule .sched-row--equipment .sched-tree-text {
  font-weight: 700;
  color: var(--ink-soft, #4a5b6c);
}
#screen-schedule .sched-row--task .sched-tree-text {
  font-weight: 500;
  color: var(--ink-muted, #6b7c8c);
  font-size: 12px;
}
#screen-schedule .sched-row--project {
  background: color-mix(in srgb, var(--surface-blue, #eef5fa) 55%, transparent);
}
#screen-schedule .sched-child-count {
  flex-shrink: 0;
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--navy, #426482) 12%, transparent);
  color: var(--navy, #426482);
  font-size: 9.5px;
  font-weight: 800;
  text-align: center;
}
#screen-schedule .tcal-gantt-bar--empty {
  display: none;
}

@media (max-width: 640px) {
  #screen-schedule .sched-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  #screen-schedule .sched-hero__stats {
    align-self: stretch;
    justify-content: space-between;
  }
  #screen-schedule .sched-hero__stat {
    flex: 1;
    min-width: 0;
    padding: 8px 6px;
  }
  #screen-schedule .sched-hero__stat strong { font-size: 18px; }
  #screen-schedule .sched-toolbar { margin-inline: 8px; }
  /* Narrower label column + day columns on phones so the Gantt still
     shows several days at once instead of one and a half. */
  #screen-schedule .tcal-gantt-label { font-size: 10.5px; padding: 4px 6px; }
  #screen-schedule .sched-tree-label { padding-left: calc(6px + var(--sched-indent, 0) * 14px) !important; }
  #screen-schedule .sched-tree-text { font-size: 11px; }
}

@media (min-width: 769px) {
  #screen-schedule .sched-hero,
  #screen-schedule .sched-toolbar,
  #screen-schedule .tasks-gantt {
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* Container queries track the available workspace, rather than the device
   viewport. This keeps a sidebar from squeezing a desktop card grid. */
:is(#screen-main, #screen-projects, #screen-all-tasks) .collection-panel {
  width: min(100%, 1460px) !important;
  margin-inline: auto !important;
  padding: 0 var(--collection-space) calc(30px + var(--nav-h)) !important;
  overflow-x: clip;
  container-type: inline-size;
  container-name: collection-workspace;
}

#screen-tasks .pg-scroll-area {
  width: min(100%, 1460px);
  min-width: 0;
  margin-inline: auto;
  padding: 0 var(--collection-space) calc(30px + var(--nav-h));
  overflow-x: clip;
  container-type: inline-size;
  container-name: task-board;
}

/* Status tabs are a compact switcher on wide screens and a native horizontal
   rail on a phone.  Each item has the same visual weight on desktop. */
:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-schedule) .collection-tabs {
  width: min(100%, 1460px);
  min-height: 54px;
  margin: 10px auto 0;
  padding: 6px;
  gap: 6px;
  overflow-x: auto;
  background: color-mix(in srgb, var(--surface, #fff) 93%, var(--surface-blue, #eef5fa));
  border: 1px solid var(--collection-line);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(45, 73, 96, .07);
  scrollbar-width: none;
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-schedule) .collection-tabs::-webkit-scrollbar { display: none; }

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-schedule) .collection-tabs .pg-tab-btn {
  min-height: 40px;
  min-width: max-content;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-schedule) .collection-tabs .pg-tab-btn.active {
  color: #fff;
  background: var(--navy, #426482);
  border-color: var(--navy, #426482);
  box-shadow: 0 7px 15px rgba(54, 82, 108, .16);
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-schedule) .collection-tabs .pg-tab-count {
  min-width: 20px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-schedule) .collection-tabs .pg-tab-btn.active .pg-tab-count {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* Context stays recognisable but is kept visually tied to the toolbar and
   results below it. */
:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-context {
  min-width: 0;
  min-height: 172px;
  margin: 14px 0 0;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 26px;
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-context__copy { min-width: 0; }

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-context__title {
  max-width: min(100%, 700px);
  overflow-wrap: anywhere;
  font-size: clamp(25px, 3vw, 34px);
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-context__description {
  max-width: min(100%, 680px);
  overflow-wrap: anywhere;
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-workspace__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 12px;
  margin: 16px 0 18px;
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-workspace__results {
  display: grid;
  min-width: 0;
  gap: 14px;
}

/* Toolbars deliberately use a grid so inputs cannot grow beyond their track
   or push an icon/select outside a narrow phone viewport. */
:is(#screen-main, #screen-projects, #screen-all-tasks) .collection-toolbar {
  min-width: 0;
  min-height: 68px;
  margin: 0 !important;
  padding: 10px !important;
  background: var(--surface, #fff);
  border: 1px solid var(--collection-line);
  border-radius: var(--collection-card-radius);
  box-shadow: 0 8px 22px rgba(45, 73, 96, .07);
}

#screen-main .collection-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#screen-projects .collection-toolbar { display: block; }

#screen-all-tasks .collection-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(168px, 270px);
  align-items: center;
}

:is(#screen-main, #screen-projects, #screen-all-tasks) .collection-toolbar .search-box {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding-inline: 14px;
  background: var(--surface-soft, #f5f8fb);
  border-color: color-mix(in srgb, var(--collection-line) 84%, #9fb8cc);
  border-radius: 15px;
}

:is(#screen-main, #screen-projects, #screen-all-tasks) .collection-toolbar .search-box input {
  min-width: 0;
  font-size: 13px;
}

:is(#screen-main, #screen-projects, #screen-all-tasks) .collection-toolbar .filter-select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  border-radius: 15px;
}

#screen-main .collection-toolbar .filter-toggle-btn {
  width: 46px;
  height: 46px;
  min-height: 46px;
  margin: 0;
  border-radius: 15px;
  color: var(--navy, #426482);
  background: var(--surface-blue, #eef5fa);
}

#screen-main .collection-toolbar .filter-toggle-btn:hover,
#screen-main .collection-toolbar .filter-toggle-btn[aria-expanded='true'] {
  color: #fff;
  background: var(--navy, #426482);
}

#screen-main .collection-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0 !important;
  padding: 12px !important;
  background: var(--surface-blue, #eef5fa);
  border: 1px solid color-mix(in srgb, var(--collection-line) 86%, #b6cbdb);
  border-radius: 18px;
  box-shadow: none;
}

#screen-main .collection-filters.hidden { display: none; }

#screen-main .collection-filters .filter-select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border-radius: 13px;
}

/* Completion summaries form one deliberate component, rather than three
   unrelated cells.  The central completion state scales safely in both LTR
   and RTL. */
:is(#screen-all-tasks, #screen-tasks) .collection-stats {
  display: grid;
  grid-template-columns: minmax(120px, .78fr) minmax(200px, 1.5fr) minmax(120px, .78fr);
  min-width: 0;
  margin: 0 !important;
  padding: 8px !important;
  gap: 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--collection-line);
  border-radius: var(--collection-card-radius);
  box-shadow: 0 8px 22px rgba(45, 73, 96, .07);
}

:is(#screen-all-tasks, #screen-tasks) .collection-stats .pg-stat-cell {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 76px;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--collection-line) 78%, #b8ccda) !important;
  border-radius: 15px;
  background: var(--surface-soft, #f5f8fb);
  box-shadow: none;
}

:is(#screen-all-tasks, #screen-tasks) .collection-stats .pg-stat-cell:nth-child(2) {
  gap: 7px;
  background: color-mix(in srgb, var(--surface-blue, #eef5fa) 78%, #fff);
}

:is(#screen-all-tasks, #screen-tasks) .collection-stats .pg-stat-num {
  overflow: hidden;
  color: var(--navy, #426482);
  font-size: clamp(22px, 2vw, 28px);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

:is(#screen-all-tasks, #screen-tasks) .collection-stats .pg-stat-lbl {
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#screen-all-tasks, #screen-tasks) .collection-stats .progress-wrap {
  width: 100%;
  min-width: 0;
  height: 7px !important;
  margin: 0 !important;
}

:is(#screen-all-tasks, #screen-tasks) .collection-stats .progress-bar { min-width: 0; }

:is(#screen-all-tasks, #screen-tasks) .collection-stats [id$='pct-label'] {
  min-width: 0;
  color: var(--navy, #426482) !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

/* The equipment-specific work order screen keeps summary and team in the
   same scrolling workspace as the contextual heading.  The first selector
   also styles the short moment before the composer creates its control group. */
#screen-tasks .pg-scroll-area > :is(.collection-stats, .members-section),
#screen-tasks .page-workspace__controls > :is(.collection-stats, .members-section) {
  width: 100%;
  margin: 0 !important;
}

#screen-tasks .pg-scroll-area > .members-section,
#screen-tasks .page-workspace__controls > .members-section {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  gap: 12px;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 1px solid var(--collection-line);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(45, 73, 96, .06);
}

#screen-tasks #tasks-members-list { min-width: 0; }

#screen-tasks #tasks-members-list .member-grid {
  display: flex;
  min-width: 0;
  padding: 0;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

#screen-tasks #tasks-members-list .member-grid::-webkit-scrollbar { display: none; }

#screen-tasks #tasks-members-list .member-card {
  min-width: 0;
  flex: 0 0 min(250px, 62%);
  padding: 8px 10px;
  border-radius: 13px;
  box-shadow: none;
}

#screen-tasks #tasks-members-list .member-card-avatar { width: 32px; height: 32px; }
#screen-tasks #tasks-members-list .member-empty { padding: 5px 0; text-align: start; }

/* Shared record grid.  Every card is allowed to grow for real data, but each
   row stretches evenly so a scan across the desktop feels ordered. */
:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .collection-list.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(1px, auto);
  align-items: stretch;
  min-width: 0;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 14px;
}

:is(#screen-main, #screen-projects) .record-grid > .pg-list-row {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 244px;
  height: 100%;
  gap: 13px;
  margin: 0;
  padding: 19px 18px 17px;
  overflow: hidden;
  border: 1px solid var(--collection-line);
  border-radius: var(--collection-card-radius);
  background: var(--surface, #fff);
  box-shadow: 0 8px 22px rgba(45, 73, 96, .07);
}

:is(#screen-main, #screen-projects) .record-grid > .pg-list-row::before { width: 3px; }

:is(#screen-main, #screen-projects) .record-grid .pg-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  order: 1;
  min-width: 0;
}

:is(#screen-main, #screen-projects) .record-grid .pg-row-title {
  min-width: 0;
  color: var(--ink, #22384a);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.38;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

:is(#screen-main, #screen-projects) .record-grid .pg-badge {
  align-self: start;
  max-width: 112px;
  padding: 5px 8px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
}

:is(#screen-main, #screen-projects) .record-grid .pg-row-meta {
  display: flex;
  align-content: flex-start;
  align-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 10px;
  gap: 6px 7px;
  overflow-wrap: anywhere;
  background: var(--surface-soft, #f5f8fb);
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.45;
}

:is(#screen-main, #screen-projects) .record-grid .pg-row-note {
  order: 3;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-soft, #657a8b);
  font-size: 11px;
  line-height: 1.45;
}

:is(#screen-main, #screen-projects) .record-grid .pg-row-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  order: 4;
  min-width: 0;
  margin-top: auto;
  padding-top: 3px;
  color: var(--ink-soft, #657a8b);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
}

:is(#screen-main, #screen-projects) .record-grid .pg-row-progress .progress-wrap { min-width: 0; }

#screen-projects .record-grid .pg-row-note { order: 2; }
#screen-projects .record-grid .pg-row-meta { order: 3; }

/* Work orders are content-forward cards: check state, compact information
   cloud, people, then destructive actions kept at the far edge. */
:is(#screen-all-tasks, #screen-tasks) .record-grid > .pg-task-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: start;
  min-width: 0;
  min-height: 176px;
  height: 100%;
  gap: 12px;
  margin: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--collection-line);
  border-radius: var(--collection-card-radius);
  background: var(--surface, #fff);
  box-shadow: 0 8px 22px rgba(45, 73, 96, .07);
}

:is(#screen-all-tasks, #screen-tasks) .record-grid > .pg-task-row::before { width: 3px; }

:is(#screen-all-tasks, #screen-tasks) .record-grid .pg-task-check {
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 10px;
}

:is(#screen-all-tasks, #screen-tasks) .record-grid .pg-task-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 10px;
}

:is(#screen-all-tasks, #screen-tasks) .record-grid .pg-task-heading {
  min-width: 0;
  color: var(--ink, #22384a);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.42;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

:is(#screen-all-tasks, #screen-tasks) .record-grid .pg-task-heading.done { color: var(--ink-soft, #657a8b); }

:is(#screen-all-tasks, #screen-tasks) .record-grid .pg-task-meta {
  display: flex;
  align-content: flex-start;
  min-width: 0;
  padding: 9px 10px;
  gap: 6px 7px;
  overflow-wrap: anywhere;
  background: var(--surface-soft, #f5f8fb);
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.42;
}

:is(#screen-all-tasks, #screen-tasks) .record-grid .pg-task-meta .pg-chip {
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#screen-all-tasks, #screen-tasks) .record-grid .avatar-stack {
  min-width: 0;
  margin-top: auto;
}

:is(#screen-all-tasks, #screen-tasks) .record-grid :is(.task-delete-btn, .task-return-delete-btn) {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
  border-radius: 11px;
  background: var(--surface-soft, #f5f8fb);
}

/* Loading, empty, and pager content span a complete grid row and therefore
   never appear as an accidental narrow card. */
a.pg-list-row,
a.linked-item,
a.pg-task-link {
  color: inherit;
  text-decoration: none;
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .collection-list > :is(.loading-state, .pg-loading, .card-pager) {
  grid-column: 1 / -1;
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .collection-list > :is(.loading-state, .pg-loading) {
  display: grid;
  place-content: center;
  min-height: 250px;
  gap: 12px;
  padding: 24px;
  color: var(--ink-soft, #657a8b);
  text-align: center;
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--surface-blue, #eef5fa));
  border: 1px dashed color-mix(in srgb, var(--collection-line) 78%, #9fb8cc);
  border-radius: var(--collection-card-radius);
}

#screen-main .collection-load-error {
  gap: 10px;
  color: var(--ink-soft, #657a8b);
}

#screen-main .collection-load-error strong {
  color: var(--ink, #22384a);
  font-size: 15px;
}

#screen-main .collection-load-error p {
  max-width: 36rem;
  margin: 0;
  text-align: center;
}

#screen-main .collection-load-error .btn { margin-top: 4px; }

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-workspace__results > .pg-empty {
  display: grid;
  place-content: center;
  min-height: 250px;
  gap: 8px;
  margin: 0;
  padding: 30px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--surface-blue, #eef5fa));
  border-color: color-mix(in srgb, var(--collection-line) 78%, #9fb8cc);
  border-radius: var(--collection-card-radius);
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .card-pager {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(90px, auto) minmax(96px, 1fr);
  align-items: center;
  min-height: 60px;
  gap: 10px;
  padding: 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--collection-line);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(45, 73, 96, .06);
}

:is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .card-pager-btn {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}

/* A viewport fallback covers browsers without container query support and,
   more importantly, resets legacy viewport-only 3-column rules while the
   sidebar has consumed a meaningful part of the available width. */
@media (min-width: 680px) {
  :is(#screen-main, #screen-projects) .collection-tabs .pg-tab-btn {
    flex: 1 1 0;
    justify-content: center;
  }

  :is(#screen-main, #screen-projects) .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  body.app-shell-sidebar-active:not(.app-shell-sidebar-collapsed) :is(#screen-main, #screen-projects) .record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-shell-sidebar-active:not(.app-shell-sidebar-collapsed) :is(#screen-all-tasks, #screen-tasks) .record-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@container collection-workspace (min-width: 680px) {
  :is(#screen-main, #screen-projects) .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container collection-workspace (min-width: 920px) {
  #screen-all-tasks .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@container collection-workspace (min-width: 1160px) {
  :is(#screen-main, #screen-projects) .record-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@container task-board (min-width: 920px) {
  #screen-tasks .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 680px) {
  :is(#screen-main, #screen-projects, #screen-all-tasks, #screen-schedule) .collection-tabs {
    width: auto;
    min-height: 50px;
    margin: 8px 12px 0;
    padding: 5px;
    border-radius: 16px;
  }

  :is(#screen-main, #screen-projects, #screen-all-tasks, #screen-schedule) .collection-tabs .pg-tab-btn {
    min-height: 38px;
    padding-inline: 12px;
  }

  :is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-context {
    min-height: 142px;
    margin-top: 10px;
    padding: 20px;
    border-radius: 22px;
  }

  :is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-context__title { font-size: 24px; }
  :is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-context__description { font-size: 12px; }

  #screen-all-tasks .collection-toolbar { grid-template-columns: minmax(0, 1fr); }
  #screen-main .collection-filters { grid-template-columns: minmax(0, 1fr); }

  :is(#screen-all-tasks, #screen-tasks) .collection-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(#screen-all-tasks, #screen-tasks) .collection-stats .pg-stat-cell { min-height: 68px; padding: 10px !important; }

  :is(#screen-all-tasks, #screen-tasks) .collection-stats .pg-stat-cell:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 64px;
  }

  #screen-tasks .pg-scroll-area > :is(.collection-stats, .members-section),
  #screen-tasks .page-workspace__controls > :is(.collection-stats, .members-section) { width: 100%; }

  #screen-tasks .pg-scroll-area > .members-section,
  #screen-tasks .page-workspace__controls > .members-section { grid-template-columns: 1fr; gap: 7px; }
  #screen-tasks #tasks-members-list .member-card { flex-basis: min(248px, 82vw); }

  :is(#screen-main, #screen-projects) .record-grid > .pg-list-row {
    min-height: 0;
    padding: 16px 15px;
    border-radius: 19px;
  }

  :is(#screen-all-tasks, #screen-tasks) .record-grid > .pg-task-row {
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    min-height: 0;
    gap: 9px;
    padding: 15px 14px;
    border-radius: 19px;
  }

  :is(#screen-all-tasks, #screen-tasks) .record-grid .pg-task-check { width: 28px; height: 28px; }
  :is(#screen-main, #screen-projects) .record-grid .pg-row-meta,
  :is(#screen-all-tasks, #screen-tasks) .record-grid .pg-task-meta { padding: 9px; }

  :is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .page-workspace__results > .pg-empty,
  :is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .collection-list > :is(.loading-state, .pg-loading) {
    min-height: 210px;
    padding: 22px 16px;
    border-radius: 19px;
  }
}

@media (max-width: 370px) {
  :is(#screen-main, #screen-projects, #screen-all-tasks) .collection-panel,
  #screen-tasks .pg-scroll-area { --collection-space: 10px; }

  :is(#screen-main, #screen-projects) .record-grid .pg-row-top { gap: 7px; }
  :is(#screen-main, #screen-projects) .record-grid .pg-badge { max-width: 88px; }
  :is(#screen-main, #screen-projects) .record-grid .pg-row-progress { grid-template-columns: minmax(0, 1fr); }

  :is(#screen-all-tasks, #screen-tasks) .record-grid > .pg-task-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  :is(#screen-all-tasks, #screen-tasks) .record-grid .task-return-delete-btn {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  :is(#screen-all-tasks, #screen-tasks) .record-grid .task-delete-btn {
    grid-column: 3;
    grid-row: 2;
  }

  :is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .card-pager {
    grid-template-columns: 1fr 1fr;
  }

  :is(#screen-main, #screen-projects, #screen-all-tasks, #screen-tasks) .card-pager-info { grid-column: 1 / -1; grid-row: 2; }
}

/* -------------------------------------------------------------------------
   Project Events screen — urgent notes/observations that alert the
   project manager and can be converted into a work order.
-------------------------------------------------------------------------- */
#screen-events .ev-card {
  border-radius: 16px;
}
.ev-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.ev-badge--urgent   { background: rgba(220,69,63,.14); color: var(--clr-danger, #dc453f); }
.ev-badge--note     { background: rgba(37,99,235,.12); color: #2563eb; }
.ev-badge--open     { background: rgba(217,119,6,.14); color: #d97706; }
.ev-badge--converted{ background: rgba(22,163,74,.14); color: #16a34a; }
.ev-badge--dismissed{ background: var(--surface-soft, #f4f7fa); color: var(--clr-text-muted, #68788c); }