:root { --ink: #243133; --muted: #647477; --line: #e1e8e5; --accent: #18745e; --accent-deep: #125b4a; --surface: #f4f7f6; --shadow: none; }
body { font-family: 'Segoe UI', Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 6px; }
button svg { flex: 0 0 auto; }
button:focus-visible, a:focus-visible { outline: 3px solid #438eb1; outline-offset: 2px; }
.staff-main { height: 100dvh; padding: 0; }
.app-shell, .app-shell.excel-mode { height: 100%; grid-template-columns: 210px minmax(0, 1fr); gap: 0; position: relative; }
.nav-rail { border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; background: #fff; padding: 20px 12px 12px; min-width: 0; }
.rail-brand { padding: 0 6px 20px; align-items: center; }
.rail-brand strong { font-size: 14px; line-height: 1.4; }
.rail-brand, .rail-brand strong, .user-block strong { color: var(--ink); }
.rail-brand span, .user-block span { color: var(--muted); }
.brand-mark { border-radius: 8px; background: #186a57; color: white; box-shadow: none; }
.nav-tabs { gap: 4px; }
.nav-tabs button { justify-content: flex-start; min-height: 42px; padding: 10px 12px; color: #566567; background: transparent; border: 1px solid transparent; font-size: 13px; font-weight: 600; }
.nav-tabs button.active { color: #12634e; background: #e9f4ee; border-color: #deece3; }
.nav-tabs button:hover { background: #f2f6f4; }
.rail-footer { border-top: 1px solid var(--line); }
.user-block strong, .user-block span { overflow-wrap: anywhere; }
.planning-panel { border: 0; border-radius: 0; background: var(--surface); box-shadow: none; min-width: 0; }
.planning-head, .app-shell.directory-mode .planning-head, .app-shell.excel-mode .planning-head, .app-shell:not(.directory-mode):not(.excel-mode) .planning-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px 22px; min-height: 77px; background: #fff; gap: 10px; border-bottom: 1px solid var(--line); }
.planning-head h1 { font-size: 20px; }
.planning-head .head-actions { margin-left: auto; flex-wrap: wrap; }
.planning-head .stat-strip { display: none !important; }
.release-label { color: #6e7d77; font-size: 11px; padding-right: 7px; }
.planning-body { padding: 16px 20px; min-width: 0; min-height: 0; overflow: auto; }
.control-panel, .app-shell.excel-mode .control-panel { display: none; }
.app-shell.tool-open .control-panel { display: flex; flex-direction: column; position: absolute; z-index: 20; inset: 77px 0 0 auto; width: 370px; max-width: calc(100% - 12px); background: #fff; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: -12px 0 36px #2038311a; }
.control-panel .panel-content { overflow: auto; padding: 16px; }
.control-panel .panel-content > button:first-child { margin-bottom: 16px; }
.planning-panel section, .dashboard-grid > section, .dashboard-workspace section { box-shadow: none; border-radius: 0; }
.dashboard-grid { gap: 16px; }
.metric-button { border-radius: 6px; border: 1px solid var(--line); box-shadow: none; }
.todo-grid { gap: 6px; padding: 8px; }
.todo-grid .metric-button { min-height: 55px; padding: 7px 10px; gap: 2px; }
.todo-grid .metric-button strong { font-size: 20px; }
.todo-grid .metric-button span { font-size: 10px; }
.directory-wrap { min-width: 0; overflow: auto; }
.directory-table { background: white; }
.directory-table th { background: #eef3f0; color: #52645c; font-size: 11px; text-transform: none; }
.directory-table td { vertical-align: top; padding: 10px 8px; font-size: 12px; }
.directory-table input, .directory-table select { min-height: 32px; border-radius: 4px; }
.workflow-workspace { min-width: 0; margin: 0 0 20px; }
.workflow-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; }
.workflow-toolbar h2 { font-size: 15px; }
.workflow-toolbar .actions { font-size: 12px; }
.workflow-table-wrap { overflow: auto; min-width: 0; border: 1px solid var(--line); background: white; }
.wf-icon { width: 34px; height: 34px; padding: 0; flex-shrink: 0; }
.availability-table { border-collapse: collapse; width: 100%; table-layout: fixed; min-width: 790px; font-size: 12px; }
.availability-table th, .availability-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 10px 7px; vertical-align: top; overflow-wrap: anywhere; }
.availability-table th { background: #f3f6f4; font-weight: 600; text-align: left; }
.availability-table th:first-child { width: 145px; }
.availability-entry { margin-bottom: 6px; padding: 6px 7px; border-left: 3px solid #35956b; background: #eef8f1; display: flex; align-items: start; justify-content: space-between; gap: 2px; font-size: 11px; }
.availability-entry.unavailable { background: #fcefeb; border-color: #c47a69; }
.availability-entry small { display: block; margin-top: 3px; color: #5c6864; font-size: 10px; }
.availability-entry .wf-icon { width: 21px; height: 21px; color: #687572; background: transparent; border: none; }
.availability-shift { padding: 5px 7px; color: #376f98; background: #eef5fb; font-size: 10px; margin: 4px 0; }
.availability-form { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)) repeat(2, minmax(100px, 1fr)) minmax(130px, 1fr) auto; gap: 10px; align-items: end; padding: 0 0 20px; }
.availability-form label { min-width: 0; }
.availability-form input, .availability-form select { width: 100%; }
.workflow-warning { border-left: 3px solid #c47a69; padding: 10px; background: #fcefeb; color: #8b4737; font-size: 12px; }
.workspace-emails .planning-body { display: block; }
.workspace-emails .workflow-workspace h2 { margin-bottom: 12px; }
.week-title { background: #edf3ef; color: #355a49; border-bottom: 1px solid #dce6df; }
.week-title strong { color: #5c796a; }
.week-table { grid-template-columns: 29px repeat(7, minmax(0, 1fr)); grid-template-rows: 42px repeat(4, minmax(128px, 1fr)); background: #e9eeeb; gap: 6px; padding: 6px; }
.week-line-cell, .week-line-cell.is-filled { box-shadow: none; border-radius: 5px; border: 1px solid #d7e2da; border-top: 3px solid #38977b; padding: 5px; }
.guard-tone-1, .week-line-cell.guard-tone-1.is-filled { border-top-color: #6594ba; background: #f7fafd; }
.guard-tone-2, .week-line-cell.guard-tone-2.is-filled { border-top-color: #c57e68; background: #fffaf8; }
.guard-tone-3, .week-line-cell.guard-tone-3.is-filled { border-top-color: #ad829f; background: #fdf9fc; }
.weekly-scroll { overflow: auto; }
.week-sheet { min-height: 607px; border-radius: 0; }
.week-line-cell select { font-size: 11px; }
.portal-mode { overflow: auto; }
.portal-mode main { max-width: 1400px; }
.portal-mode .substitute-hero { border: 0; border-radius: 0; background: #fff; color: var(--ink); box-shadow: none; }
.substitute-hero h1 { font-size: 24px; }
.substitute-hero p { color: var(--muted); }
.substitute-tabs { flex-wrap: wrap; }
.login-shell { min-height: 100dvh; background: #f0f5f2; }
.login-card { width: 430px; max-width: calc(100vw - 32px); box-shadow: 0 12px 40px #1b423d0d; border: 1px solid #dce7df; border-radius: 8px; }
.login-card h1 { font-size: 24px; }
.login-card input { height: 43px; }
.directory-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.directory-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.directory-toolbar select { min-width: 150px; width: auto; }
.directory-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 74px; }
.directory-actions .wf-icon { flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; }
.directory-actions .directory-delete { color: #ac3e39; border-color: #edceca; background: #fff7f6; }
.directory-actions .directory-delete:hover { color: #832822; background: #fde4df; }
@media (min-width: 761px) {
  .workspace-substitutes .directory-table { min-width: 1370px; }
  .workspace-substitutes .directory-table th:first-child { min-width: 165px; }
  .workspace-substitutes .directory-table th:nth-child(3) { min-width: 200px; }
  .workspace-substitutes .directory-table th:nth-child(5) { min-width: 110px; }
}
@media (max-height: 810px) and (min-width: 1100px) {
  .planning-head, .app-shell.directory-mode .planning-head, .app-shell.excel-mode .planning-head { padding: 10px 18px; min-height: 65px; }
  .planning-body { padding: 10px 14px; }
  .weekly-workspace { gap: 5px; }
  .weekly-workspace .sheet-toolbar { margin: 0; padding: 5px 7px; gap: 5px; }
  .sheet-toolbar label { font-size: 10px; gap: 3px; }
  .sheet-toolbar input, .sheet-toolbar select, .sheet-toolbar button { min-height: 29px; height: 29px; padding: 4px 7px; font-size: 11px; }
  .week-sheet { min-height: 482px; }
  .week-table { grid-template-rows: 34px repeat(4, minmax(99px, 1fr)); gap: 3px; padding: 3px; }
  .week-line-cell { gap: 1px; padding: 3px; }
  .week-line-cell select, .week-line-cell input { height: 19px; font-size: 10px; padding: 1px 3px; }
  .guard-chip { min-height: 12px; font-size: 9px; }
  .rate-toggle, .automatic-bookable, .manual-assignment { min-height: 17px; height: 17px; padding: 1px 2px; }
}
.rate-toggle .rate-label { display: none; }
.week-line-cell .rate-toggle input { width: 30px; min-width: 30px; height: 16px; padding: 0; text-align: center; appearance: textfield; }
.week-line-cell .rate-toggle input::-webkit-inner-spin-button, .week-line-cell .rate-toggle input::-webkit-outer-spin-button { appearance: none; margin: 0; }
@media (max-width: 1100px) {
  .app-shell, .app-shell.excel-mode { grid-template-columns: 180px minmax(0, 1fr); }
  .nav-rail { padding: 14px 8px; }
  .nav-tabs button { font-size: 12px; padding: 9px; }
  .planning-head { padding: 14px; }
  .planning-body { padding: 12px; }
  .availability-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { overflow: auto; }
  .staff-main { height: auto; min-height: 100dvh; }
  .app-shell, .app-shell.excel-mode { display: flex; flex-direction: column; min-height: 100dvh; }
  .nav-rail { border: 0; border-bottom: 1px solid var(--line); padding: 10px; }
  .rail-brand { padding: 0 4px 10px; }
  .nav-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .nav-tabs button { white-space: normal; justify-content: flex-start; min-width: 0; gap: 5px; font-size: 11px; padding: 7px 4px; }
  .nav-tabs button svg { width: 15px; }
  .rail-footer { display: none; }
  .planning-head, .app-shell.directory-mode .planning-head, .app-shell.excel-mode .planning-head { padding: 14px 12px; min-height: auto; }
  .planning-head h1 { font-size: 18px; }
  .planning-head .head-actions { margin-left: 0; }
  .planning-panel { min-height: 65dvh; }
  .planning-body { overflow: visible; }
  .app-shell.tool-open .control-panel { position: fixed; top: 0; width: 370px; max-width: 100%; height: 100dvh; }
  .week-table { min-width: 940px; }
  .weekly-scroll { overflow: auto; }
  .workflow-toolbar .actions { flex-wrap: wrap; }
  .availability-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-label { display: none; }
  .portal-mode main { padding: 12px; }
}