:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202522;
  background: #f4f6f4;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: #f4f6f4;
}

button,
input,
select {
  font: inherit;
}

a {
  color: inherit;
}

.app-header {
  min-height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid #d9dfda;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.main-nav {
  min-width: 0;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 4px;
}

.main-nav a {
  padding: 0 10px;
  border-bottom: 3px solid transparent;
  display: inline-flex;
  align-items: center;
  color: #59645c;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
  border-bottom-color: #126b47;
  color: #173f2e;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #18211c;
  font-size: 19px;
  font-weight: 750;
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #126b47;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 17px;
}

.session-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
  font-size: 14px;
}

.organization-name,
.actor-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actor-name {
  color: #126b47;
  font-weight: 700;
}

.page-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 64px;
}

.auth-view {
  width: min(420px, 100%);
  margin: 8vh auto 0;
}

.auth-heading,
.section-heading {
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 7px;
  color: #657168;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
p {
  letter-spacing: 0;
}

h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
}

h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
}

.auth-form,
.pin-form {
  display: grid;
  gap: 16px;
}

label:not(.check-row):not(.sr-only):not(.override-check):not(.override-reason) {
  display: grid;
  gap: 7px;
  color: #3c463f;
  font-size: 14px;
  font-weight: 650;
}

input:not([type="checkbox"]):not([type="hidden"]) {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #bcc6be;
  border-radius: 6px;
  background: #ffffff;
  color: #202522;
}

select {
  width: 100%;
  min-height: 42px;
  padding: 8px 30px 8px 10px;
  border: 1px solid #bcc6be;
  border-radius: 6px;
  background: #ffffff;
  color: #202522;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid #e3a72f;
  outline-offset: 2px;
}

select:focus-visible {
  outline: 3px solid #e3a72f;
  outline-offset: 2px;
}

.check-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #303832;
  font-size: 14px;
  font-weight: 650;
}

.check-row input {
  width: 18px;
  height: 18px;
  accent-color: #126b47;
}

