:root {
  --brown: #4c3428;
  --ink: #ffffff;
  --muted: #ffe7c7;
  --line: #8a6554;
  --paper: #4c3428;
  --soft: #5b3d30;
  --soft-2: #684638;
  --cream: #ffebcd;
  --cream-2: #ead2ad;
  --orange: #ea953c;
  --green: #648c4e;
  --danger: #d96b5f;
  --button-text: #4c3428;
  --field-bg: #ffebcd;
  --selected-bg: #ffebcd;
  --selected-text: #4c3428;
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  --ink: #4c3428;
  --muted: #67493c;
  --line: #a97a5e;
  --paper: #f3dfbf;
  --soft: #f7e4c8;
  --soft-2: #e6c39b;
  --cream: #4c3428;
  --cream-2: #67493c;
  --button-text: #4c3428;
  --field-bg: #fff0d2;
  --selected-bg: #4c3428;
  --selected-text: #fff0d2;
  --shadow: 0 16px 40px rgba(76, 52, 40, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  min-height: 100%;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(100, 140, 78, 0.16), rgba(76, 52, 40, 0) 250px),
    var(--paper);
  color: var(--ink);
  font-family: var(--font);
}

:root[data-theme="light"] body {
  background: var(--paper);
}

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

button {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  width: min(1180px, calc(100% - 28px));
  min-height: 100svh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 0 28px;
}

.app-shell.is-locked {
  display: none;
}

.access-view {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}

.access-logo {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: 24px;
  width: 142px;
  height: auto;
}

.access-card {
  display: grid;
  gap: 14px;
  width: min(410px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.9);
  padding: 20px;
  box-shadow: var(--shadow);
}

.access-card h1 {
  margin-bottom: 2px;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(255, 235, 205, 0.18);
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  padding: 0 14px;
}

.topbar,
.admin-head,
.admin-products-head,
.admin-savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-products-head {
  align-items: flex-start;
  min-width: 0;
}

.admin-products-head > * {
  min-width: 0;
}

.admin-products-head p,
.admin-inline-message {
  line-height: 1.35;
}

.admin-panel > .admin-inline-message {
  margin: 8px 0 16px;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 64px;
  border-bottom: 0;
  gap: 12px;
  align-items: stretch;
}

.topbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: 126px;
  height: auto;
  object-fit: contain;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 31px;
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0;
}

h3 {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar-actions .user-pill {
  order: 1;
}

.topbar-actions #openAdmin {
  order: 3;
}

.topbar-actions #closeAdmin {
  order: 4;
}

.topbar-actions #logoutAccess {
  order: 99;
}

.topbar-actions .theme-toggle {
  order: 2;
}

.app-shell[data-view="admin"] .topbar-actions #closeAdmin,
.app-shell.is-admin-mode .topbar-actions #closeAdmin {
  order: 3;
}

.app-shell[data-view="admin"] .topbar-actions #logoutAccess,
.app-shell.is-admin-mode .topbar-actions #logoutAccess {
  order: 99;
}

.plain-button,
.ghost-button,
.primary-button {
  min-height: 42px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 650;
}

.plain-button {
  border: 1px solid var(--line);
  background: rgba(255, 235, 205, 0.06);
  color: var(--cream);
  padding: 0 15px;
}

.plain-button:hover,
.ghost-button:hover {
  border-color: var(--cream);
}

.theme-toggle {
  min-width: 74px;
}

.primary-button {
  border: 1px solid var(--orange);
  background: var(--orange);
  color: var(--button-text);
  padding: 0 18px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.primary-button:hover {
  background: #f0a34e;
}

.ghost-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  padding: 0 14px;
}

.is-hidden {
  display: none !important;
}

[hidden] {
  display: none !important;
}

.window-tabs,
.subwindow-tabs {
  display: inline-flex;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 235, 205, 0.06);
  padding: 5px;
}

.subwindow-tabs {
  max-width: 100%;
  margin-top: 12px;
  flex-wrap: wrap;
  overflow: visible;
  scrollbar-width: none;
}

.subwindow-tabs::-webkit-scrollbar {
  display: none;
}

#taskTabs,
#companyTabs,
#peopleTabs {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  flex-wrap: wrap;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 10px;
  padding: 0;
}

#taskTabs .subwindow-tab,
#companyTabs .subwindow-tab,
#peopleTabs .subwindow-tab {
  flex: 0 0 auto;
  min-height: 48px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.28);
  font-size: 17px;
  padding: 0 18px;
}

#peopleTabs .subwindow-tab {
  flex: 0 1 auto;
  white-space: normal;
}

#taskTabs .subwindow-tab[aria-pressed="true"],
#companyTabs .subwindow-tab[aria-pressed="true"],
#peopleTabs .subwindow-tab[aria-pressed="true"] {
  border-color: var(--selected-bg);
  background: var(--selected-bg);
  color: var(--selected-text);
  box-shadow: none;
}

.window-tab,
.subwindow-tab {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 760;
  padding: 0 18px;
  white-space: nowrap;
}

.window-tab[aria-pressed="true"],
.subwindow-tab[aria-pressed="true"] {
  background: var(--selected-bg);
  color: var(--selected-text);
}

.window-tab:focus-visible,
.subwindow-tab:focus-visible,
.tab-button:focus-visible,
.shift-guide-tab:focus-visible,
.worker-score:focus-visible,
.product-button:focus-visible,
.check-row:focus-visible,
.stock-row:focus-within {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.labels-view,
.tool-view {
  display: block;
  padding: 14px 0 0;
}

.cleaning-view,
.containers-view,
.opening-closing-view,
.tool-view,
.admin-view {
  display: none;
  padding: 14px 0 0;
}

.section-head {
  margin-bottom: 2px;
}

.app-shell[data-view="cleaning"] .labels-view,
.app-shell[data-view="containers"] .labels-view,
.app-shell[data-view="openingClosing"] .labels-view,
.app-shell[data-view="waste"] .labels-view,
.app-shell[data-view="cash"] .labels-view,
.app-shell[data-view="pokes"] .labels-view,
.app-shell[data-view="stock"] .labels-view,
.app-shell[data-view="clock"] .labels-view,
.app-shell[data-view="employment"] .labels-view,
.app-shell[data-view="contract"] .labels-view,
.app-shell[data-view="calendar"] .labels-view,
.app-shell[data-view="vacations"] .labels-view,
.app-shell[data-view="bonus"] .labels-view,
.app-shell[data-view="training"] .labels-view,
.app-shell[data-view="safety"] .labels-view,
.app-shell[data-view="manual"] .labels-view,
.app-shell[data-view="admin"] .labels-view,
.app-shell[data-view="admin"] .cleaning-view,
.app-shell[data-view="admin"] .containers-view,
.app-shell[data-view="admin"] .tool-view {
  display: none;
}

.app-shell[data-view="cleaning"] .cleaning-view,
.app-shell[data-view="containers"] .containers-view,
.app-shell[data-view="openingClosing"] .opening-closing-view,
.app-shell[data-view="waste"] .waste-view,
.app-shell[data-view="cash"] .cash-view,
.app-shell[data-view="pokes"] .pokes-view,
.app-shell[data-view="stock"] .stock-view,
.app-shell[data-view="clock"] .clock-view,
.app-shell[data-view="employment"] .employment-view,
.app-shell[data-view="calendar"] .calendar-view,
.app-shell[data-view="vacations"] .vacations-view,
.app-shell[data-view="bonus"] .bonus-view,
 .app-shell[data-view="training"] .training-view,
 .app-shell[data-view="training"] .safety-view,
 .app-shell[data-view="safety"] .safety-view,
.app-shell[data-view="manual"] .manual-view,
.app-shell[data-view="admin"] .admin-view {
  display: block;
}

.app-shell[data-view="admin"] .window-tabs,
.app-shell[data-view="admin"] .subwindow-tabs,
.app-shell.is-admin-mode .window-tabs,
.app-shell.is-admin-mode .subwindow-tabs {
  display: none !important;
}

.app-shell[data-view="admin"] .topbar,
.app-shell.is-admin-mode .topbar {
  align-items: stretch;
}

.app-shell[data-view="admin"] #openAdmin,
.app-shell.is-admin-mode #openAdmin {
  display: none !important;
}

.app-shell[data-view="admin"] #closeAdmin,
.app-shell.is-admin-mode #closeAdmin {
  display: inline-flex !important;
}

.gate-pin-field,
.add-product label,
.product-row label,
.container-row label {
  display: grid;
  gap: 7px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.print-options > span,
.gate-pin-field span,
.description-field span,
.add-product label span,
.product-row label span,
.container-row label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  background: var(--field-bg);
  color: var(--button-text);
}

input,
select {
  min-height: 52px;
  padding: 0 13px;
}

textarea {
  min-height: 86px;
  padding: 12px 13px;
  resize: vertical;
  line-height: 1.3;
}

input[type="color"] {
  min-width: 64px;
  padding: 5px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(234, 149, 60, 0.22);
}

input[readonly] {
  opacity: 0.75;
}

.quantity-stepper {
  display: grid;
  grid-template-columns: 44px minmax(54px, 1fr) 44px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--field-bg);
}

.quantity-stepper button {
  border: 0;
  background: var(--selected-bg);
  color: var(--selected-text);
  cursor: pointer;
  font-size: 22px;
  font-weight: 760;
}

.quantity-stepper button:hover,
.quantity-stepper button:focus-visible {
  background: var(--orange);
  color: var(--button-text);
  outline: none;
}

.quantity-stepper input {
  min-height: 50px;
  border: 0;
  border-left: 1px solid rgba(76, 52, 40, 0.22);
  border-right: 1px solid rgba(76, 52, 40, 0.22);
  border-radius: 0;
  padding: 0 6px;
  text-align: center;
  font-weight: 760;
}

.quantity-stepper input:focus {
  box-shadow: inset 0 0 0 3px rgba(234, 149, 60, 0.26);
}

.category-tabs,
.admin-category-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 16px;
  scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar,
.admin-category-filter::-webkit-scrollbar {
  display: none;
}

.tab-button,
.admin-tab {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 235, 205, 0.07);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  padding: 0 15px;
}

.tab-button[aria-pressed="true"],
.admin-tab[aria-pressed="true"] {
  border-color: var(--selected-bg);
  background: var(--selected-bg);
  color: var(--selected-text);
}

.stock-view .category-tabs {
  gap: 10px;
  padding: 0;
}

.stock-view .tab-button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 235, 205, 0.06);
  color: var(--muted);
  padding: 0 14px;
}

.stock-view .tab-button[aria-pressed="true"] {
  background: var(--selected-bg);
  color: var(--selected-text);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.product-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 104px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.36);
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.08;
  padding: 16px;
  text-align: center;
  box-shadow: none;
}

.product-button strong {
  font-size: 18px;
  font-weight: 760;
  line-height: 1.08;
}

.product-button span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
}

.product-button:hover,
.product-button:focus-visible {
  border-color: var(--orange);
  background: var(--soft-2);
}

.product-button:active {
  transform: translateY(1px);
}

.empty-state {
  min-height: 120px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-weight: 620;
  text-align: center;
}

.employment-view .empty-state,
.calendar-view .empty-state,
.training-view .empty-state,
.safety-view .empty-state,
.manual-view .empty-state {
  min-height: 86px;
  border: 0;
  border-radius: 0;
  justify-content: flex-start;
  padding: 14px 0;
  text-align: left;
}

.manual-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 560px) max-content;
  gap: 12px;
  align-items: end;
}

.manual-search {
  display: grid;
  gap: 7px;
}

.manual-search span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
}

.manual-search input {
  width: 100%;
}

.manual-pdf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid rgba(255, 235, 205, 0.28);
  border-radius: 8px;
  background: rgba(255, 235, 205, 0.08);
  color: var(--cream);
  padding: 0 16px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 680;
}

.manual-filter-row,
.manual-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.manual-filter,
.manual-quick-link {
  min-height: 42px;
  border: 1px solid rgba(255, 235, 205, 0.2);
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}

.manual-filter[aria-pressed="true"] {
  border-color: rgba(255, 235, 205, 0.76);
  background: var(--selected-bg);
  color: var(--selected-text);
}

.manual-quick-link {
  min-height: 34px;
  border-color: rgba(255, 235, 205, 0.12);
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
}

.manual-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 2px;
}

.manual-embedded {
  display: grid;
  gap: 14px;
}

.manual-training-block .manual-toolbar {
  margin-top: 2px;
}

.manual-section {
  --manual-accent: var(--orange);
  --manual-tint: rgba(240, 151, 52, 0.12);
  min-width: 0;
  display: grid;
  gap: 16px;
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-left: 5px solid var(--manual-accent);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--manual-tint), rgba(91, 61, 48, 0.32));
  padding: 18px;
}

.manual-section[data-accent="blue"] {
  --manual-accent: #3aa0ff;
  --manual-tint: rgba(58, 160, 255, 0.12);
}

.manual-section[data-accent="green"] {
  --manual-accent: #74b46a;
  --manual-tint: rgba(116, 180, 106, 0.12);
}

.manual-section[data-accent="pink"] {
  --manual-accent: #ef5d87;
  --manual-tint: rgba(239, 93, 135, 0.12);
}

