:root {
  --ink: #172124;
  --muted: #647176;
  --line: #d9e1df;
  --line-strong: #b9c8c5;
  --soft: #eef5f2;
  --paper: #ffffff;
  --surface: #f6f8f7;
  --accent: #0b6f78;
  --accent-deep: #064c54;
  --gold: #9a6b16;
  --danger: #a33a3a;
  --ok: #1f6e4c;
  --warn: #a86408;
  --shadow: 0 18px 42px rgba(20, 35, 38, .12);
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--surface);
  overflow: hidden;
}

header {
  height: 62px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
}
.topbar {
  height: 62px;
  width: 100%;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px;
}
.staff-main {
  max-width: none;
  height: calc(100vh - 62px);
  padding: 12px 14px;
  overflow: hidden;
}
.muted { color: var(--muted); font-size: 12px; line-height: 1.4; }

.staff-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 12px;
}
.planning-panel,
.control-panel,
section,
.stat,
.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.planning-panel,
.control-panel {
  min-height: 0;
  overflow: hidden;
}
.planning-panel {
  display: flex;
  flex-direction: column;
}
.control-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.section-head,
.panel-head {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.planning-head {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto auto;
}
.section-body { padding: 12px; }
.planning-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 10px;
}
.panel-content {
  min-height: 0;
  overflow: auto;
  padding: 10px;
}
.panel-content section {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.panel-content .section-head {
  padding: 0 0 9px;
  border-bottom: 0;
}
.panel-content .section-body {
  padding: 0;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 74px);
  gap: 7px;
}
.stat-strip div,
.stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
}
.stat-strip div {
  min-height: 42px;
  padding: 6px 8px;
}
.stat-strip strong,
.stat strong {
  display: block;
  color: var(--accent-deep);
  font-size: 18px;
  line-height: 1;
}
.stat-strip span,
.stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.stat { padding: 13px; min-height: 76px; }
.stat strong { font-size: 25px; margin-bottom: 4px; }

.grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stack { display: grid; gap: 10px; }
.actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.sheet-toolbar {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: end;
}
.tabbar {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfc;
}
.tabbar button {
  min-height: 34px;
  padding: 8px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
}
.tabbar button.active {
  color: var(--accent-deep);
  background: var(--soft);
  border-color: var(--line-strong);
}

button {
  border: 0;
  border-radius: 7px;
  padding: 9px 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.15;
}
button.secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
button.danger { background: var(--danger); }
button:hover { filter: brightness(.94); }
button:disabled { opacity: .5; cursor: not-allowed; }

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 9px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}
textarea { min-height: 64px; resize: vertical; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--muted);
  background: #f7faf9;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.excel-wrap {
  min-height: 0;
  height: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.excel-table { min-width: 1520px; }
