/* Le bloc :root historique a été retiré : il était intégralement redéfini
   par celui qui suit. Quatorze jetons morts qu'on lisait en cherchant une couleur. */

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

body.auth-locked {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

body.auth-locked .sidebar,
body.auth-locked .app-shell,
body.auth-locked .task-copilot-button,
body.auth-locked .task-copilot-panel {
  display: none;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  place-items: center;
  background: radial-gradient(circle at top left, rgba(23, 107, 105, 0.12), transparent 38%), var(--bg);
  padding: 22px;
}

body.auth-locked .auth-gate {
  display: grid;
}

.auth-card {
  display: grid;
  gap: 14px;
  width: min(390px, 100%);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(12, 25, 23, 0.18);
  padding: 24px;
}

.auth-card .brand-mark {
  width: 48px;
  height: 48px;
}

.auth-card h1 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
}

.auth-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
}

.auth-error {
  min-height: 18px;
  margin: 0;
  color: #c0392b;
  font-size: 13px;
  font-weight: 600;
}

button,
input,
select,
textarea {
  font: inherit;
}

.sidebar {
  background: #202826;
  color: #f7faf7;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand > div {
  min-width: 0;
}

.menu-toggle {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: #f0c56a;
  color: var(--ink);
  font-weight: 600;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: #b7c3be;
  margin-top: 3px;
}

.brand .brand-version {
  margin-top: 2px;
  color: #f0c56a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

.brand .brand-tagline {
  margin-top: 1px;
  font-size: 11px;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav-item,
.secondary-button,
.primary-button,
.icon-button {
  border: 0;
  cursor: pointer;
}

.nav-item {
  min-height: 42px;
  color: #dfe9e5;
  background: transparent;
  border-radius: 6px;
  text-align: left;
  padding: 0 12px;
}

.nav-item:hover,
.nav-item.is-active {
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.menu-collapsed {
  grid-template-columns: 92px minmax(0, 1fr);
}

body.menu-collapsed .sidebar {
  padding: 18px 10px;
  align-items: center;
}

body.menu-collapsed .brand {
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

body.menu-collapsed .brand > div,
body.menu-collapsed .nav,
body.menu-collapsed .sidebar-footer {
  display: none;
}

body.menu-collapsed .menu-toggle {
  margin-left: 0;
  width: 44px;
  height: 44px;
}

.app-shell {
  min-width: 0;
  padding: 26px;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--brand);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 28px;
}

h2 {
  font-size: 14px;
  margin-bottom: 12px;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.view-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: -8px 0 18px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.view-filters.is-hidden {
  display: none;
}

input,
select,
textarea {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 0 10px;
}

textarea {
  min-height: 96px;
  padding: 10px;
  resize: vertical;
}

#searchInput {
  width: min(300px, 34vw);
}

.primary-button {
  min-height: 40px;
  border-radius: 6px;
  background: var(--brand);
  color: white;
  padding: 0 16px;
  font-weight: 600;
}

.primary-button:hover {
  background: var(--brand-strong);
}

.secondary-button {
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  padding: 0 12px;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.link-button:hover {
  color: var(--brand-strong);
  text-decoration: underline;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.icon-action {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.icon-action svg,
.mini-remove svg,
.resource-metric svg,
.input-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.icon-action:hover {
  background: var(--surface-2);
}

.info-button {
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
}

.danger-button {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--danger);
}

.danger-button:hover {
  background: var(--surface-2);
}

.mini-edit-button {
  min-height: 26px;
  margin-left: 8px;
  border: 1px solid rgba(23, 107, 105, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--brand-strong);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
}

.mini-edit-button:hover {
  background: var(--panel);
}

.file-label input {
  display: none;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.summary-grid article,
.view,
.daily-grid > section,
.home-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.summary-grid article {
  padding: 16px;
}

.summary-grid span {
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}

.summary-grid strong {
  font-size: 20px;
}

.home-day-recap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 6px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  padding: 16px 18px;
}

.home-day-recap-section + .home-day-recap-section {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.home-day-recap-head {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr);
  margin-bottom: 12px;
}

.home-day-recap-head span,
.home-recap-block span {
  color: var(--brand);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-day-recap-head strong {
  color: var(--ink);
  display: block;
  font-size: 16px;
}

.home-day-recap-head p {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.home-day-recap-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.home-recap-card {
  background: rgba(247, 250, 249, 0.78);
  border: 1px solid rgba(23, 107, 105, 0.18);
  border-radius: 6px;
  padding: 12px;
}

.home-recap-title {
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.home-recap-title strong {
  color: var(--brand-strong);
  display: block;
  font-size: 14px;
}

.home-recap-title small {
  color: var(--muted);
}

.home-recap-block {
  margin-top: 9px;
}

.home-recap-block p {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recap-block p.is-muted {
  color: var(--muted);
  font-weight: 600;
}

.home-recap-empty {
  background: rgba(247, 250, 249, 0.78);
  border: 1px dashed rgba(23, 107, 105, 0.22);
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
  padding: 12px;
}

.home-week-card .home-recap-title strong {
  font-size: 14px;
}

.view {
  display: none;
  padding: 16px;
  box-shadow: var(--shadow);
}

#homeView {
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 14px;
}

.home-panel {
  padding: 16px;
}

.todo-list {
  display: grid;
  gap: 10px;
}

.home-sync-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--surface);
  padding: 10px;
  margin-bottom: 12px;
}

.home-sync-card span,
.home-sync-card small {
  color: var(--muted);
  font-weight: 600;
}

.home-planning.calendar-mode {
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  overflow-x: auto;
}

.home-day-name {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
}

.planning-day {
  min-height: 118px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px;
  background: var(--panel);
}

.planning-day.is-muted {
  background: var(--surface);
  color: var(--muted);
}

.planning-day strong {
  display: inline-block;
  font-size: 16px;
  margin-right: 4px;
}

.planning-day small {
  color: var(--muted);
}

.planning-items {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.calendar-empty-label {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

.planning-pill {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  padding: 0 10px;
  font: inherit;
  font-size: 11px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-pill.event {
  background: #fff0a6;
}

.planning-pill.logistics {
  background: var(--surface-2);
}

.planning-pill.admin,
.planning-pill.task {
  background: var(--surface-2);
}

.todo-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  padding: 10px;
  background: var(--panel);
}

.todo-card strong,
.todo-card small {
  display: block;
}

.todo-card small {
  color: var(--muted);
  margin-top: 4px;
}

.task-copilot-button {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2500;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #34a3a0);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(12, 25, 23, 0.24);
}

.task-copilot-panel {
  position: fixed;
  right: 22px;
  bottom: 78px;
  z-index: 2499;
  display: none;
  width: min(360px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 110px));
  overflow: auto;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 22px 55px rgba(12, 25, 23, 0.22);
  padding: 14px;
}

.task-copilot-panel.is-open {
  display: grid;
  gap: 12px;
}

.task-copilot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-copilot-head span {
  display: block;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.task-copilot-head strong {
  color: var(--ink);
  font-size: 16px;
}

.task-copilot-form,
.task-copilot-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.task-copilot-form input:first-child {
  grid-column: 1 / -1;
}

.task-copilot-list {
  display: grid;
  gap: 8px;
}

.task-copilot-card {
  position: relative;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px 42px 10px 10px;
}

.task-copilot-card strong,
.task-copilot-card small {
  display: block;
}

.task-copilot-card small {
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
}

.task-copilot-card .icon-action {
  position: absolute;
  top: 9px;
  right: 9px;
}

.task-copilot-card.is-completed {
  opacity: 0.62;
}

.reminder-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.reminder-card {
  border: 1px solid #f0d7a3;
  border-left: 4px solid #d7a62f;
  border-radius: 6px;
  background: var(--surface);
  padding: 10px;
}

.reminder-card strong,
.reminder-card span,
.reminder-card small {
  display: block;
}

.reminder-card span {
  font-weight: 600;
  margin-top: 2px;
}

.reminder-card small {
  color: var(--muted);
  margin-top: 4px;
}

.reminder-card.is-empty {
  background: var(--surface);
  border-color: var(--line);
  border-left-color: var(--line);
}

.view.is-active {
  display: block;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.month-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot.event,
.tag.event {
  background: var(--brand);
}

.dot.logistics,
.tag.logistics {
  background: var(--blue);
}

.dot.admin,
.tag.admin {
  background: var(--accent);
}

.dot.task,
.tag.task {
  background: var(--yellow);
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.day-name,
.day-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.day-name {
  min-height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface);
}

.day-cell {
  min-height: 128px;
  padding: 8px;
  background: var(--panel);
}

.day-cell.is-muted {
  background: var(--surface);
  color: var(--muted);
}

.day-number {
  font-weight: 600;
  margin-bottom: 8px;
}

.pill {
  width: 100%;
  border: 0;
  border-left: 4px solid var(--brand);
  background: var(--surface);
  border-radius: 6px;
  display: block;
  padding: 5px 6px;
  margin-bottom: 5px;
  color: var(--ink);
  text-align: left;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill.logistics {
  border-color: var(--blue);
  background: var(--surface);
}

.pill.admin {
  border-color: var(--accent);
  background: var(--surface);
}

.pill.task {
  border-color: var(--yellow);
  background: var(--surface);
}

.daily-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
  align-items: end;
  gap: 12px;
  background: #512562;
  color: #fff;
  border-radius: 8px 8px 0 0;
  padding: 12px;
  margin: -16px -16px 0;
}

.daily-header .eyebrow,
.daily-header h2 {
  color: #fff;
  margin: 0;
}

.daily-header .date-picker {
  color: #fff;
  display: grid;
  gap: 4px;
  font-weight: 600;
}

.daily-header select[multiple] {
  min-width: 150px;
  min-height: 74px;
}

.daily-export-actions {
  display: flex;
  gap: 6px;
}

.day-block-section {
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--panel);
  margin: 0 -16px 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(25, 36, 34, 0.06);
}

.day-block-head {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0;
  background: #512562;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 12px;
}

.day-block-wrap {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0;
  background: var(--panel);
  max-height: 760px;
  margin: 0;
  overflow-y: auto;
  padding: 0;
}

.day-block-hours,
.day-block-grid {
  position: relative;
}

.day-block-hours span {
  position: absolute;
  right: 14px;
  transform: translateY(-15%);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.day-block-grid {
  min-height: 600px;
  border-radius: 0;
  overflow: visible;
  background: linear-gradient(#f7faf9, #ffffff);
  border-left: 1px solid var(--line);
}

.day-block-grid > span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--surface-2);
}

.day-block {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 30px;
  border: 1px solid rgba(28, 49, 45, 0.22);
  border-radius: 6px;
  background: #e66a42;
  color: #fff;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  padding: 8px 10px;
  text-align: left;
  box-shadow: 0 8px 18px rgba(24, 37, 34, 0.14);
  touch-action: none;
  user-select: none;
}

.day-block:hover {
  filter: brightness(1.02);
}

.day-block.is-dragging {
  z-index: 30;
  cursor: grabbing;
  filter: brightness(1.05);
  box-shadow: 0 18px 38px rgba(24, 37, 34, 0.24);
}

.day-block-time,
.day-block-title,
.day-block small {
  min-width: 0;
  color: #fff;
}

.day-block-time {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.day-block-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
}

.day-block small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.88;
  font-size: 11px;
  font-weight: 600;
}

.day-block.is-compact {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  white-space: nowrap;
}

.day-block.is-compact .day-block-title {
  display: block;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: initial;
}

.day-block.is-compact small {
  display: none;
}

.day-block.has-duration {
  background: #6f8fe1;
}

.day-block.rh {
  background: #6f8fe1;
}

.day-block.security {
  background: #9b73c2;
}

.day-block.logistics {
  background: #5a8f84;
}

.day-block.event,
.day-block.eventPlanning {
  background: #e66a42;
}

.day-block.task,
.day-block.admin {
  background: #c7834d;
}

.daily-key-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.daily-key-posts[hidden] {
  display: none;
}

.daily-key-post {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--surface);
}

.daily-key-post small {
  grid-column: 1 / -1;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-key-post strong {
  color: var(--brand-strong);
  font-size: 13px;
}

.daily-key-post span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.timeline-wrap {
  display: none;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-top: 0;
  margin: 0 -16px -16px;
  background: var(--surface);
}

.timeline-table {
  min-width: 920px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.timeline-table th {
  background: #4e2860;
  color: #fff;
  border-color: #6f477d;
  height: 42px;
  letter-spacing: 0;
}

.timeline-table td {
  height: 38px;
  border: 1px solid var(--line);
  padding: 6px 10px;
  user-select: none;
}

.timeline-table td:first-child {
  width: 118px;
  text-align: center;
  font-weight: 600;
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 1;
}

.timeline-empty td {
  background: var(--panel);
  color: var(--muted);
}

.timeline-entry.logistics td {
  background: var(--surface-2);
  border-left-color: #5a8f84;
}

.timeline-entry.rh td {
  background: var(--surface-2);
  border-left-color: #4f83aa;
}

.timeline-entry.security td {
  background: var(--surface-2);
  border-left-color: #8e62a6;
}

.timeline-entry.admin td,
.timeline-entry.task td {
  background: var(--surface-2);
  border-left-color: #c7834d;
}

.timeline-entry.event td {
  background: #fff1ae;
  border-left-color: #d5a91d;
}

.timeline-entry.eventPlanning td {
  background: var(--surface-2);
  border-left-color: #512562;
}

.daily-runsheet {
  display: none;
}

.team-planning-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  overflow: visible;
  margin-bottom: 14px;
}

.team-filter-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 4px;
}

.team-filter-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 0 10px;
}

.team-filter-tabs button.is-active {
  background: var(--surface-2);
  color: var(--brand-strong);
}

.team-filter-select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 0 12px;
}

.team-return-button {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.team-planning-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: start;
}

.staff-pool,
.team-board-wrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.staff-pool {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.team-smart-panel {
  align-content: start;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.team-week-context {
  display: flex;
  gap: 8px;
  align-content: start;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}

.team-context-day {
  display: grid;
  gap: 6px;
  flex: 0 0 132px;
  min-height: 76px;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 8px;
}

.team-context-day strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.team-context-day div {
  display: grid;
  gap: 4px;
}

.team-context-day span {
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface);
  color: #365584;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-context-day span.task {
  background: var(--surface);
  color: #8b5625;
}

.team-context-day small {
  color: var(--muted);
  font-weight: 600;
}

.staff-pool h2 {
  margin: 0;
  font-size: 14px;
}

#staffPool {
  display: grid;
  gap: 8px;
}

.staff-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  padding: 10px;
  cursor: grab;
}

.staff-card:active {
  cursor: grabbing;
}

.staff-card strong {
  color: var(--brand-strong);
}

.staff-card span,
.team-person-cell span,
.team-shift-summary span,
.team-alert span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.team-board-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  overflow: visible;
  padding: 12px;
}

.team-board-area {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 1px;
  align-items: start;
}

.team-days-rail {
  display: grid;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  overflow: hidden;
  background: var(--surface-2);
  gap: 1px;
}

.team-board-scroll {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
}

.team-alerts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.team-alert {
  display: grid;
  gap: 3px;
  border: 1px solid #f0c8b7;
  border-left: 5px solid #d9653b;
  border-radius: 6px;
  background: var(--surface);
  padding: 10px;
}

.team-alert.info {
  border-color: #c7d7ef;
  border-left-color: #5c82c9;
  background: var(--surface);
}

.team-alert.is-ok {
  border-color: var(--line);
  border-left-color: var(--brand);
  background: var(--surface);
}

.team-board {
  --team-people: 1;
  display: grid;
  grid-template-columns: repeat(var(--team-people), 150px) 210px;
  width: max-content;
  min-width: 100%;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  background: var(--surface-2);
  gap: 1px;
}

body.team-planning-fullscreen {
  display: block;
  background: var(--bg);
}

body.team-planning-fullscreen .sidebar,
body.team-planning-fullscreen .topbar {
  display: none;
}

body.team-planning-fullscreen .app-shell {
  min-height: 100vh;
  padding: 14px;
}

body.team-planning-fullscreen .view:not(#teamPlanningView) {
  display: none;
}

body.team-planning-fullscreen #teamPlanningView {
  display: block;
}

body.team-planning-fullscreen .team-planning-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
}

body.team-planning-fullscreen .team-board {
  grid-template-columns: repeat(var(--team-people), 170px) 230px;
}

body.team-planning-fullscreen .team-board-area {
  grid-template-columns: 92px minmax(0, 1fr);
}

.team-corner,
.team-person-header,
.team-date-cell,
.team-activity-cell,
.team-total-label,
.team-total-cell,
.team-day-cell {
  border: 0;
}

.team-corner,
.team-person-header,
.team-date-cell,
.team-total-label,
.team-total-cell {
  background: var(--panel);
}

.team-corner,
.team-date-cell,
.team-total-label {
  position: static;
}

.team-corner {
  display: grid;
  place-items: center;
  height: 100px;
  min-height: 100px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
}

.team-person-header {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  height: 100px;
  min-height: 100px;
  padding: 7px 24px 7px 6px;
  text-align: center;
}

.team-person-hours {
  display: grid;
  gap: 3px;
  width: 100%;
}

.team-person-hours div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 2px 5px;
}

.team-person-hours small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.team-person-hours b {
  color: var(--brand-strong);
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-person-header strong {
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-person-header span {
  color: var(--ink-2);
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-activity-header {
  font-weight: 700;
  text-transform: none;
}

.team-person-header.is-collapsed {
  height: 100px;
  min-height: 100px;
  padding: 7px 4px;
}

.team-person-header.is-collapsed strong {
  font-size: 11px;
}

.team-person-header.is-collapsed span {
  display: none;
}

.team-column-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}

.team-column-toggle svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.team-person-header.is-collapsed .team-column-toggle {
  position: static;
  justify-self: center;
}

.team-date-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 98px;
  min-height: 98px;
  overflow: hidden;
  padding: 9px 7px;
  color: var(--ink);
  font-size: 11px;
  text-transform: lowercase;
}

.team-date-cell strong,
.team-total-cell,
.team-total-label {
  font-weight: 700;
}

.team-day-cell,
.team-activity-cell {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  height: 98px;
  min-height: 98px;
  overflow: hidden;
  padding: 7px;
  background: var(--panel);
}

.team-day-cell.is-collapsed {
  place-items: center;
  padding: 4px;
}

.team-collapsed-count {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
}

.team-date-cell.is-context,
.team-day-cell.is-context,
.team-activity-cell.is-context {
  opacity: 0.45;
  background: var(--surface);
}

.team-day-cell.is-context {
  pointer-events: none;
}

.team-date-cell.is-context span::after {
  content: " hors semaine";
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.team-day-cell.is-drop-target {
  outline: 2px solid #0f756d;
  outline-offset: -4px;
  background: var(--surface);
}

.team-add-shift {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 22px;
  min-height: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: #0f756d;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.2;
}

.team-day-cell:hover .team-add-shift {
  opacity: 1;
}

.team-day-cell.is-event-unavailable {
  background: var(--surface);
  color: var(--muted);
}

.team-day-cell.is-event-unavailable .team-rest-label {
  color: var(--muted);
}

.team-day-cell.is-event-unavailable .team-add-shift {
  opacity: 0.25;
}

.team-template-bubble {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 4px;
  min-width: 150px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  padding: 6px;
  box-shadow: 0 14px 36px rgba(31, 37, 36, 0.16);
}

.team-template-bubble button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  text-align: left;
}

.team-template-bubble button:hover {
  background: var(--surface-2);
  color: var(--brand-strong);
}

.team-template-empty {
  display: block;
  padding: 8px 10px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.team-shift-card.is-absence {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.team-shift-card.is-absence .team-shift-summary span {
  display: none;
}

.team-shift-card.is-absence .team-shift-controls {
  display: none;
}

.team-rest-label {
  align-self: center;
  justify-self: end;
  margin-right: 18px;
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.team-shift-card {
  position: relative;
  display: grid;
  gap: 4px;
  border: 0;
  border-left: 3px solid #0f756d;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  padding: 6px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #d9e8e4;
}

.team-shift-card.has-warning {
  border-left-color: #d9653b;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px #f0c8b7;
}

.team-shift-card.is-selected {
  outline: 2px solid #0f756d;
  outline-offset: 2px;
}

.team-shift-summary {
  display: grid;
  gap: 2px;
}

.team-shift-summary strong {
  white-space: pre-line;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.team-shift-summary span,
.team-warning-line {
  color: #0f756d;
  justify-self: start;
  font-weight: 700;
  font-size: 11px;
}

.team-shift-summary em,
.team-shift-group-note {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-shift-controls {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.team-shift-controls select,
.team-break-row select {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 0 7px;
  font-weight: 600;
}

.team-shift-actions {
  display: none;
  justify-content: space-between;
  gap: 6px;
}

.team-shift-actions .icon-action,
.team-break-row .icon-action {
  background: var(--surface);
}

.team-edit-shift {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: #0f756d;
  cursor: pointer;
  padding: 0;
}

.team-edit-shift svg {
  width: 13px;
  height: 13px;
}

.team-break-list {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.team-break-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 34px;
  gap: 5px;
  align-items: center;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.team-activity-cell {
  align-content: center;
  text-align: center;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
}

.team-activity-cell span {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  padding: 1px 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-activity-cell small {
  color: var(--muted);
}

.team-total-label,
.team-total-cell {
  height: 48px;
  min-height: 48px;
  padding: 8px;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
}

.team-total-label {
  text-align: left;
  color: var(--ink-2);
  font-size: 11px;
  text-transform: uppercase;
}

.smart-empty-card,
.team-editor-card,
.team-smart-summary {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.smart-empty-card span,
.team-editor-card small {
  color: var(--muted);
  font-weight: 600;
  line-height: 1.35;
}

.team-editor-grid {
  display: grid;
  gap: 8px;
}

.team-service-editor {
  display: grid;
  gap: 8px;
}

.team-service-row {
  display: grid;
  grid-template-columns: 82px minmax(78px, 1fr) minmax(78px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.team-service-row strong {
  color: var(--ink);
  font-size: 12px;
}

.team-service-row input {
  width: 100%;
  min-width: 78px;
  padding-left: 8px;
  padding-right: 4px;
}

.team-editor-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.team-editor-grid select {
  width: 100%;
}

.team-editor-grid textarea {
  min-height: 58px;
  width: 100%;
  resize: vertical;
}

.team-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.team-editor-actions .primary-button,
.team-editor-actions .secondary-light-button {
  min-height: 38px;
  padding: 8px;
}

.danger-text {
  color: #b7433d;
}

.team-editor-breaks {
  display: grid;
  gap: 6px;
}

.team-smart-summary {
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.team-smart-summary span {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.team-smart-summary strong {
  color: var(--ink);
  font-size: 16px;
}

.team-template-options,
.team-template-add {
  display: grid;
  gap: 8px;
}

.team-template-option-row {
  display: grid;
  grid-template-columns: 28px minmax(150px, 1.2fr) 68px repeat(6, minmax(86px, 0.8fr)) 38px;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 8px;
}

.team-template-option-row.is-dragging {
  opacity: .55;
}

.team-template-option-row.is-drop-target {
  border-color: var(--brand);
  background: var(--brand-pale);
}

.drag-handle {
  display: grid;
  place-items: center;
  min-height: 44px;
  color: var(--muted);
  font-weight: 700;
  cursor: grab;
  user-select: none;
}

.team-template-option-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.team-template-option-row input,
.team-template-add input {
  width: 100%;
  min-width: 0;
}

.team-template-option-row input[type="color"] {
  min-height: 42px;
  padding: 3px;
}

.team-template-add {
  grid-template-columns: minmax(160px, 1.2fr) repeat(6, minmax(92px, 0.8fr)) auto;
  align-items: end;
  margin-top: 10px;
}

.runsheet-cover {
  display: grid;
  gap: 4px;
  border-bottom: 3px solid #202426;
  padding: 18px 0 14px;
  margin-bottom: 14px;
}

.runsheet-cover p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
}

.runsheet-cover h2 {
  margin: 0;
  font-size: 28px;
}

.runsheet-list {
  display: grid;
  gap: 0;
}

.runsheet-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 70px;
  gap: 14px;
  align-items: start;
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 0;
}

.runsheet-time {
  display: flex;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
}

.runsheet-time strong {
  min-width: 48px;
}

.runsheet-detail {
  display: grid;
  gap: 3px;
}

.runsheet-detail span,
.runsheet-duration {
  color: var(--muted);
  font-weight: 600;
}

.timeline-entry td:nth-child(2),
.timeline-entry td:nth-child(3) {
  font-weight: 600;
}

.time-move {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.time-move.is-duration {
  grid-template-columns: 44px 86px 28px 86px;
}

.time-move span {
  font-weight: 700;
}

.time-move select {
  min-height: 28px;
  height: 28px;
  border-radius: 6px;
  padding: 0 4px;
  background: var(--panel);
  font-size: 11px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.group-header-row td {
  border: 0;
  padding: 18px 8px 8px;
  background: var(--panel);
}

.group-header-row span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--brand-strong);
  font-weight: 700;
  padding: 3px 8px;
}

.group-header-row small {
  margin-left: 10px;
  color: var(--muted);
  font-weight: 700;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 12px 10px;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

td a {
  color: var(--brand);
  font-weight: 600;
}

.status {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: var(--surface-2);
  padding: 0 10px;
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}

.budget-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.budget-total-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Vue horizontale synchronisée du plan de charge, inspirée du planning équipes. */
.festival-plan-display-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--border, var(--line));
  border-radius: 10px;
  background: var(--surface);
}

.festival-plan-display-switch > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.festival-plan-display-switch small {
  color: var(--ink-2);
  font-size: 12px;
}

.festival-team-schedule-board {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 4px 14px rgba(32, 56, 91, 0.08);
}

.festival-team-schedule-board > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 10px 14px;
  background: #244f78;
  border-bottom: 1px solid #183856;
  color: white;
}

.festival-team-schedule-board > header > div:first-child {
  display: flex;
  flex-direction: column;
}

.festival-team-schedule-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line-strong);
  border-left: 5px solid #244f78;
  background: var(--surface);
  color: #183856;
}

.festival-team-schedule-board > header small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.festival-team-schedule-day-head small {
  color: var(--ink-2);
  font-size: 12px;
}

.festival-team-schedule-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.festival-team-schedule-controls span {
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.festival-team-schedule-controls button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-weight: 600;
}

.festival-team-schedule-controls button.is-active {
  border-color: var(--line);
  background: var(--panel);
  color: #244f78;
}

.festival-team-schedule-day + .festival-team-schedule-day {
  border-top: 10px solid var(--line);
}

.festival-team-schedule-scroll {
  overflow: auto;
  max-width: 100%;
  scrollbar-gutter: stable;
}

.festival-team-schedule-ruler,
.festival-team-schedule-row {
  display: grid;
  grid-template-columns: 200px minmax(960px, 1fr);
  min-width: 1160px;
}

.festival-team-schedule-ruler {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 42px;
  color: white;
  background: #20385b;
}

.festival-team-schedule-corner,
.festival-team-schedule-label {
  position: sticky;
  left: 0;
  z-index: 12;
  border-right: 2px solid #20385b;
}

.festival-team-schedule-corner {
  display: flex;
  align-items: center;
  padding: 0 16px;
  justify-content: center;
  padding: 0 12px;
  background: #20385b;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.festival-team-schedule-time-header {
  display: grid;
  grid-template-columns: repeat(var(--team-time-slots), minmax(30px, 1fr));
  min-width: 960px;
}

.festival-team-schedule-time-header span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: #dce6f0;
  font-size: 11px;
  font-weight: 600;
}

.festival-team-schedule-time-header span.is-hour {
  border-left-color: rgba(255, 255, 255, 0.72);
  color: white;
  font-weight: 700;
}

.festival-team-schedule-group {
  position: sticky;
  left: 0;
  z-index: 13;
  min-width: 1160px;
  padding: 5px 12px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: #244f78;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.festival-team-schedule-row {
  min-height: var(--team-row-height);
  overflow: visible;
  border-bottom: 1px solid var(--line-strong);
}

.festival-team-schedule-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  min-height: var(--team-row-height);
  padding: 6px 10px;
  background: color-mix(in srgb, var(--team-label-color, #2f5d86) 62%, var(--team-label-ink, #123d34));
  color: white;
}

.festival-team-schedule-label small,
.festival-team-schedule-label strong,
.festival-team-schedule-label span {
  grid-column: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-team-schedule-label small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
}

.festival-team-schedule-label strong {
  color: white;
  font-size: 13px;
}

.festival-team-schedule-label span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 600;
}

.festival-team-schedule-label .festival-structure-column-add {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.94);
}

.festival-team-schedule-track {
  position: relative;
  min-width: 960px;
  min-height: var(--team-row-height);
  background-color: var(--panel);
  background-image:
    linear-gradient(90deg, rgba(32, 56, 91, 0.17) 1px, transparent 1px),
    linear-gradient(180deg, rgba(32, 56, 91, 0.045) 1px, transparent 1px);
  background-size: calc(100% / var(--team-slots)) 100%, 100% 18px;
}

.festival-team-schedule-task {
  position: absolute;
  z-index: 4;
  height: 40px;
  min-width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  padding: 3px 6px;
  border: 1px solid var(--program-border);
  border-radius: 0;
  background: var(--program-color);
  color: var(--program-text);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.festival-team-schedule-task strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.festival-team-schedule-task small {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
}

.festival-team-schedule-task.is-selected {
  z-index: 7;
  outline: 3px solid rgba(22, 129, 123, 0.3);
  box-shadow: 0 3px 10px rgba(18, 61, 52, 0.22);
}

@media (max-width: 900px) {
  .festival-plan-display-switch {
    align-items: stretch;
    flex-direction: column;
  }
  .festival-team-schedule-ruler,
  .festival-team-schedule-row {
    grid-template-columns: 160px minmax(840px, 1fr);
    min-width: 1000px;
  }
  .festival-team-schedule-group {
    min-width: 1000px;
  }
}

@media (min-width: 1181px) {
  .budget-total-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.budget-total-strip div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px 14px;
}

.budget-total-strip small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.budget-total-strip strong {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.budget-total-strip .is-positive strong { color: var(--brand-strong); }
.budget-total-strip .is-negative strong { color: #b23a32; }

.budget-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.budget-tab {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 10px 14px;
}

.budget-tab.is-active,
.budget-tab:hover {
  border-color: rgba(19, 105, 98, 0.35);
  background: var(--surface);
  color: var(--brand-strong);
}

.sheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.secondary-light-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0 12px;
}

.sheet-wrap {
  border: 1px solid var(--line);
}

.sheet-table {
  min-width: 980px;
  font-size: 13px;
}

.sheet-table th {
  background: var(--surface-2);
  color: var(--ink);
  position: sticky;
  top: 0;
}

.sheet-table td,
.sheet-table th {
  border: 1px solid var(--line-strong);
  padding: 8px;
}

.detail-hero,
.detail-section {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 18px;
  margin-top: 14px;
}

.detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.detail-hero-actions {
  display: flex;
  gap: 8px;
}

.detail-section {
  box-shadow: 0 8px 20px rgba(28, 49, 45, 0.04);
}

.detail-section > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--brand-strong);
  font-size: 16px;
}

.detail-section > h2::before {
  content: "";
  width: 5px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
}

.detail-hero h2 {
  font-size: 20px;
  margin-bottom: 4px;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.detail-row {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.detail-row > * {
  min-width: 0;
}

.detail-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.detail-cell small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.detail-cell strong {
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.contact-row {
  grid-template-columns: 150px 110px 130px 130px 160px 1fr 34px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .festival-command-summary,
  .festival-command-flow,
  .festival-explorer,
  .festival-explorer-stats {
    grid-template-columns: 1fr;
  }

  .festival-explorer-tree {
    position: static;
  }

  .festival-zone-card {
    grid-template-columns: 1fr;
  }

  .festival-site-plan-body {
    grid-template-columns: 1fr;
  }

  .festival-plan-panel {
    position: static;
  }

  .festival-groups-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-row {
    grid-template-columns: 1fr 1fr 34px;
  }
}

.planning-row {
  grid-template-columns: 34px 180px 140px 110px 110px minmax(160px, 1fr) 76px 34px;
}

.planning-row.is-trade-mode {
  grid-template-columns: 34px 170px 170px 150px 100px 100px minmax(160px, 1fr) 76px 34px;
}

.planning-line-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.planning-line-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #b5302e;
}

.festival-show-planning-row {
  grid-template-columns: minmax(220px, 1.25fr) minmax(150px, .9fr) minmax(120px, .65fr) minmax(120px, .65fr) minmax(220px, 1.2fr) 76px 38px;
  align-items: center;
}

.festival-show-planning-row select,
.festival-show-planning-row input {
  min-width: 0;
  width: 100%;
}

.planning-date-list {
  gap: 12px;
}

.planning-date-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.planning-date-title {
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.planning-show-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 9px 10px;
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--surface);
  color: var(--brand-strong);
}

.planning-show-group-title small,
.planning-show-group-title strong {
  display: block;
}

.planning-show-group-name {
  display: flex;
  align-items: center;
  gap: 7px;
}

.festival-show-quick-add {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 5px;
  border-color: var(--brand);
  color: var(--brand-strong);
  background: var(--panel);
}

.planning-show-group-title small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.planning-show-group-title strong {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
}

.planning-show-group-title .secondary-light-button {
  min-height: 32px;
  padding: 5px 10px;
  white-space: nowrap;
}

.planning-show-group-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.planning-show-timeline-button {
  width: 38px;
  height: 38px;
  border-color: var(--brand);
  color: var(--brand-strong);
  background: var(--panel);
}

.festival-planning-timeline-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 5200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(900px, 62vw);
  height: 100vh;
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: -18px 0 54px rgba(12, 35, 31, .22);
  transform: translateX(102%);
  transition: transform .2s ease;
}

.festival-planning-timeline-drawer.is-open {
  transform: translateX(0);
}

.festival-planning-timeline-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.festival-planning-timeline-drawer-head small,
.festival-planning-timeline-drawer-head strong,
.festival-planning-timeline-drawer-head span {
  display: block;
}

.festival-planning-timeline-drawer-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.festival-planning-timeline-drawer-head strong {
  margin-top: 2px;
  color: var(--brand-strong);
  font-size: 16px;
  font-weight: 700;
}

.festival-planning-timeline-drawer-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.festival-planning-timeline-drawer-body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background: var(--surface);
}

.festival-planning-timeline-drawer .festival-show-comparative-board {
  max-height: none;
  border-radius: 6px;
}

.festival-planning-timeline-drawer .festival-program-grid {
  --program-day-width: 220px;
}

.festival-show-comparative-head {
  position: sticky;
  padding-right: 40px;
}

.festival-show-single-head {
  position: sticky;
  padding-right: 42px;
}

.festival-show-single-add {
  position: absolute;
  top: 7px;
  right: 7px;
}

.festival-show-comparative-head.is-selected {
  background: var(--surface-2);
  box-shadow: inset 0 4px 0 var(--brand);
}

.festival-show-comparative-add {
  position: absolute;
  top: 7px;
  right: 7px;
}

.festival-show-comparative-grid .festival-program-track.is-selected {
  box-shadow: inset 0 0 0 3px rgba(23, 107, 105, .16);
}

.festival-program-tile-popover {
  z-index: 10050 !important;
  width: min(480px, calc(100vw - 24px));
  gap: 12px;
  padding: 14px;
}

.festival-program-tile-popover-head small,
.festival-program-tile-popover-head strong {
  display: block;
}

.festival-program-tile-popover-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.festival-program-tile-popover-head strong {
  margin-top: 2px;
  color: var(--brand-strong);
  font-size: 14px;
  font-weight: 700;
}

.festival-program-tile-popover-head.is-drag-handle {
  position: relative;
  margin: -6px -6px 0;
  padding: 7px 34px 7px 7px;
  border-radius: 6px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.festival-program-tile-popover-head.is-drag-handle::after {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--muted);
  content: "⠿";
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
}

.festival-program-tile-popover.is-dragging {
  opacity: .96;
  box-shadow: 0 18px 44px rgba(13, 51, 45, .24);
}

.festival-program-tile-popover.is-dragging .festival-program-tile-popover-head {
  cursor: grabbing;
}

.festival-program-tile-popover-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.festival-program-tile-popover-form .detail-control,
.festival-program-tile-popover-form input,
.festival-program-tile-popover-form select {
  min-width: 0;
  width: 100%;
}

.festival-service-color-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 42px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.festival-service-color {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 2px solid var(--service-border);
  border-radius: 50%;
  background: var(--service-color);
  color: var(--service-symbol);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: .86;
  box-shadow: none;
}

.festival-service-color:hover {
  transform: scale(1.08);
}

.festival-service-color.is-selected {
  outline: 3px solid var(--brand-strong);
  outline-offset: 2px;
}

.festival-column-color-popover {
  width: min(290px, calc(100vw - 24px));
  padding: 14px;
}

.festival-column-color-popover > strong {
  display: block;
  margin-bottom: 10px;
  color: #123d34;
}

.festival-column-color {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
  color: #176b69;
}

.festival-column-color svg {
  width: 16px;
  height: 16px;
}

.festival-column-color:hover {
  background: #eaf5f2;
}

.festival-program-tile-line {
  grid-column: 1 / -1;
  justify-content: flex-start;
  width: fit-content;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.festival-program-tile-style-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.festival-program-tile-style-row .detail-control {
  min-width: 0;
}

.festival-program-tile-style-row .festival-program-tile-line {
  grid-column: auto;
  align-self: end;
  min-height: 54px;
  margin: 0;
}

.festival-program-tile-popover-form .festival-program-tile-line input[type="checkbox"] {
  appearance: none;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #7d8986;
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
}

.festival-program-tile-popover-form .festival-program-tile-line input[type="checkbox"]:checked {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 4px #fff;
}

.festival-program-tile-popover-form .festival-program-tile-line:has(input:checked) {
  border-color: rgba(23, 107, 105, .45);
  background: var(--surface);
  color: var(--brand-strong);
}

.festival-program-duration-input.is-invalid {
  border-color: #cf3e3e !important;
  background: var(--surface);
}

.festival-program-tile-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.festival-program-tile-popover-actions .danger-button {
  margin-right: auto;
}

@media (max-width: 900px) {
  .festival-planning-timeline-drawer {
    width: min(100vw, 560px);
  }

  .festival-planning-timeline-drawer .festival-program-grid {
    --program-day-width: 210px;
  }
}

.planning-drag-handle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: grab;
  font-weight: 700;
  line-height: 1;
}

.planning-linked-handle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: default;
  font-weight: 700;
  line-height: 1;
}

.planning-row-linked-concert {
  border-left: 3px solid var(--brand);
  background: var(--panel);
}

.planning-drag-handle:active {
  cursor: grabbing;
}

.planning-row.is-dragging {
  opacity: .55;
}

.planning-row.is-drop-target {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(26,122,120,.14);
}

.company-row {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.rh-assignment-row {
  grid-template-columns: minmax(220px, 1fr) 120px 130px 130px;
}

.event-rh-row {
  grid-template-columns: minmax(180px, 1fr) 34px repeat(3, minmax(90px, auto)) 44px;
}

.planning-hover-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(26, 122, 120, .22);
  background: rgba(26, 122, 120, .09);
  color: var(--brand);
  font-weight: 700;
  cursor: help;
  justify-self: center;
}

.planning-hover-icon--team {
  width: 22px;
  height: 22px;
  font-size: 11px;
  flex: 0 0 auto;
}

.event-add-row {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.festival-show-rh-add.event-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.festival-show-rh-add.event-add-row > select {
  flex: 1 1 140px;
  min-width: 120px;
}
.festival-show-rh-add.event-add-row .detail-control {
  flex: 0 0 auto;
  min-width: 80px;
}
.festival-show-rh-add.event-add-row .detail-control input[type="time"] {
  width: 110px;
}
.festival-show-rh-add.event-add-row .detail-control input[type="number"] {
  width: 70px;
}

.event-team-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.event-team-summary article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.event-team-summary small,
.event-team-phase small,
.event-team-position small,
.event-team-preview-day small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.event-team-summary strong {
  color: var(--ink);
  font-size: 14px;
}

.event-team-phases {
  display: grid;
  gap: 12px;
}

.event-team-phase {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.event-team-phase header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.event-team-phase h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 16px;
}

.event-team-position-list {
  display: grid;
  gap: 8px;
}

.event-team-position {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.4fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
}

.event-team-position.has-missing {
  border-left: 4px solid #d1844b;
}

.event-team-position strong {
  color: var(--brand-strong);
}

.event-team-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.event-team-people span {
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-strong);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
}

.event-team-people .is-missing {
  background: var(--surface);
  color: #8a4d25;
}

.event-team-card-actions {
  display: flex;
  justify-content: end;
  gap: 6px;
}

.event-team-add {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 135px 110px 110px minmax(150px, 0.8fr) 90px 110px auto;
  gap: 8px;
  align-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
}

.event-team-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.event-team-preview-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.event-team-preview {
  display: grid;
  min-width: 760px;
}

.event-team-preview > * {
  min-height: 58px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px;
}

.event-team-preview-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.event-team-preview-day {
  background: var(--panel);
}

.event-team-preview-day strong {
  display: block;
  margin-top: 2px;
}

.event-team-preview-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-content: start;
  background: var(--panel);
}

.event-team-preview-cell small {
  color: var(--muted);
  font-weight: 600;
}

.event-team-shift-pill,
.event-team-preview-cell.is-activity span {
  border: 0;
  border-radius: 6px;
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 6px;
}

.event-team-preview-cell.is-activity span {
  background: var(--surface);
  color: #365584;
}

.event-team-shift-pill.is-other,
.event-team-preview-cell.is-activity span.is-other {
  border: 1px solid #e2d2bf;
  background: var(--surface);
  color: #8a4d25;
}

.event-link-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.opera-info-button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.opera-note-popover {
  position: fixed;
  z-index: 90;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
  box-shadow: 0 18px 48px rgba(31, 37, 36, 0.18);
}

.opera-note-popover textarea {
  min-height: 150px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  font: inherit;
}

.opera-info-box {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.opera-info-box h3 {
  margin: 0;
  color: var(--brand-strong);
}

.opera-general-row {
  grid-template-columns: minmax(160px, 1fr) 135px 115px minmax(160px, 1fr) 42px;
}

.show-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.detail-control {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
  color: var(--muted);
  font-weight: 600;
}

.detail-control > span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.detail-checkbox {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 58px;
}

.detail-checkbox input {
  width: 18px;
  height: 18px;
}

.note-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.notebook-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 10px;
}

.notebook-textarea {
  width: 100%;
  min-height: min(48vh, 520px);
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
  font: inherit;
}

.notebook-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(20, 30, 28, 0.55);
  padding: 22px;
}

.notebook-fullscreen-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, 96vw);
  height: min(860px, 92vh);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 28px 90px rgba(12, 22, 20, 0.32);
  overflow: hidden;
}

.notebook-fullscreen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.notebook-fullscreen textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  resize: none;
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.show-team-day-row {
  grid-template-columns: 180px minmax(220px, 1fr) minmax(180px, 1fr);
}

.phase-task-box {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.phase-task-row {
  grid-template-columns: minmax(150px, 1fr) 135px 135px 120px 120px minmax(220px, 1.2fr);
}

.phase-task-list {
  margin-bottom: 0;
}

.phase-task-item {
  grid-template-columns: minmax(160px, 1fr) 150px 120px minmax(180px, 1fr) 90px;
}

.task-resource-box {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 48px;
}

.task-resources-cell {
  position: relative;
}

.task-resources-cell .task-resource-box {
  min-height: 0;
}

.task-resources-cell .task-resource-chips {
  margin-top: 4px;
}

.task-resource-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 6px;
}

.task-resource-chip {
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0 10px;
}

.task-resource-add {
  width: 32px;
  height: 32px;
}

.task-resource-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
  min-width: min(620px, 92vw);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 22px 58px rgba(18, 32, 29, 0.2);
  padding: 14px;
}

.task-resource-panel[hidden] {
  display: none;
}

.task-resource-panel strong,
.task-resource-panel button {
  grid-column: 1 / -1;
}

.task-resource-panel strong {
  color: var(--brand-strong);
  font-size: 14px;
}

.task-resource-panel select,
.task-resource-panel input {
  min-height: 42px;
}

.event-logistics-row,
.event-location-row {
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 110px 90px;
}

.event-logistics-row {
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 140px 90px;
}

.event-location-add-row {
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) 160px 160px minmax(130px, 1fr) 110px 110px;
}

.festival-request-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.festival-request-row > select:first-child {
  flex: 1 1 180px;
  min-width: 140px;
}
.festival-request-row .detail-control {
  flex: 0 0 auto;
  min-width: 110px;
  max-width: 150px;
}
.festival-request-row .detail-control input[type="date"] {
  width: 100%;
  font-size: 11px;
  padding: 4px 6px;
  min-width: 0;
}
.festival-request-row .detail-cell {
  flex: 0 0 auto;
  min-width: 90px;
}
.festival-request-row > select:not(:first-child) {
  flex: 0 1 130px;
  min-width: 100px;
}
.festival-request-row > .mini-remove {
  flex: 0 0 auto;
  align-self: center;
}

.festival-request-help {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--surface);
  padding: 10px 12px;
  color: var(--brand-strong);
}

.festival-request-help strong { white-space: nowrap; }
.festival-request-help span { color: var(--muted); font-weight: 600; }

.festival-request-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 145px minmax(190px, .9fr) 150px 145px 112px 34px;
  align-items: end;
  gap: 8px;
}

.festival-request-row .detail-control {
  min-width: 0;
  max-width: none;
}

.festival-request-deadline span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
}

.festival-request-milestone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.festival-request-milestone input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.festival-request-rule-row input,
.festival-request-rule-row select,
#festivalRequestRuleUnit {
  min-height: 38px;
}

@media (max-width: 1180px) {
  .festival-request-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .festival-request-row > .mini-remove { justify-self: end; }
  .festival-request-help { align-items: flex-start; flex-direction: column; }
}

.phase-calendar-tools,
.festival-day-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.phase-mini-calendar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
}

.phase-mini-cell {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 154px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  padding: 12px 9px;
}

.phase-mini-cell em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.phase-mini-cell strong {
  display: block;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  margin: 6px 0 18px;
  text-align: center;
}

.phase-mini-cell div {
  display: grid;
  gap: 6px;
}

.phase-pill {
  display: grid;
  gap: 1px;
  width: 100%;
  border: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #7192dc;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  padding: 3px 7px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phase-pill span,
.phase-pill small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phase-pill small {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.82;
}

.phase-pill:hover {
  filter: brightness(1.04);
}

.phase-pill.mounting {
  background: #c7834d;
}

.phase-pill.festival {
  background: #7192dc;
}

.phase-pill.dismantling {
  background: #5a8f84;
}

.phase-pill.context {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
}

.phase-pill.context-context,
.phase-pill.context-show {
  border-color: var(--line-strong);
  background: var(--surface);
  color: #355076;
}

.phase-pill.context-mounting {
  border-color: #ead7c6;
  background: var(--surface);
  color: #7a4c25;
}

.phase-pill.context-dismantling {
  border-color: var(--line-strong);
  background: var(--surface);
  color: #315e54;
}

.phase-calendar-popover {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 150px 150px auto 42px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 18px 52px rgba(28, 49, 45, 0.18);
  margin-top: 12px;
  padding: 14px;
}

.phase-calendar-popover strong {
  color: var(--brand-strong);
  font-size: 14px;
}

.phase-calendar-popover input {
  min-height: 42px;
}

.phase-calendar-popover[hidden] {
  display: none;
}

.tech-library-row {
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 180px) minmax(120px, 180px);
}

.event-detail-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
}

.detail-tab,
.event-budget-tabs {
  display: flex;
}

.detail-tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  padding: 0 18px;
}

.detail-tab.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.event-budget-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.event-budget-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.event-budget-dashboard {
  display: grid;
  gap: 12px;
}

.event-budget-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.event-budget-cards article {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 14px;
}

.event-budget-cards small {
  display: block;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.event-budget-cards strong {
  font-size: 20px;
}

.event-budget-table {
  display: grid;
  gap: 10px;
  overflow-x: auto;
}

.event-budget-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.event-budget-controls select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 0 10px;
}

.event-budget-summary-row td {
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  text-align: right;
  border-top: 2px solid var(--line);
}

.event-budget-total-row td {
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  border-top: 1px solid var(--line);
}

.event-budget-total-row td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.event-budget-total-row.is-positive td:last-child { color: var(--brand-strong); }
.event-budget-total-row.is-negative td:last-child { color: #b23a32; }

.bp-table {
  min-width: 820px;
  border: 1px solid var(--line);
  border-collapse: collapse;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}

.bp-table th {
  background: #1d302c;
  color: #fff;
}

.bp-table th:nth-child(4) {
  background: #4e2860;
}

.bp-table td:nth-child(1),
.bp-table td:nth-child(4) {
  color: var(--brand-strong);
  font-weight: 700;
}

.bp-table tr:last-child td {
  background: var(--surface);
  font-weight: 700;
}

.event-product-add-row {
  grid-template-columns: minmax(190px, 1.1fr) minmax(160px, 1fr) minmax(140px, 1fr) 110px 110px minmax(120px, 1fr);
}

.event-charge-add-row {
  grid-template-columns: minmax(130px, 0.8fr) minmax(170px, 1fr) minmax(150px, 1fr) 120px minmax(120px, 0.8fr) 150px;
}

.festival-days {
  display: grid;
  gap: 14px;
}

.festival-day-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.festival-day-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 150px 130px 34px;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.festival-show-row {
  grid-template-columns: minmax(170px, 1fr) 140px 130px 130px 140px 100px minmax(150px, 1fr) 34px;
}

.festival-path {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  padding: 10px 12px;
  margin: -4px 0 14px;
}

.festival-info-grid,
.festival-structure,
.festival-day-board,
.festival-scene-days {
  display: grid;
  gap: 12px;
}

.festival-info-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.festival-recap-card {
  border: 1px solid rgba(23, 107, 105, .22);
  border-left: 6px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.festival-recap-card small {
  display: block;
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.festival-recap-card p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.festival-explorer {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 12px;
  align-items: start;
}

.festival-explorer-tree,
.festival-explorer-main,
.festival-explorer-aside {
  min-width: 0;
}

.festival-explorer-tree {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 10px;
}

.festival-explorer-group {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
}

.festival-explorer-group > strong {
  display: block;
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.festival-explorer-item {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 9px;
  text-align: left;
}

.festival-explorer-item:hover,
.festival-explorer-item.is-active {
  background: var(--surface);
  color: var(--brand-strong);
}

.festival-explorer-item span,
.festival-explorer-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-explorer-item span {
  font-weight: 700;
}

.festival-explorer-item small {
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

.festival-explorer-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 14px;
}

.festival-explorer-card header {
  margin-bottom: 12px;
}

.festival-explorer-card header small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.festival-explorer-card header h3 {
  margin: 4px 0 0;
  color: var(--brand-strong);
  font-size: 20px;
}

.festival-explorer-summary {
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.45;
}

.festival-explorer-stats,
.festival-explorer-context-list {
  display: grid;
  gap: 10px;
}

.festival-explorer-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.festival-explorer-actions,
.festival-explorer-mini-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.festival-explorer-card textarea {
  min-height: 220px;
  resize: vertical;
}

.festival-command-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.festival-command-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 14px 16px;
}

.festival-command-card small,
.festival-command-column header small,
.festival-command-link small {
  display: block;
  color: var(--muted);
  font-weight: 600;
}

.festival-command-card small {
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 11px;
}

.festival-command-card strong {
  display: block;
  color: var(--brand-strong);
  font-size: 20px;
  line-height: 1.1;
}

.festival-command-card span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.25;
}

.festival-command-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 12px;
}

.festival-command-alerts {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  padding: 14px;
}

.festival-command-alerts header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.festival-command-alerts header strong {
  color: var(--brand-strong);
  font-size: 14px;
}

.festival-command-alerts header small {
  color: var(--muted);
  font-weight: 600;
}

.festival-command-alert-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.festival-command-alert {
  min-height: 58px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  padding: 9px 11px;
  text-align: left;
}

.festival-command-alert.warning {
  border-left-color: var(--accent);
  background: var(--surface);
}

.festival-command-alert.danger {
  border-left-color: #d94d3a;
  background: var(--surface);
}

.festival-command-alert.info {
  border-left-color: var(--blue);
  background: var(--surface);
}

.festival-command-alert span,
.festival-command-alert small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-command-alert span {
  font-weight: 700;
}

.festival-command-alert small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 600;
}

.festival-command-column {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
  min-height: 260px;
}

.festival-command-column header {
  margin-bottom: 12px;
}

.festival-command-column header strong {
  display: block;
  color: var(--brand-strong);
  font-size: 14px;
}

.festival-command-list {
  display: grid;
  gap: 8px;
}

.festival-command-link {
  width: 100%;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
}

.festival-command-link:hover {
  border-color: rgba(23, 107, 105, .45);
  background: var(--surface);
}

.festival-command-link span {
  display: block;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-zone-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.festival-zone-card {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(280px, 1fr) 34px;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.festival-zone-card textarea {
  min-height: 74px;
  resize: vertical;
}

.festival-site-plan {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.festival-plan-timeline {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 0;
}

.festival-plan-moment-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

.festival-plan-moment-tabs button {
  flex: 0 0 auto;
  min-width: 104px;
  min-height: 54px;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.festival-plan-moment-tabs button strong,
.festival-plan-moment-tabs button small {
  display: block;
  text-align: center;
}

.festival-plan-moment-tabs button small {
  max-width: 180px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-plan-moment-tabs button.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.festival-plan-moment-tabs button.is-active small {
  color: rgba(255, 255, 255, .82);
}

.festival-plan-timeline > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.festival-plan-timeline > header strong {
  color: var(--brand-strong);
  font-size: 14px;
}

.festival-plan-timeline > header small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 600;
}

.festival-plan-timeline-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.festival-plan-timeline-icon {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.festival-plan-timeline-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.festival-plan-segmented {
  display: grid;
  gap: 4px;
}

.festival-plan-segmented > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.festival-plan-segmented > div {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}

.festival-plan-segmented button {
  min-height: 30px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 0 10px;
}

.festival-plan-segmented button:last-child {
  border-right: 0;
}

.festival-plan-segmented button.is-active {
  background: var(--brand);
  color: #fff;
}

.festival-plan-timeline-grid {
  display: grid;
  grid-template-columns: 300px repeat(var(--timeline-units), minmax(var(--timeline-unit-size), 1fr));
  min-height: 390px;
  max-height: 560px;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-gutter: stable both-edges;
  touch-action: pan-x pan-y;
  background: var(--panel);
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-grid {
  grid-template-columns: 170px repeat(var(--timeline-zones), minmax(var(--timeline-zone-width, 180px), 1fr));
  grid-template-rows: 50px repeat(var(--timeline-units), minmax(var(--timeline-unit-size), 1fr));
  max-height: 620px;
  overflow: auto;
}

.festival-plan-timeline-corner,
.festival-plan-timeline-date,
.festival-plan-timeline-zone,
.festival-plan-timeline-track {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.festival-plan-timeline-corner,
.festival-plan-timeline-date {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 50px;
  display: grid;
  place-items: center;
  align-content: center;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

.festival-plan-timeline-corner {
  left: 0;
  z-index: 8;
  justify-items: start;
  padding: 0 16px;
  background: #17352f;
  color: #fff;
}

.festival-plan-timeline-corner small,
.festival-plan-timeline-zone small {
  display: block;
  margin-top: 3px;
  color: inherit;
  opacity: .72;
  font-size: 11px;
  font-weight: 600;
}

.festival-plan-timeline-date {
  border-left: 1px solid rgba(0, 0, 0, .08);
  text-align: center;
}

.festival-plan-timeline-date strong {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.1;
}

.festival-plan-timeline-date span,
.festival-plan-timeline-date small {
  display: block;
  line-height: 1.1;
}

.festival-plan-timeline-date small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.festival-plan-timeline-date.is-major {
  border-left-color: rgba(0, 0, 0, .45);
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-date {
  position: sticky;
  left: 0;
  top: auto;
  z-index: 6;
  justify-content: end;
  min-height: var(--timeline-unit-size);
  padding: 0 8px;
  text-align: right;
}

.festival-plan-timeline-zone {
  position: sticky;
  left: 0;
  z-index: 4;
  min-height: 58px;
  border-top: 0;
  border-left: 0;
  background: var(--panel);
  color: var(--brand-strong);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  padding: 0 10px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-plan-timeline-zone strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-zone {
  position: sticky;
  top: 0;
  left: auto;
  z-index: 7;
  min-height: 50px;
  text-align: center;
}

.festival-plan-timeline-zone.is-active {
  background: var(--surface);
  color: var(--brand);
}

.festival-plan-timeline-track {
  position: relative;
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(var(--timeline-units), minmax(var(--timeline-unit-size), 1fr));
  min-height: 58px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px var(--timeline-unit-size)),
    #f3f8f6;
  overflow: hidden;
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-track {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--timeline-units), minmax(var(--timeline-unit-size), 1fr));
  min-height: 360px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px var(--timeline-unit-size)),
    #f3f8f6;
}

.festival-plan-timeline-track > span {
  border-right: 1px solid rgba(0, 0, 0, .08);
}

.festival-plan-timeline-track > span.is-major {
  border-right-color: rgba(0, 0, 0, .25);
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-track > span {
  border-right: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.festival-plan-timeline-bar {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid var(--zone-color);
  border-radius: 6px;
  background: var(--zone-color);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  margin: 3px 4px;
  overflow: hidden;
  padding: 4px 9px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: normal;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

.festival-plan-timeline-bar strong,
.festival-plan-timeline-bar small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.festival-plan-timeline-bar strong {
  font-size: 11px;
  line-height: 1.12;
}

.festival-plan-timeline-bar small {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  opacity: .9;
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-bar {
  left: 8px;
  right: 8px;
  width: auto;
  min-height: 42px;
  transform: none;
}

.festival-plan-timeline-bar.is-dragging {
  cursor: grabbing;
  opacity: .78;
  outline: 3px solid rgba(23, 107, 105, .16);
  box-shadow: 0 10px 22px rgba(12, 25, 23, .18);
}

.festival-plan-timeline-bar.is-logistics {
  background: #2f79b7;
}

.festival-plan-timeline-bar.is-show {
  background: #6d65d8;
}

.festival-plan-timeline.is-wrapped .festival-plan-timeline-bar {
  height: auto;
  min-height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-overflow: clip;
  white-space: normal;
}

.festival-plan-timeline-now {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #f06a2a;
  pointer-events: none;
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-now {
  top: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 2px;
}

.festival-plan-timeline.theme-dark {
  background: #111b18;
  border-color: #29423c;
}

.festival-plan-timeline.theme-dark > header,
.festival-plan-timeline.theme-dark .festival-plan-timeline-grid,
.festival-plan-timeline.theme-dark .festival-plan-timeline-date,
.festival-plan-timeline.theme-dark .festival-plan-timeline-zone {
  background: #111b18;
  color: #f7fbfa;
}

.festival-plan-timeline.theme-dark .festival-plan-timeline-date strong,
.festival-plan-timeline.theme-dark .festival-plan-timeline-date small {
  color: #f7fbfa;
}

.festival-plan-timeline.theme-dark .festival-plan-timeline-track {
  background: #182722;
}

.festival-plan-timeline-overlay {
  position: absolute;
  z-index: 20;
  top: 12px;
  left: 12px;
  width: min(560px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(12, 25, 23, .18);
  padding: 18px 24px 24px;
}

.festival-plan-timeline-close {
  position: absolute;
  top: 8px;
  left: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  line-height: 1;
}

.festival-plan-timeline-help,
.festival-plan-timeline-settings {
  padding-left: 6px;
}

.festival-plan-timeline-help h3,
.festival-plan-timeline-settings h3 {
  margin: 0 0 18px;
  padding-left: 0;
  font-size: 20px;
}

.festival-plan-timeline-help h4 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.festival-plan-timeline-help li {
  margin: 4px 0;
}

.festival-plan-timeline-settings {
  display: grid;
  gap: 18px;
}

.festival-plan-timeline-settings .inline-checkbox {
  justify-content: flex-start;
  gap: 8px;
  font-weight: 600;
}

.festival-program-conductors {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.festival-program-filterbar,
.festival-program-exportbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 14px;
}

.festival-program-exportbar {
  align-items: end;
}

.festival-program-exportbar > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 13px;
}

.festival-program-exportbar > button svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.festival-pilot-plan-timeline {
  min-width: 0;
  overflow: hidden;
}

.festival-pilot-plan-timeline > .festival-structure-columns-board,
.festival-pilot-plan-timeline > .festival-structure-combined-board,
.festival-pilot-plan-timeline > .festival-program-board {
  margin: 0;
}

@media (max-width: 640px) {
  .festival-program-tile-style-row {
    grid-template-columns: 1fr;
  }
}

.festival-timeline-structure-selector {
  display: grid;
  gap: 5px;
  min-width: min(100%, 240px);
}

.festival-timeline-structure-selector > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.festival-timeline-structure-menu {
  position: relative;
}

.festival-timeline-structure-menu > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}

.festival-timeline-structure-menu > summary::-webkit-details-marker {
  display: none;
}

.festival-timeline-structure-menu > summary::after {
  content: "▾";
  color: var(--muted);
}

.festival-timeline-structure-menu[open] > summary::after {
  transform: rotate(180deg);
}

.festival-timeline-structure-list {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 80;
  display: grid;
  min-width: max(100%, 280px);
  max-height: min(420px, 60vh);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(16, 42, 38, .2);
}

.festival-timeline-structure-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.festival-timeline-structure-list label:first-child {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
}

.festival-timeline-structure-list label:hover {
  background: var(--soft);
}

.festival-timeline-structure-list input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-strong);
}

.festival-program-filtergroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: min(100%, 340px);
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.festival-program-filtergroup legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.festival-program-filter {
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
}

.festival-program-board {
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: auto;
}

.festival-program-day-board .festival-program-grid {
  --program-day-width: 220px;
}

.festival-program-stage-head small {
  color: var(--muted);
}

.festival-pilot-kpis {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 4px 16px rgba(13, 62, 58, .07);
}

.festival-pilot-phase {
  margin: 0 0 14px;
  overflow-x: auto;
}

.festival-pilot-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  margin-top: 14px;
  overflow: visible;
}

.festival-pilot-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.festival-pilot-panel > header strong,
.festival-pilot-panel > header small {
  display: block;
}

.festival-pilot-panel > header strong { color: var(--brand-strong); }
.festival-pilot-panel > header small { color: var(--muted); margin-top: 2px; font-weight: 600; }

.festival-pilot-schedule {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 8px;
  padding: 12px;
}

.festival-pilot-slot {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid;
  border-radius: 6px;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.festival-pilot-slot time,
.festival-pilot-slot span,
.festival-pilot-slot strong,
.festival-pilot-slot small { display: block; }
.festival-pilot-slot time { font-size: 11px; font-weight: 600; }
.festival-pilot-slot time strong { font-size: 12px; margin-top: 2px; }
.festival-pilot-slot span { min-width: 0; }
.festival-pilot-slot span strong,
.festival-pilot-slot span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.festival-pilot-slot span small { opacity: .8; margin-top: 3px; font-weight: 600; }

.festival-pilot-structures { display: grid; gap: 8px; padding: 12px; }
.festival-pilot-structure { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.festival-pilot-structure > summary {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr);
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
}
.festival-pilot-structure > summary strong,
.festival-pilot-structure > summary small { display: block; }
.festival-pilot-structure > summary strong { color: var(--brand-strong); }
.festival-pilot-structure > summary small,
.festival-pilot-structure-metrics { color: var(--muted); font-size: 11px; font-weight: 600; }
.festival-pilot-structure-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 10px; }
.festival-pilot-structure > p { margin: 0; padding: 0 14px 13px; color: var(--muted); font-weight: 600; }
.festival-pilot-transversal { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 8px; padding: 12px; }

@media (max-width: 900px) {
  .festival-pilot-kpis { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .festival-pilot-transversal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .festival-pilot-structure > summary { grid-template-columns: 1fr; }
}

.festival-program-quick-add-head {
  position: sticky;
  padding-right: 42px;
}

.festival-program-head-add {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 5px;
  border-color: var(--brand);
  color: var(--brand-strong);
  background: var(--panel);
}

.festival-program-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.festival-program-board-head strong {
  display: block;
  color: var(--brand-strong);
  font-size: 14px;
  font-weight: 700;
}

.festival-program-board-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 600;
}

.festival-program-grid {
  --program-day-width: 185px;
  --program-hour-height: 64px;
  display: grid;
  grid-template-columns: 78px repeat(var(--program-days), var(--program-day-width));
  grid-template-rows: 58px 18px calc(var(--program-hours) * var(--program-hour-height));
  width: max-content;
  min-width: 100%;
  background: var(--surface);
}

.festival-program-corner,
.festival-program-day {
  position: sticky;
  top: 0;
  z-index: 8;
  border-right: 2px solid #173d37;
  border-bottom: 2px solid #173d37;
  background: #123d35;
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
}

.festival-program-day {
  background: var(--panel);
  color: var(--brand-strong);
}

.festival-program-day strong {
  display: block;
  font-weight: 700;
}

.festival-program-day small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.festival-program-hours {
  position: sticky;
  left: 0;
  z-index: 70;
  grid-column: 1;
  grid-row: 3;
  background: var(--panel);
  border-right: 2px solid #173d37;
  isolation: isolate;
}

.festival-program-hours span {
  position: absolute;
  right: 10px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.festival-program-hours span.is-first-hour {
  transform: translateY(5px);
}

.festival-program-hours span.is-last-hour {
  transform: translateY(calc(-100% - 5px));
}

.festival-program-track {
  position: relative;
  grid-row: 3;
  min-height: 100%;
  border-right: 2px solid #173d37;
  overflow: hidden;
  isolation: isolate;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(23, 61, 55, .06) 0,
      rgba(23, 61, 55, .06) 1px,
      transparent 1px,
      transparent 13.5px
    ),
    #eef8f4;
}

.festival-program-track > span {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px solid rgba(23, 61, 55, .52);
}

.festival-program-empty-day {
  position: absolute;
  top: 16px;
  left: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.festival-program-item {
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 42px;
  border: 1px solid var(--program-border, rgba(12, 42, 38, .22));
  border-radius: 6px;
  background: var(--program-color, var(--surface-2));
  color: var(--program-text, var(--ink));
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  padding: 6px 7px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  overflow: hidden;
}

.festival-program-item strong,
.festival-program-item span,
.festival-program-item small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.festival-program-item strong {
  font-weight: 700;
}

.festival-program-item small {
  color: inherit;
  font-size: 11px;
  font-weight: 600;
}

.festival-program-item.is-compact {
  min-height: 0;
  gap: 0;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1.05;
}

.festival-program-item.is-compact strong,
.festival-program-item.is-compact span {
  display: block;
  white-space: nowrap;
}

.festival-program-item.is-micro {
  min-height: 0;
  padding: 1px 4px;
  font-size: 11px;
}

.festival-program-item:hover {
  outline: 3px solid rgba(24, 132, 128, .2);
  transform: translateY(-1px);
}

/* Les textes de la tuile s'empilent au-dessus du filigrane. Deux enfants n'en
   sont pas : le filigrane lui-même, et la pastille d'heure du déplacement, qui
   est posée SUR la tuile et non dans sa ligne de texte. Sans l'exclure, son
   `position: absolute` perdait contre cette règle plus spécifique et elle
   remontait se ranger en haut à droite, dans le flux. */
.festival-program-item > strong,
.festival-program-item > span:not(.festival-service-watermark):not(.festival-program-drag-time),
.festival-program-item > small {
  position: relative;
  z-index: 1;
}

.festival-program-item .festival-service-watermark {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  overflow: visible;
  color: currentColor;
  font-size: 28px;
  line-height: 1;
  opacity: .11;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.festival-program-item.is-compact .festival-service-watermark,
.festival-program-item.is-micro .festival-service-watermark {
  font-size: 20px;
  opacity: .09;
}

.festival-program-item.is-copied {
  outline: 4px solid rgba(24, 132, 128, .55);
  box-shadow: 0 0 0 5px rgba(24, 132, 128, .12);
}

.festival-program-item.is-selected {
  z-index: 8;
  outline: 4px solid var(--brand);
  box-shadow: 0 0 0 5px rgba(24, 132, 128, .16), 0 8px 20px rgba(12, 42, 38, .18);
}

.festival-program-paste-ghost {
  position: fixed;
  z-index: 20000;
  display: grid;
  gap: 2px;
  width: 210px;
  min-height: 70px;
  padding: 10px 12px;
  border: 2px solid var(--brand);
  border-radius: 6px;
  color: var(--brand-strong);
  background: rgba(221, 242, 232, .94);
  box-shadow: 0 12px 30px rgba(12, 42, 38, .24);
  pointer-events: none;
  transform: none;
}

.festival-program-paste-ghost strong,
.festival-program-paste-ghost span,
.festival-program-paste-ghost small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-program-item.is-line .festival-line-label-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-program-paste-ghost small {
  color: var(--muted);
  font-size: 11px;
}

.is-pasting-festival-tile .festival-program-track {
  cursor: copy;
}

.festival-program-track.is-paste-target {
  outline: 3px solid rgba(24, 132, 128, .38);
  outline-offset: -3px;
  background-color: rgba(221, 242, 232, .42);
}

.festival-program-item.is-draggable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.festival-program-item.is-draggable:active,
.festival-program-item.is-dragging {
  cursor: grabbing;
}

.festival-program-item.is-dragging {
  z-index: 90;
  opacity: .92;
  outline: 3px solid rgba(23, 107, 105, .35);
  box-shadow: 0 12px 28px rgba(12, 42, 38, .25);
  transition: none;
}

.festival-program-item.is-dragging .festival-program-drag-time {
  z-index: 95;
}

.festival-program-item.is-dragging:hover {
  transform: none;
}

/* Au milieu de la tuile, pas dans un coin : pendant qu'on déplace, l'heure
   est la seule chose qu'on lit, et on la cherche là où l'œil suit la tuile. */
.festival-program-drag-time {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 8px);
  padding: 2px 6px;
  border-radius: 999px;
  background: #123d35;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.festival-program-item.is-show {
  background: var(--program-color, #d7c393);
}

.festival-program-item.is-doors {
  background: var(--program-color, #b5302e);
  color: var(--program-text, #fff);
  min-height: 28px;
}

.festival-program-item.is-doors small {
  color: inherit;
}

.festival-program-item.is-check {
  background: var(--program-color, #d8dde4);
}

.festival-program-item.is-linked-planning {
  left: 18px;
  right: 18px;
  z-index: 5;
  border-style: dashed;
  background: var(--program-color, #d8dde4);
}

.festival-program-item.is-show + .festival-program-item.is-linked-planning {
  box-shadow: 0 7px 14px rgba(12, 42, 38, .14);
}

.festival-program-item.is-changeover,
.festival-program-item.is-planning {
  background: var(--program-color, #e4dfd6);
}

.festival-program-item.is-setup {
  background: var(--program-color, var(--surface-2));
}

.festival-program-item.is-staffing {
  left: 51%;
  background: var(--program-color, var(--surface-2));
  border-width: 2px;
  z-index: 6;
}

.festival-program-track:has(.festival-program-item.is-staffing) .festival-program-item.is-setup {
  right: 51%;
}

.festival-program-item.is-staffing.is-unassigned {
  border-style: solid;
}

.festival-structure-columns-board {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

/* Le bandeau porte le menu « Colonnes » : son panneau s'ouvre au-dessus de la
   grille. Or les en-têtes de colonnes collants montent à 80 et la bande de
   dates à 81 ; à 12, le bandeau passait dessous et les cartes d'en-tête
   traversaient le menu ouvert. Le bandeau doit dominer sa propre grille. */
.festival-structure-columns-board .festival-program-board-head {
  position: relative;
  z-index: 90;
}

.festival-structure-column-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.festival-structure-add-service {
  width: 42px;
  height: 42px;
  color: var(--brand-strong);
  background: var(--panel);
}

.festival-timeline-shared-line-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 11px;
  color: var(--brand-strong);
  white-space: nowrap;
}

.festival-timeline-shared-line-add svg {
  width: 16px;
  height: 16px;
}

.festival-timeline-shared-lines {
  position: relative;
  z-index: 50;
  grid-row: 3 / 4 !important;
  align-self: stretch;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.festival-timeline-shared-lines .festival-program-item {
  left: 0;
  right: 0;
  width: auto;
  pointer-events: auto;
}

.festival-timeline-shared-lines .festival-program-item.is-shared-line {
  z-index: 8;
  height: 0 !important;
  min-height: 0;
  transform: none;
  border: 0;
  border-top: 3px var(--shared-line-style, solid) var(--program-border, #b5302e);
  background: transparent;
  padding: 0 !important;
}

.festival-program-text-overlay {
  position: relative;
  z-index: 60;
  grid-row: 3 / 4 !important;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.festival-program-text-overlay-item {
  position: absolute;
  right: 8px;
  left: 8px;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 2px;
  box-sizing: border-box;
  padding: 6px 7px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.festival-program-text-overlay-copy {
  position: relative;
  display: inline-grid;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: auto;
  transition: transform .12s ease;
}

.festival-program-text-overlay-copy.has-line-knockout {
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--program-text-backdrop, var(--panel));
  box-shadow: 0 0 0 2px var(--program-text-backdrop, #fff);
}

.festival-program-text-overlay-item strong,
.festival-program-text-overlay-item span,
.festival-program-text-overlay-item small {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.festival-program-text-overlay-item strong {
  font-weight: 700;
}

.festival-program-text-overlay-item small {
  color: inherit;
  font-size: 11px;
  font-weight: 600;
}

.festival-program-text-overlay-item.is-compact {
  gap: 0;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1.05;
}

.festival-program-text-overlay-item.is-compact .festival-program-text-overlay-copy {
  gap: 0;
}

.festival-program-text-overlay-item.is-micro {
  padding: 1px 4px;
  font-size: 11px;
}

.festival-program-text-overlay-item .festival-service-watermark {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  color: currentColor;
  font-size: 28px;
  opacity: .12;
  transform: translate(-50%, -50%);
}

/* Le filigrane de service n'est pas du texte : il appartient au fond de la
   tuile, et la couche de texte ne le reprend pas. En masquant tous les
   « span » de la tuile, on l'effaçait avec l'horaire — les colonnes traversées
   par une ligne commune perdaient leur marque de service. */
.festival-program-track.has-text-overlay > .festival-program-item:not(.is-line) > strong,
.festival-program-track.has-text-overlay > .festival-program-item:not(.is-line) > span:not(.festival-service-watermark):not(.festival-program-drag-time),
.festival-program-track.has-text-overlay > .festival-program-item:not(.is-line) > small {
  visibility: hidden;
}

.festival-program-track.has-text-overlay.is-dragging-tile > .festival-program-item:not(.is-line) > strong,
.festival-program-track.has-text-overlay.is-dragging-tile > .festival-program-item:not(.is-line) > span:not(.festival-service-watermark),
.festival-program-track.has-text-overlay.is-dragging-tile > .festival-program-item:not(.is-line) > small {
  visibility: visible;
}

.festival-program-track.is-dragging-tile + .festival-program-text-overlay {
  visibility: hidden;
}

.festival-program-track .festival-program-item.is-shared-line-segment {
  right: 0;
  left: 0;
  z-index: 1;
  width: auto;
  border-top: 5px solid var(--program-border, #b5302e);
  pointer-events: none;
}

.festival-structure-columns-day {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: clamp(380px, 68vh, 760px);
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  border-top: 1px solid var(--line);
}

.festival-structure-columns-board.is-expanded .festival-structure-columns-day {
  max-height: none;
}

.festival-structure-combined-board {
  width: 100%;
  min-width: 0;
}

.festival-structure-combined-grid {
  min-width: max-content;
}

.festival-structure-timeline-expand {
  position: sticky;
  left: 0;
  z-index: 22;
}

.festival-structure-columns-day:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent);
  outline-offset: -3px;
}

.festival-structure-columns-date {
  display: block;
  position: sticky;
  left: 0;
  width: max-content;
  padding: 8px 12px;
  color: var(--brand-strong);
  background: var(--panel);
}

.festival-structure-columns-grid {
  --program-day-width: 235px;
  grid-template-rows: 116px 18px calc(var(--program-hours) * var(--program-hour-height));
}

.festival-structure-columns-grid .festival-program-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
}

.festival-structure-column-head {
  position: sticky;
  display: block;
  padding: 0;
}

.festival-structure-column-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 38px 10px 8px;
  box-sizing: border-box;
  line-height: 1.08;
}

.festival-structure-column-copy strong {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.08;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.festival-structure-column-head .festival-structure-name {
  max-width: 100%;
  margin-bottom: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-structure-column-head .festival-structure-phase {
  display: block;
  margin-bottom: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.festival-structure-column-head .festival-structure-date {
  margin-top: 4px;
  line-height: 1.1;
}

.festival-structure-column-head .festival-structure-grouped-artist {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-structure-column-head-actions {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  min-height: 26px;
  overflow: hidden;
}

.festival-structure-column-head-actions .festival-structure-column-add,
.festival-structure-column-head-actions .festival-column-eye,
.festival-structure-column-head-actions .festival-column-edit,
.festival-structure-column-head-actions .festival-column-trash,
.festival-structure-column-head-actions .festival-concert-group-toggle {
  position: static;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
}

.festival-structure-column-head-actions svg {
  width: 13px;
  height: 13px;
}

.festival-concert-group-toggle {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.festival-concert-group-toggle:hover {
  border-color: var(--brand);
  background: var(--surface);
}

.festival-column-edit {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--brand-strong);
  cursor: pointer;
}

.festival-column-edit svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.festival-column-edit:hover {
  border-color: var(--brand-strong);
  background: var(--surface);
}

.festival-structure-admin-badge {
  display: inline-flex;
  align-self: center;
  margin: 1px 0 2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #1d2f2b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.festival-structure-column-add {
  position: absolute;
  top: 6px;
  right: 31px;
  width: 21px;
  height: 21px;
  min-height: 21px;
  padding: 3px;
  border-color: var(--line-strong);
}

.festival-structure-column-add svg {
  width: 12px;
  height: 12px;
}

.festival-structure-column-head.is-concert {
  border-left: 4px solid var(--brand-strong);
  background: var(--surface-2);
}

.festival-column-eye {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
}

.festival-column-eye svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.festival-column-eye:hover {
  border-color: var(--brand-strong);
  color: var(--brand-strong);
}

.festival-structure-column-picker {
  position: relative;
}

.festival-timeline-column-controls {
  display: flex;
  justify-content: flex-end;
  position: relative;
  /* Même raison que le bandeau de structure : le panneau retombe sur les
     en-têtes collants de la grille, qui montent à 80. */
  z-index: 90;
}

.festival-structure-column-picker summary {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--brand-strong);
  font-weight: 700;
  cursor: pointer;
}

.festival-structure-column-picker > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 230px;
  max-height: 320px;
  overflow: auto;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(16, 42, 38, .18);
  z-index: 40;
}

.festival-column-order-hint {
  margin: 0 0 5px;
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.festival-structure-column-option {
  display: grid;
  grid-template-columns: 18px 28px minmax(120px, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid transparent;
}

.festival-structure-column-option.is-hidden {
  color: var(--muted);
  background: var(--surface);
}

.festival-structure-column-option.is-dragging {
  opacity: .45;
}

.festival-structure-column-option.is-drag-target {
  border-color: var(--brand-strong);
  box-shadow: inset 3px 0 var(--brand-strong);
}

.festival-column-grip {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: -4px;
  cursor: grab;
  user-select: none;
}

.festival-column-visibility,
.festival-column-order-controls button {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.festival-structure-column-option .festival-column-visibility {
  position: static;
  top: auto;
  right: auto;
  min-width: 20px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-2);
}

.festival-structure-column-option.is-hidden .festival-column-visibility {
  opacity: .45;
}

.festival-column-visibility:hover,
.festival-column-order-controls button:hover:not(:disabled) {
  background: rgba(23, 107, 105, .12);
}

.festival-column-order-controls {
  display: flex;
  gap: 2px;
}

.festival-column-order-controls button:disabled {
  opacity: .25;
  cursor: default;
}

.festival-column-option-label {
  min-width: 0;
  display: grid;
  line-height: 1.15;
}

.festival-column-option-label strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-column-option-label small {
  color: var(--muted);
  font-size: 11px;
}

.festival-structure-columns-grid .festival-program-item.is-staffing {
  left: 8px;
}

.festival-structure-columns-grid .festival-program-track:has(.festival-program-item.is-staffing) .festival-program-item.is-setup {
  right: 8px;
}

.staffing-unassigned-badge {
  display: inline-flex !important;
  width: max-content;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #d39b2a;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1.2;
  text-transform: uppercase;
}

@media print {
  .staffing-unassigned-badge {
    display: none !important;
  }

  .no-export,
  .festival-structure-column-picker {
    display: none !important;
  }
}

.festival-program-item.is-line {
  z-index: 20;
  height: 0 !important;
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-top: 3px solid #b5302e;
  border-radius: 0;
  background: transparent;
  color: #842521;
  box-shadow: none;
}

.festival-program-item.is-line strong {
  position: absolute;
  z-index: 22;
  left: 5px;
  top: auto;
  bottom: 4px;
  max-width: min(58%, calc(100% - 10px));
  box-sizing: border-box;
  padding: 1px 5px;
  overflow: visible;
  border: 1px solid rgba(181, 48, 46, .35);
  border-radius: 6px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 3px rgba(33, 25, 24, .1);
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-program-item.is-isolated-line strong::after {
  position: absolute;
  left: 12px;
  width: 0;
  height: 4px;
  border-left: 2px solid #b5302e;
  content: "";
}

.festival-program-item.is-isolated-line.is-label-above strong::after {
  top: 100%;
}

.festival-program-item.is-line.is-label-below strong {
  top: 4px;
  bottom: auto;
}

.festival-program-item.is-isolated-line.is-label-below strong::after {
  bottom: 100%;
}

.festival-program-item.is-isolated-line.is-label-shifted strong {
  box-shadow: 0 2px 5px rgba(33, 25, 24, .14);
}

.festival-timeline-shared-lines .festival-program-item.is-shared-line strong {
  display: none !important;
}

.festival-timeline-shared-lines .festival-program-item.is-shared-line.is-label-right strong {
  display: none !important;
}

.festival-timeline-shared-lines .festival-program-item.is-shared-line.is-at-timeline-start strong {
  display: none !important;
}

.festival-shared-line-legend {
  position: sticky;
  left: 0;
  z-index: 6;
  display: grid;
  gap: 12px;
  width: min(100%, 1240px);
  box-sizing: border-box;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.festival-shared-line-legend-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.festival-shared-line-legend-heading > span,
.festival-shared-line-legend-heading strong,
.festival-shared-line-legend-heading small {
  display: block;
}

.festival-shared-line-legend-heading strong {
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.festival-shared-line-legend-heading small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.festival-shared-line-legend-heading em {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.festival-shared-line-legend-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
  gap: 10px;
}

.festival-shared-line-legend-day {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.festival-shared-line-legend-day > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.festival-shared-line-legend-day > header span,
.festival-shared-line-legend-day > header strong,
.festival-shared-line-legend-day > header small {
  display: block;
}

.festival-shared-line-legend-day > header strong {
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
}

.festival-shared-line-legend-day > header small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.festival-shared-line-legend-day > header em {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--brand-strong);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.festival-shared-line-legend-day-entries {
  display: grid;
}

.festival-shared-line-legend-entry {
  display: grid;
  grid-template-columns: 44px 30px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--line-soft, var(--line));
  border-radius: 0;
  background: var(--panel);
  color: var(--brand-strong);
  cursor: pointer;
  text-align: left;
}

.festival-shared-line-legend-entry:last-child { border-bottom: 0; }

.festival-shared-line-legend-entry:hover {
  background: var(--surface);
}

.festival-shared-line-legend-entry:focus-visible {
  outline: 3px solid rgba(31, 134, 132, .22);
  outline-offset: -3px;
}

.festival-shared-line-legend-entry time {
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
}

.festival-shared-line-legend-copy,
.festival-shared-line-legend-copy strong,
.festival-shared-line-legend-copy small {
  display: block;
}

.festival-shared-line-legend-copy strong {
  font-size: 11px;
  font-weight: 700;
}

.festival-shared-line-legend-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.festival-shared-line-legend-rule {
  display: block;
  width: 28px;
  border-top: 3px solid #b5302e;
}

.festival-shared-line-legend-edit {
  display: grid;
  place-items: center;
  color: var(--muted);
  opacity: .45;
}

.festival-shared-line-legend-edit svg { width: 15px; height: 15px; }
.festival-shared-line-legend-entry:hover .festival-shared-line-legend-edit { opacity: 1; }

@media (max-width: 640px) {
  .festival-shared-line-legend { padding-inline: 10px; }
  .festival-shared-line-legend-list { grid-template-columns: 1fr; }
}

.festival-shared-line-color-input {
  width: 100%;
  min-height: 48px;
  padding: 5px;
  cursor: pointer;
}

.festival-shared-line-style-preview {
  width: 100%;
  min-height: 24px;
  margin-top: 12px;
  border-top-width: 4px;
  border-top-style: solid;
  border-top-color: #b5302e;
}

.festival-structure-columns-grid .festival-program-corner,
.festival-structure-columns-grid .festival-program-day,
.festival-show-comparative-grid .festival-program-corner,
.festival-show-comparative-grid .festival-program-day {
  z-index: 80;
}

.festival-plan-view-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.festival-plan-view-switch > strong {
  color: var(--brand-strong);
  font-size: 12px;
}

.festival-plan-view-switch .festival-plan-segmented {
  display: inline-flex;
}

.festival-plan-programming-view {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.festival-program-pdf-format {
  min-width: 132px;
}

.festival-program-pdf-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.festival-program-pdf-filters > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.festival-program-pdf-filters label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.festival-program-pdf-filters input {
  width: 17px;
  height: 17px;
  accent-color: var(--brand);
}

.festival-show-conductor-board {
  margin-bottom: 16px;
  max-height: none;
  overflow: hidden;
}

.festival-structure-combined-column-picker > div {
  min-width: 310px;
}

.festival-combined-column-group {
  display: grid;
  gap: 4px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.festival-combined-column-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.festival-combined-column-group > strong {
  padding: 4px 5px 2px;
  color: var(--brand-strong);
  font-size: 11px;
  text-transform: uppercase;
}

.festival-structure-service-config {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.festival-structure-service-admin-toggle {
  min-height: 44px;
  justify-content: center;
  align-self: end;
}

.festival-structure-service-header-popover {
  width: min(430px, calc(100vw - 24px));
}

.festival-structure-service-header-popover .festival-structure-service-config {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.festival-structure-service-header-popover .festival-structure-service-admin-toggle {
  width: 100%;
  min-height: 48px;
  justify-content: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.festival-structure-service-header-popover .festival-program-tile-popover-actions {
  margin-top: 14px;
}

.festival-column-trash {
  position: absolute;
  top: 6px;
  right: 56px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #efc8c4;
  border-radius: 999px;
  background: var(--surface);
  color: #c64135;
  cursor: pointer;
}

.festival-column-trash svg,
.festival-column-delete svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.festival-column-trash:hover,
.festival-column-delete:hover {
  border-color: #c64135;
  background: var(--surface-2);
}

.festival-column-delete {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #efc8c4;
  border-radius: 6px;
  background: var(--surface);
  color: #c64135;
  cursor: pointer;
}

.festival-show-conductor-board .festival-program-grid {
  --program-day-width: 220px;
}

.festival-show-timeline-viewport {
  max-height: 590px;
  overflow: auto;
}

.festival-show-conductor-board.is-expanded .festival-show-timeline-viewport {
  max-height: none;
}

.festival-show-timeline-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--brand-strong);
  background: var(--surface);
  font-weight: 700;
}

.festival-show-timeline-expand:hover {
  background: var(--surface);
}

.festival-show-timeline-expand svg {
  width: 17px;
  height: 17px;
}

.planning-row-generated {
  grid-template-columns: minmax(180px, 1.15fr) 110px 110px minmax(180px, 1.5fr);
  background: var(--surface);
  border-style: dashed;
}

.festival-structure-service-popover {
  z-index: 10050 !important;
  width: min(520px, calc(100vw - 24px));
  gap: 10px;
  padding: 16px;
  overflow: visible;
}

.festival-structure-service-popover > strong {
  color: var(--brand-strong);
  font-weight: 700;
  font-size: 14px;
}

.festival-structure-service-help {
  display: block;
  margin-top: -4px;
  color: var(--muted);
  font-weight: 600;
}

.festival-structure-service-popover .detail-control {
  min-width: 0;
  padding: 9px;
}

.festival-structure-service-popover .detail-control select {
  width: 100%;
  min-width: 0;
}

.festival-structure-service-popover > .primary-button {
  width: 100%;
}

@media (max-width: 640px) {
  .festival-structure-service-config {
    grid-template-columns: 1fr;
  }
}

.festival-structure-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.festival-structure-service-list button {
  min-width: 0;
}

.festival-structure-service-list button.is-existing {
  border-color: var(--line-strong);
  background: var(--surface);
}

.festival-structure-service-list button.is-existing:disabled {
  color: var(--muted);
  opacity: .72;
}

.festival-structure-service-list button.is-hidden {
  border-color: var(--brand);
  color: var(--brand-strong);
  background: var(--surface);
}

.planning-row-generated .detail-cell small {
  color: var(--brand-strong);
}

.festival-site-plan-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  align-items: start;
}

.festival-site-plan-canvas {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.festival-plan-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.festival-plan-board {
  position: relative;
  min-height: 560px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background:
    linear-gradient(rgba(23, 107, 105, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 107, 105, .06) 1px, transparent 1px),
    linear-gradient(rgba(23, 107, 105, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 107, 105, .11) 1px, transparent 1px),
    #f8fbfa;
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}

.festival-plan-zone {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 4px;
  border: 2px solid var(--zone-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--zone-color) 14%, var(--panel));
  color: var(--ink);
  cursor: grab;
  padding: 9px 10px 10px 34px;
  box-shadow: 0 10px 24px rgba(12, 25, 23, .08);
  transform-origin: center center;
  user-select: none;
  touch-action: none;
}

.festival-plan-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 48%);
  pointer-events: none;
}

.festival-plan-zone.is-selected {
  outline: 3px solid rgba(23, 107, 105, .18);
  box-shadow: 0 14px 34px rgba(12, 25, 23, .18);
}

.festival-plan-zone.is-dragging {
  opacity: .34;
  filter: saturate(.7);
}

.festival-plan-zone.is-ghost {
  z-index: 20;
  opacity: .72;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--zone-color) 24%, transparent) 0 8px, rgba(255,255,255,.48) 8px 16px),
    color-mix(in srgb, var(--zone-color) 10%, white);
  border: 2.5px dashed var(--zone-color);
  box-shadow: 0 18px 38px rgba(12, 25, 23, .18);
  pointer-events: none;
}

.festival-plan-zone.is-ghost::before {
  background: rgba(255,255,255,.14);
}

.festival-plan-zone.is-ghost strong,
.festival-plan-zone.is-ghost small {
  color: color-mix(in srgb, var(--zone-color) 55%, var(--ink));
}

.festival-plan-zone-icon {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--zone-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.festival-plan-zone strong,
.festival-plan-zone small {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.festival-plan-zone strong {
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.festival-plan-zone small {
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.festival-plan-zone.type-stage {
  border-radius: 6px;
}

.festival-plan-zone.type-tent {
  border-radius: 10px 10px 10px 10px;
}

.festival-plan-zone.type-barrier {
  min-height: 28px;
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--zone-color) 32%, white) 0 8px, #fff 8px 16px);
}

.festival-plan-zone.type-access {
  border-style: dashed;
  background: var(--panel);
}

.festival-plan-zone.type-security {
  border-radius: 999px;
}

.festival-plan-rotate {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 2;
  width: 16px;
  height: 16px;
  border: 2px solid var(--zone-color);
  border-right-color: transparent;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  cursor: grab;
}

.festival-plan-rotate::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 5px solid var(--zone-color);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.festival-plan-resize {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--zone-color);
  border-bottom: 3px solid var(--zone-color);
  border-radius: 0 0 4px 0;
  background: rgba(255,255,255,.72);
  cursor: nwse-resize;
}

.festival-plan-panel {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  padding: 14px;
}

.festival-plan-panel header small {
  display: block;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.festival-plan-panel header strong {
  display: block;
  margin-top: 4px;
  color: var(--brand-strong);
  font-size: 16px;
}

.festival-plan-panel-fields {
  display: grid;
  gap: 10px;
}

.festival-plan-panel-summary {
  display: grid;
  gap: 8px;
}

.festival-plan-panel-summary .detail-cell {
  background: var(--surface);
  box-shadow: none;
}

.festival-plan-panel-note {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.35;
  padding: 12px;
}

.festival-plan-panel-fields textarea {
  min-height: 92px;
  resize: vertical;
}

.festival-plan-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.festival-zone-sheet-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin: 12px 0;
  border: 1.5px solid var(--line);
  border-left: 6px solid var(--zone-color, var(--brand));
  border-radius: 6px;
  background: var(--panel);
  padding: 18px;
}

.festival-zone-sheet-hero h3 {
  margin: 2px 0 6px;
  color: var(--brand-strong);
  font-size: 28px;
}

.festival-zone-sheet-hero p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.festival-zone-sheet-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.festival-zone-sheet-fields .detail-control:last-child {
  grid-column: 1 / -1;
}

.festival-groups-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.festival-groups-head strong {
  color: var(--brand-strong);
  font-size: 16px;
}

.festival-groups-head span {
  color: var(--muted);
  font-weight: 600;
}

.festival-groups-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.festival-group-card {
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
}

.festival-group-card:hover {
  border-color: rgba(23, 107, 105, .45);
  background: var(--surface);
}

.festival-group-card small,
.festival-group-card span {
  display: block;
  color: var(--muted);
  font-weight: 600;
}

.festival-group-card strong {
  display: block;
  margin: 6px 0;
  color: var(--brand-strong);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-structure {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start;
}

.festival-manager-card,
.festival-day-board-card,
.festival-scene-sheet,
.festival-scene-day-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.festival-manager-card {
  display: grid;
  gap: 12px;
}

.festival-manager-card header strong,
.festival-day-board-card header strong,
.festival-scene-day-card header strong {
  display: block;
  color: var(--brand-strong);
  font-size: 14px;
}

.festival-manager-card header small,
.festival-day-board-card header small,
.festival-scene-day-card header small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 600;
}

.festival-day-tabs,
.festival-scene-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.festival-day-tab,
.festival-scene-tab {
  min-width: 120px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
}

.festival-day-tab strong,
.festival-scene-tab {
  font-weight: 700;
}

.festival-day-tab small {
  display: block;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
}

.festival-day-tab.is-active,
.festival-scene-tab.is-active {
  border-color: rgba(23, 107, 105, 0.45);
  background: var(--surface);
  color: var(--brand-strong);
  box-shadow: inset 0 0 0 2px rgba(23, 107, 105, 0.12);
}

.festival-current-day,
.festival-stage-manager-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 145px 34px;
  gap: 8px;
  align-items: center;
}

.festival-stage-manager-list {
  display: grid;
  gap: 8px;
}

.festival-stage-manager-row {
  grid-template-columns: minmax(170px, 1fr) 120px 34px;
}

.festival-selected-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.festival-selected-day-head h3 {
  margin: 2px 0;
  font-size: 20px;
}

.festival-selected-day-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.festival-day-board {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.festival-day-board-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 250px;
}

.festival-day-board-card.site {
  background: var(--surface);
  border-color: #e6c8ad;
}

.festival-day-board-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.festival-scene-sheet {
  display: grid;
  gap: 14px;
}

.festival-scene-note {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.festival-scene-note h3 {
  margin: 0 0 10px;
  color: var(--brand-strong);
}

.festival-scene-note textarea {
  min-height: 180px;
  resize: vertical;
}

.festival-scene-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(280px, 1fr);
  gap: 12px;
  align-items: stretch;
}

.festival-rider-box {
  display: grid;
  gap: 8px;
}

.festival-rider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 8px;
}

.festival-rider-grid.compact {
  grid-template-columns: minmax(180px, 360px);
}

.festival-rider-box textarea {
  min-height: 170px;
  resize: vertical;
}

.festival-site-hero,
.festival-scene-resource-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.festival-site-hero {
  justify-content: space-between;
  border: 1px solid #e6c8ad;
  border-radius: 6px;
  background: var(--surface);
  padding: 12px;
}

.festival-scene-days {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.festival-scene-day-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 210px;
}

.festival-scene-day-card.phase {
  background: var(--panel);
}

.festival-scene-day-card.phase.dismantling {
  background: var(--surface);
}

.festival-mini-timeline {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.festival-mini-timeline h3 {
  margin: 0;
  color: var(--brand-strong);
}

.festival-mini-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.festival-mini-timeline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.festival-mini-timeline-filters select,
.festival-mini-timeline-filters input {
  min-height: 36px;
}

.festival-mini-timeline-list {
  display: grid;
  gap: 8px;
}

.festival-mini-day-group {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
}

.festival-mini-day-group > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.festival-mini-day-group > header small {
  color: var(--muted);
  font-weight: 600;
}

.festival-mini-timeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  gap: 8px;
  align-items: center;
}

.festival-mini-timeline-item {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  padding: 9px 11px;
  text-align: left;
}

.festival-mini-timeline-item.site {
  border-left-color: #c98249;
}

.festival-mini-timeline-item.show {
  border-left-color: #6d8edf;
}

.festival-mini-timeline-item small,
.festival-mini-timeline-item span {
  color: var(--muted);
  font-weight: 600;
}

.festival-action-popover {
  position: fixed;
  z-index: 9999;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  max-height: min(78vh, 620px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 12px;
}

.festival-action-info {
  gap: 12px;
}

.festival-action-info > strong {
  color: var(--brand-strong);
  font-size: 14px;
}

.festival-action-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.festival-action-info-grid span,
.festival-action-info-links {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 8px;
}

.festival-action-info-grid small,
.festival-action-info-links small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.festival-action-info-grid b,
.festival-action-info-links b {
  color: var(--ink);
}

.festival-action-info-links {
  display: grid;
  gap: 6px;
}

.festival-action-info-links p {
  margin: 0;
}

.festival-action-quick-links {
  display: grid;
  gap: 6px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  padding: 8px;
}

.inline-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}

.inline-checkbox input {
  min-height: 0;
  width: 18px;
  height: 18px;
  padding: 0;
}

.festival-action-popover textarea {
  min-height: 90px;
  resize: vertical;
}

.festival-action-sheet-actions,
.festival-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.festival-action-links {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 8px;
}

.festival-action-links small {
  width: 100%;
  color: var(--muted);
  font-weight: 700;
}

/* ── Gantt redesign ────────────────────────── */
.gantt-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.gantt-toolbar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.gantt-btn {
  font-size: 11px;
  padding: 6px 12px;
}
.gantt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.gantt-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  transition: opacity .15s;
}
.gantt-legend-chip[data-kind="phase"]     { color: #c98249; }
.gantt-legend-chip[data-kind="show"]      { color: #6d8edf; }
.gantt-legend-chip[data-kind="day"]       { color: #6d8edf; }
.gantt-legend-chip[data-kind="site"]      { color: #c98249; }
.gantt-legend-chip[data-kind="stage"]     { color: var(--brand); }
.gantt-legend-chip[data-kind="logistics"] { color: #5c9689; }
.gantt-legend-chip[data-kind="rh"]        { color: #9a6bc1; }
.gantt-legend-chip[data-kind="admin"]     { color: #d7a62f; }
.gantt-legend-chip[data-kind="milestone"] { color: #d7a62f; }
.gantt-legend-chip[data-phase="etude"]       { color: #c98249; }
.gantt-legend-chip[data-phase="preparation"] { color: #6d8edf; }
.gantt-legend-chip[data-phase="exploitation"]{ color: #176B69; }
.gantt-legend-chip[data-phase="bilan"]       { color: #7c6fd4; }
.gantt-legend-chip[data-kind="all"]       { color: #176B69; }
.gantt-legend-chip.is-active {
  border-color: #176B69;
  background: #176B69;
  color: #fff !important;
}
.gantt-legend-chip.is-hidden { opacity: .35; text-decoration: line-through; }
.gantt-wrap {
  overflow-x: auto;
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
}
.gantt-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 10px;
  align-items: center;
  min-width: 700px;
}
.gantt-scale-row {
  margin-bottom: 4px;
}
.gantt-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}
.gantt-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.gantt-milestone-btn {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.gantt-milestone-btn:hover { border-color: var(--brand); color: var(--brand); }
.gantt-remove-btn:hover { border-color: #c0392b; color: #c0392b; }
.gantt-track {
  position: relative;
  height: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: visible;
}
.gantt-scale-row .gantt-track {
  display: flex;
  height: auto;
  min-height: 40px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.gantt-track-today {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(23,107,105,.07);
  pointer-events: none;
  z-index: 0;
}
.gantt-bar {
  position: absolute;
  top: 4px; bottom: 4px;
  min-width: 10px;
  border-radius: 6px;
  background: var(--brand);
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}
.gantt-bar span {
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-kind-phase .gantt-bar,
.gantt-kind-site .gantt-bar   { background: linear-gradient(90deg,#c98249,#e8a56c); }
.gantt-kind-show .gantt-bar,
.gantt-kind-day .gantt-bar    { background: linear-gradient(90deg,#4a72cc,#6d8edf); }
.gantt-kind-stage .gantt-bar  { background: linear-gradient(90deg,#176B69,#3aada9); }
.gantt-kind-logistics .gantt-bar { background: linear-gradient(90deg,#3a7a6c,#5c9689); }
.gantt-kind-rh .gantt-bar     { background: linear-gradient(90deg,#7a4aaa,#9a6bc1); }
.gantt-kind-admin .gantt-bar,
.gantt-kind-milestone .gantt-bar { background: linear-gradient(90deg,#b8891e,#d7a62f); }
.gantt-kind-header {
  grid-column: 1 / -1;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--surface);
  color: var(--brand-strong);
  margin-top: 6px;
  min-width: 700px;
}
.gantt-scale-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0;
  border-right: 1px solid var(--line);
  height: 36px;
}
.gantt-scale-cell strong { font-size: 11px; color: var(--ink); }
.gantt-scale-cell.gantt-today-cell strong { color: var(--brand); }
.gantt-scale-cell.gantt-today-cell { background: rgba(23,107,105,.06); border-radius: 6px; }
.gantt-today-line {
  position: absolute;
  top: 36px; bottom: 0;
  width: 2px;
  background: var(--brand);
  opacity: .5;
  pointer-events: none;
  z-index: 10;
}

/* Keep old classes for backward compat on scale */
.festival-gantt-scale,
.festival-gantt-row {
  display: grid;
  grid-template-columns: 210px minmax(420px, 1fr);
  gap: 10px;
}

.festival-gantt-scale {
  color: var(--muted);
  font-weight: 600;
}

.festival-gantt-scale .festival-gantt-track {
  display: flex;
  height: auto;
  min-height: 30px;
  border: 0;
  background: transparent;
}

.festival-gantt-scale .festival-gantt-track span {
  position: static;
  min-width: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  padding: 0 4px;
  text-align: center;
}

.festival-gantt {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.festival-gantt-row {
  align-items: center;
  min-width: 760px;
}

.festival-gantt-row > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-link-add {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--brand-strong);
  font-weight: 700;
  cursor: pointer;
}

.festival-gantt-track {
  position: relative;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.festival-gantt-track span {
  position: absolute;
  top: 5px;
  bottom: 5px;
  min-width: 14px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  padding: 2px 7px;
  white-space: nowrap;
}

.festival-gantt-row.phase .festival-gantt-track span,
.festival-gantt-row.site .festival-gantt-track span {
  background: #c98249;
}

.festival-gantt-row.show .festival-gantt-track span {
  background: #6d8edf;
}

.festival-gantt-row.logistics .festival-gantt-track span {
  background: #5c9689;
}

.festival-gantt-row.rh .festival-gantt-track span {
  background: #9a6bc1;
}

.festival-gantt-row.admin .festival-gantt-track span,
.festival-gantt-row.milestone .festival-gantt-track span {
  background: #d7a62f;
}

.festival-production-toolbar,
.festival-plan-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.festival-production-switch {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 12px;
  margin-bottom: 12px;
}

.festival-production-step {
  display: grid;
  align-content: center;
  min-width: 135px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  padding: 10px;
  text-align: center;
}

.festival-production-step small {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
}

.festival-production-step strong {
  font-size: 28px;
  line-height: 1;
}

.festival-production-step span {
  margin-top: 7px;
  border-radius: 6px;
  background: #6d8edf;
  color: #fff;
  font-weight: 700;
  padding: 7px 8px;
}

.festival-production-step.phase span {
  background: #c98249;
}

.festival-production-step.phase:last-child span {
  background: #5c9689;
}

.festival-production-step.is-active {
  border-color: rgba(23, 107, 105, 0.45);
  box-shadow: inset 0 0 0 3px rgba(23, 107, 105, 0.18), 0 10px 26px rgba(24, 35, 32, 0.08);
}

.festival-production-head {
  border: 1px solid var(--line);
  border-left: 6px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.festival-production-head.phase {
  border-left-color: #c98249;
}

.festival-production-head h3 {
  margin: 2px 0;
  font-size: 20px;
}

.festival-production-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.festival-production-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.festival-production-column {
  display: grid;
  grid-template-rows: auto minmax(130px, 1fr) auto;
  gap: 10px;
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.festival-production-column.site {
  background: var(--surface);
  border-color: #ead0b8;
}

.festival-production-column header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.festival-production-column header strong {
  display: block;
  color: var(--brand-strong);
  font-size: 16px;
}

.festival-production-column header small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.25;
}

.festival-production-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.festival-production-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.festival-plan-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.festival-plan-grid {
  display: grid;
}

.festival-plan-corner,
.festival-plan-column,
.festival-plan-stage-head,
.festival-plan-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.festival-plan-corner,
.festival-plan-stage-head {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
}

.festival-plan-corner {
  top: 0;
  display: grid;
  align-content: center;
  min-height: 92px;
  padding: 14px;
}

.festival-plan-corner small,
.festival-plan-column small,
.festival-plan-chip small {
  color: var(--muted);
  font-weight: 600;
}

.festival-plan-column {
  display: grid;
  align-content: center;
  min-height: 92px;
  border-top: 0;
  border-left: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  padding: 12px;
  text-align: center;
}

.festival-plan-column strong {
  font-size: 28px;
  line-height: 1;
}

.festival-plan-column span {
  margin-top: 8px;
  border-radius: 6px;
  color: #fff;
  background: #6d8edf;
  font-weight: 700;
  padding: 8px 10px;
}

.festival-plan-column.phase span {
  background: #c98249;
}

.festival-plan-column.phase:last-child span {
  background: #5c9689;
}

.festival-plan-column.is-current {
  box-shadow: inset 0 0 0 3px rgba(23, 107, 105, 0.28);
}

.festival-plan-stage-head {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 150px;
  padding: 14px;
}

.festival-plan-stage-head strong {
  color: var(--brand-strong);
  font-size: 14px;
}

.festival-plan-cell {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 150px;
  padding: 10px;
  background: var(--panel);
}

.festival-plan-cell.phase {
  background: var(--panel);
}

.festival-plan-empty {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}

.festival-plan-chip {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 9px;
  text-align: left;
}

.festival-action-chip-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  width: 100%;
}

.festival-action-chip-row .festival-plan-chip {
  flex: 1 1 auto;
  min-width: 0;
}

.festival-action-chip-row .icon-action {
  flex: 0 0 34px;
  align-self: stretch;
}

.festival-plan-chip.show {
  border-color: #b8c9ed;
  background: var(--surface);
}

.festival-plan-chip.stage {
  border-color: var(--line-strong);
  background: var(--surface);
}

.festival-plan-chip.site {
  border-color: #e6c8ad;
  background: var(--surface);
}

.festival-plan-chip.phase {
  border-color: #efd1bb;
  background: var(--surface);
}

.festival-plan-chip.phase.dismantling {
  border-color: var(--line-strong);
  background: var(--surface);
}

.festival-plan-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.festival-plan-add {
  min-height: 30px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--brand-strong);
  cursor: pointer;
  font-weight: 700;
  padding: 0 9px;
}

.festival-plan-add:hover,
.festival-plan-chip:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 22px rgba(18, 34, 31, 0.08);
}

.festival-stage-list,
.festival-stage-board,
.festival-stage-phase-grid {
  display: grid;
  gap: 12px;
}

.festival-stage-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.festival-stage-card,
.festival-stage-day-card,
.festival-stage-phase-card,
.festival-stage-phase-stage {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.festival-stage-card {
  display: grid;
  gap: 10px;
}

.festival-stage-card textarea,
.festival-rider {
  min-height: 170px;
  resize: vertical;
}

.festival-stage-board > h3 {
  margin: 4px 0 0;
  color: var(--brand-strong);
}

.festival-stage-day-card,
.festival-stage-phase-card {
  display: grid;
  gap: 10px;
}

.festival-stage-day-card header,
.festival-stage-phase-card > header,
.festival-stage-phase-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.festival-stage-day-card small,
.festival-stage-phase-card small,
.festival-stage-phase-head small {
  color: var(--muted);
  font-weight: 600;
}

.festival-stage-items {
  display: grid;
  gap: 8px;
}

.festival-stage-item {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--brand-strong);
  font-weight: 700;
  padding: 10px 12px;
  text-align: left;
}

.festival-stage-plan-row {
  grid-template-columns: minmax(120px, 1fr) 110px 110px minmax(180px, 1.2fr) 34px;
}

.festival-stage-phase-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.festival-stage-phase-stage {
  background: var(--panel);
}

.festival-stage-phase-card.mounting > header strong {
  color: #9a5b28;
}

.festival-stage-phase-card.dismantling > header strong {
  color: #287263;
}

.festival-stage-phase-card .festival-stage-plan-row {
  grid-template-columns: 140px minmax(130px, 1fr) 100px 100px minmax(160px, 1fr) 34px;
}

.festival-day-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 10px;
  margin: 10px 0 14px;
}

.festival-export-controls {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 90px 90px;
  gap: 8px;
  margin: 0 0 14px;
}

.festival-timeline {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.festival-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.festival-timeline h3 {
  margin: 0;
  color: var(--brand-strong);
}

.festival-timeline.is-large {
  background: var(--panel);
}

.festival-timeline.is-large .festival-agenda {
  min-height: 870px;
}

.festival-agenda {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  min-height: 260px;
  border: 1px solid var(--line);
  background: var(--panel);
  max-height: 760px;
  overflow-y: auto;
}

.festival-agenda-grid {
  min-height: 260px;
}

.festival-show-detail-grid {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.sub-hero {
  margin-top: 0;
}

.training-row {
  grid-template-columns: minmax(180px, 1fr) 150px minmax(180px, 1fr) 34px;
}

.sub-detail {
  margin-top: 14px;
}

.sub-detail h3 {
  margin: 0 0 10px;
  color: var(--brand-strong);
}

.training-rule-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.training-rule-row,
.training-rule-add {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px 42px;
  align-items: center;
  gap: 8px;
}

.training-rule-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 8px;
}

.rh-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.rh-rule-field,
.rh-rule-toggle {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
  color: var(--muted);
  font-weight: 600;
}

.rh-rule-field {
  grid-template-columns: minmax(0, 1fr) 120px auto;
  align-items: center;
}

.rh-rule-field span,
.rh-rule-toggle {
  color: var(--ink);
}

.rh-rule-field small {
  color: var(--muted);
  font-weight: 700;
}

.rh-rule-toggle {
  grid-column: 1 / -1;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
}

.rh-rule-toggle input {
  min-height: auto;
}

.notice-box {
  margin-top: 12px;
  border: 1px solid #d8c37a;
  border-radius: 6px;
  background: #fff8dc;
  color: #5c4a12;
  font-weight: 600;
  padding: 12px;
}

.big-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-strong);
}

.contact-hours-block {
  margin-top: 14px;
}

.contact-hours-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contact-hours-grid article {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px;
}

.contact-hours-grid strong {
  color: var(--brand-strong);
  font-size: 13px;
  text-transform: uppercase;
}

.contact-hours-grid span {
  color: var(--muted);
  font-weight: 600;
}

.contact-hours-target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 9px 10px;
}

.contact-hours-target.is-month {
  background: var(--surface);
}

.contact-hours-target span:last-child {
  color: var(--brand-strong);
}

.contact-counted-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mini-icon-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
}

.mini-icon-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-hours-grid b {
  color: var(--ink);
  font-size: 16px;
}

.contact-hours-grid small {
  color: var(--muted);
  font-weight: 600;
}

.contact-real-hours {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 600;
}

.contact-real-hours.is-hidden {
  display: none;
}

.contact-real-hours input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 0 10px;
  font: inherit;
  font-weight: 600;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
  margin-bottom: 10px;
}

.file-note {
  display: grid;
  place-items: center;
  min-height: 40px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  padding: 0 10px;
}

.file-note input {
  display: none;
}

.budget-chart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.bar-row {
  display: grid;
  gap: 6px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.bar {
  height: 14px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.bar > span {
  display: block;
  height: 100%;
  width: var(--width);
  background: var(--brand);
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
}

.option-box {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 16px;
  box-shadow: 0 8px 24px rgba(30, 35, 38, 0.06);
}

.option-box-wide {
  grid-column: 1 / -1;
}

.option-box[data-option-key="teamShiftTemplates"] {
  grid-column: 1 / -1;
  overflow-x: auto;
}

.sync-options {
  display: grid;
  gap: 12px;
}

.sync-summary,
.sync-preview {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px;
}

.sync-summary small,
.sync-preview small,
.muted-line {
  color: var(--muted);
  font-weight: 600;
}

.sync-field,
.toggle-line {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
}

.toggle-line {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--ink);
}

.sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.backup-options {
  display: grid;
  gap: 14px;
}

.backup-group {
  display: grid;
  gap: 8px;
}

.backup-group h3 {
  margin: 0;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.backup-list {
  display: grid;
  gap: 8px;
}

.backup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
}

.backup-row strong,
.backup-row small {
  display: block;
}

.backup-row small {
  color: var(--muted);
  margin-top: 3px;
  font-weight: 600;
}

.access-options {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.access-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
}

.access-row strong,
.access-row small {
  display: block;
}

.access-row small {
  color: var(--muted);
  margin-top: 3px;
  font-weight: 600;
}

.access-add {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto auto;
  gap: 8px;
}

.tab-label-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.tab-label-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 600;
}

.option-box h2 {
  margin-bottom: 10px;
  color: var(--brand-strong);
}

.option-list {
  display: flex;
  min-height: 42px;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.option-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 32px;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  padding: 0 6px 0 12px;
  color: var(--ink);
  font-weight: 600;
}

.option-chip span,
.option-chip-input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.option-chip-input {
  width: auto;
  max-width: 220px;
  min-width: 54px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  outline: none;
}

.option-chip-input:focus {
  min-width: 140px;
}

.option-chip button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.option-chip button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.option-chip button:hover {
  background: var(--surface-2);
  color: var(--danger);
}

.multi-chip-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.multi-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0 12px;
}

.multi-chip::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 11px;
  font-weight: 700;
}

.multi-chip.is-selected {
  border-color: rgba(23, 107, 105, 0.5);
  background: var(--surface);
  color: var(--brand-strong);
}

.multi-chip.is-selected::before {
  content: "V";
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.multi-chip input {
  display: none;
}

.resource-metric {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.resource-metric svg {
  color: var(--muted);
  width: 18px;
  height: 18px;
}

.input-icon {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.input-icon svg {
  color: var(--muted);
  justify-self: center;
}

.input-icon input {
  width: 100%;
}

.rate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.rate-grid label {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 8px;
  color: var(--muted);
  font-weight: 600;
}

.option-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

dialog {
  width: min(880px, calc(100vw - 28px));
  height: min(94dvh, 920px);
  max-height: min(94dvh, 920px);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 28px 80px rgba(16, 31, 28, 0.28);
  padding: 0;
  overflow: hidden;
}

dialog::backdrop {
  background: rgba(18, 28, 26, 0.5);
  backdrop-filter: blur(2px);
}

.modal-form {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  height: 100%;
  max-height: 100%;
  background: var(--panel);
}

.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 18px 22px;
}

.modal-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
}

.modal-form > label,
.modal-form > .modal-kind-bar,
.modal-form > .form-grid {
  margin: 0 22px;
}

.modal-form > label:first-of-type,
.modal-form > .modal-kind-bar {
  margin-top: 18px;
}

.modal-form > .form-grid {
  overflow-y: auto;
  max-height: none;
  min-height: 0;
  padding: 4px 2px 110px;
}

.modal-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 600;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  /* Sans ça, un champ voisin plus haut (la série et son pied) étire le select
     d'à côté sur toute la hauteur de la rangée. */
  align-items: start;
}

.form-grid .is-wide {
  grid-column: 1 / -1;
}

.modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 14px 22px;
}

.date-range-control {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
}

.date-range-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.date-range-summary {
  color: var(--ink);
  font-weight: 600;
}

.date-range-list {
  display: grid;
  gap: 8px;
}

.date-range-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 36px;
  gap: 8px;
}

.date-range-inputs input {
  width: 100%;
}

.mini-add,
.mini-remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}

.mini-add {
  background: var(--brand);
  color: #fff;
}

.mini-remove {
  background: var(--surface-2);
  color: var(--muted);
  display: grid;
  place-items: center;
}

.empty-state {
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}

@media (max-width: 900px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav-item {
    text-align: center;
  }

  .summary-grid,
  .home-grid,
  .team-planning-layout,
  .budget-chart,
  .daily-header,
  .rate-grid,
  .rh-rules-grid,
  .event-budget-cards,
  .festival-info-grid,
  .festival-structure,
  .festival-scene-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-row,
  .planning-row,
  .company-row,
  .rh-assignment-row,
  .event-rh-row,
  .event-add-row,
  .event-team-summary,
  .event-team-position,
  .event-team-add,
  .show-info-grid,
  .opera-general-row,
  .show-team-day-row,
  .phase-task-row,
  .phase-task-item,
  .event-logistics-row,
  .event-location-row,
  .event-location-add-row,
  .event-charge-add-row,
  .phase-calendar-popover,
  .festival-request-row,
  .tech-library-row,
  .event-product-add-row,
  .festival-day-head,
  .festival-current-day,
  .festival-stage-manager-row,
  .festival-show-row,
  .festival-stage-list,
  .festival-stage-phase-grid,
  .festival-stage-plan-row,
  .festival-stage-phase-card .festival-stage-plan-row,
  .festival-show-detail-grid,
    .training-row,
    .training-rule-row,
    .training-rule-add,
    .team-template-option-row,
    .team-template-add,
    .rh-rule-field,
    .detail-grid,
    .tab-label-grid {
    grid-template-columns: 1fr;
  }

  .task-resource-panel {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding: 16px;
  }

  .topbar,
  .panel-head,
  .topbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #searchInput {
    width: 100%;
  }

  .summary-grid,
  .home-grid,
  .options-grid,
  .view-filters,
    .budget-layout,
    .budget-chart,
    .form-grid,
    .rh-rules-grid,
    .team-alerts,
    .team-planning-toolbar,
    .nav {
    grid-template-columns: 1fr;
  }

  .team-planning-layout,
  .team-planning-toolbar {
    display: grid;
  }

  .staff-pool {
    position: static;
  }

  .calendar {
    min-width: 760px;
  }

  dialog {
    width: calc(100vw - 18px);
    height: 92vh;
    max-height: 92vh;
  }

  .modal-head,
  .modal-actions {
    padding-inline: 14px;
  }

  .modal-form > label,
  .modal-form > .form-grid {
    margin-inline: 14px;
  }

  .day-block-wrap,
  .day-block-head {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .date-range-inputs {
    grid-template-columns: 1fr;
  }

  .option-add {
    grid-template-columns: 1fr;
  }

  #monthlyView {
    overflow-x: auto;
  }
}

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  body.printing-budget,
  body.printing-daily {
    display: block;
    background: var(--panel);
    color: var(--ink);
  }

  body.printing-budget .sidebar,
  body.printing-daily .sidebar,
  body.printing-daily-timing .sidebar,
  body.printing-budget .topbar,
  body.printing-daily .topbar,
  body.printing-daily-timing .topbar,
  body.printing-budget .summary-grid,
  body.printing-daily .summary-grid,
  body.printing-daily-timing .summary-grid,
  body.printing-budget .view:not(#budgetView),
  body.printing-daily .view:not(#dailyView),
  body.printing-daily-timing .view:not(#dailyView),
  body.printing-budget .sheet-toolbar,
  body.printing-budget .export-output {
    display: none;
  }

  body.printing-budget .app-shell,
  body.printing-daily .app-shell,
  body.printing-daily-timing .app-shell,
  body.printing-budget #budgetView,
  body.printing-daily #dailyView,
  body.printing-daily-timing #dailyView {
    padding: 0;
    box-shadow: none;
    border: 0;
  }

  body.printing-budget .budget-layout {
    display: grid;
    gap: 10mm;
  }

  body.printing-budget .budget-chart {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6mm;
    break-after: avoid;
  }

  body.printing-budget .bar-row {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5mm;
  }

  body.printing-budget table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 11px;
  }

  body.printing-daily .daily-export-actions,
  body.printing-daily-timing .daily-export-actions,
  body.printing-daily .daily-header select,
  body.printing-daily-timing .daily-header select,
  body.printing-daily .daily-header input,
  body.printing-daily-timing .daily-header input {
    display: none;
  }

  body.printing-daily .day-block-section,
  body.printing-daily-timing .day-block-section {
    display: none;
  }

  body.printing-daily .daily-header {
    grid-template-columns: 1fr auto;
    margin: 0;
    border-radius: 0;
    background: #512562 !important;
  }

  body.printing-daily .timeline-wrap {
    display: block;
    margin: 0;
    overflow: visible;
  }

  body.printing-daily-timing .daily-header,
  body.printing-daily-timing .timeline-wrap {
    display: none;
  }

  body.printing-daily-timing .daily-runsheet {
    display: block;
  }

  body.printing-daily table,
  body.printing-budget table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 11px;
  }

  body.printing-budget th,
  body.printing-daily th {
    background: #176b69 !important;
    color: #fff !important;
  }

  body.printing-daily th {
    background: #512562 !important;
  }

  body.printing-budget td,
  body.printing-budget th,
  body.printing-daily td,
  body.printing-daily th {
    border: 1px solid var(--line-strong);
    padding: 4px 5px;
  }
}


/* ============================================================
   SCENEFLOW — OVERRIDES & NEW COMPONENTS
   ============================================================ */

/* ============================================================
   SCENEFLOW — Design System v2.0
   Premium event production management tool
   ============================================================ */

:root {
  color-scheme: light;

  /* ── Core palette ── */
  --bg:           #F0EEE9;
  --panel:        #FFFFFF;
  --surface:      #F6F9F8;   /* fond de zone légèrement teinté */
  --surface-2:    #EDF3F1;   /* fond de zone plus marqué */
  --ink:          #1A1D1E;
  --ink-2:        #3A3F42;
  --muted:        #6E787C;
  --line:         #DDD9D2;
  --line-strong:  #C8C4BC;

  /* ── Brand: deep teal ── */
  --brand:        #1A7A78;
  --brand-mid:    #135E5C;
  --brand-strong: #0D4240;
  --brand-pale:   #E8F5F4;
  --brand-light:  #C8EDEB;

  /* ── Accent palette ── */
  --accent:       #D45F30;   /* orange — spectacle/event */
  --accent-pale:  #FDF0EB;
  --yellow:       #C9991A;   /* amber — tâches */
  --yellow-pale:  #FEF8E7;
  --blue:         #2D6FA8;   /* bleu — logistique */
  --blue-pale:    #EBF3FB;
  --violet:       #5B3B8A;   /* violet — journée/festival */
  --violet-pale:  #F2EEFB;
  --green:        #3A8050;   /* vert — confirmé/ok */
  --green-pale:   #EAF5EE;
  --danger:       #C0333A;
  --danger-pale:  #FEF0F0;

  /* ── Phase colors ── */
  --phase-mounting:    #C7834D;
  --phase-show:        #1A7A78;
  --phase-dismantling: #3A8050;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(20,25,28,.08), 0 1px 2px rgba(20,25,28,.04);
  --shadow-md:  0 4px 12px rgba(20,25,28,.10), 0 2px 4px rgba(20,25,28,.06);
  --shadow-lg:  0 16px 48px rgba(20,25,28,.14), 0 4px 12px rgba(20,25,28,.06);
  --shadow:     var(--shadow-md);

  /* ── Sidebar ── */
  --sidebar-bg:     #141A1A;
  --sidebar-accent: #1F2A2A;
  --sidebar-text:   #D5E4E2;
  --sidebar-muted:  #6A8480;
  --sidebar-active: rgba(26,122,120,.35);
  --sidebar-hover:  rgba(255,255,255,.07);
  --sidebar-w:      248px;

  /* ── Misc ── */
  --radius:     10px;   /* cartes et panneaux */
  --radius-sm:  6px;    /* contrôles, champs, boutons */
  --radius-lg:  10px;   /* aligné sur --radius */
  --radius-xl:  10px;   /* aligné sur --radius */
  --transition: 160ms cubic-bezier(.4,0,.2,1);

  /* Archivo pour l'interface, Archivo Narrow pour les grilles étroites (même
     famille, donc même rythme), DM Mono pour les heures et les montants. */
  --font-ui:   'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-cond: 'Archivo Narrow', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
  /* Pas de transition sur grid-template-columns : animer une piste de grille
     du body, qui contient une barre position:sticky pleine hauteur, laisse
     sous Chrome une image intermédiaire à l'écran — la barre apparaît en
     double. Le repli est désormais instantané, ce qui est de toute façon
     préférable pour un outil qu'on manipule vite. */
}

button, input, select, textarea { font: inherit; }
.time-text-input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  z-index: 10;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Brand / logo */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 16px 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1A7A78, #2AADA9);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(26,122,120,.4);
}

.brand strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}

.brand small {
  display: block;
  font-size: 11px;
  color: var(--sidebar-muted);
  margin-top: 1px;
  font-weight: 600;
}

.brand > div { min-width: 0; }

.menu-toggle {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: var(--sidebar-hover);
  color: var(--sidebar-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.menu-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Nav sections */
.nav-section-label {
  padding: 18px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sidebar-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nav {
  display: grid;
  gap: 2px;
  padding: 4px 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--sidebar-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

.nav-item .nav-icon {
  width: 18px;
  height: 18px;
  opacity: .65;
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: #fff;
}
.nav-item:hover .nav-icon { opacity: 1; }

.nav-item.is-active {
  background: var(--sidebar-active);
  color: #fff;
  font-weight: 600;
}
.nav-item.is-active .nav-icon { opacity: 1; }

.nav-item .nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(26,122,120,.5);
  color: #b0e8e6;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 10px 16px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 10px 10px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Collapsed sidebar */
body.menu-collapsed {
  grid-template-columns: 62px minmax(0,1fr);
}
body.menu-collapsed .sidebar { padding: 0; align-items: center; }
body.menu-collapsed .brand { flex-direction: column; gap: 6px; padding: 16px 0 0; width: 100%; justify-content: center; }
body.menu-collapsed .brand > div,
body.menu-collapsed .nav-section-label,
body.menu-collapsed .sidebar-footer,
body.menu-collapsed .sidebar-divider { display: none; }
body.menu-collapsed .nav { padding: 4px 6px; }
body.menu-collapsed .nav-item { justify-content: center; padding: 0; width: 42px; height: 42px; }
body.menu-collapsed .nav-item .nav-icon { opacity: .75; }
body.menu-collapsed .nav-item span:not(.nav-icon) { display: none; }
body.menu-collapsed .menu-toggle { margin: 8px 0 0; width: 40px; height: 40px; }

/* ============================================================
   MAIN SHELL
   ============================================================ */
.app-shell {
  min-width: 0;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Topbar ── */
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--brand);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .06em;
}

.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ── View Filters bar ── */
.view-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: -6px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.view-filters.is-hidden { display: none; }

/* ── Forms ── */
input, select, textarea {
  min-height: 40px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 0 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26,122,120,.15);
}
textarea {
  min-height: 90px;
  padding: 10px;
  resize: vertical;
}
#searchInput {
  width: min(280px,32vw);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E787C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 34px;
}

/* ── Buttons ── */
.primary-button, .secondary-button, .icon-button, .nav-item, .link-button {
  border: 0;
  cursor: pointer;
}

.primary-button {
  min-height: 38px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: white;
  padding: 0 16px;
  font-weight: 600;
  font-size: 12px;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 2px 6px rgba(26,122,120,.3);
}
.primary-button:hover { background: var(--brand-mid); transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); }

.secondary-button {
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12);
  color: inherit;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  transition: background var(--transition);
}
.secondary-button:hover { background: rgba(0,0,0,.04); }

.link-button {
  border: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-align: left;
  transition: color var(--transition);
}
.link-button:hover { color: var(--brand-strong); text-decoration: underline; }

.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1.5px solid var(--line);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1;
  transition: background var(--transition), border-color var(--transition);
}
.icon-button:hover { background: var(--brand-pale); border-color: var(--brand-light); color: var(--brand-strong); }

.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-action {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: all var(--transition);
}
.icon-action svg, .mini-remove svg, .resource-metric svg, .input-icon svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;
}
.icon-action:hover { background: var(--brand-pale); border-color: var(--brand-light); color: var(--brand-strong); }
.info-button { border-radius: 999px; background: var(--surface); color: var(--brand-strong); font-size: 11px; font-weight: 700; }
.danger-button { border-color: var(--line-strong); background: var(--danger-pale); color: var(--danger); }
.danger-button:hover { background: var(--surface-2); }

.mini-edit-button {
  min-height: 24px;
  margin-left: 6px;
  border: 1.5px solid rgba(26,122,120,.2);
  border-radius: 6px;
  background: rgba(255,255,255,.7);
  color: var(--brand-strong);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 0 7px;
  transition: all var(--transition);
}
.mini-edit-button:hover { background: var(--panel); border-color: var(--brand); }

.row-actions { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.file-label input { display: none; }

/* ============================================================
   SUMMARY GRID (KPI cards)
   ============================================================ */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.summary-grid article {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.summary-grid article:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Left colored strip */
.summary-grid article::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 3px 0 0 3px;
}
.summary-grid article:nth-child(1)::before { background: var(--brand); }
.summary-grid article:nth-child(2)::before { background: var(--accent); }
.summary-grid article:nth-child(3)::before { background: var(--blue); }
.summary-grid article:nth-child(4)::before { background: var(--violet); }

.summary-grid span {
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.summary-grid strong { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }

/* ============================================================
   VIEW PANELS
   ============================================================ */
.view {
  display: none;
  padding: 20px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.view.is-active { display: block; }

#homeView {
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0;
}

/* ============================================================
   HOME
   ============================================================ */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(300px,.8fr);
  gap: 14px;
}

.home-ai-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fbfefd, #f2f8f6);
  box-shadow: var(--shadow-sm);
}

.home-ai-card span {
  display: block;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.home-ai-card strong {
  display: block;
  margin-top: 4px;
  color: var(--brand-strong);
  font-size: 14px;
}

.home-ai-card p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.home-explorer {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 220px;
  gap: 12px;
  margin: 0 0 14px;
}

.home-explorer-recap,
.home-explorer-main,
.home-explorer-types {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.home-explorer-recap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-left: 5px solid var(--brand);
  background: linear-gradient(180deg, #fbfefd, #f3f8f6);
}

.home-explorer-recap small,
.home-explorer-head small {
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.home-explorer-recap strong {
  color: var(--brand-strong);
  font-size: 20px;
  line-height: 1.1;
}

.home-explorer-recap p {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

.home-explorer-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.home-explorer-stats span {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 8px 10px;
}

.home-explorer-stats b,
.home-explorer-stats small {
  display: block;
}

.home-explorer-stats b {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.1;
}

.home-explorer-stats small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.home-explorer-main {
  min-width: 0;
  padding: 14px;
}

.home-explorer-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.home-explorer-head strong {
  color: var(--muted);
  font-size: 12px;
}

.home-explorer-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
}

.home-explorer-card {
  width: 100%;
  min-height: 86px;
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.home-explorer-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.home-explorer-card strong,
.home-explorer-card small,
.home-explorer-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-explorer-card strong {
  color: var(--brand-strong);
  font-size: 13px;
  white-space: nowrap;
}

.home-explorer-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.home-explorer-card span {
  margin-top: 8px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-explorer-types {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
}

.home-explorer-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  padding: 0 12px;
  font: inherit;
  font-weight: 600;
  text-align: left;
}

.home-explorer-type small {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 24px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
}

.home-explorer-type.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.home-explorer-type.is-active small {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.home-panel {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.home-calendar-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 12px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
}

.home-calendar-tools .legend {
  margin: 0;
}

.home-calendar-tools .secondary-light-button {
  min-height: 40px;
  white-space: nowrap;
}

/* Calendar */
.home-planning.calendar-mode {
  display: grid;
  grid-template-columns: repeat(7, minmax(88px,1fr));
  border-left: 1.5px solid var(--line);
  border-top: 1.5px solid var(--line);
  overflow-x: auto;
  border-radius: 0 0 var(--radius) var(--radius);
}
.home-day-name {
  min-height: 32px;
  display: grid;
  place-items: center;
  border-right: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
}
.planning-day {
  min-height: 110px;
  border-right: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  padding: 8px;
  background: var(--panel);
  transition: background var(--transition);
}
.planning-day:hover { background: var(--surface); }
.planning-day.is-muted { background: var(--surface); color: var(--muted); }
.planning-day strong { display: inline-block; font-size: 16px; font-weight: 600; margin-right: 3px; }
.planning-day small { color: var(--muted); font-size: 11px; }
.planning-items { display: grid; gap: 5px; margin-top: 7px; }
.calendar-empty-label { color: var(--muted); font-size: 11px; font-style: italic; }

.planning-pill {
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  padding: 0 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: filter var(--transition);
}
.planning-pill:hover { filter: brightness(.95); }
.planning-pill.event {
  border-left-color: var(--brand);
  background: var(--surface-2);
}
.planning-pill.logistics {
  border-left-color: var(--blue);
  background: var(--surface-2);
}
.planning-pill.info {
  border-left-color: var(--line);
  background: var(--surface-2);
}
.planning-pill.meeting {
  border-left-color: #d9ccff;
  background: var(--surface-2);
}
.planning-pill.absence {
  border-left-color: var(--line-strong);
  background: var(--surface);
}
.planning-pill.admin,
.planning-pill.task {
  border-left-color: var(--accent);
  background: var(--surface-2);
}

/* Todo */
.todo-list { display: grid; gap: 8px; }
.todo-card {
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--panel);
  transition: box-shadow var(--transition);
}
.todo-card:hover { box-shadow: var(--shadow-sm); }
.todo-card strong, .todo-card small { display: block; }
.todo-card small { color: var(--muted); margin-top: 3px; font-size: 11px; }

/* Reminders */
.reminder-panel { display: grid; gap: 8px; margin-bottom: 14px; }
.reminder-card {
  border: 1.5px solid #EED8A0;
  border-left: 4px solid var(--yellow);
  border-radius: var(--radius-sm);
  background: var(--yellow-pale);
  padding: 10px 12px;
}
.reminder-card strong, .reminder-card span, .reminder-card small { display: block; }
.reminder-card span { font-weight: 600; margin-top: 2px; }
.reminder-card small { color: var(--muted); margin-top: 4px; font-size: 11px; }
.reminder-card.is-empty { background: var(--surface); border-color: var(--line); border-left-color: var(--line); }

/* ============================================================
   MONTHLY CALENDAR
   ============================================================ */
.month-controls { display: flex; align-items: center; gap: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.event, .tag.event { background: var(--brand); }
.dot.logistics, .tag.logistics { background: var(--blue); }
.dot.admin, .tag.admin { background: var(--accent); }
.dot.task, .tag.task { background: var(--yellow); }
.dot.meeting, .tag.meeting { background: #d9ccff; }
.dot.absence, .tag.absence { background: #d7dde0; }
.dot.info, .tag.info { background: var(--surface-2); }

.calendar {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  border-left: 1.5px solid var(--line);
  border-top: 1.5px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.day-name, .day-cell {
  border-right: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
}
.day-name {
  min-height: 32px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  background: var(--surface);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.day-cell { min-height: 120px; padding: 8px; background: var(--panel); transition: background var(--transition); }
.day-cell:hover { background: var(--surface); }
.day-cell.is-muted { background: var(--surface); color: var(--muted); }
.day-number { font-weight: 600; margin-bottom: 7px; font-size: 13px; }

.pill {
  width: 100%;
  border: 0;
  border-left: 3px solid var(--brand);
  background: var(--brand-pale);
  border-radius: 6px;
  display: block;
  padding: 4px 6px;
  margin-bottom: 4px;
  color: var(--ink);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--transition);
}
.pill:hover { filter: brightness(.96); }
.pill.logistics { border-color: var(--blue); background: var(--blue-pale); }
.pill.admin { border-color: var(--accent); background: var(--accent-pale); }
.pill.task { border-color: var(--yellow); background: var(--yellow-pale); }

/* ============================================================
   DAILY VIEW
   ============================================================ */
.daily-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto auto auto auto;
  align-items: end;
  gap: 10px;
  background: linear-gradient(135deg, #3D1D6B, #5B3B8A);
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 14px 16px;
  margin: -20px -20px 0;
}
.daily-header .eyebrow, .daily-header h2 { color: rgba(255,255,255,.75); margin: 0; }
.daily-header .date-picker { color: #fff; display: grid; gap: 4px; font-weight: 600; }
.daily-header select[multiple] { min-width: 148px; min-height: 70px; }
.daily-export-actions { display: flex; gap: 5px; }

.day-block-section {
  border: 1.5px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--panel);
  margin: 0 -20px 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(25,36,34,.06);
}
.day-block-head {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  background: linear-gradient(135deg, #3D1D6B, #5B3B8A);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 10px 12px;
}
.day-block-wrap {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  background: var(--panel);
  max-height: 760px;
  overflow-y: auto;
}
.day-block-hours, .day-block-grid { position: relative; }
.day-block-hours span {
  position: absolute;
  right: 12px;
  transform: translateY(-50%);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
}
.day-block-grid {
  min-height: 600px;
  background: linear-gradient(#F8FAF9, #FFFFFF);
  border-left: 1.5px solid var(--line);
}
.day-block-grid > span {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--surface-2);
}
.day-block {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 28px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  padding: 7px 9px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  touch-action: none;
  user-select: none;
  transition: filter var(--transition), box-shadow var(--transition);
}
.day-block:hover { filter: brightness(1.04); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.day-block.is-dragging { z-index: 30; cursor: grabbing; filter: brightness(1.06); box-shadow: 0 16px 36px rgba(0,0,0,.25); }
.day-block-time, .day-block-title, .day-block small { color: #fff; }
.day-block-time { font-size: 11px; font-weight: 600; line-height: 1; opacity: .9; }
.day-block-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.2;
}
.day-block small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; font-size: 11px; font-weight: 600; }
.day-block.is-compact { display: flex; align-items: center; gap: 3px; padding: 3px 7px; white-space: nowrap; }
.day-block.is-compact .day-block-title { display: block; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: initial; }
.day-block.is-compact small { display: none; }

/* Category colors */
.day-block.has-duration { background: #4B72C8; }
.day-block.rh { background: #4B72C8; }
.day-block.security { background: #7B56A8; }
.day-block.logistics { background: #2E7A70; }
.day-block.event, .day-block.eventPlanning { background: var(--accent); }
.day-block.task, .day-block.admin { background: #B8733E; }

/* Timeline table */
.timeline-wrap {
  display: none;
  overflow-x: auto;
  border: 1.5px solid var(--line-strong);
  border-top: 0;
  margin: 0 -20px -20px;
  background: var(--surface);
}
.timeline-table { min-width: 920px; width: 100%; border-collapse: collapse; table-layout: fixed; }
.timeline-table th { background: linear-gradient(135deg, #3D1D6B, #5B3B8A); color: #fff; border-color: #6F477D; height: 40px; }
.timeline-table td { height: 36px; border: 1px solid var(--line); padding: 5px 9px; user-select: none; }
.timeline-table td:first-child { width: 114px; text-align: center; font-weight: 600; background: var(--surface); position: sticky; left: 0; z-index: 1; }
.timeline-empty td { background: var(--panel); color: var(--muted); }
.timeline-entry.logistics td { background: var(--surface-2); border-left-color: #2E7A70; }
.timeline-entry.rh td { background: var(--surface-2); border-left-color: #3C6F96; }
.timeline-entry.security td { background: var(--surface-2); border-left-color: #7B56A8; }
.timeline-entry.admin td, .timeline-entry.task td { background: var(--surface-2); border-left-color: #B8733E; }
.timeline-entry.event td { background: #FFF3B0; border-left-color: #C9991A; }
.timeline-entry.eventPlanning td { background: #EAD9F5; border-left-color: #5B3B8A; }
.daily-runsheet { display: none; }

/* ============================================================
   TEAM PLANNING — minimal changes, just aesthetics
   ============================================================ */
.team-planning-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.team-filter-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 4px;
  box-shadow: var(--shadow-sm);
}
.team-filter-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 0 10px;
  transition: all var(--transition);
}
.team-filter-tabs button.is-active {
  background: var(--brand-pale);
  color: var(--brand-strong);
  box-shadow: var(--shadow-sm);
}
.team-filter-select {
  min-height: 40px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 0 12px;
}
.team-return-button { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.team-planning-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 14px;
  align-items: start;
}

.staff-pool, .team-board-wrap {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.staff-pool {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 10px;
  padding: 14px;
}
.team-smart-panel { align-content: start; max-height: calc(100vh - 36px); overflow: auto; }
.team-week-context {
  display: flex;
  gap: 7px;
  align-content: start;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.team-context-day {
  display: grid;
  gap: 5px;
  flex: 0 0 132px;
  min-height: 72px;
  scroll-snap-align: start;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 8px;
}
.team-context-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.team-context-day strong { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 600; }
.team-context-more {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand-pale);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}
.team-context-day div { display: grid; gap: 4px; }
.team-context-day span {
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface);
  color: #2B4E80;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-context-day span.task { background: var(--surface); color: #7A4620; }
.team-context-head .team-context-more {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  overflow: visible;
  border-radius: 999px;
  background: var(--brand-pale);
  color: var(--brand-strong);
  font-size: 11px;
  white-space: nowrap;
}
.team-context-day small { color: var(--muted); font-weight: 600; font-size: 11px; }
.staff-pool h2 { margin: 0; font-size: 13px; }
#staffPool { display: grid; gap: 7px; }
.staff-card {
  display: grid;
  gap: 3px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 9px 10px;
  cursor: grab;
  transition: box-shadow var(--transition), transform var(--transition);
}
.staff-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.staff-card:active { cursor: grabbing; }
.staff-card strong { color: var(--brand-strong); font-size: 12px; }
.staff-card span, .team-person-cell span, .team-shift-summary span, .team-alert span {
  color: var(--muted); font-size: 11px; font-weight: 600;
}
.team-board-wrap { display: grid; gap: 10px; align-items: start; overflow: visible; padding: 12px; }
.team-board-area {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr);
  gap: 1px;
  align-items: start;
}
.team-days-rail {
  display: grid;
  border: 1.5px solid var(--line-strong);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden;
  background: var(--surface);
  gap: 1px;
}
.team-board-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
.team-alerts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3,minmax(175px,1fr));
  gap: 8px;
  margin-top: 10px;
}
.team-alert {
  display: grid; gap: 3px;
  border: 1.5px solid #F0C8B7;
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-pale);
  padding: 10px;
}
.team-alert.info { border-color: #C2D4EE; border-left-color: var(--blue); background: var(--blue-pale); }
.team-alert.is-ok { border-color: var(--line-strong); border-left-color: var(--brand); background: var(--green-pale); }
.team-board {
  --team-people: 1;
  display: grid;
  grid-template-columns: repeat(var(--team-people),150px) 210px;
  width: max-content;
  min-width: 100%;
  border: 1.5px solid var(--line-strong);
  border-left: 0;
  border-radius: var(--radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  background: var(--surface);
  gap: 1px;
}
body.team-planning-fullscreen {
  display: block;
  background: var(--bg);
}
body.team-planning-fullscreen .sidebar,
body.team-planning-fullscreen .topbar { display: none; }
body.team-planning-fullscreen .app-shell { min-height: 100vh; padding: 14px; }
body.team-planning-fullscreen .view:not(#teamPlanningView) { display: none; }
body.team-planning-fullscreen #teamPlanningView { display: block; }
body.team-planning-fullscreen .team-planning-layout { grid-template-columns: minmax(0,1fr) 300px; }
body.team-planning-fullscreen .team-board { grid-template-columns: repeat(var(--team-people),170px) 230px; }
body.team-planning-fullscreen .team-board-area { grid-template-columns: 92px minmax(0,1fr); }

.team-corner, .team-person-header, .team-date-cell, .team-activity-cell, .team-total-label, .team-total-cell, .team-day-cell { border: 0; }
.team-corner, .team-person-header, .team-date-cell, .team-total-label, .team-total-cell { background: var(--panel); }
.team-corner { display: grid; place-items: center; height: 100px; min-height: 100px; color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.team-person-header {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  height: 100px;
  min-height: 100px;
  padding: 7px 22px 7px 6px;
  text-align: center;
}
.team-person-hours { display: grid; gap: 3px; width: 100%; }
.team-person-hours div {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 4px;
  align-items: center;
  min-height: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 2px 5px;
}
.team-person-hours small { color: var(--ink-2); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.team-person-hours b { color: var(--brand-strong); overflow: hidden; font-size: 11px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.team-person-header strong { color: var(--ink); max-width: 100%; overflow: hidden; font-size: 11px; letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.team-person-header span { color: var(--ink-2); max-width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.team-activity-header { font-weight: 600; text-transform: none; }
.team-person-header.is-collapsed { height: 100px; min-height: 100px; padding: 7px 4px; }
.team-person-header.is-collapsed strong { font-size: 11px; }
.team-person-header.is-collapsed span { display: none; }
.team-column-toggle {
  position: absolute; top: 5px; right: 5px;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--panel); color: var(--ink-2);
  cursor: pointer; padding: 0;
}
.team-column-toggle svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.team-person-header.is-collapsed .team-column-toggle { position: static; justify-self: center; }
.team-date-cell {
  display: flex; align-items: center; justify-content: space-between;
  height: 98px; min-height: 98px; overflow: hidden;
  padding: 9px 7px; color: var(--ink); font-size: 11px; text-transform: lowercase;
}
.team-date-cell strong, .team-total-cell, .team-total-label { font-weight: 700; }
.team-day-cell, .team-activity-cell {
  position: relative; display: grid; gap: 5px;
  align-content: start; height: 98px; min-height: 98px;
  overflow: hidden; padding: 7px; background: var(--panel);
}
.team-day-cell.is-collapsed { place-items: center; padding: 4px; }
.team-collapsed-count {
  display: grid; place-items: center;
  width: 23px; height: 23px; border-radius: 999px;
  background: var(--brand-pale); color: var(--brand-strong);
  font-size: 11px; font-weight: 700;
}
.team-date-cell.is-context, .team-day-cell.is-context, .team-activity-cell.is-context {
  opacity: .42; background: var(--surface);
}
.team-day-cell.is-context { pointer-events: none; }
.team-date-cell.is-context span::after { content: " hors semaine"; color: var(--muted); font-size: 11px; font-weight: 600; }
.team-day-cell.is-drop-target { outline: 2px solid var(--brand); outline-offset: -3px; background: var(--surface); }
.team-add-shift {
  position: absolute; right: 5px; bottom: 5px;
  width: 21px; min-height: 21px; height: 21px;
  border: 0; border-radius: 50%;
  background: var(--brand-pale); color: var(--brand-strong);
  cursor: pointer; font-size: 12px; font-weight: 700; opacity: .15;
  transition: opacity var(--transition);
}
.team-day-cell:hover .team-add-shift { opacity: 1; }
.team-day-cell.is-event-unavailable { background: var(--surface); color: var(--muted); }
.team-day-cell.is-event-unavailable .team-rest-label { color: var(--muted); }
.team-day-cell.is-event-unavailable .team-add-shift { opacity: .2; }
.team-template-bubble {
  position: fixed; z-index: 80;
  display: grid; gap: 4px; min-width: 148px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); padding: 6px;
  box-shadow: var(--shadow-lg);
}
.team-template-bubble button {
  min-height: 32px; border: 0; border-left: 4px solid var(--brand); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  cursor: pointer; font-weight: 600; text-align: left;
  transition: all var(--transition);
}
.team-template-bubble button:hover { background: var(--brand-pale); color: var(--brand-strong); }
.team-shift-card.is-absence { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.team-shift-card.is-absence .team-shift-summary span { display: none; }
.team-shift-card.is-absence .team-shift-controls { display: none; }
.team-rest-label { align-self: center; justify-self: end; margin-right: 18px; color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .04em; }
.team-shift-card {
  position: relative; display: grid; gap: 3px;
  border: 0; border-left: 3px solid var(--brand); border-radius: 6px;
  background: var(--brand-pale); color: var(--ink);
  padding: 5px; cursor: pointer;
  box-shadow: inset 0 0 0 1px #C8E5E2;
  transition: box-shadow var(--transition);
}
.team-shift-card.has-warning { background: var(--accent-pale); box-shadow: inset 0 0 0 1px #F0C8B7; }
.team-shift-card.is-selected { outline: 2px solid var(--brand); outline-offset: 2px; }
.team-shift-summary { display: grid; gap: 2px; }
.team-shift-summary strong { white-space: pre-line; color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.35; }
.team-shift-summary span, .team-warning-line { color: var(--brand-strong); justify-self: start; font-weight: 700; font-size: 11px; }
.team-shift-controls { display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.team-shift-controls select, .team-break-row select { min-height: 30px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--panel); padding: 0 6px; font-weight: 600; }
.team-shift-actions { display: none; justify-content: space-between; gap: 5px; }
.team-shift-actions .icon-action, .team-break-row .icon-action { background: var(--surface); }

.team-shift-group-card {
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
  gap: 4px;
}

.team-shift-group-lines {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.team-shift-group-meta {
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 2px;
}

.team-shift-group-line {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.team-shift-group-line + .team-shift-group-line {
  border-top: 1px solid rgba(26,122,120,.18);
  padding-top: 4px;
}

.team-shift-group-line strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: pre-line;
}

.team-shift-group-line span {
  display: none;
}

.team-shift-group-remove {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: .55;
}

.team-shift-group-remove svg {
  width: 14px;
  height: 14px;
}

.team-shift-group-card:hover .team-shift-group-remove {
  opacity: 1;
  background: var(--danger-pale);
  color: var(--danger);
}
.team-edit-shift {
  position: absolute; top: 5px; right: 5px;
  display: grid; place-items: center;
  width: 20px; height: 20px; min-height: 20px;
  border: 0; border-radius: 50%;
  background: var(--brand-light); color: var(--brand-strong);
  cursor: pointer; padding: 0;
  transition: all var(--transition);
}
.team-edit-shift svg { width: 12px; height: 12px; }
.team-break-list { display: grid; gap: 5px; border-top: 1px solid var(--line); padding-top: 7px; }
.team-break-row {
  display: grid; grid-template-columns: auto 1fr 1fr 32px;
  gap: 5px; align-items: center;
  color: var(--ink-2); font-size: 11px; font-weight: 600;
}
.team-activity-cell {
  align-content: center; text-align: center;
  background: var(--panel); color: var(--ink);
  font-size: 11px; font-weight: 600; line-height: 1.55;
}
.team-activity-cell span { display: block; overflow: hidden; border-radius: 6px; padding: 1px 4px; text-overflow: ellipsis; white-space: nowrap; }
.team-activity-cell small { color: var(--muted); }
.team-total-label, .team-total-cell { height: 46px; min-height: 46px; padding: 8px; text-align: center; color: var(--ink); background: var(--surface); }

/* ============================================================
   EVENTS / SPECTACLES
   ============================================================ */
.event-row, .add-row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  margin-bottom: 6px;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.event-row:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }

.event-row { grid-template-columns: minmax(180px,1fr) minmax(130px,1fr) minmax(120px,1fr) 100px 130px 100px 100px 120px; }

/* Status badges */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.tag.status-preparation { background: var(--yellow-pale); color: #8A6510; border: 1px solid #E5D08A; }
.tag.status-confirme { background: var(--green-pale); color: #2A6040; border: 1px solid #9ACEA8; }
.tag.status-termine { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong); }

/* Event detail tabs */
.event-detail-tabs { display: flex; gap: 6px; margin: 14px 0 0; flex-wrap: wrap; }
.detail-tab, .event-budget-tabs { display: flex; }
.detail-tab {
  min-height: 38px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  padding: 0 16px;
  transition: all var(--transition);
}
.detail-tab:hover { background: var(--brand-pale); border-color: var(--brand-light); color: var(--brand-strong); }
.detail-tab.is-active { border-color: var(--brand); background: var(--brand); color: #fff; }
.event-budget-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.event-budget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.event-budget-dashboard { display: grid; gap: 12px; }
.event-budget-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.event-budget-cards article { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px; box-shadow: var(--shadow-sm); }
.event-budget-cards small { display: block; color: var(--muted); font-weight: 600; margin-bottom: 7px; font-size: 11px; text-transform: uppercase; }
.event-budget-cards strong { font-size: 20px; font-weight: 600; }

/* Budget table */
.event-budget-table { display: grid; gap: 10px; overflow-x: auto; }
.bp-table { min-width: 820px; border: 1px solid var(--line); border-collapse: collapse; border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.bp-table th { background: #1A2E2A; color: #fff; }
.bp-table th:nth-child(4) { background: #3D1D6B; }
.bp-table td:nth-child(1), .bp-table td:nth-child(4) { color: var(--brand-strong); font-weight: 600; }
.bp-table tr:last-child td { background: var(--surface); font-weight: 600; }

/* Phase calendar */
.phase-calendar-tools, .festival-day-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.phase-mini-calendar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(128px,1fr); gap: 7px; overflow-x: auto; padding: 4px 0 8px; }
.phase-mini-cell {
  display: grid; grid-template-rows: auto auto 1fr;
  min-height: 148px; border: 1.5px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  overflow: hidden; padding: 10px 9px;
  transition: box-shadow var(--transition);
}
.phase-mini-cell:hover { box-shadow: var(--shadow-sm); }
.phase-mini-cell em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 600; text-align: center; text-transform: uppercase; }
.phase-mini-cell strong { display: block; color: var(--ink); font-size: 20px; line-height: 1; margin: 6px 0 16px; text-align: center; }
.phase-mini-cell div { display: grid; gap: 5px; }

.phase-pill {
  display: grid; gap: 1px; width: 100%;
  border: 0; overflow: hidden; border-radius: 6px;
  background: var(--blue); color: #fff;
  cursor: pointer; font-weight: 600; padding: 3px 7px;
  text-align: left; text-overflow: ellipsis; white-space: nowrap;
  transition: filter var(--transition);
}
.phase-pill:hover { filter: brightness(1.06); }
.phase-pill span, .phase-pill small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-pill small { font-size: 11px; font-weight: 600; opacity: .82; }
.phase-pill.mounting { background: var(--phase-mounting); }
.phase-pill.festival { background: var(--blue); }
.phase-pill.dismantling { background: var(--phase-dismantling); }
.phase-pill.context { border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-2); }
.phase-pill.context-context, .phase-pill.context-show { border-color: #C0D0E8; background: var(--surface); color: #2C4870; }
.phase-pill.context-mounting { border-color: var(--line-strong); background: var(--surface); color: #704A20; }
.phase-pill.context-dismantling { border-color: var(--line-strong); background: var(--surface); color: #285A50; }

.phase-calendar-popover {
  display: grid;
  grid-template-columns: minmax(175px,1fr) 148px 148px auto 40px;
  align-items: center; gap: 10px;
  background: var(--panel); box-shadow: var(--shadow-lg);
  margin-top: 10px; padding: 14px;
}
.phase-calendar-popover strong { color: var(--brand-strong); font-size: 14px; }
.phase-calendar-popover input { min-height: 40px; }
.phase-calendar-popover[hidden] { display: none; }

/* Tech library */
.tech-library-row { grid-template-columns: minmax(175px,1fr) minmax(118px,175px) minmax(118px,175px); }

/* Row grid classes (kept from original) */
.phase-task-item { grid-template-columns: minmax(155px,1fr) 148px 118px minmax(175px,1fr) 88px; }
.task-resource-box { position: relative; display: grid; gap: 7px; min-height: 46px; }
.task-resources-cell { position: relative; }
.task-resources-cell .task-resource-box { min-height: 0; }
.task-resources-cell .task-resource-chips { margin-top: 4px; }
.task-resource-chips {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; min-height: 42px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); padding: 6px;
}
.task-resource-chip {
  min-height: 30px; border: 1.5px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--brand-strong);
  cursor: pointer; font: inherit; font-weight: 600; padding: 0 9px;
  transition: all var(--transition);
}
.task-resource-chip:hover { background: var(--brand-pale); border-color: var(--brand-light); }
.task-resource-add { width: 30px; height: 30px; }
.task-resource-panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  z-index: 8; display: grid;
  grid-template-columns: repeat(2,minmax(155px,1fr));
  gap: 9px; min-width: min(610px,92vw);
  border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-lg); padding: 14px;
}
.task-resource-panel[hidden] { display: none; }
.task-resource-panel strong, .task-resource-panel button { grid-column: 1 / -1; }
.task-resource-panel strong { color: var(--brand-strong); font-size: 14px; }
.task-resource-panel select, .task-resource-panel input { min-height: 40px; }

.event-logistics-row, .event-location-row { grid-template-columns: minmax(118px,1fr) minmax(135px,1fr) minmax(125px,1fr) minmax(125px,1fr) 108px 88px; }
.event-logistics-row { grid-template-columns: minmax(118px,1fr) minmax(135px,1fr) minmax(125px,1fr) minmax(125px,1fr) 135px 88px; }
.event-location-add-row { grid-template-columns: minmax(118px,1fr) minmax(135px,1fr) 155px 155px minmax(125px,1fr) 108px 108px; }
.festival-request-row { grid-template-columns: minmax(220px,1.4fr) 145px minmax(190px,.9fr) 150px 145px 112px 34px; }

/* Festival days */
.festival-days { display: grid; gap: 14px; }
.festival-day-card { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 12px; box-shadow: var(--shadow-sm); }

/* ============================================================
   CONTACTS / RH / LOGISTICS / etc.
   ============================================================ */
.add-row {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--surface);
}
.add-row:hover { background: var(--brand-pale); border-color: var(--brand-light); }

/* Generic row grids (kept original grid-template-columns) */
.event-row-grid { grid-template-columns: minmax(180px,1fr) minmax(130px,1fr) 100px 120px 100px 90px 100px; }
.rh-row { grid-template-columns: minmax(130px,1fr) minmax(110px,1fr) 72px 90px 80px minmax(120px,1fr) 90px 80px 90px; }
.contact-row { grid-template-columns: 90px minmax(140px,1fr) 110px minmax(120px,1fr) 90px 80px; }
.logistics-row { grid-template-columns: 100px minmax(120px,1fr) 90px 90px minmax(110px,1fr) 90px 90px 80px 80px; }
.location-row { grid-template-columns: minmax(120px,1fr) minmax(120px,1fr) 110px 110px 90px 90px minmax(100px,1fr) 80px; }
.security-row { grid-template-columns: 90px 100px 65px 85px 75px minmax(110px,1fr) 85px 75px 85px; }
.admin-row { grid-template-columns: 100px 95px 75px minmax(130px,1fr) minmax(130px,1fr) 80px 80px; }
.vgp-row { grid-template-columns: minmax(170px,1fr) minmax(110px,1fr) 110px 90px 110px 1fr 80px; }
.budget-row { grid-template-columns: minmax(120px,1fr) minmax(170px,1fr) minmax(120px,1fr) 110px 110px; }
.event-product-add-row { grid-template-columns: minmax(185px,1.1fr) minmax(155px,1fr) minmax(135px,1fr) 108px 108px minmax(118px,1fr); }
.event-charge-add-row { grid-template-columns: minmax(128px,.8fr) minmax(165px,1fr) minmax(145px,1fr) 118px minmax(118px,.8fr) 148px; }

/* ============================================================
   MODAL
   ============================================================ */
#entryModal {
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 0;
  /* 880 : la largeur que la règle `dialog` prévoyait déjà. À 640 les deux
     colonnes du formulaire tenaient à l'étroit et les blocs de dates
     débordaient. */
  max-width: 880px;
  width: 92vw;
}

/* ── Fenêtre d'entrée : catégorie et nature ──
   La nature remplace l'ancien format « Festival ». Elle est en tête, à côté de
   la catégorie, parce que c'est elle qui commande le reste de la fiche. */
.modal-kind-bar {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.modal-kind-bar > label,
.modal-kind-bar #entryNatureSlot > label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 600;
}
.modal-kind-bar #entryNatureSlot:empty { display: none; }

.nature-control { display: grid; gap: 6px; }
.nature-segment {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  width: max-content;
  max-width: 100%;
}
.nature-option {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nature-option svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nature-option:hover:not(.is-active):not(:disabled) { background: var(--surface-2); }
.nature-option.is-active { background: var(--brand); color: #fff; }
.nature-option[data-nature="festival"].is-active { background: var(--violet); }
.nature-control.is-locked .nature-option { cursor: default; }
.nature-control.is-locked .nature-option:not(.is-active) { opacity: .45; }
.nature-hint { color: var(--muted); font-weight: 500; font-size: 11.5px; }

/* Un intertitre discret entre l'identité et les dates. */
.form-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.form-section-head span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-section-head::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--line);
}

.festival-scope-note {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: var(--radius-sm);
  background: var(--violet-pale);
  padding: 12px 14px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
}
.festival-scope-note strong { color: var(--violet); font-weight: 700; }
/* display:grid et display:flex l'emportent sur l'attribut hidden : sans ces
   deux lignes, le type et la série resteraient visibles sur un festival, et la
   note s'afficherait sur un spectacle. */
.modal-form label[hidden],
.festival-scope-note[hidden] { display: none; }

.serie-control { display: grid; gap: 6px; align-content: start; }
.serie-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  flex-wrap: wrap;
}
.serie-foot small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.serie-add { font-size: 12px; }
.serie-creation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  border: 1.5px solid var(--brand-light);
  border-radius: var(--radius-sm);
  background: var(--brand-pale);
  padding: 10px;
}
/* display:grid l'emporterait sur l'attribut hidden : le formulaire de création
   resterait ouvert en permanence. */
.serie-creation[hidden] { display: none; }
.serie-creation input { min-height: 34px; }
.serie-creation .primary-button,
.serie-creation .secondary-button { min-height: 34px; }

/* ── Liste des spectacles ──
   Les actions n'ont plus de colonne : elles vivent dans la cellule du nom et se
   montrent au survol de la ligne. */
.event-name-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.event-name-head { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.event-nature-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--violet);
  background: var(--violet-pale);
  color: var(--violet);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.event-name-cell .row-actions {
  opacity: 0;
  transition: opacity var(--transition);
  flex-wrap: nowrap;
}
tr:hover .event-name-cell .row-actions,
.event-name-cell .row-actions:focus-within { opacity: 1; }

/* ── Options : les séries, rangées sous leur organisateur ── */
.event-series-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.event-series-group {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--surface);
}
.event-series-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.event-series-head strong { font-size: 12.5px; }
.event-series-head small { color: var(--muted); font-size: 11px; font-weight: 600; }
#entryModal::backdrop { background: rgba(10,18,16,.55); backdrop-filter: blur(4px); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  margin-bottom: 16px;
}
.modal-header h2 { margin: 0; font-size: 16px; font-weight: 600; }

.modal-body { padding: 0 24px; }
.modal-footer { padding: 16px 24px 20px; display: flex; gap: 8px; justify-content: flex-end; }

.form-fields { display: grid; gap: 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row.wide { grid-column: 1 / -1; grid-template-columns: 1fr; }
.form-field { display: grid; gap: 5px; }
.form-field label { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.form-field.wide { grid-column: 1 / -1; }

/* Date range field */
.date-range-field { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ============================================================
   MISC COMPONENTS
   ============================================================ */
.resource-metric {
  display: flex; align-items: center; gap: 6px;
  background: var(--brand-pale); border-radius: 999px;
  padding: 4px 10px 4px 6px;
  color: var(--brand-strong); font-weight: 600; font-size: 11px;
}
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.input-icon input { padding-left: 34px; }

/* Mini remove */
.mini-remove {
  width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: var(--danger-pale); color: var(--danger);
  cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: all var(--transition);
}
.mini-remove:hover { background: var(--surface-2); }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 10px; border-radius: 999px;
  background: var(--brand-pale); color: var(--brand-strong);
  font-size: 11px; font-weight: 600; border: 1px solid var(--brand-light);
}

/* Empty state */
.empty-state {
  display: grid; place-items: center; gap: 8px;
  padding: 40px 20px; text-align: center;
  color: var(--muted); font-weight: 600;
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.empty-state strong { color: var(--ink-2); display: block; margin-bottom: 4px; }

/* ============================================================
   OPTIONS VIEW
   ============================================================ */
.option-box {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 14px; box-shadow: var(--shadow-sm);
}
.option-box h2 { font-size: 12px; margin-bottom: 10px; }
.option-list { display: grid; gap: 6px; margin-bottom: 10px; }
.option-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); font-size: 12px; font-weight: 600;
}
.rh-rule-field {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 8px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600;
}
.rh-rule-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.training-rule-row {
  display: grid; grid-template-columns: 1fr auto auto 28px;
  gap: 8px; align-items: center; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); margin-bottom: 5px; font-size: 12px;
}
.tab-label-grid { display: grid; gap: 8px; }
.tab-label-grid label { display: grid; gap: 4px; font-size: 11px; font-weight: 600; }

/* ============================================================
   ARCHIVES / STATUS ROWS
   ============================================================ */
.archive-event-row { grid-template-columns: minmax(200px,1fr) minmax(130px,1fr) minmax(120px,1fr) 100px 105px; }

/* ============================================================
   BUDGET VIEW
   ============================================================ */
#budgetChartContainer { width: 100%; max-width: 520px; margin: 0 auto; }
.budget-category-head { font-weight: 600; color: var(--brand-strong); padding: 10px 0 4px; border-bottom: 2px solid var(--brand-light); margin-bottom: 6px; }

/* ============================================================
   SCROLLBARS
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C8D0CC; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #A8B4B0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  :root { --sidebar-w: 220px; }
  .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-ai-card { grid-template-columns: 1fr; }
  .home-explorer { grid-template-columns: 1fr; }
  .home-explorer-types { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .home-explorer-list { max-height: none; }
  .home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body { grid-template-columns: 62px minmax(0,1fr); }
  .sidebar { padding: 0; align-items: center; }
  .brand { flex-direction: column; gap: 6px; padding: 16px 0 0; width: 100%; justify-content: center; }
  .brand > div, .nav-section-label, .sidebar-footer, .sidebar-divider { display: none; }
  .nav { padding: 4px 6px; }
  .nav-item { justify-content: center; padding: 0; width: 42px; height: 42px; }
  .nav-item .nav-icon { opacity: .75; }
  .nav-item span:not(.nav-icon) { display: none; }
  .app-shell { padding: 14px 16px; }
  h1 { font-size: 20px; }
}

/* ============================================================
   RH DETAIL
   ============================================================ */
.rh-detail-section { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; background: var(--panel); box-shadow: var(--shadow-sm); }
.rh-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.rh-stat-card { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--surface); text-align: center; }
.rh-stat-card small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; margin-bottom: 6px; }
.rh-stat-card strong { font-size: 20px; font-weight: 600; }

/* ============================================================
   NOTEBOOK
   ============================================================ */
.notebook-tabs { display: flex; gap: 5px; margin-bottom: 10px; }
.notebook-area { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--panel); min-height: 180px; font-family: inherit; resize: vertical; width: 100%; }

/* ============================================================
   FESTIVAL TIMELINE
   ============================================================ */
.festival-timeline { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.festival-stage-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1.5px solid var(--line); font-weight: 600; }

/* ============================================================
   POPOVER SCROLL FIX — position:fixed so popovers follow scroll
   ============================================================ */

/* festival-action-popover: appended to body via getBoundingClientRect → must be fixed */
.festival-action-popover {
  position: fixed !important;
  z-index: 9999 !important;
}

/* opera-note-popover: same pattern */
.opera-note-popover {
  position: fixed !important;
  z-index: 9999 !important;
}

/* === POPOVER POSITION FIX === */
.festival-action-popover,
.opera-note-popover,
.ftw-slot-popover,
.team-template-bubble { position: fixed !important; z-index: 9999 !important; }

/* ── Team planning toolbar overflow fix ── */
.team-planning-toolbar { flex-wrap: wrap !important; overflow: visible !important; }
.team-planning-toolbar select,
.team-planning-toolbar .team-filter-select { min-width: 0; max-width: 180px; }
.team-week-context { overflow-x: auto; overflow-y: visible; }
/* Context day pill: show full text on hover via title, keep truncated display */
.team-context-day span { max-width: 100%; cursor: default; }
/* Shift summary: each time segment on its own line */
.team-shift-summary strong { white-space: pre-line !important; line-height: 1.5 !important; }

/* ── Budget Technique par Spectacle ── */
.tech-budget-wrap { overflow-x: auto; margin-bottom: 12px; }
.tech-budget-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; font-size: 11px; }
.tech-budget-table thead th { background: var(--brand-strong); color: #fff; padding: 7px 6px; text-align: center; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tech-budget-table th.tb-show { text-align: left; min-width: 140px; }
.tech-budget-table th.tb-num { min-width: 72px; }
.tech-budget-table th.tb-total { background: #176B69; color: #F0C56A; }
.tech-budget-table tbody tr:nth-child(even) td { background: var(--panel); }
.tech-budget-table tbody tr:hover td { background: var(--surface); }
.tech-budget-table td { padding: 4px 5px; border-top: 1px solid var(--line); vertical-align: middle; }
.tech-budget-table td.tb-show input { width: 100%; border: none; background: transparent; font-size: 11px; font-weight: 600; color: var(--ink); outline: none; }
.tech-budget-table td.tb-show input:focus { background: var(--surface); border-radius: 6px; padding: 2px 4px; }
.tech-budget-table td.tb-num input { width: 100%; border: none; background: transparent; font-size: 11px; text-align: right; outline: none; color: var(--ink); }
.tech-budget-table td.tb-num input:focus { background: var(--surface); border-radius: 6px; }
.tech-budget-table td.tb-total { font-weight: 600; color: #0f4d4c; text-align: right; font-size: 11px; }
.tech-budget-table tfoot td { background: #F0C56A !important; font-weight: 600; font-size: 11px; text-align: right; color: var(--ink); }
.tech-budget-table tfoot td.tb-grand-total { color: var(--ink); font-size: 11px; }
.tech-budget-table td.tb-action { width: 28px; text-align: center; }

.event-budget-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.bud-kpi-card {
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 16px;
  display: grid;
  gap: 4px;
}
.bud-kpi-card small {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bud-kpi-card strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.bud-kpi-card.kpi-charges { border-color: var(--line); background: var(--surface); }
.bud-kpi-card.kpi-products { border-color: var(--line-strong); background: var(--surface); }
.bud-kpi-card.kpi-positive { border-color: #176B69; background: var(--surface); }
.bud-kpi-card.kpi-negative { border-color: #C0392B; background: var(--surface); }
.kpi-real { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 11px; }
.kpi-real-label { color: var(--muted); font-weight: 600; }
.kpi-real-val { font-weight: 700; color: #0f4d4c; }
.kpi-ecart { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; margin-top: 2px; }
.kpi-ecart span:first-child { color: var(--muted); }
.ecart-pos { color: #1a7a2c; }
.ecart-neg { color: #b03c2a; }
/* ── Budget Clôture ── */
.budget-closure { display: grid; gap: 14px; }
.closure-status { padding: 14px 18px; border-radius: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.closure-ok { background: var(--surface); border: 1.5px solid #176B69; color: #0f4d4c; }
.closure-deficit { background: var(--surface); border: 1.5px solid #C0392B; color: #7a1c10; }
.closure-status strong { font-size: 14px; }
.closure-status em { font-size: 11px; opacity: .8; }
.closure-table-wrap { overflow-x: auto; }
.closure-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 11px; }
.closure-table thead th { background: #1D302C; color: #fff; padding: 8px 10px; text-align: right; font-size: 11px; font-weight: 600; }
.closure-table thead th:first-child { text-align: left; }
.closure-table td { padding: 6px 10px; border-top: 1px solid var(--line); }
.closure-table td.ct-label { font-weight: 600; color: var(--ink); }
.closure-table td.ct-prev, .closure-table td.ct-real, .closure-table td.ct-ecart, .closure-table td.ct-pct { text-align: right; font-variant-numeric: tabular-nums; }
.closure-table td.ct-real { font-weight: 600; color: #0f4d4c; }
.closure-table .ct-block-header td { background: #176B69; color: #fff; font-weight: 700; font-size: 11px; text-transform: uppercase; padding: 5px 10px; }
.closure-table .ct-section-header td { background: var(--surface); font-weight: 600; }
.closure-table .ct-total-row td { background: var(--surface); font-weight: 700; border-top: 2px solid #176B69; }
.closure-table .ct-solde-row td { background: #F0C56A; font-weight: 700; font-size: 13px; border-top: 2px solid #C98249; }
/* Inline number input in tables */
.inline-num-input { width: 90px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 11px; text-align: right; background: var(--panel); }
.inline-num-input:focus { border-color: var(--brand); outline: none; background: var(--surface); }

.rh-time-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   DETAIL HERO — redesign fiches spectacle & festival
   ═══════════════════════════════════════════════════════ */
.event-detail-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 20px 20px 24px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  margin-bottom: 4px;
}
.detail-hero-band {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  border-radius: 12px 0 0 12px;
}
.band-show         { background: linear-gradient(180deg, var(--brand), #3aada9); }
.band-festival     { background: linear-gradient(180deg, #c98249, #e8a56c); }
.band-festival-show { background: linear-gradient(180deg, #6d8edf, #4a72cc); }

.detail-hero-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.detail-hero-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.detail-hero-chip.chip-muted {
  background: var(--surface);
  color: var(--muted);
}
.detail-hero-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.detail-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.detail-hero-meta span::before {
  content: "";
}
.detail-hero-meta span + span::before {
  content: "·";
  margin-right: 14px;
  opacity: .4;
}
.detail-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.detail-hero-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.detail-kpi-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  min-width: 70px;
}
.detail-kpi-chip .dkc-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.detail-kpi-chip .dkc-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* ── Tabs redesign ──────────────────────────────────── */
.event-detail-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 0;
  padding: 4px;
  background: var(--surface);
  border-radius: 10px;
  width: fit-content;
}
.detail-tab {
  min-height: 36px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  padding: 6px 14px;
  transition: background .15s, color .15s;
}
.detail-tab:hover {
  background: rgba(23,107,105,.08);
  color: var(--ink);
}
.detail-tab.is-active {
  background: var(--panel);
  color: var(--brand-strong);
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
}

/* ── Detail sections colored border ─────────────────── */
.detail-section {
  border-left: 3px solid var(--line);
}
.detail-section:has(> h2:first-child) {
  border-left-color: var(--brand);
}

/* ── Festival show hero ──────────────────────────────── */
.festival-show-hero {
  margin-bottom: 14px;
}
.back-to-festival-btn {
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════
   FESTIVAL UX REDESIGN
   ═══════════════════════════════════════════════════════ */

/* ── Days manager ──────────────────────────────────── */
.festival-days-manager .fmgr-head,
.festival-stages-manager .fmgr-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.festival-days-manager .fmgr-head strong,
.festival-stages-manager .fmgr-head strong {
  font-size: 13px;
  font-weight: 700;
  display: block;
}
.festival-days-manager .fmgr-head small,
.festival-stages-manager .fmgr-head small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.festival-day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.festival-day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  font-size: 11px;
  color: var(--ink);
  position: relative;
  transition: border-color .15s, background .15s;
}
.festival-day-pill strong { font-size: 16px; font-weight: 700; line-height: 1; }
.festival-day-pill small  { font-size: 11px; font-weight: 600; color: var(--muted); }
.festival-day-pill:hover  { border-color: var(--brand); }
.festival-day-pill.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.festival-day-pill.is-active small { color: rgba(255,255,255,.7); }
.festival-day-pill-add {
  border-style: dashed;
  color: var(--muted);
}
.festival-day-pill-add:hover { color: var(--brand); border-color: var(--brand); background: var(--surface); }
.day-pill-badge {
  position: absolute;
  top: -5px; right: -5px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.festival-day-edit-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--surface);
  border-radius: 6px;
  flex-wrap: wrap;
}
.festival-day-edit-strip input { flex: 1; min-width: 120px; }

/* ── Stages manager ──────────────────────────────────── */
.festival-stages-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.festival-stage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.festival-stage-row input { flex: 1; }
.stage-color-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fmgr-add-btn { margin-top: 4px; width: 100%; justify-content: center; }

/* ── Day banner ──────────────────────────────────────── */
.festival-day-section { display: flex; flex-direction: column; gap: 14px; }
.festival-day-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--brand) 0%, #1fa39e 100%);
  color: #fff;
  border-radius: 10px;
  padding: 16px 20px;
}
.fdb-left { display: flex; align-items: center; gap: 16px; }
.fdb-day-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 56px;
}
.fdb-day-num span { font-size: 11px; font-weight: 600; opacity: .8; }
.fdb-day-num strong { font-size: 28px; font-weight: 700; line-height: 1; }
.fdb-day-info h3 { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.fdb-day-info p  { font-size: 11px; opacity: .8; margin: 0 0 6px; }
.fdb-stats {
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
}
.fdb-stats span {
  background: rgba(255,255,255,.2);
  padding: 2px 8px;
  border-radius: 10px;
}
.fdb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fdb-nav .icon-action {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.fdb-nav .icon-action:disabled { opacity: .3; }
.fdb-timeline-btn {
  background: rgba(255,255,255,.95) !important;
  color: var(--brand-strong) !important;
  border: none !important;
  font-size: 11px;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Kanban columns ──────────────────────────────────── */
.festival-kanban-col {
  border-top: 3px solid var(--stage-color, var(--brand)) !important;
}
.fkanban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fkanban-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fkanban-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fkanban-title strong { font-size: 13px; font-weight: 700; }
.fkanban-title small  { font-size: 11px; color: var(--muted); display: block; }
.fkanban-timeline-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 6px 8px;
  background: var(--surface);
  border-radius: 6px;
}
.fkanban-pip {
  width: 20px; height: 6px;
  border-radius: 6px;
  cursor: default;
}

/* ── Show chips ─────────────────────────────────────── */
.festival-show-chip {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 8px !important;
  text-align: left !important;
  width: 100%;
}
.show-chip-time {
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  flex-shrink: 0;
}
.show-chip-body {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.show-chip-body strong { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-chip-body small  { font-size: 11px; color: var(--muted); font-weight: 600; }
.show-chip-badges { display: flex; gap: 4px; margin-top: 2px; }
.show-chip-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--surface);
  color: var(--brand-strong);
  border-radius: 10px;
  padding: 1px 6px;
}
.festival-show-chip-row { align-items: center; }

/* ═══════════════════════════════════════════
   REPRÉSENTATIONS — éditeur avec dropdowns
   ═══════════════════════════════════════════ */
.perf-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.perf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.perf-date-inp {
  flex: 0 0 auto;
  width: 140px;
  font-weight: 600;
}
.perf-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-items: center;
}
.perf-time-chip {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--brand);
  border-radius: 10px;
  overflow: hidden;
}
.perf-time-select {
  border: none;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 58px;
}
.perf-time-select option { color: var(--ink); background: var(--panel); }
.perf-time-del {
  background: rgba(0,0,0,.15);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  line-height: 1;
}
.perf-time-del:hover { background: rgba(0,0,0,.3); }
.perf-add-time {
  border: 1px dashed var(--brand);
  background: transparent;
  color: var(--brand);
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.perf-add-time:hover { background: var(--surface); }

.modal-performance-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-performance-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-performance-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(170px, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.mini-labeled-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mini-labeled-control small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.mini-labeled-control input {
  width: 100%;
}
.modal-performance-add {
  align-self: flex-start;
  width: auto;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .modal-performance-row {
    grid-template-columns: 1fr auto;
  }
  .modal-performance-row .mini-labeled-control {
    grid-column: 1 / -1;
  }
}

/* ── Duration select (durée spectacle) ─────────── */
.duration-select-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
  width: 100%;
}
.duration-select {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
}
.duration-select:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.duration-clock-icon {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--muted);
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  height: 100%;
  pointer-events: none;
}
.duration-clock-icon svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════
   ÉQUIPE — popover add + planning badges
   ═══════════════════════════════════════════ */

/* Popover trigger */
.event-team-add-wrap {
  position: relative;
  margin-top: 10px;
}
.event-team-add-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.event-team-add-trigger svg { width: 14px; height: 14px; }

/* Popover bubble */
.event-team-add-popover {
  position: fixed;
  z-index: 300;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.1);
  padding: 18px;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
}
.etar-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.etar-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.etar-btn-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.etar-submit {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  font-weight: 600;
}
.etar-submit:hover { background: var(--brand-strong) !important; }

/* Planning status badges */
.etpc-left { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.etpc-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.plan-badge--scheduled {
  background: var(--surface-2);
  color: #1a6b3a;
  border: 1px solid #a8d5b5;
}
.plan-badge--shift {
  background: var(--surface-2);
  color: #1a4f7a;
  border: 1px solid #a9cce3;
}
.plan-badge--todo {
  background: #FFF3CD;
  color: #856404;
  border: 1px solid #ffd97d;
  cursor: pointer;
  transition: background .12s;
}
.plan-badge--todo:hover { background: #FFE69C; }

/* Updated badge colors */
.plan-badge--hours {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.plan-badge--concert {
  background: var(--surface-2);
  color: var(--brand-strong);
  border: 1px solid var(--line-strong);
}
.festival-show-team-context {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.festival-show-team-context small {
  color: var(--muted);
  font-weight: 600;
}
.plan-badge--scheduled {
  background: var(--surface-2);
  color: #1a6b3a;
  border: 1px solid #a8d5b5;
}

/* ═══════════════════════════════════════════
   TEAM PLANNING — ghost RH + highlight + inline
   ═══════════════════════════════════════════ */

/* Ghost RH watermark in planning cell */
.team-rh-ghost {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px;
  border: 1.5px dashed #c8a84b;
  border-radius: 6px;
  background: rgba(255,243,205,.45);
  color: #856404;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  opacity: .75;
  margin-bottom: 2px;
}
.team-rh-ghost:hover {
  opacity: 1;
  background: rgba(255,243,205,.75);
}
.team-rh-ghost span { font-variant-numeric: tabular-nums; }
.team-rh-ghost small { font-weight: 600; opacity: .8; }

/* Newly planned shift highlight */
@keyframes shift-highlight {
  0%   { box-shadow: 0 0 0 3px rgba(23,107,105,.7); background: #c4f0ec; }
  70%  { box-shadow: 0 0 0 3px rgba(23,107,105,.2); }
  100% { box-shadow: none; background: inherit; }
}
.team-shift-card.is-newly-planned {
  animation: shift-highlight 2s ease-out forwards;
}

/* ── Inline planning in event detail ── */
.event-inline-planning-section { margin-top: 8px; }
.event-inline-plan-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-inline-plan-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.eipr-date {
  flex: 0 0 52px;
  text-align: center;
  line-height: 1.2;
}
.eipr-date strong { display: block; font-size: 13px; font-weight: 700; }
.eipr-date small  { font-size: 11px; color: var(--muted); text-transform: capitalize; font-weight: 600; }
.eipr-shifts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-items: center;
}
.eipr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--surface);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.eipr-chip:hover { background: var(--surface-2); }
.eipr-chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.eipr-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.eipr-name { font-weight: 600; }
.eipr-pos  { font-size: 11px; opacity: .7; }

/* Ghost chip (À planifier) */
.eipr-chip--ghost {
  border: 1.5px dashed #c8a84b;
  background: rgba(255,243,205,.6);
  color: #856404;
}
.eipr-chip--ghost:hover { background: #FFF3CD; }
.eipr-badge {
  font-size: 11px;
  background: #ffd97d;
  color: #5d4200;
  border-radius: 10px;
  padding: 1px 6px;
  font-weight: 600;
}
.eipr-chip--empty {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  cursor: default;
  font-weight: 600;
}

/* ── Change contact popover ──────────────────── */
.change-contact-popover {
  position: fixed;
  z-index: 400;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  padding: 14px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ccp-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.ccp-btn-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ccp-btn-row .primary-button {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
/* Danger delete icon */
.icon-action--danger { color: #c0392b !important; }
.icon-action--danger:hover { background: var(--surface-2) !important; border-color: #e07070 !important; }

.ccp-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
  margin-bottom: 3px;
}
.change-contact-popover { gap: 8px; }

.plan-badge--clickable { cursor: pointer; }
.plan-badge--clickable:hover { filter: brightness(.92); }
.plan-badge--hours[style*="cursor: pointer"]:hover { background: #e0e0e0; }

/* ═══════════════════════════════════════════
   Informations spectacle card + edit
   ═══════════════════════════════════════════ */
.event-info-card-section { position: relative; }
.event-info-card-edit {
  position: absolute;
  top: 12px;
  right: 12px;
}
.event-info-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.event-info-card-grid .detail-cell.is-wide {
  grid-column: 1 / -1;
}
.event-info-card-grid .detail-cell.is-wide strong {
  white-space: normal;
  line-height: 1.35;
}
.event-info-card-grid .detail-cell.is-clickable {
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.event-info-card-grid .detail-cell.is-clickable:hover {
  background: var(--surface);
  border-color: rgba(23, 107, 105, .28);
  transform: translateY(-1px);
}

.stage-structure-concert-card {
  position: relative;
}

.stage-concert-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-right: 44px;
}

.stage-concert-title-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.stage-concert-chip {
  line-height: 1.35;
}

.stage-concert-title-button:hover {
  color: var(--brand);
  text-decoration: underline;
}

.stage-concert-remove {
  position: absolute;
  right: 16px;
  top: 18px;
}
.inline-tooltip-value {
  cursor: help;
  text-decoration: underline dotted rgba(15, 67, 60, .45);
  text-underline-offset: 3px;
}
.rollup-subtitle {
  margin: 14px 0 8px;
  color: #0b4f4a;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.rollup-phase-title {
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: #062f2b;
  font-size: 16px;
}
.festival-team-type-title {
  margin: 10px 0 8px;
  color: #176b69;
  font-size: 14px;
  font-weight: 700;
}
.festival-team-scope {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.festival-team-scope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.festival-team-scope-head small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.festival-team-scope-head strong {
  display: block;
  color: #063b35;
  font-size: 20px;
}

/* Festival staffing matrix */
.festival-team-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}
.festival-team-intro strong,
.festival-team-intro small { display: block; }
.festival-team-intro strong { color: #063b35; font-size: 16px; }
.festival-team-intro small { margin-top: 3px; color: var(--muted); }
.festival-team-intro-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.festival-team-standalone-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.festival-team-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: #07534b;
}
.festival-team-status.has-missing {
  border-color: #e9c66c;
  background: #fff5d9;
  color: #6b4b00;
}
.festival-team-status strong { font-size: 14px; }
.festival-team-status small { font-size: 11px; font-weight: 600; white-space: nowrap; }
.festival-team-matrix-scope {
  margin-bottom: 14px;
  overflow: visible;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
}
.festival-team-matrix-scope.is-collapsed { background: var(--panel); }
.festival-team-matrix-scope.is-editing {
  position: fixed;
  inset: 10px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-color: #6b9d95;
  background: var(--panel);
  box-shadow: 0 22px 70px rgba(4, 41, 36, .28);
}
.festival-team-matrix-scope.is-editing .festival-team-matrix-head { flex: 0 0 auto; }
.festival-team-matrix-scope.is-editing .festival-team-matrix-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}
/* Le crayon : un carré discret dans l'en-tête, teinté quand la saisie est
   ouverte. C'est le seul chemin vers l'édition de la semaine. */
.festival-team-edit-pencil {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.festival-team-edit-pencil.is-active {
  border-color: #0d655e;
  background: #0d655e;
  color: #fff;
}
.festival-team-edit-pencil svg,
.festival-team-row-remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.festival-team-matrix-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.festival-team-matrix-scope.is-collapsed .festival-team-matrix-head { border-bottom: 0; }
.festival-team-collapse {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: #0b5952;
  cursor: pointer;
}
.festival-team-collapse[hidden] { display: none; }
.festival-team-collapse svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.festival-team-matrix-title { min-width: 0; flex: 1 1 auto; }
.festival-team-matrix-title small,
.festival-team-matrix-title strong { display: block; }
.festival-team-matrix-title small { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.festival-team-matrix-title strong { overflow: hidden; color: #063b35; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.festival-team-matrix-body { padding: 12px; }
.festival-team-contact-select {
  width: 100%;
  min-height: 32px;
  padding: 5px 26px 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: #143b37;
  font-size: 11px;
}
.festival-team-add-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.festival-team-add-actions .event-team-add-wrap { margin: 0; }
.festival-team-add-actions .event-team-add-trigger { white-space: nowrap; }

.festival-team-hourly-rate {
  display: grid;
  gap: 3px;
  margin-bottom: 7px;
  text-align: left;
}
.festival-team-hourly-rate > span:first-child {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.festival-team-hourly-rate-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
}
.festival-team-hourly-rate-field input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 7px;
  border: 0;
  background: transparent;
  color: #123d34;
  font-size: 12px;
  font-weight: 700;
}
.festival-team-hourly-rate-field input:focus {
  outline: 2px solid #16817b;
  outline-offset: -2px;
}
.festival-team-hourly-rate-field input:disabled {
  color: var(--muted);
  cursor: not-allowed;
}
.festival-team-hourly-rate-field b {
  display: grid;
  height: 100%;
  place-items: center;
  border-left: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 11px;
}
.festival-team-cost-summary {
  min-height: 34px;
}
.budget-rh-audit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #e3b95c;
  border-radius: 6px;
  background: #fff7da;
  color: #6f4b00;
  font-size: 12px;
}
.budget-rh-audit strong { white-space: nowrap; }
.festival-team-row-contact { margin-top: 7px; color: var(--ink-2); font-size: 11px; font-weight: 600; }
.festival-team-quick-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 5px;
  margin-top: 5px;
}
.festival-team-quick-contact input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: #143b37;
  font: inherit;
}
.festival-team-quick-contact input:focus {
  outline: 2px solid rgba(31, 135, 129, .2);
  border-color: var(--brand);
}
.festival-team-quick-contact button {
  display: grid;
  place-items: center;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--brand-strong);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.festival-team-quick-contact button:hover { background: var(--surface-2); }
.festival-team-position-note {
  display: block;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: pre-wrap;
}
.festival-team-position-note.is-empty { color: var(--muted); font-style: italic; font-weight: 600; }
.festival-team-position-note-input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 7px;
  padding: 6px 7px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: #173a36;
  font: inherit;
  line-height: 1.3;
}
.festival-team-row-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 4px 6px;
  border: 1px solid #efb1ae;
  border-radius: 6px;
  background: var(--surface);
  color: #a52d29;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.festival-team-workload-legend {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: min(100%, 900px);
  padding: 9px 12px;
  border-top: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
}
.festival-team-workload-legend span { display: inline-flex; align-items: center; gap: 5px; }
.festival-team-workload-legend i { width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; }
.festival-team-workload-legend i.is-ok { background: #b7dfcd; }
.festival-team-workload-legend i.is-warning { background: #f6b36b; }
.festival-team-workload-legend i.is-danger { background: #ef8d83; }
.festival-team-row-add-wrap { position: relative; }
.festival-team-row-add-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 60;
  display: grid;
  gap: 10px;
  width: min(340px, calc(100vw - 40px));
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 14px 40px rgba(5, 54, 48, .2);
}
.festival-team-row-add-popover[hidden] { display: none; }
.festival-team-row-add-popover > small { color: var(--ink-2); font-size: 11px; line-height: 1.35; }
.festival-team-row-add-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.festival-team-matrix-scope.is-editing .festival-team-add-actions { flex: 0 0 auto; }

@media (max-width: 640px) {
  .festival-team-intro { align-items: stretch; flex-direction: column; }
  .festival-team-intro-actions { align-items: stretch; justify-content: flex-start; flex-direction: column; }
  .festival-team-matrix-head { align-items: flex-start; flex-wrap: wrap; }
  .festival-team-matrix-head > .secondary-light-button { margin-left: 46px; }
  .festival-team-status { margin-left: auto; }
  .festival-team-matrix-body { padding: 8px; }
}
.festival-tech-scope-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.festival-tech-info-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
}
.tech-file-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}
.tech-file-row {
  grid-template-columns: minmax(180px, 1fr) minmax(110px, 150px) 42px;
}
.event-info-edit-panel {
  margin-top: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.event-info-edit-panel .show-info-grid {
  margin-bottom: 12px;
}

/* Planning export row */
.planning-export-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.planning-export-row button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.planning-export-row button svg { width: 14px; height: 14px; }

/* General tab export bar (top) */
.general-export-bar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 0 4px;
}
.general-export-bar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.general-export-bar button svg { width: 14px; height: 14px; }

.planning-daily-export-popover {
  width: 440px;
  max-width: calc(100vw - 24px);
}

.planning-daily-export-popover h3 {
  margin: 0 0 12px;
}

.planning-daily-export-form {
  display: grid;
  gap: 14px;
}

.planning-daily-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.planning-daily-export-subtitle {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.planning-daily-export-types {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}

.planning-daily-export-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 28px;
  font-size: 13px;
}

.planning-daily-export-check input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0;
  accent-color: var(--brand);
}

.planning-daily-export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

/* Popover inputs - prevent overflow */
.event-team-add-popover input,
.event-team-add-popover select {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.etar-row > * { min-width: 0; overflow: hidden; }
.event-team-add-popover {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.event-team-add-popover .etar-btn-row {
  position: sticky;
  bottom: -18px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  margin: 8px -18px -18px;
  padding: 12px 18px 18px;
}

/* Location add popover */
.location-add-popover { width: 400px; }

/* Security APS popover */
.security-add-popover { width: 400px; }

/* ═══════════════════════════════════════════
   Gantt spectacle — kind colors
   ═══════════════════════════════════════════ */
.gantt-kind-planning .gantt-bar { background: #7c6fd4; }
.gantt-kind-planning .gantt-label-text { color: #5b51b0; }
.gantt-kind-rh .gantt-bar { background: #2196a8; }
.gantt-kind-rh .gantt-label-text { color: #186570; }
.gantt-kind-security .gantt-bar { background: #e05c5c; }
.gantt-kind-security .gantt-label-text { color: #c13e3e; }
.gantt-legend-chip[data-kind="planning"] { border-color: #7c6fd4; color: #7c6fd4; }
.gantt-legend-chip[data-kind="planning"].is-hidden { background: transparent; }
.gantt-legend-chip[data-kind="rh"] { border-color: #2196a8; color: #2196a8; }
.gantt-legend-chip[data-kind="rh"].is-hidden { background: transparent; }
.gantt-legend-chip[data-kind="security"] { border-color: #e05c5c; color: #e05c5c; }
.gantt-legend-chip[data-kind="security"].is-hidden { background: transparent; }
.gantt-kind-header[data-kind="planning"] { background: var(--surface-2); color: #5b51b0; }
.gantt-kind-header[data-kind="rh"] { background: var(--surface-2); color: #186570; }
.gantt-kind-header[data-kind="security"] { background: var(--surface-2); color: #c13e3e; }

/* ── Archive event cards ──────────────────────────────────────── */
.archive-event-cards {
  padding: var(--space, 1.5rem) var(--space, 1.5rem) 0;
}
.archive-events-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted, var(--ink-2));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.archive-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.archive-event-card {
  background: var(--panel, var(--panel));
  border: 1px solid var(--line, var(--line));
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: box-shadow 0.15s ease;
}
.archive-event-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.archive-event-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.archive-event-type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #2a7c6f);
  background: color-mix(in srgb, var(--accent, #2a7c6f) 10%, transparent);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.archive-event-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, var(--ink));
  line-height: 1.3;
}
.archive-event-meta {
  font-size: 11px;
  color: var(--muted, var(--ink-2));
  line-height: 1.4;
}
.archive-event-btn {
  margin-top: 0.5rem;
  background: none;
  border: 1px solid var(--accent, #2a7c6f);
  color: var(--accent, #2a7c6f);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: center;
}
.archive-event-btn:hover {
  background: var(--accent, #2a7c6f);
  color: #fff;
}

/* ── Gantt custom tasks & interactive bars ─── */
.gantt-bar { cursor: default; }
.gantt-kind-custom .gantt-bar {
  background: var(--color-orange);
  color: var(--color-text-inverse);
  cursor: grab;
}

.gantt-kind-custom .gantt-bar.is-milestone {
  width: 24px !important;
  min-width: 24px;
  height: 24px;
  top: 50%;
  bottom: auto;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: #d17a39;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(209, 122, 57, .24), var(--shadow-sm);
}

.gantt-kind-custom .gantt-bar.is-milestone span {
  width: 100%;
  padding: 0;
  text-align: center;
  line-height: 18px;
}

.gantt-kind-custom .gantt-bar:active,
.gantt-kind-custom .gantt-bar.is-dragging {
  cursor: grabbing;
  opacity: 0.8;
  box-shadow: var(--shadow-md);
}
.gantt-task-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
  max-width: 260px;
  pointer-events: none;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.gantt-task-tooltip strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.gantt-task-tooltip small {
  display: block;
  color: var(--color-text-muted);
}

/* ── Budget Consolidated ─────────────────────────────── */
.event-budget-consolidated table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.budget-group-header td {
  background: var(--color-surface-offset);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
  display: table-cell;
}
.budget-group-header-product td {
  background: color-mix(in oklch, var(--color-success) 10%, var(--color-surface-offset));
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.budget-group-total { float: right; font-variant-numeric: tabular-nums; opacity: 0.8; }
.budget-calculated-real { opacity: 0.5; font-style: italic; }

.budget-consolidated-totals {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.budget-consolidated-totals div { display: flex; flex-direction: column; }
.budget-consolidated-totals small { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.budget-consolidated-totals strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.budget-total-balance { margin-left: auto; text-align: right; }
.budget-total-balance.is-positive strong { color: var(--color-success); }
.budget-total-balance.is-negative strong { color: var(--color-error); }

.popover--gantt-task {
  width: 320px;
}
.popover--gantt-task .detail-row { display: flex; gap: var(--space-2); }
.popover--gantt-task .detail-row .detail-control { flex: 1; }

.event-budget-consolidated table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}
.event-budget-consolidated table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}
.event-budget-consolidated table tr:last-child td {
  border-bottom: none;
}

.festival-budget-summary table {
  border-collapse: separate;
  border-spacing: 0;
}

.festival-budget-type-header td {
  background: #18342f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-top: 14px solid var(--line);
}

.festival-budget-type-header:first-child td {
  border-top-width: 0;
}

.festival-budget-type-header em,
.festival-budget-scope-header em {
  float: right;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  opacity: .9;
  font-variant-numeric: tabular-nums;
}

.festival-budget-scope-header td {
  background: var(--surface);
  border-top: 2px solid rgba(23, 107, 105, .18);
  border-bottom: 1px solid var(--line);
  color: #063b35;
  font-weight: 700;
}

.festival-budget-scope-header span {
  margin-left: 10px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.festival-budget-type-total td {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 8px solid var(--line);
  color: #0b4f4a;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.festival-budget-type-total td:first-child {
  text-align: left;
}

.festival-budget-data-row td:nth-child(5),
.festival-budget-data-row td:nth-child(6),
.festival-budget-data-row td:nth-child(7) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.event-budget-consolidated table tbody tr.budget-group-header:not(:first-child) td {
  padding-top: var(--space-8);
}
.budget-editable-cell {
  position: relative;
  cursor: text;
  transition: background 0.1s;
}
.budget-editable-cell:hover {
  background: var(--color-surface-offset);
}
.budget-pencil-icon {
  display: none;
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  pointer-events: none;
}
.budget-pencil-icon svg { width: 14px; height: 14px; }
.budget-editable-cell:hover .budget-pencil-icon {
  display: inline-block;
}
.budget-inline-edit {
  width: 100%;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  outline: none;
}
.budget-real-input {
  max-width: 80px;
}

/* Quick Add Bar Redesign */
.budget-quick-add-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.budget-quick-add-bar input, .budget-quick-add-bar select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.budget-quick-add-bar .b-add-cat { flex: 1 1 120px; }
.budget-quick-add-bar .b-add-label { flex: 2 1 150px; }
.budget-quick-add-bar .b-add-source { flex: 1 1 120px; }
.budget-quick-add-bar .b-add-amount { flex: 0 1 100px; }
.budget-quick-add-bar .b-add-type { flex: 0 1 110px; }
.budget-quick-add-bar button { flex: 0 0 auto; white-space: nowrap; }

.event-budget-consolidated table tbody tr.budget-group-header td,
.event-budget-consolidated table tbody tr.budget-group-header-product td { padding-top: var(--space-8); }
.budget-editable-cell { position: relative; cursor: text; }
.budget-editable-cell:hover { background: var(--color-surface-offset); }
.budget-pencil-icon { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); display: none; color: var(--color-text-faint); pointer-events: none; }
.budget-editable-cell:hover .budget-pencil-icon { display: inline-flex; }
.budget-inline-edit { width: calc(100% - 18px); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--color-bg); color: var(--color-text); font: inherit; outline: none; }
.budget-quick-add-bar { display:grid; grid-template-columns: 1.1fr 1.6fr 1.4fr 0.8fr 0.9fr auto; gap: var(--space-2); align-items:center; padding: var(--space-4); background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); margin-top: var(--space-4); }
.budget-quick-add-bar input,.budget-quick-add-bar select { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg); color:var(--color-text); font-size:var(--text-sm); }
@media (max-width: 900px) { .budget-quick-add-bar { grid-template-columns: 1fr 1fr; } }
.popover--gantt-task { z-index: 10000; width: 360px; }

.budget-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.budget-linked-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-offset);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
}

.budget-quick-add-bar.budget-quick-add-bar--button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.budget-quick-add-hint {
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  font-weight: 600;
}

.budget-line-popover {
  z-index: 10000;
  width: 430px;
}

.budget-line-popover h3 {
  margin: 0 0 12px;
  font-size: 14px;
}

.budget-line-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.budget-line-form .detail-control:nth-of-type(4),
.budget-line-form .detail-control:nth-of-type(5) {
  grid-column: 1 / -1;
}

.festival-budget-summary {
  --festival-budget-black: #111;
  --festival-budget-gray: #f2f2f2;
}

.festival-budget-summary table {
  border: 1px solid var(--festival-budget-black);
  background: var(--panel);
}

.festival-budget-summary table thead th {
  background: var(--festival-budget-black);
  color: #fff;
  border-right: 1px solid var(--line);
}

.festival-budget-summary .festival-budget-category-header td,
.festival-budget-summary .budget-group-header-product.festival-budget-category-header td {
  padding: 8px 10px !important;
  background: var(--festival-budget-black);
  color: #fff;
  border: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.festival-budget-summary .festival-budget-subcategory-header td {
  padding: 8px 10px 4px;
  background: var(--panel);
  color: var(--ink);
  border-top: 1px solid #111;
  border-bottom: 0;
  font-weight: 700;
  text-decoration: underline;
}

.festival-budget-summary .festival-budget-data-row td {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line-strong);
}

.festival-budget-summary .festival-budget-data-row:nth-child(even) td {
  background: var(--panel);
}

.festival-budget-summary .festival-budget-type-total td,
.festival-budget-summary .event-budget-total-row td {
  background: var(--festival-budget-gray);
  color: var(--ink);
  border-color: #111;
}

.budget-line-actions {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .budget-line-form,
  .budget-quick-add-bar.budget-quick-add-bar--button {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}
/* Calendrier mensuel enrichi */
.day-cell {
  position: relative;
}
.day-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.day-cell-head .day-number {
  margin-bottom: 0;
}
.calendar-more {
  width: 100%;
  margin-top: 2px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}
.calendar-note-popover {
  display: grid;
  gap: 10px;
  width: 360px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.calendar-note-field {
  display: grid;
  gap: 5px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.calendar-note-popover input,
.calendar-note-popover select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
  text-transform: none;
}
.calendar-note-popover .toggle-line {
  justify-content: flex-start;
  min-height: auto;
  padding: 2px 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

/* Daily view refresh */
#dailyView {
  --daily-panel: #fbfcfb;
  --daily-soft: #f2f7f5;
  --daily-line: #d9e2df;
  --daily-head: #13352f;
  --daily-teal: #15827c;
}

#dailyView .daily-header {
  display: grid;
  grid-template-columns: 260px repeat(4, minmax(130px, 1fr));
  align-items: end;
  gap: 10px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--daily-line);
  border-left: 5px solid var(--brand);
  border-radius: 6px;
  background: var(--daily-panel);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(22, 36, 32, 0.06);
  overflow: hidden;
}

#dailyView .daily-header .eyebrow {
  margin: 0 0 4px;
  color: var(--brand);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#dailyView .daily-header > div:first-child {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

#dailyView .daily-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.1;
}

#dailyView #dailyLabel {
  grid-column: 1;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--daily-line);
  border-radius: 6px;
  background: var(--daily-soft);
  color: var(--brand-strong);
  white-space: nowrap;
}

#dailyView .daily-header .date-picker {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

#dailyView .daily-header input,
#dailyView .daily-header select {
  width: 100%;
  max-width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
}

#dailyView .daily-header select[multiple] {
  min-width: 0;
  min-height: 42px;
  max-height: 76px;
  padding: 5px 10px;
  overflow: auto;
}

#dailyView .daily-export-actions {
  grid-column: 2 / -1;
  grid-row: 2;
  justify-self: end;
  display: flex;
  gap: 7px;
  align-items: end;
  min-width: 0;
  max-width: 100%;
}

#dailyView .daily-export-actions select {
  min-width: 140px;
  max-width: 180px;
}

#dailyView .daily-export-actions button {
  min-width: 74px;
  padding-inline: 14px;
}

#dailyView .daily-key-posts {
  margin: 0 0 12px;
}

#dailyView .daily-key-post {
  min-height: 58px;
  border-color: var(--line);
  border-left-color: var(--brand);
  background: linear-gradient(180deg, #f8fcfb, #eef8f6);
  box-shadow: 0 8px 18px rgba(22, 36, 32, 0.04);
}

#dailyView .day-block-section {
  margin: 0 0 16px;
  border: 1px solid var(--daily-line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(22, 36, 32, 0.06);
}

#dailyView .day-block-head {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 11px 14px;
  background: var(--daily-head);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#dailyView .day-block-wrap {
  grid-template-columns: 92px minmax(0, 1fr);
  max-height: 720px;
  background: var(--panel);
}

#dailyView .day-block-hours {
  background: var(--surface);
}

#dailyView .day-block-hours span {
  right: 14px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

#dailyView .day-block-grid {
  border-left: 1px solid var(--daily-line);
  background:
    linear-gradient(90deg, rgba(21, 130, 124, .035), rgba(21, 130, 124, 0) 22%),
    #fbfdfc;
}

#dailyView .day-block-grid > span {
  background: var(--surface-2);
}

#dailyView .day-block {
  border: 1px solid rgba(22, 36, 32, 0.12);
  border-left: 5px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 7px 16px rgba(22, 36, 32, 0.13);
}

#dailyView .day-block.event,
#dailyView .day-block.eventPlanning {
  background: #d75f35;
  border-left-color: #9f3f21;
}

#dailyView .day-block.logistics {
  background: #2f8579;
  border-left-color: #17675d;
}

#dailyView .day-block.security {
  background: #7f5aa6;
  border-left-color: #5d3a82;
}

#dailyView .day-block.task,
#dailyView .day-block.admin {
  background: #c98249;
  border-left-color: #9c5d2d;
}

#dailyView .timeline-wrap {
  margin: 0;
  border: 1px solid var(--daily-line);
  border-radius: 6px;
  background: var(--panel);
  overflow: auto;
}

#dailyView .timeline-table th {
  background: var(--daily-head);
  border-color: #244a43;
}

@media (max-width: 1180px) {
  #dailyView .daily-header {
    grid-template-columns: 1fr 1fr;
  }
  #dailyView .daily-header > div:first-child,
  #dailyView .daily-export-actions,
  #dailyView #dailyLabel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1180px) {
  #dailyView .daily-header {
    grid-template-columns: 230px repeat(2, minmax(150px, 1fr));
  }
  #dailyView .daily-header > div:first-child {
    grid-row: auto;
  }
  #dailyView #dailyLabel {
    grid-column: 1;
    grid-row: auto;
  }
  #dailyView .daily-export-actions {
    grid-column: 2 / -1;
    grid-row: auto;
    justify-self: end;
  }
}
.dot.meeting,
.tag.meeting,
.pill.meeting {
  background: var(--surface-2);
}
.dot.absence,
.tag.absence,
.pill.absence {
  background: var(--surface-2);
}
.dot.info,
.tag.info,
.pill.info {
  background: var(--surface-2);
}
.pill.meeting {
  border-color: #7c6fd4;
}
.pill.absence {
  border-color: #87928f;
}
.pill.info {
  border-color: #176B69;
}
.planning-pill.meeting {
  background: var(--surface-2);
}
.planning-pill.absence {
  background: var(--surface-2);
}
.planning-pill.info {
  background: var(--surface-2);
}

@media (max-width: 1180px) {
  .festival-request-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .festival-request-row > .mini-remove { justify-self: end; }
}

@media (max-width: 640px) {
  .festival-request-row { grid-template-columns: 1fr; }
}

/* Demandes administratives : cartes homogènes et lisibles */
.festival-request-help {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 12px;
  text-align: left;
  line-height: 1.35;
}

.festival-request-row {
  grid-template-columns: minmax(240px, 1.45fr) minmax(140px, .7fr) minmax(195px, 1fr) minmax(155px, .8fr) minmax(145px, .75fr) 120px 34px;
  align-items: stretch;
  padding: 12px;
  background: var(--panel);
}

.festival-request-row > .detail-control,
.festival-request-row > .detail-cell,
.festival-request-row > .festival-request-milestone {
  box-sizing: border-box;
  min-height: 88px;
}

.festival-request-row > .detail-control,
.festival-request-row > .detail-cell {
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px 12px;
}

.festival-request-row > .detail-cell small,
.festival-request-row > .detail-control > span {
  min-height: 14px;
  color: var(--muted);
  line-height: 1.15;
}

.festival-request-row > .detail-cell strong {
  align-self: center;
  font-size: 14px;
  line-height: 1.2;
}

.festival-request-row .detail-control select,
.festival-request-row .detail-control input[type="date"] {
  width: 100%;
  min-height: 42px;
  font-size: 12px;
}

.festival-request-row > .festival-request-deadline {
  border-color: #dfc47b;
  background: var(--surface);
}

.festival-request-deadline strong { color: #6d4d00; }
.festival-request-deadline span { margin-top: 0; }

.festival-request-milestone {
  min-height: 88px;
  padding: 10px;
  background: var(--panel);
  text-align: center;
}

.festival-request-row > .mini-remove {
  align-self: center;
  justify-self: center;
}

@media (max-width: 1180px) {
  .festival-request-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .festival-request-row > .mini-remove { justify-self: end; }
}

@media (max-width: 640px) {
  .festival-request-help { grid-template-columns: 1fr; }
  .festival-request-row { grid-template-columns: 1fr; }
  .festival-request-row > .detail-control,
  .festival-request-row > .detail-cell,
  .festival-request-row > .festival-request-milestone { min-height: auto; }
}
.event-lodges-section {
  overflow: hidden;
}

.event-lodges-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--panel);
}

.event-lodges-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
}

.event-lodges-table th,
.event-lodges-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
}

.event-lodges-table th:last-child,
.event-lodges-table td:last-child {
  border-right: 0;
}

.event-lodges-table th {
  height: 44px;
  padding: 0 14px;
  background: #123d34;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: left;
  text-transform: uppercase;
}

.event-lodges-table th:first-child {
  width: 220px;
}

.event-lodges-table th:nth-child(2) {
  width: 180px;
}

.event-lodges-table input,
.event-lodges-table select {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 9px 14px;
  font: inherit;
}

.event-lodges-table input:focus,
.event-lodges-table select:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.event-lodges-table td:last-child {
  position: relative;
}

.event-lodge-names {
  padding-right: 54px !important;
}

.event-lodge-remove {
  position: absolute;
  top: 50%;
  right: 9px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #f1c7c3;
  border-radius: 6px;
  background: var(--surface);
  color: #d33c36;
  cursor: pointer;
  transform: translateY(-50%);
}

.event-lodge-remove svg {
  width: 15px;
  height: 15px;
}

.event-lodges-empty td {
  height: 54px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

.event-lodges-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.event-lodges-add:hover {
  background: var(--surface);
  color: var(--brand);
}

.event-lodges-add svg {
  width: 17px;
  height: 17px;
}

.structure-practical-info-card {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.structure-practical-info-card h3 {
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.structure-practical-info-grid {
  padding: 12px;
}

.event-capacity-table-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.event-capacity-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.event-capacity-table th,
.event-capacity-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.event-capacity-table th:last-child,
.event-capacity-table td:last-child {
  border-right: 0;
}

.event-capacity-table tbody tr:last-child td {
  border-bottom: 0;
}

.event-capacity-table th {
  padding: 11px 14px;
  background: var(--brand-strong);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: left;
  text-transform: uppercase;
}

.event-capacity-table th:first-child {
  width: 55%;
}

.event-capacity-table td:first-child {
  padding: 10px 14px;
}

.event-capacity-table td strong,
.event-capacity-table td small {
  display: block;
}

.event-capacity-table td strong {
  color: var(--ink);
  font-size: 13px;
}

.event-capacity-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.event-capacity-table input {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 9px 14px;
  font: inherit;
  font-weight: 600;
}

.event-capacity-table input:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.event-capacity-empty td {
  height: 54px;
  padding: 0 14px !important;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

.festival-show-practical-section {
  overflow: visible;
}

.festival-show-practical-export {
  margin-bottom: 12px;
}

.festival-show-practical-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.festival-show-practical-grid .detail-control {
  min-width: 0;
  margin: 0;
}

.festival-show-practical-grid input,
.festival-show-practical-grid textarea {
  width: 100%;
}

.festival-show-practical-grid textarea {
  min-height: 92px;
  resize: vertical;
}

.festival-show-practical-grid .is-catering {
  grid-column: span 2;
}

.festival-show-practical-grid .is-catering textarea {
  min-height: 132px;
}

.festival-show-practical-grid .is-invitation,
.festival-show-practical-grid .is-note {
  grid-column: span 1;
}

.festival-show-practical-lodges {
  margin-top: 14px;
}

.festival-show-practical-lodges h4 {
  margin: 0 0 8px;
  color: var(--brand-strong);
}

.festival-show-practical-lodges table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.festival-show-practical-lodges th,
.festival-show-practical-lodges td {
  border: 1px solid var(--line);
  padding: 7px 9px;
  text-align: left;
}

.festival-show-practical-lodges th {
  background: var(--surface);
  color: var(--brand-strong);
  font-size: 11px;
  text-transform: uppercase;
}

.festival-show-practical-lodges th:first-child {
  width: 28%;
}

.festival-show-practical-lodges th:last-child,
.festival-show-practical-lodges td:last-child {
  width: 52px;
  text-align: center;
}

.festival-show-practical-lodges input {
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.festival-show-practical-lodges .secondary-light-button {
  margin-top: 9px;
}

@media (max-width: 640px) {
  .festival-show-practical-grid {
    grid-template-columns: 1fr;
  }

  .festival-show-practical-grid .is-catering,
  .festival-show-practical-grid .is-invitation,
  .festival-show-practical-grid .is-note {
    grid-column: auto;
  }
}

/* ============================================================
   FINITION DE L'AUDIT ERGONOMIQUE 00.00.4
   ============================================================ */
.save-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.save-status::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #7c8b85;
}

.save-status.is-saving::before {
  background: #d79b32;
  box-shadow: 0 0 0 3px rgba(215, 155, 50, .16);
}

.save-status.is-saved::before {
  background: #268f66;
}

.save-status.is-error {
  color: #a32f2f;
  background: var(--surface);
}

.save-status.is-error::before {
  background: #c83e3e;
}

.options-tools {
  display: grid;
  grid-template-columns: minmax(220px, 520px) auto minmax(160px, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.options-search {
  width: 100%;
  min-width: 0;
  min-height: 42px;
}

.options-search-status {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}

.options-tabs,
#eventDetailView .event-detail-tabs {
  position: sticky;
  top: 8px;
  z-index: 120;
  box-shadow: 0 8px 20px rgba(12, 25, 23, .08);
}

.task-copilot-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table-wrap {
  scrollbar-gutter: stable;
  scrollbar-color: var(--brand) #e7efec;
  scrollbar-width: thin;
}

@media (max-width: 640px) {
  .topbar {
    align-items: stretch;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .topbar-actions > * {
    width: 100%;
    min-width: 0;
  }

  .save-status {
    justify-content: center;
  }

  .options-tools {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .options-search-status {
    grid-column: 1 / -1;
    text-align: left;
  }

  .options-tabs,
  #eventDetailView .event-detail-tabs {
    top: 4px;
  }
}

/* ============================================================
   AUDIT D'USAGE LOCAL ET CORRECTIONS ERGONOMIQUES 00.00.2
   ============================================================ */
.usage-analytics-options {
  display: grid;
  gap: 14px;
}

.usage-analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.usage-analytics-card {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.usage-analytics-card strong {
  color: var(--brand-strong);
  font-size: 20px;
  line-height: 1;
}

.usage-analytics-card span,
.usage-analytics-notice {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.usage-analytics-notice {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  background: var(--surface);
}

.usage-tab-recommendations {
  display: grid;
  gap: 10px;
}

.usage-tab-recommendations-head {
  display: grid;
  gap: 2px;
}

.usage-tab-recommendations-head > strong {
  color: var(--ink);
}

.usage-tab-recommendations-head > span,
.usage-tab-recommendation-heading > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.usage-tab-recommendations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.usage-tab-recommendation {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.usage-tab-recommendation-heading {
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.usage-tab-recommendation ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: usage-order;
}

.usage-tab-recommendation li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  counter-increment: usage-order;
}

.usage-tab-recommendation li:last-child {
  border-bottom: 0;
}

.usage-tab-recommendation li::before {
  content: counter(usage-order);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.usage-tab-recommendation li > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
}

.usage-tab-recommendation li > strong {
  min-width: 26px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--brand-strong);
  font-size: 11px;
  text-align: center;
}

.usage-analytics-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.usage-analytics-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.usage-analytics-table th,
.usage-analytics-table td {
  padding: 9px 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.usage-analytics-table th {
  background: var(--brand-strong);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
}

.usage-analytics-table th:last-child,
.usage-analytics-table td:last-child {
  border-right: 0;
}

.usage-analytics-table tbody tr:last-child td {
  border-bottom: 0;
}

.usage-analytics-table td:nth-child(4) {
  font-weight: 700;
  text-align: center;
}

.usage-analytics-empty {
  height: 64px;
  color: var(--muted);
  font-style: italic;
  text-align: center !important;
}

.usage-analytics-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rh-orphans {
  display: grid;
  gap: 14px;
}

.rh-orphan-groups {
  display: grid;
  gap: 10px;
}

.rh-orphan-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.rh-orphan-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.rh-orphan-group-head small {
  color: var(--muted);
  font-weight: 600;
}

.rh-orphan-group .muted-line {
  margin: 0;
  font-size: 11px;
}

.rh-orphan-details summary {
  cursor: pointer;
  font-weight: 700;
}

.rh-orphan-table-wrap {
  margin-top: 8px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.rh-orphan-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 12px;
}

.rh-orphan-table th,
.rh-orphan-table td {
  padding: 7px 9px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.rh-orphan-table th {
  position: sticky;
  top: 0;
  background: var(--brand-strong);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
}

.rh-orphan-table th:last-child,
.rh-orphan-table td:last-child {
  border-right: 0;
}

.rh-orphan-table tbody tr:last-child td {
  border-bottom: 0;
}

.rh-orphan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rh-orphan-actions select {
  min-width: 260px;
  max-width: 100%;
}

@media (max-width: 640px) {
  .rh-orphan-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rh-orphan-actions select {
    min-width: 0;
  }
}

button:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid rgba(23, 107, 105, .35);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .usage-analytics-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usage-tab-recommendations-grid {
    grid-template-columns: 1fr;
  }

  .usage-analytics-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .usage-analytics-actions button {
    width: 100%;
  }

  #dailyView .daily-header {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible;
  }

  #dailyView .daily-header > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100%;
    min-width: 0;
  }

  #dailyView .daily-export-actions {
    justify-self: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
  }

  #dailyView .daily-export-actions select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .event-detail-hero {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow: visible;
  }

  .detail-hero-right {
    width: 100%;
    align-items: stretch;
  }

  .detail-hero-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .detail-kpi-chip {
    min-width: 0;
    padding-inline: 6px;
  }

  .event-detail-tabs {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .detail-tab {
    flex: 0 0 auto;
  }

  .event-budget-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .event-budget-controls > * {
    width: 100%;
    min-width: 0;
  }

  .budget-line-popover {
    width: min(430px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .budget-line-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-top: 10px;
    background: var(--panel);
  }
}

/* Timelines : hauteur intégrale et défilement horizontal uniquement. */
.day-block-wrap,
.festival-agenda,
.festival-structure-columns-day,
.festival-show-timeline-viewport {
  max-height: none;
  overflow-y: visible;
}

.festival-program-board,
.festival-structure-columns-day,
.festival-show-timeline-viewport {
  overflow-x: auto;
}

.festival-structure-columns-day {
  scrollbar-gutter: auto;
}

.festival-show-timeline-expand,
.festival-structure-timeline-expand {
  display: none !important;
}

/* ==========================================================================
   COUCHE ERGONOMIE & ACCESSIBILITÉ — ajoutée le 26/08/2026
   Placée en fin de fichier : à spécificité égale, c'est la dernière règle qui
   gagne. Ce bloc est autonome et peut être retiré d'un seul tenant.
   ========================================================================== */

/* --- 1. Contrastes ------------------------------------------------------
   --muted (#6E787C) tombait sous le seuil WCAG AA dès qu'il servait à des
   textes de 9 à 11 px sur un panneau clair : « Enregistré à 23:59 » était à
   4,11:1 et les noms de jour à 4,21:1, pour un minimum requis de 4,5:1.
   Assombrir le token corrige tous les cas d'un coup, sans changer la teinte. */
:root {
  --muted:        #5A6468;   /* 4,11:1 → 5,5:1 sur panneau clair */
  --sidebar-muted: #8AA6A1;  /* 4,38:1 → 7,0:1 sur la barre latérale sombre */
}

/* Le libellé « vide » du calendrier était à 1,93:1, donc pratiquement
   invisible. Il reste discret, mais devient lisible. */
.calendar-empty-label {
  color: var(--muted);
}

/* --- 2. Focus clavier ---------------------------------------------------
   Aucun des 37 éléments focusables de l'accueil n'affichait d'état de focus :
   la navigation au clavier était invisible. Une règle globale suffit.
   :focus-visible ne se déclenche qu'au clavier, jamais au clic souris. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sur la barre latérale sombre, le teal de marque manque de contraste :
   on passe à une variante claire. */
.sidebar :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--brand-light);
}

/* --- 3. Cibles de clic --------------------------------------------------
   Les pastilles de planning mesuraient 26 px de haut, sous le minimum
   confortable de 32 px — gênant à la souris, pénible au trackpad. */
.planning-pill {
  min-height: 32px;
}

/* --- 4. Mouvement -------------------------------------------------------
   Aucune prise en compte de prefers-reduced-motion : les transitions et
   animations s'imposaient aux personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 5. Sur-titres ------------------------------------------------------
   .eyebrow utilisait --brand (#1A7A78) à 9,5 px : 4,42:1 sur les fonds
   légèrement teintés, juste sous le seuil. --brand-mid le remonte à ~6,9:1
   sans changer la couleur perçue. */
.eyebrow {
  color: var(--brand-mid);
}

/* --- 6. Contrastes restants, vue par vue --------------------------------
   Relevés au contrastomètre sur chaque écran, seuil WCAG AA (4,5:1). */

/* Calendrier : les jours des mois adjacents (.day-cell.is-muted) étaient à
   2,28:1. Ils restent secondaires, mais deviennent lisibles. */
.day-cell.is-muted .day-number {
  color: var(--ink-2);
}

/* Planning équipe : le libellé « REPOS » était à 1,86:1 et 8,7 px —
   l'information la plus facile à manquer alors qu'elle engage la paie. */
.team-rest-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
}

/* Journée : l'heure était passée à opacity .9 sur un aplat teal, ce qui la
   faisait tomber à 3,1:1. L'opacité n'apportait rien de lisible. */
.day-block-time {
  opacity: 1;
}

/* Sur-titres teal sans classe dédiée (explorateur et carte briefing). */
.home-explorer-recap > small,
.home-ai-card span {
  color: var(--brand-mid);
}

/* --- 7. Couleurs de catégorie de la vue Journée -------------------------
   Les pastilles portent du texte blanc, mais deux teintes étaient trop
   claires pour lui : « spectacle » à 3,76:1 et « tâche/admin » à 3,10:1.
   Les autres catégories passaient déjà (logistique 4,41 · sécurité 5,36 ·
   RH 4,63). Teintes assombries à couleur perçue constante. */
#dailyView .day-block.event,
#dailyView .day-block.eventPlanning {
  background: #B84E28;   /* 3,76:1 → 5,05:1 */
}
#dailyView .day-block.task,
#dailyView .day-block.admin {
  background: #A5651F;   /* 3,10:1 → 4,69:1 */
}
#dailyView .day-block.logistics {
  background: #267066;   /* 4,41:1 → 5,6:1 */
}

/* --- 8. « Ajouter un service » (Planning équipe) ------------------------
   Le bouton était à opacity .15 au repos et ne se révélait qu'au survol de
   la cellule. C'est l'action principale de la grille : invisible au repos,
   hors d'atteinte au tactile, et sans équivalent au clavier.
   Il reste discret, mais devient repérable — et la révélation fonctionne
   désormais aussi au focus clavier. */
.team-add-shift {
  min-width: 26px;      /* 21 px → 26 px : au-dessus du minimum WCAG 2.2 (24 px) */
  min-height: 26px;
  opacity: .5;
}
.team-day-cell:hover .team-add-shift,
.team-day-cell:focus-within .team-add-shift,
.team-add-shift:focus-visible {
  opacity: 1;
}

/* --- 9. Pastilles du calendrier mensuel --------------------------------
   21 px de haut : sous le minimum WCAG 2.2 (24 px). */
.calendar-day .pill,
.day-cell .pill {
  min-height: 24px;
}

/* --- 10. Échelle typographique : cas résiduels ---------------------------
   <small> sans classe hérite du 0,83 em du navigateur, seule taille qui
   échappait encore à l'échelle. */
small {
  font-size: 11px;
}

/* --- 11. Mode nuit -------------------------------------------------------
   Un montage se termine à 2 h et la régie travaille dans le noir : un fond
   clair force la pupille à se recontracter à chaque coup d'œil à l'écran.
   Tout passe par les jetons — aucune règle de composant n'est dupliquée. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:           #0A0E0E;
    --panel:        #151C1B;
    --surface:      #111817;
    --surface-2:    #0D1413;
    --line:         #26332F;
    --line-strong:  #35443F;

    --ink:          #E6EDEA;
    --ink-2:        #C6D4D0;
    --muted:        #94A6A1;

    /* Le teal de marque est trop sombre sur fond noir : on le remonte. */
    --brand:        #4FB3A9;
    --brand-mid:    #6FC7BD;
    --brand-strong: #8FD8CE;
    --brand-pale:   #102825;
    --brand-light:  #17403A;

    /* Les teintes « pale » servent de fonds : en sombre elles s'assombrissent
       au lieu de s'éclaircir, sinon elles trouent la page. */
    --accent-pale:  #2E1A12;
    --yellow-pale:  #2B2411;
    --blue-pale:    #131E2C;
    --violet-pale:  #1E1830;
    --green-pale:   #12241A;
    --danger-pale:  #2C1414;

    /* Les couleurs sémantiques remontent aussi, pour rester lisibles en texte. */
    --accent:       #E0794C;
    --yellow:       #DDA92E;
    --blue:         #6D95DC;
    --violet:       #9F80C8;
    --green:        #5CA477;
    --danger:       #E0666C;

    /* La barre latérale reste plus sombre que le contenu : elle doit continuer
       à se lire comme un cadre, pas comme une zone de travail. */
    --sidebar-bg:     #060A0A;
    --sidebar-accent: #121A19;

    /* Sur fond sombre, une ombre portée salit ; on garde de la profondeur
       par le contraste des surfaces. */
    --shadow-sm:  0 1px 2px rgba(0,0,0,.45);
    --shadow-md:  0 4px 12px rgba(0,0,0,.5);
    --shadow-lg:  0 16px 44px rgba(0,0,0,.55);
    --shadow:     var(--shadow-md);
  }

  /* Le blanc pur reste blanc sur les aplats de couleur, mais une page entière
     de blanc pur éblouit : on retire l'éclat des grandes surfaces claires
     restées littérales. */
  /* Familles de jetons locales. Elles sont déclarées sur #dailyView et
     .festival-budget-summary : il faut les surcharger au même niveau de
     spécificité, une redéfinition sur :root serait ignorée. */
  #dailyView {
    --daily-panel: #151C1B;
    --daily-soft:  #111817;
    --daily-line:  #26332F;
    --daily-head:  #0F2A26;
    --daily-teal:  #3FA79E;
  }

  /* --festival-budget-black est une bande sombre : correcte telle quelle.
     --gray est une surface claire, elle doit s'inverser. */
  .festival-budget-summary {
    --festival-budget-gray: #111817;
  }

  img,
  video {
    opacity: .92;
  }

  /* --brand sert à la fois de fond de bouton et de couleur de texte : les deux
     tirent en sens inverse en mode sombre. On garde le teal remonté (lisible
     en texte) et on inverse l'encre du bouton — motif standard en sombre. */
  .primary-button {
    color: #06211F;
  }

  /* Le « + » du planning ne doit plus reposer sur l'opacité : au repos il est
     désormais coloré, pas effacé. */
  .team-add-shift {
    background: var(--surface-2);
    color: var(--ink-2);
  }
}

/* --- 12. « Ajouter un service » : lisible au repos ----------------------
   L'opacité .5 laissait le bouton à 2,68:1. On le rend discret par la
   couleur, pas par la transparence — il passe ainsi le seuil au repos. */
.team-add-shift {
  opacity: 1;
  background: var(--surface-2);
  color: var(--ink-2);
}
.team-day-cell:hover .team-add-shift,
.team-day-cell:focus-within .team-add-shift,
.team-add-shift:focus-visible {
  background: var(--brand-pale);
  color: var(--brand-strong);
}

/* --- 13. Surfaces restées littérales -------------------------------------
   Trois cas que la tokenisation ne pouvait pas traiter automatiquement :
   une surface translucide, un dégradé, et une couleur d'état saturée. */

/* Carte de récap : la translucidité est conservée, mais elle se compose
   désormais avec le jeton de surface, donc elle suit le mode. */
.home-recap-card,
.home-recap-empty {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}

/* L'en-tête « Journée » : le dégradé violet est le parti pris d'origine ;
   une règle plus tardive le recouvrait d'un aplat clair. */
.daily-header {
  background: linear-gradient(135deg, #3D1D6B, #5B3B8A);
  color: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  /* Aplat de marque : encre sombre, comme le bouton principal. */
  .home-explorer-type.is-active {
    color: #06211F;
  }

  /* Rouge de solde négatif : trop sombre sur un panneau sombre. */
  .budget-total-strip .is-negative strong,
  .event-budget-total-row.is-negative td:last-child,
  .budget-total-balance.is-negative strong {
    color: #F08078;
  }
}

/* --- 14. Pastille de type active (accueil) ------------------------------
   Le compteur en <small> porte sa propre couleur, donc il n'héritait pas de
   celle du bouton. En clair, le teal de marque était trop clair pour du blanc
   à 11 px (3,65:1) ; on descend d'un cran sur --brand-mid. */
.home-explorer-type.is-active {
  background: var(--brand-mid);
}
.home-explorer-type.is-active,
.home-explorer-type.is-active small,
.home-explorer-type.is-active strong {
  color: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  /* En sombre, le teal est remonté : c'est l'encre qui s'inverse. */
  .home-explorer-type.is-active {
    background: var(--brand);
  }
  .home-explorer-type.is-active,
  .home-explorer-type.is-active small,
  .home-explorer-type.is-active strong,
  .primary-button,
  .primary-button small,
  .primary-button strong {
    color: #06211F;
  }
}

/* --- 15. Barre supérieure en largeur intermédiaire -----------------------
   Elle ne se réorganisait qu'à 640 px : entre 640 et 900, la recherche et le
   bouton « Ajouter » débordaient de la page. Elle passe désormais à la ligne. */
@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .topbar-actions {
    flex-wrap: wrap;
    min-width: 0;
  }

  .topbar-actions #searchInput {
    flex: 1 1 180px;
    min-width: 0;
  }
}

/* --- 16. Palette de commandes (Ctrl/Cmd + K) ----------------------------
   Tout passe par les jetons : elle suit le mode nuit sans règle dédiée. */
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 12vh 16px 16px;
}
.command-palette[hidden] {
  display: none;
}
.command-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 11, .55);
}
.command-palette-panel {
  position: relative;
  width: min(560px, 100%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}
.command-palette-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.command-palette-field svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}
.command-palette-field input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}
.command-palette-field input:focus {
  outline: none;
}
.command-palette-field kbd {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
.command-palette-list {
  max-height: 46vh;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}
.command-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}
.command-palette-item svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}
.command-palette-item small {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}
.command-palette-item.is-active {
  background: var(--brand-pale);
  color: var(--brand-strong);
}
.command-palette-item.is-active svg,
.command-palette-item.is-active small {
  color: var(--brand-mid);
}
.command-palette-empty {
  padding: 18px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
body.command-palette-open {
  overflow: hidden;
}

/* --- 17. Total hebdomadaire : seuils de majoration visibles --------------
   Le total et les seuils (35 h / 43 h par défaut) existaient tous les deux,
   mais ne se rencontraient jamais à l'écran. Le dépassement se découvrait à
   la paie. La couleur n'est jamais le seul signal : l'écart est chiffré. */
.team-total-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.15;
}
.team-total-cell strong {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.team-total-cell small {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Au-delà du seuil de majoration 25 % */
.team-total-cell.is-over-base {
  background: var(--yellow-pale);
  box-shadow: inset 0 -2px 0 var(--yellow);
}
.team-total-cell.is-over-base strong,
.team-total-cell.is-over-base small {
  color: #7A5410;
}

/* Au-delà du seuil de majoration 50 % */
.team-total-cell.is-over-half {
  background: var(--danger-pale);
  box-shadow: inset 0 -2px 0 var(--danger);
}
.team-total-cell.is-over-half strong,
.team-total-cell.is-over-half small {
  color: #96262C;
}

@media (prefers-color-scheme: dark) {
  .team-total-cell.is-over-base strong,
  .team-total-cell.is-over-base small {
    color: #E8C46A;
  }
  .team-total-cell.is-over-half strong,
  .team-total-cell.is-over-half small {
    color: #F0918E;
  }
}

/* --- 18. Badge de provenance ------------------------------------------
   Une ligne de budget dérivée n'est pas modifiable sur place. Le badge dit
   maintenant d'où elle vient, et y conduit. */
.budget-linked-badge.is-navigable {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.budget-linked-badge.is-navigable span {
  font-size: 12px;
  line-height: 1;
}
.budget-linked-badge.is-navigable:hover,
.budget-linked-badge.is-navigable:focus-visible {
  border-color: var(--brand);
  background: var(--brand-pale);
  color: var(--brand-strong);
}

/* Cellule « Détail » du budget général : libellé + provenance sur une ligne. */
.budget-detail-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- 19. Catégories envoyées vers Google Agenda -------------------------
   Le volume de chaque catégorie est affiché avant activation : on décide en
   connaissance de cause plutôt que de découvrir un agenda saturé. */
.sync-scopes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.sync-scopes-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sync-scope-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sync-scope-line span {
  flex: 1;
}
.sync-scope-count {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 12px;
}
.sync-scope-count.is-heavy {
  color: var(--yellow);
  font-weight: 600;
}

/* --- 20. Jour du calendrier ouvrable ------------------------------------
   La cellule entière ouvre la Journée. Le numéro du jour est un vrai bouton :
   c'est la cible qu'on vise, et elle devient atteignable au clavier. */
.day-cell.is-openable {
  cursor: pointer;
}
.day-cell-head .day-number {
  padding: 1px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.day-cell.is-openable:hover {
  background: var(--surface);
}
.day-cell-head .day-number:hover,
.day-cell.is-openable:hover .day-number {
  background: var(--brand-pale);
  color: var(--brand-strong);
}

/* --- 21. Accueil : « Aujourd'hui » et « À traiter » ---------------------
   Deux surfaces côte à côte, chacune répondant à une question distincte.
   Elles remplacent le bloc « résumé » qui répétait le jour et la semaine. */
.home-day-recap {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .home-day-recap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.home-surface {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.home-surface-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.home-surface-head span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-surface-head small {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 12px;
}
.home-surface-head small.is-critical {
  font-weight: 600;
  color: var(--danger);
}
.home-surface-head.is-solid {
  border-bottom: 0;
  background: var(--daily-head, #13352F);
}
.home-surface-head.is-solid span,
.home-surface-head.is-solid small {
  color: #FFFFFF;
}
.home-surface-head.is-solid small {
  opacity: .8;
}
.home-surface-empty {
  margin: 0;
  padding: 22px 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* Déroulé du jour */
.home-today-list {
  display: flex;
  flex-direction: column;
}
.home-today-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-soft, var(--line));
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.home-today-row:last-child {
  border-bottom: 0;
}
.home-today-row:hover {
  background: var(--surface);
}
.home-today-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--muted);
}
.home-today-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-today-kind {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.home-surface-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
}
.home-surface-link {
  border: 0;
  background: transparent;
  color: var(--brand-mid);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.home-surface-link:hover {
  color: var(--brand-strong);
}

/* À traiter */
.home-attention-list {
  display: flex;
  flex-direction: column;
}
.home-attention-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-soft, var(--line));
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.home-attention-row:last-child {
  border-bottom: 0;
}
.home-attention-row:hover {
  background: var(--surface);
}
.home-attention-dot {
  margin-top: 6px;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
}
.home-attention-row.is-critical .home-attention-dot {
  background: var(--danger);
}
.home-attention-row.is-warning .home-attention-dot {
  background: var(--yellow);
}
.home-attention-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-attention-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.home-attention-text small {
  font-size: 12px;
  color: var(--muted);
}

/* --- 22. Tableau équipes : tâches bloquantes et pauses ------------------
   Une tâche bloquante conditionne le travail d'un autre service : bord rouge
   sur les quatre côtés, comme dans le modèle de référence. La pause est
   neutre — elle occupe du temps sans appartenir à un service. */
.festival-team-schedule-task.is-blocking {
  border: 1px solid #C00000;
  font-weight: 700;
}
.festival-team-schedule-task.is-pause {
  border-style: dashed;
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .06em;
}
@media (prefers-color-scheme: dark) {
  .festival-team-schedule-task.is-blocking {
    border-color: #E0794C;
  }
}

/* ============================================================
   23. Tableau équipes : densité de tableau
   Le tableau se lit désormais par service, une ligne par équipe.
   À cette densité, la tuile-carte devient une cellule de tableau :
   trait d'heure marqué, hauteur de ligne courte, titre prioritaire.
   Section entièrement retirable.
   ============================================================ */

.festival-team-schedule-row {
  min-height: var(--team-row-height, 34px);
}

.festival-team-schedule-label {
  align-content: center;
  gap: 0;
  min-height: var(--team-row-height, 34px);
  padding: 4px 10px;
}

.festival-team-schedule-label strong {
  font-size: 12.5px;
  line-height: 1.25;
}

.festival-team-schedule-label small {
  font-size: 10.5px;
  line-height: 1.2;
}

/* Le « + » ne dispute plus la place au nom du service : il reste discret
   jusqu'à ce que la ligne soit survolée ou qu'il prenne le focus. */
.festival-team-schedule-label .festival-structure-column-add {
  grid-row: 1 / -1;
  opacity: 0;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.9);
  transition: opacity var(--transition, 120ms ease);
}

.festival-team-schedule-row:hover .festival-structure-column-add,
.festival-team-schedule-label .festival-structure-column-add:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .festival-team-schedule-label .festival-structure-column-add {
    opacity: 1;
  }
}

.festival-team-schedule-track {
  min-height: var(--team-row-height, 34px);
  /* Trois traits : la demi-heure, l'heure pleine, la séparation de couloir. */
  background-image:
    linear-gradient(90deg, rgba(32, 56, 91, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 56, 91, 0.14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(32, 56, 91, 0.08) 1px, transparent 1px);
  background-size:
    calc(100% / var(--team-slots) * var(--team-hour-slots, 2)) 100%,
    calc(100% / var(--team-slots)) 100%,
    100% var(--team-row-height, 34px);
}

.festival-team-schedule-task {
  height: 32px;
  gap: 4px;
  padding: 2px 5px;
}

/* Le titre prend la place restante ; l'horaire, quand il tient, cède
   d'abord. Sans cela un créneau court affichait ses heures et rien d'autre. */
.festival-team-schedule-task strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  line-height: 1.15;
}

.festival-team-schedule-task small {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.82;
}

.festival-team-schedule-task.is-blocking {
  border-color: #C00000;
}

.festival-team-schedule-task.is-blocking strong {
  font-weight: 800;
}

@media (prefers-color-scheme: dark) {
  .festival-team-schedule-track {
    background-image:
      linear-gradient(90deg, rgba(198, 214, 236, 0.32) 1px, transparent 1px),
      linear-gradient(90deg, rgba(198, 214, 236, 0.12) 1px, transparent 1px),
      linear-gradient(180deg, rgba(198, 214, 236, 0.08) 1px, transparent 1px);
  }
  .festival-team-schedule-task.is-blocking {
    border-color: #E0794C;
  }
}

/* ============================================================
   24. Tableau équipes : correctifs visuels
   Constatés à l'écran, pas déduits.
   ============================================================ */

/* Le « + » héritait d'un gabarit de 36 px prévu pour un en-tête de colonne :
   dans une ligne de 34 px il débordait sur la ligne suivante. */
.festival-team-schedule-label .festival-structure-column-add {
  position: static;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 3px;
}

.festival-team-schedule-label .festival-structure-column-add svg {
  width: 11px;
  height: 11px;
}

/* Une tâche bloquante se signale par un filet rouge fin et un texte gras,
   comme dans le modèle de référence. Un encadrement épais transformait la
   moitié d'un planning de montage en écran d'alerte. */
.festival-team-schedule-task.is-blocking {
  border: 1px solid #C00000;
}

/* L'horaire cède la place au titre dès que la tuile est étroite : on lisait
   « Montage VP1 structure pri… 10:00–12:0 », un titre coupé ET une heure
   tronquée. */
.festival-team-schedule-task {
  container-type: inline-size;
}

@container (max-width: 168px) {
  .festival-team-schedule-task small {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  .festival-team-schedule-task.is-blocking {
    border-color: #E0794C;
  }
}

/* ============================================================
   25. Suggestions de pages sous le champ de recherche
   Taper « equipe » doit proposer Planning équipe, pas seulement
   filtrer les fiches de la page courante.
   ============================================================ */

.search-destinations {
  position: fixed;
  z-index: 200;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(16, 34, 46, 0.18);
}

.search-destination {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}

.search-destination.is-active {
  background: var(--surface-2);
}

.search-destination svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.search-destination.is-active svg {
  color: var(--brand-strong);
}

.search-destination span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.search-destination small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   26. Un seul contrat pour toutes les fenêtres flottantes
   Elles étaient huit à se ressembler sans jamais coïncider :
   deux rayons (6 px et 10 px), quatre recettes d'ombre, quatre
   valeurs de padding, et deux règles qui se contredisaient à
   l'intérieur d'elles-mêmes. D'où l'impression de « petits bugs
   visuels » partout : ce n'étaient pas des bugs, c'était huit
   chartes concurrentes.

   Les largeurs restent propres à chaque fenêtre — un choix de
   contenu. Le reste est commun.
   ============================================================ */

:root {
  --popover-radius: 10px;
  --popover-pad: 16px;
  --popover-shadow: 0 16px 44px rgba(18, 40, 38, 0.16), 0 2px 8px rgba(18, 40, 38, 0.08);
  --popover-border: 1px solid var(--line-strong);
}

@media (prefers-color-scheme: dark) {
  :root {
    --popover-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

.festival-action-popover,
.event-team-add-popover,
.opera-note-popover,
.calendar-note-popover,
.change-contact-popover,
.phase-calendar-popover,
.festival-team-row-add-popover,
.ftw-slot-popover,
.popover--gantt-task {
  padding: var(--popover-pad);
  border: var(--popover-border);
  border-radius: var(--popover-radius);
  background: var(--panel);
  box-shadow: var(--popover-shadow);
}

/* Ce que dit un créneau quand on le touche : l'heure, la personne, et les
   tâches posées dessus. Avant, il fallait aller les lire dans la fiche RH
   tech, et revenir. */
.ftw-slot-popover {
  position: fixed;
  z-index: 9999;
  display: grid;
  gap: 8px;
  max-height: min(70vh, 460px);
  overflow: auto;
}
.ftw-slot-popover-head strong { display: block; font-size: 14px; font-weight: 700; }
.ftw-slot-popover-head small { display: block; font-size: 11.5px; color: var(--muted); }
.ftw-slot-popover-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ftw-slot-popover-list li {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
}
.ftw-slot-popover-list li.is-current {
  border-left-color: var(--brand);
  background: var(--brand-pale);
}
.ftw-slot-popover-list strong { display: block; font-size: 13px; font-weight: 600; }
.ftw-slot-popover-list small { display: block; font-size: 11.5px; color: var(--muted); }
.ftw-slot-popover button { justify-self: end; }

/* Les en-têtes et pieds de fenêtre retrouvent le même rythme : le titre
   collé au bord, les actions détachées par un filet. */
.festival-program-tile-popover-head {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.festival-program-tile-popover-actions,
.popover-actions {
  padding-top: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   27. Vue d'ensemble : le résumé « où en est-on »
   Il remplace le plan de charge complet (874 px, 43 boutons)
   qui vivait dans la page de lecture alors que l'onglet Plan
   fait déjà ce travail. Une ligne par service, ses créneaux
   posés sur l'amplitude de la période : les trous se voient.
   ============================================================ */

.festival-pilot-workload > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pilot-workload-ruler,
.pilot-workload-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
}

.pilot-workload-ruler {
  grid-template-columns: 132px minmax(0, 1fr);
  margin-top: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.pilot-workload-ruler .pilot-workload-name {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pilot-workload-track {
  position: relative;
  display: block;
  height: 16px;
}

.pilot-workload-track.is-ruler {
  height: 14px;
}

.pilot-workload-track.is-ruler span {
  position: absolute;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pilot-workload-track.is-ruler span:first-child {
  transform: none;
}

/* Le dernier repère est posé à 100 % : centré, il dépasserait de sa moitié
   et ferait déborder la carte de 9 px. */
.pilot-workload-track.is-ruler span:last-child {
  transform: translateX(-100%);
}

.pilot-workload-list {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.pilot-workload-row {
  width: 100%;
  padding: 4px 2px;
  border: 0;
  border-radius: 5px;
  background: none;
  text-align: left;
  cursor: pointer;
}

.pilot-workload-row:hover,
.pilot-workload-row:focus-visible {
  background: var(--surface-2);
}

/* Le filet de couleur rattache la ligne à son service, sans le pavé
   saturé du tableau équipes : ici on lit, on ne pointe pas. */
.pilot-workload-name {
  overflow: hidden;
  padding-left: 9px;
  border-left: 3px solid var(--pilot-accent, var(--line-strong));
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilot-workload-count {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pilot-workload-slot {
  position: absolute;
  top: 2px;
  bottom: 2px;
  min-width: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

.pilot-workload-slot.is-blocking {
  border-width: 1px;
}

.pilot-workload-slot.is-pause {
  border-style: dashed;
  opacity: 0.75;
}

/* ============================================================
   28. Sections repliables
   Le calendrier, les coordonnées et les blocs de saisie restent
   là, repliés : un clic les ouvre, et la fiche se souvient de
   ce qu'on laisse ouvert. Le repli tient à une classe sur la
   section — le contenu n'a pas eu à être enveloppé.
   ============================================================ */

.detail-section > h2 {
  margin: 0;
}

.detail-section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.detail-section-toggle svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: transform var(--transition);
}

.detail-section.is-collapsed .detail-section-toggle svg {
  transform: rotate(-90deg);
}

.detail-section-toggle:hover svg,
.detail-section-toggle:focus-visible svg {
  color: var(--brand-strong);
}

/* Tout ce qui suit le titre disparaît, sans que les 70 sections aient eu
   besoin d'un conteneur de contenu. */
.detail-section.is-collapsed > *:not(h2) {
  display: none;
}

.detail-section.is-collapsed {
  padding-bottom: 14px;
}

/* À l'impression, une section repliée reste lisible : le papier n'a pas de
   chevron sur lequel cliquer. */
@media print {
  .detail-section.is-collapsed > *:not(h2) {
    display: revert;
  }
  .detail-section-toggle svg {
    display: none;
  }
}

/* ============================================================
   29. La phase en cours dans le bandeau
   « Sélectionnée » et « en cours » sont deux choses distinctes :
   on consulte le montage depuis le dernier jour d'exploitation.
   ============================================================ */

.festival-plan-moment-tabs button {
  position: relative;
}

.festival-plan-moment-tabs button.is-today {
  box-shadow: inset 0 3px 0 var(--brand-strong);
}

.festival-plan-moment-today {
  display: block;
  margin-top: 2px;
  color: var(--brand-strong);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.festival-plan-moment-tabs button.is-active .festival-plan-moment-today {
  color: inherit;
  opacity: 0.85;
}

/* La fenêtre de tâche Gantt n'avait aucune règle de position : les
   coordonnées calculées par placePopover n'avaient aucun effet et elle
   atterrissait en fin de document, hors de l'écran. */
.popover--gantt-task {
  position: fixed;
  z-index: 10000;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

/* ============================================================
   30. Tenir sur un 13 pouces
   Sous 1180 px, le planning équipe ne pouvait pas rétrécir : sa
   bande d'alertes imposait trois colonnes de 175 px, soit un
   plancher de 541 px, et la carte débordait de la fenêtre.
   ============================================================ */

/* Sans min-width:0, une grille imbriquée se dimensionne sur son contenu
   minimum et refuse de rétrécir, quelle que soit la place disponible. */
.team-board-wrap,
.team-board-area,
.team-board-scroll {
  min-width: 0;
}

@media (max-width: 1180px) {
  /* Les alertes passent de trois colonnes fixes à autant que la largeur
     en accepte — trois sur un grand écran, une sur un portable. */
  .team-alerts {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  /* La colonne des noms se resserre : c'est de la place rendue au planning. */
  .team-board-area {
    grid-template-columns: 72px minmax(0, 1fr);
  }
}

/* La barre latérale reprend 40 px sur un petit écran, sans se replier. */
@media (max-width: 1180px) {
  .sidebar {
    padding: 18px 12px;
  }
  .nav-item {
    min-height: 36px;
    padding: 0 9px;
  }
}

/* La cellule de date manquait de 4 px sous 1180 : on resserre son
   interlettrage plutôt que d'élargir la colonne. */
@media (max-width: 1180px) {
  .team-date-cell {
    padding-left: 4px;
    padding-right: 4px;
    letter-spacing: -0.01em;
  }
}

/* ============================================================
   31. Le menu tient sur un écran de portable
   Sur 1280 × 800, la barre latérale mesurait 1 353 px de haut :
   Options, Archives et VGP passaient sous la ligne de flottaison.
   Le problème est vertical, la règle l'est aussi.
   ============================================================ */

@media (max-height: 900px) {
  .nav-item {
    min-height: 32px;
    padding: 0 10px;
  }

  .nav-section-label {
    padding: 10px 16px 4px;
  }

  .sidebar {
    gap: 10px;
    padding-top: 14px;
  }

  .sidebar .nav {
    gap: 2px;
  }
}

/* Si malgré tout ça ne rentre pas — quinze entrées sur un écran très bas —
   c'est la liste qui défile, jamais la barre entière : la marque et le
   bouton de repli restent en place. */
.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
}

/* L'espacement s'appliquait entre les quinze enfants de la barre, y compris
   les séparateurs de hauteur nulle : 140 px d'air pur. Ce sont les
   intitulés de groupe qui portent déjà la respiration. */
@media (max-height: 900px) {
  .sidebar {
    gap: 0;
  }

  /* La ligne de version reste utile ; le sous-titre, moins. */
  .brand small:last-child {
    display: none;
  }
}

/* ============================================================
   32. Chaîne tâche → besoin → heures → contacts
   Le besoin se saisit sur la tâche, et son avancement se lit
   au même endroit : plus besoin de ressaisir date, horaires et
   service dans un autre écran.
   ============================================================ */

.workload-staff-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workload-staff-input input {
  width: 88px;
}

.workload-staff-input small {
  color: var(--muted);
  font-size: 12px;
}

.workload-staff-status {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 13px;
}

.workload-staff-status.is-incomplete {
  border-left-color: var(--yellow);
  background: var(--yellow-pale);
}

.workload-staff-status.is-complete {
  border-left-color: var(--brand);
  background: var(--brand-pale);
}

/* Les noms se posent sous le compteur, une place par personne demandée :
   la tâche garde son équipe sous les yeux. */
.workload-staff-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workload-staff-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.workload-staff-link:hover {
  color: var(--text);
}

.workload-staff-assign {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workload-staff-place {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(120px, 1.6fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.workload-staff-place.is-filled {
  border-color: var(--brand);
}

.workload-staff-place > small {
  color: var(--muted);
  font-size: 12px;
}

.workload-staff-place .festival-team-contact-select {
  width: 100%;
}

/* Le compteur d'effectif sur la tuile : discret quand l'équipe est
   complète, marqué quand il manque du monde. */
.team-slot-staff {
  flex: 0 0 auto;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.festival-team-schedule-task.is-understaffed .team-slot-staff {
  background: #C9991A;
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .team-slot-staff {
    background: rgba(0, 0, 0, 0.28);
  }
}

/* ============================================================
   34. Gantt : bandeau de journée
   Une journée n'est pas une ligne parmi d'autres : c'est le
   titre sous lequel se rangent les spectacles et les étapes.
   ============================================================ */

.gantt-day-band {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 2px;
  padding: 7px 12px;
  border-left: 4px solid var(--brand-strong);
  border-radius: 4px;
  background: var(--brand-pale);
}

.gantt-day-band strong {
  color: var(--brand-strong);
  font-size: 13.5px;
  letter-spacing: -0.005em;
}

.gantt-day-band small {
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   35. Plan de charge d'une structure : ses propres moments
   Une scene qui joue un soir n'a pas a porter le montage, les
   trois journees et le demontage de tout le festival. La
   bascule reste a portee de clic pour le cas contraire.
   ============================================================ */

.festival-structure-moment-toggle {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 6px;
}

.festival-structure-moment-toggle button {
  font-size: 12px;
  padding: 5px 11px;
  color: var(--muted);
}

.festival-structure-moment-toggle button:hover {
  color: var(--brand-strong);
}

/* ============================================================
   36. Planning equipe : la palette fixe et la retouche
   Poser une journee type par une bulle qui s'ouvre sous la
   case obligeait la souris a un aller-retour par case. La
   palette ne bouge plus : on vise une fois, on clique sept
   fois, et le curseur avance tout seul.
   ============================================================ */

.team-palette-bar {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--panel);
  border: .8px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 6;
}

.team-palette-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.team-palette-intro {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.team-palette-intro strong { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.team-palette-intro small { font-size: 11px; color: var(--muted); }

.team-palette-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Les types occupent la rangee entiere et passent a la ligne : une liste qui
   defile sans le dire coupe le dernier raccourci en deux. */
.team-palette-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-palette-type {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 146px;
  max-width: 230px;
  height: 34px;
  padding: 0 10px;
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  border: .8px solid var(--line);
  border-left: 3px solid var(--type-color, var(--brand));
  border-radius: 7px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.team-palette-type:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.team-palette-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 21px;
  height: 21px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--type-color, var(--brand-strong));
  background: var(--surface);
  border: .8px solid var(--type-color, var(--line));
}

/* Nom et duree sur une seule ligne : empiles, sept types mangeaient trois
   rangees avant qu'on voie le planning. */
.team-palette-body {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.team-palette-body strong {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-palette-body small {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  white-space: nowrap;
}

.team-palette-erase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: var(--panel);
  border: .8px dashed var(--line-strong);
  border-radius: 7px;
  cursor: pointer;
}

.team-palette-erase:hover { color: var(--ink); border-color: var(--ink-2); }

.team-palette-erase span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--surface);
  border: .8px solid var(--line);
  border-radius: 4px;
}

.team-palette-target {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  min-width: 0;
}

.team-palette-target small {
  font-family: var(--font-cond);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.team-palette-target strong {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Le curseur : la case que vise la palette. */
.team-day-cell.is-cursor {
  outline: 2.4px solid var(--brand);
  outline-offset: -2px;
  background: var(--brand-pale);
}

/* Une journee retouchee ne suit plus sa journee type : le pointille et le
   crayon le disent, sinon on croit lire la norme. */
.team-shift-card.is-customised {
  /* La carte n a pas de bordure (box-shadow inset), on ajoute un liset. */
  outline: 1px dashed var(--yellow);
  outline-offset: -1px;
  padding-right: 14px;
}

.team-shift-card.is-customised::after {
  content: "\270E";
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 10px;
  line-height: 1;
  color: var(--yellow);
  pointer-events: none;
}

/* Reglages des journees types : la lettre, le total, le doublon. */
.team-template-key-input {
  width: 42px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.team-template-key-input.has-clash {
  border-color: var(--danger);
  background: var(--danger-pale);
}

.team-template-total {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--surface);
  border: .8px solid var(--line);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.team-template-option-row.has-key-clash {
  border-color: var(--danger);
  flex-wrap: wrap;
}

.team-template-key-clash {
  flex: 1 0 100%;
  margin: 6px 0 0;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-pale);
  border: .8px solid var(--danger);
  border-radius: var(--radius-sm);
}


/* ============================================================
   37. Planning equipe : le plateau transpose
   Une ligne par personne, une colonne par jour, le total de la
   semaine a droite avec ses deux seuils. C est la lecture de
   son propre calendrier hebdomadaire, celle qu il a validee.
   ============================================================ */

.team-board.team-board-grid {
  display: grid;
  grid-template-columns: 200px repeat(7, minmax(0, 1fr)) 118px;
  width: 100%;
  min-width: 0;
  gap: 0;
  background: var(--panel);
  border: .8px solid var(--line);
  border-left: .8px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.team-board-grid .team-grid-corner,
.team-board-grid .team-grid-total-head {
  display: flex;
  align-items: flex-end;
  padding: 9px 12px;
  font-family: var(--font-cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1.2px solid var(--line-strong);
}

.team-board-grid .team-grid-total-head {
  justify-content: flex-end;
  border-left: .8px solid var(--line);
}

.team-board-grid .team-grid-day-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px 7px;
  background: var(--surface);
  border-bottom: 1.2px solid var(--line-strong);
  border-left: .8px solid var(--line);
  min-width: 0;
}

.team-board-grid .team-grid-day-head.is-weekend { background: var(--bg); }

.team-board-grid .team-grid-day-head.is-today {
  box-shadow: inset 0 -2px 0 var(--brand);
}

.team-grid-day-title {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.team-grid-day-title strong {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: capitalize;
}

.team-grid-day-title span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}

.team-grid-day-activity {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.25;
  min-height: 26px;
  font-weight: 500;
  color: var(--brand-strong);
}

.team-grid-day-activity.is-empty { color: var(--line-strong); font-weight: 400; }

.team-board-grid .team-grid-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  background: var(--panel);
  border-bottom: .8px solid var(--surface-2);
  border-right: 1.2px solid var(--line);
  min-width: 0;
}

.team-board-grid .team-grid-person.is-active { background: var(--surface); }

.team-grid-person-identity {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.team-grid-person-identity strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-grid-person-identity small {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-grid-fill-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: .8px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.team-grid-person.is-active .team-grid-fill-row,
.team-grid-fill-row:hover {
  color: var(--brand);
  background: var(--panel);
  border-color: var(--brand);
}

.team-board-grid .team-grid-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 62px;
  padding: 6px 4px;
  background: var(--panel);
  border-bottom: .8px solid var(--surface-2);
  border-left: .8px solid var(--surface-2);
  cursor: pointer;
  min-width: 0;
  /* Sans cela le nom d une journee type deborde sur la colonne suivante. */
  overflow: hidden;
  transition: background var(--transition);
}

.team-board-grid .team-grid-cell.is-weekend { background: color-mix(in srgb, var(--bg) 45%, var(--panel)); }
.team-board-grid .team-grid-cell:hover { background: var(--surface); }

.team-board-grid .team-grid-cell.is-cursor {
  outline: 2.4px solid var(--brand);
  outline-offset: -2px;
  background: var(--panel);
}

.team-board-grid .team-grid-cell.is-drop-target {
  outline: 2px dashed var(--brand);
  outline-offset: -2px;
  background: var(--brand-pale);
}

.team-grid-badge {
  display: inline-flex;
  box-sizing: border-box;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--type-color, var(--brand-strong));
  background: color-mix(in srgb, var(--type-color, var(--brand)) 12%, var(--panel));
  border: .8px solid color-mix(in srgb, var(--type-color, var(--brand)) 55%, var(--panel));
}

.team-grid-cell.is-customised .team-grid-badge { border-style: dashed; }

.team-grid-badge i {
  font-style: normal;
  font-size: 10px;
  opacity: .8;
}

.team-grid-hours {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

.team-grid-cell.is-customised .team-grid-hours { color: var(--yellow); }

.team-grid-cell.has-warning { box-shadow: inset 0 0 0 1px var(--danger); }

.team-grid-dot {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--line-strong);
}

.team-grid-ghost {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--yellow);
  background: var(--yellow-pale);
  border: .8px dashed var(--yellow);
}

.team-board-grid .team-grid-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: .8px solid var(--surface-2);
  border-left: 1.2px solid var(--line);
}

.team-board-grid .team-grid-total.is-over-base { background: var(--yellow-pale); }
.team-board-grid .team-grid-total.is-over-half { background: var(--danger-pale); }

.team-grid-total strong {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
}

.team-grid-total.is-over-base strong { color: var(--yellow); }
.team-grid-total.is-over-half strong { color: var(--danger); }

.team-grid-total small {
  font-size: 10px;
  color: var(--muted);
}

.team-grid-total.is-over-base small { color: var(--yellow); }
.team-grid-total.is-over-half small { color: var(--danger); }

/* La jauge porte ses deux seuils : le depassement se voit en le creant. */
.team-grid-gauge {
  position: relative;
  display: block;
  width: 84px;
  height: 5px;
  margin: 2px 0 1px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}

.team-grid-gauge i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--brand);
  transition: width var(--transition);
}

.team-grid-total.is-over-base .team-grid-gauge i { background: var(--yellow); }
.team-grid-total.is-over-half .team-grid-gauge i { background: var(--danger); }

.team-grid-gauge b,
.team-grid-gauge u {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1.2px;
}

.team-grid-gauge b { background: rgba(26, 29, 30, .4); }
.team-grid-gauge u { background: rgba(192, 51, 58, .55); }

.team-grid-empty { grid-column: 1 / -1; padding: 18px; }

.team-planning-fullscreen .team-board.team-board-grid {
  grid-template-columns: 230px repeat(7, minmax(0, 1fr)) 130px;
}

.team-planning-fullscreen .team-board-grid .team-grid-cell { min-height: 64px; }

@media (max-width: 1120px) {
  .team-board.team-board-grid {
    grid-template-columns: 150px repeat(7, minmax(0, 1fr)) 92px;
  }
  .team-board-grid .team-grid-cell { min-height: 50px; }
  .team-grid-gauge { width: 62px; }
  .team-grid-badge { padding: 2px 6px; font-size: 10.5px; }
}

/* Le rail vertical des dates n a plus d objet : sa colonne se referme. */
.team-board-area.is-transposed {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}


/* Les creneaux de la journee, ecrits dans la case. C'est ce qu'on vient y
   lire : une infobulle ne remplace pas un horaire affiche. */
.team-grid-slots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 100%;
}

.team-grid-slot {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.team-grid-slot.is-customised {
  color: var(--yellow);
  font-weight: 500;
}

.team-grid-slot.is-customised::after {
  content: " \270E";
  font-size: 9px;
}

.team-grid-slot.has-warning {
  color: var(--danger);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 2px;
}

/* Le total passe au second plan : il resume des horaires deja lisibles. */
.team-board-grid .team-grid-hours {
  margin-top: 1px;
  font-size: 9.5px;
  opacity: .8;
}

@media (max-width: 1320px) {
  .team-grid-slot { font-size: 10px; letter-spacing: -.05em; }
  .team-grid-badge { font-size: 9.5px; padding: 1px 5px; }
}

/* ============================================================
   38. Planning equipe : le panneau descend sous le plateau
   Il tenait une colonne de 340 px a droite. Les sept jours se
   partageaient ce qui restait : 72 px par case, quand « 09:00
   - 12:00 » en demande 82. L'horaire etait rogne des deux
   cotes. Le panneau reprend la place que le canevas valide lui
   donnait — une bande sous le plateau, sur toute la largeur.
   ============================================================ */

.team-planning-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body.team-planning-fullscreen .team-planning-layout {
  grid-template-columns: minmax(0, 1fr);
}

/* La bande ne porte plus de cadre : ce sont ses cartes qui en ont un. */
.team-smart-panel {
  position: static;
  display: grid;
  gap: 7px;
  max-height: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.staff-pool.team-smart-panel h2 {
  font-family: var(--font-cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Le detail de la case a gauche, ses totaux a droite : la lecture du
   canevas, ou l'edition est une bande et non une colonne. */
.team-smart-panel #teamSmartPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 10px;
  align-items: start;
}

.team-smart-panel .team-editor-card,
.team-smart-panel .smart-empty-card,
.team-smart-panel .team-smart-summary {
  gap: 10px;
  padding: 13px 15px;
  border-width: .8px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.team-smart-panel .smart-empty-card,
.team-smart-panel .team-smart-summary {
  align-content: start;
}

/* Matin, apres-midi et soir cote a cote. Les trois rangees empilees
   etaient la consequence de la colonne etroite, pas un choix. */
.team-smart-panel .team-service-editor {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-smart-panel .team-service-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 8px;
  padding: 9px 10px;
}

.team-smart-panel .team-service-row strong {
  grid-column: 1 / -1;
  font-family: var(--font-cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.team-smart-panel .team-service-row input {
  min-width: 0;
}

.team-smart-panel .team-editor-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.team-smart-panel .team-editor-grid textarea {
  min-height: 40px;
}

/* Les deux boutons ne s'etirent plus sur toute la bande. */
.team-smart-panel .team-editor-actions {
  grid-template-columns: repeat(2, minmax(0, 168px));
  justify-content: end;
}

@media (max-width: 1180px) {
  .team-smart-panel #teamSmartPanel { grid-template-columns: minmax(0, 1fr); }
  .team-smart-panel .team-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .team-smart-panel .team-service-editor { grid-template-columns: minmax(0, 1fr); }
  .team-smart-panel .team-editor-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La rangee des jours se cale sous la palette. Elle passait dessous des
   qu'on descendait dans la liste : on lisait des cases sans savoir de
   quel jour elles etaient. */
.team-board-area.is-transposed .team-board-scroll {
  overflow: visible;
}

.team-board.team-board-grid {
  /* clip-path et non overflow : overflow ferait du plateau un conteneur de
     defilement, et une entete collante n'y collerait plus a rien. */
  overflow: visible;
  clip-path: inset(0 round var(--radius));
}

.team-board-grid .team-grid-corner,
.team-board-grid .team-grid-day-head,
.team-board-grid .team-grid-total-head {
  position: sticky;
  top: var(--team-palette-h, 104px);
  z-index: 4;
}

/* Le résultat d'une restauration par l'adresse. Il s'affiche dans la page :
   un navigateur peut refuser les boîtes de dialogue, jamais un bandeau. */
.bandeau-restauration {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(760px, calc(100vw - 40px));
  padding: 13px 15px 13px 18px;
  transform: translateX(-50%);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--line-strong);
  border-left: 5px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(26, 29, 30, .18);
}

.bandeau-restauration.is-ok { border-color: var(--brand); border-left-color: var(--brand); background: var(--green-pale, #E8F5F4); }
.bandeau-restauration.is-ko { border-color: var(--danger); border-left-color: var(--danger); background: var(--danger-pale); }

.bandeau-restauration button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--muted);
  background: var(--panel);
  border: .8px solid var(--line-strong);
  border-radius: 6px;
}

.bandeau-restauration button:hover { color: var(--brand-strong); border-color: var(--brand); }

.bandeau-restauration.is-ask { border-color: var(--brand); border-left-color: var(--brand); }

.bandeau-restauration .bandeau-action {
  height: 34px;
  padding: 0 15px;
  font-weight: 600;
  color: #FFF;
  background: var(--brand);
  border-color: var(--brand);
}

.bandeau-restauration .bandeau-action:hover { color: #FFF; background: var(--brand-strong); border-color: var(--brand-strong); }

/* ============================================================
   39. Les cases a cocher reprennent leur taille
   Une regle globale « input, select, textarea { min-height:
   40px } » ecrasait leur hauteur : min-height l'emporte sur
   height. Les cases s'etiraient en grands rectangles vides,
   et « 100% » de largeur les faisait fondre a 23 px.
   ============================================================ */

.planning-line-toggle input[type="checkbox"],
.festival-program-tile-popover-form .festival-program-tile-line input[type="checkbox"],
.inline-checkbox input[type="checkbox"],
.detail-checkbox input[type="checkbox"] {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  /* Le remplissage global des champs vaut 0 10px. En border-box, une case de
     20 px ne peut pas etre plus etroite que ses marges internes : elle
     s'elargissait a 23,2 px. */
  padding: 0;
}

/* ============================================================
   40. Le panneau intelligent prend la tete du plateau
   Il occupait la place de la palette « Journee type », qui
   disparait. Il reste sous les yeux quand on descend dans la
   liste : c'est lui qui porte l'edition de la case choisie.
   ============================================================ */

.team-board-wrap > .team-smart-panel {
  position: sticky;
  top: 0;
  z-index: 6;
  gap: 8px;
  margin: 0 0 4px;
  padding: 10px 14px;
  background: var(--panel);
  border: .8px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Les cartes sont deja dans un cadre : un second liseret les redoublerait. */
.team-board-wrap > .team-smart-panel .team-editor-card,
.team-board-wrap > .team-smart-panel .smart-empty-card,
.team-board-wrap > .team-smart-panel .team-smart-summary {
  padding: 10px 12px;
  box-shadow: none;
}

/* ============================================================
   41. Popover creneau : le besoin humain a son onglet
   Un creneau peut demander plusieurs metiers a la fois. Les
   empiler sous le formulaire les enterrait sous la ligne de
   flottaison ; ils ont desormais leur propre volet.
   ============================================================ */

.festival-program-tile-popover-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.festival-program-tile-popover-tabs button {
  flex: 1 1 0;
  padding: 7px 10px;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) - 3px);
  cursor: pointer;
}

.festival-program-tile-popover-tabs button.is-active {
  color: var(--brand-strong);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.workload-needs-pane {
  display: grid;
  gap: 10px;
}

.workload-needs-intro {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}

.workload-needs-list {
  display: grid;
  gap: 8px;
}

/* Le metier prend la largeur, l'effectif tient en deux chiffres, la croix
   en un caractere : trois colonnes, pas trois rangees. */
.workload-need-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 32px;
  gap: 8px;
  align-items: end;
}

.workload-need-row .detail-control,
.workload-need-row input {
  min-width: 0;
  width: 100%;
}

.workload-need-remove {
  height: 40px;
  font-size: 17px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: .8px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.workload-need-remove:hover {
  color: var(--danger, #b3261e);
  border-color: currentColor;
}

.workload-needs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workload-needs-foot small {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   42. Tableau equipes : la tuile se deplace a la souris
   Meme geste que dans le plan de charge, mais l'axe du temps
   est horizontal ici : le badge d'horaire sort au-dessus de la
   tuile, qui ne fait que la hauteur d'une ligne.
   ============================================================ */

.festival-team-schedule-task.is-draggable {
  cursor: grab;
  touch-action: none;
}

.festival-team-schedule-task.is-dragging {
  z-index: 90;
  cursor: grabbing;
  opacity: .92;
  outline: 3px solid rgba(23, 107, 105, .35);
  box-shadow: 0 10px 22px rgba(12, 42, 38, .25);
  transition: none;
}

.festival-team-schedule-task .festival-program-drag-time {
  top: -20px;
  bottom: auto;
  max-width: none;
  transform: translateX(-50%);
}

/* ============================================================
   43. Reprises apres essai
   La palette « Journee type » revient, mais en pied de page :
   le haut appartient au panneau intelligent. Les deux volets de
   la popover se montraient ensemble parce qu'un display de
   grille l'emporte sur l'attribut hidden. Et les quatre cases
   du bas debordaient de la popover.
   ============================================================ */

/* Une grille declaree l'emporte sur le display:none du navigateur : sans
   ceci, l'onglet cache restait a l'ecran sous l'onglet visible. */
.festival-program-tile-popover-form[hidden],
.workload-needs-pane[hidden] {
  display: none;
}

/* Deux par deux : « Afficher comme une ligne » ne tient pas dans un quart
   de popover, et cinq elements dans trois colonnes debordaient. */
.festival-program-tile-style-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.festival-program-tile-style-row .detail-control {
  grid-column: 1 / -1;
}

.festival-program-tile-style-row .festival-program-tile-line {
  grid-column: auto;
  align-self: stretch;
  width: auto;
  min-height: 40px;
  padding: 8px 11px;
  line-height: 1.25;
}

@media (max-width: 640px) {
  .festival-program-tile-style-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La palette ferme la page : elle ne colle plus en haut, c'est le panneau
   intelligent qui y est. */
.team-board-wrap > .team-palette-bar {
  position: static;
  margin: 6px 0 0;
}

/* ===========================================================================
   Équipes · la pile à pourvoir
   Ce qui est réglé sort de l'écran : c'est ce qui empêche la page de grossir
   avec le festival. Les lignes repliées gardent la trace de ce qui existe
   derrière, et chaque poste vide propose déjà qui appeler.
   =========================================================================== */

.festival-team-gap {
  --gap-svc: var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.festival-team-gap-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 2px 0 10px;
}
.festival-team-gap-spacer { flex: 1 1 auto; }

.festival-team-gap-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.festival-team-gap-meter {
  position: relative;
  display: block;
  width: 190px;
  max-width: 34vw;
  height: 7px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.festival-team-gap-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--brand);
}
.festival-team-gap-progress b {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.festival-team-gap-progress b em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}

.festival-team-gap-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--danger-pale);
  color: var(--danger);
}
.festival-team-gap-pill.is-ok {
  background: var(--green-pale);
  color: var(--green);
}

.festival-team-gap-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.festival-team-gap-chip:hover { border-color: var(--line-strong); }
.festival-team-gap-chip.is-on {
  background: var(--brand-pale);
  border-color: var(--brand-light);
  color: var(--brand-strong);
  font-weight: 600;
}

.festival-team-gap-sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}
.festival-team-gap-sort select {
  height: 28px;
  padding: 0 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.festival-team-gap-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.festival-team-gap-day {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.festival-team-gap-day:first-child { margin-top: 0; }
.festival-team-gap-day strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.festival-team-gap-day small {
  font-size: 11.5px;
  color: var(--muted);
}
.festival-team-gap-day hr {
  flex: 1 1 auto;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* ── La carte d'un poste à pourvoir ── */
.festival-team-gap-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 168px;
  gap: 13px;
  align-items: center;
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gap-svc);
  border-radius: 9px;
}
@media (max-width: 900px) {
  .festival-team-gap-card { grid-template-columns: minmax(0, 1fr); }
  .festival-team-gap-need { justify-content: flex-start; }
}

.festival-team-gap-time { display: flex; flex-direction: column; }
.festival-team-gap-time strong {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.festival-team-gap-time small { font-size: 10.5px; color: var(--muted); }

.festival-team-gap-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.festival-team-gap-heading {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.festival-team-gap-heading > strong,
.festival-team-gap-title {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--ink);
  text-align: left;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.festival-team-gap-title:hover { color: var(--brand-strong); text-decoration: underline; }
.festival-team-gap-heading small { font-size: 11.5px; color: var(--muted); }

.festival-team-gap-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.festival-team-gap-candidate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px 0 4px;
  font: inherit;
  font-size: 12px;
  color: var(--brand-strong);
  background: var(--panel);
  border: 1px solid var(--brand-light);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.festival-team-gap-candidate:hover { background: var(--brand-pale); }
.festival-team-gap-candidate u {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 700;
  text-decoration: none;
  background: var(--brand-pale);
  color: var(--brand-strong);
}
.festival-team-gap-candidate:hover u { background: var(--brand); color: #FFF; }
.festival-team-gap-more { font-size: 12px; color: var(--muted); }
.festival-team-gap-link {
  font: inherit;
  font-size: 12px;
  color: var(--brand-strong);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.festival-team-gap-link:hover { color: var(--brand); }

.festival-team-gap-need {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.festival-team-gap-need > span:first-child {
  font-size: 12.5px;
  font-weight: 600;
}

/* ── Ce qui est réglé : replié, pas supprimé ── */
.festival-team-gap-folded {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  cursor: pointer;
}
.festival-team-gap-folded:hover { border-color: var(--brand); color: var(--ink-2); }
.festival-team-gap-folded b { font-weight: 600; color: var(--green); }
.festival-team-gap-folded span { color: var(--brand); font-weight: 600; }

.festival-team-gap-filled {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: baseline;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.festival-team-gap-filled strong { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.festival-team-gap-filled small { display: block; font-size: 11.5px; }
.festival-team-gap-filled em { font-style: normal; color: var(--green); font-weight: 600; }
@media (max-width: 900px) {
  .festival-team-gap-filled { grid-template-columns: minmax(0, 1fr); }
}

.festival-team-gap-done {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: var(--green-pale);
  border: 1px solid rgba(58, 128, 80, .3);
  border-radius: 9px;
}
.festival-team-gap-done strong { font-size: 13.5px; font-weight: 600; color: var(--green); }
.festival-team-gap-done small { font-size: 12.5px; color: var(--muted); }

/* Le filet de gauche reprend la couleur de service du tableau des besoins. */
.festival-team-gap-card.is-son { --gap-svc: #e6c400; }
.festival-team-gap-card.is-lumiere { --gap-svc: #4384dc; }
.festival-team-gap-card.is-video { --gap-svc: #9a3dd1; }
.festival-team-gap-card.is-plateau { --gap-svc: #20a53b; }
.festival-team-gap-card.is-rig { --gap-svc: #ee921e; }
.festival-team-gap-card.is-road { --gap-svc: #5992c6; }
.festival-team-gap-card.is-electro { --gap-svc: #f06e25; }
.festival-team-gap-card.is-restauration { --gap-svc: #bd4e72; }
.festival-team-gap-card.is-production { --gap-svc: var(--brand); }
.festival-team-gap-card.is-accueil { --gap-svc: var(--violet); }
.festival-team-gap-card.is-securite { --gap-svc: var(--danger); }

/* ===========================================================================
   Tableau équipes · le bandeau des concerts et la charge du service
   La grille disait qui travaille, jamais quand le public est dans la salle.
   Chaque concert descend maintenant en bandeau à travers toutes les lignes de
   sa journée, et chaque service porte son total d'heures à côté de son nom.
   =========================================================================== */

.festival-team-schedule-scroll {
  --team-label-w: 200px;
}

@media (max-width: 900px) {
  .festival-team-schedule-scroll {
    --team-label-w: 160px;
  }
}

.festival-team-schedule-body {
  position: relative;
  min-width: 1160px;
}

@media (max-width: 900px) {
  .festival-team-schedule-body {
    min-width: 1000px;
  }
}

/* La ligne de spectacle se reconnaît sans lire : liseré de concert au bord du
   libellé et piste légèrement teintée, comme la colonne de concert de la
   timeline verticale. */
.festival-team-schedule-row.is-concert .festival-team-schedule-label {
  border-left: 4px solid var(--brand-strong);
}

.festival-team-schedule-row.is-concert .festival-team-schedule-track {
  background-color: color-mix(in srgb, var(--panel) 93%, #8e2523);
}

.festival-team-schedule-show-band {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  background: rgba(142, 37, 35, 0.07);
  border-left: 1.5px solid rgba(142, 37, 35, 0.48);
  border-right: 1.5px solid rgba(142, 37, 35, 0.48);
}


/* La charge suit le nom du service, sur la même ligne : une deuxième ligne
   dans le libellé aurait rendu la hauteur de rang au tableau. */
.festival-team-schedule-label strong em {
  margin-left: 7px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
}

/* ============================================================
   26. Tableau équipes : le traitement du canevas de lisibilité
   La colonne de service était un bloc de couleur pleine, et chaque
   tuile un cadre fermé : à quinze services, la couleur occupait
   plus de place que l'information. Le canevas la réduit à un filet
   — un liseré à gauche, du texte sur fond clair. La couleur
   signale toujours, elle ne remplit plus.
   ============================================================ */

.festival-team-schedule-label {
  gap: 0;
  padding: 3px 8px 3px 12px;
  background: var(--panel);
  color: var(--ink);
  border-right: 1.4px solid var(--line-strong);
  /* Le liseré passe par une ombre interne : une bordure gauche décalerait
     le texte de tous les libellés d'un service à l'autre. */
  box-shadow: inset 3px 0 0 var(--team-label-color, #2f5d86);
}

.festival-team-schedule-label strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.008em;
}

.festival-team-schedule-label small,
.festival-team-schedule-label span {
  color: var(--muted);
}

.festival-team-schedule-label strong em {
  margin-left: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

/* Sur fond clair, le « + » blanc à bord blanc devenait invisible. */
.festival-team-schedule-label .festival-structure-column-add {
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--muted);
}

.festival-team-schedule-row {
  border-bottom: 1px solid var(--line);
}

/* La séparation entre deux structures reste le seul trait appuyé. */
.festival-team-schedule-group {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.09em;
}

.festival-team-schedule-track {
  background-image:
    linear-gradient(90deg, var(--line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(180deg, transparent 1px, transparent 1px);
}

.festival-team-schedule-task {
  height: 24px;
  justify-content: flex-start;
  padding: 0 7px;
  border: 0;
  border-left: 2.5px solid var(--program-border);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.festival-team-schedule-task strong {
  font-size: 11px;
  font-weight: 600;
}

.festival-team-schedule-task small {
  font-weight: 500;
  opacity: 0.68;
}

/* Une tâche bloquante doit rompre le calme : elle garde son cadre fermé. */
.festival-team-schedule-task.is-blocking {
  border: 1px solid #C00000;
  border-left-width: 2.5px;
}

@media (prefers-color-scheme: dark) {
  .festival-team-schedule-task.is-blocking {
    border-color: #E0794C;
  }
}

/* ===========================================================================
   Onglet Équipes · la semaine repliée et le ruban
   Le tableur M/A/S posait quatre colonnes par jour et trois lignes par poste.
   « Semaine » replie chaque journée dans une case ; « Journée » déroule le
   ruban, où la réglette porte l'horaire et le concert descend en bandeau.
   =========================================================================== */

.festival-team-week-scroll,
.festival-team-ribbon-scroll {
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
}

.festival-team-week {
  --ftw-label: 208px;
  --ftw-total: 104px;
  --ftw-day: 168px;
  display: grid;
  grid-template-columns: var(--ftw-label) repeat(var(--ftw-days, 5), minmax(122px, var(--ftw-day))) var(--ftw-total);
  width: max-content;
  font-size: 13px;
}

/* ── La bande de structure ──────────────────────────────────────────────
   Elle remplace l'en-tête de carte : même contenu, une ligne au lieu de
   soixante-six pixels, et la grille des jours ne recommence pas dessous. */
.festival-team-week .ftw-band {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-top: 2px solid #244f78;
  background: var(--brand-pale);
}

.festival-team-week .ftw-band-collapse {
  display: inline-grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
  color: #0b5952;
  cursor: pointer;
}

.festival-team-week .ftw-band-collapse svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

.festival-team-week .ftw-band-title { min-width: 0; }
.festival-team-week .ftw-band-title small,
.festival-team-week .ftw-band-title strong { display: block; }
.festival-team-week .ftw-band-title small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.festival-team-week .ftw-band-title strong {
  overflow: hidden;
  font-size: 15px;
  color: #063b35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-team-week .ftw-band-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.festival-team-week .ftw-band-actions button { padding: 4px 9px; font-size: 11.5px; }
.festival-team-week .ftw-band .festival-team-edit-pencil { width: 26px; height: 26px; padding: 0; }
.festival-team-week .ftw-band .festival-team-edit-pencil svg { width: 13px; height: 13px; }
.festival-team-week .ftw-band .festival-team-status { flex: none; }

/* ── Les structures sans besoin, sur une ligne ───────────────────────── */
.festival-team-week-sheet { display: flex; flex-direction: column; gap: 10px; }

.festival-team-empty-scopes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
}

.festival-team-empty-pill {
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.festival-team-empty-intro { color: var(--muted); font-size: 12.5px; }

.festival-team-empty-names { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.festival-team-empty-name {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.festival-team-empty-name strong { font-weight: 600; }
.festival-team-empty-name em { font-style: normal; font-size: 11px; color: #0b5952; }
.festival-team-empty-name:hover { border-color: #6b9d95; background: var(--brand-pale); }
.festival-team-empty-name:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── L'encart RH tech, en pied de l'onglet Équipes ── */

.festival-team-budget {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: var(--panel);
}

.festival-team-budget .ftb-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.festival-team-budget .ftb-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.festival-team-budget .ftb-head strong {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.festival-team-budget .ftb-head em { font-style: normal; color: var(--muted); font-size: 12.5px; }

.festival-team-budget .ftb-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.festival-team-budget .ftb-chips span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
}

.festival-team-budget .ftb-chips small { color: var(--muted); }
.festival-team-budget .ftb-chips b { font-weight: 600; font-variant-numeric: tabular-nums; }

.festival-team-budget .ftb-services { display: flex; flex-wrap: wrap; gap: 6px 14px; }

.festival-team-budget .ftb-services span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.festival-team-budget .ftb-services i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--svc, var(--brand));
}

.festival-team-budget .ftb-services b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.festival-team-budget .ftb-services em { color: var(--muted); font-style: italic; font-size: 12.5px; }

.festival-team-budget .ftb-budget-line {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.festival-team-budget .ftb-budget-line b { color: var(--ink); font-weight: 600; }
.festival-team-budget .ftb-budget-line small { display: block; margin-top: 2px; font-size: 11.5px; }
.festival-team-budget .ftb-budget-line.is-on { border-top-color: var(--brand); }

/* Le rappel des créneaux qui attendent leur horaire : sans eux le total ment
   par le bas, et rien ne le disait. */
.festival-team-budget .ftb-todo-line {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--warning, var(--line));
  color: var(--muted);
  font-size: 12.5px;
}

.festival-team-budget .ftb-todo-line b { color: var(--ink); font-weight: 600; }
.festival-team-budget .ftb-todo-line small { display: block; margin-top: 2px; font-size: 11.5px; }

/* Un créneau affecté mais sans horaire : présent, cliquable, et visiblement
   inachevé — c'est là qu'on tape les heures. */
.festival-team-week .ftw-slot.is-todo {
  border-left-style: dashed;
  background: repeating-linear-gradient(
    135deg,
    var(--surface-muted, #f4f4f5) 0 6px,
    transparent 6px 12px
  );
}

.festival-team-week .ftw-slot.is-todo span { color: var(--muted); font-weight: 500; font-style: italic; }

/* ── La case « RH tech équipes » de la barre du budget ── */

.budget-team-rh-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}

.budget-team-rh-toggle:hover { border-color: #6b9d95; background: var(--brand-pale); }
.budget-team-rh-toggle input { margin: 0; cursor: pointer; accent-color: var(--brand); }
.budget-team-rh-toggle:has(input:checked) { border-color: var(--brand); background: var(--brand-pale); font-weight: 600; }


.festival-team-week > * {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.festival-team-week .ftw-corner,
.festival-team-week .ftw-day,
.festival-team-week .ftw-total-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 7px 10px;
  background: #244f78;
  color: #fff;
  border-right-color: rgba(255, 255, 255, .16);
}

.festival-team-week .ftw-corner,
.festival-team-week .ftw-total-head {
  display: flex;
  align-items: flex-end;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.festival-team-week .ftw-total-head { justify-content: flex-end; }

.festival-team-week .ftw-day { text-align: center; }
.festival-team-week .ftw-day strong { display: block; font-size: 12.5px; }
.festival-team-week .ftw-day small { display: block; font-size: 10.5px; opacity: .74; font-variant-numeric: tabular-nums; }
.festival-team-week .ftw-day.has-show strong::after { content: " ●"; font-size: 9px; color: #ffd9a0; }

.festival-team-week .ftw-service {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.festival-team-week .ftw-service i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--svc, var(--brand));
}

.festival-team-week .ftw-service b {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.festival-team-week .ftw-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  background: var(--panel);
}

.festival-team-week .ftw-who-name strong { display: block; font-size: 13.5px; font-weight: 600; }
.festival-team-week .ftw-who-name small { display: block; font-size: 11.5px; color: var(--muted); }

/* Le nom mène à sa fiche : il se lit comme du texte, il se clique comme un
   lien. Hors édition seulement — sous le crayon, c'est le sélecteur qui
   affecte. */
.festival-team-week .ftw-who-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.festival-team-week .ftw-who-link:hover,
.festival-team-week .ftw-who-link:focus-visible {
  color: var(--brand-strong);
  text-decoration: underline;
}

.festival-team-week .ftw-pill {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand-pale);
  color: var(--brand-strong);
  font-size: 10.5px;
  font-weight: 600;
}

.festival-team-week .ftw-pill.is-gap {
  background: var(--danger-pale);
  color: var(--danger);
}

.festival-team-week .ftw-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 58px;
  padding: 7px 8px;
  background: var(--panel);
}

.festival-team-week .ftw-cell.is-empty { background: var(--surface); }
.festival-team-week .ftw-cell.is-warning { background: var(--yellow-pale); }
.festival-team-week .ftw-cell.is-danger { background: var(--danger-pale); }

.festival-team-week .ftw-slot {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  padding: 3px 7px;
  border: 0;
  border-left: 3px solid var(--phase-show);
  border-radius: 5px;
  background: var(--brand-pale);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.festival-team-week .ftw-slot span { font-variant-numeric: tabular-nums; font-weight: 600; }
.festival-team-week .ftw-slot em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-team-week .ftw-slot.is-mounting { border-left-color: var(--phase-mounting); background: var(--accent-pale); }
.festival-team-week .ftw-slot.is-dismantling { border-left-color: var(--phase-dismantling); background: var(--green-pale); }
.festival-team-week .ftw-slot:hover { filter: brightness(.97); }
.festival-team-week .ftw-slot:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.festival-team-week .ftw-ghost { margin: auto; color: var(--muted); opacity: .6; }

.festival-team-week .ftw-sum {
  margin-top: auto;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.festival-team-week .ftw-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 9px 11px;
  background: var(--surface);
  text-align: right;
}

.festival-team-week .ftw-total strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.festival-team-week .ftw-total small { font-size: 10.5px; color: var(--muted); }
.festival-team-week .ftw-total.is-warning { background: var(--yellow-pale); }
.festival-team-week .ftw-total.is-warning strong { color: #7a5b04; }
.festival-team-week .ftw-total.is-danger { background: var(--danger-pale); }
.festival-team-week .ftw-total.is-danger strong { color: var(--danger); }
.festival-team-week .ftw-total.is-empty strong { color: var(--muted); }

.festival-team-week .ftw-empty,
.festival-team-week .ftw-foot {
  grid-column: 1 / -1;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
}

.festival-team-week .ftw-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.festival-team-week .ftw-foot b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── La case en édition ── */

.festival-team-week .ftw-slot-edit {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.festival-team-week .ftw-slot-times { display: flex; gap: 3px; }

.festival-team-week .ftw-time-input,
.festival-team-week .ftw-task-input {
  min-width: 0;
  padding: 2px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 11.5px;
}

.festival-team-week .ftw-time-input { width: 74px; font-variant-numeric: tabular-nums; }
.festival-team-week .ftw-task-input { flex: 1 1 90px; }

.festival-team-week .ftw-slot-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.festival-team-week .ftw-slot-remove:hover { background: var(--danger-pale); color: var(--danger); }
.festival-team-week .ftw-slot-remove svg { width: 13px; height: 13px; }

.festival-team-week .ftw-add {
  align-self: flex-start;
  padding: 2px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.festival-team-week .ftw-add:hover { border-color: var(--brand); color: var(--brand); }

/* ── Le ruban ── */

.festival-team-ribbon-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.festival-team-ribbon-day .ftr-day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px;
  border-left: 5px solid #244f78;
  background: var(--surface);
  color: #183856;
}

.festival-team-ribbon-day .ftr-day-head strong { font-size: 14px; }
.festival-team-ribbon-day .ftr-day-head small { color: var(--muted); font-variant-numeric: tabular-nums; }
.festival-team-ribbon-day .ftr-day-head b { margin-left: auto; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.festival-team-ribbon {
  --ftr-label: 208px;
  min-width: 900px;
}

.festival-team-ribbon .ftr-ruler {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #244f78;
  color: #fff;
}

.festival-team-ribbon .ftr-corner {
  flex: 0 0 var(--ftr-label);
  width: var(--ftr-label);
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.festival-team-ribbon .ftr-scale { display: flex; flex: 1; }

.festival-team-ribbon .ftr-tick {
  padding: 6px 0 6px 5px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.festival-team-ribbon .ftr-body { position: relative; }

.festival-team-ribbon .ftr-service {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.festival-team-ribbon .ftr-service i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--svc, var(--brand));
}

.festival-team-ribbon .ftr-service b {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.festival-team-ribbon .ftr-row {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.festival-team-ribbon .ftr-lab {
  flex: 0 0 var(--ftr-label);
  width: var(--ftr-label);
  padding: 7px 10px;
  border-right: 1px solid var(--line);
}

.festival-team-ribbon .ftr-lab-name strong { display: block; font-size: 13px; font-weight: 600; }
.festival-team-ribbon .ftr-lab-name small { display: block; font-size: 11px; color: var(--muted); }
.festival-team-ribbon .ftr-lab.is-free .ftr-lab-name strong { color: var(--danger); }
.festival-team-ribbon .ftr-lab .festival-team-row-contact { margin-top: 4px; }

.festival-team-ribbon .ftr-track {
  position: relative;
  flex: 1;
  min-height: 42px;
}

.festival-team-ribbon .ftr-tile {
  position: absolute;
  top: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  padding: 3px 8px;
  border: 0;
  border-left: 3px solid var(--phase-show);
  border-radius: 5px;
  background: var(--brand-pale);
  color: var(--ink);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.festival-team-ribbon .ftr-tile strong { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.festival-team-ribbon .ftr-tile em { font-style: normal; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.festival-team-ribbon .ftr-tile.is-mounting { border-left-color: var(--phase-mounting); background: var(--accent-pale); }
.festival-team-ribbon .ftr-tile.is-dismantling { border-left-color: var(--phase-dismantling); background: var(--green-pale); }
.festival-team-ribbon .ftr-tile.is-free { background: transparent; border: 1px dashed var(--danger); color: var(--danger); }
.festival-team-ribbon .ftr-tile.is-free strong { color: var(--danger); }
.festival-team-ribbon .ftr-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.festival-team-ribbon .ftr-show-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(201, 153, 26, .10);
  border-left: 1px solid var(--yellow);
  border-right: 1px solid var(--yellow);
  pointer-events: none;
}

.festival-team-ribbon .ftr-show-band span {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7a5b04;
}

/* Les couleurs de service, celles du tableau des besoins. */
.festival-team-week .ftw-service.is-son,
.festival-team-ribbon .ftr-service.is-son,
.festival-team-budget .ftb-services .is-son { --svc: #e6c400; }
.festival-team-week .ftw-service.is-lumiere,
.festival-team-ribbon .ftr-service.is-lumiere,
.festival-team-budget .ftb-services .is-lumiere { --svc: #4384dc; }
.festival-team-week .ftw-service.is-video,
.festival-team-ribbon .ftr-service.is-video,
.festival-team-budget .ftb-services .is-video { --svc: #9a3dd1; }
.festival-team-week .ftw-service.is-plateau,
.festival-team-ribbon .ftr-service.is-plateau,
.festival-team-budget .ftb-services .is-plateau { --svc: #20a53b; }
.festival-team-week .ftw-service.is-rig,
.festival-team-ribbon .ftr-service.is-rig,
.festival-team-budget .ftb-services .is-rig { --svc: #ee921e; }
.festival-team-week .ftw-service.is-road,
.festival-team-ribbon .ftr-service.is-road,
.festival-team-budget .ftb-services .is-road { --svc: #5992c6; }
.festival-team-week .ftw-service.is-electro,
.festival-team-ribbon .ftr-service.is-electro,
.festival-team-budget .ftb-services .is-electro { --svc: #f06e25; }
.festival-team-week .ftw-service.is-restauration,
.festival-team-ribbon .ftr-service.is-restauration,
.festival-team-budget .ftb-services .is-restauration { --svc: #bd4e72; }
.festival-team-week .ftw-service.is-production,
.festival-team-ribbon .ftr-service.is-production,
.festival-team-budget .ftb-services .is-production { --svc: var(--brand); }
.festival-team-week .ftw-service.is-accueil,
.festival-team-ribbon .ftr-service.is-accueil,
.festival-team-budget .ftb-services .is-accueil { --svc: var(--violet); }
.festival-team-week .ftw-service.is-securite,
.festival-team-ribbon .ftr-service.is-securite,
.festival-team-budget .ftb-services .is-securite { --svc: var(--danger); }

@media (max-width: 900px) {
  .festival-team-week { --ftw-label: 168px; --ftw-total: 88px; }
  .festival-team-ribbon { --ftr-label: 168px; }
}

@media (prefers-color-scheme: dark) {
  .festival-team-week .ftw-cell.is-warning,
  .festival-team-week .ftw-total.is-warning { background: rgba(201, 153, 26, .14); }
  .festival-team-week .ftw-cell.is-danger,
  .festival-team-week .ftw-total.is-danger { background: rgba(192, 51, 58, .16); }
  .festival-team-week .ftw-total.is-warning strong { color: var(--yellow); }
  .festival-team-ribbon .ftr-show-band { background: rgba(201, 153, 26, .14); }
  .festival-team-ribbon .ftr-show-band span { color: var(--yellow); }
}

.festival-team-ribbon-empty-days {
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ============================================================
   28. Tableau équipes : la réglette au quart d'heure
   L'en-tête écrivait l'heure entière dans chaque colonne : au pas
   de 15 minutes, « 09:15 » quatre fois par heure ne se lisait plus,
   et la réglette, plus large que les lignes, glissait d'un cran par
   rapport aux tuiles. Elle tient maintenant sur deux rangs — l'heure
   à cheval sur ses colonnes, les minutes en dessous — et la largeur
   des colonnes se calcule au même endroit pour tout le tableau.
   ============================================================ */

.festival-team-schedule-scroll {
  --team-slot-min: 30px;
  --team-grid-w: max(960px, calc(var(--team-slots-all, 32) * var(--team-slot-min)));
}

.festival-team-schedule-ruler,
.festival-team-schedule-row,
.festival-team-schedule-body {
  min-width: calc(var(--team-label-w, 200px) + var(--team-grid-w));
}

.festival-team-schedule-ruler,
.festival-team-schedule-row {
  grid-template-columns: var(--team-label-w, 200px) minmax(var(--team-grid-w), 1fr);
}

.festival-team-schedule-group {
  min-width: calc(var(--team-label-w, 200px) + var(--team-grid-w));
}

.festival-team-schedule-track {
  min-width: var(--team-grid-w);
}

/* Les deux rangs de la réglette partagent les colonnes de la grille : le
   rang des heures les regroupe par quatre (ou par deux), celui des minutes
   en garde une par créneau. */
.festival-team-schedule-time-header {
  display: grid;
  /* Une seule colonne, deux rangs : ce sont les deux rangs qui portent
     désormais les colonnes de créneaux, pas l'en-tête lui-même. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-width: var(--team-grid-w);
}

.festival-team-schedule-time-hours,
.festival-team-schedule-time-minutes {
  display: grid;
  grid-template-columns: repeat(var(--team-time-slots), minmax(0, 1fr));
}

.festival-team-schedule-time-hours span {
  border-left-color: rgba(255, 255, 255, 0.72);
  color: white;
  font-size: 11.5px;
  font-weight: 700;
}

.festival-team-schedule-time-minutes span {
  align-items: flex-start;
  padding-bottom: 3px;
  border-left-color: rgba(255, 255, 255, 0.14);
  color: rgba(220, 230, 240, 0.72);
  font-size: 9.5px;
  font-weight: 500;
}

.festival-team-schedule-time-minutes span.is-hour {
  border-left-color: rgba(255, 255, 255, 0.72);
  color: white;
  font-weight: 700;
}

@media (max-width: 900px) {
  .festival-team-schedule-scroll {
    --team-grid-w: max(840px, calc(var(--team-slots-all, 32) * var(--team-slot-min)));
  }
}

/* ============================================================
   TIMELINE VERTICALE — le spectacle, puis les services
   ------------------------------------------------------------
   Une scène dépliée s'ouvre en colonnes : le spectacle d'abord,
   puis un service par colonne. Repliée, le service voyage sur la
   tuile sous forme de ruban. Ce qu'on écrit dans une tuile suit
   la place qu'elle a — trois lignes dans 22 px, c'était trois
   lignes coupées.
   ============================================================ */

/* ── En-tête de scène dépliée : ses colonnes ── */
.festival-plan-timeline-lane-heads {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  width: 100%;
  margin-top: 4px;
}

.festival-plan-timeline-lane-head {
  display: block;
  overflow: hidden;
  padding: 0 4px;
  border-left: 2px solid var(--lane-color, transparent);
  color: var(--ink-2);
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.festival-plan-timeline-lane-head.is-show {
  border-left-color: var(--line-strong);
  color: var(--muted);
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-zone.is-expanded {
  min-height: 68px;
  padding-bottom: 4px;
}

/* Les séparateurs de colonnes de service, sous les tuiles. */
.festival-plan-timeline.is-vertical .festival-plan-timeline-track {
  background-image:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px var(--timeline-unit-size)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px calc(100% / var(--timeline-lanes, 1)));
}

/* ── Densité : ce qu'on écrit selon la hauteur ── */
.festival-plan-timeline-bar.is-density-micro {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

.festival-plan-timeline-bar.is-density-micro > strong {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-cond);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-plan-timeline-bar .festival-plan-timeline-start {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  opacity: .78;
}

.festival-plan-timeline-bar.is-density-compact > strong {
  font-family: var(--font-cond);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-plan-timeline-bar .festival-plan-timeline-needs {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 22%, transparent);
  font-size: 10px;
  opacity: .86;
}

/* ── L'effectif ── */
.festival-plan-timeline-bar {
  /* La pastille se positionne dans le coin de la tuile. */
  position: absolute;
}

.festival-plan-timeline-count {
  position: absolute;
  top: 3px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.festival-plan-timeline-count.is-short {
  background: var(--danger);
  color: #fff;
}

.festival-plan-timeline-bar.is-understaffed {
  box-shadow: 0 0 0 2px rgba(192, 51, 58, .18);
}

/* ── Ruban de service, sur une scène repliée ── */
.festival-plan-timeline-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 3px;
  padding: 0 6px 0 5px;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-plan-timeline-ribbon-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.festival-plan-timeline-ribbon b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}

.festival-plan-timeline-ribbon b.is-short {
  padding: 0 4px;
  border-radius: 7px;
  background: var(--danger);
  color: #fff;
}

/* ── Ouverture des portes, briefing : ils traversent la scène ──
   Ni l'un ni l'autre n'est le travail d'un service. Les ranger dans
   une colonne revenait à les cacher aux six autres. */
.festival-plan-timeline-bar.is-span {
  border-style: dashed;
  background: color-mix(in srgb, var(--panel) 88%, currentColor);
  box-shadow: none;
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-bar.is-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  height: auto !important;
  padding: 0 8px;
  border: 0;
  border-top: 2px dashed currentColor;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 18px;
  transform: translateY(-9px);
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-bar.is-line > strong {
  padding: 0 6px;
  border-radius: 9px;
  background: var(--panel);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.festival-plan-timeline.is-vertical .festival-plan-timeline-bar.is-line > small {
  padding: 0 5px;
  border-radius: 8px;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 10px;
}

.festival-plan-timeline-bar.is-doors {
  --doors-tint: var(--accent);
}

/* ── Bloquant et pause ── */
.festival-plan-timeline-bar.is-blocking {
  border-color: var(--danger);
  background-image: repeating-linear-gradient(135deg, rgba(192, 51, 58, .16) 0 6px, transparent 6px 12px);
}

.festival-plan-timeline-bar.is-pause {
  border-style: dotted;
  box-shadow: none;
  font-weight: 600;
}

/* ── Glisser : l'ombre porte, l'outline ne décale rien ── */
.festival-plan-timeline-bar.is-dragging {
  z-index: 6;
}

/* ============================================================
   TIMELINE DES STRUCTURES — l'habillage du canvas
   ------------------------------------------------------------
   Les colonnes portaient déjà le spectacle puis les services ;
   c'est la tuile et la piste qui restaient en arrière. Texte
   calé à gauche, liseré du service, heures en DM Mono, effectif
   sur la tuile, et une grille qui cesse de crier plus fort que
   son contenu.
   ============================================================ */

/* ── La piste : des filets, pas des rayures ──
   Les filets étaient posés tous les 54 px, la demi-heure tous les 13,5 px,
   pendant que la hauteur d'une heure, elle, se calcule (`--program-hour-height`
   suit le remplissage de la journée). Les deux trames dérivaient donc de la
   grille : une bande large, une bande étroite, un filet qui doublait le trait
   de l'heure juste à côté. Elles se comptent maintenant en fractions de la
   hauteur d'une heure — la demi, puis le quart —, donc toutes les bandes ont
   la même hauteur, quelle que soit l'échelle. */
.festival-program-track {
  --program-hour-rule: var(--program-hour-height, 64px);
  background:
    repeating-linear-gradient(to bottom, rgba(23, 61, 55, .10) 0 1px, transparent 1px calc(var(--program-hour-rule) / 2)),
    repeating-linear-gradient(to bottom, rgba(23, 61, 55, .05) 0 1px, transparent 1px calc(var(--program-hour-rule) / 4)),
    var(--panel);
}

/* ── La tuile ──
   Le titre et l'horaire prenaient chacun toute la largeur : « Balance »
   occupait 243 px, puis l'horaire une ligne entière en dessous. Ils tiennent
   sur la même ligne, l'horaire calé à droite avec l'effectif. Une ligne
   gagnée sur chaque tuile — c'est ce qui manquait aux créneaux d'une heure. */
.festival-program-item:not(.is-line) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: start;
  gap: 0 8px;
  border-left-width: 3px;
  padding: 5px 9px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}

/* base 0 et non « auto » : avec une base « auto », le titre réservait sa
   largeur de texte entière et poussait l'horaire à la ligne suivante dès que
   le nom dépassait quelques mots. La base 0 garde la durée sur la ligne du
   titre ; le titre, lui, passe à la ligne dans la largeur qui lui reste.
   Il se coupait en points de suspension : un nom de créneau tronqué ne se
   lit pas, et la tuile a de la hauteur à revendre. La tuile reste en
   `overflow: hidden` : on va à la ligne, on ne déborde pas. */
.festival-program-item:not(.is-line) > strong {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* L'horaire et l'effectif ferment la ligne, dans cet ordre. */
.festival-program-item:not(.is-line) > .festival-program-item-time,
.festival-program-item:not(.is-line) > .festival-program-start {
  flex: 0 0 auto;
  margin-left: auto;
}

.festival-program-item:not(.is-line) > .festival-program-count {
  flex: 0 0 auto;
}

/* Tout le reste passe à la ligne. */
.festival-program-item:not(.is-line) > small {
  flex: 1 0 100%;
}

.festival-program-item > strong {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
}

/* Les heures en chiffres à chasse fixe : elles s'alignent d'une tuile à
   l'autre, et cessent de danser quand on fait défiler. */
.festival-program-item .festival-program-item-time,
.festival-program-item .festival-program-start {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.01em;
  opacity: .82;
}

.festival-program-item .festival-program-needs {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 20%, transparent);
  font-size: 10px;
  font-weight: 600;
  opacity: .88;
}

/* ── Une tuile courte tient sur une ligne, heure comprise ── */
.festival-program-item.is-compact {
  align-content: center;
  padding: 2px 8px;
}

.festival-program-item.is-compact > strong {
  font-family: var(--font-cond);
  font-size: 12px;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.festival-program-item.is-micro {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
}

.festival-program-item.is-micro > strong {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-cond);
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.festival-program-item.is-micro .festival-program-start {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 10px;
}

/* ── L'effectif demandé ── */
.festival-program-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.festival-program-count.is-short {
  background: var(--danger);
  color: #fff;
}

.festival-program-item.is-understaffed {
  border-color: var(--danger);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(192, 51, 58, .28);
}

/* ── Bloquant et pause ── */
.festival-program-item.is-blocking {
  border-color: var(--danger);
  background-image: repeating-linear-gradient(135deg, rgba(192, 51, 58, .15) 0 6px, transparent 6px 12px);
}

.festival-program-item.is-pause {
  border-style: dotted;
  box-shadow: none;
}

/* ── Ouverture des portes : un repère, pas une tâche ──
   Elle n'est le travail d'aucun service. Tant qu'elle occupe une colonne,
   elle s'y annonce au moins comme un jalon et non comme un créneau. */
.festival-program-item.is-doors {
  border-style: dashed;
  border-left-width: 1px;
  background-image: none;
  font-variant-caps: all-small-caps;
  letter-spacing: .04em;
}

/* ── Sélection : un anneau, qui ne décale rien ──
   Le liseré intérieur poussait le contenu de trois pixels au clic. */
.festival-program-item.is-selected {
  box-shadow: 0 0 0 2px var(--brand), var(--shadow-md);
}

/* Le filigrane de service était centré dans la tuile : avec le texte calé à
   gauche, il venait se poser au milieu des mots et cognait la pastille
   d'effectif. Il redevient une marque de fond, dans le coin bas droit. */
.festival-program-item .festival-service-watermark {
  inset: auto -8px -12px auto;
  transform: none;
  opacity: .07;
  font-size: 40px;
}

/* Sur une tuile courte, la marque n'a pas la place : elle n'apparaissait plus
   que comme un fragment collé au bord. Elle est réservée aux tuiles hautes,
   où elle se lit vraiment comme un fond. */
.festival-program-item.is-micro .festival-service-watermark,
.festival-program-item.is-compact .festival-service-watermark {
  display: none;
}

/* ── Les créneaux traversants ──────────────────────────────────────────────
   Ouverture des portes, briefing d'équipe : ils ne sont le travail d'aucun
   service. Ils passent au-dessus de toutes les colonnes de leur journée,
   en bandeau, sans masquer ce qu'il y a dessous. */
.festival-program-traversing {
  position: relative;
  z-index: 4;
  pointer-events: none;
}

.festival-program-item.is-traversing {
  left: 0;
  right: 0;
  z-index: 4;
  align-content: center;
  border-width: 1px 0;
  border-left: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--program-color, var(--surface-2)) 55%, transparent);
  box-shadow: none;
  padding: 3px 12px;
  pointer-events: auto;
}

/* Un briefing de quinze minutes n'occupe pas trois quarts d'heure : la
   hauteur minimale des tuiles (42 px) étirait le bandeau traversant, et son
   filet du bas venait barrer les tuiles une heure plus bas. Le bandeau garde
   la hauteur de sa durée ; c'est l'étiquette qui déborde, pas le trait. */
.festival-program-item.is-traversing {
  min-height: 0;
  align-items: center;
  padding: 0 12px;
  overflow: visible;
}

.festival-program-item.is-traversing > strong {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 9px;
  background: var(--panel);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.festival-program-item.is-traversing .festival-program-item-time,
.festival-program-item.is-traversing .festival-program-start {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--panel);
}

.festival-program-item.is-traversing .festival-service-watermark {
  display: none;
}

/* Une ouverture de portes est un jalon : le trait compte plus que l'aplat. */
.festival-program-item.is-traversing.is-doors {
  border-top-style: dashed;
  border-bottom-style: dashed;
  border-top-width: 2px;
  background: transparent;
}

/* ── La couche de texte des lignes communes suit le même habillage ─────────
   Quand une tuile croise une ligne commune, son texte n'est plus rendu dans
   la tuile mais dans cette couche, qui a son propre balisage. Elle appelait
   déjà la même fonction de contenu, mais aucune des règles de mise en ligne :
   les colonnes traversées par une ligne commune gardaient donc l'ancien
   affichage — titre et horaire empilés, centrés — pendant que les autres
   passaient au nouveau. */
.festival-program-text-overlay-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  width: 100%;
  margin: 0;
  text-align: left;
}

.festival-program-text-overlay-copy > strong {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

.festival-program-text-overlay-copy > .festival-program-item-time,
.festival-program-text-overlay-copy > .festival-program-start {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.01em;
  opacity: .82;
}

.festival-program-text-overlay-copy > .festival-program-count {
  flex: 0 0 auto;
}

.festival-program-text-overlay-copy > small {
  flex: 1 0 100%;
}

.festival-program-text-overlay-item.is-micro .festival-program-text-overlay-copy,
.festival-program-text-overlay-item.is-compact .festival-program-text-overlay-copy {
  flex-wrap: nowrap;
}

.festival-program-text-overlay-item.is-micro .festival-program-text-overlay-copy > strong,
.festival-program-text-overlay-item.is-compact .festival-program-text-overlay-copy > strong {
  font-family: var(--font-cond);
}

/* Le filigrane n'a rien à faire dans la couche de texte : il appartient au
   fond de la tuile, qui est dessous. */
.festival-program-text-overlay-copy > .festival-service-watermark {
  display: none;
}

/* Le texte de la couche doit tomber exactement où tomberait celui de la tuile.
   La tuile : 8 px de décalage, 3 px de liseré de service, 9 px de retrait,
   soit 20 px. La couche n'en comptait que 15 — le titre mordait sur la
   bordure gauche. Tant que la copie était centrée et à largeur de contenu,
   l'écart ne se voyait pas ; en pleine largeur, si. */
.festival-program-text-overlay-item {
  padding-left: 12px;
  padding-right: 9px;
}

/* Le texte de la couche tombait aussi trop bas : la tuile aligne son contenu
   en haut, la couche le centrait verticalement. Sur une tuile d'une heure, le
   titre se posait au milieu, puis le décalage d'évitement de la ligne commune
   le poussait contre la bordure du bas — « le texte sort de la tuile ». Les
   tuiles courtes, elles, restent centrées comme leur fond. */
.festival-program-text-overlay-item {
  align-content: start;
  padding-top: 5px;
  padding-bottom: 5px;
}

.festival-program-text-overlay-item.is-compact,
.festival-program-text-overlay-item.is-micro {
  align-content: center;
}

/* La piste porte un filet de 2 px à droite, pas la couche : sans lui, la
   couche était deux pixels plus large que la tuile et l'horaire calé à droite
   débordait d'autant. */
.festival-program-text-overlay {
  box-sizing: border-box;
  border-right: 2px solid transparent;
}

/* ============================================================
   LES DEUX BANDEAUX D'EN-TÊTE — d'après le canevas
   « Le spectacle demande, les services exécutent »
   ------------------------------------------------------------
   L'en-tête criait : aplat vert sombre, filets de 2 px, texte
   centré, et la date répétée sous chaque service. Le canevas
   pose deux étages calmes sur fond clair — la journée en
   travers, puis les services, pastille de couleur en tête —
   et une gouttière d'heures qui se lit sans se faire voir.
   ============================================================ */

/* Trois lignes de texte — la structure, la phase, le service — plus la barre
   d'actions, dans 78 px : le nom de la structure passait sous le bandeau du
   jour et le nom du service se faisait couper par le filet du bas. L'étage
   des services prend la hauteur de ce qu'il porte vraiment. */
.festival-structure-columns-grid {
  grid-template-rows: 34px 104px calc(var(--program-hours) * var(--program-hour-height));
}

/* ── Étage 1 : la journée ── */
.festival-program-date-band {
  position: sticky;
  top: 0;
  z-index: 81;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid #E2DED6;
  border-bottom: 1px solid #E2DED6;
  background: #F6F9F8;
  overflow: hidden;
}

.festival-program-date-band strong {
  flex: 0 0 auto;
  color: #1A1D1E;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.festival-program-date-band small {
  min-width: 0;
  overflow: hidden;
  color: #6E787C;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Étage 2 : les services ──
   Deux étages trop serrés : « Scène » passait sous le bord et le nom du
   concert venait cogner les boutons de l'en-tête. Le bandeau du jour gagne
   quatre pixels, celui des services quatorze. */
.festival-structure-columns-grid .festival-program-corner {
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 8px 12px;
  border-right: 1px solid #E2DED6;
  border-bottom: 1px solid #DDD9D2;
  background: var(--panel);
  color: #8A8378;
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.festival-structure-columns-grid .festival-structure-column-head {
  top: 34px;
  overflow: hidden;
  border-right: 1px solid #E2DED6;
  border-bottom: 1px solid #DDD9D2;
  background: var(--panel);
}

.festival-structure-columns-grid .festival-structure-column-copy {
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 32px 12px 10px;
  text-align: left;
}

/* La pastille de phase gardait la marge du gabarit compact en plus du gap :
   deux écarts pour un seul blanc. */
.festival-structure-columns-grid .festival-structure-column-head .festival-structure-phase {
  flex: 0 0 auto;
  max-width: 100%;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-structure-columns-grid .festival-structure-column-head .festival-structure-name {
  flex: 0 0 auto;
}

.festival-structure-columns-grid .festival-structure-column-copy > strong {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  color: #1A1D1E;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
  text-transform: uppercase;
}

.festival-structure-column-chip {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.festival-structure-column-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-structure-columns-grid .festival-structure-column-head .festival-structure-name,
.festival-structure-columns-grid .festival-structure-column-head .festival-structure-date,
.festival-structure-columns-grid .festival-structure-column-head small {
  margin: 0;
  color: #6E787C;
  font-size: 10px;
  font-weight: 500;
  text-align: left;
}

.festival-structure-columns-grid .festival-structure-column-head.is-concert {
  border-left: 0;
  background: #FCFBF9;
}

.festival-structure-columns-grid .festival-structure-column-head.is-concert .festival-structure-column-copy > strong {
  text-transform: none;
  font-family: inherit;
  font-size: 13px;
}

.festival-structure-columns-grid .festival-structure-column-head-actions {
  top: 4px;
  min-height: 22px;
}

/* ── Les filets de colonne : un cheveu clair, pas un trait vert de 2 px ── */
.festival-structure-columns-grid .festival-program-track {
  border-right: 1px solid #E2DED6;
}

.festival-structure-columns-grid .festival-program-text-overlay {
  border-right-width: 1px;
}

/* ── Toutes les tuiles d'une colonne ont la même largeur ──
   Un créneau rattaché à un concert rentrait de 18 px pour marquer le lien.
   À côté de la tuile du concert, restée pleine largeur, ça ne se lisait pas
   comme une hiérarchie mais comme une tuile plus large que les autres. Le
   liseré tireté dit déjà le rattachement. */
.festival-program-item.is-linked-planning {
  left: 8px;
  right: 8px;
}

/* ── Les filets d'heure : un trait par heure, une heure sur quatre marquée ──
   Le trait de 2 px vert sombre plaquait une portée de musique sur la journée.
   Une heure sur quatre porte le repère, comme les chiffres de la gouttière. */
.festival-structure-columns-grid .festival-program-track > span {
  border-top: 1px solid #E2DED6;
}

.festival-structure-columns-grid .festival-program-track > span.is-strong-hour {
  border-top-color: #C9C2B6;
}

/* ── La gouttière des heures ── */
.festival-structure-columns-grid .festival-program-hours {
  border-right: 1px solid #E2DED6;
  background: #FBFAF8;
}

.festival-structure-columns-grid .festival-program-hours span {
  right: 8px;
  color: #6E787C;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.festival-structure-columns-grid .festival-program-hours span.is-strong-hour {
  color: #1A1D1E;
  font-weight: 600;
}

/* ── Le créneau détaché ─────────────────────────────────────────────────
   Son créneau du plan de charge a été supprimé, mais quelqu'un était
   affecté dessus : on garde la ligne plutôt que d'effacer des heures déjà
   saisies. Sans cette marque elle passait pour un créneau ordinaire, et on
   la cherchait longtemps. */
.festival-team-week .ftw-slot.is-detached {
  border-left-style: dashed;
  border-left-color: var(--muted);
  background: repeating-linear-gradient(
    -45deg,
    var(--surface) 0 6px,
    var(--panel) 6px 12px
  );
}

/* La pastille prend la place de la tâche : dans une colonne de 168 px les
   deux ensemble cassaient l horaire en deux lignes. La tâche reste dans
   l infobulle. */
.festival-team-week .ftw-slot.is-detached span { white-space: nowrap; }
.festival-team-week .ftw-slot.is-detached em { display: none; }

.festival-team-week .ftw-slot .ftw-slot-detached {
  padding: 0 6px;
  border: 1px dashed var(--muted);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.festival-team-ribbon .ftr-tile.is-detached {
  border-style: dashed;
  opacity: .78;
}

/* ============================================================
   LES POSTES DEMANDÉS, EN INITIALES
   ------------------------------------------------------------
   Une tuile n'a jamais eu la place d'écrire « Régie lumière ×2 » :
   le nom sortait de la tuile, ou attendait deux heures de créneau
   pour s'afficher. Deux pastilles — RL1, RL2 — disent le même
   besoin et portent le nom des deux lignes RH qui en découlent.
   Le nom entier reste en infobulle.
   ============================================================ */
.festival-program-item .festival-program-needs,
.festival-plan-timeline-bar .festival-plan-timeline-needs,
.festival-team-schedule-task .team-slot-postes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  overflow: hidden;
}

.festival-program-item .festival-program-needs > b,
.festival-plan-timeline-bar .festival-plan-timeline-needs > b,
.festival-team-schedule-task .team-slot-postes > b {
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 3px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  white-space: nowrap;
}

/* Sur le tableau équipes la tuile tient sur une seule ligne : les
   pastilles s'y rangent à la suite du titre, jamais en dessous. */
.festival-team-schedule-task .team-slot-postes {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  font-weight: 700;
}

.festival-team-schedule-task .team-slot-postes > b {
  background: rgba(255, 255, 255, .68);
}

@media (prefers-color-scheme: dark) {
  .festival-team-schedule-task .team-slot-postes > b {
    background: rgba(0, 0, 0, .26);
  }
}

/* Le titre de la tâche passe avant ses pastilles : à l'étroit, ce sont
   les initiales qui se replient, pas l'intitulé. */
.festival-team-schedule-task strong {
  flex: 1 .15 auto;
  min-width: 0;
}

/* ============================================================
   Tableau équipes : intervertir les lignes, coller un créneau
   La poignée vit dans le libellé, à gauche du « + » ; elle ne
   se montre qu'au survol pour ne pas voler la place au nom du
   service. La piste, elle, s'allume quand un créneau attend
   d'être posé.
   ============================================================ */

.festival-team-schedule-label {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.festival-team-schedule-label .festival-structure-column-add {
  grid-column: 3;
}

.festival-team-schedule-grip {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
  width: 18px;
  height: 20px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  letter-spacing: -1px;
  cursor: grab;
  opacity: 0;
  transition: opacity var(--transition, 120ms ease);
}

.festival-team-schedule-row:hover .festival-team-schedule-grip,
.festival-team-schedule-grip:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .festival-team-schedule-grip {
    opacity: 1;
  }
}

.festival-team-schedule-row.is-reordering {
  opacity: 0.55;
}

.festival-team-schedule-row.is-drop-target {
  box-shadow: inset 0 -3px 0 var(--brand);
}

.is-pasting-festival-tile .festival-team-schedule-track {
  cursor: copy;
}

.festival-team-schedule-track.is-paste-target {
  outline: 3px solid rgba(24, 132, 128, .38);
  outline-offset: -3px;
  background-color: rgba(221, 242, 232, .42);
}

.festival-team-schedule-task.is-copied {
  outline: 3px solid var(--brand);
  outline-offset: 1px;
}

/* ===========================================================================
   Tableau équipes · le rang des repères publics
   L'entrée et la sortie du public tombaient dans la ligne « Son », faute de
   service. Elles ne sont le travail d'aucun métier : elles traversent la
   journée, en bandeau sous la réglette, là où le concert la traverse déjà.
   =========================================================================== */

.festival-team-schedule-public-row {
  position: sticky;
  top: 42px;
  z-index: 18;
  display: grid;
  grid-template-columns: var(--team-label-w, 200px) minmax(var(--team-grid-w), 1fr);
  min-width: calc(var(--team-label-w, 200px) + var(--team-grid-w));
  min-height: 30px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--panel);
}

.festival-team-schedule-public-label {
  position: sticky;
  left: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 8px;
  border-right: 1.4px solid var(--line-strong);
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Le « + » du rang suit la règle des lignes de service : discret tant que la
   souris n'est pas dessus. */
.festival-team-schedule-public-label .festival-structure-column-add {
  opacity: 0;
  transition: opacity var(--transition, 120ms ease);
}

.festival-team-schedule-public-row:hover .festival-structure-column-add,
.festival-team-schedule-public-label .festival-structure-column-add:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .festival-team-schedule-public-label .festival-structure-column-add { opacity: 1; }
}

.festival-team-schedule-public-track {
  position: relative;
  min-width: var(--team-grid-w);
  min-height: 30px;
  background-color: var(--panel);
  background-image:
    linear-gradient(90deg, var(--line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:
    calc(100% / var(--team-slots) * var(--team-hour-slots, 2)) 100%,
    calc(100% / var(--team-slots)) 100%;
}

/* Le repère se dessine comme une tuile de créneau — même liseré, même fond
   clair, même façon de porter son texte : le nom dedans, l'heure à sa suite,
   et ce qui ne tient pas se coupe au bord. */
.festival-team-schedule-public-seg {
  position: absolute;
  top: 3px;
  height: 24px;
  min-width: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  padding: 0 6px;
  border: 0;
  border-left: 2.5px solid var(--seg-border, #ca805f);
  background: var(--seg-bg, #f0c7b6);
  color: var(--seg-text, #4a1f12);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

/* Le nom prend la place restante ; l'heure cède la première, comme sur les
   tuiles des lignes de service. */
.festival-team-schedule-public-seg strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
  font-weight: 700;
}

.festival-team-schedule-public-seg small {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  opacity: .82;
}

@media (max-width: 900px) {
  .festival-team-schedule-public-row {
    min-width: calc(var(--team-label-w, 160px) + var(--team-grid-w));
  }
}

/* Le « + » du rang public hérite du gabarit de 36 px prévu pour un en-tête de
   colonne : dans un rang de 30 px il débordait sur la ligne suivante — le même
   correctif que pour les libellés de service. */
.festival-team-schedule-public-label .festival-structure-column-add {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 3px;
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--muted);
}

.festival-team-schedule-public-label .festival-structure-column-add svg {
  width: 11px;
  height: 11px;
}

/* Le repère se glisse, se copie et se colle comme une tuile : il en reprend
   les mêmes signaux. */
.festival-team-schedule-public-seg.is-draggable {
  cursor: grab;
  touch-action: pan-y;
}

.festival-team-schedule-public-seg.is-dragging {
  z-index: 8;
  cursor: grabbing;
  /* Le repère se coupe à ses bords, sauf pendant le glisser : l'heure qui
     s'affiche au-dessus doit rester lisible. */
  overflow: visible;
}

.festival-team-schedule-public-seg.is-dragging strong,
.festival-team-schedule-public-seg.is-dragging small {
  opacity: .35;
}

.festival-team-schedule-public-seg .festival-program-drag-time {
  top: -20px;
  bottom: auto;
  max-width: none;
  transform: translateX(-50%);
}

.festival-team-schedule-public-seg.is-selected {
  z-index: 7;
  outline: 3px solid rgba(22, 129, 123, 0.3);
}

.festival-team-schedule-public-seg.is-copied {
  outline: 3px solid var(--brand);
  outline-offset: 1px;
}

.festival-team-schedule-public-track.is-paste-target {
  outline: 3px solid rgba(24, 132, 128, .38);
  outline-offset: -3px;
  background-color: rgba(221, 242, 232, .42);
}