.manual-section[data-accent="yellow"] {
  --manual-accent: #f0c95c;
  --manual-tint: rgba(240, 201, 92, 0.12);
}

.manual-section-head {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 16px;
  align-items: start;
}

.manual-section-head span,
.manual-section-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  text-transform: uppercase;
}

.manual-section-head h3 {
  margin: 4px 0 0;
  color: var(--cream);
  font-size: 28px;
  font-weight: 780;
  line-height: 1.05;
}

.manual-section-head p {
  max-width: 640px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.34;
}

.manual-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.manual-media-card {
  min-width: 0;
  margin: 0;
}

.manual-media-card a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-radius: 8px;
  background: rgba(255, 235, 205, 0.08);
}

.manual-media-card img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: top;
}

.manual-media-card figcaption {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
}

.manual-section-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.manual-group {
  display: grid;
  align-content: start;
  gap: 8px;
  border-top: 1px solid rgba(255, 235, 205, 0.1);
  padding: 13px 0 0;
}

.manual-group[data-tone] {
  border: 1px solid rgba(255, 235, 205, 0.12);
  border-left: 4px solid var(--manual-accent);
  border-radius: 8px;
  background: rgba(255, 235, 205, 0.07);
  padding: 14px;
}

.manual-group[data-tone="cool"] {
  border-left-color: #3aa0ff;
  background: rgba(58, 160, 255, 0.1);
}

.manual-group[data-tone="fresh"] {
  border-left-color: #74b46a;
  background: rgba(116, 180, 106, 0.1);
}

.manual-group[data-tone="alert"] {
  border-left-color: #ef5d87;
  background: rgba(239, 93, 135, 0.1);
}

.manual-group[data-tone="warm"] {
  border-left-color: var(--orange);
  background: rgba(240, 151, 52, 0.1);
}

.manual-group strong {
  color: var(--cream);
  font-size: 17px;
  font-weight: 720;
}

.manual-group p,
.manual-group li {
  color: var(--muted);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.38;
}

.manual-group p {
  margin: 0;
}

.manual-group ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.manual-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 235, 205, 0.12);
  border-radius: 8px;
}

.manual-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

.manual-table th,
.manual-table td {
  border-bottom: 1px solid rgba(255, 235, 205, 0.1);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.manual-table th {
  background: rgba(255, 235, 205, 0.09);
  color: var(--cream);
  font-size: 13px;
  font-weight: 720;
}

.manual-table td {
  color: var(--muted);
  font-size: 14px;
  font-weight: 520;
  line-height: 1.34;
}

.manual-table tbody tr:last-child td {
  border-bottom: 0;
}

.last-print {
  position: sticky;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(580px, 100%);
  margin: 22px auto 0;
  border: 1px solid rgba(255, 235, 205, 0.32);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.96);
  padding: 13px 15px;
  box-shadow: var(--shadow);
}

.last-print span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.last-print strong {
  text-align: right;
}

.print-options {
  display: grid;
  grid-template-columns: minmax(170px, 260px);
  gap: 8px;
  align-items: start;
  width: min(260px, 100%);
  margin: 18px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 4px 0 0;
}

.print-options > span {
  color: var(--cream);
  font-size: 17px;
  font-weight: 760;
}

.view-description {
  max-width: 920px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 520;
  line-height: 1.4;
}

.cleaning-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 10px;
}

.cleaning-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 0;
}

.cleaning-summary p {
  color: var(--muted);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.32;
  max-width: 920px;
}

.view-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.32;
}

.workers-panel {
  border: 0;
  background: transparent;
  padding: 0;
}

.progress-head {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  gap: 12px;
}

.progress-head div {
  display: grid;
  gap: 4px;
}

.progress-head span,
.list-head > span,
.history-row span,
.check-content small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
}

.cleaning-summary .progress-head span {
  color: var(--cream);
  font-size: 16px;
  font-weight: 760;
  white-space: nowrap;
}

.mini-track {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 235, 205, 0.14);
}

.mini-track div {
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
  transition: width 220ms ease;
}

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

.worker-score {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 104px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.44);
  box-shadow: none;
  color: var(--cream);
  cursor: pointer;
  padding: 16px 16px 15px;
  text-align: left;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.worker-score[aria-pressed="true"] {
  border-color: rgba(234, 149, 60, 0.82);
  background: rgba(234, 149, 60, 0.14);
  box-shadow: 0 0 0 1px rgba(234, 149, 60, 0.78);
}

.workers-panel.has-selection .worker-score:not([aria-pressed="true"]) {
  opacity: 0.56;
}

.worker-score.is-complete {
  opacity: 0.84;
}

.worker-score-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.worker-score strong,
.worker-score span {
  color: var(--cream);
  font-size: 20px;
  font-weight: 760;
}

.mini-track {
  height: 10px;
}

.weekly-section,
.sunday-section {
  margin-top: 12px;
  padding: 0;
}

.containers-view,
.cleaning-view {
  padding-top: 18px;
}

.containers-view .sunday-section,
.cleaning-view .weekly-section {
  margin-top: 0;
}

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

.list-head > span {
  text-align: right;
}

.checklist {
  display: grid;
  gap: 9px;
}

.task-pack {
  display: grid;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.task-pack.is-selected {
  outline: 0;
}

.cleaning-view .task-pack.is-selected .task-pack-head {
  display: none;
}

.task-pack + .task-pack {
  margin-top: 18px;
}

.task-pack-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border-bottom: 0;
  padding: 4px 0 14px;
}

.task-pack-head strong {
  color: var(--cream);
  font-size: 24px;
  font-weight: 850;
}

.compact-checklist {
  gap: 8px;
}

.containers-view .compact-checklist {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 22px;
  align-items: start;
}

.check-row {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  padding: 10px 6px;
  transition: background 160ms ease, border-color 160ms ease;
}

.check-row:hover {
  background: rgba(255, 235, 205, 0.045);
}

.check-row input {
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 235, 205, 0.24);
  border-radius: 8px;
  background: transparent;
  color: var(--button-text);
  font-weight: 850;
}

.check-row input:checked + .check-mark {
  border-color: rgba(234, 149, 60, 0.86);
  background: var(--selected-bg);
  color: var(--selected-text);
}

.check-row input:checked + .check-mark::after {
  content: "✓";
}

.check-row.is-completed {
  background: transparent;
  border-color: transparent;
}

.containers-view .check-row,
.cleaning-view .check-row {
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  padding: 10px 6px;
}

.containers-view .check-row {
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 54px;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 235, 205, 0.08);
  padding: 9px 6px;
}

.containers-view .check-mark {
  width: 32px;
  height: 32px;
  border-width: 2px;
  border-radius: 8px;
  color: var(--button-text);
  font-size: 14px;
}

.containers-view .check-row.is-completed,
.cleaning-view .check-row.is-completed {
  background: transparent;
  border-color: transparent;
}

.containers-view .check-row input:checked + .check-mark {
  border-color: rgba(234, 149, 60, 0.86);
  background: var(--selected-bg);
  color: var(--selected-text);
}

.containers-view .check-row.is-completed {
  background: transparent;
}

.check-content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.check-content strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.18;
}

.worker-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--orange);
  vertical-align: 1px;
}

.sunday-list {
  display: block;
  margin-top: 8px;
}

.view-note {
  display: block;
  max-width: 760px;
}

.containers-view .view-note {
  max-width: none;
  margin: 0 0 22px;
  color: var(--cream);
  font-size: 18px;
  font-weight: 760;
}

.opening-closing-view {
  display: none;
  padding-top: 18px;
}

.opening-closing-view .view-description {
  max-width: 780px;
  margin-bottom: 16px;
}

.shift-guide-tabs {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 22px;
}

.shift-guide-tab {
  min-height: 46px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.28);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 560;
  padding: 0 22px;
}

.shift-guide-tab[aria-pressed="true"] {
  border-color: var(--selected-bg);
  background: var(--selected-bg);
  color: var(--selected-text);
  font-weight: 720;
}

.shift-guide {
  display: grid;
  gap: 18px;
}

.shift-guide-head {
  display: grid;
  gap: 5px;
}

.shift-guide-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 34px;
  font-weight: 760;
  line-height: 1;
}

.shift-guide-head p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 520;
}

.shift-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1120px;
  counter-reset: shift-item;
}

.shift-guide-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.48);
}

.shift-guide-section h3 {
  margin: 0;
  border-bottom: 1px solid rgba(255, 235, 205, 0.12);
  background: rgba(255, 235, 205, 0.055);
  color: var(--cream);
  font-size: 18px;
  font-weight: 680;
  line-height: 1.12;
  padding: 13px 16px;
}

.shift-guide-section--final-morning {
  counter-reset: shift-item;
  border-color: rgba(234, 149, 60, 0.52);
  background: rgba(116, 70, 34, 0.38);
}

.shift-guide-section--final-morning h3 {
  border-bottom-color: rgba(234, 149, 60, 0.28);
  background: rgba(234, 149, 60, 0.13);
  color: #ffd8a8;
}

.shift-guide-section--final-morning li {
  border-top-color: rgba(255, 216, 168, 0.1);
}

.shift-guide-section--final-morning li::before {
  background: rgba(234, 149, 60, 0.2);
  color: #ffd8a8;
}

.shift-guide-section ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shift-guide-section li {
  position: relative;
  min-height: 40px;
  border-top: 1px solid rgba(255, 235, 205, 0.08);
  color: var(--ink);
  counter-increment: shift-item;
  font-size: 15px;
  font-weight: 520;
  line-height: 1.32;
  padding: 10px 14px 10px 54px;
}

.shift-guide-section li:first-child {
  border-top: 0;
}

.shift-guide-section li:last-child {
  border-bottom: 0;
}

.shift-guide-section li::before {
  content: counter(shift-item, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 9px;
  min-width: 28px;
  border-radius: 999px;
  background: rgba(255, 235, 205, 0.1);
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  line-height: 22px;
  text-align: center;
}

.sunday-card {
  padding: 0;
}

.sunday-head {
  border: 0;
  margin-bottom: 18px;
}

.tool-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.48);
  padding: 16px;
}

.waste-view .tool-panel,
.cash-view .tool-panel,
.pokes-view .tool-panel,
.stock-view .tool-panel,
.clock-view .tool-panel,
.employment-view .tool-panel,
.calendar-view .tool-panel,
.training-view .tool-panel,
.safety-view .tool-panel,
.vacations-view .tool-panel,
.bonus-view .tool-panel,
.manual-view .tool-panel {
  gap: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.waste-view .view-description,
.cash-view .view-description,
.pokes-view .view-description,
.stock-view .view-description,
.clock-view .view-description,
.employment-view .view-description,
.calendar-view .view-description,
.training-view .view-description,
.safety-view .view-description,
.vacations-view .view-description,
.bonus-view .view-description,
.manual-view .view-description {
  max-width: 920px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 520;
  line-height: 1.4;
}

.bonus-view .view-description {
  max-width: 1320px;
}

.stock-alert-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(255, 235, 205, 0.07);
  padding: 12px;
}

.stock-alert-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.stock-alert-panel strong {
  color: var(--cream);
  font-size: 15px;
  font-weight: 760;
}

.stock-alert-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.28;
}

.stock-alert-panel .admin-inline-message {
  grid-column: 1 / -1;
  min-height: 16px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.clock-panel {
  max-width: 980px;
}

.clock-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(255, 235, 205, 0.18);
  border-radius: 12px;
  background: rgba(255, 235, 205, 0.06);
  padding: 18px;
}

.clock-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.clock-card-head > div {
  display: grid;
  gap: 4px;
}

.clock-card-head span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.clock-card-head strong {
  color: var(--cream);
  font-size: clamp(46px, 8vw, 78px);
  font-weight: 870;
  line-height: 0.95;
}

.clock-card-head small {
  color: var(--muted);
  font-size: 15px;
  font-weight: 760;
  white-space: nowrap;
}

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

.clock-stats span {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-radius: 10px;
  background: rgba(67, 43, 34, 0.36);
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  padding: 10px 12px;
}

.clock-stats b {
  color: var(--cream);
  font-size: 20px;
  font-weight: 840;
  line-height: 1;
}

.clock-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px;
}

.clock-actions .primary-button,
.clock-actions .plain-button {
  min-height: 54px;
  width: 100%;
}

.clock-timeline {
  display: grid;
  gap: 8px;
}

.clock-event-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 235, 205, 0.12);
  border-radius: 10px;
  background: rgba(255, 235, 205, 0.04);
  padding: 10px;
}

.clock-event-row strong {
  display: block;
  color: var(--cream);
  font-size: 17px;
  line-height: 1.05;
}

.clock-event-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.28;
}

.clock-event-badge {
  display: inline-grid;
  min-width: 92px;
  min-height: 32px;
  place-items: center;
  border-radius: 999px;
  background: rgba(234, 149, 60, 0.16);
  color: var(--cream);
  font-size: 12px;
  font-weight: 830;
  padding: 0 10px;
}

.clock-event-badge--pause-start,
.clock-event-badge--pause-end {
  background: rgba(255, 211, 138, 0.14);
}