.excel-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--line);
}
@media (min-width: 721px) {
  .excel-table th:first-child,
  .excel-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset -1px 0 0 var(--line);
  }
  .excel-table th:first-child {
    z-index: 3;
    background: #f7faf9;
  }
}
.excel-table input {
  min-width: 92px;
  padding: 6px 7px;
}
.excel-table .cell-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.excel-table .cell-rate {
  min-width: 64px;
  width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.excel-table tr:hover td { background: #fbfdfc; }
.contract-actions {
  align-items: flex-start;
  max-width: 330px;
}
.contract-actions button { white-space: nowrap; }

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.tag.ok { color: var(--ok); background: #eaf6ef; border-color: #bfdcca; }
.tag.warn { color: var(--warn); background: #fff6e8; border-color: #efd2a8; }
.tag.danger { color: var(--danger); background: #faeeee; border-color: #e5bdbd; }
.notice {
  padding: 10px;
  border: 1px solid #e5d2a8;
  border-radius: 8px;
  color: #614507;
  background: #fff9eb;
  font-size: 13px;
  line-height: 1.4;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.login section { width: min(440px, 100%); }
.checkline {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink);
}
.checkline input { width: auto; }
.hidden { display: none !important; }

@media (max-width: 1100px) {
  body { overflow: auto; }
  .staff-main { height: auto; min-height: calc(100vh - 62px); overflow: visible; }
  .staff-shell { grid-template-columns: 1fr; height: auto; }
  .control-panel { min-height: 520px; }
  .planning-head { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar, .grid, .grid3, .stats { display: grid; grid-template-columns: 1fr; }
  .sheet-toolbar { display: grid; align-items: stretch; }
  main, .staff-main { padding: 10px; }
  .tabbar { grid-template-columns: repeat(2, 1fr); }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
  td { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
  td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 700; }
}

/* Nouvelle interface cabinet */
body {
  background: #eef2f1;
}

.staff-main {
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 12px;
}

.app-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) 380px;
  gap: 12px;
}

.app-shell.excel-mode {
  grid-template-columns: 200px minmax(0, 1fr);
}

.app-shell.excel-mode .control-panel {
  display: none;
}

.app-shell.directory-mode .planning-head {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.app-shell.directory-mode .stat-strip {
  display: none;
}

.app-shell.excel-mode .planning-head {
  grid-template-columns: minmax(220px, 1fr) auto;
  padding: 10px 12px;
}

.app-shell.excel-mode .stat-strip {
  display: none;
}

.nav-rail,
.planning-panel,
.control-panel {
  border: 1px solid #d5dfdd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(20, 35, 38, .10);
}

.nav-rail {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 12px;
  background: #102a2d;
  color: #fff;
}

.rail-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.rail-brand span,
.rail-footer span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
}

.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #0b6f78;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-mark.small {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.nav-tabs {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 0;
}

.nav-tabs button {
  width: 100%;
  justify-content: flex-start;
  min-height: 39px;
  padding: 10px 11px;
  text-align: left;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  border: 1px solid transparent;
}

.nav-tabs button.active {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .20);
}

.rail-footer {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.user-block strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.full {
  width: 100%;
}

.planning-panel {
  min-width: 0;
}

.planning-head {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid #dbe4e2;
}

.planning-head h1 {
  font-size: 22px;
}

.head-actions {
  justify-content: flex-end;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(76px, 104px));
  gap: 7px;
}

.stat-strip div {
  min-height: 48px;
  padding: 8px;
  border-radius: 7px;
  background: #f7faf9;
}

.stat-strip strong {
  font-size: 15px;
  white-space: nowrap;
}

.app-shell:not(.directory-mode):not(.excel-mode) .planning-head {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.app-shell:not(.directory-mode):not(.excel-mode) .planning-head .stat-strip {
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.app-shell:not(.directory-mode):not(.excel-mode) .planning-head .head-actions {
  grid-column: 2;
  grid-row: 1;
}

.planning-body {
  padding: 10px;
}

.sheet-toolbar {
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #dbe4e2;
  border-radius: 8px;
  background: #f9fbfa;
}

.search-field {
  max-width: 280px;
}

.dashboard-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
}

.dashboard-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-page .dashboard-grid {
  flex: 1;
}

.planning-opening-alerts {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(0, 2.3fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e7b04d;
  border-radius: 8px;
  background: #fff8e8;
}

.planning-opening-alerts > div:first-child {
  display: grid;
  gap: 3px;
}

.planning-opening-alerts > div:first-child strong {
  color: #8a5700;
  font-size: 14px;
}

.planning-opening-alerts > div:first-child span {
  color: #715d39;
  font-size: 10px;
}

.planning-alert-dates {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.planning-alert-dates button {
  min-width: 112px;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border-color: #e4c78f;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.planning-alert-dates button span,
.planning-alert-dates button small {
  color: #8a5700;
  font-size: 9px;
}

.dashboard-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #d6e0de;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
}

.dashboard-panel.attention {
  background: #f8fbfa;
}

.dashboard-panel-head {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #dbe4e2;
}

.dashboard-panel-head h2 {
  font-size: 15px;
}

.dashboard-panel-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.todo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.metric-button {
  min-height: 82px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  padding: 12px;
  border: 1px solid #cfdcda;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.metric-button strong {
  font-size: 24px;
  color: var(--accent-deep);
}

.metric-button span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
}

.dashboard-shift {
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr .9fr 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid #dbe4e2;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.dashboard-shift span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.dashboard-shift span:first-child {
  display: grid;
  gap: 2px;
}

.empty-state {
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
}

.import-report {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #d6e0de;
  border-radius: 8px;
  background: #fff;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.report-grid span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #e2e9e7;
  border-radius: 7px;
  background: #f8fbfa;
  font-size: 20px;
  font-weight: 900;
  color: var(--accent-deep);
}

.report-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.report-errors {
  display: grid;
  gap: 5px;
  max-height: 160px;
  overflow: auto;
}

.report-errors div {
  padding: 7px 8px;
  border: 1px solid #e5bdbd;
  border-radius: 6px;
  background: #fff7f7;
  color: var(--danger);
  font-size: 12px;
}

.backup-card a {
  text-decoration: none;
}

.quick-months {
  display: flex;
  gap: 6px;
  align-items: end;
  flex-wrap: wrap;
}

.quick-months button {
  padding: 8px 10px;
}

.excel-wrap {
  border-radius: 8px;
}

.excel-table {
  min-width: 1500px;
  font-size: 12px;
}

.excel-table th,
.excel-table td {
  padding: 6px 7px;
}

.excel-table input {
  min-width: 86px;
  height: 31px;
  border-radius: 6px;
}

.contract-actions {
  max-width: 310px;
}

.contract-actions button {
  padding: 7px 9px;
}

.cancel-inline {
  width: 100%;
  margin-top: 7px;
  min-height: 28px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 800;
}

.shift-detail {
  display: grid;
  gap: 10px;
}

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

.detail-top strong,
.detail-top span {
  display: block;
}

.detail-top span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.detail-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compact-form {
  padding: 10px;
}

.detail-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbe4e2;
  border-radius: 8px;
  background: #fbfcfc;
}

.danger-zone {
  border-color: #e5bdbd;
  background: #fff7f7;
}

.detail-history {
  display: grid;
  gap: 6px;
  max-height: 190px;
  overflow: auto;
}

.detail-history div {
  display: grid;
  gap: 2px;
  padding: 7px;
  border: 1px solid #e2e9e7;
  border-radius: 6px;
  background: #fff;
}

.detail-history span,
.detail-history small {
  color: var(--muted);
  font-size: 11px;
}

.directory-wrap {
  min-height: 0;
  height: 100%;
  overflow: auto;
  border: 1px solid #d6e0de;
  border-radius: 8px;
  background: #fff;
}

.directory-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.directory-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  background: #102a2d;
  color: #fff;
  text-align: left;
}

.directory-table td {
  padding: 12px;
  border-bottom: 1px solid #e2e9e7;
}

.directory-table input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid #dbe4e2;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}

.directory-table tr:nth-child(even) td {
  background: #f8fbfa;
}

.directory-table strong {
  color: var(--accent-deep);
}

.control-panel {
  display: grid;
  grid-template-rows: auto 1fr;
}

.panel-head {
  padding: 14px;
}

.panel-content {
  padding: 12px;
}

.form-card,
.import-box,
.mini-table {
  border: 1px solid #dbe4e2;
  border-radius: 8px;
  background: #fbfcfc;
  padding: 12px;
}

.import-box {
  margin-top: 12px;
  background: #fff9eb;
  border-color: #ead5a8;
}

.mini-table {
  padding: 0;
  overflow: hidden;
}

.mini-table table {
  font-size: 12px;
}

.mini-table td {
  padding: 10px;
}

.weekly-workspace {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
}

.weekly-scroll {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 0;
  padding-right: 0;
}

.week-sheet {
  border: 1px solid #d6e0de;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.week-title {
  padding: 7px 10px;
  background: #102a2d;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.week-title strong {
  color: #c9e9e6;
  font-size: 12px;
}

.week-table {
  display: grid;
  grid-template-columns: 46px repeat(7, minmax(0, 1fr));
  grid-template-rows: 46px repeat(4, minmax(136px, 1fr));
  gap: 5px;
  padding: 5px;
  background: #d7e1df;
  min-width: 0;
  min-height: 0;
}

.week-corner,
.week-col-head,
.week-row-label,
.week-line-cell {
  border: 1px solid #cfdcda;
  border-radius: 7px;
}

.week-corner,
.week-col-head {
  min-height: 0;
  background: #f8fbfa;
}

.week-corner {
  border-left: 0;
}

.week-col-head {
  padding: 5px 6px;
}

.week-col-head strong,
.week-col-head span {
  display: block;
}

.week-col-head strong {
  font-size: 12px;
  text-transform: capitalize;
}

.week-col-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.week-row-label {
  min-height: 0;
  display: grid;
  place-items: center;
  background: #fbfcfc;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.week-line-cell {
  min-height: 0;
  background: #fff;
  display: grid;
  gap: 3px;
  padding: 5px;
  box-shadow: 0 3px 10px rgba(20, 35, 38, .08);
  border-left-width: 4px;
}

.week-line-cell.is-filled {
  background: #ffffff;
  border-color: #aebfbc;
  box-shadow: 0 5px 14px rgba(20, 35, 38, .13);
}

.guard-tone-0 { border-left-color: #0b6f78; }
.guard-tone-1 { border-left-color: #8b6f1d; }
.guard-tone-2 { border-left-color: #5e6fa8; }
.guard-tone-3 { border-left-color: #8a4f6d; }

.guard-chip {
  display: flex;
  align-items: center;
  min-height: 18px;
  color: var(--accent-deep);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.week-col-head.outside-month,
.week-line-cell.outside-month {
  background: #f3f6f5;
}

.week-line-cell select,
.week-line-cell input {
  width: 100%;
  min-width: 0;
  height: 25px;
  border: 1px solid #dbe4e2;
  border-radius: 5px;
  padding: 3px 5px;
  font-size: 10.5px;
  background: #fff;
}

.week-line-cell select:focus,
.week-line-cell input:focus {
  outline: 2px solid rgba(11, 111, 120, .28);
  outline-offset: 0;
}

.time-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.time-pair input {
  padding: 3px;
}

.line-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  align-items: center;
}

.rate-toggle {
  height: 23px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 4px;
  border: 1px solid #c7d8d4;
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.rate-toggle input {
  width: 42px;
  min-width: 0;
  height: 18px;
  padding: 1px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  text-align: right;
}

.week-navigator {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.week-navigator button {
  min-height: 32px;
  padding: 7px 8px;
  border: 1px solid #d6e0de;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
}

.week-navigator button.active {
  background: #0b6f78;
  color: #fff;
  border-color: #0b6f78;
}

.accounting-footer {
  min-height: 0;
}

.accounting-footer summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}

.excel-wrap.compact {
  max-height: 220px;
}

.format-card {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #cddbd8;
  border-radius: 8px;
  background: #eef5f2;
  font-size: 12px;
}

.format-card strong {
  color: var(--accent-deep);
  font-size: 13px;
}

.format-card span {
  color: var(--muted);
}

.format-card code {
  display: block;
  padding: 7px 8px;
  border: 1px solid #d6e0de;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #eef2f1;
}

.login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid #d5dfdd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(20, 35, 38, .16);
}

.login-card p {
  margin: -6px 0 4px;
  color: var(--muted);
}

@media (max-width: 1180px) {
  body { overflow: auto; }
  .staff-main { height: auto; min-height: 100vh; }
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .control-panel { grid-column: 2; min-height: 520px; }
  .planning-head { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(3, minmax(80px, 1fr)); }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .nav-rail,
  .control-panel { grid-column: auto; }
  .nav-tabs { grid-template-columns: repeat(2, 1fr); }
  .planning-head { padding: 12px; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .dashboard-grid {
    height: auto;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(240px, auto);
  }

  .dashboard-panel.attention {
    min-height: 340px;
  }
}

/* Choix des gardes par les remplacants */
.tag.info {
  color: #245d83;
  background: #edf6ff;
  border-color: #bed8eb;
}

.week-line-cell {
  position: relative;
}

.week-line-cell.is-self-bookable {
  background: #f2fbf7;
  border-color: #83bca0;
}

.week-line-cell.needs-planning {
  background: #fff8e8;
  border-color: #e7b04d;
}

.week-line-cell.is-urgent-booking {
  background: #fff1f1;
  border-color: #d84f4f;
}

.line-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.line-tools .automatic-bookable,
.line-tools .manual-assignment {
  gap: 3px;
  padding: 2px 3px;
  font-size: 9px;
}

.automatic-bookable,
.manual-assignment {
  height: 23px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

.automatic-bookable {
  border: 1px solid #a7d0ba;
  background: #edf8f2;
  color: #1f6e4c;
}

.manual-assignment {
  border: 1px solid #cbd3dc;
  background: #f5f7f9;
  color: #596779;
}

.detail-booking-rule {
  height: auto;
  min-height: 34px;
  justify-content: flex-start;
  padding: 8px 10px;
}

.booking-line-status {
  position: absolute;
  top: 6px;
  right: 6px;
  max-width: 56%;
  overflow: hidden;
  color: #1f6e4c;
  font-size: 8.5px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookable-count {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.bookable-count.full {
  color: var(--ok);
}

.bookable-count.warning {
  color: #a56400;
}

.booking-settings-card {
  border-color: #a7d0ba;
  background: #f4fbf7;
}

.booking-rule-fixed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.booking-rule-fixed span {
  padding: 7px;
  border: 1px solid #c9e2d4;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 10px;
  text-align: center;
}

.urgent-admin-card {
  border-color: #e4b3b3;
  background: #fff6f6;
}

.urgent-admin-item {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid #efd1d1;
}

.urgent-admin-item small {
  color: var(--danger);
}

.urgent-broadcast-card {
  border-color: #e0a2a2;
  background: #fff3f3;
}

.substitute-preview-launcher {
  border-color: #9ec5d4;
  background: #eef8fc;
}

.substitute-preview-launcher > strong {
  color: #245d83;
}

.urgent-broadcast-card > strong {
  color: #a82828;
}

.active-urgent-shift {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid #e4b3b3;
  border-radius: 7px;
  background: #fff;
}

.active-urgent-shift small {
  color: #923535;
}

.substitute-shell {
  height: calc(100vh - 98px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
}

.substitute-hero {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #064c54, #0b6f78);
  box-shadow: 0 16px 34px rgba(6, 76, 84, .2);
}

.substitute-hero h1 {
  margin-top: 4px;
  font-size: 26px;
}

.substitute-hero p {
  margin: 6px 0 0;
  color: #d5edeb;
  font-size: 13px;
}

.eyebrow {
  color: #b9e0dc;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.substitute-stats {
  display: flex;
  gap: 8px;
}

.substitute-stats span {
  min-width: 92px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .09);
  font-size: 11px;
}

.substitute-stats strong {
  display: block;
  margin-bottom: 2px;
  font-size: 20px;
}

.substitute-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.substitute-tabs button {
  position: relative;
  min-height: 38px;
  background: transparent;
  color: var(--muted);
}

.substitute-tabs button.active {
  color: #fff;
  background: var(--accent);
}

.substitute-tabs b {
  position: absolute;
  top: 3px;
  right: 5px;
  min-width: 17px;
  padding: 2px 4px;
  border-radius: 999px;
  color: #fff;
  background: var(--danger);
  font-size: 9px;
}

.substitute-content {
  min-height: 0;
  overflow: auto;
  padding: 1px 3px 12px;
}

.substitute-preview-notice {
  margin-bottom: 12px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #8eb9cf;
  border-radius: 9px;
  color: #244f6b;
  background: #edf7fc;
}

.substitute-preview-notice strong {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: #33759a;
  font-size: 10px;
  text-transform: uppercase;
}

.substitute-preview-notice span {
  font-size: 11px;
  font-weight: 700;
}

.preview-readonly button,
.preview-readonly input,
.preview-readonly select,
.preview-readonly textarea {
  cursor: not-allowed;
}

.urgent-booking-banner {
  margin-bottom: 12px;
  padding: 13px;
  border: 1px solid #d84f4f;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #a91f2c, #d34444);
  box-shadow: 0 12px 28px rgba(169, 31, 44, .2);
}

.urgent-banner-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.urgent-banner-head > span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #a91f2c;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
}

.urgent-banner-head > div {
  display: grid;
  gap: 2px;
}

.urgent-banner-head small {
  color: #ffe3e3;
}

.urgent-banner-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.urgent-banner-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
}

.urgent-banner-list article > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.urgent-banner-list article span,
.urgent-banner-list article small {
  color: #fff1f1;
  font-size: 10px;
}

.urgent-banner-list button {
  color: #a91f2c;
  background: #fff;
}

.substitute-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.substitute-panel {
  min-width: 0;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(20, 35, 38, .08);
}

.substitute-panel-head {
  min-height: 34px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.substitute-panel-head h2 {
  font-size: 17px;
}

.substitute-panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.link-button {
  padding: 0;
  color: var(--accent);
  background: transparent;
  font-size: 12px;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.button-link.secondary {
  color: var(--ink);
  border-color: var(--line);
  background: #fff;
}

.substitute-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.substitute-action-grid button {
  min-height: 78px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid #d7e5e2;
  color: var(--ink);
  background: #f7fbfa;
}

.substitute-action-grid strong {
  color: var(--accent-deep);
  font-size: 24px;
}

.substitute-action-grid span {
  color: var(--muted);
  font-size: 11px;
}

.available-preview,
.notification-panel {
  min-height: 260px;
}

.booking-preview-list,
.notification-list,
.my-shift-list,
.contract-list {
  display: grid;
  gap: 8px;
}

.booking-calendar-panel {
  overflow: hidden;
}

.calendar-title {
  align-items: start;
}

.privacy-note {
  max-width: 250px;
  padding: 7px 9px;
  border-radius: 7px;
  color: #44636a;
  background: #eef5f4;
  font-size: 10px;
}

.booking-filter-bar {
  display: grid;
  grid-template-columns: 170px repeat(3, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #dce6e4;
  border-radius: 8px;
  background: #f8fbfa;
}

.booking-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 5px;
  overflow-x: auto;
}

.booking-weekday {
  padding: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.booking-day {
  min-height: 150px;
  padding: 6px;
  border: 1px solid #dce4e2;
  border-radius: 8px;
  background: #fbfcfc;
}

.booking-day.today {
  border: 2px solid var(--accent);
}

.booking-day.outside {
  min-height: 0;
  border: 0;
  background: transparent;
}

.booking-day-head {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.booking-day-head strong {
  font-size: 15px;
}

.booking-day-head span {
  color: var(--muted);
  font-size: 10px;
  text-transform: capitalize;
}

.booking-day-head b {
  margin-left: auto;
  color: var(--ok);
  font-size: 9px;
}

.booking-day-slots {
  display: grid;
  gap: 6px;
}

.booking-slot {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid #d7dfdd;
  border-left: 4px solid #95a5a2;
  border-radius: 7px;
  background: #fff;
}

.booking-slot.available { border-left-color: #2d9467; background: #f2fbf6; }
.booking-slot.urgent { border-color: #d84f4f; border-left-color: #d84f4f; background: #fff1f1; }
.booking-slot.urgent .booking-slot-top b,
.urgent-slot-message { color: #b12935 !important; font-weight: 900; }
.booking-slot.upcoming { border-left-color: #477a9e; background: #f4f8fb; }
.booking-slot.mine { border-left-color: #d08a1f; background: #fff8ed; }
.booking-slot.taken,
.booking-slot.closed { opacity: .72; background: #f1f3f3; }

.booking-slot-top {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  font-size: 10px;
  font-weight: 900;
}

.booking-slot-top b {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.booking-slot > strong {
  overflow: hidden;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-slot small {
  color: var(--muted);
  font-size: 9px;
}

.booking-slot button {
  min-height: 27px;
  margin-top: 3px;
  padding: 5px 7px;
  font-size: 9.5px;
}

.waitlist-badge,
.slot-confirmed {
  color: var(--gold) !important;
  font-weight: 900;
}

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

.booking-legend span::before {
  content: '';
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 4px;
  border-radius: 50%;
  background: #95a5a2;
}

.booking-legend .available::before { background: #2d9467; }
.booking-legend .upcoming::before { background: #477a9e; }
.booking-legend .mine::before { background: #d08a1f; }

.substitute-my-grid,
.substitute-profile-grid,
.substitute-exchange-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.substitute-my-grid > :first-child,
.substitute-exchange-grid > :first-child {
  grid-row: span 2;
}

.my-shift-card {
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid #dbe4e2;
  border-radius: 8px;
  background: #fff;
}

.my-shift-card.compact {
  grid-template-columns: 125px minmax(150px, 1fr) auto;
}

.my-shift-date,
.my-shift-doctor {
  display: grid;
  gap: 3px;
}

.my-shift-date span,
.my-shift-doctor span {
  color: var(--muted);
  font-size: 11px;
}

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

.contract-list > div,
.notification-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dce4e2;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}

.contract-list span,
.notification-item span {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
}

.notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.notification-item strong,
.notification-item span {
  grid-column: 1;
}

.notification-item small,
.notification-item .tag {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.notification-item.unread {
  border-left: 4px solid var(--accent);
  background: #f2f9f8;
}

.substitute-empty {
  padding: 16px;
  border: 1px dashed #cdd8d6;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.past-shifts summary {
  cursor: pointer;
  font-weight: 800;
}

.past-shifts[open] summary {
  margin-bottom: 12px;
}

.profile-readonly {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #f3f7f6;
}

.profile-readonly span {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
}

fieldset {
  margin: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.weekday-checks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.weekday-checks label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 3px;
  border: 1px solid #d9e1df;
  border-radius: 6px;
  color: var(--ink);
  background: #fff;
  font-size: 10px;
}

.weekday-checks input {
  width: 13px;
  height: 13px;
}

.document-checklist {
  display: grid;
  gap: 8px;
}

.document-checklist > div {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dce4e2;
  border-radius: 8px;
}

.document-checklist span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
}

.document-checklist .complete span { color: #fff; background: var(--ok); }
.document-checklist .missing span { color: #fff; background: var(--warn); }

.directory-eligibility {
  min-width: 245px;
}

.directory-eligibility small,
.directory-eligibility label {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
}

.directory-eligibility input,
.directory-eligibility textarea {
  width: 100%;
  margin-top: 3px;
}

.booking-eligibility-notice,
.dossier-status {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid;
  border-radius: 10px;
}

.booking-eligibility-notice {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 12px;
}

.booking-eligibility-notice strong,
.booking-eligibility-notice span {
  grid-column: 1;
}

.booking-eligibility-notice button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.booking-eligibility-notice.blocked,
.dossier-status.blocked {
  border-color: #efb7b7;
  background: #fff1f1;
  color: #882121;
}

.booking-eligibility-notice.override,
.dossier-status.override {
  border-color: #e4c277;
  background: #fff8df;
  color: #765100;
}

.dossier-status.complete {
  border-color: #a8d9c7;
  background: #edf9f4;
  color: #176047;
}

.dossier-status {
  margin-bottom: 12px;
}

.booking-block-reason {
  color: #9b2c2c !important;
  font-weight: 700;
}

.booking-modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(17 37 34 / 68%);
  backdrop-filter: blur(3px);
}

.booking-modal {
  width: min(620px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(0 0 0 / 28%);
}

.booking-modal-head,
.booking-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.booking-modal-head h2 {
  margin: 4px 0 0;
}

.booking-modal-head .icon-button {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 24px;
}

.booking-recap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.booking-recap > div {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7faf9;
}

.booking-recap > div:first-child,
.booking-recap > div:nth-child(3) {
  grid-column: 1 / -1;
}

.booking-recap span,
.booking-audit-note {
  color: var(--muted);
  font-size: 11px;
}

.booking-commitment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 2px solid #b9d7d1;
  border-radius: 10px;
  color: var(--ink);
  background: #f2f9f7;
  cursor: pointer;
}

.booking-commitment input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.booking-commitment span {
  display: grid;
  gap: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.booking-audit-note {
  margin: 8px 0 18px;
}

.booking-modal-actions {
  justify-content: flex-end;
}

.contract-automation-card,
.contract-editor-empty {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid #b9d8d1;
  border-radius: 10px;
  background: #f2faf7;
}

.contract-automation-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.contract-editor-page {
  display: grid;
  gap: 14px;
  width: min(1040px, 100%);
  margin: 0 auto;
}

.contract-editor-toolbar,
.contract-editor-footer,
.contract-editor-warning,
.contract-editor-valid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 11px;
}

.contract-editor-toolbar {
  border: 1px solid var(--line);
  background: #fff;
}

.contract-editor-toolbar > label {
  flex: 1;
  max-width: 680px;
}

.contract-auto-state {
  display: grid;
  gap: 2px;
  text-align: right;
}

.contract-auto-state span,
.contract-auto-state small {
  color: var(--muted);
  font-size: 10px;
}

.contract-editor-warning,
.contract-editor-valid {
  align-items: start;
  flex-direction: column;
  gap: 4px;
}

.contract-editor-warning {
  border: 1px solid #e7c57d;
  color: #6d4b00;
  background: #fff8df;
}

.contract-editor-valid {
  border: 1px solid #a8d9c7;
  color: #176047;
  background: #edf9f4;
}

.contract-editor-form {
  display: grid;
  gap: 14px;
}

.contract-editor-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgb(30 55 50 / 5%);
}

.contract-section-title {
  display: flex;
  gap: 10px;
  align-items: start;
  margin-bottom: 16px;
}

.contract-section-title > span {
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-weight: 900;
}

.contract-section-title h2,
.contract-section-title p {
  margin: 0;
}

.contract-section-title h2 {
  font-size: 16px;
}

.contract-section-title p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

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

.contract-form-grid .wide {
  grid-column: span 2;
}

.contract-editor-footer {
  position: sticky;
  z-index: 4;
  bottom: 0;
  border: 1px solid #b9d8d1;
  background: #eef8f5;
  box-shadow: 0 -5px 20px rgb(30 55 50 / 10%);
}

.contract-editor-footer > div:first-child {
  display: grid;
  gap: 3px;
}

.contract-editor-footer span {
  color: var(--muted);
  font-size: 10px;
}

.contract-legal-note {
  color: #7a4d13;
  font-size: 9px;
}

.contract-download-links {
  display: flex !important;
  flex-direction: row;
  gap: 5px;
}

@media (max-width: 900px) {
  .planning-opening-alerts { grid-template-columns: 1fr; }
  .substitute-shell { height: auto; }
  .substitute-content { overflow: visible; }
  .substitute-dashboard-grid,
  .substitute-my-grid,
  .substitute-profile-grid,
  .substitute-exchange-grid { grid-template-columns: 1fr; }
  .substitute-my-grid > :first-child,
  .substitute-exchange-grid > :first-child { grid-row: auto; }
  .booking-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-shift-card,
  .my-shift-card.compact { grid-template-columns: 130px minmax(0, 1fr); }
  .my-shift-actions { grid-column: 1 / -1; justify-content: start; }
  .contract-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contract-editor-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  header,
  .topbar { height: 76px; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .topbar > div { min-width: 0; }
  .topbar h1 { max-width: 245px; font-size: 16px; line-height: 1.1; }
  .topbar .muted { margin-top: 3px; font-size: 10px; }
  .topbar > button { flex: 0 0 auto; padding: 8px; font-size: 10px; }
  main { padding: 10px; }
  .substitute-hero { align-items: start; flex-direction: column; }
  .substitute-stats { width: 100%; }
  .substitute-stats span { min-width: 0; flex: 1; }
  .substitute-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .substitute-tabs button:last-child { grid-column: 1 / -1; }
  .urgent-banner-list article { grid-template-columns: 1fr; }
  .urgent-banner-list button { width: 100%; }
  .substitute-preview-notice { align-items: flex-start; flex-direction: column; }
  .booking-filter-bar { grid-template-columns: 1fr; }
  .booking-calendar { grid-template-columns: 1fr; overflow: visible; }
  .booking-weekday,
  .booking-day.outside,
  .booking-day:not(:has(.booking-slot)) { display: none; }
  .booking-day { min-height: 0; }
  .calendar-title { flex-direction: column; }
  .privacy-note { max-width: none; }
  .my-shift-card,
  .my-shift-card.compact { grid-template-columns: 1fr; }
  .my-shift-actions { grid-column: auto; }
  .weekday-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .profile-readonly { flex-direction: column; }
  .booking-rule-fixed { grid-template-columns: 1fr; }
  .booking-eligibility-notice { grid-template-columns: 1fr; }
  .booking-eligibility-notice button { grid-column: 1; grid-row: auto; width: 100%; }
  .booking-modal-backdrop { align-items: end; padding: 0; }
  .booking-modal { width: 100%; max-height: 94vh; padding: 18px; border-radius: 16px 16px 0 0; }
  .booking-recap { grid-template-columns: 1fr; }
  .booking-recap > div:first-child,
  .booking-recap > div:nth-child(3) { grid-column: auto; }
  .booking-modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .contract-editor-toolbar { align-items: stretch; flex-direction: column; }
  .contract-auto-state { text-align: left; }
  .contract-form-grid { grid-template-columns: 1fr; }
  .contract-form-grid .wide { grid-column: auto; }
  .contract-editor-section { padding: 14px; }
  .contract-editor-footer .actions { width: 100%; display: grid; grid-template-columns: 1fr; }
}