:root {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #17212b;
  background: #f3f6f8;
  --page: #f3f6f8;
  --panel: #ffffff;
  --panel-soft: #eef5f8;
  --text: #17212b;
  --muted: #687783;
  --border: #d6e3ea;
  --navy: #092333;
  --navy-2: #123b52;
  --blue: #247fc1;
  --blue-dark: #16679f;
  --cyan: #35b9df;
  --absence: #fff1dc;
  --absence-text: #99601e;
  --shadow: 0 5px 18px #19344212;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--page); color: var(--text); }
.topbar {
  min-height: 66px; padding: 0 5vw; display: flex; align-items: center;
  gap: 32px; background: var(--navy); color: #fff;
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 760; }
.uss-mark {
  color: #6edcf0; font-size: 12px; letter-spacing: 1.5px; border: 1px solid #377a91;
  border-radius: 5px; padding: 3px 5px; margin-right: 3px;
}
nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
nav a { color: #bfd3dc; text-decoration: none; }
nav a:hover { color: #fff; }
.theme-toggle {
  display: flex; align-items: center; gap: 7px; background: #123348; color: #d8eef5;
  border: 1px solid #3d6576; border-radius: 7px; padding: 8px 11px; cursor: pointer;
}
main { max-width: 1600px; margin: 0 auto; padding: 34px 5vw 70px; }
.page-head { margin-bottom: 22px; }
.eyebrow { margin: 0 0 5px; color: var(--blue-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; }
h1 { margin: 0 0 4px; font-size: 32px; }
.muted { margin: 0; color: var(--muted); }
.plan-tabs, .calendar-controls {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px;
}
.plan-tabs a, .calendar-controls a {
  color: var(--blue-dark); text-decoration: none; border: 1px solid var(--border);
  background: var(--panel); border-radius: 7px; padding: 9px 13px; font-weight: 700;
}
.plan-tabs a.active, .calendar-controls a:hover {
  color: #fff; background: var(--blue); border-color: var(--blue);
}
.calendar-controls {
  justify-content: space-between; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px; box-shadow: var(--shadow);
}
.calendar { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.calendar-header, .calendar-week { display: grid; grid-template-columns: repeat(7, minmax(125px, 1fr)); }
.calendar-header { background: var(--navy-2); color: #fff; font-weight: 700; }
.calendar-header div { padding: 12px 10px; border-right: 1px solid #2e5d72; }
.calendar-week { min-height: 150px; }
.day-card { min-height: 150px; padding: 10px; border-right: 1px solid var(--border); border-top: 1px solid var(--border); background: var(--panel); }
.day-card:nth-child(7n) { border-right: 0; }
.day-card.outside-month { background: var(--panel-soft); opacity: .62; }
.day-card.today { box-shadow: inset 0 4px var(--cyan); background: #e7f7fb; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.day-head span { color: var(--blue-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.day-head strong { font-size: 17px; }
.person-row {
  display: grid; grid-template-columns: minmax(72px, .7fr) minmax(92px, 1fr);
  gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12px;
}
.person-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-time { font-weight: 750; color: var(--blue-dark); white-space: nowrap; }
.absence { background: var(--absence); margin: 0 -4px; padding-left: 4px; padding-right: 4px; color: var(--absence-text); }
.absence-label { font-weight: 700; white-space: nowrap; }
.free-label { color: #a0adb4; }
.empty-state { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 30px; box-shadow: var(--shadow); }
html[data-theme="dark"] {
  color-scheme: dark; --page: #06131c; --panel: #0c202b; --panel-soft: #102a37;
  --text: #e7f0f3; --muted: #a1b6bf; --border: #25424f; --navy: #041722; --navy-2: #123b52;
  --blue: #36a8df; --blue-dark: #67c7eb; --cyan: #54d5ee; --absence: #41321c; --absence-text: #ffd28b; --shadow: 0 5px 18px #0005;
}
html[data-theme="dark"] body, html[data-theme="dark"] main { background: var(--page); }
html[data-theme="dark"] .day-card.today { background: #123543; }
@media (max-width: 1050px) {
  main { padding: 24px 14px 60px; }
  .calendar { overflow-x: auto; }
  .calendar-header, .calendar-week { min-width: 930px; }
}
@media (max-width: 700px) {
  .topbar { padding: 10px 14px; flex-wrap: wrap; }
  .brand { font-size: 16px; }
  nav { gap: 9px; font-size: 13px; }
  .theme-label { display: none; }
}

.view-switch {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px;
  padding: 4px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel-soft);
}
.view-switch a {
  color: var(--muted); text-decoration: none; border-radius: 6px;
  padding: 8px 16px; font-weight: 750;
}
.view-switch a.active, .view-switch a:hover {
  color: #fff; background: var(--blue);
}
.week-board {
  overflow: hidden; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow);
}
.week-header, .week-row {
  display: grid; grid-template-columns: minmax(125px, 1.1fr) repeat(7, minmax(125px, 1fr));
}
.week-header { background: var(--navy-2); color: #fff; font-weight: 700; }
.week-person-heading, .week-day-heading { padding: 13px 12px; border-right: 1px solid #2e5d72; }
.week-day-heading { display: flex; flex-direction: column; gap: 4px; }
.week-day-heading span { color: #b9d3dd; font-size: 11px; text-transform: uppercase; }
.week-day-heading strong { font-size: 16px; }
.week-day-heading.today { background: var(--blue-dark); }
.week-row { min-height: 92px; border-top: 1px solid var(--border); }
.employee-label {
  display: flex; align-items: center; padding: 12px;
  background: var(--panel-soft); color: var(--text); font-weight: 750;
  border-right: 1px solid var(--border);
}
.week-cell {
  display: flex; align-items: center; justify-content: center; padding: 10px;
  border-right: 1px solid var(--border); text-align: center;
}
.week-cell:last-child { border-right: 0; }
.week-cell.today { background: #e7f7fb; box-shadow: inset 0 4px var(--cyan); }
.week-shift {
  color: var(--blue-dark); font-weight: 800; white-space: nowrap;
}
.week-absence {
  color: var(--absence-text); background: var(--absence); border-radius: 5px;
  padding: 5px 7px; font-weight: 750; white-space: nowrap;
}
.week-free { color: #a0adb4; }
html[data-theme="dark"] .week-cell.today { background: #123543; }
@media (max-width: 1050px) {
  .week-board { overflow-x: auto; }
  .week-header, .week-row { min-width: 1000px; }
}