.clock-record-admin-row {
  grid-template-columns: minmax(170px, 0.9fr) minmax(145px, 0.72fr) minmax(200px, 1fr) minmax(220px, 1fr) auto;
}

.clock-settings-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) repeat(3, minmax(140px, 0.75fr));
  gap: 12px;
}

.clock-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.empty-tool-panel {
  gap: 16px;
}

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

.tool-head .view-description {
  margin-bottom: 0;
}

.tool-head > strong {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--selected-bg);
  color: var(--selected-text);
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 760;
}

.quick-form {
  display: grid;
  gap: 10px;
  align-items: end;
}

.waste-form {
  grid-template-columns: 170px minmax(180px, 1fr) minmax(150px, 190px);
}

.cash-form {
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 150px 132px 140px minmax(150px, 190px);
}

.poke-form {
  grid-template-columns: minmax(150px, 1fr) 150px minmax(150px, 1fr) 150px minmax(150px, 190px);
}

.waste-view .quick-form,
.cash-view .quick-form,
.pokes-view .quick-form,
.vacations-view .quick-form,
.bonus-view .quick-form {
  padding-bottom: 8px;
}

.waste-view input,
.waste-view select,
.cash-view input,
.cash-view select,
.pokes-view input,
.pokes-view select,
.vacations-view input,
.vacations-view select,
.bonus-view input,
.bonus-view select {
  min-height: 48px;
}

.history-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 4px;
}

.history-filter select {
  min-height: 38px;
  width: auto;
  min-width: 132px;
  padding: 0 34px 0 12px;
  font-size: 14px;
  font-weight: 540;
}

.admin-history-filter {
  margin-top: 2px;
}

.admin-history-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  border-top: 1px solid rgba(255, 235, 205, 0.14);
  padding-top: 16px;
}

.admin-history-section .compact-head {
  margin: 0;
}

.admin-history-section h3 {
  color: var(--cream);
  font-size: 17px;
  font-weight: 650;
}

.admin-history-section p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 520;
  line-height: 1.35;
}

.admin-history-section .record-admin-list {
  margin-top: 2px;
}

.waste-view .primary-button,
.cash-view .primary-button,
.pokes-view .primary-button,
.vacations-view .primary-button,
.bonus-view .primary-button {
  min-height: 48px;
  box-shadow: none;
}

.vacation-form {
  grid-template-columns: minmax(160px, 220px) minmax(170px, 260px) 170px minmax(150px, max-content);
  justify-content: start;
}

.vacation-request-block.is-flexible-vacation {
  max-width: 820px;
  margin-top: 0;
}

.vacation-request-block.is-flexible-vacation .tool-head > strong {
  display: inline-flex;
  border-color: rgba(255, 235, 205, 0.18);
  background: rgba(255, 235, 205, 0.1);
  color: var(--cream);
}

.vacation-request-block.is-flexible-vacation .vacation-form {
  grid-template-columns: minmax(170px, 240px) minmax(170px, 240px) minmax(170px, max-content);
}

.vacation-top-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(360px, 520px);
  gap: 16px;
  align-items: stretch;
}

.vacations-view .summary-grid,
.bonus-view .bonus-grid {
  gap: 14px;
}

.vacations-view .summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
  margin-top: 0;
}

.vacation-top-grid .summary-grid {
  grid-template-columns: 1fr;
}

.vacation-forecast-panel,
.vacation-info-grid {
  margin-top: 12px;
}

.vacation-forecast-panel {
  display: grid;
  grid-template-columns: minmax(220px, max-content) 170px max-content;
  gap: 12px;
  align-items: center;
  justify-content: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 6px;
}

.vacation-top-grid .vacation-forecast-panel {
  grid-template-columns: 1fr;
  align-content: center;
  margin-top: 0;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.36);
  padding: 14px 16px;
}

.vacation-forecast-panel > div,
.compact-info-item,
.vacation-summary-card {
  display: grid;
  gap: 5px;
}

.vacation-forecast-panel strong,
.vacation-info-panel > strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 760;
}

.vacation-forecast-panel span,
.compact-info-item span,
.vacation-summary-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
}

.vacation-forecast-panel b {
  color: var(--ink);
  font-size: 22px;
  font-weight: 850;
  min-width: 0;
  text-align: left;
}

.vacation-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.vacation-request-block {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 235, 205, 0.2);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.42);
  padding: 18px;
}

.vacation-request-block .tool-head > strong {
  display: none;
}

.vacation-request-block .view-description {
  color: var(--cream);
  font-size: 20px;
  font-weight: 760;
}

.vacation-request-block .tool-list {
  gap: 0;
}

.vacation-request-block .tool-row {
  border-bottom: 1px solid rgba(255, 235, 205, 0.14);
  padding: 14px 2px;
}

.vacation-request-block .tool-row:first-child {
  border-top: 1px solid rgba(255, 235, 205, 0.14);
}

.vacation-rules-block {
  padding-top: 2px;
}

.people-panel {
  max-width: 1180px;
}

.people-block-list {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(255, 235, 205, 0.14);
  padding-top: 8px;
}

.people-block {
  border: 1px solid transparent;
  border-bottom-color: rgba(255, 235, 205, 0.14);
  border-radius: 8px;
  transition: background 160ms ease, border-color 160ms ease;
}

.people-block summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
  padding: 12px 10px;
}

.people-block[open] summary {
  border-bottom: 1px solid rgba(255, 235, 205, 0.12);
  border-radius: 8px 8px 0 0;
  background: rgba(255, 235, 205, 0.1);
  color: var(--ink);
}

.people-block[open] {
  border-color: rgba(255, 235, 205, 0.22);
  background: rgba(91, 61, 48, 0.58);
}

.people-block summary::-webkit-details-marker {
  display: none;
}

.people-block summary span {
  font-size: 19px;
  font-weight: 720;
  line-height: 1.18;
}

.people-block summary small {
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
  padding: 7px 10px;
}

.people-block[open] summary small {
  border-color: rgba(255, 235, 205, 0.28);
  color: var(--cream);
}

.people-block-body {
  display: grid;
  gap: 12px;
  max-width: 920px;
  padding: 14px 14px 16px;
}

.people-block-body p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.36;
}

.employment-note-list,
.employment-document-list,
.employment-info-grid {
  display: grid;
  gap: 0;
}

.employment-note-list {
  border-top: 1px solid rgba(255, 235, 205, 0.12);
}

.employment-note-list span,
.employment-document-row,
.employment-info-item {
  border-bottom: 1px solid rgba(255, 235, 205, 0.12);
  padding: 12px 2px;
}

.employment-note-list span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.36;
}

.employment-document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 18px;
  align-items: center;
}

.employment-document-row > div:first-child {
  display: grid;
  gap: 6px;
}

.employment-document-row > div:first-child > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.employment-document-row strong,
.employment-info-item span {
  color: var(--cream);
  font-size: 16px;
  font-weight: 680;
  line-height: 1.22;
}

.employment-document-row small {
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  padding: 5px 8px;
}

.employment-document-row small.is-read {
  border-color: rgba(100, 163, 94, 0.42);
  color: #b9dfa9;
}

.employment-document-row span,
.employment-info-item p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 480;
  line-height: 1.36;
}

.employment-info-grid {
  border-top: 1px solid rgba(255, 235, 205, 0.12);
}

.employment-info-item {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-actions .small-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.document-actions .small-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.calendar-head {
  display: grid;
  gap: 12px;
  max-width: 1180px;
}

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

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  padding: 0 10px;
}

.calendar-legend-item--contract {
  background: #79529c;
  color: #fff7ff;
}

.calendar-legend-item--holiday {
  background: rgba(214, 176, 77, 0.54);
  color: #fff6d7;
}

.calendar-legend-item--workday {
  background: rgba(100, 163, 94, 0.48);
  color: #f6ffe9;
}

.calendar-legend-item--own-vacation {
  background: rgba(239, 106, 147, 0.62);
  color: #fff3f7;
}

.calendar-legend-item--coworker-vacation {
  background: rgba(68, 154, 170, 0.56);
  color: #ecfbff;
}

.calendar-period-tabs {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 6px;
  padding: 4px;
}

.calendar-period-tab {
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
}

.calendar-period-label {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  color: var(--cream);
  font-size: 14px;
  font-weight: 720;
  padding: 0 14px;
  text-transform: capitalize;
}

.legend-dot {
  display: none;
}

.personal-calendar {
  display: grid;
  gap: 28px;
}

.calendar-note {
  max-width: 1180px;
  border-top: 1px solid rgba(255, 235, 205, 0.14);
  border-bottom: 1px solid rgba(255, 235, 205, 0.14);
  color: var(--muted);
  font-size: 14px;
  font-weight: 520;
  padding: 12px 2px;
}

.calendar-year {
  display: grid;
  gap: 14px;
}

.calendar-year > h3 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  font-weight: 720;
  line-height: 1.1;
}

.calendar-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
  gap: 14px;
}

.calendar-month {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(255, 235, 205, 0.16);
  padding-top: 12px;
}

.calendar-month h4 {
  margin: 0;
  color: var(--cream);
  font-size: 16px;
  font-weight: 680;
  text-transform: capitalize;
}

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

.calendar-weekdays span {
  color: rgba(255, 235, 205, 0.54);
  font-size: 11px;
  font-weight: 640;
  text-align: center;
}

.calendar-day {
  position: relative;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: rgba(255, 235, 205, 0.58);
  font-size: 13px;
  font-weight: 520;
  display: grid;
  place-items: center;
}

.calendar-day.is-empty {
  visibility: hidden;
}

.calendar-day.is-workday {
  border-color: rgba(100, 163, 94, 0.42);
  color: #f6ffe9;
  background: rgba(100, 163, 94, 0.38);
  font-weight: 680;
}

.calendar-day.is-holiday {
  border-color: rgba(246, 194, 77, 0.48);
  color: #fff6d7;
  background: rgba(214, 176, 77, 0.44);
  font-weight: 700;
}

.calendar-day.is-vacation,
.calendar-day.is-own-vacation {
  border-color: rgba(255, 122, 159, 0.62);
  color: #fff3f7;
  background: rgba(239, 106, 147, 0.58);
  font-weight: 760;
}

.calendar-day.is-coworker-vacation {
  border-color: rgba(91, 190, 208, 0.64);
  color: #ecfbff;
  background: rgba(68, 154, 170, 0.58);
  font-weight: 760;
}

.calendar-day.is-contract {
  border-color: #a982c7;
  color: #fff8ff;
  background: #79529c;
  font-weight: 760;
}

.calendar-day.is-today {
  border-color: rgba(255, 128, 118, 0.95);
  background: rgba(217, 107, 95, 0.86);
  color: #fff7f3;
  font-weight: 850;
  box-shadow: inset 0 0 0 2px rgba(255, 235, 205, 0.2);
}

.calendar-day-dots {
  position: absolute;
  left: 50%;
  bottom: 4px;
  display: flex;
  gap: 3px;
  transform: translateX(-50%);
}

.calendar-day-dots i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
}

.calendar-day-dots .is-contract {
  background: #a982c7;
}

.calendar-day-dots .is-holiday {
  background: #d6b04d;
}

.calendar-day-dots .is-workday {
  background: #64a35e;
}

.calendar-day-dots .is-vacation {
  background: #ef6a93;
}

.calendar-day-dots .is-own-vacation {
  background: #ef6a93;
}

.calendar-day-dots .is-coworker-vacation {
  background: #5bbed0;
}

.people-block summary small.is-read {
  border-color: rgba(100, 163, 94, 0.42);
  color: #b9dfa9;
}

.reading-progress-panel {
  display: grid;
  gap: 14px;
  max-width: 1180px;
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-radius: 8px;
  background: rgba(255, 235, 205, 0.06);
  padding: 16px;
}

.reading-progress-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 14px;
  align-items: end;
}

.reading-progress-head div {
  display: grid;
  gap: 4px;
}

.reading-progress-head strong {
  color: var(--cream);
  font-size: 19px;
  font-weight: 720;
  line-height: 1.16;
}

.reading-progress-head span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 520;
}

.reading-progress-head b {
  color: var(--cream);
  font-size: 28px;
  font-weight: 760;
}

.reading-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 235, 205, 0.12);
}

.reading-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
  transition: width 0.22s ease;
}

.reading-record-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 520;
  line-height: 1.38;
}

.reading-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 26px;
}

.reading-checklist label {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid rgba(255, 235, 205, 0.12);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.2;
  padding: 8px 0;
}

.reading-checklist input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px !important;
  max-height: 24px;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 235, 205, 0.3);
  border-radius: 8px;
  background: transparent;
  color: var(--button-text);
}

.reading-checklist label.is-read {
  color: var(--cream);
}

.reading-checklist input:checked {
  border-color: rgba(234, 149, 60, 0.86);
  background: var(--selected-bg);
}

.reading-checklist input:checked::after {
  content: "✓";
  color: var(--selected-text);
  font-size: 15px;
  font-weight: 850;
}

.policy-block-list {
  max-width: 1180px;
}

.policy-body {
  max-width: 1080px;
}