.primary-button,
.secondary-button,
.text-button {
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.primary-button {
  background: #126b47;
  color: #ffffff;
}

.primary-button:hover {
  background: #0c5638;
}

.secondary-button {
  border-color: #abb7ae;
  background: #ffffff;
  color: #29312c;
}

.text-button {
  min-height: 36px;
  padding: 6px 8px;
  background: transparent;
  color: #465149;
}

.form-error {
  margin: 0;
  padding: 11px 12px;
  border-left: 4px solid #b63b32;
  background: #fff0ee;
  color: #7e211b;
  font-size: 14px;
}

.form-success {
  margin: 0 0 18px;
  padding: 11px 12px;
  border-left: 4px solid #39835b;
  background: #edf7f0;
  color: #235c3d;
  font-size: 14px;
}

.workspace-heading {
  margin-bottom: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.submission-state {
  min-width: 150px;
  display: grid;
  justify-items: end;
  gap: 4px;
  color: #9a6410;
  font-size: 13px;
  font-weight: 750;
}

.submission-state.complete {
  color: #126b47;
}

.submission-state small {
  color: #6c766f;
  font-weight: 600;
}

.availability-toolbar,
.schedule-savebar,
.bottom-savebar {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #68736b;
  font-size: 13px;
}

.data-table-shell {
  overflow-x: auto;
  border: 1px solid #cbd3cd;
  background: #ffffff;
}

.availability-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.availability-table th,
.availability-table td {
  padding: 9px 10px;
  border-right: 1px solid #dde2de;
  border-bottom: 1px solid #dde2de;
  text-align: left;
}

.availability-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f4f2;
  color: #4d5850;
  font-size: 12px;
}

.availability-table thead small,
.availability-table tbody th span {
  margin-top: 3px;
  display: block;
  color: #778179;
  font-size: 11px;
  font-weight: 600;
}

.availability-table tbody th {
  width: 132px;
  background: #ffffff;
  font-size: 13px;
}

.availability-table tr.weekend th,
.availability-table tr.weekend td {
  background: #fafbf9;
}

.availability-select {
  min-width: 190px;
  font-size: 13px;
}

.availability-select.value-unavailable {
  border-color: #bd635a;
  background: #fff1ef;
}

.availability-select.value-preferred_work {
  border-color: #5c9873;
  background: #eef7f1;
}

.availability-select.value-preferred_off {
  border-color: #caa14f;
  background: #fff8e8;
}

.complete-form {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.request-form {
  margin-bottom: 30px;
  padding: 18px 0;
  border-top: 1px solid #d3dad4;
  border-bottom: 1px solid #d3dad4;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.6fr auto;
  align-items: end;
  gap: 12px;
}

.request-reason {
  min-width: 0;
}

.request-list {
  border-top: 1px solid #d3dad4;
}

.request-row {
  min-height: 92px;
  padding: 15px 0;
  border-bottom: 1px solid #d3dad4;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, auto);
  align-items: center;
  gap: 20px;
}

.request-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #4f5a52;
  font-size: 14px;
}

.request-main small {
  flex-basis: 100%;
  color: #6e7871;
}

.request-status {
  padding: 4px 7px;
  border-radius: 4px;
  background: #fff4d6;
  color: #8a5a0e;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.request-status.approved {
  background: #e9f5ed;
  color: #276443;
}

.request-status.rejected,
.request-status.cancelled {
  background: #f2f3f2;
  color: #6b746e;
}

.decision-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.compact {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}

.revision-badge {
  padding: 6px 9px;
  border: 1px solid #b7c1b9;
  border-radius: 4px;
  color: #4f5a52;
  font-size: 12px;
  font-weight: 750;
}

.revision-badge.published,
.acknowledged-state {
  border-color: #6b9a7d;
  background: #edf6f0;
  color: #225d3d;
}

.schedule-stats {
  margin-bottom: 20px;
  padding: 14px 0;
  border-top: 1px solid #d2d9d3;
  border-bottom: 1px solid #d2d9d3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  color: #5f6962;
  font-size: 13px;
}

.schedule-stats strong {
  color: #27322b;
  font-size: 17px;
}

.schedule-stats .unfilled strong {
  color: #a26712;
}

.schedule-stats .conflicts strong,
.slot-conflict {
  color: #a8322b;
}

.workload-panel {
  margin-bottom: 20px;
  border-bottom: 1px solid #d3dad4;
}

.workload-panel summary {
  padding: 8px 0 12px;
  color: #465149;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.extra-requirement {
  margin-bottom: 20px;
  border-bottom: 1px solid #d3dad4;
}

.generator-panel {
  margin-bottom: 20px;
  padding: 16px 0;
  border-top: 1px solid #d3dad4;
  border-bottom: 1px solid #d3dad4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.publication-panel {
  margin-bottom: 20px;
  padding: 18px 0;
  border-top: 1px solid #d3dad4;
  border-bottom: 1px solid #d3dad4;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.2fr);
  align-items: end;
  gap: 24px;
}

.publication-panel small,
.workflow-row small {
  margin-top: 5px;
  display: block;
  color: #6b766e;
  font-size: 11px;
}

.publication-form {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.collaboration-policy,
.swap-create-panel,
.revision-history {
  margin-bottom: 22px;
  border-bottom: 1px solid #d3dad4;
}

.collaboration-policy summary,
.swap-create-panel summary,
.revision-history summary {
  padding: 9px 0 13px;
  color: #465149;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.policy-form {
  padding: 2px 0 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.published-summary {
  min-height: 76px;
  margin-bottom: 28px;
  padding: 14px 0;
  border-top: 1px solid #ccd5ce;
  border-bottom: 1px solid #ccd5ce;
  display: flex;
  align-items: center;
  gap: 20px 34px;
}

.published-summary > div {
  display: grid;
  gap: 4px;
}

.published-summary > p {
  min-width: 160px;
  margin: 0;
  flex: 1;
  color: #59645c;
  font-size: 13px;
}

.acknowledged-state {
  padding: 6px 9px;
  border: 1px solid #6b9a7d;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 750;
}

.own-shifts,
.workflow-section,
.team-calendar {
  margin-bottom: 32px;
}

.section-line-heading {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.section-line-heading > strong {
  color: #607067;
  font-size: 18px;
}

.shift-strip {
  overflow-x: auto;
  padding-bottom: 5px;
  display: flex;
  gap: 8px;
}

.shift-strip > div {
  min-width: 132px;
  padding: 10px 12px;
  border-left: 3px solid #438061;
  background: #ffffff;
  display: grid;
  gap: 3px;
}

.shift-strip span,
.shift-strip small {
  color: #647068;
  font-size: 11px;
}

.swap-create-form {
  padding: 2px 0 18px;
  display: grid;
  grid-template-columns: 1fr 1fr minmax(180px, 0.7fr) auto;
  align-items: end;
  gap: 10px;
}

.workflow-list,
.notification-list {
  border-top: 1px solid #ccd5ce;
}

.workflow-row {
  min-height: 72px;
  padding: 12px 0;
  border-bottom: 1px solid #d5dcd6;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.workflow-row > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.workflow-row > div > span {
  color: #5d6860;
  font-size: 12px;
}

.swap-row {
  grid-template-columns: minmax(300px, 1fr) auto minmax(240px, auto);
}

.inline-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.inline-action select {
  min-width: 150px;
}

.manager-decision input {
  min-width: 160px;
  min-height: 40px !important;
}

.published-days {
  border-top: 1px solid #cbd3cd;
}

.published-day {
  border-bottom: 1px solid #cbd3cd;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
}

.published-day > header {
  padding: 12px 8px;
  background: #f0f3f1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  color: #68736b;
  font-size: 10px;
  text-transform: uppercase;
}

.published-day > header strong {
  color: #253029;
  font-size: 18px;
}

.published-slot {
  min-height: 52px;
  padding: 8px 10px;
  border-bottom: 1px solid #e0e5e1;
  display: grid;
  grid-template-columns: 100px minmax(130px, 1fr) minmax(120px, 0.8fr) auto;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  font-size: 12px;
}

.published-slot:last-child {
  border-bottom: 0;
}

.published-slot > span,
.published-slot > small {
  color: #667169;
}

.published-slot.unfilled {
  border-left: 4px solid #c48818;
  background: #fffaf0;
}

.revision-history > div {
  padding: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  color: #667169;
  font-size: 12px;
}

.prominent-empty {
  border-top: 1px solid #ccd5ce;
  border-bottom: 1px solid #ccd5ce;
}

.prominent-empty p {
  max-width: 600px;
  color: #657168;
}

.compact-empty {
  padding: 12px 0;
}

.notification-row {
  min-height: 78px;
  padding: 13px 6px;
  border-bottom: 1px solid #d5dcd6;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  text-decoration: none;
}

.notification-row:hover {
  background: #ffffff;
}

.notification-marker {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: #c4ccc6;
}

.notification-row.unread .notification-marker {
  background: #188051;
}

.notification-row p {
  margin: 5px 0 0;
  color: #606c64;
  font-size: 13px;
}

.notification-row time {
  color: #778179;
  font-size: 11px;
}

.generator-panel > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
  gap: 5px 10px;
}

.generator-panel h2,
.generator-panel .eyebrow {
  grid-column: 1 / -1;
}

.generator-panel small {
  color: #6a756d;
  font-size: 11px;
}

.generation-status {
  padding: 3px 6px;
  border-radius: 3px;
  background: #eaf4ed;
  color: #276342;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.generation-status.partial,
.generation-status.time_limit {
  background: #fff3d4;
  color: #8a5b0f;
}

.generation-status.invalid,
.generation-status.infeasible,
.generation-status.failed {
  background: #fff0ee;
  color: #8e2e28;
}

.generator-form {
  display: grid;
  grid-template-columns: 100px 100px auto;
  align-items: end;
  gap: 9px;
}

.extra-requirement summary {
  padding: 9px 0 13px;
  color: #465149;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.extra-requirement-form {
  padding: 2px 0 18px;
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 0.8fr 1.5fr 1.2fr 1.2fr auto;
  align-items: end;
  gap: 9px;
}

.workload-grid {
  padding: 4px 0 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

.workload-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 110px 54px minmax(50px, 1fr) 90px;
  align-items: center;
  gap: 9px;
  color: #5a655d;
  font-size: 12px;
}

.availability-state {
  color: #8b5b11;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.availability-state.complete {
  color: #286444;
}

.availability-state.missing {
  color: #8a3530;
}

.workload-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workload-row strong {
  text-align: right;
}

.workload-track {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #e1e6e2;
}

.workload-track i {
  height: 100%;
  display: block;
  border-radius: 3px;
  background: #4c8969;
}

.workload-track .p0 { width: 0; }
.workload-track .p10 { width: 10%; }
.workload-track .p20 { width: 20%; }
.workload-track .p30 { width: 30%; }
.workload-track .p40 { width: 40%; }
.workload-track .p50 { width: 50%; }
.workload-track .p60 { width: 60%; }
.workload-track .p70 { width: 70%; }
.workload-track .p80 { width: 80%; }
.workload-track .p90 { width: 90%; }
.workload-track .p100 { width: 100%; }

.manual-schedule {
  border-top: 1px solid #cbd3cd;
}

.manual-day {
  border-bottom: 1px solid #cbd3cd;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
}

.manual-day > header {
  padding: 14px 10px;
  background: #f0f3f1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  color: #68736b;
  font-size: 11px;
  text-transform: uppercase;
}

.manual-day > header strong {
  color: #253029;
  font-size: 20px;
}

.manual-day-slots {
  min-width: 0;
}

.manual-slot {
  min-height: 66px;
  padding: 9px 10px;
  border-bottom: 1px solid #e2e6e3;
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) 150px minmax(150px, 0.8fr);
  align-items: center;
  gap: 10px;
  background: #ffffff;
}

.manual-slot:last-child {
  border-bottom: 0;
}

.manual-slot.event,
.manual-slot.manual {
  border-left: 4px solid #d09a2d;
  background: #fffdf7;
}

.manual-slot.filled {
  box-shadow: inset 3px 0 #498365;
}

.slot-identity {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.slot-identity strong {
  font-size: 13px;
}

.slot-time-edit {
  display: flex;
  align-items: center;
  gap: 4px;
}

.slot-time-input {
  width: 66px !important;
  min-height: 34px !important;
  padding: 4px !important;
  font-size: 11px !important;
}

.slot-identity span {
  overflow: hidden;
  color: #667169;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-identity small {
  font-size: 10px;
  font-weight: 700;
}

.override-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5e6961;
  font-size: 12px;
}

.slot-flags {
  display: grid;
  gap: 6px;
}

.override-check input {
  width: 17px;
  height: 17px;
  accent-color: #b7740d;
}

.override-reason input {
  min-height: 42px !important;
  font-size: 12px;
}

.bottom-savebar {
  margin: 16px 0 0;
  justify-content: flex-end;
}

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

.employee-tile {
  min-height: 108px;
  padding: 16px;
  border: 1px solid #d0d8d2;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  font-weight: 720;
  text-decoration: none;
}

.employee-tile:hover,
.employee-tile.selected {
  border-color: #126b47;
  box-shadow: inset 0 0 0 1px #126b47;
}

.employee-initial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e5ede7;
  color: #126b47;
  display: grid;
  place-items: center;
}

.pin-panel {
  width: min(440px, 100%);
  margin: 28px auto 0;
  padding: 24px;
  border: 1px solid #ccd5ce;
  border-radius: 6px;
  background: #ffffff;
  display: grid;
  gap: 20px;
}

.pin-input {
  text-align: center;
  font-size: 26px;
  font-weight: 750;
}

.dashboard-heading {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.status-band {
  min-height: 82px;
  padding: 18px 20px;
  border: 1px solid #d3d9d4;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.status-band div {
  display: grid;
  gap: 5px;
}

.status-band .status-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  color: #5f6962;
  font-size: 13px;
}

.status-label {
  color: #6b756e;
  font-size: 13px;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e3a72f;
}

.status-dot.ready {
  background: #30825a;
}

.schedule-section {
  margin-top: 36px;
}

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

.schedule-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #5f6962;
  font-size: 13px;
}

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

.legend-mark {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #dbe8df;
}

.legend-mark.event {
  background: #f4d584;
}

.calendar-shell {
  border-top: 1px solid #cbd3cd;
  border-left: 1px solid #cbd3cd;
  background: #ffffff;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays span {
  min-height: 34px;
  border-right: 1px solid #cbd3cd;
  border-bottom: 1px solid #cbd3cd;
  display: grid;
  place-items: center;
  color: #667168;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.calendar-empty,
.calendar-day {
  min-width: 0;
  min-height: 132px;
  border-right: 1px solid #cbd3cd;
  border-bottom: 1px solid #cbd3cd;
}

.calendar-empty {
  background: #f0f2f0;
}

.calendar-day {
  padding: 9px;
  background: #ffffff;
}

.calendar-day.weekend {
  background: #fafbf9;
}

.calendar-day header {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #39423c;
  font-size: 13px;
}

.mobile-weekday {
  display: none;
}

.day-demand {
  display: grid;
  gap: 5px;
}

.demand-row {
  min-width: 0;
  padding: 6px 7px;
  border-left: 3px solid #629174;
  background: #eef4f0;
  display: grid;
  gap: 2px;
  color: #27322b;
  font-size: 11px;
  line-height: 1.2;
}

.demand-row.event {
  border-left-color: #c88a13;
  background: #fff6dc;
}

.demand-row small {
  overflow: hidden;
  color: #637068;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  padding: 30px 0;
  color: #68726b;
}

.location-switcher {
  display: grid;
  grid-template-columns: minmax(120px, 190px) auto;
  align-items: center;
  gap: 6px;
}

.location-switcher select {
  min-height: 36px;
  font-size: 13px;
}

.location-switcher .text-button,
.account-link {
  min-height: 36px;
  padding: 7px 9px;
}

.admin-tabs {
  margin-bottom: 28px;
  border-bottom: 1px solid #cbd3cd;
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.admin-tabs a {
  padding: 11px 13px;
  border-bottom: 3px solid transparent;
  color: #5a665e;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.admin-tabs a:hover,
.admin-tabs a.active {
  border-bottom-color: #126b47;
  color: #173f2e;
}

.admin-section {
  display: grid;
  gap: 22px;
}

.admin-create,
.admin-record {
  border-top: 1px solid #cbd3cd;
  border-bottom: 1px solid #cbd3cd;
  background: #ffffff;
}

.admin-create > summary,
.admin-record > summary {
  min-height: 52px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 750;
}

.admin-record > summary span {
  color: #69746c;
  font-size: 12px;
  font-weight: 650;
  text-align: right;
}

.admin-records {
  border-top: 1px solid #cbd3cd;
}

.admin-records .admin-record {
  border-top: 0;
}

.employee-admin-form,
.shift-admin-form {
  padding: 18px 16px 20px;
  border-top: 1px solid #e1e5e2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.location-admin-form,
.catalog-create-form,
.settings-admin-form,
.password-change-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}

.location-admin-form {
  padding: 18px 16px 20px;
  border-top: 1px solid #e1e5e2;
}

.admin-section > .location-admin-form,
.admin-section > .catalog-create-form,
.settings-admin-form,
.password-change-form {
  padding: 18px 0;
  border-top: 1px solid #cbd3cd;
  border-bottom: 1px solid #cbd3cd;
}

.admin-flags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.employee-admin-form .admin-flags,
.employee-admin-form > .primary-button,
.shift-admin-form .weekday-picker,
.shift-admin-form > .check-row,
.shift-admin-form > .primary-button {
  grid-column: 1 / -1;
}

.weekday-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(56px, 1fr));
  gap: 6px;
}

.weekday-picker label {
  min-height: 38px;
  border: 1px solid #bcc6be;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #374139;
  font-size: 12px;
  font-weight: 750;
}

.weekday-picker input {
  width: 16px;
  height: 16px;
  accent-color: #126b47;
}

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

.catalog-columns h3 {
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 2px solid #29342d;
  font-size: 15px;
}

.catalog-row {
  min-height: 44px;
  padding: 9px 2px;
  border-bottom: 1px solid #d9dfda;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.catalog-row code {
  color: #6a756d;
  font-size: 11px;
}

.access-table {
  border-top: 2px solid #29342d;
}

.access-row {
  min-height: 68px;
  padding: 10px 0;
  border-bottom: 1px solid #d4dbd6;
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(190px, 1.2fr) minmax(160px, 1fr) minmax(140px, 0.7fr) auto;
  align-items: center;
  gap: 10px;
}

.access-row input,
.access-row select {
  min-height: 40px !important;
}

.primary-button.compact {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}

.credential-banner {
  padding: 16px;
  border: 1px solid #d3a036;
  border-left-width: 4px;
  background: #fff8e5;
  display: grid;
  gap: 7px;
}

.credential-banner strong {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 18px;
}

.credential-banner small {
  color: #66572f;
}

.settings-admin-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-admin-form .admin-flags,
.settings-admin-form .primary-button {
  grid-column: 1 / -1;
}

.password-change-form {
  width: min(620px, 100%);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .app-header {
    min-height: 108px;
    padding: 10px 16px 0;
    flex-wrap: wrap;
  }

  .main-nav {
    width: 100%;
    height: 44px;
    order: 3;
    overflow-x: auto;
  }

  .organization-name {
    display: none;
  }

  .session-actions {
    gap: 5px;
  }

  .location-switcher {
    grid-template-columns: minmax(92px, 140px) auto;
  }

  .account-link,
  .actor-name {
    display: none;
  }

  .employee-admin-form,
  .shift-admin-form,
  .location-admin-form,
  .catalog-create-form,
  .settings-admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .access-row {
    grid-template-columns: 1fr 1fr;
  }

  .access-row > strong,
  .access-row > .primary-button {
    grid-column: 1 / -1;
  }

  .weekday-picker {
    grid-template-columns: repeat(4, minmax(56px, 1fr));
  }

  .workspace-heading,
  .availability-toolbar,
  .schedule-savebar {
    align-items: flex-start;
    flex-direction: column;
  }

  .submission-state {
    justify-items: start;
  }

  .availability-toolbar .primary-button,
  .schedule-savebar .primary-button {
    width: 100%;
  }

  .request-form {
    grid-template-columns: 1fr 1fr;
  }

  .extra-requirement-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .generator-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .publication-panel {
    grid-template-columns: 1fr;
  }

  .publication-form,
  .swap-create-form {
    grid-template-columns: 1fr 1fr;
  }

  .publication-form .primary-button,
  .swap-create-form .primary-button {
    grid-column: 1 / -1;
  }

  .published-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .workflow-row,
  .swap-row {
    grid-template-columns: 1fr;
  }

  .inline-action {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .published-slot {
    grid-template-columns: 86px minmax(120px, 1fr) minmax(100px, 0.8fr);
  }

  .published-slot form {
    grid-column: 2 / -1;
  }

  .generator-form {
    grid-template-columns: 1fr 1fr;
  }

  .generator-form .primary-button {
    grid-column: 1 / -1;
  }

  .extra-requirement-form .primary-button {
    grid-column: 1 / -1;
  }

  .request-reason,
  .request-form .primary-button {
    grid-column: 1 / -1;
  }

  .request-row {
    grid-template-columns: 1fr;
  }

  .decision-form {
    grid-template-columns: 1fr 1fr;
  }

  .decision-form input {
    grid-column: 1 / -1;
  }

  .manual-day {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .workload-grid {
    grid-template-columns: 1fr;
  }

  .manual-slot {
    grid-template-columns: minmax(110px, 0.7fr) minmax(170px, 1.3fr);
  }

  .slot-flags,
  .override-reason {
    grid-column: 2;
  }

  .page-shell {
    width: min(100% - 24px, 560px);
    padding-top: 28px;
  }

  .auth-view {
    margin-top: 3vh;
  }

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

  .employee-tile {
    min-height: 96px;
  }

  .pin-panel {
    padding: 18px;
  }

  .status-band,
  .schedule-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .status-band .status-summary {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .calendar-shell {
    border-top: 0;
    border-left: 0;
    background: transparent;
  }

  .calendar-weekdays,
  .calendar-empty {
    display: none;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .calendar-day,
  .calendar-day.weekend {
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid #cbd3cd;
    background: #ffffff;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
  }

  .calendar-day header {
    align-items: flex-start;
    justify-content: space-between;
  }

  .mobile-weekday {
    display: inline;
    color: #758078;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .day-demand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .actor-name {
    max-width: 90px;
  }

  .app-header {
    padding-right: 10px;
    padding-left: 10px;
  }

  .brand span:last-child {
    display: none;
  }

  .location-switcher {
    grid-template-columns: minmax(88px, 1fr) auto;
  }

  .employee-admin-form,
  .shift-admin-form,
  .location-admin-form,
  .catalog-create-form,
  .catalog-columns,
  .settings-admin-form,
  .access-row {
    grid-template-columns: 1fr;
  }

  .employee-admin-form > *,
  .shift-admin-form > *,
  .location-admin-form > *,
  .settings-admin-form > *,
  .access-row > * {
    grid-column: 1;
  }

  .weekday-picker {
    grid-template-columns: repeat(3, minmax(56px, 1fr));
  }

  .dashboard-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .day-demand {
    grid-template-columns: 1fr;
  }

  .request-form,
  .decision-form,
  .manual-slot,
  .extra-requirement-form,
  .generator-form,
  .publication-form,
  .swap-create-form {
    grid-template-columns: 1fr;
  }

  .workload-row {
    grid-template-columns: 86px 48px minmax(30px, 1fr) 74px;
  }

  .request-reason,
  .request-form .primary-button,
  .extra-requirement-form .primary-button,
  .generator-form .primary-button,
  .publication-form .primary-button,
  .swap-create-form .primary-button,
  .decision-form input,
  .slot-flags,
  .override-reason {
    grid-column: 1;
  }
}