.policy-article {
  --policy-accent: var(--orange);
  display: grid;
  gap: 14px;
}

.policy-article--training {
  --policy-accent: #d6b04d;
}

.policy-article--safety {
  --policy-accent: #64a35e;
}

.policy-article--protocol {
  --policy-accent: #d36a82;
}

.policy-meta {
  max-width: 900px;
  color: rgba(255, 235, 205, 0.62);
  font-size: 13px;
  font-weight: 420;
  line-height: 1.35;
}

.policy-section,
.policy-section-grid section,
.pas-grid section {
  display: grid;
  gap: 8px;
}

.policy-section--important {
  border-left: 3px solid rgba(234, 149, 60, 0.86);
  padding-left: 12px;
}

.policy-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.policy-section h3,
.policy-section-grid h3 {
  margin: 0;
  color: var(--cream);
  font-size: 16px;
  font-weight: 720;
}

.policy-section p,
.policy-note {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.42;
}

.policy-section ul,
.policy-section-grid ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.policy-section-grid li,
.policy-section li {
  color: var(--muted);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.38;
}

.policy-note {
  border-top: 1px solid rgba(255, 235, 205, 0.12);
  padding-top: 12px;
}

.policy-settings-list {
  margin: 0;
  border-top: 1px solid rgba(255, 235, 205, 0.12);
  padding-top: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 520;
  line-height: 1.52;
}

.policy-settings-list strong {
  color: var(--cream);
  font-weight: 720;
}

.policy-settings-list .is-pending {
  color: var(--orange);
}

.compliance-settings-block {
  display: grid;
  gap: 16px;
}

.allergen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.allergen-list span {
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-radius: 999px;
  color: var(--cream);
  font-size: 13px;
  font-weight: 560;
  padding: 7px 10px;
}

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

.pas-grid section {
  border-left: 3px solid rgba(255, 235, 205, 0.22);
  padding-left: 12px;
}

.pas-grid strong {
  color: var(--cream);
  font-size: 16px;
  font-weight: 760;
}

.pas-grid span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 520;
  line-height: 1.35;
}

.people-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.people-mini-grid div {
  border: 1px solid rgba(255, 235, 205, 0.12);
  border-radius: 8px;
  color: var(--muted);
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 580;
}

.bonus-achieved {
  display: grid;
  grid-template-columns: minmax(180px, max-content) max-content minmax(240px, 1fr);
  gap: 12px;
  align-items: baseline;
  border-top: 1px solid rgba(255, 235, 205, 0.14);
  border-bottom: 1px solid rgba(255, 235, 205, 0.14);
  padding: 14px 0;
}

.bonus-achieved strong {
  color: var(--cream);
  font-size: 18px;
  font-weight: 760;
}

.bonus-achieved b {
  color: var(--orange);
  font-size: 28px;
  font-weight: 850;
}

.bonus-achieved span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 560;
}

.bonus-rules-list {
  margin-top: 2px;
}

.vacation-info-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.vacation-info-panel > strong {
  display: block;
  border-bottom: 1px solid rgba(255, 235, 205, 0.16);
  padding-bottom: 10px;
}

.christmas-info-panel > strong {
  color: var(--cream);
}

.block-info-panel > strong {
  color: var(--ink);
}

.compact-info-list {
  display: grid;
  gap: 0;
  margin-top: 10px;
}

.compact-info-item {
  position: relative;
  border-bottom: 1px solid rgba(255, 235, 205, 0.12);
  padding: 13px 0 13px 12px;
}

.compact-info-item::before {
  content: "";
  position: absolute;
  inset: 15px auto 15px 0;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 235, 205, 0.28);
}

.compact-info-item[data-period-type="navidad"]::before {
  background: var(--orange);
}

.compact-info-item[data-period-type="semana-santa"]::before {
  background: #d6b04d;
}

.compact-info-item[data-period-type="temporada-alta"]::before {
  background: var(--green);
}

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

.compact-info-head small {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 235, 205, 0.18);
  border-radius: 999px;
  color: var(--cream);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  padding: 6px 8px;
}

.compact-info-item[data-period-type="navidad"] .compact-info-head small {
  background: rgba(234, 149, 60, 0.18);
}

.compact-info-item[data-period-type="semana-santa"] .compact-info-head small {
  background: rgba(214, 176, 77, 0.16);
}

.compact-info-item[data-period-type="temporada-alta"] .compact-info-head small {
  background: rgba(100, 140, 78, 0.22);
}

.danger-text {
  color: #ff9a8f !important;
}

.positive-text {
  color: #ffe9c9;
}

.bonus-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.bonus-view .bonus-toolbar {
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 4px;
}

.bonus-month-field {
  display: grid;
  gap: 6px;
  min-width: min(260px, 100%);
}

.bonus-month-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
}

.bonus-month-field select {
  min-height: 44px;
}

.bonus-toolbar > strong {
  border-radius: 999px;
  background: rgba(255, 235, 205, 0.1);
  color: var(--cream);
  font-size: 12px;
  font-weight: 760;
  padding: 8px 10px;
  white-space: nowrap;
}

.bonus-view .bonus-toolbar > strong,
.vacations-view .tool-head > strong {
  border: 1px solid rgba(255, 235, 205, 0.16);
  background: transparent;
  color: var(--muted);
}

.bonus-view .bonus-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  max-width: none;
}

.bonus-month-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 235, 205, 0.22);
}

.bonus-month-tab {
  min-height: 48px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  font-weight: 560;
  padding: 0 24px;
  white-space: nowrap;
}

.bonus-month-tab[aria-pressed="true"] {
  border-bottom-color: var(--orange);
  background: rgba(255, 235, 205, 0.08);
  color: var(--cream);
  font-weight: 720;
}

.bonus-view .bonus-month-field {
  display: none;
}

.bonus-sheet-stack {
  display: grid;
  gap: 20px;
  max-width: none;
  width: 100%;
}

.bonus-sheet {
  display: grid;
  gap: 12px;
  width: 100%;
}

.bonus-sheet-head {
  display: block;
}

.bonus-sheet-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 720;
  line-height: 1.1;
}

.bonus-sheet-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.bonus-sheet-stats span {
  border: 1px solid rgba(255, 235, 205, 0.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
  padding: 5px 8px;
}

.bonus-sheet-scroll {
  overflow-x: auto;
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.28);
}

.bonus-sheet-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  color: var(--cream);
  font-size: 13px;
  table-layout: fixed;
}

.bonus-sheet-table th,
.bonus-sheet-table td {
  height: 42px;
  border-bottom: 1px solid rgba(255, 235, 205, 0.09);
  padding: 5px 10px;
  text-align: right;
  vertical-align: middle;
}

.bonus-sheet-table th:first-child,
.bonus-sheet-table td:first-child {
  text-align: left;
}

.bonus-sheet-table thead th {
  background: rgba(255, 235, 205, 0.08);
  color: var(--cream);
  font-weight: 580;
}

.bonus-sheet-table thead .bonus-target-header {
  height: 82px;
  border-bottom-color: rgba(234, 149, 60, 0.32);
  background: rgba(234, 149, 60, 0.18);
  text-align: left;
}

.bonus-target-header span,
.bonus-target-header strong,
.bonus-target-header b {
  display: block;
}

.bonus-target-header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
  text-transform: uppercase;
}

.bonus-target-header strong {
  color: var(--cream);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.05;
  margin-top: 3px;
}

.bonus-target-header b {
  color: var(--button-text);
  background: var(--orange);
  border-radius: 999px;
  width: fit-content;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  margin-top: 7px;
  padding: 5px 8px;
}

.bonus-sheet-table tbody tr:nth-child(even) {
  background: rgba(255, 235, 205, 0.035);
}

.bonus-sheet-table tbody tr:nth-child(odd) {
  background: rgba(255, 235, 205, 0.075);
}

.bonus-sheet-table tbody th {
  font-weight: 520;
}

.bonus-sheet-number {
  font-variant-numeric: tabular-nums;
}

.bonus-sheet-input-cell {
  background: rgba(255, 235, 205, 0.12);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
}

.bonus-sales-cell-input {
  width: 100%;
  height: 28px;
  min-height: 28px !important;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  padding: 0 2px;
  text-align: right;
}

.bonus-sales-cell-input:focus {
  outline: 2px solid rgba(234, 149, 60, 0.7);
  outline-offset: 1px;
}

.bonus-sheet-total th,
.bonus-sheet-total td {
  border-top: 1px solid rgba(234, 149, 60, 0.72);
  background: rgba(234, 149, 60, 0.16) !important;
  color: var(--ink);
  font-weight: 650;
}

.bonus-sheet-muted-row th,
.bonus-sheet-muted-row td {
  background: rgba(255, 235, 205, 0.055) !important;
  color: var(--muted);
  font-size: 13px;
  font-weight: 520;
}

.bonus-reviews-table {
  min-width: 0;
}

.bonus-view .bonus-form {
  border-top: 0;
  padding-top: 0;
}

.tool-list-heading {
  color: var(--ink);
  font-size: 18px;
  font-weight: 760;
  margin-top: 2px;
}

.vacations-view .tool-list-heading {
  margin-top: 4px;
}

.tool-list,
.stock-list,
.summary-grid,
.bonus-grid {
  display: grid;
  gap: 10px;
}

.summary-grid,
.bonus-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.tool-row,
.stock-row,
.summary-card,
.bonus-card,
.bonus-branch,
.bonus-goal {
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(76, 52, 40, 0.56);
}

.tool-row,
.stock-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
}

.tool-row-main,
.stock-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tool-row strong,
.stock-row strong,
.summary-card strong,
.summary-card b,
.bonus-card strong,
.bonus-branch strong,
.bonus-goal strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.15;
}

.tool-row small,
.stock-row small,
.summary-card span,
.bonus-card span,
.bonus-branch span,
.bonus-goal span,
.bonus-goal small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.25;
}

.vacations-view .summary-card {
  gap: 6px;
  min-height: 0;
  border-color: rgba(255, 235, 205, 0.18);
  background: rgba(91, 61, 48, 0.36);
  padding: 14px 16px;
}

.vacation-top-grid .vacation-summary-card {
  height: 100%;
  align-content: center;
}

.vacations-view .summary-card strong,
.bonus-view .bonus-card strong,
.bonus-view .bonus-branch strong {
  font-size: 18px;
  font-weight: 760;
}

.vacations-view .summary-card b {
  color: var(--cream);
  font-size: 30px;
  font-weight: 850;
  line-height: 1;
}

.stock-row {
  grid-template-columns: 36px 1fr;
  cursor: pointer;
}

.stock-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 235, 205, 0.3);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.stock-row input[type="checkbox"]:checked {
  border-color: rgba(234, 149, 60, 0.86);
  background: var(--selected-bg);
  box-shadow: none;
}

.stock-row input[type="checkbox"]:checked::after {
  content: "✓";
  color: var(--selected-text);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.stock-row.is-requested {
  background: transparent;
  border-color: rgba(234, 149, 60, 0.26);
}

.waste-view .tool-list,
.cash-view .tool-list,
.pokes-view .tool-list,
.stock-view .stock-list,
.vacations-view .tool-list,
.bonus-view .tool-list {
  gap: 4px;
}

.stock-view .stock-list {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 4px 28px;
  align-items: start;
}

.waste-view .tool-row,
.cash-view .tool-row,
.pokes-view .tool-row,
.stock-view .stock-row,
.vacations-view .tool-row,
.bonus-view .tool-row {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 12px 2px;
}

.waste-view .tool-row,
.cash-view .tool-row,
.pokes-view .tool-row,
.stock-view .stock-row {
  border-bottom: 1px solid rgba(255, 235, 205, 0.14);
}

.waste-view .tool-row:first-child,
.cash-view .tool-row:first-child,
.pokes-view .tool-row:first-child {
  border-top: 1px solid rgba(255, 235, 205, 0.14);
}

.stock-view .stock-row:first-child {
  border-top: 0;
}

.stock-view .stock-row {
  grid-template-columns: 32px 1fr;
}

.stock-view .stock-row.is-requested {
  border-color: rgba(234, 149, 60, 0.26);
  background: transparent;
}

.waste-view .small-action,
.cash-view .small-action,
.pokes-view .small-action,
.vacations-view .small-action,
.bonus-view .small-action {
  min-height: 36px;
  border-color: rgba(255, 235, 205, 0.12);
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  font-weight: 650;
}

.summary-card,
.bonus-card,
.bonus-branch {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.bonus-view .bonus-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bonus-view .bonus-card {
  min-height: 116px;
  border-color: rgba(255, 235, 205, 0.18);
  background: rgba(91, 61, 48, 0.36);
  padding: 15px 16px;
}

.bonus-card b {
  color: var(--cream);
  font-size: 30px;
  font-weight: 850;
  line-height: 1;
}

.bonus-branch {
  gap: 12px;
}

.bonus-view .bonus-branch {
  grid-column: span 2;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 0 0;
}

.bonus-branch-head,
.bonus-pace,
.bonus-goals,
.bonus-goal {
  display: grid;
  gap: 8px;
}

.bonus-branch-head b {
  color: var(--cream);
  font-size: 26px;
  font-weight: 850;
  line-height: 1;
}

.bonus-goal {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
}

.bonus-pace {
  border: 0;
  border-radius: 0;
  padding: 8px 0;
}

.bonus-pace-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.bonus-pace-row b {
  color: var(--ink);
  font-size: 13px;
}

.bonus-day-row {
  grid-template-columns: 1fr auto;
}

.readonly-record-row {
  grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr);
  align-items: start;
}

.readonly-record-row strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.bonus-goal.is-reached {
  border-color: rgba(100, 140, 78, 0.62);
  background: rgba(100, 140, 78, 0.24);
}

.bonus-goal-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.bonus-card b {
  color: var(--cream);
  font-size: 28px;
  line-height: 1;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font-size: 13px;
  font-weight: 760;
  padding: 0 11px;
}

.inline-check input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  min-height: 20px;
  border: 2px solid rgba(255, 235, 205, 0.3);
  border-radius: 6px;
  background: transparent;
  color: var(--button-text);
}

.inline-check input:checked {
  border-color: rgba(234, 149, 60, 0.86);
  background: var(--selected-bg);
  color: var(--selected-text);
}

.inline-check input:checked::after {
  content: "✓";
  color: var(--selected-text);
  font-size: 13px;
  font-weight: 850;
}

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

.sunday-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 46px;
  line-height: 0.96;
  letter-spacing: 0;
}

.sunday-date {
  display: grid;
  gap: 5px;
}

.sunday-date span {
  color: var(--orange);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.sunday-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sunday-count,
.countdown-badge {
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.sunday-count {
  background: rgba(255, 235, 205, 0.1);
  color: var(--muted);
}

.countdown-badge {
  background: var(--selected-bg);
  color: var(--selected-text);
}

.pin-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(33, 22, 17, 0.66);
  padding: 20px;
}

.pin-modal[hidden] {
  display: none !important;
}

.pin-card {
  display: grid;
  gap: 14px;
  width: min(430px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 18px;
  box-shadow: var(--shadow);
}

.pin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gate-message {
  min-height: 21px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.admin-head {
  margin-bottom: 16px;
}

.admin-window-tabs,
.admin-subwindow-tabs {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-window-tabs {
  width: fit-content;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 235, 205, 0.18);
  border-radius: 8px;
  background: rgba(76, 52, 40, 0.36);
  padding: 5px;
}

.admin-subwindow-tabs {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.38);
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-subwindow-tabs::-webkit-scrollbar {
  display: none;
}

.admin-window-tab,
.admin-subwindow-tab {
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 650;
}

.admin-window-tab {
  min-height: 48px;
  background: transparent;
  font-size: 16px;
  padding: 0 20px;
}

.admin-subwindow-tab {
  min-height: 42px;
  background: transparent;
  font-size: 15px;
  padding: 0 14px;
}

.admin-window-tab[aria-pressed="true"],
.admin-subwindow-tab[aria-pressed="true"] {
  background: var(--selected-bg);
  color: var(--selected-text);
}

.admin-grid {
  display: grid;
  gap: 18px;
  align-items: start;
}

.admin-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.78);
  padding: 16px;
  min-width: 0;
  overflow: hidden;
}

.admin-description-panel {
  display: none;
}

.admin-meta-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(420px, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
}

.description-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-meta-panel input,
.admin-meta-panel textarea {
  min-height: 72px;
  height: 72px;
  resize: vertical;
}

.admin-meta-panel textarea {
  line-height: 1.28;
}

.admin-labels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  border: 0;
  background: transparent;
  padding: 0;
}

.add-product,
.admin-products {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.78);
  padding: 16px;
}

.add-product {
  display: grid;
  gap: 13px;
}

.admin-labels .add-product {
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.2fr) 120px 120px minmax(120px, 150px);
  align-items: end;
}

.admin-labels .add-product h3 {
  grid-column: 1 / -1;
}

.inline-form,
.container-form,
.stock-admin-form,
.access-admin-form,
.vacation-profile-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.inline-form {
  grid-template-columns: 1fr minmax(110px, 160px);
}

.worker-form {
  grid-template-columns: 1fr 76px minmax(110px, 160px);
}

.container-form {
  grid-template-columns: minmax(180px, 1fr) 170px 140px minmax(120px, 170px);
}

.stock-admin-form {
  grid-template-columns: minmax(190px, 1fr) minmax(160px, 0.8fr) minmax(140px, 0.7fr) minmax(110px, 160px);
}

.access-admin-form {
  grid-template-columns: minmax(160px, 1fr) 130px minmax(120px, 150px) minmax(120px, 160px);
}

.vacation-profile-form {
  grid-template-columns: minmax(180px, 1fr) 170px 140px minmax(130px, 170px);
}

.pin-change-form,
.history-controls {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(130px, 170px);
  gap: 10px;
  margin-top: 14px;
}

.admin-list {
  display: grid;
  gap: 12px;
}

.compact-list,
.task-admin-list,
.pack-admin-list,
.container-admin-list,
.record-admin-list,
.stock-admin-list,
.access-admin-list,
.vacation-admin-list,
.history-list {
  margin-top: 14px;
}

.product-row {
  display: grid;
  grid-template-columns: minmax(145px, 0.7fr) minmax(190px, 1fr) 104px 108px auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(76, 52, 40, 0.62);
  padding: 12px;
}

.product-row label {
  display: grid;
  gap: 6px;
}

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

.delete-button {
  min-height: 52px;
  border: 1px solid rgba(217, 107, 95, 0.68);
  border-radius: 8px;
  background: rgba(217, 107, 95, 0.12);
  color: #ffd8d3;
  cursor: pointer;
  font-weight: 760;
}

.delete-button:hover {
  background: rgba(217, 107, 95, 0.2);
}

.simple-row,
.container-row,
.pack-row,
.task-admin-row,
.record-admin-row,
.access-row,
.vacation-profile-row,
.target-row,
.history-row,
.shift-admin-head,
.shift-section-admin,
.shift-task-admin-row,
.stock-admin-row,
.employment-admin-row,
.salary-admin-row,
.bonus-date-admin-row,
.bonus-worker-admin-row,
.policy-admin-row {
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(76, 52, 40, 0.56);
  padding: 12px;
  min-width: 0;
}

.admin-panel input,
.admin-panel select,
.admin-panel textarea,
.admin-edit-block input,
.admin-edit-block select,
.admin-edit-block textarea {
  min-width: 0;
  width: 100%;
}

.simple-row {
  display: grid;
  grid-template-columns: 1fr 76px auto;
  gap: 10px;
  align-items: center;
}

.task-admin-row {
  display: grid;
  grid-template-columns: 1fr 170px auto;
  gap: 10px;
  align-items: center;
}

.task-admin-list {
  gap: 12px;
}

.admin-pack-group {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(76, 52, 40, 0.48);
  padding: 12px;
}

.admin-pack-group-head,
.employment-admin-worker-head,
.admin-block-head,
.employment-admin-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-pack-group-head h4,
.employment-admin-worker-head h4,
.admin-block-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 720;
}

.admin-pack-group-head span,
.employment-admin-worker-head span,
.admin-block-head p,
.employment-admin-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.35;
}

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

.pack-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 90px auto;
  gap: 10px;
  align-items: center;
}

.pack-row > span,
.admin-inline-message,
.history-week-summary,
.history-task-group span,
.history-task-group p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.container-row {
  display: grid;
  grid-template-columns: 1fr 170px 112px auto;
  gap: 10px;
  align-items: end;
}

.record-admin-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: center;
}

.record-admin-row > .small-action:last-child {
  justify-self: end;
  min-width: 120px;
}

.access-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 180px 150px auto;
  gap: 10px;
  align-items: center;
}

.bonus-source-grid,
.bonus-admin-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.vacation-profile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.admin-subtitle {
  color: var(--ink);
  font-size: 15px;
  font-weight: 760;
  margin: 18px 0 0;
}

.readonly-admin-text {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.bonus-admin-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.target-row {
  display: grid;
  gap: 8px;
}

.bonus-admin-panel {
  display: grid;
  gap: 18px;
}

.bonus-admin-panel > .admin-products-head h3,
.vacation-admin-panel > .admin-products-head h3,
.access-admin-panel .admin-products-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 720;
}

.bonus-admin-settings .admin-block-head,
.bonus-target-block .admin-block-head {
  grid-column: 1 / -1;
}

.target-row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
}

.target-row > .small-action,
.target-row .row-actions {
  justify-self: end;
}

.target-row > .small-action {
  min-width: 44px;
}

.shift-admin-head,
.employment-doc-form {
  display: grid;
  grid-template-columns: minmax(200px, 0.34fr) minmax(320px, 1fr);
  gap: 12px;
}

.employment-admin-panel {
  display: grid;
  gap: 14px;
}

.vacation-admin-panel {
  display: grid;
  gap: 18px;
}

.vacation-admin-main,
.vacation-admin-rules {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: start;
}

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

.vacation-requests-block {
  background: rgba(91, 61, 48, 0.72);
  border-color: rgba(234, 149, 60, 0.42);
  box-shadow: inset 4px 0 0 rgba(234, 149, 60, 0.82);
  padding-left: 18px;
}

.employment-admin-tools,
.employment-admin-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.employment-admin-accordion {
  display: grid;
  gap: 14px;
}

.admin-edit-block {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(76, 52, 40, 0.48);
  padding: 14px;
  min-width: 0;
  overflow: hidden;
}

.employment-admin-panel .employment-doc-form {
  grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.employment-admin-panel .employment-doc-form input,
.employment-admin-panel .employment-doc-form button,
.employment-admin-panel .salary-admin-form input,
.employment-admin-panel .salary-admin-form select,
.employment-admin-panel .salary-admin-form button {
  min-width: 0;
}

.salary-admin-form {
  grid-template-columns: minmax(150px, 0.8fr) minmax(160px, 0.9fr) minmax(220px, 1.2fr) minmax(110px, 140px);
}

.employment-doc-admin-list,
.salary-admin-list {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.employment-admin-worker {
  display: grid;
  gap: 13px;
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-radius: 8px;
  background: rgba(91, 61, 48, 0.46);
  padding: 12px;
}

.employment-admin-blocks {
  gap: 9px;
}

.employment-admin-block {
  border-color: rgba(255, 235, 205, 0.14);
  background: rgba(76, 52, 40, 0.34);
}

.employment-admin-body {
  display: grid;
  gap: 12px;
}

.employment-admin-doc-block,
.employment-admin-block-list {
  display: grid;
  gap: 8px;
}

.employment-admin-block-title {
  color: var(--cream);
  font-size: 13px;
  font-weight: 720;
}

.employment-admin-mini-block {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 235, 205, 0.1);
  padding-bottom: 12px;
}

.employment-admin-mini-block > strong {
  color: var(--cream);
  font-size: 13px;
  font-weight: 760;
}

.employment-inline-add-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) minmax(170px, 0.8fr) minmax(130px, auto);
  gap: 8px;
  align-items: center;
}

.salary-inline-add-form {
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1fr) minmax(110px, auto);
}

.employment-summary-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.employment-summary-admin-row textarea {
  min-height: 52px;
  line-height: 1.3;
}

.access-admin-panel {
  display: grid;
  gap: 14px;
}

.access-admin-panel .admin-products-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
}

.access-password-field {
  display: grid;
  gap: 6px;
}

.access-password-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.access-password-field input {
  font-variant-numeric: tabular-nums;
}

.reading-admin-block {
  margin-top: 16px;
}

.reading-admin-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 235, 205, 0.14);
  border-radius: 8px;
  background: rgba(76, 52, 40, 0.44);
  padding: 10px;
}

.reading-admin-row > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.25;
}

.reading-admin-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.reading-admin-checks .inline-check {
  min-height: 38px;
  padding: 0 10px;
}

.reading-admin-checks .inline-check input {
  width: 16px;
  min-height: 16px;
}

.shift-section-admin summary,
.stock-admin-row,
.employment-admin-row,
.salary-admin-row,
.bonus-date-admin-row,
.bonus-worker-admin-row,
.policy-admin-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.shift-section-admin summary {
  cursor: pointer;
}

.shift-admin-list {
  gap: 14px;
}

.admin-shift-block {
  display: grid;
  gap: 12px;
  border-color: rgba(255, 235, 205, 0.2);
  background: rgba(76, 52, 40, 0.62);
}

.admin-shift-block.is-closing {
  border-color: rgba(234, 149, 60, 0.3);
  background: rgba(94, 59, 39, 0.72);
}

.shift-block-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.shift-block-title {
  display: grid;
  gap: 6px;
}

.shift-block-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.shift-task-admin-list {
  display: grid;
  gap: 10px;
}

.shift-task-admin-row {
  grid-template-columns: minmax(220px, 1fr) auto;
  display: grid;
  gap: 10px;
  align-items: center;
  background: rgba(255, 235, 205, 0.05);
}

.stock-admin-row,
.employment-admin-row {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.salary-admin-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.salary-admin-row .row-actions,
.employment-admin-row .row-actions,
.stock-admin-row .row-actions,
.policy-admin-row .row-actions {
  justify-self: end;
}

.bonus-weekday-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bonus-date-admin-row {
  grid-template-columns: minmax(160px, 1fr) auto;
}

.bonus-worker-admin-row {
  grid-template-columns: minmax(160px, 0.8fr) minmax(160px, 1fr);
}

.policy-admin-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.compact-inline-check {
  min-height: 52px;
}

.history-row {
  display: grid;
  gap: 5px;
}

.history-week-summary {
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(255, 235, 205, 0.08);
  color: var(--cream);
  padding: 10px;
}

.history-worker {
  border: 1px solid rgba(255, 235, 205, 0.16);
  border-radius: 8px;
  background: rgba(76, 52, 40, 0.56);
  padding: 0;
}

.history-worker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 11px 12px 11px 15px;
}

.history-worker summary strong,
.history-worker summary span {
  color: var(--cream);
  font-size: 14px;
  font-weight: 760;
}

.history-worker-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 2px 12px 12px 15px;
}

.history-task-group {
  display: grid;
  align-content: start;
  gap: 6px;
}

.history-task-group span {
  color: var(--cream);
}

.history-task-group p {
  margin: 0;
  line-height: 1.28;
}

.history-row strong {
  color: var(--ink);
  font-size: 15px;
}

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

.small-action {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 235, 205, 0.08);
  color: var(--cream);
  cursor: pointer;
  font-weight: 760;
  padding: 0 12px;
}

.small-action:hover {
  border-color: var(--cream);
}

.admin-savebar {
  position: sticky;
  bottom: 14px;
  z-index: 8;
  margin-top: 18px;
  border: 1px solid rgba(255, 235, 205, 0.18);
  border-radius: 8px;
  background: rgba(76, 52, 40, 0.94);
  padding: 12px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
}

.admin-savebar p {
  min-height: 22px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 620;
  margin: 0;
}

.admin-savebar .primary-button {
  min-height: 50px;
  min-width: 190px;
  border-color: #ffb05c;
  background: var(--orange);
  font-size: 16px;
  font-weight: 760;
  box-shadow: 0 12px 28px rgba(234, 149, 60, 0.2);
}

.bonus-admin-settings > .admin-inline-message {
  grid-column: 1 / -1;
}

#printArea {
  display: none;
}

@media (max-width: 1080px) {
  .cleaning-overview {
    grid-template-columns: 1fr;
  }

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

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

  .manual-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 20px, 680px);
  }

  .topbar,
  .admin-head,
  .admin-products-head,
  .list-head,
  .progress-head,
  .admin-savebar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .admin-savebar {
    width: 100%;
  }

  .window-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .subwindow-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    overflow: visible;
    width: 100%;
  }

  .window-tab,
  .subwindow-tab {
    padding: 0 8px;
  }

  .subwindow-tab {
    line-height: 1.05;
    white-space: normal;
  }

  .topbar-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }

  .print-options {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .product-button {
    min-height: 78px;
    font-size: 18px;
  }

  .product-button strong {
    font-size: 18px;
  }

  .admin-window-tabs,
  .admin-subwindow-tabs {
    display: grid;
    width: 100%;
  }

  .admin-window-tabs {
    grid-template-columns: repeat(3, 1fr);
  }

  .admin-subwindow-tabs {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .admin-window-tab,
  .admin-subwindow-tab {
    line-height: 1.05;
    padding: 0 8px;
    white-space: normal;
  }

  .cleaning-summary,
  .cleaning-overview,
  .admin-labels,
  .admin-labels .add-product,
  .admin-meta-panel,
  .bonus-admin-settings,
  .vacation-admin-main,
  .vacation-admin-rules,
  .employment-admin-tools,
  .employment-admin-content,
  .employment-admin-panel .employment-doc-form,
  .inline-form,
  .pin-change-form,
	  .history-controls,
	  .vacation-top-grid,
	  .vacation-forecast-panel,
	  .vacation-info-grid,
  .container-form,
  .stock-admin-form,
  .access-admin-form,
  .vacation-profile-form,
  .waste-form,
  .cash-form,
  .poke-form,
	  .vacation-form,
	  .manual-toolbar,
	  .bonus-form,
  .product-row,
  .simple-row,
  .pack-row,
  .container-row,
  .record-admin-row,
  .access-row,
  .vacation-profile-row,
  .target-row,
  .bonus-admin-columns,
  .bonus-source-grid,
  .salary-admin-form,
  .shift-admin-head,
  .shift-block-head,
  .shift-task-admin-row,
  .reading-admin-row,
  .task-admin-row {
    grid-template-columns: 1fr;
  }

  .workers-panel,
  .shift-guide-grid,
  .history-worker-body {
    grid-template-columns: 1fr;
  }

  .bonus-view .bonus-grid,
  .bonus-view .bonus-branch {
    grid-template-columns: 1fr;
  }

  .bonus-view .bonus-branch {
    grid-column: auto;
  }

  #taskTabs,
  #companyTabs,
  #peopleTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #taskTabs .subwindow-tab,
  #companyTabs .subwindow-tab,
  #peopleTabs .subwindow-tab {
    min-height: 48px;
    font-size: 16px;
  }

  .vacation-info-grid {
    gap: 26px;
  }

  .compact-info-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

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

  .sunday-head h4 {
    font-size: 34px;
  }

  .sunday-meta {
    justify-content: flex-start;
  }

  .tool-head,
  .tool-row,
  .bonus-toolbar,
  .stock-alert-panel {
    align-items: stretch;
  }

	  .tool-head {
	    flex-direction: column;
	  }

  .bonus-toolbar {
    flex-direction: column;
  }

  .bonus-view .bonus-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bonus-month-tabs {
    display: none;
  }

  .bonus-view .bonus-month-field {
    display: grid;
  }

  .bonus-sheet-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .bonus-sheet-stats {
    justify-content: flex-start;
  }

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

  .bonus-sheet-table th,
  .bonus-sheet-table td {
    height: 32px;
    padding: 0 8px;
  }

  .bonus-sheet-table thead .bonus-sheet-band th {
    height: 38px;
    font-size: 12px;
  }

  .bonus-toolbar > strong {
    width: fit-content;
  }

  .shift-guide-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .shift-guide-tab {
    padding: 0 12px;
  }

  .shift-guide-head h2 {
    font-size: 30px;
  }

	  .vacation-forecast-panel b {
	    text-align: left;
	  }

  .manual-pdf-link {
    width: 100%;
  }

  .manual-section-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tool-row,
  .stock-alert-panel {
    grid-template-columns: 1fr;
  }

  .stock-view .stock-list {
    grid-template-columns: 1fr;
  }

  .employment-document-row,
  .employment-info-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .employment-document-row .document-actions {
    justify-content: stretch;
  }

  .employment-document-row .small-action {
    flex: 1 1 auto;
  }

  .list-head > span {
    text-align: left;
  }

  .worker-picker {
    grid-template-columns: 1fr 1fr;
  }

  .row-actions {
    justify-content: stretch;
  }

  .row-actions .small-action,
  .simple-row .small-action {
    flex: 1 1 auto;
  }

  .reading-progress-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

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

  .last-print {
    align-items: flex-start;
    flex-direction: column;
  }

  .last-print strong {
    text-align: left;
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    min-width: 0;
  }

  .app-shell {
    width: 100%;
    max-width: none;
    padding: max(10px, env(safe-area-inset-top)) 12px max(118px, calc(env(safe-area-inset-bottom) + 44px));
    overflow-x: hidden;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .window-tabs {
    display: flex;
    width: 100%;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .window-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
    gap: 8px;
  }

  .topbar-actions .user-pill,
  .topbar-actions .admin-button,
  .topbar-actions #logoutAccess,
  .topbar-actions #openAdmin,
  .topbar-actions #closeAdmin {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
  }

  .topbar-actions .user-pill {
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-actions #logoutAccess {
    order: 99;
  }

  #taskTabs,
  #companyTabs,
  #peopleTabs,
  .subwindow-tabs,
  .admin-window-tabs,
  .admin-subwindow-tabs {
    display: flex;
    width: calc(100% + 24px);
    margin: 0 -12px 12px;
    padding: 0 12px 8px;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #taskTabs::-webkit-scrollbar,
  #companyTabs::-webkit-scrollbar,
  #peopleTabs::-webkit-scrollbar,
  .subwindow-tabs::-webkit-scrollbar,
  .admin-window-tabs::-webkit-scrollbar,
  .admin-subwindow-tabs::-webkit-scrollbar {
    display: none;
  }

  #taskTabs .subwindow-tab,
  #companyTabs .subwindow-tab,
  #peopleTabs .subwindow-tab,
  .subwindow-tab,
  .admin-window-tab,
  .admin-subwindow-tab {
    flex: 0 0 auto;
    width: auto;
    max-width: 82vw;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 231, 196, 0.18);
    border-radius: 8px;
    background: rgba(255, 231, 196, 0.03);
    font-size: 13px;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
  }

  #taskTabs .subwindow-tab[aria-pressed="true"],
  #companyTabs .subwindow-tab[aria-pressed="true"],
  #peopleTabs .subwindow-tab[aria-pressed="true"],
  .subwindow-tab[aria-pressed="true"],
  .admin-window-tab[aria-pressed="true"],
  .admin-subwindow-tab[aria-pressed="true"] {
    background: var(--selected-bg);
    border-color: var(--selected-bg);
    color: var(--selected-text);
  }

  .view-description,
  .view-note,
  .cleaning-summary p,
  .empty-state {
    max-width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.32;
  }

  .main-view,
  .subview {
    min-width: 0;
  }

  .quick-form,
  .waste-form,
  .cash-form,
  .poke-form,
  .vacation-form,
  .bonus-form,
  .admin-meta-grid,
  .admin-inline-form,
  .admin-two-column,
  .admin-compact-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
    min-width: 0;
  }

  .app-shell input,
  .app-shell select,
  .app-shell textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .waste-view input,
  .waste-view select,
  .cash-view input,
  .cash-view select,
  .poke-view input,
  .poke-view select,
  .vacations-view input,
  .vacations-view select,
  .bonus-view input,
  .bonus-view select,
  .admin-view input,
  .admin-view select,
  .admin-view textarea {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 16px;
  }

  .app-shell input[type="date"] {
    display: block;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
  }

  .primary-button,
  .ghost-button,
  .plain-button,
  .small-action {
    min-height: 40px;
    border-radius: 8px;
    font-size: 14px;
  }

  .cash-view .primary-button,
  .waste-view .primary-button,
  .poke-view .primary-button,
  .vacations-view .primary-button {
    width: 100%;
    min-height: 44px;
  }

  .history-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 4px;
  }

  .history-filter select {
    min-height: 38px;
    font-size: 14px;
  }

  .tool-panel,
  .stock-alert-panel,
  .vacation-request-block,
  .vacation-info-panel,
  .vacation-forecast-panel,
  .people-block,
  .admin-panel,
  .admin-meta-panel {
    border-radius: 8px;
  }

  .tool-list,
  .people-block-list {
    gap: 0;
  }

  .tool-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
    padding: 12px 0;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
    background: transparent;
  }

  .tool-row + .tool-row {
    border-top: 1px solid rgba(255, 231, 196, 0.14);
  }

  .tool-row-main,
  .tool-row > div {
    min-width: 0;
  }

  .tool-row strong {
    font-size: 16px;
    line-height: 1.16;
    overflow-wrap: anywhere;
  }

  .tool-row small {
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .tool-row .small-action,
  .row-actions .small-action,
  .simple-row .small-action {
    width: 100%;
  }

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

  .worker-score {
    min-height: 72px;
    padding: 10px;
    border-radius: 8px;
    gap: 8px;
  }

  .worker-score strong,
  .worker-score span {
    font-size: 16px;
  }

  .mini-track {
    height: 6px;
  }

  .task-pack + .task-pack {
    margin-top: 12px;
  }

  .task-pack-head {
    padding: 2px 0 8px;
  }

  .task-pack-head strong,
  .sunday-head h4,
  .opening-block-title {
    font-size: 18px;
    line-height: 1.1;
  }

  .checklist,
  .compact-checklist {
    gap: 0;
  }

  .check-row {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    min-height: 44px;
    padding: 9px 0;
    border-radius: 0;
  }

  .check-row + .check-row {
    border-top: 1px solid rgba(255, 231, 196, 0.12);
  }

  .check-mark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border-width: 1px;
    font-size: 13px;
  }

  .check-content strong {
    font-size: 15px;
    line-height: 1.18;
  }

  .check-content small,
  .countdown-badge {
    font-size: 12px;
  }

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

  .product-button {
    min-height: 64px;
    padding: 10px;
    border-radius: 8px;
  }

  .product-button strong {
    font-size: 15px;
    line-height: 1.12;
  }

  .print-options {
    gap: 8px;
    margin-top: 10px;
  }

  .last-print {
    position: static;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
  }

  .stock-view .category-tabs {
    width: calc(100% + 24px);
    margin: 0 -12px 10px;
    padding: 0 12px 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .stock-view .category-tabs::-webkit-scrollbar {
    display: none;
  }

  .stock-view .tab-button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .stock-view .stock-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .people-block summary {
    min-height: 46px;
    padding: 10px 12px;
  }

  .people-block summary span,
  .people-section-title {
    font-size: 16px;
  }

  .people-block-body {
    padding: 10px 12px 12px;
    gap: 10px;
  }

  .employment-document-row,
  .employment-info-item,
  .document-card,
  .reading-card,
  .simple-row {
    padding: 10px;
    border-radius: 8px;
  }

  .document-actions,
  .employment-document-row .document-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    justify-content: stretch;
  }

  .document-actions .small-action {
    width: 100%;
  }

  .vacation-top-grid,
  .vacation-info-grid,
  .vacation-request-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .vacation-request-block,
  .vacation-info-panel,
  .vacation-forecast-panel {
    padding: 12px;
  }

  .vacation-forecast-panel strong,
  .vacation-info-panel > strong {
    font-size: 16px;
  }

  .vacation-forecast-panel b {
    font-size: 20px;
  }

  .calendar-head {
    gap: 10px;
  }

  .calendar-legend {
    gap: 6px;
  }

  .calendar-legend-item {
    min-height: 26px;
    padding: 0 7px;
    border-radius: 7px;
    font-size: 11px;
  }

  .calendar-period-tabs {
    width: 100%;
    justify-content: space-between;
  }

  .calendar-period-label {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
    font-size: 13px;
  }

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

  .calendar-year > h3 {
    font-size: 22px;
  }

  .calendar-day {
    min-height: 34px;
    border-radius: 7px;
    font-size: 12px;
  }

  .bonus-month-field {
    display: grid;
    margin-bottom: 10px;
  }

  .bonus-month-field select {
    width: 100%;
  }

  .bonus-sheet-stack {
    gap: 16px;
  }

  .bonus-sheet-section {
    gap: 8px;
  }

  .bonus-sheet-scroll {
    width: calc(100% + 24px);
    margin: 0 -12px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .bonus-sheet-table {
    min-width: 560px;
    font-size: 12px;
  }

  .bonus-sheet-table th,
  .bonus-sheet-table td {
    height: 40px;
    padding: 6px 7px;
  }

  .bonus-target-header strong {
    font-size: 16px;
  }

  .bonus-target-header b {
    font-size: 11px;
  }

  .admin-view {
    min-width: 0;
  }

  .admin-head h1 {
    font-size: 28px;
    line-height: 1;
  }

  .admin-meta-panel,
  .admin-panel {
    padding: 12px;
  }

  .admin-meta-panel input,
  .admin-meta-panel textarea {
    min-height: 56px;
  }

  .admin-row,
  .admin-objective-row,
  .admin-day-row,
  .admin-document-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
  }

  .admin-savebar {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    padding: 10px;
    border-radius: 10px;
  }
}

@media (max-width: 760px) {
  .access-logo {
    left: 16px;
    width: clamp(94px, 30vw, 126px);
  }

  .app-shell {
    padding: max(8px, env(safe-area-inset-top)) 12px max(118px, calc(env(safe-area-inset-bottom) + 44px));
  }

  .topbar {
    gap: 9px;
    margin-bottom: 12px;
  }

  .topbar-head {
    display: grid;
    grid-template-columns: minmax(74px, auto) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .brand-logo {
    width: clamp(78px, 22vw, 108px);
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }

  .topbar-actions .user-pill,
  .topbar-actions #logoutAccess,
  .topbar-actions #openAdmin,
  .topbar-actions #closeAdmin {
    min-height: 34px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1;
  }

  .topbar-actions .user-pill {
    justify-content: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .window-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
    padding: 4px;
    overflow: visible;
  }

  .window-tab {
    min-width: 0;
    min-height: 38px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: clamp(13px, 3.75vw, 16px);
    line-height: 1;
    white-space: normal;
  }

  #taskTabs,
  #companyTabs,
  #peopleTabs,
  .subwindow-tabs,
  .admin-window-tabs,
  .admin-subwindow-tabs {
    display: grid;
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 0;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    flex-wrap: initial;
  }

  #taskTabs,
  #companyTabs,
  .admin-subwindow-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-window-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  #peopleTabs .subwindow-tab:last-child {
    grid-column: 1 / -1;
  }

  #taskTabs .subwindow-tab,
  #companyTabs .subwindow-tab,
  #peopleTabs .subwindow-tab,
  .subwindow-tab,
  .admin-window-tab,
  .admin-subwindow-tab {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 39px;
    padding: 0 8px;
    border: 1px solid rgba(255, 231, 196, 0.18);
    border-radius: 8px;
    background: rgba(255, 231, 196, 0.045);
    color: var(--cream);
    font-size: clamp(11px, 3.2vw, 14px);
    font-weight: 780;
    line-height: 1.08;
    white-space: normal;
    overflow: hidden;
    text-align: center;
  }

  #taskTabs .subwindow-tab[aria-pressed="true"],
  #companyTabs .subwindow-tab[aria-pressed="true"],
  #peopleTabs .subwindow-tab[aria-pressed="true"],
  .subwindow-tab[aria-pressed="true"],
  .admin-window-tab[aria-pressed="true"],
  .admin-subwindow-tab[aria-pressed="true"] {
    background: var(--selected-bg);
    border-color: var(--selected-bg);
    color: var(--selected-text) !important;
    box-shadow: none;
  }

  .app-shell input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: left;
    justify-self: stretch;
  }

  .app-shell input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }

  .app-shell input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: auto;
  }

  .employment-inline-add-form,
  .salary-inline-add-form,
  .employment-summary-admin-row {
    grid-template-columns: 1fr;
  }

  .employment-admin-worker {
    padding: 10px;
  }

  .employment-admin-block summary {
    min-height: 40px;
  }

  .employment-admin-body .row-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .employment-admin-body .row-actions .small-action {
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
  }

  .check-row,
  .containers-view .check-row,
  .cleaning-view .check-row {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 46px;
    border-radius: 12px;
    padding: 8px 4px;
  }

  .check-mark,
  .containers-view .check-mark {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .containers-view .check-row.is-completed,
  .cleaning-view .check-row.is-completed,
  .check-row.is-completed {
    background: transparent;
    border-color: transparent;
  }

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

  #peopleTabs .subwindow-tab:last-child {
    grid-column: auto;
  }

  .clock-panel {
    gap: 12px;
  }

  .clock-card {
    gap: 12px;
    border-radius: 14px;
    padding: 14px;
  }

  .clock-card-head {
    align-items: flex-start;
  }

  .clock-card-head span {
    font-size: 12px;
  }

  .clock-card-head strong {
    font-size: clamp(42px, 15vw, 58px);
  }

  .clock-card-head small {
    font-size: 12px;
  }

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

  .clock-stats span {
    min-width: 0;
    padding: 9px;
    font-size: 12px;
  }

  .clock-stats b {
    font-size: 17px;
  }

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

  .clock-actions .primary-button,
  .clock-actions .plain-button {
    min-height: 46px;
  }

  .clock-event-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px;
  }

  .clock-event-badge {
    width: fit-content;
    min-width: 0;
    min-height: 28px;
  }

  .clock-settings-grid,
  .clock-record-admin-row {
    grid-template-columns: 1fr !important;
  }

  .clock-settings-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .clock-settings-actions .small-action {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .brand-lockup {
    justify-content: flex-start;
  }

  .topbar-actions {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 6px;
  }

  .topbar-actions .theme-toggle {
    min-width: 0;
  }

  .topbar-actions > * {
    min-width: 0;
  }

  #taskTabs,
  #companyTabs,
  #peopleTabs,
  .subwindow-tabs,
  .admin-window-tabs,
  .admin-subwindow-tabs {
    display: grid !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  #taskTabs,
  #companyTabs,
  .admin-subwindow-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #peopleTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .subwindow-tab,
  .admin-window-tab,
  .admin-subwindow-tab {
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
  }

  #taskTabs .subwindow-tab[aria-pressed="true"],
  #companyTabs .subwindow-tab[aria-pressed="true"],
  #peopleTabs .subwindow-tab[aria-pressed="true"],
  .subwindow-tab[aria-pressed="true"],
  .admin-window-tab[aria-pressed="true"],
  .admin-subwindow-tab[aria-pressed="true"] {
    background: var(--selected-bg) !important;
    border-color: var(--selected-bg) !important;
    color: var(--selected-text) !important;
  }
}

:root[data-theme="light"] .plain-button,
:root[data-theme="light"] .ghost-button,
:root[data-theme="light"] .window-tabs,
:root[data-theme="light"] .subwindow-tabs,
:root[data-theme="light"] .tab-button,
:root[data-theme="light"] .admin-tab,
:root[data-theme="light"] .admin-window-tab,
:root[data-theme="light"] .admin-subwindow-tab {
  border-color: rgba(76, 52, 40, 0.28);
  background: rgba(255, 248, 234, 0.3);
  color: var(--ink);
}

:root[data-theme="light"] .window-tab,
:root[data-theme="light"] .subwindow-tab {
  color: rgba(76, 52, 40, 0.78);
}

:root[data-theme="light"] .window-tab[aria-pressed="true"],
:root[data-theme="light"] .subwindow-tab[aria-pressed="true"],
:root[data-theme="light"] .tab-button[aria-pressed="true"],
:root[data-theme="light"] .admin-tab[aria-pressed="true"],
:root[data-theme="light"] .admin-window-tab[aria-pressed="true"],
:root[data-theme="light"] .admin-subwindow-tab[aria-pressed="true"],
:root[data-theme="light"] #taskTabs .subwindow-tab[aria-pressed="true"],
:root[data-theme="light"] #companyTabs .subwindow-tab[aria-pressed="true"],
:root[data-theme="light"] #peopleTabs .subwindow-tab[aria-pressed="true"] {
  border-color: var(--selected-bg) !important;
  background: var(--selected-bg) !important;
  color: var(--selected-text) !important;
}

:root[data-theme="light"] #taskTabs .subwindow-tab,
:root[data-theme="light"] #companyTabs .subwindow-tab,
:root[data-theme="light"] #peopleTabs .subwindow-tab,
:root[data-theme="light"] .product-button,
:root[data-theme="light"] .worker-score,
:root[data-theme="light"] .shift-guide-section,
:root[data-theme="light"] .clock-card,
:root[data-theme="light"] .clock-stats span,
:root[data-theme="light"] .clock-event-row,
:root[data-theme="light"] .vacation-top-grid .vacation-forecast-panel,
:root[data-theme="light"] .vacation-request-block,
:root[data-theme="light"] .vacation-info-panel,
:root[data-theme="light"] .compact-info-item,
:root[data-theme="light"] .tool-row,
:root[data-theme="light"] .stock-row,
:root[data-theme="light"] .summary-card,
:root[data-theme="light"] .bonus-card,
:root[data-theme="light"] .bonus-branch,
:root[data-theme="light"] .bonus-goal,
:root[data-theme="light"] .reading-progress-panel,
:root[data-theme="light"] .reading-checklist label,
:root[data-theme="light"] .bonus-sheet-scroll,
:root[data-theme="light"] .manual-group[data-tone],
:root[data-theme="light"] .manual-table-wrap,
:root[data-theme="light"] .admin-panel,
:root[data-theme="light"] .admin-edit-block,
:root[data-theme="light"] .editable-row,
:root[data-theme="light"] .simple-row {
  border-color: rgba(76, 52, 40, 0.24);
  background: rgba(255, 248, 234, 0.34);
}

:root[data-theme="light"] .people-block-list,
:root[data-theme="light"] .employment-note-list,
:root[data-theme="light"] .employment-info-grid,
:root[data-theme="light"] .calendar-note,
:root[data-theme="light"] .calendar-month,
:root[data-theme="light"] .vacation-request-block .tool-row:first-child,
:root[data-theme="light"] .bonus-sheet-total th,
:root[data-theme="light"] .bonus-sheet-total td {
  border-top-color: rgba(76, 52, 40, 0.22);
}

:root[data-theme="light"] .people-block,
:root[data-theme="light"] .employment-note-list span,
:root[data-theme="light"] .employment-document-row,
:root[data-theme="light"] .employment-info-item,
:root[data-theme="light"] .vacation-request-block .tool-row,
:root[data-theme="light"] .bonus-sheet-table th,
:root[data-theme="light"] .bonus-sheet-table td,
:root[data-theme="light"] .manual-table th,
:root[data-theme="light"] .manual-table td {
  border-bottom-color: rgba(76, 52, 40, 0.2);
}

:root[data-theme="light"] .people-block {
  border-color: rgba(76, 52, 40, 0.12);
  background: rgba(255, 248, 234, 0.18);
}

:root[data-theme="light"] .people-block[open] {
  border-color: rgba(76, 52, 40, 0.28);
  background: rgba(255, 248, 234, 0.42);
}

:root[data-theme="light"] .people-block[open] summary,
:root[data-theme="light"] .shift-guide-section h3,
:root[data-theme="light"] .bonus-sheet-table thead th,
:root[data-theme="light"] .manual-table th {
  border-bottom-color: rgba(76, 52, 40, 0.2);
  background: rgba(76, 52, 40, 0.07);
  color: var(--ink);
}

:root[data-theme="light"] .vacation-request-block.is-flexible-vacation .tool-head > strong {
  border-color: rgba(76, 52, 40, 0.24);
  background: rgba(76, 52, 40, 0.08);
  color: var(--ink);
}

:root[data-theme="light"] .bonus-sheet-table tbody tr:nth-child(even) {
  background: rgba(255, 248, 234, 0.22);
}

:root[data-theme="light"] .bonus-sheet-table tbody tr:nth-child(odd) {
  background: rgba(255, 248, 234, 0.42);
}

:root[data-theme="light"] .bonus-sheet-table thead .bonus-target-header {
  border-bottom-color: rgba(234, 149, 60, 0.5);
  background: rgba(234, 149, 60, 0.2);
}

:root[data-theme="light"] .bonus-sheet-input-cell {
  background: rgba(255, 240, 210, 0.78);
  color: var(--ink);
}

:root[data-theme="light"] .bonus-sales-cell-input {
  color: var(--ink);
}

:root[data-theme="light"] .calendar-weekdays span,
:root[data-theme="light"] .calendar-day {
  color: rgba(76, 52, 40, 0.58);
}

:root[data-theme="light"] .calendar-day {
  border-color: rgba(76, 52, 40, 0.08);
}

:root[data-theme="light"] .calendar-day.is-workday {
  border-color: rgba(70, 118, 63, 0.46);
  color: #25481f;
  background: rgba(100, 163, 94, 0.32);
}

:root[data-theme="light"] .calendar-day.is-holiday {
  border-color: rgba(165, 119, 42, 0.5);
  color: #5a3f19;
  background: rgba(214, 176, 77, 0.38);
}

:root[data-theme="light"] .calendar-day.is-vacation,
:root[data-theme="light"] .calendar-day.is-own-vacation {
  border-color: rgba(178, 59, 95, 0.46);
  color: #5b1d2f;
  background: rgba(239, 106, 147, 0.34);
}

:root[data-theme="light"] .calendar-day.is-coworker-vacation {
  border-color: rgba(32, 112, 127, 0.5);
  color: #174b55;
  background: rgba(68, 154, 170, 0.34);
}

:root[data-theme="light"] .calendar-day.is-today {
  border-color: rgba(165, 40, 35, 0.78);
  background: #c54d42;
  color: #fff6ed;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 229, 0.55);
}

:root[data-theme="light"] .check-row:hover {
  background: rgba(76, 52, 40, 0.045);
}

:root[data-theme="light"] .check-mark,
:root[data-theme="light"] .stock-row input[type="checkbox"],
:root[data-theme="light"] .reading-checklist input,
:root[data-theme="light"] .inline-check input {
  border-color: rgba(76, 52, 40, 0.32);
}

:root[data-theme="light"] .danger-text {
  color: #b6473f !important;
}

:root[data-theme="light"] .positive-text {
  color: #3f7037 !important;
}

/* Final responsive and control pass: keep the active navigation compact and readable. */
@media (max-width: 760px) {
  .app-shell {
    padding: max(20px, env(safe-area-inset-top)) 16px max(124px, calc(env(safe-area-inset-bottom) + 48px));
  }

  .topbar {
    gap: 14px;
    margin-bottom: 20px;
  }

  .topbar-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
  }

  .brand-lockup {
    padding: 2px 2px 0;
  }

  .brand-logo {
    width: 116px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "user theme admin logout";
    gap: 8px;
    align-items: stretch;
  }

  .topbar-actions .user-pill {
    grid-area: user;
  }

  .topbar-actions .theme-toggle {
    grid-area: theme;
  }

  .topbar-actions #openAdmin {
    grid-area: admin;
  }

  .topbar-actions #closeAdmin {
    grid-area: back;
  }

  .topbar-actions #logoutAccess {
    grid-area: logout;
  }

  .app-shell.is-admin-mode .topbar-actions,
  .app-shell[data-view="admin"] .topbar-actions {
    grid-template-areas: "user theme back logout";
  }

  #taskTabs[hidden],
  #companyTabs[hidden],
  #peopleTabs[hidden],
  #adminTaskTabs[hidden],
  #adminCompanyTabs[hidden],
  #adminPeopleTabs[hidden] {
    display: none !important;
  }

  #taskTabs:not([hidden]),
  #companyTabs:not([hidden]),
  #peopleTabs:not([hidden]),
  #adminTaskTabs:not([hidden]),
  #adminCompanyTabs:not([hidden]),
  #adminPeopleTabs:not([hidden]) {
    display: grid !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .subwindow-tab,
  .admin-window-tab,
  .admin-subwindow-tab {
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .cash-form,
  .poke-form,
  .vacation-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .app-shell input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    text-align: left;
  }

  .app-shell input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }

  .clock-panel,
  .clock-card,
  .clock-card-head,
  .clock-card-head > div {
    min-width: 0;
    max-width: 100%;
  }

  .clock-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .clock-card-head strong {
    font-size: clamp(38px, 14vw, 54px);
  }

  .clock-card-head small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .reading-checklist {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.app-shell[data-view="training"] .safety-view {
  display: block;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 235, 205, 0.2);
}

.app-shell[data-view="training"] .safety-view .reading-progress-panel {
  display: none;
}

.reading-progress-panel {
  gap: 12px;
}

.reading-checklist {
  gap: 0 26px;
}

.reading-checklist label {
  min-height: 52px;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
}

.reading-checklist label.is-read {
  color: var(--cream);
}

@media (min-width: 761px) and (max-width: 1080px) {
  .reading-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stock-row {
  grid-template-columns: 32px minmax(0, 1fr) !important;
  position: relative;
}

.stock-row input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.stock-check-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 235, 205, 0.36);
  border-radius: 7px;
  background: transparent;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.stock-row input[type="checkbox"]:checked + .stock-check-mark {
  border-color: var(--orange);
  background: var(--orange);
}

.stock-row input[type="checkbox"]:checked + .stock-check-mark::after {
  content: "✓";
  color: #4c3428;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.stock-row input[type="checkbox"]:focus-visible + .stock-check-mark {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.bonus-reviews-table .bonus-target-header {
  text-align: right;
}

.bonus-reviews-table .bonus-target-header strong,
.bonus-reviews-table .bonus-target-header b {
  display: block;
  text-align: right;
}

:root[data-theme="light"] .people-block,
:root[data-theme="light"] .tool-panel,
:root[data-theme="light"] .reading-progress-panel,
:root[data-theme="light"] .stock-row,
:root[data-theme="light"] .check-row {
  border-color: rgba(76, 52, 40, 0.28);
}

:root[data-theme="light"] .people-block {
  background: rgba(255, 248, 234, 0.5);
}

:root[data-theme="light"] .people-block + .people-block,
:root[data-theme="light"] .reading-checklist label,
:root[data-theme="light"] .stock-view .stock-row,
:root[data-theme="light"] .check-row + .check-row {
  border-color: rgba(76, 52, 40, 0.24);
}

:root[data-theme="light"] .stock-check-mark {
  border-color: rgba(76, 52, 40, 0.48);
}

/* v88: durable controls and a single visual rhythm across the back office. */
.topbar-actions #closeAdmin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 42px;
  height: 42px;
  max-height: 42px;
  padding: 0 15px;
  border-color: rgba(255, 235, 205, 0.28);
  background: rgba(255, 235, 205, 0.06);
  color: var(--cream);
  line-height: 1;
}

.topbar-actions #closeAdmin:hover {
  border-color: var(--cream);
  background: rgba(255, 235, 205, 0.1);
}

.admin-meta-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.admin-meta-panel .description-field,
.admin-meta-panel input,
.admin-meta-panel textarea {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.admin-meta-panel textarea {
  min-height: 72px;
}

#workersAdminList .simple-row {
  grid-template-columns: minmax(0, 1fr) max-content;
}

#workersAdminList .small-action,
.worker-form .primary-button {
  min-width: 116px;
  white-space: nowrap;
}

.worker-form {
  grid-template-columns: minmax(0, 1fr) max-content;
  min-width: 0;
}

.admin-list,
.simple-row,
.task-admin-row,
.worker-form {
  min-width: 0;
}

.bonus-reviews-table th,
.bonus-reviews-table td,
.bonus-reviews-table .bonus-target-header,
.bonus-reviews-table .bonus-target-header strong,
.bonus-reviews-table .bonus-target-header b {
  text-align: left !important;
}

.bonus-reviews-table .bonus-target-header strong,
.bonus-reviews-table .bonus-target-header b {
  display: block;
}

.app-shell[data-view="training"] .safety-view {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.calendar-legend-item--today {
  background: rgba(35, 146, 139, 0.75);
  color: #edfffc;
}

.calendar-day.is-today {
  border-color: #62d6cf;
  background: #167d77;
  color: #f0fffd;
  box-shadow: inset 0 0 0 2px rgba(231, 255, 251, 0.28);
}

:root[data-theme="light"] .calendar-legend-item--today {
  background: #0d837b;
  color: #f5fffd;
}

:root[data-theme="light"] .calendar-day.is-today {
  border-color: #075f59;
  background: #0b847a;
  color: #f6fffd;
  box-shadow: inset 0 0 0 2px rgba(245, 255, 253, 0.62);
}

@media (max-width: 760px) {
  .app-shell {
    padding-top: max(32px, calc(env(safe-area-inset-top) + 14px));
  }

  .topbar-actions #closeAdmin {
    width: auto;
    min-height: 38px;
    height: 38px;
    max-height: 38px;
    padding: 0 10px;
  }

  .admin-meta-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-meta-panel input,
  .admin-meta-panel textarea {
    min-height: 58px;
    height: auto;
  }

  #workersAdminList .simple-row,
  .worker-form {
    grid-template-columns: minmax(0, 1fr);
  }

  #workersAdminList .small-action,
  .worker-form .primary-button {
    width: 100%;
    min-width: 0;
  }

  .app-shell input[type="date"] {
    display: block;
    box-sizing: border-box;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px;
    padding: 0 14px !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  .app-shell input[type="date"]::-webkit-datetime-edit,
  .app-shell input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  .app-shell input[type="date"]::-webkit-date-and-time-value {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }
}

:root[data-theme="light"] .stock-row input[type="checkbox"]:checked + .stock-check-mark {
  border-color: var(--orange);
  background: var(--orange);
}

/* Light mode uses open lists, not a stack of pale rectangles. */
:root[data-theme="light"] .tool-list .tool-row,
:root[data-theme="light"] .stock-view .stock-row,
:root[data-theme="light"] .reading-checklist label {
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: rgba(76, 52, 40, 0.22);
  background: transparent;
  box-shadow: none;
}

:root[data-theme="light"] .tool-list .tool-row:first-child {
  border-top: 1px solid rgba(76, 52, 40, 0.22);
}

:root[data-theme="light"] .stock-view .stock-row.is-requested {
  border-color: rgba(184, 104, 29, 0.56);
  background: transparent;
}

/* The login form keeps its quiet, elevated surface in light mode. */
:root[data-theme="light"] .access-card {
  border-color: rgba(76, 52, 40, 0.34);
  background: rgba(255, 248, 234, 0.68);
  box-shadow: 0 16px 36px rgba(76, 52, 40, 0.12);
}

:root[data-theme="light"] .access-card h1 {
  color: var(--ink);
}

:root[data-theme="light"] .access-card .gate-pin-field span,
:root[data-theme="light"] .access-card .gate-message {
  color: var(--muted);
}

/* Vacation rules read as two compact lists, instead of unequal empty cards. */
.vacation-rules-block {
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
}

:root[data-theme="light"] .vacation-rules-block .vacation-info-panel {
  border: 0;
  background: transparent;
}

/* Calendar states keep their meaning in both themes. */
.calendar-legend-item--today {
  background: var(--orange);
  color: var(--button-text);
}

.calendar-day.is-today {
  border-color: #ffbd73;
  background: var(--orange);
  color: var(--button-text);
  box-shadow: inset 0 0 0 2px rgba(255, 248, 234, 0.5);
}

:root[data-theme="light"] .calendar-legend-item--contract,
:root[data-theme="light"] .calendar-day.is-contract {
  border-color: #79529c;
  background: #79529c;
  color: #fff7ff;
}

:root[data-theme="light"] .calendar-legend-item--today,
:root[data-theme="light"] .calendar-day.is-today {
  border-color: #c77324;
  background: var(--orange);
  color: var(--button-text);
  box-shadow: inset 0 0 0 2px rgba(255, 248, 234, 0.54);
}

@media print {
  @page {
    size: 60mm 40mm;
    margin: 0;
  }

  html,
  body {
    width: 60mm;
    min-height: 40mm;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body > :not(#printArea) {
    display: none !important;
  }

  #printArea,
  #printArea * {
    visibility: visible !important;
  }

  #printArea {
    display: block !important;
    width: 60mm;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
  }

  .print-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60mm;
    height: 40mm;
    padding: 4.5mm 3mm;
    background: #ffffff;
    color: #111111;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    break-after: page;
    page-break-after: always;
  }

  .print-label:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .print-title {
    font-size: 15pt;
    font-weight: 900;
    line-height: 1;
  }

  .print-date {
    margin-top: 3mm;
    font-size: 23pt;
    font-weight: 900;
    line-height: 1.05;
  }
}