/* Source: approved-base.css */
*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
} /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
*,
::after,
::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
::after,
::before {
  --tw-content: '';
}
:host,
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family:
    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  line-height: inherit;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
pre,
samp {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button,
select {
  text-transform: none;
}
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}
textarea {
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
[role='button'],
button {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
  display: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.list-item {
  display: list-item;
}
.hidden {
  display: none;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Source: approved-fonts.css */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/inter-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/inter-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/inter-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/inter-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/inter-latin-800-normal.woff2) format('woff2');
}

/* Source: approved.css */
:root {
  font-family: Inter, system-ui, sans-serif;
  color: #213c40;
  background: #f5f8f9;
  font-size: 13px;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  transition:
    background 0.16s,
    transform 0.16s;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}
button:not(:disabled):active {
  transform: translateY(1px);
}
button {
  border: 0;
}
svg.icon {
  overflow: visible;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
a {
  color: #0d8174;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 29px;
  letter-spacing: -1.2px;
  font-weight: 650;
}
h2 {
  font-size: 17px;
  letter-spacing: -0.4px;
  font-weight: 650;
}
h3 {
  font-size: 13px;
  font-weight: 600;
}
.muted {
  color: #526e74;
}
.small {
  font-size: 12px;
}
.mono,
time {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.between {
  justify-content: space-between;
}
.wrap {
  flex-wrap: wrap;
}
.stack {
  display: grid;
  gap: 16px;
}
.label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-weight: 650;
  color: #526e74;
}
.brand {
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -1.1px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.logo {
  width: 33px;
  height: 33px;
}
.brand b {
  color: #0e9486;
}
.top {
  height: 78px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffffed;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e1e9ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 5px;
  padding: 5px 8px;
  background: #edf3f4;
  color: #688087;
  white-space: nowrap;
}
.badge.green {
  color: #087e65;
  background: #e5f5ef;
}
.badge.amber {
  color: #a56b12;
  background: #fff3d9;
}
.badge.red {
  color: #ad5252;
  background: #fceded;
}
.avatar {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e3eaec;
  border-radius: 7px;
  background: white;
  color: #6b868b;
}
.icon-btn:hover {
  background: var(--brand-soft);
}
.layout {
  display: grid;
  grid-template-columns: 222px 1fr;
  min-height: calc(100vh - 78px);
}
.sidebar {
  border-right: 1px solid #e2e9eb;
  background: #fff;
  padding: 27px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav-caption {
  padding: 0 13px 15px;
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  background: none;
  color: #7a9095;
  padding: 11px 13px;
  font-size: 12px;
  border-radius: 7px;
}
.nav-btn:hover {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.nav-btn.active {
  color: var(--brand-readable-accent);
  background: var(--brand-soft);
  font-weight: 600;
}
.sidebar-foot {
  margin-top: auto;
  padding: 32px 13px 0;
  font-size: 12px;
  line-height: 1.8;
  color: #9aabae;
}
.workspace {
  max-width: 1560px;
  width: 100%;
  padding: 32px 37px 24px;
  margin: auto;
  align-self: start;
  min-width: 0;
}
.metadata {
  font-size: 12px;
  color: #526e74;
  margin-bottom: 21px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.page-head p {
  font-size: 12px;
  color: #84989e;
  margin-top: 8px;
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 7px;
  background: var(--brand-surface);
  color: #526f75;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover {
  background: var(--brand-soft);
}
.btn.primary {
  background: var(--brand-accent);
  color: white;
  border-color: var(--brand-readable-accent);
  box-shadow: 0 2px 5px
    color-mix(in srgb, var(--brand-accent) 7.5%, transparent);
}
.btn.primary:hover {
  background: var(--brand-accent);
}
.btn.danger {
  color: #b45b5b;
  background: #fff6f6;
  border-color: #f3dcdc;
}
.btn.compact {
  padding: 6px 9px;
  font-size: 12px;
}
.btn .icon {
  width: 14px;
  height: 14px;
}
.card {
  background: #fff;
  border: 1px solid #e1e9eb;
  border-radius: 12px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-ink) 1.2%, transparent);
  overflow: hidden;
}
.pad {
  padding: 23px;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 20px 23px;
  border-bottom: 1px solid #edf1f2;
}
.card-head p {
  margin-top: 6px;
  color: #8b9da2;
  font-size: 12px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 23px;
}
.metric {
  padding: 19px 21px;
}
.metric .value {
  font-size: 28px;
  letter-spacing: -1px;
  font-weight: 600;
  margin: 12px 0 6px;
}
.metric .value small {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--surface-muted, #526e74);
  font-weight: 400;
}
.metric .hint {
  font-size: 12px;
  color: #8ea1a7;
}
.metric .label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.metric .icon {
  color: #91afa9;
}
.two-col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}
.timecard {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  margin-bottom: 29px;
}
.clock-box {
  background: var(--record-gradient);
  padding: 27px;
}
.clock-value {
  font-size: 33px;
  letter-spacing: -1.6px;
  margin: 15px 0 8px;
  white-space: nowrap;
}
.clock-value small {
  font:
    11px Inter,
    system-ui;
  color: #8caaa8;
  letter-spacing: 0;
}
.timer-box {
  padding: 27px;
  border-left: 1px solid #edf1f2;
}
.timer-big {
  font-size: 30px;
  margin: 13px 0 7px;
  letter-spacing: -1px;
}
.lunch-line {
  border-top: 1px solid #edf1f2;
  margin-top: 18px;
  padding-top: 15px;
}
.controls {
  padding: 26px;
}
.controls .row {
  margin-top: 10px;
  gap: 8px;
}
.controls .btn {
  flex: 1;
  padding: 10px 8px;
}
.note {
  font-size: 12px;
  color: #8ba1a5;
  line-height: 1.6;
  margin-top: 12px;
}
.section-head {
  margin-bottom: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.section-head p {
  font-size: 12px;
  color: #8a9da2;
  margin-top: 7px;
}
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
}
.day {
  background: white;
  border: 1px solid #e1e9eb;
  border-radius: 9px;
  overflow: hidden;
  min-height: 207px;
}
.day.today {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px var(--brand-accent);
}
.day.off {
  background: #f0f5f6;
}
.day-head {
  padding: 14px 12px;
  border-bottom: 1px solid #eaf0f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.today .day-head {
  background: var(--brand-soft);
}
.day-head strong {
  font-size: 21px;
  display: block;
  margin-top: 7px;
  font-weight: 500;
}
.day-head .label {
  font-size: 12px;
}
.day-body {
  padding: 12px 9px;
}
.shift-block {
  border-left: 2px solid var(--brand-accent);
  background: var(--brand-soft);
  padding: 9px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.shift-block.draft {
  border-color: #e2b356;
  background: #fff9e9;
}
.shift-block .mono {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.shift-block p {
  font-size: 12px;
  line-height: 1.8;
  color: #78968f;
  margin-top: 5px;
}
.shift-block .badge {
  font-size: 12px;
  padding: 3px 5px;
  margin-top: 5px;
}
.rest {
  display: grid;
  place-items: center;
  color: #526e74;
  min-height: 114px;
  font-size: 12px;
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.month-grid .day {
  min-height: 130px;
}
.month-grid .day-head {
  padding: 8px;
}
.month-grid .day-head strong {
  font-size: 15px;
  margin: 0;
}
.month-grid .day-body {
  padding: 7px;
}
.month-grid .shift-block {
  padding: 5px;
}
.month-grid .shift-block .mono {
  font-size: 12px;
}
.month-grid .day.dim {
  opacity: 0.45;
}
.empty {
  padding: 35px;
  text-align: center;
  color: var(--surface-muted, #526e74);
  font-size: 12px;
  line-height: 1.8;
}
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}
th {
  background: #f8fafb;
  font-size: 12px;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: #8ba0a6;
  font-weight: 600;
  padding: 13px 20px;
  border-bottom: 1px solid #e9eff0;
}
td {
  padding: 14px 20px;
  border-bottom: 1px solid #edf2f3;
  vertical-align: middle;
}
tr:last-child td {
  border-bottom: 0;
}
td small {
  display: block;
  font-size: 12px;
  color: #90a2a8;
  margin-top: 5px;
}
td .row {
  gap: 5px;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
  flex-wrap: wrap;
}
.segmented {
  display: inline-flex;
  padding: 3px;
  background: #eaf0f1;
  border-radius: 7px;
  gap: 2px;
}
.segmented button {
  background: none;
  padding: 7px 13px;
  font-size: 12px;
  color: #7d9298;
  border-radius: 5px;
}
.segmented button.active {
  background: white;
  color: var(--brand-readable-accent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--brand-ink) 6%, transparent);
}
.toolbar input,
.toolbar select {
  width: auto;
  min-width: 130px;
}
.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.field > span {
  font-size: 12px;
  font-weight: 500;
  color: #657f85;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid #dce6e8;
  background: white;
  border-radius: 7px;
  padding: 10px 11px;
  color: #365960;
  min-height: 38px;
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus-color);
  box-shadow: 0 0 0 3px var(--brand-focus-shadow);
}
input[type='checkbox'] {
  width: 15px;
  min-height: 15px;
  accent-color: #0d8d7d;
}
textarea {
  resize: vertical;
  min-height: 85px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 16px;
}
.full {
  grid-column: 1/-1;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #67848a;
}
.dialog {
  width: min(620px, calc(100% - 28px));
  max-height: 90vh;
  border: 1px solid #dbe8e7;
  border-radius: 15px;
  padding: 0;
  color: #29464c;
  box-shadow: 0 30px 100px
    color-mix(in srgb, var(--brand-ink) 20.8%, transparent);
}
.dialog::backdrop {
  background: color-mix(in srgb, var(--brand-ink) 32.2%, transparent);
  backdrop-filter: blur(3px);
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 25px;
  border-bottom: 1px solid #edf1f2;
}
.dialog-header > h2 {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}
.dialog-header > .icon-btn {
  flex-shrink: 0;
}
.dialog-content {
  padding: 24px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 23px;
  margin-top: 5px;
}
.form-error {
  color: #b65757;
  background: #fff3f2;
  font-size: 12px;
  line-height: 1.6;
  padding: 11px;
  border-radius: 6px;
  margin-bottom: 15px;
}
.banner {
  background: #f0faf7;
  color: #557f76;
  border: 1px solid #d9ede6;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.banner.amber {
  color: #997027;
  background: #fffaeb;
  border-color: #f0e6c9;
}
.list-item {
  padding: 16px 22px;
  border-bottom: 1px solid #edf1f2;
}
.list-item:last-child {
  border-bottom: 0;
}
.list-item p {
  font-size: 12px;
  color: #7c9398;
  line-height: 1.7;
  margin-top: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.list-item.unread {
  border-left: 3px solid #15a18c;
  background: #f5fcf9;
}
.chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 168px;
  padding-top: 18px;
  border-bottom: 1px solid #e7eff0;
  margin: 5px 0 9px;
}
.bar-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  gap: 6px;
}
.bar {
  width: 100%;
  max-width: 32px;
  min-height: 2px;
  background: #36aa95;
  border-radius: 4px 4px 0 0;
}
.bar.amber {
  background: #e8b965;
}
.bar.red {
  background: #d6867f;
}
.bar-label {
  font-size: 12px;
  color: #91a6ab;
}
.chart-key {
  font-size: 12px;
  color: #889da2;
  margin-top: 13px;
}
.progress {
  height: 5px;
  background: #e9f1f1;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 10px;
}
.progress > span {
  display: block;
  height: 100%;
  background: #39aa94;
}
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  padding: 14px 20px;
  color: white;
  background: var(--brand-accent);
  border-radius: 9px;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--brand-ink) 14.5%, transparent);
  z-index: 100;
  max-width: min(450px, calc(100% - 40px));
  font-size: 12px;
  line-height: 1.6;
}
.toast.error {
  background: #a95050;
}
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-art {
  background: #e6f5f0;
  padding: 65px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.login-art:after {
  content: '';
  width: 450px;
  height: 450px;
  border: 70px solid #cce9df;
  border-radius: 100px;
  position: absolute;
  right: -180px;
  bottom: -130px;
  transform: rotate(35deg);
}
.login-art h1 {
  font-size: 50px;
  line-height: 1.15;
  max-width: 430px;
  letter-spacing: -2px;
  margin-bottom: 20px;
}
.login-art p {
  color: #6c998e;
  line-height: 1.9;
  max-width: 330px;
}
.login-form {
  display: grid;
  place-items: center;
  padding: 35px;
}
.login-form > div {
  width: 100%;
  max-width: 365px;
}
.login-form h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
.login-form form {
  margin-top: 28px;
}
.demo-accounts {
  background: #f0f6f5;
  padding: 15px;
  border-radius: 9px;
  margin-top: 24px;
  font-size: 12px;
  color: #6d8d86;
  line-height: 1.8;
}
.footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #526e74;
  border-top: 1px solid #e2eaed;
  margin-top: 33px;
  padding-top: 19px;
  gap: 10px;
}
.hidden {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 1500px) {
  .workspace {
    padding: 40px 46px;
  }
  .timecard {
    margin-bottom: 34px;
  }
  .day {
    min-height: 235px;
  }
}
@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 190px 1fr;
  }
  .workspace {
    padding: 27px 23px;
  }
  .clock-value {
    font-size: 27px;
  }
  .clock-box,
  .timer-box,
  .controls {
    padding: 21px 18px;
  }
  .controls .btn {
    font-size: 12px;
    padding: 9px 6px;
  }
  .week {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .month-grid .shift-block .mono {
    white-space: normal;
  }
}
@media (max-width: 850px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    flex-direction: row;
    overflow: auto;
    padding: 10px 15px;
    border-bottom: 1px solid #e1e9eb;
  }
  .nav-btn {
    white-space: nowrap;
    font-size: 12px;
    padding: 9px;
  }
  .nav-caption,
  .sidebar-foot {
    display: none;
  }
  .top {
    padding: 0 22px;
    height: 69px;
  }
  .workspace {
    padding: 24px 20px;
  }
  .metrics {
    gap: 9px;
  }
  .metric {
    padding: 16px;
  }
  .metric .value {
    font-size: 24px;
  }
  .month-grid {
    gap: 3px;
  }
  .month-grid .day-body {
    padding: 3px;
  }
  .month-grid .shift-block p {
    font-size: 12px;
  }
}
@media (max-width: 600px) {
  .top {
    padding: 0 16px;
  }
  .top .user-detail,
  .top .workspace-badge {
    display: none;
  }
  .brand {
    font-size: 21px;
  }
  .workspace {
    padding: 22px 15px;
  }
  .metadata {
    font-size: 12px;
    gap: 5px;
  }
  h1 {
    font-size: 25px;
  }
  .page-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .page-head p {
    line-height: 1.7;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .metric .label {
    font-size: 12px;
  }
  .timecard {
    grid-template-columns: 1fr 1fr;
  }
  .clock-box,
  .timer-box {
    padding: 20px 14px;
  }
  .clock-value {
    font-size: 24px;
  }
  .timer-big {
    font-size: 25px;
  }
  .controls {
    grid-column: 1/-1;
    border-top: 1px solid #edf1f2;
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
  }
  .controls > .label,
  .controls > .note {
    grid-column: 1/-1;
  }
  .controls .row {
    flex-wrap: wrap;
  }
  .controls .btn {
    font-size: 12px;
    min-width: 85px;
  }
  .week {
    grid-template-columns: 1fr 1fr;
  }
  .month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .month-grid .day.dim {
    display: none;
  }
  .month-grid .day-body {
    padding: 7px;
  }
  .month-grid .shift-block .mono {
    font-size: 12px;
  }
  .month-grid .shift-block p {
    font-size: 12px;
  }
  .section-head {
    flex-wrap: wrap;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-art {
    padding: 28px;
    min-height: 185px;
    gap: 24px;
  }
  .login-art h1 {
    font-size: 30px;
    margin: 0;
  }
  .login-art p,
  .login-art > .small {
    display: none;
  }
  .login-form {
    padding: 30px 25px;
  }
  .form-grid .full {
    grid-column: auto;
  }
  .pad {
    padding: 18px;
  }
  .toolbar {
    align-items: stretch;
  }
  .card-head {
    padding: 17px;
  }
  .dialog-content {
    padding: 20px;
  }
  .dialog-header {
    padding: 19px;
  }
  .footer {
    line-height: 1.8;
  }
  .chart {
    gap: 3px;
  }
  .bar-label {
    font-size: 12px;
  }
}
body h1 {
  font-size: 29px;
  letter-spacing: -1.2px;
  font-weight: 650;
  line-height: 1.25;
}
body h2 {
  font-size: 17px;
  letter-spacing: -0.4px;
  font-weight: 650;
  line-height: 1.4;
}
body h3 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.login-form h2 {
  font-size: 24px;
}
.login-art h1 {
  font-size: 50px;
  line-height: 1.15;
}
.shift-block .mono {
  font-size: 12px;
}
.shift-block p {
  font-size: 12px;
}
body .dialog ul {
  list-style: disc;
  padding-left: 18px;
}
@media (max-width: 600px) {
  body h1 {
    font-size: 25px;
  }
  .login-art h1 {
    font-size: 30px;
  }
  .controls {
    display: block;
  }
  .controls .row {
    flex-wrap: nowrap;
  }
  .controls .btn {
    min-width: 0;
    font-size: 12px;
  }
  .clock-value {
    font-size: 22px;
  }
  .clock-value small {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Navigation and task-focused workspaces */
.bottom-nav {
  display: none;
}
.more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.more-card {
  text-align: left;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 17px;
  color: #294e50;
}
.more-card:hover {
  background: #f0faf6;
  border-color: #a0d7ca;
}
.more-card > span:nth-child(2) {
  flex: 1;
}
.more-card .note {
  display: block;
  margin-top: 7px;
}
.more-icon,
.queue-icon {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 39px;
  height: 39px;
  border-radius: 10px;
}
.schedule-tabs {
  margin-bottom: 21px;
}
.change-banner {
  border: 1px solid var(--surface-border);
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 9px;
  margin-bottom: 20px;
  color: var(--brand-readable-accent);
}
.change-banner strong {
  font-size: 12px;
}
.change-banner p {
  font-size: 12px;
  color: var(--surface-muted);
  margin-top: 5px;
}

/* Employee Home: one assignment, one timeclock, and the week immediately below. */
.workspace[data-view='dashboard'][data-role='employee'] .today-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  margin-bottom: 16px;
  border-color: var(--surface-border);
}
.workspace[data-view='dashboard'][data-role='employee'] .today-assignment,
.workspace[data-view='dashboard'][data-role='employee'] .today-timing {
  min-width: 0;
  padding: 22px;
  background: var(--brand-surface);
}
.workspace[data-view='dashboard'][data-role='employee'] .today-assignment {
  border-right: 1px solid var(--surface-border);
}
.workspace[data-view='dashboard'][data-role='employee'] .today-date {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--surface-muted);
}
.workspace[data-view='dashboard'][data-role='employee'] .today-assignment h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 16px;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.045em;
}
.workspace[data-view='dashboard'][data-role='employee']
  .today-assignment
  h2
  > span {
  color: var(--surface-muted);
  font-size: 20px;
  font-weight: 400;
}
.workspace[data-view='dashboard'][data-role='employee']
  .today-assignment
  h2.today-empty-title {
  font-family: inherit;
  font-size: 24px;
  letter-spacing: -0.025em;
  margin-top: 16px;
}
.workspace[data-view='dashboard'][data-role='employee']
  .today-assignment
  > .today-warehouse {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.workspace[data-view='dashboard'][data-role='employee']
  .today-warehouse
  > .icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--warehouse-color, var(--brand-readable-accent));
}
.workspace[data-view='dashboard'][data-role='employee'] .today-work-area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 14px;
}
.workspace[data-view='dashboard'][data-role='employee']
  .today-work-area
  > div
  + div {
  border-left: 1px solid var(--surface-border);
  padding-left: 16px;
}
.workspace[data-view='dashboard'][data-role='employee'] .today-work-area dt {
  margin-bottom: 5px;
  color: var(--surface-muted);
  font-size: 12px;
}
.workspace[data-view='dashboard'][data-role='employee'] .today-work-area dd {
  margin: 0;
  color: var(--surface-ink);
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: break-word;
}
.workspace[data-view='dashboard'][data-role='employee'] .today-facts {
  margin: 14px 0 16px;
}
.workspace[data-view='dashboard'][data-role='employee'] .today-facts > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--surface-ink);
  font-size: 13px;
}
.workspace[data-view='dashboard'][data-role='employee'] .today-facts .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--surface-muted);
}
.workspace[data-view='dashboard'][data-role='employee'] .today-facts small {
  display: block;
  margin-bottom: 3px;
  color: var(--surface-muted);
  font-size: 12px;
}
.workspace[data-view='dashboard'][data-role='employee'] .today-shift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.workspace[data-view='dashboard'][data-role='employee'] .today-timers {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  margin: 14px 0 16px;
  align-items: baseline;
}
.workspace[data-view='dashboard'][data-role='employee']
  .today-timers
  .timer-big {
  margin-top: 7px;
  color: var(--surface-ink);
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.045em;
}
.workspace[data-view='dashboard'][data-role='employee']
  .today-timers
  #break-timer {
  margin-top: 7px;
  color: var(--surface-muted);
  font-size: 22px;
  line-height: 1.25;
}
.workspace[data-view='dashboard'][data-role='employee'] .fixed-punches {
  padding-top: 13px;
  border-top: 1px solid var(--surface-border);
}
.workspace[data-view='dashboard'][data-role='employee']
  .punch-group
  + .punch-group {
  margin-top: 12px;
}
.workspace[data-view='dashboard'][data-role='employee'] .punch-group > .label {
  display: block;
  margin-bottom: 6px;
}
.workspace[data-view='dashboard'][data-role='employee'] .punch-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.workspace[data-view='dashboard'][data-role='employee'] .punch-buttons > .btn {
  min-height: 44px;
  font-size: 13px;
}
.workspace[data-view='dashboard'][data-role='employee']
  .punch-buttons
  > .clock-out-button {
  background: var(--brand-surface);
  color: var(--brand-readable-accent);
  border-color: var(--brand-border);
}
.workspace[data-view='dashboard'][data-role='employee']
  .punch-buttons
  > .btn:disabled {
  background: var(--brand-canvas);
  border-color: var(--surface-border);
  color: var(--surface-muted);
  box-shadow: none;
  opacity: 0.6;
}
.workspace[data-view='dashboard'][data-role='employee'] .punch-receipt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
  color: var(--surface-ink);
}
.workspace[data-view='dashboard'][data-role='employee'] .punch-receipt .icon {
  color: var(--status-approved);
}
.workspace[data-view='dashboard'][data-role='employee'] .punch-receipt strong {
  font-size: 12px;
}
.workspace[data-view='dashboard'][data-role='employee'] .employee-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.workspace[data-view='dashboard'][data-role='employee']
  .employee-shortcuts
  > .btn {
  min-height: 40px;
  font-size: 13px;
}
@media (max-width: 700px) {
  .workspace[data-view='dashboard'][data-role='employee'] .today-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace[data-view='dashboard'][data-role='employee'] .today-assignment {
    border-right: 0;
    border-bottom: 1px solid var(--surface-border);
  }
  .workspace[data-view='dashboard'][data-role='employee'] .today-assignment,
  .workspace[data-view='dashboard'][data-role='employee'] .today-timing {
    padding: 18px;
  }
  .workspace[data-view='dashboard'][data-role='employee'] .today-assignment h2 {
    font-size: 27px;
  }
  .workspace[data-view='dashboard'][data-role='employee'] .employee-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workspace[data-view='dashboard'][data-role='employee']
    .employee-shortcuts
    > .btn {
    min-height: 44px;
  }
}

.home-week-head {
  gap: 16px;
  flex-wrap: wrap;
}
.home-week-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.home-week-summary > div,
.home-week-summary > button {
  min-width: 90px;
  border-left: 1px solid var(--surface-border);
  padding: 0 0 0 18px;
  background: transparent;
  color: var(--surface-ink);
  text-align: left;
}
.home-week-summary span {
  display: block;
  margin-bottom: 4px;
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 400;
}
.home-week-summary strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 20px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.home-week-summary strong > small {
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
}
.home-week-summary strong > .icon {
  width: 15px;
  height: 15px;
  align-self: center;
  color: var(--brand-readable-accent);
}
.home-week-summary > button:hover {
  color: var(--brand-readable-accent);
}
.home-week-summary > button:focus-visible {
  outline: 2px solid var(--brand-readable-accent);
  outline-offset: 5px;
  border-radius: 4px;
}
@media (max-width: 700px) {
  .home-week-summary {
    order: 3;
    width: 100%;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--surface-border);
    border-bottom: 1px solid var(--surface-border);
  }
  .home-week-summary > div,
  .home-week-summary > button {
    flex: 1;
    min-width: 0;
    padding-left: 12px;
  }
  .home-week-summary > :first-child {
    border-left: 0;
    padding-left: 0;
  }
}
.request-card {
  padding: 23px;
}
.request-progress {
  list-style: none !important;
  display: flex;
  padding: 0 !important;
  margin: 23px 0 18px;
  gap: 10px;
}
.request-progress li {
  flex: 1;
  position: relative;
  min-width: 0;
  color: #9babae;
}
.request-progress li:after {
  content: '';
  height: 2px;
  background: #e6eef0;
  position: absolute;
  top: 12px;
  left: 33px;
  right: 0;
}
.request-progress li:last-child:after {
  display: none;
}
.request-progress li > span {
  border: 1px solid #dfe9e7;
  background: #f7fafa;
  display: grid;
  place-items: center;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  font-size: 12px;
}
.request-progress .icon {
  width: 13px;
  height: 13px;
}
.request-progress small {
  display: block;
  font-size: 12px;
  margin-top: 9px;
  line-height: 1.5;
}
.request-progress .done {
  color: #29826c;
}
.request-progress .done > span {
  background: #e4f5ec;
  border-color: #b5dfcb;
}
.request-progress .current {
  color: #235e54;
  font-weight: 600;
}
.request-progress .current > span {
  background: #108d78;
  color: white;
  border-color: #108d78;
  box-shadow: 0 0 0 3px #e4f5ed;
}
.shift-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.shift-mini {
  border: 1px solid #deebe7;
  border-radius: 8px;
  background: #f6faf8;
  padding: 14px;
  display: grid;
  gap: 8px;
}
.shift-mini strong {
  font-size: 12px;
}
.shift-mini > span {
  font-size: 12px;
  color: #728b85;
}
.shift-mini .label {
  font-size: 12px;
}
.review-note {
  font-size: 12px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  background: #f3f7f8;
  color: #6b868c;
}
.action-queue {
  margin-bottom: 23px;
}
.queue-counts {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid #eef2f1;
  color: #879b9d;
  font-size: 12px;
}
.queue-counts strong {
  color: var(--surface-ink);
  margin-left: 4px;
}
.queue-item {
  padding: 15px 22px;
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  gap: 13px;
}
.queue-item:last-child {
  border-bottom: 0;
}
.queue-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.queue-icon .icon {
  width: 15px;
  height: 15px;
}
.queue-copy {
  flex: 1;
  min-width: 0;
}
.queue-copy strong {
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.queue-copy p {
  font-size: 12px;
  line-height: 1.6;
  color: #526e74;
  margin-top: 5px;
}
.eligibility-panel {
  border-top: 1px solid #e3ede9;
  padding-top: 19px;
}
.eligibility-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid #e7eeeb;
  border-radius: 7px;
  margin-top: 7px;
}
.eligibility-row > div {
  flex: 1;
  min-width: 0;
}
.eligibility-row strong {
  font-size: 12px;
}
.eligibility-row p {
  font-size: 12px;
  line-height: 1.6;
  color: #71948a;
  margin-top: 4px;
}
.eligibility-row.selected {
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  border-color: var(--brand-accent);
}
.eligibility-row .eligibility-error {
  color: #b26763;
}
.eligibility-row .eligibility-warning {
  color: #a7833c;
}
.discard-dialog {
  max-width: 430px;
}
.dialog .shift-mini {
  min-width: 0;
}
.dialog .request-progress {
  margin-top: 0;
}
@media (max-width: 1100px) {
}
@media (max-width: 850px) {
  .employee-layout > .sidebar {
    display: none;
  }
  .employee-layout {
    padding-bottom: 76px;
  }
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: #fffffff5;
    backdrop-filter: blur(12px);
    border-top: 1px solid #dfeae6;
    padding: 8px 10px calc(9px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px
      color-mix(in srgb, var(--brand-ink) 1.6%, transparent);
  }
  .bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    color: #8a9e9d;
    padding: 6px 3px;
    border-radius: 8px;
    font-size: 12px;
  }
  .bottom-nav .active {
    color: var(--brand-readable-accent);
    background: color-mix(
      in srgb,
      var(--brand-accent) 10%,
      var(--brand-surface)
    );
    font-weight: 600;
  }
  .bottom-nav .icon {
    width: 20px;
    height: 20px;
  }
  .toast {
    bottom: 90px;
  }
  .more-grid {
    gap: 12px;
  }
  .more-card {
    padding: 20px;
  }
}
@media (max-width: 600px) {
  .more-grid {
    grid-template-columns: 1fr;
  }
  .more-card {
    padding: 22px;
  }
  .change-banner {
    flex-wrap: wrap;
    padding: 14px;
  }
  .shift-comparison {
    grid-template-columns: 1fr;
  }
  .request-card {
    padding: 18px;
  }
  .request-progress {
    gap: 7px;
  }
  .request-progress small {
    font-size: 12px;
  }
  .queue-item {
    padding: 15px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .queue-item > .btn {
    margin-left: 42px;
  }
  .queue-item .queue-copy {
    flex-basis: calc(100% - 45px);
  }
  .queue-counts {
    gap: 12px;
    padding: 12px 15px;
  }
}

.login-art > .brand {
  position: relative;
  z-index: 1;
}

/* Direct access and stable timeclock controls */
.top {
  gap: 18px;
}
.header-clock {
  order: 0;
  margin-left: auto;
  border-right: 1px solid #e1eae8;
  padding-right: 22px;
  display: grid;
  gap: 4px;
  text-align: right;
  flex-shrink: 0;
}
.header-clock time {
  font-size: 16px;
  color: var(--brand-readable-accent);
}
.header-clock > span {
  font-size: 12px;
  color: var(--surface-muted);
}
.top > div:nth-child(2) {
  order: 1;
}
.top > .header-clock {
  order: 0;
}
.direct-shift-actions {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}
.direct-shift-actions .btn {
  flex: 1;
  font-size: 12px;
  min-height: 32px;
}
.employee-layout > .sidebar {
  display: flex;
}
.employee-layout {
  padding-bottom: 0;
}
.bottom-nav {
  display: none !important;
}
@media (max-width: 850px) {
  .employee-layout > .sidebar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 10px 14px;
    overflow: visible;
  }
  .employee-layout .nav-btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    text-align: center;
    min-height: 53px;
    padding: 7px 3px;
    font-size: 12px;
  }
  .employee-layout .nav-btn .icon {
    width: 17px;
    height: 17px;
  }
  .employee-layout .sidebar-foot,
  .employee-layout .nav-caption {
    display: none;
  }
  .employee-layout {
    padding-bottom: 0;
  }
  .toast {
    bottom: 22px;
  }
  .top .workspace-badge {
    display: none;
  }
  .header-clock {
    padding-right: 13px;
  }
  .header-clock time {
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  .top {
    height: auto;
    min-height: 92px;
    flex-wrap: wrap;
    padding: 12px 15px 9px;
    gap: 9px;
  }
  .top > div:first-child {
    flex: 1;
  }
  .top > div:nth-child(2) {
    order: 0;
    gap: 11px !important;
  }
  .top > .header-clock {
    order: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-top: 1px solid var(--surface-border);
    padding: 8px 0 0;
    margin: 0;
  }
  .header-clock time {
    font-size: 12px;
  }
  .header-clock > span {
    font-size: 12px;
  }
  .employee-layout .workspace {
    padding-top: 19px;
  }
  .employee-layout .metadata {
    display: none;
  }
  .employee-layout .page-head {
    margin-bottom: 18px;
  }
  .employee-layout .page-head p {
    font-size: 12px;
  }
  .employee-layout h1 {
    font-size: 23px;
  }
}

/* Compact chrome and list tools */
.company-context {
  order: 0;
  display: grid;
  gap: 4px;
  min-width: 145px;
  border-left: 1px solid #e1eae8;
  padding-left: 22px;
}
.company-context strong {
  font-size: 12px;
  font-weight: 600;
  color: #3d635d;
}
.company-context span {
  font-size: 12px;
  color: #89a09b;
}
.header-clock {
  margin-left: auto;
}
.workspace {
  padding-top: 21px;
  padding-bottom: 18px;
}
.page-head {
  margin-bottom: 18px;
}
.page-head p {
  margin-top: 5px;
}
.metrics {
  gap: 12px;
  margin-bottom: 17px;
}
.metric {
  padding: 14px 18px;
}
.metric .value {
  font-size: 24px;
  margin: 8px 0 5px;
}
.card-head {
  padding: 15px 19px;
}
.footer {
  margin-top: 22px;
  padding-top: 13px;
}
.day {
  min-height: 175px;
}
.day.off .rest {
  min-height: 65px;
}
.list-controls {
  padding: 13px 16px 10px;
  background: var(--brand-surface);
  border-bottom: 1px solid var(--surface-border);
  border-radius: 9px 9px 0 0;
}
.list-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.list-search {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1 1 190px;
  min-width: 155px;
}
.list-search > .icon {
  position: absolute;
  left: 11px;
  color: var(--surface-muted);
  width: 15px;
  height: 15px;
  pointer-events: none;
}
.list-search input {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding-left: 33px;
  font-size: 12px;
  min-height: 36px;
  background: #f8fbfa;
}
.list-select {
  flex: 0 1 170px;
  min-width: 115px;
  max-width: 200px;
}
.list-select select {
  font-size: 12px;
  min-height: 36px;
  padding: 8px 24px 8px 9px;
  text-overflow: ellipsis;
}
.list-clear {
  min-height: 35px;
}
.list-results-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  min-height: 28px;
}
.list-count {
  font-size: 12px;
  color: #8aa09b;
}
.list-pagination {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  color: #829b94;
  font-size: 12px;
}
.list-page-size {
  display: flex;
  align-items: center;
  gap: 6px;
}
.list-page-size select {
  font-size: 12px;
  min-height: 29px;
  width: 57px;
  padding: 4px 7px;
}
.list-pagination .icon-btn {
  width: 29px;
  height: 29px;
}
.list-page-number {
  font-variant-numeric: tabular-nums;
}
.list-scope {
  font-size: 12px;
  color: #8aa09b;
  display: block;
  margin-top: 6px;
}
.list-empty {
  display: none;
}
.calendar-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.calendar-filters select {
  font-size: 12px;
  min-height: 36px;
  width: auto;
  max-width: 175px;
}
.calendar-filters .list-search {
  max-width: 380px;
}
.calendar-result {
  margin-left: auto;
  font-size: 12px;
}
.calendar-no-match {
  padding: 8px 0;
  text-align: center;
}
.request-card {
  padding: 18px;
}
.request-progress {
  margin: 16px 0 12px;
}
.request-card .shift-mini {
  padding: 11px;
}
.workspace > .list-controls {
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  margin-bottom: 12px;
}
.workspace .stack > .list-controls {
  margin-bottom: 0;
}
.table-wrap th {
  padding: 10px 16px;
}
.table-wrap td {
  padding: 11px 16px;
}
.list-item {
  padding: 13px 18px;
}
.sidebar {
  padding-top: 21px;
}
@media (min-width: 1500px) {
  .workspace {
    padding-top: 24px;
  }
  .day {
    min-height: 180px;
  }
}
@media (max-width: 1100px) {
  .top {
    padding-left: 20px;
    padding-right: 20px;
    gap: 15px;
  }
  .company-context {
    padding-left: 15px;
    min-width: 140px;
  }
  .top .user-detail {
    display: none;
  }
  .header-clock {
    padding-right: 15px;
  }
}
@media (max-width: 850px) {
  .company-context {
    min-width: 135px;
  }
  .list-select {
    flex: 1 1 135px;
    max-width: none;
  }
  .list-search {
    flex-basis: 100%;
  }
  .calendar-filters .list-search {
    max-width: none;
    flex-basis: 100%;
  }
  .calendar-result {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 600px) {
  .top {
    min-height: 92px;
    padding: 10px 15px 9px;
    gap: 8px;
  }
  .top > .company-context {
    order: 2;
    flex: 1 1 53%;
    min-width: 0;
    border: 0;
    padding: 0;
    gap: 3px;
  }
  .company-context strong {
    font-size: 12px;
  }
  .company-context span {
    font-size: 12px;
  }
  .top > .header-clock {
    order: 2;
    display: grid;
    flex: 1 1 38%;
    width: auto;
    border: 0;
    padding: 0;
    gap: 3px;
    text-align: right;
    justify-content: end;
  }
  .header-clock time {
    font-size: 12px;
  }
  .header-clock > span {
    font-size: 12px;
  }
  .employee-layout .workspace,
  .workspace {
    padding: 16px 14px;
  }
  .employee-layout .page-head {
    margin-bottom: 14px;
  }
  .employee-layout .page-head p {
    margin-top: 4px;
  }
  .employee-layout .sidebar {
    padding: 7px 12px;
    gap: 3px;
  }
  .employee-layout .nav-btn {
    min-height: 46px;
    padding: 5px 3px;
    font-size: 12px;
  }
  .list-controls {
    padding: 11px;
  }
  .list-select {
    min-width: 100px;
    flex-basis: calc(50% - 10px);
  }
  .list-search {
    min-width: 0;
  }
  .list-results-row {
    flex-wrap: wrap;
    gap: 7px;
  }
  .list-pagination {
    margin-left: auto;
    gap: 6px;
  }
  .list-count {
    font-size: 12px;
  }
  .list-controls .btn {
    font-size: 12px;
  }
  .metric {
    padding: 12px 14px;
  }
  .metric .value {
    font-size: 23px;
  }
  .day.off {
    min-height: 110px;
  }
  .day.off .rest {
    min-height: 34px;
  }
  .day-head {
    padding: 10px 12px;
  }
  .day-head strong {
    font-size: 19px;
    margin-top: 4px;
  }
  .request-card {
    padding: 15px;
  }
  .chart {
    height: 145px;
  }
  .calendar-filters select {
    flex: 1;
    max-width: none;
    min-width: 100px;
  }
}

/* White, light grey, and teal throughout the workspace. */
:root {
  --surface: var(--brand-surface);
  --canvas: var(--brand-canvas);
  --border: var(--surface-border);
  --ink: var(--surface-ink);
  --muted: var(--surface-muted);
  --teal: var(--brand-accent);
  --teal-hover: color-mix(in srgb, var(--brand-accent) 88%, #000);
  --teal-tint: var(--brand-soft);
  background: var(--canvas);
  color: var(--ink);
}
body {
  background: var(--canvas) !important;
  color: var(--ink);
}
.top,
.sidebar,
.card,
.dialog,
.bottom-nav {
  background: var(--surface);
  border-color: var(--border);
}
.top {
  background: #fffffffa;
}
.muted,
.note,
.subtitle,
.page-head p,
.schedule-sub,
.metric .hint,
.list-count,
.list-scope,
.list-page-number,
.list-pagination,
.section-head p,
.timer-caption,
.company-context span,
.header-clock > span,
.footer,
.sidebar-foot {
  color: var(--muted);
}
.label,
.nav-btn,
.day-name,
.employee-detail {
  color: #63757f;
}
.nav-btn:hover {
  background: #f0f3f5;
  color: var(--teal);
}
.nav-btn.active {
  background: var(--teal-tint);
  color: var(--teal);
}
.avatar,
.more-icon,
.queue-icon {
  background: var(--brand-canvas);
  color: var(--teal);
}
.btn {
  background: white;
  border-color: #c6d1d7;
  color: #36545b;
  font-size: 12px;
  font-weight: 600;
  min-height: 38px;
}
.btn:hover {
  background: #f0f4f5;
  border-color: #8ca8ad;
}
.btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}
.btn.primary:hover {
  background: var(--teal-hover);
  border-color: var(--teal-hover);
}
.btn.compact {
  font-size: 12px;
  min-height: 34px;
}
.btn:focus-visible,
.icon-btn:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}
.icon-btn {
  color: #476773;
  border-color: #cbd5dc;
  background: var(--brand-surface);
}
.icon-btn:hover {
  background: var(--brand-soft);
}
.btn:disabled,
.icon-btn:disabled {
  background: #edf0f2;
  border-color: #e1e6e9;
  color: #98a5ac;
  opacity: 1;
  box-shadow: none;
}
.btn.danger {
  background: #fff6f5;
  color: #a33f36;
  border-color: #efc5c1;
}
.change-banner,
.banner:not(.amber) {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--surface-ink);
}
.change-banner p {
  color: var(--muted);
}
.metric .label .icon {
  color: #668b91;
}
.shift-mini,
.review-note,
.demo-accounts {
  background: #f4f6f8;
  border-color: var(--border);
  color: #4d626d;
}
.shift-mini > span,
.list-item p,
.queue-copy p,
.queue-counts {
  color: var(--muted);
}
.list-item.unread {
  background: #f5f9f9;
  border-left-color: var(--teal);
}
.list-controls,
.card-head {
  background: white;
  border-color: var(--border);
}
.list-search input,
input,
select,
textarea {
  background: white;
  border-color: #cbd5dc;
  color: #314e58;
}
.list-search input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #73868f;
}
.list-select select,
.calendar-filters select {
  color: #415d68;
}
.table-wrap th {
  background: #f1f4f6;
  color: #586e79;
}
.table-wrap td {
  border-color: #e4eaee;
}
.segmented {
  background: #e9eef1;
}
.segmented button {
  color: #526b76;
  font-size: 12px;
  min-height: 38px;
}
.segmented button.active {
  background: white;
  color: var(--teal);
}
.badge {
  background: #edf1f3;
  color: #516875;
}
.badge.green {
  background: #e6f3f1;
  color: var(--teal);
}
.badge.amber,
.banner.amber {
  background: #fff8e8;
  color: #916617;
  border-color: #ebd9af;
}
.badge.red {
  background: #fceeed;
  color: #a44239;
}
.eligibility-row {
  background: #fff;
  border-color: #dce3e8;
}
.eligibility-row.selected {
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  border-color: var(--brand-accent);
}
.eligibility-row p {
  color: #526f79;
}
.eligibility-row .eligibility-error {
  color: #a94842;
}
.eligibility-row .eligibility-warning {
  color: #916617;
}
.request-progress .done > span {
  background: #e6f3f1;
  border-color: #afd2cd;
}
.request-progress .done {
  color: var(--teal);
}
.request-progress .current > span {
  background: var(--teal);
  border-color: var(--teal);
}
.bar,
.progress > span {
  background: var(--brand-accent);
}
.login-art {
  background: #f0f4f5;
}
.login-art:after {
  border-color: #dbe8e7;
}
.login-art p {
  color: #607b7e;
}
.toast {
  background: var(--teal);
}
/* Schedule actions stay readable and comfortably tappable in every calendar view. */
.day {
  background: white;
  border-color: #d5dfe4;
}
.day.today {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal);
}
.today .day-head {
  background: var(--brand-soft);
}
.day.off {
  background: #edf1f4;
  border-color: #dde4e9;
}
.day .label {
  font-size: 12px;
  letter-spacing: 0.6px;
  color: #596f79;
}
.rest {
  color: #647982;
  font-size: 12px;
}
.day-body {
  padding: 11px;
}
.shift-block {
  background: #f5f7f9;
  border: 1px solid #dce4e9;
  border-left: 3px solid var(--teal);
  padding: 10px;
  border-radius: 6px;
}
.shift-block p {
  font-size: 12px;
  line-height: 1.6;
  color: #536b75;
  margin-top: 8px;
}
.shift-block .shift-hours {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  white-space: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #243f49;
  line-height: 1.5;
}
.shift-hours span {
  white-space: nowrap;
}
.shift-details-button {
  display: flex;
  width: 100%;
  margin-top: 12px;
  min-height: 44px !important;
  padding: 10px 6px;
  font-size: 12px !important;
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 1px 2px
    color-mix(in srgb, var(--brand-accent) 7.1%, transparent);
}
.shift-details-button:hover {
  background: var(--teal-hover);
  border-color: var(--teal-hover);
  color: white;
}
.direct-shift-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.direct-shift-actions .btn {
  padding: 9px 4px;
  font-size: 12px;
  min-height: 44px;
  color: #245b5b;
  background: white;
  border-color: #a7bebf;
}
.direct-shift-actions .btn:hover {
  background: #eaf5f3;
  border-color: var(--teal);
}
.month-grid .shift-block {
  padding: 8px;
}
.month-grid .shift-block .shift-hours {
  font-size: 12px;
  white-space: normal;
}
.month-grid .shift-block p {
  font-size: 12px;
}
.month-grid .day-body {
  padding: 7px;
}
.day .today-pill,
.day-head .badge.green {
  font-size: 12px !important;
}
.shift-block.draft {
  background: #fffaf0;
  border-left-color: #ad8335;
}
@media (max-width: 600px) {
  .shift-block p,
  .month-grid .shift-block p {
    font-size: 12px;
  }
  .shift-block .shift-hours,
  .month-grid .shift-block .shift-hours {
    font-size: 12px;
  }
  .day-body {
    padding: 8px;
  }
  .shift-block {
    padding: 9px;
  }
  .shift-details-button {
    font-size: 12px !important;
  }
  .direct-shift-actions .btn {
    font-size: 12px;
    min-height: 44px;
  }
  .day .label {
    font-size: 12px;
  }
  .day.off .rest {
    font-size: 12px;
  }
  .list-select select,
  .list-query,
  .calendar-filters select {
    font-size: 12px;
  }
  .nav-btn.active {
    color: var(--brand-readable-accent);
  }
  .company-context strong {
    color: #36565f;
  }
}

@media (min-width: 601px) and (max-width: 1350px) {
  .week,
  .month-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.workspace {
  margin: 0 auto;
}
.availability-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.availability-days {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.availability-days > legend {
  font-size: 12px;
  color: #49616b;
  font-weight: 600;
  margin-bottom: 10px;
}
.weekday-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}
.weekday-option {
  position: relative;
  cursor: pointer;
  min-width: 0;
}
.weekday-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}
.weekday-option > span {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid #bdcdd3;
  border-radius: 7px;
  background: #fff;
  color: #46616a;
  font-size: 12px;
  font-weight: 600;
}
.weekday-option input:checked + span {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border-color: var(--brand-accent);
}
.weekday-option input:focus-visible + span {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}
.weekday-option:hover > span {
  border-color: var(--brand-accent);
}
.weekday-shortcuts {
  margin-top: 12px;
}
.weekday-shortcuts .btn {
  min-height: 38px;
}
@media (max-width: 600px) {
  .availability-fields {
    grid-template-columns: 1fr;
  }
  .availability-spacer {
    display: none;
  }
  .weekday-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .weekday-option > span {
    min-height: 44px;
    font-size: 13px;
  }
}

/* Unified teal period controls and crisp filter accents. */
.period-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.month-navigation {
  display: flex;
  align-items: stretch;
  background: var(--brand-surface);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px
    color-mix(in srgb, var(--brand-accent) 3.1%, transparent);
}
.month-arrow {
  display: grid;
  place-items: center;
  width: 43px;
  min-height: 46px;
  background: color-mix(in srgb, var(--brand-accent) 6%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.month-arrow:hover {
  background: color-mix(in srgb, var(--brand-accent) 14%, var(--brand-surface));
}
.month-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 193px;
  padding: 10px 15px;
  border-left: 1px solid var(--surface-border);
  border-right: 1px solid var(--surface-border);
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.1px;
}
.month-trigger:hover {
  background: color-mix(in srgb, var(--brand-accent) 85%, var(--brand-ink));
}
.month-trigger > .icon:last-child {
  width: 13px;
  height: 13px;
  opacity: 0.85;
}
.month-arrow:focus-visible,
.month-trigger:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: -3px;
}
.period-shortcuts {
  display: flex;
  gap: 6px;
  align-items: center;
}
.period-preset {
  border: 1px solid var(--surface-border);
  border-radius: 7px;
  background: var(--brand-surface);
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 550;
  padding: 9px 11px;
  min-height: 37px;
  white-space: nowrap;
}
.period-preset:hover {
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 50%,
    var(--surface-border)
  );
  background: color-mix(in srgb, var(--brand-accent) 6%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.period-preset.selected {
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 40%,
    var(--surface-border)
  );
  background: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.month-toolbar {
  padding: 13px;
  background: var(--brand-surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--brand-ink) 1.2%, transparent);
  gap: 12px;
}
.month-toolbar > select {
  border-color: var(--surface-border);
  background-color: var(--brand-surface);
  color: var(--surface-ink);
  min-height: 40px;
  font-size: 12px;
}
.dialog:has(.month-picker) {
  width: min(390px, calc(100% - 28px));
}
.dialog:has(.month-picker) .dialog-header {
  background: var(--brand-canvas);
  border-color: var(--surface-border);
  padding: 18px 22px;
}
.dialog:has(.month-picker) .dialog-header h2 {
  color: var(--brand-readable-accent);
}
.dialog:has(.month-picker) .dialog-content {
  padding: 19px;
}
.staffing-period {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.week-navigation {
  display: flex;
  align-items: center;
  gap: 6px;
}
.week-navigation > .icon-btn {
  width: 38px;
  height: 40px;
  color: var(--brand-readable-accent);
  border-color: var(--surface-border);
  background: color-mix(in srgb, var(--brand-accent) 5%, var(--brand-surface));
}
.week-date {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 11px;
  background: color-mix(in srgb, var(--brand-accent) 6%, var(--brand-surface));
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  color: var(--brand-readable-accent);
}
.week-date input {
  border: 0 !important;
  background: transparent !important;
  color: var(--surface-ink);
  padding-left: 0;
  min-width: 130px !important;
  width: 145px !important;
  font-size: 12px;
  font-weight: 600;
}
.segmented {
  padding: 4px;
  background: #edf3f3;
  border: 1px solid #d6e4e2;
  gap: 3px;
}
.segmented button {
  border-radius: 6px;
  font-weight: 550;
}
.segmented button.active {
  background: var(--brand-accent);
  color: white;
  box-shadow: 0 2px 4px
    color-mix(in srgb, var(--brand-accent) 7.8%, transparent);
}
.list-controls {
  border-top: 2px solid var(--brand-border);
}
.list-search > .icon {
  color: var(--brand-readable-accent);
}
.list-search input:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 15%, transparent);
}
.list-select select,
.calendar-filters select {
  background-color: var(--brand-surface);
  border-color: var(--surface-border);
  color: var(--surface-ink);
  font-weight: 500;
}
.list-select select:hover,
.calendar-filters select:hover {
  border-color: var(--brand-accent);
}
.list-clear:not(:disabled),
.calendar-clear:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--brand-readable-accent);
}
.list-pagination .icon-btn:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--surface-border);
  color: var(--brand-readable-accent);
}
.list-page-number {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  padding: 6px 9px;
  border-radius: 5px;
  font-weight: 650;
}
.list-page-size select {
  border-color: var(--surface-border);
  color: var(--brand-readable-accent);
  background: var(--brand-surface);
}
.table-wrap tbody tr:hover {
  background: var(--brand-soft);
}
.calendar-filters .calendar-clear {
  min-height: 36px;
}
.toolbar [data-action='period-today'] {
  min-height: 38px;
  border-color: var(--surface-border);
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.list-item.unread > div h3 {
  color: var(--brand-readable-accent);
}
@media (max-width: 600px) {
  .month-toolbar {
    padding: 11px;
    gap: 11px;
  }
  .period-controls {
    width: 100%;
    gap: 9px;
  }
  .month-navigation {
    width: 100%;
  }
  .month-trigger {
    flex: 1;
    min-width: 0;
    font-size: 13px;
  }
  .month-arrow {
    width: 43px;
    min-height: 46px;
  }
  .period-shortcuts {
    width: 100%;
  }
  .period-preset {
    min-height: 36px;
    padding: 8px 13px;
  }
  .month-toolbar > select {
    width: 100%;
  }
  .month-toolbar > .segmented {
    width: 100%;
    display: flex;
  }
  .month-toolbar > .segmented button {
    flex: 1;
    padding: 8px 6px;
    font-size: 12px;
  }
  .month-choice {
    min-height: 55px;
  }
  .staffing-period {
    gap: 8px;
  }
  .staffing-period > .label {
    width: 100%;
  }
  .week-navigation {
    gap: 5px;
  }
  .week-date input {
    width: 132px !important;
  }
  .picker-footer {
    align-items: center;
  }
}

.date-source[hidden] {
  display: none !important;
}
.history-page-bar {
  padding: 18px 0;
  margin-top: 18px;
  gap: 16px;
}
.employee-time-records > .history-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 18px 24px;
  margin-top: 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.employee-time-records > .history-page-bar > .row {
  flex-shrink: 0;
  gap: 12px;
}
.history-date-range {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
}
.history-date-range summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  font-weight: 600;
  list-style: none;
}
.history-date-range summary::-webkit-details-marker {
  display: none;
}
.history-date-range summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  margin-top: -3px;
}
.history-date-range[open] summary {
  border-color: var(--brand-accent);
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.history-date-range[open] summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}
.history-date-range summary:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 3px;
}

.history-date-range > .row {
  margin-top: 12px;
  align-items: end;
}
.history-date-range .field {
  margin: 0;
  max-width: 240px;
}

/* Weekly roster shares schedule records, filters and edit actions. */
.roster-scroll {
  overflow: auto;
  border: 1px solid var(--surface-border);
  border-radius: var(--card-radius, 12px);
  background: var(--brand-surface);
  max-height: 75vh;
}
.roster-matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 1100px;
  table-layout: fixed;
}
.roster-matrix th,
.roster-matrix td {
  padding: 12px;
  vertical-align: top;
  border-right: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.roster-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface-soft);
  text-align: left;
  font-size: 12px;
}
.roster-matrix th:first-child {
  width: 170px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--brand-surface);
  text-align: left;
  color: var(--surface-ink);
  font-size: 13px;
}
.roster-matrix thead th:first-child {
  z-index: 4;
  background: var(--surface-soft);
}
.roster-matrix th small {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  color: var(--surface-muted);
  font-size: 11px;
}
.roster-matrix .is-today {
  background: var(--brand-soft);
}
.roster-matrix .roster-shift {
  display: grid;
  width: 100%;
  padding: 10px;
  margin: 0 0 8px;
  gap: 6px;
  min-height: 80px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--area-color, var(--brand-accent));
  background: var(--brand-surface);
  color: var(--surface-ink);
  border-radius: 8px;
  box-shadow: none;
}
.roster-matrix .roster-shift.draft {
  border-style: dashed;
}
.roster-shift strong {
  font-size: 12px;
  font-weight: 650;
}
.roster-shift span,
.roster-shift small {
  font-size: 11px;
  line-height: 1.5;
  color: var(--surface-muted);
}
.roster-shift:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}
.roster-empty {
  color: var(--surface-muted);
}
.workspace-sync-warning {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--status-warning);
  background: var(--status-warning-surface);
  color: var(--status-warning-ink);
  border-radius: 10px;
  font-size: 13px;
  margin: 0 0 18px;
}
.workspace-sync-warning > span {
  flex: 1;
  min-width: 180px;
  line-height: 1.6;
}
.workspace-sync-warning > svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.queue-item-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.queue-priority {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--surface-muted);
  background: var(--surface-soft);
}
.queue-priority:is(.is-0, .is-1) {
  color: var(--status-warning-ink);
  background: var(--status-warning-surface);
}
.queue-copy > small {
  display: block;
  font-size: 11px;
  color: var(--surface-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.action-queue .queue-filters {
  border: 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  border-radius: 0;
  padding: 12px 20px;
  box-shadow: none;
  margin: 0;
}
.action-queue .queue-result-count {
  padding: 8px 20px;
  margin: 0;
}
.action-queue .queue-filters select {
  min-width: 150px;
}

.roster-matrix tbody th {
  text-transform: none;
  letter-spacing: 0;
}
.roster-matrix .roster-shift strong {
  display: grid;
  gap: 3px;
}
.roster-matrix .roster-shift strong > span {
  white-space: nowrap;
  font-size: 12px;
  color: var(--surface-ink);
}
.toolbar:has(.schedule-layout-choice [data-id='roster'].active)
  .segmented:not(.schedule-layout-choice) {
  display: none;
}

/* Source: shared-calendar.css */
.platform-page {
  --brand-accent: #0f766e;
  --brand-accent-ink: #fff;
  --brand-readable-accent: #0f766e;
  --brand-soft: #e7f4f0;
  --brand-surface: #fff;
  --brand-canvas: #f5f8f8;
  --surface-ink: #193e40;
  --surface-muted: #526e74;
  --surface-border: #dbe5e0;
  --focus-color: #229b8a;
}
.date-picker-dialog {
  padding: 0;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  color: var(--surface-ink);
  background: var(--brand-surface);
  box-shadow: 0 24px 80px #193e4033;
}
.date-picker-dialog::backdrop {
  background: #193e4059;
}
.date-picker-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--surface-border);
}
.date-picker-dialog h2 {
  font-size: 18px;
  margin: 0;
}
.date-picker-dialog .icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  padding: 8px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}
.date-picker-dialog .note {
  margin: 0;
}
.date-picker-dialog .calendar-grid-row,
.date-picker-dialog .calendar-grid-cell {
  display: contents;
}
.picker-year-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}
.picker-year-row .icon-btn {
  width: 38px;
  height: 38px;
  color: var(--brand-readable-accent);
  border-color: var(--surface-border);
  background: var(--brand-surface);
}
.picker-year {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--surface-muted);
  font-size: 12px;
}
.picker-year input {
  width: 91px;
  min-height: 38px;
  font-size: 16px;
  font-weight: 650;
  color: var(--surface-ink);
  border-color: var(--surface-border);
  text-align: center;
  padding: 7px;
}
.month-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.month-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  background: var(--brand-canvas);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  color: var(--surface-ink);
  font-size: 13px;
  font-weight: 600;
}
.month-choice:hover {
  background: color-mix(in srgb, var(--brand-accent) 9%, var(--brand-surface));
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 45%,
    var(--surface-border)
  );
  color: var(--brand-readable-accent);
}
.month-choice.current {
  border-color: var(--brand-readable-accent);
}
.month-choice.selected {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-accent-ink);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--brand-accent) 13%, transparent);
}
.month-choice small {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}
.month-choice:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--surface-border);
  padding-top: 15px;
  margin-top: 18px;
}
.picker-footer .small {
  font-size: 12px;
  line-height: 1.6;
  max-width: 180px;
}
.picker-footer .btn {
  border-color: var(--surface-border);
  color: var(--brand-readable-accent);
  white-space: nowrap;
}
.date-field-control {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.date-field-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--surface-border);
  background: color-mix(in srgb, var(--brand-accent) 6%, var(--brand-surface));
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--surface-ink);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
.date-field-trigger > span {
  flex: 1;
  min-width: 0;
}
.date-field-trigger > .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.date-field-trigger > .icon:last-child {
  width: 12px;
  height: 12px;
}
.date-field-trigger:hover {
  background: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-surface));
  border-color: var(--brand-readable-accent);
}
.date-field-trigger:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.date-field-trigger:disabled {
  background: var(--brand-canvas);
  color: var(--surface-muted);
  border-color: var(--surface-border);
  cursor: not-allowed;
}
.staffing-date-trigger {
  min-width: 200px;
  width: auto;
  min-height: 42px;
}
.date-time-control {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.8fr);
}
.date-time-part {
  font-size: 12px;
  padding: 8px;
  border-color: var(--surface-border);
  background: var(--brand-surface);
  color: var(--surface-ink);
}
.date-picker-dialog {
  width: min(394px, calc(100% - 24px));
}
.date-picker-dialog .dialog-header {
  padding: 17px 18px;
  background: var(--brand-canvas);
  border-color: var(--surface-border);
  gap: 12px;
  align-items: flex-start;
}
.date-picker-dialog .dialog-header h2 {
  color: var(--brand-readable-accent);
}
.date-picker-dialog .dialog-header .note {
  font-size: 12px;
  line-height: 1.5;
}
.date-picker-dialog .dialog-content {
  padding: 17px;
}
.day-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 15px;
}
.day-picker-toolbar > .icon-btn {
  width: 37px;
  height: 38px;
  border-color: var(--surface-border);
  color: var(--brand-readable-accent);
  background: color-mix(in srgb, var(--brand-accent) 5%, var(--brand-surface));
}
.calendar-month-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 8px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  font-size: 14px;
  font-weight: 650;
  border-radius: 6px;
}
.calendar-month-title:hover {
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-surface));
}
.calendar-month-title .icon {
  width: 13px;
  height: 13px;
}
.calendar-weekdays,
.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.calendar-weekdays {
  margin-bottom: 7px;
  text-align: center;
  color: #718d83;
  font-size: 12px;
  font-weight: 600;
}
.calendar-weekdays > span {
  padding: 5px 0;
}
.calendar-day {
  min-width: 0;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--brand-canvas);
  color: var(--surface-ink);
  font-size: 12px;
  font-weight: 550;
  display: grid;
  place-items: center;
}
.calendar-day.adjacent {
  background: var(--brand-surface);
  color: var(--surface-muted);
}
.calendar-day:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-surface));
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 40%,
    var(--surface-border)
  );
  color: var(--brand-readable-accent);
}
.calendar-day.is-today {
  border-color: var(--brand-readable-accent);
}
.calendar-day.selected {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border-color: var(--brand-accent);
}
.calendar-day:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 1px;
  z-index: 1;
}
.calendar-day:disabled,
.date-picker-dialog .month-choice:disabled {
  background: var(--brand-canvas);
  color: var(--surface-muted);
  border-color: transparent;
  cursor: not-allowed;
  opacity: 0.65;
}
.date-picker-dialog .picker-footer {
  margin-top: 14px;
  padding-top: 13px;
}
.date-bounds {
  font-size: 12px;
  color: #728b80;
  margin-top: 10px;
  line-height: 1.6;
}
.calendar-jump {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  color: var(--brand-readable-accent);
  border-color: var(--surface-border);
  background: color-mix(in srgb, var(--brand-accent) 6%, var(--brand-surface));
}
.calendar-jump .icon {
  width: 14px;
  height: 14px;
}
.date-picker-dialog .month-choice {
  min-height: 54px;
}
@media (max-width: 600px) {
  .staffing-date-trigger {
    min-width: 0;
    font-size: 12px;
    flex: 1;
    padding: 10px;
  }
  .staffing-period,
  .staffing-period .week-navigation {
    width: 100%;
  }
  .date-field-trigger {
    min-height: 44px;
  }
  .date-time-control {
    grid-template-columns: minmax(0, 1fr);
  }
  .date-picker-dialog .dialog-content {
    padding: 15px;
  }
  .calendar-days-grid,
  .calendar-weekdays {
    gap: 3px;
  }
  .calendar-day {
    min-height: 42px;
  }
  .calendar-jump {
    font-size: 12px;
  }
  .date-picker-dialog .dialog-header {
    padding: 16px;
  }
}

.calendar-day.range-preview:not(:disabled) {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
  color: var(--brand-readable-accent);
}

/* Source: approved-connected.css */
/* Shared workspace states and connected-record controls. */
.hidden,
[hidden] {
  display: none !important;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.approved-demo-bar {
  padding: 8px 32px;
  background: #edf8f4;
  border-bottom: 1px solid #d9e8e3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.approved-demo-bar .btn {
  padding: 6px 10px;
}
.approved-employee-picker {
  border: 1px solid #dce6e8;
  border-radius: 8px;
  padding: 12px;
}
.approved-employees {
  max-height: 170px;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding-top: 12px;
}
.approved-employees input {
  width: 15px;
}
.dialog summary {
  cursor: pointer;
}
.login-art:before,
.login-art:after {
  pointer-events: none;
  z-index: -1;
}
.login-art {
  isolation: isolate;
}
.login-story {
  position: relative;
  z-index: 1;
}
.login-form {
  min-width: 0;
}
.login-form > div {
  max-width: 100%;
}
.calendar-day-view .btn {
  width: auto;
}
.day-calendar .btn {
  width: auto;
}
.dialog .btn {
  min-height: 36px;
}
details.card {
  margin-top: 14px;
}
details.card summary {
  font-weight: 600;
  cursor: pointer;
}
.footer {
  margin-top: 25px;
}
@media (max-width: 600px) {
  .approved-demo-bar {
    flex-wrap: wrap;
    padding: 8px 14px;
  }
  .approved-demo-bar .row {
    flex-wrap: wrap;
  }
  .approved-employees {
    grid-template-columns: 1fr;
  }
}
.approved-day .shift-details-button {
  width: auto;
  min-width: 140px;
  max-width: 230px;
  display: inline-flex;
}
.approved-day .direct-shift-actions {
  display: flex;
  gap: 8px;
}
.approved-day .direct-shift-actions .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 80px;
}
.shift-hours small {
  font-size: 9px;
  color: var(--brand-accent);
}

/* Source: searchable-select.css */
.searchable-filter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  text-align: left;
  justify-content: space-between;
  white-space: normal;
  overflow-wrap: anywhere;
}
.searchable-filter > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.filter-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--surface-border, #dbe5e0);
  border-radius: 12px;
  background: var(--brand-surface, #fff);
  color: var(--surface-ink, #193e40);
  box-shadow: 0 12px 40px
    color-mix(in srgb, var(--brand-ink, #193e40) 15%, transparent);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  box-sizing: border-box;
  font: inherit;
}
.filter-popover input {
  width: 100%;
  min-height: 42px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--surface-border, #dbe5e0);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  color: inherit;
  background: var(--brand-surface, #fff);
  box-sizing: border-box;
}
.filter-options {
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow: auto;
}
.filter-option {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  border: 0;
  background: var(--brand-surface, #fff);
  color: inherit;
  padding: 10px;
  padding-inline-end: 32px;
  border-radius: 6px;
  min-height: 40px;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.filter-option[aria-selected='true']::after {
  content: '';
  position: absolute;
  inset-inline-end: 14px;
  top: calc(50% - 7px);
  width: 6px;
  height: 11px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.filter-option:hover,
.filter-option[aria-selected='true'] {
  background: color-mix(
    in srgb,
    var(--brand-accent, #0f766e) 8%,
    var(--brand-surface, #fff)
  );
  color: var(--brand-readable-accent, #0f766e);
}
.filter-option:focus-visible,
.filter-popover input:focus-visible {
  outline: 2px solid var(--brand-accent, #0f766e);
  outline-offset: -2px;
}
.filter-option:disabled {
  opacity: 0.45;
  cursor: default;
}
.filter-options > p {
  margin: 0;
  padding: 16px 10px;
  font-size: 14px;
}
.filter-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Source: approved-usability.css */
/* Readability improvements preserve the approved layout and teal palette. */
.list-filter-row,
.calendar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 650;
  color: var(--surface-muted);
  border-left: 1px solid var(--surface-border);
  padding-left: 12px;
  white-space: nowrap;
}
.list-filter-row > .searchable-filter,
.calendar-filters > .searchable-filter,
.toolbar > .dialog:has([data-form='timecard']) {
  width: min(860px, calc(100% - 24px));
  max-width: 860px;
}
.dialog [data-form='timecard'] label:has([name='shift_id']) {
  grid-column: 1/-1;
}
.dialog [data-form='timecard'] .date-time-control {
  grid-template-columns: minmax(0, 1fr) 155px;
}
.dialog [data-form='timecard'] .date-time-part {
  width: 100%;
  min-width: 0;
  padding: 8px;
  font-size: 14px;
}
.dialog [data-form='timecard'] .form-grid > * {
  min-width: 0;
}
@media (max-width: 650px) {
  .dialog [data-form='timecard'] .form-grid {
    grid-template-columns: 1fr;
  }
  .dialog [data-form='timecard'] .date-time-control {
    grid-template-columns: 1fr;
  }
  .dialog [data-form='timecard'] .date-time-part {
    min-height: 44px;
  }
}
:root {
  --muted: var(--surface-muted);
}
body {
  font-size: 14px;
}
.small,
.label,
.muted,
.note,
.metric .hint,
table th,
table td small,
.bar-label,
.footer,
.top .header-account {
  gap: 12px;
  min-width: 0;
}
.top .header-account > .header-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 48px;
  min-width: 0;
  background: transparent;
  text-align: left;
}
.top .header-account > .header-profile:hover {
  background: var(--surface-soft);
  border-color: var(--surface-border);
}
.top .header-profile .avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.top .header-profile .user-detail {
  min-width: 0;
  line-height: 1.35;
}
.top .header-profile-role {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--surface-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-clock span,
.company-context span {
  font-size: 12px;
}
table td,
input,
select,
textarea {
  font-size: 14px !important;
}
table th {
  letter-spacing: 0.05em;
}
.muted,
.note,
.metric .hint,
.footer {
  color: var(--surface-muted) !important;
}
.nav-group-title {
  padding: 12px 12px 5px;
  color: var(--surface-muted);
  letter-spacing: 0.05em;
}
.nav-group .nav-btn {
  width: 100%;
}
.nav-group + .nav-group {
  margin-top: 4px;
}
.sidebar {
  overflow-y: auto;
}
.nav-btn {
  min-height: 38px;
}
.nav-group .nav-btn {
  white-space: normal;
  text-align: left;
}
.top {
  min-height: 76px;
  height: auto;
}
.company-context {
  max-width: 30%;
  min-width: 0;
}
.company-context strong,
.company-context span {
  overflow-wrap: anywhere;
}
.quick-search {
  font-size: 26px;
  width: 36px;
  height: 36px;
}
.mobile-menu {
  display: none;
}
.shift-block.draft {
  border-style: dashed !important;
}
.shift-block.open-assignment {
  border: 2px dotted #0f766e !important;
  background: #f0fdfa;
}
.pickup-premium {
  color: var(--brand-readable-accent);
  font-weight: 700;
}
.shift-hours {
  flex-wrap: wrap;
}
.shift-details-button {
  min-height: 36px;
}
.approved-day .shift-details-button {
  max-width: 230px;
}
.login-form {
  overflow-wrap: anywhere;
}
.login-story {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.search-results {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  max-height: 55vh;
  overflow-y: auto;
}
.search-result {
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}
.mobile-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mobile-navigation .btn {
  white-space: normal;
  min-height: 44px;
  text-align: left;
}
@media (max-width: 850px) {
  .sidebar {
    display: none !important;
  }
  .layout {
    display: block !important;
  }
  .mobile-menu {
    display: inline-flex;
  }
  .top {
    flex-wrap: wrap;
    padding: 12px !important;
    gap: 12px;
  }
  .top > .row {
    gap: 10px !important;
  }
  .company-context {
    max-width: 55%;
    position: static !important;
    transform: none !important;
  }
  .header-clock {
    position: static !important;
    transform: none !important;
    margin-left: auto;
  }
  .workspace {
    padding: 18px 12px !important;
  }
  .quick-search {
    min-width: 36px;
  }
  .week {
    overflow-x: auto;
  }
  .login-art {
    display: none !important;
  }
  .login-shell {
    grid-template-columns: 1fr !important;
  }
  .login-form {
    width: 100%;
    padding: 28px !important;
  }
}
.shift-block .shift-details-button,
.shift-block .direct-shift-actions {
  width: 100% !important;
  max-width: 280px !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.shift-block .shift-details-button {
  font-size: 14px !important;
  min-height: 44px !important;
  justify-content: center;
}
.shift-block .direct-shift-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.shift-block .direct-shift-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  font-size: 14px !important;
}
.shift-block p,
.month-grid .shift-block p,
.shift-block .shift-hours,
.month-grid .shift-block .shift-hours {
  font-size: 14px !important;
  line-height: 1.65;
}
.day .label,
.day .badge,
.calendar-filters,
.calendar-filters select {
  font-size: 13px !important;
}
.shift-block .shift-hours,
.month-grid .shift-block .shift-hours {
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.3px;
}
.shift-hours small {
  font-size: 12px !important;
}
/* Calendar hierarchy: time, assignment, then actions. */
.schedule-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
}
.schedule-scroll > .week,
.schedule-scroll > .month-grid {
  min-width: 1120px;
}
.shift-block,
.month-grid .shift-block {
  padding: 14px !important;
}
.shift-block .shift-hours,
.month-grid .shift-block .shift-hours {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-bottom: 13px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--surface-border);
}
.shift-time-point {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.shift-hours .shift-time-point small {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px !important;
  font-weight: 500;
  color: var(--surface-muted);
  white-space: normal;
  letter-spacing: 0;
}
.shift-assignment {
  display: grid;
  gap: 5px;
  margin: 0 !important;
  overflow-wrap: anywhere;
}
.shift-assignment strong {
  font-size: 14px;
  font-weight: 650;
}
.shift-assignment .shift-lunch {
  border-top: 1px solid var(--surface-border);
  padding-top: 9px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.6;
}
.shift-block .shift-details-button {
  margin-top: 16px;
}
.approved-day .shift-block {
  max-width: 620px;
}
.approved-day .shift-hours {
  grid-template-columns: 1fr 1fr;
}
.staffing-date-toolbar {
  justify-content: flex-start !important;
}
.staffing-date-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, var(--surface-border));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-accent) 4%, transparent);
  max-width: 100%;
  gap: 0;
}
.staffing-date-group > [data-action] {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  font-size: 25px;
  color: var(--brand-readable-accent);
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-surface));
}
.staffing-date-group > .calendar-jump {
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--brand-accent) 30%, var(--surface-border));
  border-right: 1px solid color-mix(in srgb, var(--brand-accent) 30%, var(--surface-border));
  border-radius: 0;
  margin: 0;
  min-height: 48px;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  justify-content: center;
  padding: 9px 16px;
  font-size: 14px;
  white-space: normal;
}
.staffing-date-group > [data-action]:hover {
  background: color-mix(in srgb, var(--brand-accent) 13%, var(--brand-surface));
}
.staffing-date-group > .calendar-jump:hover {
  background: color-mix(in srgb, var(--brand-accent) 85%, var(--brand-ink));
}
@media (max-width: 600px) {
  .staffing-date-group {
    width: 100%;
  }
  .staffing-date-group > .calendar-jump {
    flex: 1;
    min-width: 0;
    padding: 8px;
    font-size: 13px;
  }
  .approved-day .shift-hours {
    grid-template-columns: 1fr 1fr;
  }
  .shift-block,
  .month-grid .shift-block {
    padding: 12px !important;
  }
}
.staffing-date-group > [data-action] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.staffing-arrow {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.staffing-date-group > [data-action] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  font-size: inherit;
  background: color-mix(in srgb, var(--brand-accent) 5%, var(--brand-surface));
}
.staffing-date-group > .calendar-jump {
  min-height: 40px;
}
.staffing-date-group .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}
.staffing-updated {
  font-size: 12px;
  color: var(--surface-muted);
  white-space: nowrap;
}
.staffing-date-toolbar {
  gap: 12px;
  flex-wrap: wrap;
}
.report-category.category-0 {
  background: #fff0da;
  color: #875015;
}
.report-category.category-1 {
  background: #eef0ff;
  color: #51439a;
}
.report-category.category-2 {
  background: #fce8ef;
  color: #96385b;
}
.report-category.category-3 {
  background: #dff5f1;
  color: #146b5d;
}
.report-category.category-4 {
  background: #eaf0f4;
  color: #435b6b;
}
.approved-demo-bar {
  flex-wrap: wrap;
}
.approved-demo-bar > select {
  max-width: 280px;
}

.required-marker {
  color: #b42318;
  font-weight: 700;
  margin-left: 3px;
}
.approved-employee-picker label[hidden] {
  display: none;
}
.approved-employee-picker label:has(input:disabled) {
  display: none;
}
.queue-filters {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.queue-filters label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--surface-muted);
}
.queue-filters label:first-child {
  flex: 1;
  min-width: 180px;
}
.queue-filters input,
.queue-filters select {
  min-height: 40px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--brand-surface);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--surface-ink);
}
.queue-result-count,
.queue-more {
  padding: 8px 20px;
}

/* Month cells are summaries; the full card opens the existing shift editor. */
.month-grid .month-shift-card {
  padding: 12px !important;
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.month-grid .month-shift-card:hover {
  background: var(--brand-hover-soft);
  box-shadow: 0 0 0 1px var(--brand-border);
}
.month-grid .month-shift-card .shift-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  font-size: 14px !important;
  line-height: 1.4;
}
.month-grid .month-shift-card .shift-time-point {
  display: block;
  min-width: 0;
}
.month-grid .month-shift-card .shift-time-point > small {
  display: none;
}
.month-grid .month-shift-card .shift-time-point + .shift-time-point::before {
  content: '– ';
  color: var(--surface-muted);
}
.month-grid .month-shift-card .shift-assignment {
  font-size: 12px !important;
  gap: 4px;
  line-height: 1.4;
}
.month-grid .month-shift-card .shift-assignment strong {
  font-size: 13px;
}
.month-grid .month-shift-card .shift-assignment :is(.shift-department, .shift-lunch) {
  display: none;
}
.month-grid .month-shift-card .shift-assignment > span:not(.shift-department):not(.shift-lunch) {
  display: none;
}
.month-grid .month-shift-card .area-label {
  margin: 0 0 8px;
  padding: 4px 6px;
  white-space: normal;
  line-height: 1.4;
}
.calendar-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  color: var(--brand-readable-accent);
  font-size: 12px;
  font-weight: 650;
}
.calendar-card-link .icon {
  width: 14px;
  height: 14px;
}
.month-grid .month-shift-card .pickup-premium {
  font-size: 12px !important;
  line-height: 1.4;
}

/* Source: workspace-revision.css */
.company-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-right: 8px;
}
.profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.workgrid-credit {
  display: block;
  margin-top: 12px;
  color: #526e74;
  font-size: 12px;
}
.shared-time-picker {
  display: flex;
  gap: 6px;
  min-width: 230px;
}
.shared-time-picker select {
  display: block !important;
  flex: 1;
  min-width: 65px;
  border: 1px solid #c7d8d3;
  border-radius: 8px;
  padding: 10px 6px;
  background: white;
  color: #23483f;
  font-size: 14px;
}
.shared-time-picker + .searchable-filter,
.shared-time-picker .searchable-filter {
  display: none !important;
}
.area-label {
  margin-bottom: 9px;
  white-space: normal;
}
.timeline-scroll {
  overflow: auto;
  max-height: 680px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: white;
}
.shift-timeline {
  display: grid;
  grid-template-columns: 84px repeat(var(--lanes), minmax(190px, 1fr));
  min-width: max-content;
}
.timeline-labels {
  position: sticky;
  left: 0;
  background: white;
  z-index: 2;
}
.timeline-heading {
  position: sticky;
  top: 0;
  height: 52px;
  padding: 14px 10px;
  background: var(--brand-soft);
  border-bottom: 1px solid var(--surface-border);
  z-index: 3;
  font-size: 13px;
  font-weight: 650;
}
.hour-label {
  height: 60px;
  padding: 5px 8px;
  font-size: 12px;
  color: #526e74;
  border-top: 1px solid #e4ece9;
}
.timeline-lane {
  min-width: 190px;
  border-left: 1px solid var(--surface-border);
}
.timeline-hours {
  height: 1440px;
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 59px,
    #e4ece9 59px,
    #e4ece9 60px
  );
}
.timeline-shift {
  position: absolute;
  left: 5px;
  right: 5px;
  background: var(--brand-soft);
  border: 1px solid var(--surface-border);
  border-left: 5px solid var(--brand-readable-accent);
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.timeline-shift:hover {
  background: var(--brand-hover-soft);
}
.timeline-shift strong {
  font-size: 15px;
}
.timeline-shift span {
  font-size: 13px;
}
.timeline-shift small {
  font-size: 12px;
  color: var(--surface-muted);
}
.schedule-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.section-search {
  display: grid;
  gap: 6px;
  padding: 12px 18px;
  font-size: 12px;
  color: #526e74;
}
.section-search input {
  border: 1px solid #cbdcd6;
  border-radius: 8px;
  padding: 9px;
  background: white;
}
.lunch-editor {
  border: 1px solid #dce8e3;
  border-radius: 10px;
  padding: 14px;
}
.lunch-entry {
  padding: 12px 0;
  border-bottom: 1px solid #e4ece9;
}
.section-search input:focus-visible,
.shared-time-picker select:focus-visible {
  outline: 2px solid var(--brand-readable-accent);
  outline-offset: 2px;
}
.notification-actions:empty {
  display: none;
}

.sidebar .nav-group {
  display: grid;
  gap: 2px;
}
.sidebar .nav-group-title {
  padding: 13px 12px 4px;
  color: #526e74;
}
.sidebar .nav-group .nav-btn {
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
}
.sidebar .nav-group + .nav-group {
  border-top: 1px solid #edf2f1;
  margin-top: 9px;
  padding-top: 4px;
}
.sidebar .nav-group .nav-btn.active {
  box-shadow: inset 3px 0 var(--brand-readable-accent);
}
.mobile-navigation {
  display: block;
}
.mobile-nav-group + .mobile-nav-group {
  border-top: 1px solid #e3eeea;
  margin-top: 16px;
  padding-top: 16px;
}
.mobile-nav-group h3 {
  margin-bottom: 10px;
  color: #526e74;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mobile-nav-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mobile-nav-group .btn {
  justify-content: flex-start;
  min-height: 44px;
}
.shift-time-panel,
.shift-lunch-panel {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  padding: 14px 16px 13px;
  background: var(--brand-soft);
}
.shift-lunch-panel {
  background: #fff;
  border-color: #dce8e3;
}
.shift-time-panel legend,
.shift-lunch-panel legend {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-readable-accent);
}
.shift-time-panel > .note {
  margin-top: 10px;
}
.shift-time-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.shift-time-pair > .field {
  min-width: 0;
}
.shift-time-pair > .field > span {
  font-size: 13px;
  font-weight: 650;
}
.shift-time-panel .shared-time-picker,
.shift-lunch-panel .shared-time-picker {
  min-width: 0;
}
.area-help {
  margin-top: -6px;
}
.schedule-time-filter {
  min-width: 0;
}
.schedule-time-filter summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid
    color-mix(in srgb, var(--brand-accent) 30%, var(--brand-surface));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-surface));
  color: var(--brand-readable-accent);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.schedule-time-filter summary::-webkit-details-marker {
  display: none;
}
.schedule-time-filter summary:hover {
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-surface));
}
.schedule-time-filter summary:focus-visible {
  outline: 2px solid var(--brand-readable-accent);
  outline-offset: 2px;
}
.schedule-time-filter[open] {
  flex: 1 1 100%;
}
.schedule-time-filter .schedule-time-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: end;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: var(--brand-canvas);
}
.schedule-time-filter .schedule-time-fields > .btn {
  justify-self: start;
}
.calendar-filters .schedule-time-filter {
  flex: 0 1 auto;
}
.calendar-filters .schedule-time-filter[open] {
  flex: 1 1 100%;
}
.calendar-category-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 11px 0;
  padding: 10px 12px;
  border: 1px solid #dce8e3;
  border-radius: 9px;
  background: #fff;
}
.calendar-category-legend strong {
  font-size: 12px;
  color: #526e74;
  margin-right: 3px;
}
.category-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #dce8e3;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.category-key::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--category-color);
}
.calendar-week-grid {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
  max-height: 700px;
  min-width: 0;
  overflow: auto;
  border: 1px solid #d8e5e0;
  border-radius: 10px;
  background: #fff;
}
.week-hour-axis {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #fff;
}
.week-time-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 52px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--brand-canvas);
  font-size: 12px;
  color: var(--surface-ink);
}
.week-time-heading span {
  font-size: 18px;
  font-weight: 700;
}
.week-time-heading.is-today {
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.week-hour-axis .week-time-heading {
  z-index: 5;
}
.week-hour-label {
  height: 48px;
  padding: 4px 7px;
  border-top: 1px solid #e6eeeb;
  color: #526e74;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap;
}
.week-day-column {
  min-width: 0;
  border-left: 1px solid #dce8e3;
}
.week-day-hours {
  position: relative;
  height: 1152px;
  background: repeating-linear-gradient(
    to bottom,
    #fff 0,
    #fff 47px,
    #e6eeeb 47px,
    #e6eeeb 48px
  );
}
.week-time-event.shift-block {
  position: absolute;
  top: var(--event-top);
  left: calc(var(--event-left) + 3px);
  width: calc(var(--event-width) - 6px);
  height: var(--event-height);
  min-height: 42px;
  margin: 0 !important;
  padding: 7px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--event-color);
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--surface-ink);
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
  z-index: 1;
}
.week-time-event strong {
  font-size: 12px;
  line-height: 1.3;
}
.week-time-event span,
.week-time-event small {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.week-time-event:hover {
  background: var(--brand-hover-soft);
  z-index: 2;
}
.week-time-event.draft {
  border-style: dashed;
  background: #fff9e9;
}
.week-time-event.open-assignment {
  border-style: dotted;
  background: #f3fbf8;
}
.week-rest {
  display: block;
  padding: 14px 7px;
  color: #708780;
  font-size: 12px;
}
.week-day-hours .calendar-no-match {
  position: absolute;
  top: 8px;
  left: 6px;
  right: 6px;
  background: #fff;
}
@media (max-width: 1200px) {
  .calendar-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    gap: 10px;
    border: 0;
    background: transparent;
  }
  .week-hour-axis {
    display: none;
  }
  .week-day-column {
    border: 1px solid #dce8e3;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
  }
  .week-time-heading {
    position: static;
  }
  .week-day-hours {
    height: auto;
    min-height: 50px;
    padding: 9px;
    display: grid;
    gap: 8px;
    background: none;
  }
  .week-time-event.shift-block {
    position: static;
    width: 100%;
    height: auto;
    min-height: 62px;
    padding: 10px !important;
  }
  .week-time-event span,
  .week-time-event small {
    font-size: 12px;
  }
  .week-rest {
    padding: 4px;
  }
}
@media (max-width: 650px) {
  .shift-time-pair {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .schedule-time-filter[open],
  .calendar-filters .schedule-time-filter[open] {
    flex-basis: 100%;
  }
  .calendar-week-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 851px) {
  .sidebar {
    position: sticky;
    top: 78px;
    height: calc(100dvh - 78px);
    align-self: start;
    overscroll-behavior: contain;
  }
}
@media (max-width: 1200px) {
  .schedule-scroll {
    overflow-x: visible;
    padding-bottom: 0;
  }
  .schedule-scroll > .week,
  .schedule-scroll > .month-grid {
    min-width: 0;
    width: 100%;
  }
  .schedule-scroll > .week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .schedule-scroll > .month-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .workspace .table-wrap {
    overflow: visible;
  }
  .workspace .table-wrap table,
  .workspace .table-wrap tbody,
  .workspace .table-wrap tr,
  .workspace .table-wrap td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .workspace .table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .workspace .table-wrap tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }
  .workspace .table-wrap tr {
    border: 1px solid #dce8e3;
    border-radius: 9px;
    background: #fff;
    padding: 5px 12px;
  }
  .workspace .table-wrap td {
    display: grid;
    grid-template-columns: minmax(120px, 35%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 9px 0 !important;
    border: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  .workspace .table-wrap td + td {
    border-top: 1px solid #eef3f1 !important;
  }
  .workspace .table-wrap td::before {
    content: attr(data-label);
    color: #526e74;
    font-size: 12px;
    font-weight: 650;
  }
  .workspace .table-wrap td .btn {
    white-space: normal;
    text-align: center;
  }
  .workspace .table-wrap td .row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .workspace .table-wrap td small {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 850px) {
  .timeline-scroll {
    overflow: visible;
    max-height: none;
  }
  .shift-timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: 10px;
    padding: 10px;
  }
  .timeline-labels {
    display: none;
  }
  .timeline-lane {
    min-width: 0;
    border: 1px solid var(--surface-border);
    border-radius: 9px;
    overflow: hidden;
  }
  .timeline-heading {
    position: static;
    height: auto;
    min-height: 42px;
    padding: 11px;
  }
  .timeline-hours {
    height: auto;
    background: none;
    padding: 8px;
  }
  .timeline-shift {
    position: static !important;
    width: 100%;
    height: auto !important;
    min-height: 92px;
    overflow: visible;
  }
}
@media (max-width: 700px) {
  .schedule-scroll > .month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .schedule-scroll > .week,
  .shift-timeline {
    grid-template-columns: 1fr;
  }
  .workspace .table-wrap td {
    grid-template-columns: minmax(86px, 38%) minmax(0, 1fr);
    gap: 8px;
  }
  .mobile-nav-group > div {
    grid-template-columns: 1fr;
  }
  .page-head:has([data-action='callout']) > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .page-head:has([data-action='callout']) > .row > .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    min-height: 44px;
  }
  .page-head:has([data-action='callout']) > .row > [data-action='new-shift'] {
    grid-column: 1/-1;
  }
  .queue-filters label:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
  .queue-filters label:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
  }
}
.notification-hub {
  width: 100%;
  min-width: 0;
}
.notification-filter-bar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 190px) minmax(
      150px,
      190px
    );
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
  box-shadow: none;
}
.notification-search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  color: var(--brand-readable-accent);
  background: var(--brand-canvas);
}
.notification-search:focus-within {
  border-color: var(--brand-readable-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 10%, transparent);
}
.notification-search .icon {
  width: 17px;
  height: 17px;
}
.notification-search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--surface-ink);
  font-size: 14px;
}
.notification-select {
  display: grid;
  gap: 5px;
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 650;
}
.notification-select select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  font-size: 13px;
}
.notification-category-select {
  display: none;
}
.notification-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 16px;
}
.notification-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid
    color-mix(in srgb, var(--filter-tone, var(--surface-border)) 35%, white);
  border-radius: 9px;
  background: #fff;
  color: var(--filter-tone, var(--surface-muted));
  font-size: 12px;
  font-weight: 650;
}
.notification-category > .icon:first-child {
  color: var(--filter-tone, currentColor);
  width: 19px;
  height: 19px;
  flex: none;
}
.notification-selected-mark {
  display: inline-flex;
  color: var(--brand-readable-accent);
}
.notification-selected-mark .icon {
  width: 16px;
  height: 16px;
}
.notification-category:hover {
  border-color: var(--brand-readable-accent);
  background: var(--surface-soft);
}
.notification-category.selected {
  background: var(--tab-active-bg);
  border-color: var(--tab-active-border);
  color: var(--tab-active-ink);
  box-shadow: 0 2px 8px
    color-mix(in srgb, var(--brand-accent) 12.5%, transparent);
}
.notification-category-count {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--filter-pale, var(--surface-soft));
  color: var(--filter-tone, var(--surface-muted));
  font-size: 11px;
}
.notification-category.selected .notification-category-count {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.notification-stream {
  display: grid;
  gap: 12px;
}
.notification-day {
  margin: 10px 0 0;
  color: var(--surface-muted);
  font-size: 12px !important;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.notification-card {
  --notice-tone: var(--type-other);
  --notice-pale: var(--type-other-pale);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 18px !important;
}
.notification-card.is-read {
  border-color: var(--surface-border);
}
.notification-card.is-read h3 {
  font-weight: 550;
}
.notification-card.is-unread h3 {
  font-weight: 750;
}
.notification-card[data-category='announcements'] {
  --notice-tone: var(--type-announcements);
  --notice-pale: var(--type-announcements-pale);
}
.notification-card[data-category='schedule'] {
  --notice-tone: var(--type-schedule);
  --notice-pale: var(--type-schedule-pale);
}
.notification-card[data-category='requests'] {
  --notice-tone: var(--type-requests);
  --notice-pale: var(--type-requests-pale);
}
.notification-card[data-category='time'] {
  --notice-tone: var(--type-time);
  --notice-pale: var(--type-time-pale);
}
.notification-card[data-category='pay'] {
  --notice-tone: var(--type-pay);
  --notice-pale: var(--type-pay-pale);
}
.notification-card[data-category='cases'],
.notification-category[data-category='cases'] {
  --notice-tone: var(--type-cases);
  --notice-pale: var(--type-cases-pale);
  --filter-tone: var(--type-cases);
  --filter-pale: var(--type-cases-pale);
}

.notification-symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--notice-pale);
  color: var(--notice-tone);
}
.notification-symbol .icon {
  width: 21px;
  height: 21px;
}
.notification-content {
  min-width: 0;
}
.notification-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-bottom: 8px;
}
.notification-type {
  color: var(--notice-tone);
  font-size: 12px;
  font-weight: 750;
}
.notification-card-meta time {
  color: var(--surface-muted);
  font-size: 12px;
}
.notification-unread {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  color: var(--brand-readable-accent);
  font-size: 12px;
  font-weight: 650;
}
.notification-unread::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.notification-title {
  padding: 0;
  background: transparent;
  color: var(--surface-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  border: 0;
  border-radius: 0;
  min-height: 0;
  overflow-wrap: anywhere;
}
.notification-title:hover {
  color: #0b786a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notification-body {
  margin: 8px 0 12px !important;
  color: var(--surface-muted);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.notification-record-facts {
  margin: 12px 0;
}
.notification-record-facts dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
}
.notification-record-facts dl > div {
  min-width: 0;
}
.notification-record-facts dt {
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.5;
}
.notification-record-facts dd {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--surface-ink);
  overflow-wrap: anywhere;
}
.notification-context {
  margin: 10px 0 0;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.5;
}
.notification-details {
  margin: 8px 0 12px;
}
.notification-details summary {
  width: fit-content;
  padding: 5px 0;
  color: var(--brand-readable-accent);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.notification-details summary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notification-details summary:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
  border-radius: 3px;
}
.notification-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.notification-actions .btn {
  min-height: 36px;
  font-size: 12px;
}
.notification-actions [data-action='record-delete'] {
  margin-left: auto;
  background: transparent;
  color: var(--surface-muted);
}
.notification-actions .notification-utility {
  background: transparent;
  border-color: transparent;
}
.notification-actions [data-action='record-delete']:hover {
  color: var(--status-danger-ink);
  background: var(--status-danger-pale, #fff1f2);
  border-color: var(--status-danger-ink);
}
.notification-empty {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 48px 20px;
  border: 1px dashed #b7d7ca;
  border-radius: 12px;
  background: #f9fcfa;
  text-align: center;
}
.notification-empty > .icon {
  width: 34px;
  height: 34px;
  color: #0f766e;
}
.notification-empty h2 {
  font-size: 18px;
}
.notification-empty p {
  color: var(--surface-muted);
  font-size: 13px;
}
@media (max-width: 700px) {
  .notification-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }
  .notification-search {
    grid-column: 1/-1;
  }
  .notification-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    padding: 15px !important;
  }
  .notification-symbol {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .notification-card-meta {
    gap: 5px 8px;
  }
  .notification-unread {
    margin-left: 0;
  }
  .notification-actions [data-action='record-delete'] {
    margin-left: 0;
  }
  .notification-title {
    font-size: 15px;
  }
  .notification-categories {
    display: none;
  }
  .notification-category-select {
    display: grid;
    grid-column: 1 / -1;
  }
}
@media (max-width: 360px) {
  .notification-filter-bar {
    grid-template-columns: 1fr;
  }
  .notification-search {
    grid-column: auto;
  }
}

.admin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 30px;
  margin-bottom: 18px;
  border: 1px solid #b9dcd2;
  border-radius: 14px;
  background: var(--brand-surface, #fff);
  box-shadow: 0 8px 28px #176e5720;
}
.admin-eyebrow {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.09em;
  color: #16715e;
}
.admin-hero h2 {
  font-size: 25px;
  margin: 7px 0;
  color: #194f45;
}
.admin-hero p {
  font-size: 13px;
  color: #466d65;
}
.admin-hero-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 17px;
  background: #0f766e;
  color: #fff;
  box-shadow: 0 8px 20px
    color-mix(in srgb, var(--brand-accent) 18.8%, transparent);
}
.admin-hero-mark .icon {
  width: 29px;
  height: 29px;
}
.admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.admin-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 17px;
  border: 1px solid #d8e7e2;
  border-radius: 11px;
  background: #fff;
  text-align: left;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-ink) 3.1%, transparent);
}
.admin-summary-card:hover,
.admin-link-grid button:hover {
  border-color: #91c5b5;
  background: #f6fbf8;
  transform: translateY(-1px);
}
.admin-summary-card > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.admin-summary-card strong {
  font-size: 23px;
  line-height: 1;
  color: #21493f;
}
.admin-summary-card small {
  font-size: 12px;
  color: #526e74;
}
.admin-summary-card > .icon:last-child {
  width: 16px;
  color: #597e72;
}
.admin-summary-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
}
.admin-summary-icon.teal {
  background: #dff4e8;
  color: #0b795d;
}
.admin-summary-icon.blue {
  background: #e5f0fb;
  color: #286a9c;
}
.admin-summary-icon.violet {
  background: #f0ebf9;
  color: #7153a4;
}
.admin-manager-card {
  margin-bottom: 18px;
}
.admin-manager-list {
  display: grid;
}
.admin-manager-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 20px;
  border-top: 1px solid #e9f0ed;
}
.admin-manager-row > div {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.admin-manager-row strong {
  font-size: 13px;
}
.admin-manager-row small {
  font-size: 12px;
  color: #526e74;
  overflow-wrap: anywhere;
}
.admin-manager-row .badge {
  margin-right: 5px;
}
.admin-empty {
  padding: 20px;
  color: #526e74;
  font-size: 13px;
}
.admin-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.admin-link-grid button {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #d8e7e2;
  border-radius: 11px;
  background: #fff;
  color: #176c5b;
  text-align: left;
}
.admin-link-grid button > span {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.admin-link-grid strong {
  font-size: 13px;
  color: #234e44;
}
.admin-link-grid small {
  font-size: 12px;
  color: #526e74;
  line-height: 1.4;
}
.admin-link-grid button > .icon:last-child {
  width: 15px;
}
.admin-manager-table {
  margin-bottom: 18px;
}
.earnings-summary-rate {
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  font-size: 13px;
  font-weight: 700;
}
.earnings-rate {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 12px 0 17px;
  padding: 15px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface, #fff);
}
.earnings-rate-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.earnings-rate > div {
  display: grid;
  gap: 3px;
}
.earnings-rate small {
  color: var(--surface-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
}
.earnings-rate strong {
  color: var(--brand-readable-accent);
  font-size: 20px;
}
.earnings-rate span:last-child {
  color: var(--surface-muted);
  font-size: 12px;
}
.payroll-explainer {
  margin: -9px 0 17px;
  color: #526e74;
  font-size: 13px;
  line-height: 1.5;
}
.work-area-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border-bottom: 1px solid #e8efeb;
}
.work-area-row[hidden] {
  display: none;
}
.work-area-color {
  width: 11px;
  height: 33px;
  flex: 0 0 11px;
  border-radius: 5px;
  background: var(--area-color);
}
.work-area-row > div {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.work-area-row strong {
  font-size: 13px;
  color: #274b43;
}
.work-area-row span {
  font-size: 12px;
  color: #526e74;
}
.work-area-row small {
  color: #647e78;
}
.timecard-punch-panel,
.timecard-assignment {
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  padding: 15px;
  background: var(--brand-soft);
}
.timecard-punch-panel {
  min-width: 0;
}
.timecard-punch-panel legend {
  padding: 0 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-readable-accent);
}
.timecard-punch-panel > .note {
  margin: 0 0 12px;
}
.timecard-punch-pair,
.timecard-assignment-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.timecard-punch-pair > .field {
  min-width: 0;
}
.timecard-assignment {
  display: grid;
  gap: 12px;
  background: var(--brand-surface);
}
.timecard-assignment strong {
  font-size: 13px;
}
.timecard-assignment p {
  margin-top: 4px;
  font-size: 12px;
  color: var(--surface-muted);
}
.dialog:has(.timecard-punch-panel) {
  width: min(760px, calc(100% - 28px));
}
.dialog:has(.timecard-punch-panel) .date-time-control {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.dialog:has(.timecard-punch-panel) .shared-time-picker {
  min-width: 0;
}
.dialog:has(.timecard-punch-panel) .shared-time-picker select {
  min-width: 0;
}
.lunch-entry .date-time-control {
  grid-template-columns: minmax(0, 1fr);
}
.lunch-entry .shared-time-picker {
  min-width: 0;
}
.lunch-entry .shared-time-picker select {
  min-width: 0;
}
.lunch-editor {
  min-width: 0;
}
.lunch-entry {
  min-width: 0;
}
@media (max-width: 800px) {
  .admin-summary,
  .admin-link-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .admin-summary,
  .admin-link-grid,
  .timecard-punch-pair,
  .timecard-assignment-fields {
    grid-template-columns: 1fr;
  }
  .admin-hero {
    padding: 20px;
  }
  .admin-hero-mark {
    display: none;
  }
  .admin-manager-row {
    flex-wrap: wrap;
  }
  .admin-manager-row > .btn {
    margin-left: 49px;
  }
}

.admin-link-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Operational categories use the same labeled icon colors as the inbox. */
.action-queue .queue-item[data-queue-category='Requests'] .queue-icon {
  background: var(--type-requests-pale);
  color: var(--type-requests);
}
.action-queue .queue-item[data-queue-category='Timecards'] .queue-icon {
  background: var(--type-time-pale);
  color: var(--type-time);
}
.action-queue .queue-item[data-queue-category='Coverage'] .queue-icon {
  background: var(--type-schedule-pale);
  color: var(--type-schedule);
}
.action-queue .queue-item[data-queue-category='Conflicts'] .queue-icon {
  background: var(--status-warning-surface);
  color: var(--status-warning-ink);
}
.workspace[data-view='reports'] td.is-negative {
  color: #a34a3b;
  font-weight: 700;
}
.workspace[data-view='reports'] td.is-positive {
  color: #0f766e;
  font-weight: 700;
}
.earnings-status-note {
  margin: -6px 0 17px;
  padding: 0 2px;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.5;
}
.workspace[data-view='payroll'] .badge.pay-status-progress {
  background: #eaf2f9;
  color: #285f8b;
}
.workspace[data-view='payroll'] .badge.pay-status-ready {
  background: #e8f3fb;
  color: #246391;
}
.workspace[data-view='payroll'] .badge.pay-status-error {
  background: #fff1dc;
  color: #976419;
}
.workspace[data-view='payroll'] .badge.pay-status-final {
  background: #e4f5eb;
  color: #0b7658;
}
@media (max-width: 600px) {
  .admin-link-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .earnings-summary-rate {
    display: none;
  }
}

.notification-content > h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #213c40;
}
@media (max-width: 700px) {
  .notification-content > h3 {
    font-size: 15px;
  }
}
.notification-count {
  position: absolute;
  right: -5px;
  top: -6px;
  display: grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  padding: 1px 5px;
  border: 2px solid var(--brand-surface);
  border-radius: 999px;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.notification-warning-summary {
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 12px;
  background: var(--brand-surface);
  margin-top: 12px;
}
.notification-warning-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.notification-warning-summary strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--warning-ink, #78350f);
}
.notification-warning-summary > div > span {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-muted);
}
.notification-warning-summary p {
  margin: 10px 0;
  line-height: 1.6;
  color: var(--text-primary);
}
.notification-warning-summary footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.notification-warning-summary.is-final {
  border-color: var(--surface-border);
}
.notification-warning-summary.is-final strong {
  color: var(--danger-ink, #991b1b);
}

.notification-hub,
.notification-stream,
.notification-content {
  min-width: 0;
}
.notification-actions .btn {
  white-space: normal;
  height: auto;
  line-height: 1.5;
  text-align: center;
}
.notification-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.notification-category {
  white-space: normal;
  height: auto;
}
@media (max-width: 600px) {
  .notification-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 16px !important;
  }
  .notification-symbol {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .notification-actions {
    gap: 8px;
  }
  .notification-actions .btn {
    flex: 1 1 120px;
    min-height: 40px;
    justify-content: center;
  }
  .notification-actions [data-action='record-delete'] {
    margin-left: 0;
    flex: 0 1 auto;
  }
  .notification-record-facts dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* Source: workspace-polish.css */
.employee-calendar {
  display: grid;
  gap: 12px;
}
.employee-calendar-week {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.employee-calendar-month {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.employee-calendar-day {
  max-width: 680px;
}
.employee-day {
  min-width: 0;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
  overflow: hidden;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-ink) 3%, transparent);
}
.employee-day.is-today {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 9%, transparent);
}
.employee-day.is-adjacent {
  opacity: 0.54;
}
.employee-day-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--brand-canvas);
  color: var(--surface-muted);
}
.employee-day-head span {
  font-size: 12px;
  font-weight: 650;
}
.employee-day-head strong {
  font-size: 21px;
  color: var(--surface-ink);
}
.employee-day-head em {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-accent) 11%, var(--brand-surface));
  color: var(--brand-readable-accent);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
}
.employee-day-body {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 110px;
  padding: 9px;
}
.employee-shift-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--surface-border);
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-accent) 3%, var(--brand-surface));
}
.employee-shift-card.is-open {
  border-style: dashed;
  background: #fffdf6;
}
.employee-shift-top {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  color: var(--brand-readable-accent);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.employee-shift-card.is-open .employee-shift-top {
  color: #946822;
}
.employee-shift-top small {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.employee-shift-time {
  font-size: 16px;
  line-height: 1.25;
  color: var(--surface-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.employee-shift-area {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.employee-shift-area .icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.employee-shift-card > small,
.employee-day-count {
  font-size: 11px;
  color: var(--surface-muted);
}
.employee-shift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.employee-shift-actions .btn {
  min-height: 35px;
  font-size: 12px;
}
.employee-rest {
  display: grid;
  place-items: center;
  min-height: 65px;
  color: var(--surface-muted);
  font-size: 12px;
}
.employee-calendar-month .employee-day-body {
  min-height: 75px;
}
.employee-calendar-month .employee-shift-card {
  padding: 8px;
  gap: 4px;
}
.employee-calendar-month .employee-shift-time {
  font-size: 12px;
}
.employee-calendar-month .employee-shift-area {
  font-size: 11px;
}
.employee-calendar-month .employee-shift-top {
  font-size: 10px;
}
.employee-shift-card[hidden] {
  display: none;
}
.employee-calendar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 10px 0 13px;
  padding: 11px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface);
}
.employee-calendar-filters label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 190px;
  flex: 1;
}
.employee-calendar-filters input,
.employee-calendar-filters select {
  min-height: 38px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--surface-border);
  border-radius: 7px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  font-size: 13px;
}
.employee-calendar-filters input {
  width: 100%;
}
.employee-calendar-filters [role='status'] {
  font-size: 12px;
  color: var(--surface-muted);
}
.employee-day.filtered-empty .employee-day-body:after {
  content: 'No matching shifts';
  color: var(--surface-muted);
  font-size: 11px;
}
.availability-guide {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  margin: 5px 0 25px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, var(--surface-border));
  border-radius: 13px;
  background: var(--brand-surface, #fff);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--brand-ink) 6%, transparent);
}
.availability-guide-icon {
  display: grid;
  place-items: center;
  flex: 0 0 45px;
  height: 45px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand-accent) 15%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.availability-guide strong {
  font-size: 16px;
  color: var(--surface-ink);
}
.availability-guide p {
  margin-top: 4px;
  color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.5;
}
.availability-section {
  margin-bottom: 25px;
}
.availability-section .section-head {
  margin-bottom: 12px;
}
.availability-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.availability-rule {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--brand-accent);
  border-radius: 11px;
  background: var(--brand-surface);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-ink) 3%, transparent);
}
.availability-rule.unavailable {
  border-color: #f0ddc4;
  border-left-color: #b77a29;
  background: #fffcf7;
}
.availability-rule.pending {
  border-color: #d6dff0;
  border-left-color: #4b78ad;
  background: #f8fbff;
}
.availability-rule strong {
  color: var(--surface-ink);
  font-size: 17px;
}
.availability-rule > span:not(.availability-state) {
  font-size: 15px;
  font-weight: 650;
  color: var(--surface-ink);
}
.availability-rule small {
  font-size: 12px;
  color: var(--surface-muted);
}
.availability-rule .btn {
  justify-self: start;
  margin-top: 4px;
}
.availability-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #167454;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.availability-state .icon {
  width: 14px;
  height: 14px;
}
.availability-rule.unavailable .availability-state {
  color: #9b671c;
}
.availability-rule.pending .availability-state {
  color: #3d6c9a;
}
.availability-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 25px;
  border: 1px dashed var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
}
.availability-empty > .icon {
  color: var(--brand-readable-accent);
}
.availability-empty strong {
  font-size: 17px;
}
.availability-empty p {
  color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.5;
}
.availability-form .availability-fields,
.availability-form [data-availability-hours] {
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface);
  padding: 14px;
  min-width: 0;
}
.availability-form [data-availability-hours] {
  gap: 12px;
}
.availability-form .weekday-picker {
  margin-top: 8px;
}
.swap-picker,
.pto-decision,
.requirement-window {
  min-width: 0;
  margin: 0;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: var(--brand-canvas);
}
.swap-picker legend,
.pto-decision legend,
.requirement-window legend {
  padding: 0 7px;
  color: var(--brand-readable-accent);
  font-size: 13px;
  font-weight: 750;
}
.swap-options {
  display: grid;
  gap: 9px;
}
.swap-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: var(--brand-surface);
  cursor: pointer;
}
.swap-option:has(input:checked) {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 8%, transparent);
}
.swap-option input {
  accent-color: var(--brand-accent);
}
.swap-option-body {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.swap-option-body strong {
  font-size: 12px;
  color: var(--surface-muted);
}
.swap-option-body b {
  font-size: 15px;
  color: var(--surface-ink);
}
.swap-option-body small {
  font-size: 12px;
  color: var(--surface-muted);
}
.swap-option-check {
  color: var(--brand-readable-accent);
  opacity: 0;
}
.swap-option:has(input:checked) .swap-option-check {
  opacity: 1;
}
.pto-decision {
  display: grid;
  gap: 9px;
}
.pto-decision[hidden] {
  display: none;
}
.pto-decision .field {
  max-width: 200px;
}
.range-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}
.range-pair > .field {
  min-width: 0;
}
.requirement-window > .note {
  margin: 0 0 14px;
}
.spacious-form .form-grid {
  row-gap: 16px;
}
.spacious-form .field > span {
  line-height: 1.4;
}
.spacious-form fieldset + fieldset {
  margin-top: 4px;
}
.field-invalid input,
.field-invalid select,
.field-invalid textarea {
  border-color: #bc5145 !important;
  box-shadow: 0 0 0 2px #bc51451a;
}
.form-error:not(.hidden) {
  margin-bottom: 13px;
  padding: 11px 13px;
  border-left: 3px solid #b74b3d;
  border-radius: 7px;
  background: #fff1ee;
  color: #9c3b32;
  font-size: 13px;
}
.shift-time-pair > .field,
.timecard-punch-pair > .field,
.lunch-entry > .field {
  padding: 9px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: var(--brand-surface);
}
.shift-time-pair > .field + .field,
.timecard-punch-pair > .field + .field,
.lunch-entry > .field:nth-child(2) {
  border-color: var(--surface-border);
  background: var(--brand-surface);
}
.shift-time-pair > .field + .field > span,
.timecard-punch-pair > .field + .field > span,
.lunch-entry > .field:nth-child(2) > span {
  color: var(--surface-muted);
}
.availability-form .range-pair > .field {
  padding: 9px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: var(--brand-surface);
}
.availability-form .range-pair > .field + .field {
  border-color: var(--surface-border);
  background: var(--brand-surface);
}
.availability-form .range-pair > .field + .field > span {
  color: var(--surface-muted);
}
.earnings-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 6px 0 15px;
  padding: 11px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface);
}
.earnings-filters label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 180px;
  flex: 1;
}
.earnings-filters input,
.earnings-filters select {
  min-height: 37px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--surface-border);
  border-radius: 7px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  font-size: 12px;
}
.earnings-filters input {
  width: 100%;
}
.earnings-filters select {
  flex: 0 1 160px;
}
.earnings-filters [role='status'] {
  color: var(--surface-muted);
  font-size: 12px;
}
.category-filter {
  cursor: pointer;
}
.category-filter:hover,
.category-filter.is-selected {
  border-color: var(--category-color);
  background: var(--brand-canvas);
}
.category-filter:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.week-slot-stack {
  position: absolute;
  left: 5px;
  right: 5px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  overflow: hidden;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, var(--surface-border));
  border-left: 4px solid var(--brand-accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--surface-ink);
  text-align: left;
  cursor: pointer;
}
.week-slot-stack:hover {
  background: color-mix(in srgb, var(--brand-accent) 14%, var(--brand-surface));
}
.week-slot-stack strong {
  font-size: 13px;
}
.week-slot-stack span,
.week-slot-stack small {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.slot-list {
  display: grid;
  gap: 9px;
}
.slot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
}
.slot-color {
  flex: 0 0 7px;
  align-self: stretch;
  border-radius: 5px;
}
.slot-row > div {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.slot-row strong {
  font-size: 13px;
}
.slot-row small {
  font-size: 12px;
  color: var(--surface-muted);
}
.manager-timecard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
  padding: 16px 19px;
  border: 1px solid var(--surface-border);
  background: var(--record-gradient);
}
.manager-timecard h2 {
  margin: 5px 0;
  color: var(--surface-ink);
  font-size: 19px;
}
.manager-timecard p {
  color: var(--surface-muted);
  font-size: 12px;
}
.manager-clock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.manager-clock-actions .btn {
  min-height: 38px;
}
.manager-pay-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, var(--surface-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--surface-ink);
  font-size: 13px;
  line-height: 1.5;
}
.manager-pay-banner .icon {
  flex: 0 0 21px;
  color: var(--brand-readable-accent);
}
.week-slot-stack[hidden] {
  display: none;
}
@media (max-width: 1200px) {
  .employee-calendar-week,
  .employee-calendar-month {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .employee-calendar-week,
  .employee-calendar-month {
    grid-template-columns: 1fr;
  }
  .range-pair {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .availability-guide {
    align-items: flex-start;
  }
  .earnings-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .earnings-filters label,
  .earnings-filters [role='status'] {
    grid-column: 1/-1;
  }
  .earnings-filters select {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .manager-timecard {
    flex-direction: column;
    align-items: stretch;
  }
  .manager-clock-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .manager-clock-actions .btn {
    white-space: normal;
  }
}

.pto-paid-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  max-height: 200px;
  overflow: auto;
  margin-top: 14px;
  padding: 4px;
}
.pto-paid-dates[hidden] {
  display: none;
}
.pto-paid-dates .check {
  min-height: 34px;
  margin: 0;
  align-items: center;
}

/* Source: workspace-next.css */
:root {
  --brand-accent: #0f766e;
  --brand-secondary: #2563a6;
  --brand-canvas: #f5f8f9;
  --brand-surface: #fff;
  --brand-ink: #213c40;
  --brand-accent-ink: #fff;
}
body:has(.layout) {
  background: var(--brand-canvas);
  color: var(--brand-ink);
}
body:has(.layout) .top,
.layout .sidebar,
.layout .card,
body:has(.layout) .dialog {
  background: var(--brand-surface);
}
.layout .nav-btn.active {
  color: var(--brand-readable-accent);
  background: color-mix(in srgb, var(--brand-accent) 11%, white);
}
.layout .nav-btn:hover {
  color: var(--brand-readable-accent);
}
.layout .btn.primary,
.dialog .btn.primary {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-accent-ink);
}
.layout .btn.primary:hover {
  filter: brightness(0.88);
}
.layout .page-head h1,
.layout .card h2 {
  color: var(--brand-ink);
}
.layout .brand b,
.company-tagline {
  color: var(--brand-accent);
}
.layout .admin-summary-icon.blue {
  background: color-mix(in srgb, var(--brand-secondary) 12%, white);
  color: var(--brand-secondary);
}
.layout .manager-pay-banner .icon {
  color: var(--brand-secondary);
}
.company-tagline {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.warehouse-chip {
  --warehouse-color: var(--brand-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--brand-border);
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--surface-ink);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.warehouse-chip .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.employee-shift-card .warehouse-chip {
  margin-top: 2px;
}
.warehouse-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 9px;
  border-radius: 4px;
  background: var(--warehouse-color, #0f766e);
  vertical-align: middle;
}
.work-area-warehouse-head {
  border-left: 4px solid var(--warehouse-color, var(--brand-readable-accent));
  padding-left: 10px;
}
.week-time-event,
.timeline-shift {
  border-top: 1px solid var(--surface-border);
}
.shift-detail-clean {
  display: grid;
  gap: 13px;
}
.shift-detail-clean h3 {
  font-size: 20px;
}
.shift-detail-clean > strong {
  font-size: 23px;
  color: var(--surface-ink);
}
.shift-detail-clean > p {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--surface-muted);
  font-size: 13px;
}
.shift-detail-clean > p .icon {
  width: 16px;
  height: 16px;
  color: var(--brand-readable-accent);
}
.shift-detail-clean > .row {
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.clock-help {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #e8d6ad;
  border-radius: 8px;
  background: #fff8e8;
  color: #805a1b;
  font-size: 12px;
  line-height: 1.45;
}
.next-shift-summary {
  display: grid;
  gap: 5px;
  margin: 13px 0 4px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-canvas);
}
.next-shift-summary > span:first-child {
  color: var(--surface-muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.next-shift-summary > span:first-child b {
  margin-left: 5px;
  color: var(--brand-readable-accent);
}
.next-shift-summary strong {
  font-size: 16px;
  color: var(--surface-ink);
}
.next-shift-summary .mono {
  font-size: 16px;
  font-weight: 750;
  color: var(--surface-ink);
}
.next-shift-summary small {
  font-size: 12px;
  color: var(--surface-muted);
}
.calendar-filter-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 10px 0;
  padding: 24px;
  border: 1px dashed var(--surface-border);
  border-radius: 11px;
  background: #f8fcfa;
}
.calendar-filter-empty strong {
  font-size: 16px;
  color: var(--surface-ink);
}
.calendar-filter-empty p {
  font-size: 13px;
  color: #5b7267;
}
.calendar-filter-empty[hidden] {
  display: none;
}
.shift-impact {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface, #fff);
}
.shift-impact > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-readable-accent);
}
.shift-impact > div .icon {
  width: 18px;
  height: 18px;
}
.shift-impact strong {
  font-size: 13px;
}
.shift-impact p {
  margin: 0;
  color: var(--surface-ink);
  font-size: 13px;
  line-height: 1.5;
}
.shift-impact small {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.4;
}
.dialog #form-error:not(.hidden),
form #form-error:not(.hidden) {
  scroll-margin-top: 18px;
}
.employee-calendar .employee-shift-actions .btn {
  min-height: 38px;
  font-size: 12px;
}
.workspace[data-view='schedule'] .employee-calendar-filters {
  margin-top: 0;
}
.workspace[data-view='schedule'] .employee-calendar-filters > label {
  flex: 1 1 300px;
  min-width: 210px;
}
.workspace[data-view='schedule'] .employee-calendar-filters > select {
  flex: 0 1 190px;
  width: auto;
  min-width: 150px;
}
.workspace[data-view='schedule'] .employee-calendar-filters > [role='status'] {
  flex: 0 0 auto;
  white-space: nowrap;
}
.workspace[data-view='schedule'] .employee-day-head {
  background: var(--brand-soft);
}
@media (max-width: 900px) {
  .workspace[data-view='schedule'] .employee-calendar-filters > label {
    flex-basis: 100%;
  }
  .workspace[data-view='schedule'] .employee-calendar-filters > select {
    flex: 1 1 180px;
  }
}
@media (max-width: 550px) {
  .workspace[data-view='schedule'] .employee-calendar-filters > select {
    flex-basis: 100%;
  }
}

.notification-category[data-category='announcements'] {
  --filter-tone: var(--type-announcements);
  --filter-pale: var(--type-announcements-pale);
}
.notification-category[data-category='schedule'] {
  --filter-tone: var(--type-schedule);
  --filter-pale: var(--type-schedule-pale);
}
.notification-category[data-category='requests'] {
  --filter-tone: var(--type-requests);
  --filter-pale: var(--type-requests-pale);
}
.notification-category[data-category='time'] {
  --filter-tone: var(--type-time);
  --filter-pale: var(--type-time-pale);
}
.notification-category[data-category='pay'] {
  --filter-tone: var(--type-pay);
  --filter-pale: var(--type-pay-pale);
}

.approval-switch {
  display: flex;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 13px;
  padding: 4px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: var(--brand-canvas);
}
.approval-switch button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 8px;
  background: transparent;
  color: var(--surface-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.approval-switch button.selected {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-accent) 16%, transparent);
}
.approval-switch button span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--surface-muted);
  font-size: 12px;
}
.approval-switch button.selected span {
  background: color-mix(in srgb, var(--brand-accent-ink) 18%, transparent);
  color: var(--brand-accent-ink);
}
.approval-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
}
.approval-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 450px;
  padding: 0 10px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--brand-readable-accent);
}
.approval-controls label input {
  border: 0;
  box-shadow: none;
  min-height: 42px;
}
.approval-controls select {
  width: min(220px, 100%);
  min-height: 42px;
}
.approval-table .table-wrap {
  overflow: auto;
}
.approval-table td {
  white-space: normal;
  min-width: 100px;
}
.approval-table td:nth-child(3) {
  min-width: 240px;
}
.approval-table td:last-child {
  min-width: 135px;
}

.brand-preview {
  --preview-accent: var(--brand-readable-accent);
  --preview-surface: var(--brand-surface);
  --preview-ink: var(--surface-ink);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: var(--preview-surface);
  color: var(--preview-ink);
}
.brand-preview-mark {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--preview-accent);
  color: var(--brand-surface);
}
.brand-preview > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.brand-preview strong {
  font-size: 17px;
  overflow-wrap: anywhere;
}
.brand-preview small {
  font-size: 12px;
  opacity: 0.75;
  overflow-wrap: anywhere;
}
.brand-palette {
  margin: 0;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-canvas);
}
.brand-palette legend {
  padding: 0 5px;
  font-weight: 750;
  color: var(--surface-ink);
}
.brand-palette p {
  margin-bottom: 12px;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.45;
}
.brand-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 11px;
}
.brand-color-grid .field {
  padding: 9px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--brand-surface);
}
.brand-color-grid input[type='color'] {
  height: 42px;
  padding: 3px;
  cursor: pointer;
}

.signin-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 38px);
  background:
    radial-gradient(
      circle at 15% 18%,
      color-mix(
          in srgb,
          var(--login-accent, var(--brand-accent)) 13%,
          transparent
        )
        0,
      transparent 36%
    ),
    radial-gradient(
      circle at 85% 80%,
      color-mix(
          in srgb,
          var(--login-secondary, var(--brand-secondary)) 10%,
          transparent
        )
        0,
      transparent 37%
    ),
    var(--brand-canvas);
}
.signin-frame {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(350px, 1fr);
  width: min(1050px, 100%);
  min-height: min(650px, calc(100dvh - 50px));
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 22px;
  background: var(--brand-surface);
  box-shadow: 0 25px 70px color-mix(in srgb, var(--brand-ink) 15%, transparent);
}
.signin-story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 55px;
  min-width: 0;
  overflow: hidden;
  padding: clamp(28px, 5vw, 57px);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--login-accent, var(--brand-accent)) 40%, #0f172a),
    color-mix(
      in srgb,
      var(--login-secondary, var(--brand-secondary)) 40%,
      #0f172a
    )
  );
  color: #fff;
}
.signin-story:after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -190px;
  width: 390px;
  height: 390px;
  border: 48px solid #ffffff17;
  border-radius: 90px;
  transform: rotate(25deg);
  pointer-events: none;
}
.signin-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  letter-spacing: -1px;
}
.signin-brand .logo {
  width: 36px;
  height: 36px;
}
.signin-brand span {
  color: #fff;
}
.signin-story-copy {
  position: relative;
  z-index: 1;
}
.signin-eyebrow,
.signin-overline {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.signin-eyebrow {
  color: #fff;
}
.signin-story h1 {
  margin: 18px 0 17px;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.045em;
}
.signin-story p {
  max-width: 330px;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
}
.signin-story-rule {
  display: flex;
  gap: 7px;
  margin-top: 35px;
}
.signin-story-rule span {
  width: 36px;
  height: 4px;
  border-radius: 5px;
  background: currentColor;
}
.signin-story-rule span:nth-child(2) {
  width: 18px;
  opacity: 0.6;
}
.signin-story-rule span:nth-child(3) {
  width: 8px;
  opacity: 0.35;
}
.signin-story > small {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 12px;
}
.signin-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(25px, 5vw, 72px);
}
.signin-panel-inner {
  width: min(375px, 100%);
  margin: auto;
}
.signin-overline {
  color: color-mix(
    in srgb,
    var(--login-accent, var(--brand-accent)) 40%,
    #0f172a
  );
}
.signin-panel h2 {
  margin: 10px 0;
  font-size: 33px;
  letter-spacing: -0.04em;
  color: var(--surface-ink);
}
.signin-panel p {
  color: var(--surface-muted);
  font-size: 14px;
  line-height: 1.55;
}
.signin-form {
  display: grid;
  gap: 16px;
  margin-top: 29px;
}
.signin-form .field > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--surface-ink);
}
.signin-form input {
  min-height: 48px;
  border-color: var(--surface-border);
  font-size: 15px;
}
.signin-submit {
  min-height: 49px;
  margin-top: 4px;
  font-size: 14px !important;
  justify-content: space-between;
  padding: 0 16px;
}
.signin-recovery {
  display: inline-block;
  margin-top: 22px;
  color: color-mix(
    in srgb,
    var(--login-accent, var(--brand-accent)) 40%,
    #0f172a
  );
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
.signin-recovery:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signin-credit {
  margin: 34px auto 0;
  color: var(--surface-muted);
  font-size: 11px;
}
.signin-credit strong {
  color: var(--surface-ink);
}
@media (max-width: 760px) {
  .signin-frame {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .signin-story {
    gap: 12px;
    padding: 24px 27px;
  }
  .signin-story h1 {
    margin: 8px 0;
    font-size: 28px;
  }
  .signin-story p,
  .signin-story-rule,
  .signin-story > small {
    display: none;
  }
  .signin-panel {
    padding: 30px 27px;
  }
  .signin-panel h2 {
    font-size: 28px;
  }
  .signin-form {
    margin-top: 22px;
  }
  .signin-credit {
    margin-top: 25px;
  }
}
@media (max-width: 550px) {
  .approval-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .approval-controls label,
  .approval-controls select {
    max-width: none;
    width: 100%;
  }
  .approval-switch {
    width: 100%;
  }
  .approval-switch button {
    flex: 1;
    justify-content: center;
    padding: 8px;
  }
  .brand-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.workspace[data-role='employee'] .employee-shift-card[tabindex] {
  cursor: pointer;
  transition:
    box-shadow 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.workspace[data-role='employee'] .employee-shift-card[tabindex]:hover {
  border-color: var(--surface-border);
  box-shadow: 0 4px 14px
    color-mix(in srgb, var(--brand-accent) 11%, transparent);
  transform: translateY(-1px);
}
.workspace[data-role='employee'] .employee-shift-card[tabindex]:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.workspace[data-view='dashboard'][data-role='manager'] .metrics > .metric,
.workspace[data-view='operations'] .metrics > .metric,
.workspace[data-view='reports'] .metrics > .metric {
  background: var(--brand-surface) !important;
  border-top: 1px solid var(--surface-border) !important;
}
.workspace[data-view='dashboard'][data-role='manager']
  .metrics
  > .metric
  .value,
.workspace[data-view='operations'] .metrics > .metric .value,
.workspace[data-view='reports'] .metrics > .metric .value {
  color: var(--surface-ink);
}

/* Keep paired dates and times inside the form, with a crisp vector direction cue. */
.dialog:has(.requirement-window) {
  width: min(760px, calc(100% - 28px));
}
.dialog .dialog-content,
.dialog form,
.dialog .form-grid,
.dialog fieldset,
.dialog .field {
  min-width: 0;
  max-width: 100%;
}
.dialog .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dialog .requirement-window {
  width: 100%;
  grid-column: 1/-1;
  padding: 16px;
}
.dialog .requirement-window .date-time-control,
.dialog .shift-time-panel .date-time-control,
.dialog .shift-lunch-panel .date-time-control,
.dialog .lunch-entry .date-time-control {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.dialog .requirement-window .shared-time-picker,
.dialog .shift-time-panel .shared-time-picker,
.dialog .shift-lunch-panel .shared-time-picker,
.dialog .lunch-entry .shared-time-picker {
  min-width: 0;
  max-width: 100%;
}
.dialog .shared-time-picker select {
  min-width: 0;
}
.dialog .range-pair,
.dialog .shift-time-pair,
.dialog .timecard-punch-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.dialog .lunch-entry {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.dialog .lunch-entry > [data-remove-lunch] {
  grid-column: 1/-1;
  justify-self: end;
}
.dialog .field input,
.dialog .field select,
.dialog .field textarea {
  max-width: 100%;
}
@media (max-width: 700px) {
  .dialog .form-grid,
  .dialog .range-pair,
  .dialog .shift-time-pair,
  .dialog .timecard-punch-pair,
  .dialog .lunch-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .dialog .range-pair > .field + .field,
  .dialog .shift-time-pair > .field + .field,
  .dialog .timecard-punch-pair > .field + .field,
  .dialog .lunch-entry > .field:nth-child(2) {
    margin-top: 0;
  }
  .dialog .lunch-entry > [data-remove-lunch] {
    grid-column: 1;
  }
  .dialog .requirement-window {
    padding: 12px;
  }
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 1fr);
  gap: 18px;
  align-items: start;
}
.profile-identity,
.profile-info-card {
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 13px;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--brand-ink) 3.1%, transparent);
}
.profile-hero {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 27px;
  background: var(--brand-surface, #fff);
  border-bottom: 1px solid var(--surface-border);
}
.profile-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--brand-readable-accent);
  font-size: 18px;
}
.profile-eyebrow {
  display: block;
  color: var(--brand-readable-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
}
.profile-hero h2 {
  margin: 5px 0;
  font-size: 24px;
  color: var(--surface-ink);
}
.profile-hero p {
  color: var(--surface-muted);
  font-size: 13px;
}
.profile-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 13px 25px 24px;
}
.profile-details > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 15px 4px;
  border-bottom: 1px solid var(--surface-border);
}
.profile-details > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.profile-details span {
  color: var(--surface-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.profile-details strong {
  color: var(--surface-ink);
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.profile-side {
  display: grid;
  gap: 15px;
  min-width: 0;
}
.profile-info-card {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  gap: 12px;
  padding: 19px;
}
.profile-card-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.profile-info-card h2 {
  margin: 5px 0 7px;
  font-size: 17px;
}
.profile-info-card p {
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.55;
}
.profile-warehouses,
.profile-qualifications,
.profile-session > .row {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
  padding-top: 13px;
  border-top: 1px solid var(--surface-border);
}
.profile-warehouses .warehouse-chip {
  font-size: 12px;
  padding: 8px 10px;
}
.profile-no-access {
  color: #946526;
  font-size: 12px;
}
.profile-qualifications > .muted {
  font-size: 12px;
}
.profile-session .btn {
  min-height: 39px;
}
.workspace[data-view='company-admin'] .admin-manager-table {
  border-color: var(--surface-border);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--brand-ink) 6%, transparent);
}
.workspace[data-view='company-admin'] .admin-manager-table .table-wrap {
  overflow: auto;
}
.workspace[data-view='company-admin'] .admin-manager-table th {
  background: var(--brand-soft);
}
.workspace[data-view='company-admin'] .admin-manager-table td {
  padding-top: 15px;
  padding-bottom: 15px;
}
@media (max-width: 850px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 550px) {
  .profile-hero {
    padding: 19px;
  }
  .profile-details {
    grid-template-columns: 1fr;
    padding: 8px 18px 17px;
  }
  .profile-details > div:nth-last-child(2) {
    border-bottom: 1px solid var(--surface-border);
  }
  .profile-info-card {
    padding: 16px;
  }
}

.schedule-filter-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  min-width: 0;
}
.schedule-filter-pair > .field {
  min-width: 0;
}
.dialog .availability-fields {
  gap: 24px;
}
@media (max-width: 700px) {
  .schedule-filter-pair,
  .dialog .availability-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .schedule-filter-pair > .field + .field,
  .dialog .availability-fields > .field + .field {
    margin-top: 0;
  }
}

.schedule-time-filter .schedule-time-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.schedule-time-filter .schedule-time-fields > .btn {
  grid-column: 1/-1;
  justify-self: start;
}
.schedule-filter-pair .field,
.schedule-filter-pair .date-time-control,
.schedule-filter-pair .shared-time-picker {
  min-width: 0;
  max-width: 100%;
}
.schedule-filter-pair .shared-time-picker select {
  min-width: 0;
}
@media (max-width: 1150px) {
  .schedule-time-filter .schedule-time-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.workspace [data-action='period-today']:not(:disabled) {
  border-color: var(--brand-border);
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.workspace [data-action='period-today']:not(:disabled):hover {
  border-color: var(--brand-accent);
  background: var(--brand-hover-soft);
  color: var(--brand-readable-accent);
  box-shadow: 0 3px 10px
    color-mix(in srgb, var(--brand-accent) 13.7%, transparent);
  transform: translateY(-1px);
}
.workspace [data-action='period-today']:not(:disabled):focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

.employee-shift-card.is-open {
  border-color: var(--type-schedule);
  border-style: dotted;
  background: var(--brand-surface);
}
.employee-shift-card.is-open .employee-shift-time,
.employee-shift-card.is-open .employee-shift-top {
  color: var(--type-schedule);
}
.workspace .shift-block.open-assignment,
.workspace .week-time-event.open-assignment,
.workspace .timeline-shift.open-assignment {
  border-color: var(--type-schedule) !important;
  border-style: dotted;
  background: var(--type-schedule-pale) !important;
  color: var(--type-schedule);
}
.workspace .shift-block.open-assignment:hover,
.workspace .week-time-event.open-assignment:hover {
  background: color-mix(
    in srgb,
    var(--type-schedule) 12%,
    var(--brand-surface)
  ) !important;
}

.slot-controls {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(140px, auto) minmax(
      130px,
      auto
    );
  gap: 9px;
  margin-bottom: 10px;
}
.slot-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #cbded4;
  border-radius: 8px;
  background: #fff;
  color: #28765f;
}
.slot-controls label input {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  border: 0;
  box-shadow: none;
}
.slot-controls select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid #cbded4;
  border-radius: 8px;
  background: #fff;
  color: #2c5549;
  padding: 7px;
}
.slot-result-count {
  margin: 0 0 8px;
  color: #62796d;
  font-size: 12px;
}
.slot-row[hidden],
.slot-empty[hidden] {
  display: none;
}
.slot-empty {
  padding: 18px;
  border: 1px dashed #ccdfd3;
  border-radius: 9px;
  color: #62796d;
  font-size: 13px;
}
.slot-row .btn {
  min-height: 38px;
}
@media (max-width: 650px) {
  .slot-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slot-controls label {
    grid-column: 1/-1;
  }
  .slot-controls select {
    width: 100%;
  }
}

.manager-pay-period {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 13px;
}
.manager-pay-period-navigation {
  display: flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface);
}
.manager-pay-period-navigation > .icon-btn {
  width: 43px;
  height: auto;
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.manager-pay-period-navigation > .icon-btn:hover {
  background: var(--brand-hover-soft);
}
.manager-pay-period-navigation > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 214px;
  padding: 7px 14px;
  border-left: 1px solid var(--surface-border);
  border-right: 1px solid var(--surface-border);
  color: var(--brand-readable-accent);
}
.manager-pay-period-navigation > span > span {
  display: grid;
  gap: 2px;
}
.manager-pay-period-navigation small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.manager-pay-period-navigation strong {
  font-size: 13px;
  color: var(--surface-ink);
}
.manager-pay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.manager-pay-readiness {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--surface-ink);
  font-size: 13px;
}
.manager-pay-readiness .icon {
  color: var(--brand-readable-accent);
}
.manager-pay-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 13px;
  padding: 11px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface);
}
.manager-pay-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 230px;
  min-width: 180px;
  padding: 0 10px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  color: var(--surface-muted);
}
.manager-pay-controls label input {
  min-height: 40px;
  width: 100%;
  min-width: 0;
  border: 0;
  box-shadow: none;
}
.manager-pay-controls select {
  min-height: 40px;
  min-width: 150px;
  padding: 7px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--surface-ink);
}
.manager-pay-controls [role='status'] {
  color: var(--surface-muted);
  font-size: 12px;
}
.manager-pay-table .table-wrap,
.manager-pay-breakdowns .table-wrap {
  overflow: auto;
}
.manager-pay-table td {
  white-space: nowrap;
}
.manager-pay-breakdowns {
  display: grid;
  gap: 11px;
  margin-top: 13px;
}
.manager-pay-breakdowns details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--surface-ink);
}
.manager-pay-breakdowns details summary:hover {
  color: var(--brand-readable-accent);
}
.manager-pay-breakdowns details .table-wrap {
  margin-top: 15px;
}

.warehouse-overview-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.warehouse-overview-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 460px;
  min-width: 0;
  padding: 0 11px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: var(--brand-surface);
  color: var(--brand-readable-accent);
}
.warehouse-overview-controls input {
  min-height: 43px;
  width: 100%;
  min-width: 0;
  border: 0;
  box-shadow: none;
}
.warehouse-overview-controls [role='status'] {
  color: var(--surface-muted);
  font-size: 12px;
}
.warehouse-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: 14px;
}
.warehouse-panel {
  min-width: 0;
  overflow: hidden;
  border-color: var(--surface-border);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-ink) 3.9%, transparent);
}
.warehouse-panel[hidden],
.warehouse-department[hidden],
.warehouse-zone[hidden] {
  display: none;
}
.warehouse-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
}
.warehouse-panel-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warehouse-color) 18%, white);
  color: var(--warehouse-color);
}
.warehouse-panel-title {
  min-width: 0;
}
.warehouse-panel-title h2 {
  font-size: 17px;
  color: var(--surface-ink);
}
.warehouse-panel-title p {
  margin-top: 4px;
  color: var(--surface-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.warehouse-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--surface-border);
}
.warehouse-panel-actions .btn {
  white-space: normal;
  text-align: center;
}
.warehouse-department-list {
  padding: 9px 17px 17px;
}
.warehouse-department + .warehouse-department {
  border-top: 1px solid var(--surface-border);
}
.warehouse-department {
  padding: 12px 0;
}
.warehouse-department-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--surface-ink);
}
.warehouse-department-title > span {
  display: flex;
  color: var(--warehouse-color);
}
.warehouse-department-title strong {
  font-size: 13px;
}
.warehouse-department-title small {
  margin-left: auto;
  color: var(--surface-muted);
  font-size: 12px;
}
.warehouse-zone-list {
  display: grid;
  gap: 7px;
}
.warehouse-zone {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: transparent;
}
.warehouse-zone > div {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.warehouse-zone strong {
  color: var(--surface-ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.warehouse-zone small {
  color: var(--surface-muted);
  font-size: 11px;
}
.warehouse-zone .work-area-color {
  height: 28px;
}
.warehouse-empty {
  margin: 0;
  padding: 17px;
  color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.5;
}
.profile-company-access {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  font-size: 12px;
  font-weight: 750;
}
.profile-company-access .icon {
  width: 15px;
  height: 15px;
}
@media (min-width: 651px) {
  .manager-pay-controls label {
    flex: 1 1 280px;
  }
  .manager-pay-controls select {
    flex: 0 1 190px;
    width: 190px;
    max-width: 190px;
  }
  .manager-pay-controls [role='status'] {
    margin-left: auto;
  }
}
@media (max-width: 650px) {
  .manager-pay-period-navigation,
  .manager-pay-actions {
    width: 100%;
  }
  .manager-pay-period-navigation > span {
    flex: 1;
    min-width: 0;
  }
  .manager-pay-actions .btn {
    flex: 1;
  }
  .manager-pay-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .manager-pay-controls label,
  .manager-pay-controls [role='status'] {
    grid-column: 1/-1;
  }
  .manager-pay-controls select {
    min-width: 0;
    width: 100%;
  }
  .warehouse-overview-controls {
    flex-wrap: wrap;
  }
  .warehouse-overview-controls label {
    flex: 1 1 100%;
    max-width: none;
  }
  .warehouse-panel-actions .btn {
    flex: 1 1 auto;
  }
}

.shift-coverage-actions,
.report-actions,
.staffing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.shift-coverage-actions .btn,
.report-actions .btn,
.staffing-actions .btn {
  min-height: 37px;
  margin: 0;
  white-space: nowrap;
}
.shift-coverage-actions .btn .icon,
.report-actions .btn .icon,
.staffing-actions .btn .icon {
  width: 14px;
  height: 14px;
}
.workspace[data-view='staffing'] .page-head .row,
.workspace[data-view='issues'] .page-head .row {
  gap: 9px;
  flex-wrap: wrap;
}
.workspace[data-view='staffing'] .toolbar {
  gap: 11px;
}

.week-slot-stack.has-open-shifts {
  border-color: var(--type-schedule);
  border-style: dotted;
  background: var(--type-schedule-pale);
  color: var(--type-schedule);
}
.week-slot-stack.has-open-shifts:hover {
  background: color-mix(
    in srgb,
    var(--type-schedule) 12%,
    var(--brand-surface)
  );
}
.week-slot-stack em {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--type-schedule-pale);
  color: var(--type-schedule);
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
}
.slot-controls {
  display: flex;
  flex-wrap: wrap;
}
.slot-controls label {
  flex: 2 1 220px;
}
.slot-controls select {
  flex: 1 1 135px;
}
.slot-row.is-open {
  border-color: #e7c58e;
  background: #fff9ee;
}
.slot-row.is-open > div strong {
  color: #79511a;
}
.slot-open-badge {
  padding: 5px 7px;
  border-radius: 5px;
  background: #f8e2ba;
  color: #805217;
  font-size: 11px;
  font-weight: 750;
}
.pay-period-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.pay-period-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  min-width: 224px;
  padding: 6px 13px;
  border-left: 1px solid var(--surface-border);
  border-right: 1px solid var(--surface-border);
  background: var(--brand-surface);
  color: var(--brand-readable-accent);
  text-align: left;
}
.pay-period-trigger:hover {
  background: var(--brand-soft);
}
.pay-period-trigger > span {
  display: grid;
  gap: 2px;
  flex: 1;
}
.pay-period-trigger small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pay-period-trigger strong {
  font-size: 13px;
  color: var(--surface-ink);
}
.pay-period-trigger > .icon:last-child {
  width: 13px;
}
.pay-period-today {
  min-height: 42px;
  border-color: var(--surface-border);
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.pay-period-today:not(:disabled):hover {
  border-color: var(--brand-readable-accent);
  background: var(--brand-hover-soft);
  color: var(--brand-readable-accent);
}
.payroll-period-toolbar {
  justify-content: flex-start;
  margin-bottom: 15px;
}
.timecard-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.timecard-row-actions .btn {
  min-height: 37px;
  margin: 0;
}
.timecard-row-actions .btn .icon {
  width: 14px;
  height: 14px;
}
.warehouse-department-title {
  flex-wrap: wrap;
}
.warehouse-department-title small {
  margin-left: 0;
}
.warehouse-department-title .btn {
  margin-left: auto;
  min-height: 34px;
}
.warehouse-department-title .btn .icon {
  width: 13px;
  height: 13px;
}
@media (max-width: 650px) {
  .slot-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slot-controls label {
    grid-column: 1/-1;
  }
  .slot-controls select:last-child {
    grid-column: 1/-1;
  }
  .slot-open-badge {
    order: 1;
  }
  .slot-row .btn {
    order: 2;
  }
  .pay-period-controls,
  .pay-period-controls .manager-pay-period-navigation {
    width: 100%;
  }
  .pay-period-trigger {
    flex: 1;
    min-width: 0;
  }
  .pay-period-today {
    width: 100%;
  }
}
.notification-title {
  min-height: 34px;
  padding: 5px 0;
}
.week-slot-stack.is-compact span,
.week-slot-stack.is-compact small {
  display: none;
}
.workspace .ignored-toggle {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 12px;
}
.workspace .ignored-toggle .icon {
  width: 14px;
  height: 14px;
}
.schedule-filter-pair .date-field-trigger,
.schedule-filter-pair .shared-time-picker select {
  min-height: 40px;
  font-size: 12px;
}
.schedule-filter-pair .shared-time-picker {
  gap: 5px;
}
.dialog .availability-fields[data-availability-mode='Temporary'] {
  gap: 18px;
}
.dialog
  .availability-fields[data-availability-mode='Temporary']
  > .field
  + .field::before {
  display: none;
}
@media (max-width: 700px) {
  .dialog
    .availability-fields[data-availability-mode='Temporary']
    > .field
    + .field {
    margin-top: 0;
  }
}

.manager-pay-period-navigation {
  border-color: var(--surface-border);
  box-shadow: 0 2px 6px
    color-mix(in srgb, var(--brand-accent) 3.1%, transparent);
}
.manager-pay-period-navigation > .icon-btn {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.manager-pay-period-navigation > .icon-btn:hover {
  background: var(--brand-hover-soft);
}
.pay-period-trigger {
  border-color: var(--surface-border);
  background: var(--brand-accent);
  color: var(--brand-surface);
}
.pay-period-trigger strong,
.pay-period-trigger small {
  color: var(--brand-surface);
}
.pay-period-trigger:hover {
  background: var(--brand-accent);
}
.pay-period-trigger:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: -3px;
}
.signin-story {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--login-accent, var(--brand-accent)) 40%, #0f172a),
    color-mix(
      in srgb,
      var(--login-secondary, var(--brand-secondary)) 40%,
      #0f172a
    )
  );
}
.signin-company-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 9px;
  background: #fff;
}
.signin-story h1 {
  overflow-wrap: anywhere;
}
.signin-form .required-marker {
  display: none;
}
.signin-submit {
  background: var(--login-accent, #0f766e);
  color: var(--login-accent-ink, var(--brand-accent-ink));
}
.signin-submit:hover {
  filter: brightness(0.9);
}
.signin-recovery,
.signin-overline {
  color: color-mix(
    in srgb,
    var(--login-accent, var(--brand-accent)) 40%,
    #0f172a
  );
}
.workspace[data-view='company-admin'] .page-head,
.workspace[data-view='dashboard'] .admin-manager-card,
.workspace[data-view='dashboard'] .admin-link-grid button {
  border-color: var(--surface-border);
}
.admin-summary-icon.blue,
.admin-summary-icon.violet {
  background: #e4f4ef;
  color: #0f766e;
}
.admin-summary-card:hover,
.admin-link-grid button:hover {
  border-color: #8fc5b7;
  background: #f3faf7;
}
.availability-request-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #d8e9e3;
  border-radius: 10px;
  background: #f7fbf9;
}
.availability-request-details > div {
  display: grid;
  gap: 5px;
  padding: 5px;
}
.availability-request-details span {
  color: #5c746d;
  font-size: 12px;
}
.availability-request-details strong {
  color: #25483e;
  font-size: 13px;
  line-height: 1.35;
}
.issue-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 13px;
}
.issue-category-filter {
  min-height: 37px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--issue-accent) 35%, white);
  border-radius: 8px;
  background: color-mix(in srgb, var(--issue-accent) 8%, white);
  color: var(--issue-accent);
  font-size: 12px;
  font-weight: 700;
}
.issue-category-filter:hover,
.issue-category-filter.selected {
  background: var(--issue-accent);
  border-color: var(--issue-accent);
  color: #fff;
}
.issue-category-filter span {
  margin-left: 5px;
  opacity: 0.8;
}

/* Shared controls and surfaces. Functional status colors stay independent of company branding. */
:root {
  --control-radius: 8px;
  --card-radius: 12px;
  --dialog-radius: 16px;
  --control-height: 40px;
  --control-compact-height: 36px;
  --control-period-height: 48px;
  --surface-border: color-mix(
    in srgb,
    var(--brand-ink) 15%,
    var(--brand-surface)
  );
  --brand-soft: color-mix(
    in srgb,
    var(--brand-accent) 7%,
    var(--brand-surface)
  );
  --brand-hover-soft: color-mix(
    in srgb,
    var(--brand-accent) 12%,
    var(--brand-surface)
  );
  --brand-border: color-mix(
    in srgb,
    var(--brand-accent) 28%,
    var(--surface-border)
  );
  --brand-focus-shadow: color-mix(in srgb, var(--focus-color) 16%, transparent);
  --surface-muted: #526e74;
  --surface-ink: #213c40;
  --canvas-ink: #213c40;
  --focus-color: var(--brand-readable-accent, #0f766e);
  --shadow-card:
    0 2px 8px color-mix(in srgb, var(--brand-ink) 5.1%, transparent),
    0 1px 2px color-mix(in srgb, var(--brand-ink) 3.1%, transparent);
  --shadow-overlay: 0 16px 48px
    color-mix(in srgb, var(--brand-ink) 18%, transparent);
  --header-height: 78px;
  --sidebar-width: 222px;
}
body:has(.layout) {
  color: var(--canvas-ink);
}
.layout .card,
.layout .employee-day,
.warehouse-panel {
  border-color: var(--surface-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  color: var(--surface-ink);
}
.workspace {
  padding: 24px;
  min-width: 0;
}
.page-head {
  gap: 16px;
  margin-bottom: 24px;
}
.page-head h1 {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.2;
}
.page-head p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--surface-muted);
}
.workspace h2,
.dialog h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.workspace h3 {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}
.layout .btn,
.dialog .btn,
.layout .nav-btn,
.notification-category,
.approval-switch button {
  font-size: 14px;
  line-height: 1.35;
}
.layout .label,
.layout .small,
.layout .badge,
.layout .metric .hint,
.layout .footer,
.layout table th,
.layout table td small {
  font-size: 12px;
}
.layout .muted,
.layout .note,
.layout .metric .hint,
.layout .footer,
.layout .list-count,
.layout .list-scope,
.layout .list-pagination {
  color: var(--surface-muted) !important;
}
.layout .card h2,
.layout table,
.layout .profile-details strong,
.layout .warehouse-zone strong {
  color: var(--surface-ink);
}
.workspace .pad,
.dialog-content {
  padding: 20px;
}
.workspace .card-head {
  padding: 16px 20px;
}
.workspace .metrics {
  gap: 16px;
  margin-bottom: 24px;
}
.workspace .metric {
  padding: 16px 20px;
}
.workspace .metric .value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.btn,
.icon-btn,
.date-field-trigger,
.calendar-jump,
.searchable-filter,
.pay-period-trigger,
.period-preset {
  min-height: var(--control-height);
  border-radius: var(--control-radius);
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.btn {
  padding: 9px 12px;
  gap: 8px;
}
.btn.compact {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
}
.btn.primary,
.dialog .btn.primary,
.pay-period-trigger {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-accent-ink);
}
.btn:not(:disabled):hover,
.icon-btn:not(:disabled):hover,
.period-preset:not(:disabled):hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 12%, transparent);
}
.btn.primary:not(:disabled):hover,
.pay-period-trigger:hover {
  background: color-mix(in srgb, var(--brand-accent) 88%, #000);
  filter: none;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
}
.row,
.shift-coverage-actions,
.staffing-actions,
.report-actions,
.timecard-row-actions,
.notification-actions {
  gap: 8px;
}
.layout .nav-btn.active {
  box-shadow: inset 3px 0 var(--brand-accent);
  font-weight: 700;
}
.layout .nav-group + .nav-group {
  margin-top: 12px;
  padding-top: 12px;
}
.dialog {
  border-radius: var(--dialog-radius);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-overlay);
  background: var(--brand-surface);
  color: var(--surface-ink);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
}
.dialog::backdrop {
  background: #102b304d;
  backdrop-filter: blur(3px);
}
.dialog .form-grid {
  gap: 16px;
}
.dialog .form-grid > * {
  min-width: 0;
}
.dialog fieldset {
  margin: 0;
  border-radius: var(--card-radius);
  padding: 16px;
}
.dialog .field {
  min-width: 0;
  gap: 8px;
}
.dialog .field > span:first-child {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.dialog .area-help {
  margin-top: 0;
}
.dialog .note {
  line-height: 1.5;
}
.dialog .dialog-footer {
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-border);
}
.list-filter-row,
.calendar-filters,
.approval-controls,
.notification-filter-bar,
.employee-calendar-filters,
.manager-pay-controls,
.earnings-filters,
.warehouse-overview-controls,
.slot-controls {
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.list-filter-row .list-search,
.calendar-filters .list-search,
.approval-controls > label,
.employee-calendar-filters > label,
.manager-pay-controls > label,
.warehouse-overview-controls > label {
  flex: 1 1 240px;
  min-width: 0;
  max-width: none;
}
.searchable-filter {
  min-width: 0;
  max-width: 100%;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
}
.list-filter-row > .searchable-filter,
.calendar-filters > .searchable-filter,
.toolbar > .searchable-filter,
.employee-calendar-filters > .searchable-filter,
.manager-pay-controls > .searchable-filter {
  flex: 0 1 190px;
  width: auto;
  min-height: 40px;
  font-size: 14px !important;
  max-width: 240px;
}
.filter-label {
  border-left: 0;
  padding-left: 0;
  color: var(--surface-muted);
}
.filter-chips {
  margin: 8px 0 16px;
  gap: 8px;
}
.filter-chip {
  min-height: 32px;
  background: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-surface));
  color: var(--surface-ink);
  border-color: var(--surface-border);
}
.filter-popover {
  background: var(--brand-surface);
  color: var(--surface-ink);
  box-shadow: var(--shadow-overlay);
  border-radius: var(--card-radius);
  border-color: var(--surface-border);
}
.filter-option {
  background: transparent;
  color: var(--surface-ink);
  font-size: 14px;
}
.filter-option[aria-selected='true'],
.filter-option:hover {
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-surface));
  color: var(--surface-ink);
}
.shared-time-picker {
  display: flex;
  min-width: 0;
  width: 100%;
  gap: 0;
  border: 1px solid #b8cccd;
  border-radius: var(--control-radius);
  background: var(--brand-surface);
  overflow: visible;
}
.shared-time-picker .time-entry {
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--surface-ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--control-radius) 0 0 var(--control-radius);
}
.shared-time-picker:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 20%, transparent);
}
.time-options-trigger {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  border-left: 1px solid var(--surface-border);
  background: color-mix(in srgb, var(--brand-accent) 6%, var(--brand-surface));
  color: var(--surface-ink);
  border-radius: 0 var(--control-radius) var(--control-radius) 0;
}
.time-options-trigger .icon {
  width: 18px;
  height: 18px;
}
.time-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-height: 250px;
  overflow: auto;
}
.time-presets button {
  padding: 9px 12px;
  min-height: 40px;
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  border: 1px solid var(--surface-border);
  font-size: 14px;
}
.time-presets button:hover {
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
}
.time-options-help {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.field [aria-invalid='true'] {
  border-color: #c43e3e !important;
  box-shadow: 0 0 0 1px #c43e3e;
}
.field-error {
  font-size: 12px;
  color: #a12b2b;
  line-height: 1.5;
  display: block;
}
.form-error {
  padding: 12px 16px;
  background: #fff3f2;
  border: 1px solid #e5b1ad;
  color: #8c2828;
  border-radius: 8px;
}
.form-error ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.form-error button {
  background: transparent;
  text-align: left;
  color: inherit;
  text-decoration: underline;
  padding: 3px 0;
  font-size: 13px;
}
.record-overflow {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  margin-left: 8px;
}
.record-overflow summary {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  width: 36px;
  min-height: 36px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--surface-muted);
  cursor: pointer;
}
.record-overflow summary::-webkit-details-marker {
  display: none;
}
.record-overflow summary .icon {
  width: 18px;
  height: 18px;
}
.record-overflow[open] {
  gap: 8px;
  align-items: center;
}
.record-overflow[open] .btn.danger {
  background: #fff7f6;
  border-color: #e9c1bd;
  color: #9d302b;
}
.table-wrap table {
  width: 100%;
}
.table-wrap th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.table-wrap td {
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 16px;
  vertical-align: middle;
}
.table-wrap td small {
  display: block;
  line-height: 1.5;
  margin-top: 4px;
  color: var(--surface-muted);
}
.numeric-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.search-results {
  display: grid;
  gap: 8px;
}
.search-group-title {
  margin: 12px 0 2px;
  font-size: 12px;
  color: var(--surface-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.search-result {
  display: grid;
  justify-content: start;
  gap: 4px;
  padding: 12px;
  text-align: left;
  white-space: normal;
}
.search-result small {
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
}
mark {
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--surface-ink);
  border-radius: 3px;
  padding: 0 2px;
}
.password-entry {
  display: flex;
  border: 1px solid #bdcfce;
  border-radius: 8px;
  align-items: center;
}
.password-entry input {
  border: 0;
  background: transparent;
  min-width: 0;
  flex: 1;
}
.password-toggle {
  padding: 10px 12px;
  min-height: 44px;
  background: transparent;
  color: var(--brand-readable-accent);
  font-size: 13px;
  font-weight: 650;
}
.password-caps {
  font-size: 12px;
  color: #945b15;
}
.notification-category[data-category='messages'] {
  --filter-tone: var(--type-messages);
  --filter-pale: var(--type-messages-pale);
}
.notification-card[data-category='messages'] {
  --notice-tone: var(--type-messages);
  --notice-pale: var(--type-messages-pale);
}
.notification-title {
  font-size: 16px;
}
.notification-card .notification-actions .btn {
  min-height: 40px;
  font-size: 13px;
}
.notification-body {
  max-width: 80ch;
}
.notification-body.is-long {
  max-height: none;
  overflow: visible;
  mask-image: none;
}
.notification-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--surface-border);
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  border-radius: 12px;
  margin-bottom: 12px;
}
.notification-undo .btn {
  flex-shrink: 0;
}
.message-thread {
  display: grid;
  gap: 12px;
  max-height: 320px;
  overflow: auto;
  padding: 8px 0 16px;
}
.thread-message {
  max-width: 88%;
  justify-self: start;
  background: #f1f5f7;
  border: 1px solid #d9e3e7;
  padding: 12px 16px;
  border-radius: 12px;
}
.thread-message.is-sent {
  justify-self: end;
  background: #e7f6ee;
  border-color: #c1dfce;
}
.thread-message p {
  margin: 6px 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.5;
  font-size: 14px;
}
.thread-message time,
.thread-message small {
  font-size: 12px;
  color: #526e74;
}
.thread-peer {
  font-size: 13px;
  color: #526e74;
}
.employee-shift-card,
.week-time-event {
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-ink) 5.9%, transparent);
}
.employee-shift-time {
  display: grid;
  gap: 4px;
  font-size: 15px;
  line-height: 1.4;
}
.employee-shift-time span {
  white-space: nowrap;
}
.employee-shift-time small {
  display: inline-block;
  min-width: 30px;
  font-size: 12px;
  font-weight: 500;
  color: var(--surface-muted);
}
.employee-shift-top,
.employee-shift-top small,
.employee-shift-card > small,
.employee-day-count,
.week-slot-stack span,
.week-slot-stack small {
  font-size: 12px;
}
.employee-shift-card.is-open {
  border-color: #d5a75b;
  background: #fff8e9;
}
.employee-calendar-month .employee-day-head {
  padding: 10px 8px;
}
.employee-calendar-month .employee-day-body {
  padding: 6px;
}
.employee-calendar-month .employee-shift-card {
  padding: 8px;
}
.employee-calendar-month .employee-shift-time {
  font-size: 13px;
}
.week-slot-stack {
  position: absolute;
  height: var(--event-height);
  min-width: 0;
  width: auto;
  margin: 0;
}
.week-slot-stack strong {
  font-size: 14px;
}
.calendar-week-grid {
  min-width: 0;
}
.calendar-week-grid .week-time-event {
  overflow: hidden;
}
.calendar-week-grid .week-time-event strong {
  font-size: 13px;
  line-height: 1.4;
}
.category-key {
  color: #334155;
}
.category-filter.is-selected {
  box-shadow: inset 0 -2px var(--category-color);
}
.warehouse-chip {
  color: var(--surface-ink) !important;
  font-size: 12px;
  line-height: 1.5;
}
.calendar-grid-row {
  display: contents;
}
.calendar-grid-cell {
  min-width: 0;
}
.calendar-grid-cell > .calendar-day {
  width: 100%;
}
.workspace-loading {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--brand-surface);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.loading-skeleton {
  height: 12px;
  width: 70px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e8eff0, #f7fafb, #e8eff0);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.2s linear infinite;
}
.workspace[aria-busy='true'] {
  cursor: progress;
}
@keyframes skeleton-pulse {
  to {
    background-position: -200% 0;
  }
}
@media (max-width: 1200px) {
  .employee-calendar-week {
    grid-template-columns: 1fr;
  }
  .employee-calendar-week .employee-day {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .employee-calendar-week .employee-day-head {
    flex-wrap: wrap;
    align-content: center;
    border-bottom: 0;
    border-right: 1px solid var(--surface-border);
  }
  .employee-calendar-week .employee-day-body {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    min-height: 72px;
  }
  .calendar-week-grid {
    grid-template-columns: 58px repeat(7, minmax(0, 1fr));
  }
  .week-slot-stack {
    padding: 6px;
  }
  .week-slot-stack span,
  .week-slot-stack small {
    display: none;
  }
  .week-slot-stack strong {
    font-size: 12px;
  }
}
@media (max-width: 850px) {
  .employee-calendar-month {
    grid-template-columns: 1fr;
  }
  .employee-calendar-month .employee-day {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .employee-calendar-month .employee-day.is-adjacent {
    display: none;
  }
  .employee-calendar-month .employee-day-head {
    border-bottom: 0;
    border-right: 1px solid var(--surface-border);
  }
  .employee-calendar-month .employee-day-body {
    min-height: 64px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
  .table-wrap {
    overflow-x: visible;
  }
  .table-wrap table,
  .table-wrap tbody {
    display: block;
  }
  .table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
  }
  .table-wrap tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    border-bottom: 1px solid var(--surface-border);
    gap: 12px;
  }
  .table-wrap td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0 !important;
    border: 0;
    white-space: normal;
    text-align: left;
  }
  .table-wrap td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 650;
    color: var(--surface-muted);
    margin-bottom: 4px;
  }
  .table-wrap td:last-child {
    grid-column: 1/-1;
  }
  .table-wrap td small {
    overflow-wrap: break-word;
  }
}
@media (max-width: 600px) {
  :root {
    --control-height: 44px;
  }
  .workspace {
    padding: 16px;
  }
  .page-head {
    margin-bottom: 20px;
  }
  .page-head h1 {
    font-size: 24px;
  }
  .btn.compact,
  .icon-btn,
  .date-field-trigger,
  .notification-category,
  .category-filter,
  .record-overflow summary,
  .list-pagination .icon-btn {
    min-height: 44px;
  }
  .icon-btn,
  .record-overflow summary,
  .list-pagination .icon-btn {
    min-width: 44px;
  }
  .employee-calendar-week .employee-day {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .employee-calendar-week .employee-day-head {
    padding: 10px 8px;
  }
  .employee-calendar-week .employee-day-body {
    grid-template-columns: 1fr;
  }
  .employee-calendar-month .employee-day-body {
    grid-template-columns: 1fr;
  }
  .employee-day-head strong {
    font-size: 20px;
  }
  .employee-shift-card {
    padding: 12px;
  }
  .searchable-filter,
  .list-filter-row > .searchable-filter,
  .calendar-filters > .searchable-filter,
  .employee-calendar-filters > .searchable-filter,
  .manager-pay-controls > .searchable-filter {
    min-height: 44px;
    max-width: none;
    flex: 1 1 150px;
  }
  .list-results-row {
    flex-wrap: wrap;
  }
  .list-pagination {
    flex-wrap: wrap;
  }
  .dialog {
    max-height: calc(100dvh - 16px);
  }
  .time-options-trigger {
    min-height: 44px;
    min-width: 44px;
  }
  .workspace .pad,
  .dialog-content {
    padding: 16px;
  }
  .record-overflow[open] {
    flex-wrap: wrap;
  }
  .numeric-cell {
    white-space: normal;
  }
  .page-head .row {
    flex-wrap: wrap;
  }
  .table-wrap tr {
    gap: 16px;
  }
  .pay-period-trigger strong {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 1000;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff;
  color: #145d58;
  box-shadow: var(--shadow-overlay);
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
.sidebar > nav {
  display: contents;
}
.dialog:has(> .dialog-footer)[open],
.dialog:has(> .dialog-footer)[open],
.form-dialog:has(form)[open] {
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 860px);
  overflow: hidden;
}
.dialog:has(> .dialog-footer) > .dialog-header,
.dialog:has(> .dialog-footer) > .dialog-footer,
.dialog:has(> .dialog-footer) > .dialog-header,
.dialog:has(> .dialog-footer) > .dialog-footer,
.form-dialog:has(form) > .dialog-header {
  flex: 0 0 auto;
}
.dialog:has(> .dialog-footer) > .dialog-content {
  min-height: 0;
  overflow: auto;
  flex: 1;
}
.dialog:has(> .dialog-footer) > .dialog-footer {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--surface-border);
}
.dialog:has(> .dialog-footer) > .dialog-content {
  min-height: 0;
  overflow: auto;
  flex: 1;
}
.dialog:has(> .dialog-footer) > .dialog-footer {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--surface-border);
}
.form-dialog:has(form) > .dialog-content {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.form-dialog .dialog-content > form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
.form-dialog form > .form-grid {
  overflow: auto;
  min-height: 0;
  padding: 20px;
  flex: 1;
}
.form-dialog form > .form-error:not(.hidden) {
  flex-shrink: 0;
  margin: 12px 20px 0;
  max-height: 120px;
  overflow: auto;
}
.form-dialog form > .dialog-footer {
  flex: 0 0 auto;
  position: relative;
  margin: 0;
  padding: 12px 20px;
  background: var(--brand-surface);
  box-shadow: 0 -8px 16px -12px
    color-mix(in srgb, var(--brand-ink) 18.8%, transparent);
  border-top: 1px solid var(--surface-border);
}
.optional-lunch {
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
}
.optional-lunch > summary {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.optional-lunch > summary span {
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
  margin-left: 8px;
}
.optional-lunch .shift-lunch-panel {
  border: 0;
  border-top: 1px solid var(--surface-border);
  border-radius: 0 0 12px 12px;
  background: var(--brand-surface);
}
.optional-lunch .shift-lunch-panel legend {
  display: none;
}
.form-dialog .shift-time-panel,
.form-dialog .timecard-punch-panel {
  background: var(--brand-surface);
  border-color: var(--surface-border);
}
.form-dialog .shift-time-pair > .field,
.form-dialog .timecard-punch-pair > .field {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.form-dialog .shift-time-pair > .field + .field,
.form-dialog .timecard-punch-pair > .field + .field {
  border-left: 1px solid var(--surface-border);
  padding-left: 16px;
}
input:not([type='checkbox']):not([type='radio']):not([type='color']),
textarea,
select,
.searchable-filter,
.date-field-trigger {
  border-color: #74868f;
}
input::placeholder,
textarea::placeholder {
  color: #5f717b;
  opacity: 1;
}
.btn:disabled,
.icon-btn:disabled {
  opacity: 1;
  background: #eef1f3 !important;
  color: #5b6d77 !important;
  border-color: #c9d2d7 !important;
  box-shadow: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(560px, calc(100vw - 32px));
  line-height: 1.5;
}
.toast-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: transparent;
  color: inherit;
  border-radius: 8px;
}
.toast-close .icon {
  width: 18px;
}
.toast-close:hover {
  background: #ffffff26;
}
.structured-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 32px 20px;
  font-size: 14px;
  color: var(--surface-ink);
}
.structured-empty > .icon {
  width: 28px;
  height: 28px;
  color: var(--surface-muted);
}
.structured-empty p {
  margin: 0;
  color: var(--surface-muted);
  line-height: 1.5;
  max-width: 50ch;
}
.list-no-results .btn {
  margin-top: 12px;
}
.conversation-list {
  display: grid;
  gap: 8px;
}
.conversation-preview {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
  color: var(--surface-ink);
}
.conversation-preview > span {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.conversation-preview small {
  font-size: 12px;
  line-height: 1.5;
  color: var(--surface-muted);
}
.conversation-preview:hover {
  background: #edf8f5;
}
.message-sent-status {
  font-size: 12px;
  color: #166b50;
  min-height: 18px;
}
.mobile-clock-context {
  display: none;
}
.week-slot-stack {
  overflow-wrap: normal;
}
.week-time-event span,
.week-time-event small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.week-time-event strong {
  overflow-wrap: normal;
}
.shift-state {
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.shift-state .icon {
  width: 14px;
  height: 14px;
}
.layout .top .icon-btn {
  min-width: 40px;
  min-height: 40px;
}
.top .user-detail strong {
  font-size: 13px;
}
.filter-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.searchable-filter .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.calendar-now-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  height: 2px;
  background: #c7463a;
  pointer-events: none;
}
.calendar-now-line::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  background: #c7463a;
  border-radius: 50%;
}
.layout .sidebar .nav-group .nav-btn {
  font-size: 14px;
}
.layout small,
.layout .badge,
.layout .nav-group-title,
.layout .label {
  font-size: 12px;
}
.layout .label,
.layout .nav-group-title {
  color: var(--surface-muted);
}
.layout .nav-btn.active {
  background: color-mix(in srgb, var(--brand-accent) 11%, var(--brand-surface));
  color: var(--brand-readable-accent, var(--brand-accent));
}
.layout .btn:not(.primary):not(.danger),
.dialog .btn:not(.primary):not(.danger) {
  background: var(--brand-surface);
  color: var(--surface-ink);
}
.pay-period-trigger strong,
.pay-period-trigger small {
  color: var(--brand-accent-ink);
}
.calendar-day.selected,
.month-choice.selected {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}
.top {
  min-height: var(--header-height);
}
.layout {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.cell-preview summary {
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
.cell-preview > div {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--surface-border);
  line-height: 1.5;
}
.table-wrap td {
  overflow-wrap: break-word;
}
@media (max-width: 850px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .top {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 12px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .top > .row {
    gap: 8px !important;
  }
  .top .brand {
    font-size: 18px;
    white-space: nowrap;
  }
  .top .brand > svg {
    width: 25px;
  }
  .top .mobile-menu {
    display: inline-flex;
    width: 44px;
    padding: 0;
    min-width: 44px;
    justify-content: center;
    order: -1;
  }
  .top .quick-search,
  .top .company-context,
  .top .header-clock,
  .top .header-logout,
  .top .user-detail {
    display: none !important;
  }
  .top .header-profile {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .top .avatar {
    width: 32px;
    height: 32px;
  }
  .top > .row:nth-child(3) {
    margin-left: auto;
  }
  .top .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .layout {
    padding-top: 0 !important;
  }
  .mobile-clock-context {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -10px 0 16px;
    font-size: 12px;
    color: var(--surface-muted);
  }
  .mobile-clock-context .icon {
    width: 14px;
  }
  .form-dialog form > .form-grid {
    padding: 16px;
  }
  .form-dialog form > .dialog-footer {
    padding: 12px 16px;
  }
  .form-dialog .shift-time-pair > .field + .field,
  .form-dialog .timecard-punch-pair > .field + .field {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--surface-border);
    padding-top: 16px;
  }
}
@media (max-width: 700px) {
  .calendar-week-grid {
    display: block;
    max-height: none;
    overflow: visible;
  }
  .calendar-week-grid .week-hour-axis {
    display: none;
  }
  .calendar-week-grid .week-day-column {
    border-bottom: 1px solid var(--surface-border);
    border-left: 0;
  }
  .calendar-week-grid .week-time-heading {
    position: static;
    height: auto;
    min-height: 44px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  .calendar-week-grid .week-day-hours {
    height: auto;
    min-height: 66px;
    background: var(--brand-surface);
    display: grid;
    gap: 8px;
    padding: 12px;
  }
  .calendar-week-grid .week-time-event,
  .calendar-week-grid .week-slot-stack {
    position: static;
    inset: auto;
    min-height: 44px;
    height: auto !important;
    width: 100%;
    margin: 0;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    padding: 12px;
  }
  .calendar-week-grid .week-time-event strong {
    font-size: 14px;
  }
  .calendar-week-grid .week-time-event span,
  .calendar-week-grid .week-time-event small,
  .calendar-week-grid .week-slot-stack span,
  .calendar-week-grid .week-slot-stack small {
    display: block;
    white-space: normal;
  }
  .calendar-week-grid .week-slot-stack strong {
    font-size: 14px;
  }
  .calendar-now-line {
    display: none;
  }
  .calendar-week-grid .week-rest {
    position: static;
    margin: 0;
    padding: 12px;
  }
}

/* Shared period controls for schedule, coverage, timecards, reports and both payroll views. */
.period-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
.date-navigation {
  display: flex;
  align-items: stretch;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--surface-border);
  border-radius: var(--control-radius);
  background: var(--brand-surface);
  box-shadow: var(--shadow-card);
}
.date-navigation-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 48px;
  min-height: 48px;
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-surface));
  color: var(--brand-readable-accent, var(--brand-accent));
  border-radius: 0;
}
.date-navigation-arrow:first-child {
  border-radius: var(--control-radius) 0 0 var(--control-radius);
}
.date-navigation-arrow:last-child {
  border-radius: 0 var(--control-radius) var(--control-radius) 0;
}
.date-navigation-arrow .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.5;
}
.date-navigation-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 208px;
  min-height: 48px;
  padding: 6px 12px;
  text-align: left;
  border: 0;
  border-left: 1px solid var(--surface-border);
  border-right: 1px solid var(--surface-border);
  border-radius: 0;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}
.date-navigation-trigger > span {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.date-navigation-trigger small {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  color: inherit;
}
.date-navigation-trigger strong {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  color: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.date-navigation-trigger > .icon {
  width: 18px;
  height: 18px;
}
.date-navigation-trigger > .icon:last-child {
  width: 15px;
  height: 15px;
}
.date-navigation-current.btn {
  min-height: 48px;
  padding: 8px 12px;
  font-size: 14px;
  white-space: nowrap;
}
.date-navigation-current .icon {
  width: 18px;
  height: 18px;
}
.date-navigation-arrow:hover {
  background: color-mix(in srgb, var(--brand-accent) 15%, var(--brand-surface));
}
.date-navigation-trigger:hover {
  background: color-mix(in srgb, var(--brand-accent) 88%, #000);
}
.date-navigation-arrow:focus-visible,
.date-navigation-trigger:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: -3px;
}
.date-navigation-trigger,
.date-navigation-arrow {
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.workspace .segmented {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--surface-border);
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--brand-canvas) 65%, var(--brand-surface));
  min-height: 48px;
  max-width: 100%;
  flex-wrap: wrap;
}
.workspace .segmented button {
  padding: 8px 12px;
  min-height: 38px;
  font-size: 14px;
  line-height: 1.3;
  border-radius: 6px;
  background: transparent;
  color: var(--surface-muted);
  font-weight: 550;
}
.workspace .segmented button.active {
  background: var(--brand-surface);
  color: var(--brand-readable-accent, var(--brand-accent));
  box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-ink) 7.8%, transparent);
  font-weight: 650;
}
.workspace .segmented button:hover {
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--surface-ink);
}
.workspace .toolbar {
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.workspace .toolbar > .row {
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}
.manager-pay-period {
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.manager-pay-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.date-field-trigger {
  min-height: 44px;
  font-size: 14px;
  border-radius: var(--control-radius);
  background: var(--brand-surface);
  color: var(--surface-ink);
  border-color: #74868f;
}
.date-field-trigger:hover {
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-surface));
  border-color: var(--brand-accent);
}
.payroll-readiness {
  padding: 16px 20px;
  margin-bottom: 20px;
}
.payroll-readiness-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.payroll-readiness-heading > .icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--brand-readable-accent, var(--brand-accent));
}
.payroll-readiness h2 {
  font-size: 16px;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.payroll-readiness p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--surface-muted);
}
.payroll-readiness.has-errors {
  border-left: 3px solid #b4692a;
}
.payroll-readiness.has-errors .payroll-readiness-heading > .icon {
  color: #945719;
}
.payroll-correction-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 12px;
}
.payroll-correction-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.payroll-correction-list li > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.payroll-correction-list small {
  color: var(--surface-muted);
  line-height: 1.5;
}
.payroll-correction-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 650px) {
  .period-controls {
    width: 100%;
    gap: 10px;
  }
  .date-navigation {
    width: 100%;
  }
  .date-navigation-trigger {
    min-width: 0;
    flex: 1;
  }
  .date-navigation-trigger strong {
    font-size: 13px;
    white-space: normal;
  }
  .date-navigation-current.btn {
    min-height: 48px;
  }
  .workspace .toolbar > .row {
    width: 100%;
  }
  .workspace .segmented {
    max-width: 100%;
  }
  .workspace .segmented button {
    min-height: 40px;
  }
  .payroll-correction-list li {
    align-items: flex-start;
    flex-direction: column;
  }
  .payroll-correction-actions {
    width: 100%;
    flex-shrink: 1;
  }
}

.record-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.record-action-row .btn {
  margin: 0;
}
.workspace .btn.danger {
  border-color: #e1b8b3;
  background: #fff7f6;
  color: #9b3027;
}
.workspace .btn.danger:not(:disabled):hover {
  background: #fde8e5;
  border-color: #bf6359;
}
.workspace .btn.danger .icon {
  width: 16px;
  height: 16px;
}
.notification-actions .btn.danger {
  background: var(--brand-surface);
}
/* Shared feedback, context and messaging surfaces. */
.workspace .date-navigation-current.btn:not(:disabled) {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-accent-ink);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-ink) 7.1%, transparent);
}
.workspace .date-navigation-current.btn:not(:disabled):hover {
  filter: brightness(0.94);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--brand-ink) 13.3%, transparent);
}
.table-wrap th.numeric-cell {
  text-align: right;
}
.table-wrap td,
.table-wrap th {
  padding-left: 16px;
  padding-right: 16px;
}
.list-controls .list-filter-row,
.issue-category-filters {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.list-controls .list-filter-row > label,
.list-controls .list-select {
  flex: 0 1 190px;
  width: auto;
  min-width: 130px;
}
.list-controls .list-filter-row > .list-search {
  flex: 1 1 240px;
}
.list-select .searchable-filter {
  width: 100%;
  max-width: none;
}
.issue-category-filters {
  margin-bottom: 14px;
}
.issue-category-filter {
  min-height: 40px;
  flex: 0 0 auto;
}
.list-controls .list-filter-row > .list-clear {
  margin: 0;
}
.calendar-window-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 0 0 12px;
  color: var(--surface-muted);
}
.week-hour-label small,
.hour-label small {
  display: block;
  font-size: 11px;
}
.week-day-hours,
.timeline-hours {
  overflow: hidden;
}
.record-highlight {
  outline: 3px solid var(--brand-accent);
  outline-offset: 3px;
}
.manager-warehouse-context {
  padding-left: 16px;
  max-width: 34%;
  min-width: 0;
}
.warehouse-context-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: none;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  min-width: 0;
  color: var(--surface-ink);
}
.warehouse-context-switch:hover {
  background: var(--brand-soft);
  border-color: var(--surface-border);
}
.warehouse-context-switch > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.warehouse-context-switch small {
  font-size: 12px;
  color: var(--surface-muted);
}
.warehouse-context-switch strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warehouse-context-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  flex: none;
}
.warehouse-context-switch > .icon {
  width: 16px;
  flex: none;
}
.mobile-warehouse-switch {
  display: none;
}
.warehouse-choice-screen {
  min-height: 100dvh;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: clamp(24px, 6vh, 64px) 24px;
  background: var(--brand-canvas, #f5f8f9);
}
.warehouse-choice {
  width: 100%;
  max-width: 620px;
  padding: 28px;
}
.warehouse-choice-icon {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--brand-readable-accent);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 18px;
}
.warehouse-choice h1 {
  font-size: 26px;
  margin-bottom: 10px;
}
.warehouse-choice > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--surface-muted);
  margin-bottom: 20px;
}
.warehouse-choice-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.warehouse-choice-search input {
  min-width: 0;
}
.warehouse-choice-list {
  display: grid;
  gap: 10px;
}
.warehouse-choice-list > button {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--surface-border);
  background: var(--brand-surface);
  border-radius: 10px;
  color: var(--surface-ink);
}
.warehouse-choice-list > button:hover,
.warehouse-choice-list > button.selected {
  border-color: var(--brand-readable-accent);
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
}
.warehouse-choice-list > button > span:nth-child(2) {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.warehouse-choice-list strong {
  font-size: 16px;
}
.warehouse-choice-list small {
  font-size: 12px;
  color: var(--surface-muted);
}
.warehouse-choice-symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.message-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
  min-height: 570px;
  overflow: hidden;
}
.message-directory {
  padding: 18px;
  border-right: 1px solid var(--surface-border);
  min-width: 0;
  background: color-mix(in srgb, var(--brand-canvas) 45%, var(--brand-surface));
}
.message-directory-search {
  display: flex;
  align-items: center;
  gap: 8px;
}
.message-directory-search input {
  min-width: 0;
  font-size: 14px;
}
.message-directory-controls {
  display: flex;
  gap: 8px;
  margin: 10px 0 16px;
}
.message-directory-controls select {
  min-width: 0;
  width: 50%;
}
.message-directory-controls .searchable-filter {
  min-width: 0;
  width: 50%;
  max-width: none;
  padding: 8px;
  font-size: 12px !important;
}
.message-people {
  max-height: 570px;
  overflow: auto;
}
.message-recipient-group {
  margin-bottom: 18px;
}
.message-recipient-group h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--surface-muted);
  padding: 5px 8px;
  margin: 0 0 6px;
}
.message-recipient-group h2 > span {
  font-variant-numeric: tabular-nums;
}
.message-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--surface-ink);
  min-width: 0;
  min-height: 60px;
}
.message-person:hover {
  background: var(--brand-surface);
  border-color: var(--surface-border);
}
.message-person.selected {
  background: color-mix(in srgb, var(--brand-accent) 9%, var(--brand-surface));
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 35%,
    var(--brand-surface)
  );
}
.message-person-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 11%, var(--brand-surface));
  color: var(--brand-readable-accent);
  font-size: 13px;
  font-weight: 700;
}
.message-person-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  flex: 1;
}
.message-person-copy strong {
  font-size: 14px;
}
.message-person-copy small {
  font-size: 12px;
  color: var(--surface-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.message-unread {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border-radius: 9px;
  min-width: 20px;
  padding: 3px 5px;
  text-align: center;
  font-size: 12px;
}
.message-conversation {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.message-conversation-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--surface-border);
  margin: 0 !important;
}
.message-conversation-head h2 {
  font-size: 17px;
  margin: 0 0 4px;
}
.message-conversation-head p {
  font-size: 12px;
  color: var(--surface-muted);
  margin: 0;
}
.message-conversation > .message-thread {
  flex: 1;
  max-height: 460px;
  min-height: 250px;
  padding: 22px;
  background: var(--brand-surface);
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
}
.message-thread .thread-message {
  max-width: 85%;
  align-self: flex-start;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid var(--surface-border);
  background: var(--brand-canvas);
  border-radius: 12px 12px 12px 3px;
  min-width: 120px;
}
.message-thread .thread-message.is-sent {
  align-self: flex-end;
  background: color-mix(in srgb, var(--brand-accent) 9%, var(--brand-surface));
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 22%,
    var(--brand-surface)
  );
  border-radius: 12px 12px 3px 12px;
}
.thread-message strong {
  font-size: 12px;
  color: var(--surface-muted);
}
.thread-message p {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: 14px;
  line-height: 1.6;
  margin: 5px 0 8px;
  color: var(--surface-ink);
}
.thread-message time,
.thread-message small {
  font-size: 12px !important;
  color: var(--surface-muted);
}
.message-composer {
  padding: 18px 22px;
  border-top: 1px solid var(--surface-border);
}
.message-composer > label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 13px;
}
.message-composer textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  font: inherit;
  padding: 12px;
}
.message-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.message-composer-footer .btn {
  flex: none;
}
.message-sent-status,
.message-unavailable {
  font-size: 12px;
  line-height: 1.5;
  color: var(--surface-muted);
}
.message-pick-person {
  margin: auto;
  max-width: 400px;
  padding: 40px;
  line-height: 1.7;
}
.message-pick-person > .icon {
  width: 36px;
  height: 36px;
  color: var(--brand-readable-accent);
}
@media (max-width: 950px) {
  .message-workspace {
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
  }
  .message-composer-footer {
    flex-wrap: wrap;
  }
  .message-composer-footer .btn {
    margin-left: auto;
  }
  .manager-warehouse-context {
    max-width: 42%;
  }
}
@media (max-width: 700px) {
  .message-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .message-directory {
    border: 0;
    border-bottom: 1px solid var(--surface-border);
    padding: 14px;
  }
  .message-people {
    max-height: 210px;
  }
  .message-conversation > .message-thread {
    max-height: 360px;
    min-height: 180px;
  }
  .message-conversation-head,
  .message-composer {
    padding: 16px;
  }
  .message-directory-controls .searchable-filter {
    min-height: 44px;
  }
  .message-pick-person {
    padding: 24px;
  }
  .mobile-warehouse-switch {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 1px solid var(--surface-border);
    border-radius: 7px;
    padding: 7px;
    font-size: 12px;
    background: var(--brand-surface);
    color: var(--surface-ink);
  }
  .mobile-clock-context {
    flex-wrap: wrap;
  }
  .warehouse-choice {
    padding: 20px;
  }
  .list-controls .list-filter-row > .list-search {
    flex-basis: 100%;
  }
}
.workspace .segmented button.active {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-ink) 12.5%, transparent);
  font-weight: 700;
}
.workspace .segmented button.active:hover {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  filter: brightness(0.96);
}
.workspace .segmented button:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}
.request-review-context > h3 {
  font-size: 16px;
  margin: 0 0 14px;
}
.request-review-note {
  padding: 12px;
  margin-top: 14px;
  border-left: 3px solid var(--brand-accent);
  background: var(--brand-canvas);
  font-size: 14px;
  line-height: 1.6;
}
/* Structured employee requests and company access share card and row patterns. */
.employee-request-card {
  padding: 0;
  overflow: hidden;
}
.employee-request-card .request-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  margin: 0;
  border-bottom: 1px solid var(--surface-border);
  background: var(--brand-surface);
}
.request-kind-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-surface));
  color: var(--brand-readable-accent);
  flex: none;
}
.request-card-title {
  flex: 1;
  min-width: 0;
}
.request-card-title h2 {
  font-size: 17px;
  margin: 0 0 5px;
}
.request-card-title p {
  font-size: 12px;
  color: var(--surface-muted);
  margin: 0;
}
.request-card-body {
  padding: 20px;
}
.request-date-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-canvas);
}
.request-date-block {
  display: grid;
  gap: 7px;
}
.request-date-block > span {
  font-size: 12px;
  color: var(--surface-muted);
}
.request-date-block time {
  font:
    650 15px Inter,
    system-ui,
    sans-serif;
  color: var(--surface-ink);
  line-height: 1.5;
}
.request-date-arrow {
  display: grid;
  place-items: center;
  color: var(--surface-muted);
}
.request-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0;
}
.request-facts > div {
  padding: 4px 16px 4px 0;
  border-right: 1px solid var(--surface-border);
}
.request-facts > div:last-child {
  border-right: 0;
}
.request-facts dt {
  font-size: 12px;
  color: var(--surface-muted);
  margin: 0 0 8px;
}
.request-facts dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
  flex-wrap: wrap;
}
.request-facts dd small {
  font-size: 12px;
  font-weight: 400;
}
.request-facts dd.request-fact-hint {
  display: block;
  font-size: 12px;
  color: var(--surface-muted);
  font-weight: 400;
  margin-top: 6px;
}
.request-facts .request-paid,
.request-facts .request-can-work {
  color: var(--brand-readable-accent);
}
.request-facts .request-cannot-work {
  color: #9b4638;
}
.request-availability-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.request-pattern {
  margin-top: 18px;
  padding: 14px;
  background: var(--brand-canvas);
  border-radius: 9px;
}
.request-pattern > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--surface-muted);
}
.request-weekdays {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.request-weekdays > span {
  padding: 6px 9px;
  border: 1px solid var(--surface-border);
  background: var(--brand-surface);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
}
.request-pattern p {
  margin-top: 8px;
  font-size: 12px;
  color: var(--surface-muted);
}
.request-description p {
  font-size: 14px;
  line-height: 1.6;
}
.request-notes {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--surface-border);
  display: grid;
  gap: 14px;
}
.request-notes h3,
.request-tracking h3 {
  font-size: 13px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.request-notes p {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.request-manager-note {
  border-left: 3px solid var(--brand-accent);
  padding-left: 12px;
}
.request-tracking {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--surface-border);
}
.request-tracking-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.request-tracking-heading > span,
.request-status-copy {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.6;
}
.request-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-border);
}
.request-deadline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--surface-muted);
}
.request-deadline strong {
  display: block;
  color: #9b4638;
}
.request-review-context .request-facts {
  gap: 12px;
}
.admin-overview {
  padding: 20px;
  margin-bottom: 20px;
}
.admin-overview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--surface-muted);
}
.admin-section-label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.admin-overview .admin-summary {
  margin: 0;
}
.admin-home-roster {
  margin-bottom: 24px;
}
.admin-home-manager-list {
  display: grid;
}
.admin-home-manager-row,
.admin-directory-row,
.admin-directory-columns {
  display: grid;
  grid-template-columns:
    minmax(190px, 1.2fr) minmax(200px, 1.2fr) minmax(110px, 0.6fr)
    116px;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
}
.admin-home-manager-row + .admin-home-manager-row,
.admin-directory-row + .admin-directory-row {
  border-top: 1px solid var(--surface-border);
}
.admin-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.admin-person-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-surface));
  color: var(--brand-readable-accent);
  font-weight: 700;
}
.admin-person > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.admin-person strong {
  font-size: 14px;
  line-height: 1.5;
}
.admin-person small {
  font-size: 12px;
  color: var(--surface-muted);
}
.admin-access-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-access-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--surface-border);
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
}
.admin-access-chip.is-company {
  color: var(--brand-readable-accent);
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-surface));
}
.admin-access-chip > .icon {
  width: 15px;
  height: 15px;
}
.admin-access-unassigned {
  font-size: 12px;
  color: #9b4638;
}
.admin-account-state {
  display: grid;
  gap: 6px;
  font-size: 12px;
}
.admin-status {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 600;
}
.admin-status.is-active {
  color: var(--status-approved);
  background: var(--status-approved-pale);
}
.admin-status.is-inactive {
  color: var(--status-pending);
  background: var(--status-pending-pale);
}
.admin-role,
.admin-home-warehouse {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.5;
}
.admin-roster-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--surface-border);
  font-size: 12px;
  color: var(--surface-muted);
}
.admin-section-heading {
  margin: 24px 0 14px;
}
.admin-section-heading h2 {
  font-size: 18px;
}
.admin-section-heading p {
  font-size: 13px;
  color: var(--surface-muted);
  margin-top: 5px;
}
.admin-directory-total {
  font-size: 12px;
  color: var(--surface-muted);
}
.admin-directory-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 16px 20px;
}
.admin-directory-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 250px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}
.admin-directory-search input {
  height: 42px;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.admin-directory-search .icon {
  width: 17px;
  height: 17px;
  flex: none;
}
.admin-directory-select {
  display: grid;
  min-width: 0;
  align-items: start;
  gap: 8px;
  flex: 0 1 200px;
  font-size: 12px;
  color: var(--surface-muted);
}
.admin-directory-select select,
.admin-directory-select .searchable-filter {
  width: 100%;
  min-width: 0;
  height: 44px;
}
.admin-directory-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px 14px;
  font-size: 12px;
  color: var(--surface-muted);
}
.admin-clear-filters {
  background: transparent;
  color: var(--brand-readable-accent);
  font-size: 12px;
  padding: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.admin-directory-columns {
  background: var(--brand-canvas);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  font-size: 12px;
  font-weight: 650;
  color: var(--surface-muted);
  padding-top: 11px;
  padding-bottom: 11px;
}
.admin-mobile-label {
  display: none;
}
.admin-home-warehouse {
  display: block;
  margin-top: 7px;
}
.admin-empty-state {
  padding: 36px 20px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
}
.admin-empty-state > p {
  color: var(--surface-muted);
  font-size: 14px;
  max-width: 450px;
  line-height: 1.6;
}
.admin-access-attention {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #e3cb96;
  background: #fff9eb;
  border-radius: 9px;
  font-size: 13px;
  color: #80571f;
}
.admin-company-shortcuts {
  gap: 14px;
}
.earnings-filters {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--brand-surface);
}
.earnings-filters > label {
  flex: 1 1 240px;
  min-width: 180px;
}
.earnings-filters > .searchable-filter,
.earnings-filters > select {
  width: auto;
  max-width: 220px;
  flex: 0 1 190px;
  min-height: 40px;
  font-size: 14px !important;
}
.earnings-filters > [role='status'] {
  font-size: 12px;
  width: 100%;
  flex: 1 1 100%;
  margin-top: 2px;
}
.earnings-rate {
  background: var(--brand-canvas) !important;
  border-color: var(--surface-border) !important;
}
.calendar-filters .calendar-result {
  order: 99;
  margin-left: 0;
  flex: 1 1 100%;
  font-size: 12px;
}
.calendar-filter-empty {
  padding: 32px;
  text-align: center;
  border: 1px dashed var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface);
  line-height: 1.7;
}
.calendar-filter-empty p {
  color: var(--surface-muted);
  margin: 8px 0 14px;
}
.workspace .calendar-filters select.has-filter-value {
  border-color: var(--brand-accent);
}
@media (max-width: 1100px) {
  .admin-home-manager-row,
  .admin-directory-row,
  .admin-directory-columns {
    grid-template-columns: minmax(170px, 1fr) minmax(140px, 1fr) 116px;
  }
  .admin-home-manager-row .admin-account-state,
  .admin-directory-row .admin-account-state {
    grid-column: 2;
  }
  .admin-home-manager-row > .btn,
  .admin-directory-row > .btn {
    grid-column: 3;
    grid-row: 1/3;
  }
  .admin-directory-columns > span:nth-child(3) {
    display: none;
  }
}
@media (max-width: 700px) {
  .request-card-header {
    padding: 16px !important;
  }
  .request-card-body {
    padding: 16px;
  }
  .request-facts {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .request-facts > div {
    border-right: 0;
    border-bottom: 1px solid var(--surface-border);
    padding: 0 0 12px;
  }
  .request-facts > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .request-date-range {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  .request-date-arrow {
    display: none;
  }
  .request-date-block time {
    font-size: 14px;
  }
  .request-card-footer {
    align-items: flex-start;
  }
  .admin-home-manager-row,
  .admin-directory-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px;
  }
  .admin-home-access,
  .admin-directory-access {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .admin-home-manager-row .admin-account-state,
  .admin-directory-row .admin-account-state {
    grid-column: 1;
    grid-row: 3;
  }
  .admin-home-manager-row > .btn,
  .admin-directory-row > .btn {
    grid-column: 2;
    grid-row: 3;
  }
  .admin-directory-columns {
    display: none;
  }
  .admin-mobile-label {
    display: block;
    font-size: 12px;
    color: var(--surface-muted);
    margin-bottom: 7px;
  }
  .admin-directory-controls {
    padding: 16px;
    gap: 10px;
  }
  .admin-directory-search {
    flex-basis: 100%;
  }
  .admin-directory-select {
    flex: 1;
    display: grid;
  }
  .admin-directory-select select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .admin-directory-results {
    padding: 0 16px 12px;
  }
  .admin-overview-heading {
    flex-wrap: wrap;
    gap: 8px;
  }
  .admin-access-attention {
    flex-wrap: wrap;
  }
  .earnings-filters > .searchable-filter,
  .earnings-filters > select {
    max-width: none;
    flex: 1 1 150px;
  }
  .earnings-filters > label {
    flex-basis: 100%;
  }
  .admin-overview {
    padding: 16px;
  }
}
.workspace .segmented [data-action='report-tab'] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 13px;
}
.workspace .segmented [data-action='report-tab'] > .icon {
  width: 17px;
  height: 17px;
}
.attendance-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.attendance-kind.is-late {
  background: #fff4df;
  color: #875714;
  border-color: #ead5a9;
}
.attendance-kind.is-absence {
  background: #fff0ed;
  color: #a24637;
  border-color: #edc4ba;
}
.attendance-kind.is-punch {
  background: #f2edfa;
  color: #704b9e;
  border-color: #d8caec;
}
.attendance-kind > .icon {
  width: 16px;
  height: 16px;
}
.open-shift-row td {
  padding-top: 18px;
  padding-bottom: 18px;
}
.open-shift-time {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
}
.open-shift-date {
  display: block;
  font-size: 13px;
  color: var(--surface-muted);
  margin-top: 6px;
}
.open-shift-warehouse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--surface-muted);
  margin-top: 8px;
}
.open-shift-warehouse > .icon {
  width: 15px;
  height: 15px;
}
.open-shift-department {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--surface-muted);
}
.open-shift-department i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--area-color);
}
.open-shift-zone {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 5px 0;
}
.open-shift-row td small {
  display: flex;
  align-items: center;
  gap: 5px;
}
.open-shift-premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff4df;
  color: #805515;
  border: 1px solid #e8d2aa;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}
.open-shift-premium .icon {
  width: 15px;
  height: 15px;
}
.coverage-view-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.coverage-view-filters > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--surface-border);
  background: var(--brand-surface);
  color: var(--surface-muted);
  border-radius: 8px;
  padding: 9px 12px;
  min-height: 40px;
  font-size: 13px;
}
.coverage-view-filters > button > span {
  border-radius: 5px;
  background: var(--brand-canvas);
  padding: 3px 6px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.coverage-view-filters > button:hover {
  border-color: var(--brand-accent);
  color: var(--surface-ink);
}
.coverage-view-filters > button.selected {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border-color: var(--brand-accent);
}
.coverage-view-filters > button.selected > span {
  background: #ffffff25;
}
.coverage-view-filters > .is-gap:not(.selected) {
  border-color: #ead2a8;
  color: #855719;
  background: #fff9ed;
}
.coverage-card-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #0b6656;
  font-weight: 600;
}
.coverage-card-state.has-gap {
  color: #875714;
}
.coverage-indicator > .btn {
  width: fit-content;
  background: var(--brand-surface);
}
.coverage-indicator > strong {
  font-size: 15px;
}
.coverage-indicator {
  gap: 10px;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-ink) 2.4%, transparent);
}
.request-review-context .request-date-block time {
  font-size: 14px;
}
.layout [hidden],
.dialog [hidden] {
  display: none !important;
}
.manager-account-panel {
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 16px;
  min-width: 0;
}
.manager-account-panel legend {
  font-size: 14px;
  font-weight: 650;
  padding: 0 6px;
}
.manager-account-panel > p {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}
.manager-account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.manager-account-fields .field:last-child {
  grid-column: 1/-1;
}
.manager-warehouse-options {
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.manager-warehouse-options legend {
  font-size: 14px;
  font-weight: 650;
  padding: 0 6px;
}
.manager-warehouse-options > input,
.manager-warehouse-options > .note {
  grid-column: 1/-1;
}
.manager-warehouse-options .check {
  border: 1px solid var(--surface-border);
  padding: 10px;
  border-radius: 7px;
  min-width: 0;
  margin: 0;
  line-height: 1.5;
}
.page-head h1[tabindex='-1']:focus {
  outline: none;
}
.calendar-window-caption .icon {
  width: 16px;
  height: 16px;
}
@media (max-width: 650px) {
  .manager-account-fields,
  .manager-warehouse-options {
    grid-template-columns: 1fr;
  }
  .workspace .segmented [data-action='report-tab'] {
    font-size: 13px;
    padding: 9px;
    gap: 6px;
  }
}

.workspace .card-head p {
  color: var(--surface-muted);
}

.coverage-summary {
  grid-template-columns: 1fr;
  gap: 12px;
}
.coverage-indicator {
  grid-template-columns: minmax(180px, 1fr) 120px minmax(180px, 1fr) auto;
  align-items: center;
  background: var(--brand-surface);
  padding: 18px;
  gap: 24px;
}
.coverage-indicator.short {
  background: var(--brand-surface);
}
.coverage-card-title,
.coverage-window,
.coverage-demand {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.coverage-card-title > strong,
.coverage-window > strong {
  font-size: 14px;
  line-height: 1.5;
}
.coverage-card-title .coverage-card-state {
  font-size: 12px;
}
.coverage-demand > strong {
  font:
    700 25px Inter,
    system-ui,
    sans-serif;
  color: var(--surface-ink);
}
.coverage-demand > strong > span {
  font-size: 15px;
  color: var(--surface-muted);
  font-weight: 500;
}
.coverage-demand small,
.coverage-window small,
.coverage-card-title small {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.5;
}
.coverage-area-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--surface-muted);
}
.coverage-area-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--area-color);
}
.coverage-zone {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.coverage-time {
  font-size: 14px;
  line-height: 1.5;
}
.coverage-gap-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
}
.coverage-gap-badge.has-gap {
  color: #875714;
  background: #fff4df;
  border-color: #ead5a9;
}
.coverage-gap-badge.is-covered {
  color: #0b6656;
  background: #e8f5ef;
  border-color: #bfdccf;
}
.coverage-gap-badge .icon {
  width: 15px;
  height: 15px;
}
@media (max-width: 1100px) {
  .coverage-indicator {
    grid-template-columns: minmax(160px, 1fr) 110px;
    gap: 16px;
  }
  .coverage-indicator > .btn {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .coverage-demand {
    text-align: right;
  }
  .coverage-window {
    grid-column: 1;
    grid-row: 2;
  }
}
@media (max-width: 500px) {
  .coverage-indicator {
    padding: 14px;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 95px;
  }
  .coverage-demand > strong {
    font-size: 22px;
  }
  .coverage-indicator > .btn {
    grid-column: 1/-1;
    grid-row: 3;
    justify-self: start;
  }
  .coverage-window {
    grid-column: 1/-1;
  }
}

.company-brand-name {
  max-width: 190px;
  line-height: 1.3;
  font-size: 16px;
  letter-spacing: -0.2px;
  overflow-wrap: break-word;
}
.top .brand .company-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: none;
}
.demo-publication {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.demo-publication > span {
  font-size: 12px;
  color: var(--surface-muted);
}
.demo-publication > .btn {
  min-height: 40px;
  font-size: 12px;
}
.finish-recovery-preview {
  display: grid;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--surface-border);
}
.finish-recovery-preview > h3 {
  font-size: 15px;
}
.finish-recovery-preview > .btn {
  width: fit-content;
}
.finish-recovery-preview > span {
  font-size: 13px;
  color: var(--surface-muted);
}

.approval-switch button:hover:not(.selected) {
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--surface-ink);
}
.approval-switch button:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

.badge.brand {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  border: 1px solid var(--brand-border);
}
.company-palette-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0 10px;
}
.company-palette-presets > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  text-align: left;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.company-palette-presets > button:hover {
  border-color: var(--brand-readable-accent);
  box-shadow: var(--shadow-card);
}
.company-palette-presets > button[aria-pressed='true'] {
  border-color: var(--brand-accent);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
  background: var(--brand-soft);
}
.company-palette-presets > button:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.company-palette-presets strong {
  font-size: 13px;
  font-weight: 650;
  grid-column: 1;
  line-height: 1.4;
}
.company-palette-presets > button > .icon {
  grid-column: 2;
  grid-row: 1/3;
  width: 16px;
  height: 16px;
  color: var(--brand-readable-accent);
  visibility: hidden;
}
.company-palette-presets > button[aria-pressed='true'] > .icon {
  visibility: visible;
}
.company-palette-swatches {
  display: flex;
  gap: 4px;
  grid-column: 1;
}
.company-palette-swatches i {
  width: 24px;
  height: 21px;
  border-radius: 5px;
  border: 1px solid #00000012;
}
.brand-palette .company-palette-hint {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-muted);
}
.brand-color-grid .field {
  border: 0;
  padding: 0;
  background: transparent;
  min-width: 0;
}
.brand-color-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.brand-preview {
  display: grid;
  gap: 18px;
  padding: 18px;
  background: var(--preview-surface);
  color: var(--preview-ink);
  border: 1px solid
    color-mix(in srgb, var(--preview-ink) 15%, var(--preview-surface));
  border-radius: 12px;
}
.brand-preview-header {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-preview-header > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.brand-preview-mark {
  color: var(--preview-accent-ink);
  background: var(--preview-accent);
}
.brand-preview small {
  color: inherit;
  opacity: 0.8;
}
@media (max-width: 650px) {
  .company-palette-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brand-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brand-palette {
    padding: 14px;
  }
}
/* Company-owned login domains use the same card and action patterns as settings. */
.domain-record {
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--card-radius);
  background: var(--brand-surface, #fff);
  min-width: 0;
}
.domain-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.domain-record-head strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}
.domain-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  background: var(--brand-soft, #eef6f5);
  color: var(--surface-ink);
}
.domain-state.connected {
  font-weight: 650;
  border: 1px solid var(--brand-accent, #0f766e);
}
.domain-steps {
  padding-left: 22px;
  margin: 0 0 18px;
  display: grid;
  gap: 16px;
}
.domain-steps p {
  margin: 6px 0 0;
  line-height: 1.6;
  font-size: 13px;
  color: var(--surface-muted);
}
.domain-dns {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--brand-canvas, #f5f8f9);
}
.domain-dns code {
  overflow-wrap: anywhere;
  font-size: 12px;
  user-select: all;
}
.domain-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 20px;
}
.domain-empty .icon {
  width: 30px;
  height: 30px;
  color: var(--brand-accent, #0f766e);
}
.domain-record > small {
  display: block;
  margin-top: 12px;
}
@media (max-width: 600px) {
  .domain-record {
    padding: 14px;
  }
  .domain-dns {
    grid-template-columns: 1fr;
  }
  .domain-record .row .btn {
    flex: 1 1 auto;
  }
}

/* Adjacent controls share a height; two-line period pickers use a larger tier. */
.workspace
  :is(
    .list-filter-row,
    .calendar-filters,
    .employee-calendar-filters,
    .approval-controls,
    .manager-pay-controls,
    .slot-controls,
    .earnings-filters,
    .toolbar
  )
  :is(
    input:not([type='checkbox']):not([type='radio']),
    select,
    .searchable-filter,
    .list-clear,
    .calendar-clear,
    .date-field-trigger
  ) {
  height: var(--control-height);
  min-height: var(--control-height);
  box-sizing: border-box;
}
.workspace :is(.list-filter-row, .calendar-filters) .list-search input {
  padding-top: 8px;
  padding-bottom: 8px;
}
.workspace
  :is(
    .list-filter-row,
    .calendar-filters,
    .employee-calendar-filters,
    .approval-controls,
    .manager-pay-controls,
    .slot-controls,
    .earnings-filters,
    .toolbar
  )
  :is(.searchable-filter, .list-clear, .calendar-clear) {
  display: inline-flex;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.3;
}
.workspace :is(.toolbar, .calendar-filters) {
  gap: 12px;
  margin-bottom: 16px;
}
.workspace .list-controls .list-filter-row {
  gap: 12px;
  margin-bottom: 16px;
}
.workspace .list-controls .list-filter-row > .list-select {
  flex-basis: 180px;
  min-width: min(180px, 100%);
  max-width: 100%;
}
.workspace .list-controls .list-filter-row > .list-search {
  flex-basis: 200px;
}
.workspace .list-pagination :is(.icon-btn, select, .searchable-filter) {
  height: var(--control-compact-height);
  min-height: var(--control-compact-height);
}
.workspace .list-pagination .icon-btn {
  width: var(--control-compact-height);
}
.workspace
  .toolbar
  :is(
    .date-navigation,
    .date-navigation-current,
    .month-navigation,
    .period-preset,
    .segmented
  ) {
  min-height: var(--control-period-height);
  height: var(--control-period-height);
}
.workspace .toolbar .segmented {
  flex-wrap: nowrap;
  padding: 4px;
  gap: 4px;
}
.workspace .toolbar .segmented button {
  height: 38px;
  min-height: 38px;
  padding: 8px 12px;
}
.workspace :is(.metadata, .section-head) {
  margin-bottom: 16px;
}
.form-grid {
  align-items: start;
  gap: 16px;
}
.dialog .field {
  align-self: start;
  gap: 8px;
}
.dialog .field > span:first-child {
  line-height: 1.4;
  min-height: 20px;
}
.dialog
  .field
  :is(
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not(
        [type='color']
      ):not([type='hidden']),
    select,
    .searchable-filter,
    .date-field-trigger
  ) {
  height: 44px;
  min-height: 44px;
}
.dialog .field .shared-time-picker {
  height: 44px;
  min-height: 44px;
}
.dialog .field .shared-time-picker :is(.time-entry, .time-options-trigger) {
  height: 42px;
  min-height: 42px;
}

.dialog :is(.range-pair, .shift-time-pair, .timecard-punch-pair, .lunch-entry) {
  gap: 24px;
  align-items: start;
}
.dialog
  :is(.range-pair, .shift-time-pair, .timecard-punch-pair, .lunch-entry)
  > .field {
  background: var(--brand-surface);
}
.dialog
  :is(.range-pair, .shift-time-pair, .timecard-punch-pair, .lunch-entry)
  > .field
  + .field {
  margin-top: 0;
}
@supports (grid-template-rows: subgrid) {
  .dialog :is(.range-pair, .shift-time-pair, .timecard-punch-pair) {
    row-gap: 8px;
  }
  .dialog :is(.range-pair, .shift-time-pair, .timecard-punch-pair) > .field {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}
@media (min-width: 1101px) {
  .top {
    display: grid;
    grid-template-columns: minmax(200px, 1.1fr) minmax(140px, 1fr) auto auto;
    grid-template-areas: 'brand context clock account';
    column-gap: 16px;
    padding: 0 24px;
  }
  .top > .header-brand {
    grid-area: brand;
    min-width: 0;
    gap: 12px !important;
  }
  .top > .header-account {
    grid-area: account;
    gap: 16px !important;
  }
  .top > .company-context {
    grid-area: context;
    order: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
  }
  .top > .header-clock {
    grid-area: clock;
    order: 0;
    margin: 0;
    border: 0;
    padding: 0;
  }
  .top .brand {
    min-width: 0;
    flex: 0 1 auto;
  }
  .top .company-brand-name {
    min-width: 0;
    max-width: clamp(160px, 20vw, 340px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .top .user-detail {
    max-width: clamp(150px, 14vw, 230px);
    min-width: 0;
    overflow: hidden;
  }
  .top .user-detail > strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'brand account' 'context clock';
    height: auto;
    min-height: 96px;
    padding: 12px !important;
    gap: 8px 16px !important;
  }
  .top > .header-brand {
    grid-area: brand;
    min-width: 0;
    gap: 8px !important;
  }
  .top > .header-account {
    grid-area: account;
    gap: 8px !important;
  }
  .top > .company-context {
    grid-area: context;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
  }
  .top > .header-clock {
    grid-area: clock;
    margin: 0;
    border: 0;
    padding: 0;
    min-width: 0;
  }
  .top .brand {
    min-width: 0;
  }
  .top .company-brand-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
  }
}
@media (max-width: 700px) {
  .workspace
    :is(
      .list-filter-row,
      .calendar-filters,
      .employee-calendar-filters,
      .approval-controls,
      .manager-pay-controls,
      .slot-controls,
      .earnings-filters,
      .toolbar
    )
    :is(
      input:not([type='checkbox']):not([type='radio']),
      select,
      .searchable-filter,
      .list-clear,
      .calendar-clear,
      .date-field-trigger
    ) {
    height: 44px;
    min-height: 44px;
  }
  .workspace .list-controls .list-filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .workspace
    .list-controls
    .list-filter-row
    > :is(.list-search, .filter-label) {
    grid-column: 1 / -1;
  }
  .workspace
    .list-controls
    .list-filter-row
    > :is(.list-select, .searchable-filter, .list-clear) {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  .workspace .list-controls .list-filter-row > .list-search {
    flex-basis: 100%;
  }
  .workspace .list-pagination :is(.icon-btn, select, .searchable-filter) {
    height: 44px;
    min-height: 44px;
    min-width: 44px;
  }
  .workspace .toolbar .segmented {
    height: auto;
    min-height: 54px;
    flex-wrap: wrap;
  }
  .workspace .toolbar .segmented button {
    height: 44px;
    min-height: 44px;
  }
  .dialog
    :is(.range-pair, .shift-time-pair, .timecard-punch-pair, .lunch-entry) {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .dialog :is(.range-pair, .shift-time-pair, .timecard-punch-pair) > .field {
    grid-row: auto;
    grid-template-rows: none;
  }
}

.domain-check-results {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}
.domain-check-results h3 {
  margin: 0 0 14px;
}
.domain-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0;
}
.domain-check > span {
  color: var(--color-danger, #b91c1c);
  flex-shrink: 0;
}
.domain-check.is-passed > span {
  color: #167454;
}
.domain-check p {
  margin: 5px 0 0;
  line-height: 1.5;
  color: var(--ink);
}

/* Custom domains: separate address creation from connection setup. */
.domain-manager {
  display: grid;
  gap: 22px;
}
.domain-manager-intro {
  padding: 22px;
  border: 1px solid var(--surface-border);
  border-radius: var(--card-radius);
  background: var(--brand-surface, #fff);
}
.domain-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brand-readable-accent);
}
.domain-manager-intro h3 {
  margin: 12px 0 8px;
  font-size: 22px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.domain-manager-intro p {
  margin: 0;
  line-height: 1.65;
  color: var(--surface-muted);
}
.domain-manager-intro small {
  display: block;
  color: var(--surface-muted);
  line-height: 1.6;
  margin-top: 12px;
}
.domain-manager-intro .field {
  margin-top: 22px;
}
.domain-manager-intro .domain-record-head {
  margin: 0;
}
.domain-overview-list {
  display: grid;
  gap: 14px;
}
.domain-address {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.domain-address > div {
  min-width: 0;
}
.domain-address small {
  display: block;
  margin-top: 7px;
  color: var(--surface-muted);
  line-height: 1.5;
}
.domain-address-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.domain-record-actions,
.domain-manager-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.domain-record-actions .danger {
  margin-left: auto;
}
.domain-manager-footer {
  padding-top: 18px;
  border-top: 1px solid var(--surface-border);
  justify-content: flex-end;
}
.domain-manager-footer > [data-domain-back],
.domain-manager-footer > [data-domain-new] {
  margin-right: auto;
}
.domain-progress {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.domain-progress li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  color: var(--surface-muted);
  font-size: 12px;
}
.domain-progress li > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.domain-progress .is-complete {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.domain-progress .is-current {
  border-color: var(--brand-accent);
  color: var(--surface-ink);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}
.domain-connection .domain-check-results {
  margin: 0;
}
.domain-connection .domain-login-link {
  justify-self: start;
}
@media (max-width: 600px) {
  .domain-manager {
    gap: 16px;
  }
  .domain-manager-intro {
    padding: 16px;
  }
  .domain-manager-intro h3 {
    font-size: 20px;
  }
  .domain-progress {
    gap: 7px;
  }
  .domain-progress li {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    font-size: 11px;
  }
  .domain-record-actions .btn {
    flex: 1 1 auto;
  }
  .domain-record-actions .danger {
    margin-left: 0;
  }
  .domain-manager-footer .btn {
    flex: 1 1 auto;
  }
  .domain-manager-footer > [data-domain-back],
  .domain-manager-footer > [data-domain-new] {
    margin-right: 0;
  }
}

@media (max-width: 380px) {
  .workspace .list-controls .list-filter-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.workgrid-credit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  color: inherit;
  text-decoration: none;
  line-height: 1.5;
}
.workgrid-credit-link svg {
  width: 14px;
  height: 14px;
  margin-left: 3px;
}
.workgrid-credit-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.workgrid-credit-link:focus-visible {
  outline: 2px solid var(--login-accent, var(--brand-accent));
  outline-offset: 3px;
  border-radius: 5px;
}

.shift-change-unavailable {
  grid-column: 1 / -1;
  flex-basis: 100%;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Source: workspace-employee.css */
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--surface-border);
  border-radius: 7px;
  background: var(--brand-canvas);
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
  vertical-align: middle;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-status
  .icon {
  width: 15px;
  height: 15px;
  flex: none;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-status-approved {
  background: var(--status-approved-pale);
  border-color: color-mix(
    in srgb,
    var(--status-approved) 25%,
    var(--brand-surface)
  );
  color: var(--status-approved);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-status-pending {
  background: var(--status-pending-pale);
  border-color: color-mix(
    in srgb,
    var(--status-pending) 25%,
    var(--brand-surface)
  );
  color: var(--status-pending);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-status-waiting {
  background: color-mix(
    in srgb,
    var(--status-waiting) 7%,
    var(--brand-surface)
  );
  border-color: color-mix(
    in srgb,
    var(--status-waiting) 25%,
    var(--brand-surface)
  );
  color: var(--status-waiting);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-status-denied {
  background: var(--status-denied-pale);
  border-color: color-mix(
    in srgb,
    var(--status-denied) 25%,
    var(--brand-surface)
  );
  color: var(--status-denied);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-status-active {
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 25%,
    var(--brand-surface)
  );
  color: var(--brand-readable-accent);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--surface-border);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-section-head
  h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-section-head
  h2
  > .icon {
  width: 19px;
  height: 19px;
  color: var(--brand-readable-accent);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-section-head
  h2
  > span {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--brand-canvas);
  color: var(--surface-muted);
  font-size: 12px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-section-head
  p {
  margin: 5px 0 0;
  color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.55;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-record-date,
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-record-time {
  display: block;
  color: var(--surface-ink);
  font-size: 14px;
  font-weight: 650;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-record-time,
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-record-number {
  font-variant-numeric: tabular-nums;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-record-number {
  color: var(--surface-ink);
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-record-number
  small {
  display: inline;
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
}

:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-period {
  margin-bottom: 18px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-overview {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.5fr);
  margin-bottom: 22px;
  overflow: hidden;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-total {
  padding: 25px 26px;
  background: var(--brand-surface);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-total
  > span {
  font-size: 13px;
  color: var(--surface-muted);
  font-weight: 600;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-total
  > strong {
  display: block;
  margin: 8px 0;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.045em;
  color: var(--surface-ink);
  font-variant-numeric: tabular-nums;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-total
  > strong
  small {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-total
  > p {
  margin: 0;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.6;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
  align-content: center;
  margin: 0;
  padding: 25px 26px;
  border-left: 1px solid var(--surface-border);
  background: var(--brand-surface);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-stats
  > div:last-child {
  grid-column: 1/-1;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-stats
  dt {
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-stats
  dd {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  color: var(--surface-ink);
  font-variant-numeric: tabular-nums;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-stats
  dd
  small {
  font-size: 12px;
  color: var(--surface-muted);
  font-weight: 400;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-tabs {
  align-items: stretch;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 5px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: var(--brand-canvas);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-tabs
  button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border-radius: 7px;
  background: transparent;
  color: var(--surface-muted);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-tabs
  button.active {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-accent) 16%, transparent);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-tabs
  .icon {
  width: 17px;
  height: 17px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-tabs
  button
  > .employee-time-tab-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--brand-canvas);
  font-size: 12px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-tabs
  button.active
  > .employee-time-tab-count {
  background: color-mix(in srgb, var(--brand-accent-ink) 18%, transparent);
  color: var(--brand-accent-ink);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-records {
  padding: 0;
  overflow: hidden;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-records
  > .list-controls {
  padding: 16px 22px 8px;
  margin: 0;
  border-bottom: 1px solid var(--surface-border);
  background: var(--brand-surface);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-records
  .list-scope {
  margin-bottom: 8px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-records
  td:last-child
  .btn {
  white-space: nowrap;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-time-records
  .table-wrap
  th {
  background: #f6f9fa;
}

:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  text-align: left;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item
  > span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 650;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item
  .icon {
  width: 19px;
  height: 19px;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item
  > strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item.selected {
  border-color: var(--brand-accent);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-accent) 16%, transparent);
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item[data-status='pending']
  .icon {
  color: var(--status-pending);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item[data-status='approved']
  .icon {
  color: var(--status-approved);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item[data-status='denied']
  .icon {
  color: var(--status-denied);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  [data-category='leave'] {
  --employee-category: var(--type-leave);
  --employee-category-pale: var(--type-leave-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  [data-category='availability'] {
  --employee-category: var(--type-availability);
  --employee-category-pale: var(--type-availability-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  [data-category='swap'] {
  --employee-category: var(--type-swap);
  --employee-category-pale: var(--type-swap-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  [data-category='drop'] {
  --employee-category: var(--type-drop);
  --employee-category-pale: var(--type-drop-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  [data-category='correction'] {
  --employee-category: var(--type-correction);
  --employee-category-pale: var(--type-correction-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  [data-category='transfer'] {
  --employee-category: var(--type-transfer);
  --employee-category-pale: var(--type-transfer-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-category {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 41px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--employee-category) 24%, white);
  border-radius: 8px;
  background: var(--employee-category-pale);
  color: var(--employee-category);
  font-size: 12px;
  font-weight: 650;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-category
  .icon {
  width: 16px;
  height: 16px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-category
  > span {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  border-radius: 6px;
  background: #ffffffb3;
  font-size: 12px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-category.selected {
  background: var(--employee-category);
  border-color: var(--employee-category);
  color: #fff;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-category.selected
  > span {
  background: #ffffff30;
  color: #fff;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 17px;
  font-size: 13px;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-shortcut
  > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-shortcut
  .icon {
  width: 17px;
  height: 17px;
  flex: none;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-list {
  display: grid;
  gap: 14px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record {
  padding: 0;
  border-left: 4px solid var(--employee-category);
  overflow: hidden;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record[data-category='other'] {
  --employee-category: var(--type-other);
  --employee-category-pale: var(--type-other-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record.hidden {
  display: none;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record.is-request-target {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--surface-border);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-icon {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  flex: none;
  border-radius: 10px;
  background: var(--employee-category-pale);
  color: var(--employee-category);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-icon
  .icon {
  width: 21px;
  height: 21px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-head
  > div {
  flex: 1;
  min-width: 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-head
  h2 {
  margin: 0 0 4px;
  color: var(--surface-ink);
  font-size: 16px;
  letter-spacing: -0.02em;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-head
  p {
  margin: 0;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.5;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-body {
  padding: 19px 20px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-state-row {
  margin: 16px 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-footer
  .record-deadline {
  font-size: 13px;
  font-weight: 650;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  margin: 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-facts
  > div {
  min-width: 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-facts
  dt {
  margin: 0 0 7px;
  color: var(--surface-muted);
  font-size: 12px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-facts
  dd {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
  color: var(--surface-ink);
  overflow-wrap: anywhere;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-facts
  dd.employee-fact-hint {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record[data-category='correction']
  .employee-request-facts {
  grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1.65fr);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-shifts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-shift {
  display: grid;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: transparent;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-shift
  > span {
  color: var(--surface-muted);
  font-size: 12px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-shift
  > strong {
  font-size: 14px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-shift
  > b {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-shift
  > small {
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.5;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-border);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-notes
  > div:only-child {
  grid-column: 1/-1;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-notes
  span {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-notes
  .icon {
  width: 15px;
  height: 15px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-notes
  p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-decision {
  padding-left: 13px;
  border-left: 2px solid
    color-mix(in srgb, var(--brand-accent) 25%, var(--surface-border));
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record[data-status='denied']
  .employee-request-decision {
  border-color: #d9958e;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record[data-status='approved']
  .employee-request-decision {
  border-color: #8ac1a0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--surface-border);
  background: transparent;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-footer
  > div:first-child {
  flex: 1;
  min-width: 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-footer
  p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--surface-ink);
  line-height: 1.65;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-footer
  p
  .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-footer
  small {
  display: block;
  margin: 5px 0 0 23px;
  font-size: 12px;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-footer
  small.employee-deadline-overdue {
  color: #a03d35;
  font-weight: 650;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record[data-status='approved']
  .employee-request-footer
  p
  .icon {
  color: #26704c;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record[data-status='denied']
  .employee-request-footer
  p
  .icon {
  color: #a03d35;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record[data-status='pending']
  .employee-request-footer
  p
  .icon {
  color: #966712;
}
:is(
    .workspace[data-role='employee'],
    .workspace[data-view='my-work']
  )[data-view='requests']
  > .list-controls {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: var(--brand-surface);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-list-controls
  .list-select[hidden] {
  display: none !important;
}

:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-guide {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 21px;
  padding: 17px 19px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: var(--brand-surface);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-guide
  > span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-surface));
  color: var(--brand-readable-accent);
  flex: none;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-guide
  > span
  .icon {
  width: 19px;
  height: 19px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-guide
  strong {
  font-size: 14px;
  color: var(--surface-ink);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-guide
  p {
  margin: 4px 0 0;
  color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.6;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending {
  margin-bottom: 22px;
  overflow: hidden;
  border-color: #e3d4ae;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending
  > .employee-section-head {
  background: #fffaf0;
  border-bottom-color: #ece1c6;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending
  h2
  > .icon {
  color: #966712;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending
  h2
  > span {
  background: #f7e8c3;
  color: #805710;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending-list {
  padding: 0 20px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending-list
  article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--surface-border);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending-list
  article:last-child {
  border-bottom: 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending-list
  article
  > div {
  flex: 1;
  min-width: 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending-list
  strong {
  font-size: 13px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-pending-list
  p {
  margin: 4px 0 0;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-layout
  > .card {
  overflow: hidden;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rules {
  display: grid;
  gap: 14px;
  padding: 18px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rule {
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rule
  > header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rule
  > header
  > div {
  flex: 1;
  min-width: 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-symbol {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eaf6ef;
  color: #28744e;
  flex: none;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-symbol
  .icon {
  width: 18px;
  height: 18px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .cannot-work
  .employee-availability-symbol {
  background: #fff0ec;
  color: #a35142;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rule
  h3 {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rule
  p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-muted);
  font-variant-numeric: tabular-nums;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rule
  .employee-status {
  padding: 4px 7px;
  font-size: 12px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin: 15px 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-weekdays
  > span {
  display: grid;
  place-items: center;
  min-height: 31px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--brand-canvas);
  color: var(--surface-muted);
  font-size: 12px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-weekdays
  > span.included {
  background: #eaf6ef;
  border-color: #b9dbc5;
  color: #286448;
  font-weight: 650;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .cannot-work
  .employee-availability-weekdays
  > span.included {
  background: #fff0ec;
  border-color: #e4c3ba;
  color: #995143;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rule
  > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rule
  > footer
  > span:first-child:not(.employee-status) {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.65;
  flex: 1 1 140px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-rule
  > footer
  .btn {
  font-size: 12px;
  min-height: 36px;
  padding: 7px 10px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 27px 12px;
  text-align: center;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-empty
  > .icon {
  width: 26px;
  height: 26px;
  color: #67847b;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-empty
  strong {
  font-size: 14px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-availability-empty
  p {
  max-width: 310px;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--surface-muted);
}

:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-overview {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  margin-bottom: 22px;
  overflow: hidden;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-total {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 30px;
  background: var(--brand-surface);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-total
  > span:first-child {
  font-size: 13px;
  color: var(--surface-muted);
  font-weight: 600;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-total
  > strong {
  display: block;
  margin: 9px 0 15px;
  font-size: 41px;
  line-height: 1.15;
  letter-spacing: -0.045em;
  color: var(--surface-ink);
  font-variant-numeric: tabular-nums;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-total
  > p {
  max-width: 310px;
  margin: 13px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-breakdown {
  padding: 25px 27px;
  border-left: 1px solid var(--surface-border);
  background: var(--brand-surface);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-breakdown
  h2 {
  margin: 0 0 18px;
  font-size: 15px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-breakdown
  dl {
  margin: 0;
  display: grid;
  gap: 13px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-breakdown
  dl
  > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  align-items: center;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-breakdown
  dt {
  font-size: 13px;
  color: var(--surface-ink);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-breakdown
  dd {
  margin: 0;
  color: var(--surface-ink);
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-breakdown
  dd.employee-fact-hint {
  grid-column: 1;
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-rate {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-border);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-rate
  > span {
  font-size: 12px;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-rate
  > strong {
  font-size: 14px;
  color: var(--surface-ink);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-rate
  > small {
  font-size: 12px;
  color: var(--surface-muted);
  grid-column: 1/-1;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-attention {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding: 17px 19px;
  border: 1px solid #e8c2ba;
  border-radius: 10px;
  background: #fff6f3;
  color: #943f36;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-attention
  > span
  .icon {
  width: 21px;
  height: 21px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-attention
  strong {
  font-size: 14px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-attention
  ul {
  margin: 8px 0 13px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-entries {
  overflow: hidden;
  padding: 0;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-earnings-filters {
  padding: 16px 22px !important;
  border-bottom: 1px solid var(--surface-border);
  background: var(--brand-surface) !important;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-earnings-filters
  > label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-earnings-filters
  input {
  min-width: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  min-height: 42px;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-earnings-filters
  > [role='status'] {
  font-size: 12px;
  color: var(--surface-muted);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-entries
  th {
  background: #f6f9fa;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-entries
  td:last-child {
  font-weight: 650;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-pay-line-total {
  color: var(--surface-ink);
  font-variant-numeric: tabular-nums;
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-earnings-empty[hidden] {
  display: none;
}
.form-dialog .availability-form [data-availability-hours].shift-time-panel {
  display: block;
  background: var(--brand-surface);
  border-color: var(--surface-border);
}
.form-dialog
  .availability-form
  [data-availability-hours].shift-time-panel
  > legend,
.form-dialog .availability-form [data-availability-mode='Temporary'] > legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--surface-ink);
}
.form-dialog .availability-form [data-availability-hours] .shift-time-pair {
  display: grid;
  gap: 20px;
}

@media (max-width: 1100px) {
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-layout {
    grid-template-columns: 1fr;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-summary-item {
    padding: 14px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-summary-item
    > span {
    gap: 6px;
    font-size: 12px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-summary-item
    > strong {
    font-size: 25px;
  }
}
@media (max-width: 850px) {
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-overview,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-pay-overview {
    grid-template-columns: 1fr 1fr;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-total,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-stats,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-pay-total,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-pay-breakdown {
    padding: 22px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-records
    .table-wrap
    td:last-child,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-pay-entries
    .table-wrap
    td:last-child {
    grid-column: auto;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-records
    .table-wrap
    tr,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-pay-entries
    .table-wrap
    tr {
    padding: 18px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-facts
    > div:first-child:last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 620px) {
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-overview,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-pay-overview {
    grid-template-columns: 1fr;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-stats,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-pay-breakdown {
    border-left: 0;
    border-top: 1px solid var(--surface-border);
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-total
    > strong {
    font-size: 34px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-pay-total
    > strong {
    font-size: 36px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-tabs {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-tabs
    button {
    justify-content: flex-start;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-tabs
    button
    > span {
    margin-left: auto;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-section-head {
    padding: 17px;
    flex-wrap: wrap;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-records
    > .list-controls,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-earnings-filters {
    padding: 14px 17px !important;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-summary {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-summary-item {
    min-height: 70px;
    padding: 12px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-summary-item
    > span {
    flex-wrap: wrap;
    gap: 6px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-summary-item
    > strong {
    font-size: 24px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-category {
    min-height: 44px;
    flex: 1 1 130px;
    justify-content: center;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-shortcut {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-head {
    padding: 15px;
    flex-wrap: wrap;
    gap: 10px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-body {
    padding: 16px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-facts,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-record[data-category='correction']
    .employee-request-facts,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-shifts,
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-notes {
    grid-template-columns: 1fr;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-facts {
    gap: 14px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-footer {
    padding: 13px 16px;
    flex-wrap: wrap;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-request-footer
    > div:first-child {
    flex-basis: 100%;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-guide {
    padding: 16px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-rules {
    padding: 14px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-rule {
    padding: 14px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-rule
    > header {
    flex-wrap: wrap;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-rule
    > header
    > .employee-status {
    margin-left: 42px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-rule
    > footer
    .btn {
    min-height: 44px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-pending-list {
    padding: 0 16px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-pending-list
    article {
    flex-wrap: wrap;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-pending-list
    article
    > div {
    flex-basis: calc(100% - 100px);
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-pending-list
    article
    > .btn {
    margin-left: auto;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-weekdays {
    gap: 4px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-availability-weekdays
    > span {
    font-size: 12px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-earnings-filters
    > label {
    flex-basis: 100%;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-earnings-filters
    > .searchable-filter {
    flex: 1 1 140px;
    max-width: none;
  }
}

/* Shared record progress keeps request and report stages visible at a glance. */
.employee-decision-history {
  margin-top: 16px;
  border-top: 1px solid var(--surface-border);
}
.employee-earnings-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 7px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--surface-ink);
  text-align: left;
}
.employee-earnings-record > small {
  grid-column: 1;
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 400;
}
.employee-earnings-record > .icon {
  grid-column: 2;
  grid-row: 1;
  width: 15px;
  height: 15px;
  color: var(--brand-readable-accent);
}
.employee-earnings-record:hover .employee-record-date {
  color: var(--brand-readable-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.employee-earnings-record:focus-visible {
  outline: 2px solid var(--brand-readable-accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.employee-decision-history > summary,
.employee-availability-history > summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--surface-ink);
}
.employee-decision-history > summary:focus-visible,
.employee-availability-history > summary:focus-visible {
  outline: 2px solid var(--brand-readable-accent);
  outline-offset: 3px;
}
.employee-decision-history .employee-record-progress {
  margin-bottom: 0 !important;
  border-bottom: 0;
}
.employee-availability-history {
  margin-top: 20px;
  padding: 0 20px;
}
.employee-availability-history > summary > .icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  vertical-align: middle;
  margin-right: 8px;
}
.employee-availability-history > summary > span {
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--surface-muted);
}
.shift-assignment-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.shift-assignment-mode > .check {
  flex: 1 1 190px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  color: var(--surface-ink);
  font-size: 13px;
  cursor: pointer;
}
.shift-assignment-mode > .check:has(:checked) {
  border-color: var(--brand-readable-accent);
  background: var(--brand-soft);
}
.shift-assignment-mode input[type='radio'] {
  flex: none;
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  accent-color: var(--brand-accent);
}
.shift-assignment-mode > .field-error {
  flex-basis: 100%;
}
.approved-employees .check > span {
  min-width: 0;
}
.approved-employees [data-eligibility-reason] {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 400;
}
.approved-employees .is-ineligible {
  background: var(--brand-canvas);
}
.scheduling-time-summary {
  margin-top: 12px;
  color: var(--surface-ink);
  font-variant-numeric: tabular-nums;
}
.employee-record-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none !important;
  margin: 0 0 20px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--surface-border);
}
.employee-swap-progress {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 620px) {
  .employee-swap-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }
  .employee-swap-progress > li:nth-child(2):after {
    display: none;
  }
}
.employee-record-progress > li {
  position: relative;
  min-width: 0;
  color: var(--surface-muted);
}
.employee-record-progress > li:not(:last-child):after {
  content: '';
  position: absolute;
  top: 14px;
  left: 39px;
  right: 0;
  height: 2px;
  background: var(--surface-border);
}
.employee-record-progress > li.is-done:not(:last-child):after {
  background: color-mix(
    in srgb,
    var(--brand-accent) 45%,
    var(--surface-border)
  );
}
.employee-progress-marker {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px dashed var(--surface-border);
  border-radius: 50%;
  background: var(--brand-surface);
  font-size: 12px;
  font-weight: 650;
  color: var(--surface-muted);
}
.employee-progress-marker > .icon {
  width: 15px;
  height: 15px;
}
.employee-record-progress > li > strong {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  color: inherit;
}
.employee-record-progress > li > small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--surface-muted);
}
.employee-record-progress > .is-done > .employee-progress-marker {
  border-style: solid;
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 35%,
    var(--surface-border)
  );
  background: color-mix(in srgb, var(--brand-accent) 9%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.employee-record-progress > .is-current {
  color: var(--brand-readable-accent);
}
.employee-record-progress > .is-current > .employee-progress-marker {
  border-style: solid;
  border-color: var(--brand-readable-accent);
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  box-shadow: 0 0 0 3px var(--brand-canvas);
}
.employee-record-progress > .result-denied > .employee-progress-marker {
  border-color: #deb2ad;
  background: #fbefee;
  color: #983e36;
}
.employee-record-progress > .result-denied > small {
  color: #983e36;
}
.employee-record-progress > .is-skipped > .employee-progress-marker,
.employee-record-progress > .result-cancelled > .employee-progress-marker {
  border-style: solid;
  border-color: var(--surface-border);
  background: var(--brand-canvas);
  color: var(--surface-muted);
}
@media (max-width: 620px) {
  .employee-record-progress {
    gap: 8px;
  }
  .employee-record-progress > li:not(:last-child):after {
    left: 36px;
  }
  .employee-record-progress > li > strong,
  .employee-record-progress > li > small {
    font-size: 12px;
  }
}

:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item.selected
  .icon {
  color: var(--brand-accent-ink);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-summary-item:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}

.employee-time-tabs .employee-time-tab-label {
  min-width: 0;
  line-height: 1.4;
}
.employee-time-tabs .employee-time-tab-count {
  flex: 0 0 auto;
  margin-left: 4px;
}
@media (max-width: 620px) {
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-tabs
    button {
    flex-direction: column;
    gap: 7px;
    padding: 10px 6px;
  }
  :is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
    .employee-time-tabs
    button
    > .icon {
    display: none;
  }
}

/* Source: workspace-team.css */
.team-workspace {
  --team-muted: var(--surface-muted, #61777b);
  --team-border: var(--surface-border, #dce7e8);
}
.team-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.team-overview-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 18px;
  border: 1px solid var(--team-border, #dce7e8);
  border-radius: 12px;
  background: var(--brand-surface, #fff);
}
.team-overview-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.team-overview-icon .icon {
  width: 19px;
  height: 19px;
}
.team-overview-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.team-overview-item strong {
  color: var(--surface-ink, #213c40);
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.team-overview-item > div > span {
  color: var(--surface-ink, #213c40);
  font-size: 13px;
  font-weight: 650;
}
.team-overview-item small {
  color: var(--team-muted, #61777b);
  font-size: 12px;
  line-height: 1.4;
}
.team-overview-item.is-attention .team-overview-icon {
  background: var(--status-warning-surface);
  color: var(--status-warning-ink);
}
.team-overview-item.is-absence .team-overview-icon {
  background: var(--status-danger-surface);
  color: var(--status-danger-ink);
}
.team-overview-item.is-correction .team-overview-icon {
  background: var(--type-time-pale);
  color: var(--type-time);
}
.team-overview-item.is-progress .team-overview-icon {
  background: var(--type-schedule-pale);
  color: var(--status-waiting);
}
.team-records {
  overflow: hidden;
}
.team-section-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--team-border, #dce7e8);
}
.team-section-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid
    color-mix(in srgb, var(--brand-accent) 17%, var(--surface-border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-accent) 5%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.team-section-symbol .icon {
  width: 18px;
  height: 18px;
}
.team-section-heading h2 {
  font-size: 16px;
  letter-spacing: -0.02em;
}
.team-section-heading p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--team-muted, #61777b);
}
.team-records table th {
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--brand-canvas);
  font-size: 12px;
  color: var(--surface-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
.team-records table td {
  padding-top: 17px;
  padding-bottom: 17px;
  vertical-align: middle;
}
.team-records table tr:last-child td {
  border-bottom: 0;
}
.team-records tbody tr:hover td {
  background: color-mix(in srgb, var(--brand-accent) 3%, var(--brand-surface));
}
.team-record-person {
  font-size: 14px;
  font-weight: 700;
  color: var(--surface-ink, #213c40);
  min-width: 180px;
}
.team-record-person small {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--team-muted, #61777b);
}
.team-records td small {
  display: block;
  margin-top: 5px;
  line-height: 1.4;
}
.team-number {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--surface-ink, #213c40);
}
.team-number span {
  font-size: 12px;
  font-weight: 500;
  color: var(--team-muted, #61777b);
}
.team-muted {
  color: var(--team-muted, #61777b);
  font-size: 12px;
}
.team-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid var(--surface-border);
  border-radius: 7px;
  background: var(--brand-canvas);
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
}
.team-status .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.team-status.is-complete {
  background: var(--status-approved-pale);
  border-color: color-mix(
    in srgb,
    var(--status-approved) 25%,
    var(--brand-surface)
  );
  color: var(--status-approved);
}
.team-status.is-progress {
  background: #edf3fa;
  border-color: #d1e1f1;
  color: #396b9b;
}
.team-status.is-attention {
  background: var(--status-pending-pale);
  border-color: color-mix(
    in srgb,
    var(--status-pending) 25%,
    var(--brand-surface)
  );
  color: var(--status-pending);
}
.team-status.is-declined {
  background: var(--status-denied-pale);
  border-color: color-mix(
    in srgb,
    var(--status-denied) 25%,
    var(--brand-surface)
  );
  color: var(--status-denied);
}
.team-timecards .table-wrap {
  overflow: auto;
}
.team-timecards table {
  min-width: 880px;
}
.team-timecards th:nth-child(2),
.team-timecards td:nth-child(2) {
  width: 35%;
  min-width: 240px;
}
.team-timecards td:nth-child(3) {
  min-width: 125px;
}
.team-timecards th:last-child,
.team-timecards td:last-child {
  min-width: 115px;
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--brand-surface);
}
.team-timecards .timecard-row-actions {
  gap: 7px;
  flex-direction: column;
  align-items: stretch;
}
.team-timecards td:nth-child(3) > small {
  color: var(--team-muted, #61777b);
  font-size: 12px;
}
.team-punch-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.team-punch-timeline li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 76px;
  padding: 0 15px 0 12px;
  border-left: 2px solid
    color-mix(in srgb, var(--brand-accent) 24%, var(--surface-border));
}
.team-punch-timeline li:before {
  content: '';
  position: absolute;
  top: 2px;
  left: -4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
}
.team-punch-timeline li > span {
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.team-punch-timeline time {
  font-size: 12px;
  font-weight: 650;
  color: var(--surface-ink, #213c40);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.team-punch-timeline li small {
  margin: 0;
  font-size: 12px;
  color: var(--team-muted, #61777b);
}
.team-punch-timeline .is-lunch:before {
  background: var(--surface-muted);
}
.team-punch-timeline .is-open {
  border-left-style: dashed;
}
.team-punch-timeline .is-open:before {
  background: var(--surface-muted);
}
.team-punch-timeline .is-open small {
  font-size: 12px;
  max-width: 76px;
  line-height: 1.3;
}
.team-people .table-wrap {
  overflow: auto;
}
.team-people table {
  min-width: 1110px;
}
.team-people td:last-child {
  min-width: 330px;
}
.team-people td:last-child .row {
  gap: 7px;
  flex-wrap: wrap;
}
.team-profile-action {
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 30%,
    var(--surface-border)
  ) !important;
  color: var(--brand-readable-accent) !important;
  background: color-mix(
    in srgb,
    var(--brand-accent) 4%,
    var(--brand-surface)
  ) !important;
}
.team-department-cell {
  position: relative;
  min-width: 170px;
  font-size: 13px;
  font-weight: 650;
}
.team-department-cell:before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--team-department-color, #7d9498);
}
.team-warehouse-line {
  display: flex !important;
  align-items: flex-start;
  gap: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--team-muted, #61777b);
}
.team-warehouse-line .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin-top: 1px;
}
.team-qualification-cell {
  min-width: 150px;
}
.team-qualification-cell .badge {
  margin: 2px 2px 2px 0;
  border: 1px solid var(--surface-border);
  background: var(--brand-canvas);
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 500;
}
.team-people .team-record-person small:last-child {
  color: var(--surface-muted);
}
.team-approval-switch {
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--brand-canvas);
  border-color: var(--surface-border);
}
.team-approval-switch button {
  min-height: 44px;
}
.team-approval-switch button > .icon {
  width: 16px;
  height: 16px;
}
.approval-controls .team-approval-order {
  flex: 0 0 180px;
  width: 180px;
  min-height: 42px;
}
.team-category-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 17px;
}
.team-category,
.team-request-kind {
  --category-tone: var(--type-other);
  --category-light: color-mix(
    in srgb,
    var(--brand-accent) 7%,
    var(--brand-surface)
  );
  --category-border: color-mix(
    in srgb,
    var(--brand-accent) 25%,
    var(--brand-surface)
  );
}
.team-category.is-transfer,
.team-request-kind.is-transfer {
  --category-tone: var(--type-transfer);
  --category-light: var(--type-transfer-pale);
  --category-border: color-mix(
    in srgb,
    var(--type-transfer) 24%,
    var(--brand-surface)
  );
}
.team-category.is-leave,
.team-request-kind.is-leave {
  --category-tone: var(--type-leave);
  --category-light: var(--type-leave-pale);
  --category-border: color-mix(
    in srgb,
    var(--type-leave) 24%,
    var(--brand-surface)
  );
}
.team-category.is-availability,
.team-request-kind.is-availability {
  --category-tone: var(--type-availability);
  --category-light: var(--type-availability-pale);
  --category-border: color-mix(
    in srgb,
    var(--type-availability) 24%,
    var(--brand-surface)
  );
}
.team-category.is-swap,
.team-request-kind.is-swap {
  --category-tone: var(--type-swap);
  --category-light: var(--type-swap-pale);
  --category-border: color-mix(
    in srgb,
    var(--type-swap) 24%,
    var(--brand-surface)
  );
}
.team-category.is-drop,
.team-request-kind.is-drop {
  --category-tone: var(--type-drop);
  --category-light: var(--type-drop-pale);
  --category-border: color-mix(
    in srgb,
    var(--type-drop) 24%,
    var(--brand-surface)
  );
}
.team-category.is-correction,
.team-request-kind.is-correction {
  --category-tone: var(--type-correction);
  --category-light: var(--type-correction-pale);
  --category-border: color-mix(
    in srgb,
    var(--type-correction) 24%,
    var(--brand-surface)
  );
}
.team-category {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 7px 11px;
  border: 1px solid var(--category-border);
  border-radius: 9px;
  background: var(--category-light);
  color: var(--category-tone);
  font-size: 12px;
  font-weight: 650;
}
.team-category .icon {
  width: 15px;
  height: 15px;
}
.team-category > span {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 5px;
  background: #fff;
  color: var(--category-tone);
  font-size: 12px;
}
.team-category.selected {
  border-color: var(--category-tone);
  background: var(--category-tone);
  color: #fff;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--brand-ink) 8.2%, transparent);
}
.team-category.selected > span {
  background: #ffffff28;
  color: #fff;
}
.team-category:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.team-request-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--category-border);
  border-radius: 8px;
  background: var(--category-light);
  color: var(--category-tone);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.team-request-kind .icon {
  width: 15px;
  height: 15px;
}
.team-approvals table {
  min-width: 930px;
}
.team-approvals td:first-child {
  min-width: 170px;
  font-weight: 650;
}
.team-approvals td:nth-child(3) {
  max-width: 380px;
  min-width: 245px;
  line-height: 1.55;
}
.team-request-summary {
  font-size: 13px;
  color: var(--surface-ink, #213c40);
}
.team-request-reason {
  padding-left: 9px;
  border-left: 2px solid var(--surface-border);
  color: var(--team-muted, #61777b);
  font-size: 12px;
}
.team-decision-note {
  color: var(--surface-muted);
  font-size: 12px;
}
.team-result-count {
  margin-left: auto;
  color: var(--team-muted, #61777b);
  font-size: 12px;
  white-space: nowrap;
}
.team-approvals td:last-child .row {
  gap: 7px;
  flex-wrap: nowrap;
}
.team-workspace[data-view='reports'] .segmented {
  gap: 5px;
  padding: 5px;
  background: var(--brand-canvas);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
}
.team-workspace[data-view='reports'] .segmented button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 8px 13px;
  border-radius: 7px;
  color: var(--surface-muted);
  font-weight: 650;
}
.team-workspace[data-view='reports'] .segmented button .icon {
  width: 16px;
  height: 16px;
}
.team-workspace[data-view='reports'] .segmented button.active {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-accent) 10%, transparent);
}
.team-report-table .table-wrap {
  overflow: auto;
}
.team-report-table table {
  min-width: 570px;
}
.team-report-table .team-record-person {
  min-width: 190px;
}
.team-event-count {
  display: inline-grid;
  place-items: center;
  min-width: 35px;
  min-height: 30px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
button.team-event-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid currentColor;
  cursor: pointer;
}
button.team-event-count .icon {
  width: 14px;
  height: 14px;
}
button.team-event-count:hover {
  filter: brightness(0.96);
}
button.team-event-count:focus-visible {
  outline: 2px solid var(--brand-readable-accent);
  outline-offset: 3px;
}
.team-report-link {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.team-event-count.is-zero {
  color: var(--surface-muted);
  background: var(--brand-canvas);
  font-weight: 500;
}
.team-event-count.has-events.is-late {
  color: #9b682d;
  background: #fff4e5;
}
.team-event-count.has-events.is-absence {
  color: #9e5444;
  background: #fff0eb;
}
.team-event-count.has-events.is-correction {
  color: #366b9d;
  background: #edf3fb;
}
.team-report-chart {
  margin-top: 20px;
  border-top: 1px solid var(--surface-border);
}
.team-report-chart h2 {
  font-size: 16px;
}
.team-report-chart .bar {
  background: var(--brand-accent);
}
.team-report-chart .bar.red {
  background: #a46d39;
}
.team-report-chart .note {
  padding-top: 10px;
  line-height: 1.5;
}
.team-attendance-note {
  max-width: 330px;
  white-space: normal;
  color: var(--team-muted, #61777b);
}
.team-qualifications table {
  min-width: 690px;
}
.team-qualifications td:first-child {
  font-size: 14px;
  font-weight: 650;
}
.team-qualifications td:first-child > .icon {
  width: 17px;
  height: 17px;
  margin-right: 8px;
  color: var(--brand-readable-accent);
  vertical-align: middle;
}
.team-qualification-name {
  vertical-align: middle;
}
.team-qualifications td:nth-child(2),
.team-qualifications td:nth-child(3) {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.team-qualifications td small {
  font-size: 12px;
  font-weight: 400;
  color: var(--team-muted, #61777b);
}
.team-policy-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.team-policy-section {
  min-width: 0;
  overflow: hidden;
}
.team-policy-section > header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 19px 19px 16px;
  border-bottom: 1px solid var(--team-border, #dce7e8);
  background: var(--brand-canvas);
}
.team-policy-section > header > .icon {
  width: 20px;
  height: 20px;
  color: var(--brand-readable-accent);
  flex: 0 0 20px;
  margin-top: 1px;
}
.team-policy-section h2,
.team-policy-save h2 {
  font-size: 16px;
  letter-spacing: -0.02em;
}
.team-policy-section header p,
.team-policy-save p {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--team-muted, #61777b);
}
.team-policy-fields {
  display: grid;
  align-content: start;
  gap: 19px;
  padding: 19px;
}
.team-policy-fields > .field {
  min-width: 0;
}
.team-policy-fields .field > span {
  font-size: 12px;
  color: var(--surface-muted);
  font-weight: 650;
}
.team-policy-fields .field input,
.team-policy-fields .field select {
  width: 100%;
  min-width: 0;
}
.team-policy-help {
  margin: 0;
  padding-top: 3px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--team-muted, #61777b);
}
.team-policy-save {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(190px, 250px) auto;
  align-items: center;
  gap: 24px;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid var(--surface-border);
}
.team-policy-save > .field {
  min-width: 0;
}
.team-policy-save > .btn {
  align-self: end;
}
.team-policy-save small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #8f652c;
}
.team-policy-history table {
  min-width: 660px;
}
.team-policy-history td {
  font-size: 13px;
}
.team-policy-history td:first-child {
  font-weight: 650;
}
.team-pay-settings .form-error:not(.hidden) {
  margin-bottom: 16px;
}
.team-pay-settings .field .date-field-trigger {
  width: 100%;
  justify-content: space-between;
}
.team-payroll table {
  min-width: 815px;
}
.team-payroll .team-pay-number {
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.team-payroll td:nth-child(5) {
  font-size: 17px;
  font-weight: 750;
}
.team-payroll td:nth-child(6) {
  min-width: 165px;
}
.team-pay-rate {
  color: var(--team-muted, #61777b) !important;
  font-weight: 600 !important;
}
.team-pay-breakdown {
  border-color: var(--surface-border);
}
.team-pay-breakdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--surface-ink);
  font-weight: 650;
  cursor: pointer;
}
.team-pay-breakdown summary:after {
  content: 'View details';
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-readable-accent);
}
.team-pay-breakdown[open] summary:after {
  content: 'Hide details';
}
.team-workspace[data-view='payroll'] .payroll-explainer {
  margin-bottom: 15px;
  font-size: 13px;
  color: var(--team-muted, #61777b);
}
.team-workspace[data-view='payroll'] .payroll-readiness,
.team-workspace[data-view='manager-pay'] .payroll-readiness {
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 25%,
    var(--surface-border)
  );
  background: color-mix(in srgb, var(--brand-accent) 3%, var(--brand-surface));
}
.team-workspace .payroll-readiness.has-errors {
  border-color: #e7d2b1;
  background: #fffcf7;
}
.team-workspace[data-view='requests'] .approval-controls {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.team-workspace[data-view='requests'] .approval-controls > label {
  flex: 1 1 260px;
  min-width: 0;
  width: auto;
  max-width: none;
}
.team-workspace[data-view='requests'] .approval-controls > label input {
  width: 100%;
  min-width: 0;
}
.team-workspace[data-view='requests']
  .approval-controls
  > [data-team-approval-order]
  + .searchable-filter {
  flex: 0 0 190px;
  width: 190px;
  max-width: 190px;
  min-height: 42px;
}
.team-workspace[data-view='requests'] .approval-controls > .team-result-count {
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  text-align: right;
  line-height: 1.5;
}
.team-workspace .team-report-table td.is-positive,
.team-workspace .team-report-table td.is-negative {
  color: var(--surface-ink, #213c40) !important;
}
.team-workspace .team-payroll .team-pay-rate {
  color: var(--team-muted, #61777b) !important;
}
@media (max-width: 1200px) {
  .team-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .team-policy-section:last-child {
    grid-column: 1/-1;
  }
  .team-policy-section:last-child .team-policy-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .team-policy-section:last-child .team-policy-help {
    grid-column: 1/-1;
  }
  .team-overview {
    gap: 10px;
  }
  .team-overview-item {
    padding: 15px;
  }
}
@media (max-width: 850px) {
  .team-records table {
    min-width: 0;
  }
  .team-records .table-wrap {
    overflow: visible;
  }
  .team-records table td {
    width: auto !important;
    min-width: 0 !important;
  }
  .team-timecards td:nth-child(2) {
    grid-column: 1/-1;
  }
  .team-timecards .team-punch-timeline {
    gap: 10px 0;
  }
  .team-timecards .timecard-row-actions {
    flex-wrap: wrap;
  }
  .team-records .team-record-person {
    min-width: 0;
  }
  .team-payroll .team-pay-number {
    text-align: left;
  }
  .team-approvals td:nth-child(3) {
    max-width: none;
  }
  .team-records table td:before {
    margin-bottom: 7px;
  }
  .team-records table tr {
    gap: 17px;
    background: var(--brand-surface, #fff);
  }
}
@media (max-width: 800px) {
  .team-policy-grid {
    grid-template-columns: 1fr;
  }
  .team-policy-section:last-child {
    grid-column: auto;
  }
  .team-policy-save {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .team-policy-save > div {
    grid-column: 1/-1;
  }
  .team-policy-save > .btn {
    align-self: center;
  }
  .team-policy-section:last-child .team-policy-fields {
    grid-template-columns: 1fr;
  }
  .team-result-count {
    width: 100%;
    margin-left: 0;
  }
  .team-workspace .approval-controls {
    flex-wrap: wrap;
  }
  .team-workspace .approval-controls label {
    min-width: 220px;
  }
  .team-workspace[data-view='reports'] .segmented {
    flex-wrap: wrap;
  }
  .team-overview-item strong {
    font-size: 20px;
  }
}
@media (max-width: 600px) {
  .team-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
  }
  .team-overview-item {
    gap: 8px;
    padding: 13px 11px;
  }
  .team-overview-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 8px;
  }
  .team-overview-icon .icon {
    width: 16px;
    height: 16px;
  }
  .team-overview-item strong {
    font-size: 18px;
  }
  .team-overview-item > div > span {
    font-size: 12px;
  }
  .team-overview-item small {
    font-size: 12px;
  }
  .team-overview:has(> .team-overview-item:nth-child(3):last-child)
    > .team-overview-item:last-child {
    grid-column: 1/-1;
  }
  .team-section-heading {
    padding: 15px;
  }
  .team-section-heading p {
    font-size: 12px;
  }
  .team-records td {
    min-width: 0 !important;
  }
  .team-records table {
    min-width: 0;
  }
  .team-records .table-wrap {
    overflow: visible;
  }
  .team-records .team-record-person {
    font-size: 15px;
  }
  .team-timecards .team-punch-timeline {
    gap: 10px 0;
  }
  .team-timecards .timecard-row-actions {
    flex-wrap: wrap;
  }
  .team-status {
    font-size: 12px;
  }
  .team-approval-switch {
    width: 100%;
  }
  .team-approval-switch button {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
  }
  .team-category {
    min-height: 44px;
    flex: 1 1 135px;
    justify-content: flex-start;
  }
  .team-category > span {
    margin-left: auto;
  }
  .team-workspace .approval-controls {
    display: grid;
    grid-template-columns: 1fr;
  }
  .team-workspace .approval-controls label,
  .team-workspace .approval-controls .searchable-filter {
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  .team-approvals td:nth-child(3) {
    max-width: none;
  }
  .team-policy-save {
    grid-template-columns: 1fr;
    padding: 17px;
  }
  .team-policy-save > div {
    grid-column: auto;
  }
  .team-policy-save > .btn {
    width: 100%;
    justify-content: center;
  }
  .team-policy-fields {
    padding: 17px;
  }
  .team-pay-breakdown summary {
    align-items: flex-start;
  }
  .team-pay-breakdown summary:after {
    flex-shrink: 0;
  }
  .team-payroll .team-pay-number {
    text-align: left;
  }
  .team-qualifications td:first-child > .icon {
    margin-right: 5px;
  }
  .team-workspace[data-view='reports'] .segmented {
    width: 100%;
  }
  .team-workspace[data-view='reports'] .segmented button {
    flex: 1;
    justify-content: center;
    padding: 7px 10px;
  }
}
@media (max-width: 600px) {
  .team-workspace[data-view='requests'] .approval-controls > label {
    flex-basis: 100%;
  }
  .team-workspace[data-view='requests']
    .approval-controls
    > [data-team-approval-order]
    + .searchable-filter {
    flex: 0 1 190px;
    max-width: 190px;
    min-height: 44px;
  }
  .team-workspace[data-view='requests']
    .approval-controls
    > .team-result-count {
    flex: 1 1 80px;
    width: auto;
    align-self: center;
  }
}

.hr-verification-list {
  display: grid;
  gap: 12px;
}
.hr-verification-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border, #d7e6e0);
  border-radius: 12px;
  background: var(--brand-surface, #fff);
  cursor: pointer;
}
.hr-verification-item input {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: none;
  accent-color: var(--brand-accent, #0f766e);
}
.hr-verification-item span {
  display: grid;
  gap: 6px;
}
.hr-verification-item small {
  color: var(--text-muted, #536f73);
  font-size: 12px;
}
.hr-verification-item:has(input:checked) {
  border-color: var(--brand-accent, #0f766e);
}

/* Source: workspace-finish.css */
/* Category color explains the record; status color explains the next action. */
.finish-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-ink) 2.4%, transparent);
}
.finish-search {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 260px;
  min-width: 190px;
  height: 44px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--brand-surface);
  color: var(--brand-readable-accent);
}
.finish-search:focus-within {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 13%, transparent);
}
.finish-search > input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0 !important;
  background: transparent;
  font-size: 14px;
  outline: 0;
  box-shadow: none !important;
  color: var(--surface-ink);
}
.finish-search > .icon {
  width: 17px;
  height: 17px;
  flex: none;
}
.finish-filter-select {
  display: grid;
  min-width: 0;
  flex: 0 1 200px;
  align-items: start;
  gap: 8px;
  color: var(--surface-muted);
  font-size: 12px;
}
.finish-filter-select > select,
.finish-filter-select > .searchable-filter {
  height: 44px;
  min-height: 44px;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  font-size: 13px !important;
}
.finish-filter-bar > select,
.finish-filter-bar > .searchable-filter {
  flex: 0 1 190px;
  width: 190px;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  font-size: 13px;
}
.finish-filter-select > span {
  white-space: nowrap;
}
.finish-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.6;
}
.workplace-report-hub {
  min-width: 0;
  width: 100%;
}
.workplace-report-stream {
  display: grid;
  gap: 14px;
}
.workplace-report-card {
  --report-tone: var(--type-other);
  --report-pale: var(--type-other-pale);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--report-tone);
  border-radius: 12px;
  background: var(--brand-surface);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-ink) 3.5%, transparent);
  transition:
    box-shadow 0.18s,
    border-color 0.18s;
}
.workplace-report-card:hover {
  box-shadow: 0 7px 20px color-mix(in srgb, var(--brand-ink) 6.3%, transparent);
  border-color: color-mix(
    in srgb,
    var(--report-tone) 32%,
    var(--brand-surface)
  );
}
[data-kind='safety'] {
  --report-tone: var(--type-safety);
  --report-pale: var(--type-safety-pale);
}
[data-kind='equipment'] {
  --report-tone: var(--type-equipment);
  --report-pale: var(--type-equipment-pale);
}
[data-kind='behavior'] {
  --report-tone: var(--type-behavior);
  --report-pale: var(--type-behavior-pale);
}
[data-kind='schedule'] {
  --report-tone: var(--type-schedule);
  --report-pale: var(--type-schedule-pale);
}
[data-kind='other'] {
  --report-tone: var(--type-other);
  --report-pale: var(--type-other-pale);
}
[data-kind='pay'] {
  --report-tone: var(--type-pay);
  --report-pale: var(--type-pay-pale);
}
.workplace-report-symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--report-pale);
  color: var(--report-tone);
  flex: none;
}
.workplace-report-symbol > .icon {
  width: 21px;
  height: 21px;
}
.workplace-report-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}
.workplace-report-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--surface-muted);
  margin-bottom: 10px;
}
.workplace-report-category {
  color: var(--report-tone);
  font-weight: 700;
}
.workplace-report-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
  background: #edf3f4;
  color: #49656b;
}
.workplace-report-status > .icon {
  width: 15px;
  height: 15px;
}
.workplace-report-status.is-reviewing {
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.workplace-report-status.is-resolved {
  background: var(--status-approved-pale);
  color: var(--status-approved);
}
.workplace-report-status.is-waiting {
  background: var(--status-pending-pale);
  color: var(--status-pending);
}
.workplace-report-card h2 {
  font-size: 17px;
  margin: 0 0 7px;
  line-height: 1.5;
  color: var(--surface-ink);
  overflow-wrap: anywhere;
}
.workplace-report-person {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--surface-muted);
  margin: 0 0 10px !important;
}
.workplace-report-person strong {
  font-size: 14px;
  color: var(--surface-ink);
}
.workplace-report-state-row {
  margin: 14px 0;
}
.workplace-report-person .icon {
  width: 15px;
  height: 15px;
}
.workplace-report-excerpt {
  font-size: 14px;
  line-height: 1.65;
  color: var(--surface-ink);
  margin: 0 0 16px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.workplace-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 13px;
  border-top: 1px solid var(--surface-border);
}
.workplace-report-footer > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--surface-muted);
}
.workplace-report-footer > span > .record-reference {
  flex-basis: 100%;
}
.workplace-report-footer > span .icon {
  width: 15px;
  height: 15px;
}
.workplace-report-response {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px 0 0;
  margin-top: 14px;
  border-top: 1px solid var(--surface-border);
  background: transparent;
  font-size: 13px;
  line-height: 1.65;
}
.workplace-report-response > .icon {
  width: 17px;
  flex: none;
  color: var(--brand-readable-accent);
}
.workplace-report-response > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.workplace-report-response strong {
  font-size: 12px;
}
.workplace-report-response p {
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.dialog .workplace-report-card {
  box-shadow: none;
}
.dialog .workplace-report-excerpt {
  display: block;
  -webkit-line-clamp: unset;
}
.workplace-report-categories {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.workplace-report-categories > button {
  display: flex;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid
    color-mix(in srgb, var(--report-tone, #547277) 25%, var(--brand-surface));
  border-radius: 8px;
  background: var(--report-pale, var(--brand-surface));
  color: var(--report-tone, var(--surface-muted));
  font-size: 12px;
  font-weight: 650;
  transition:
    background 0.16s,
    border-color 0.16s;
}
.workplace-report-categories > button > .icon {
  width: 16px;
  height: 16px;
}
.workplace-report-categories > button > span {
  padding: 2px 5px;
  border-radius: 5px;
  background: #ffffff85;
  font-variant-numeric: tabular-nums;
}
.workplace-report-categories > button:hover {
  border-color: var(--report-tone, var(--brand-accent));
}
.workplace-report-categories > button.selected {
  background: var(--report-tone, var(--brand-accent));
  color: #fff;
  border-color: var(--report-tone, var(--brand-accent));
}
.workplace-report-categories > button.selected > span {
  background: #ffffff25;
  color: #fff;
}
.workspace .notification-filter-bar {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(150px, 220px));
  align-items: end;
  gap: 12px;
  padding: 14px;
}
.workspace .notification-filter-bar .notification-search {
  height: 44px;
}
.workspace .notification-select {
  display: grid;
  min-width: 0;
  align-items: start;
  gap: 8px;
}
.workspace .notification-select.notification-category-select {
  display: none;
}
.workspace .notification-select > span {
  white-space: nowrap;
}
.workspace .notification-select > select,
.workspace .notification-select > .searchable-filter {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  font-size: 13px !important;
}
.notification-toolbar-actions {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--surface-border);
  padding-top: 12px;
}
.notification-toolbar-actions .btn {
  min-height: 40px;
  margin: 0;
}
.workspace .page-head:has(+ .notification-hub) {
  align-items: flex-start;
}
.finish-coverage-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.finish-coverage-explainer {
  display: flex;
  align-items: center;
  gap: 6px;
}
.finish-coverage-explainer .icon {
  width: 15px;
  height: 15px;
}
.coverage-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.coverage-record-grid > .structured-empty {
  grid-column: 1/-1;
}
.coverage-record {
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-ink) 3.1%, transparent);
  min-width: 0;
}
.coverage-record-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.coverage-record-symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-canvas);
  color: var(--surface-muted);
  flex: none;
}
.coverage-record-symbol .icon {
  width: 20px;
  height: 20px;
}
.coverage-record-heading > div {
  flex: 1;
  min-width: 0;
}
.coverage-record-department {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.5;
}
.coverage-record-department > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--area-color);
}
.coverage-record-heading h2 {
  font-size: 17px;
  line-height: 1.4;
  margin: 5px 0 0;
}
.coverage-record-warehouse {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: 6px;
  color: var(--surface-muted);
}
.coverage-record-warehouse .icon {
  width: 14px;
  height: 14px;
}
.coverage-record-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.coverage-record-facts > div {
  display: grid;
  gap: 7px;
  align-content: start;
}
.coverage-record-facts > div > span {
  font-size: 12px;
  color: var(--surface-muted);
}
.coverage-record-facts > div > strong {
  font-size: 14px;
  line-height: 1.5;
}
.coverage-record-facts time {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.coverage-record-heading > .coverage-gap-badge {
  font-size: 15px;
  font-weight: 700;
}
.coverage-record-demand > strong {
  font-size: 23px !important;
}
.coverage-record-demand strong > small {
  font-size: 13px;
  font-weight: 500;
  color: var(--surface-muted);
}
.coverage-capacity {
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--brand-canvas);
  margin-top: 3px;
}
.coverage-capacity > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #b7791f;
}
.is-covered .coverage-capacity > span {
  background: #0f766e;
}
.coverage-record-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.coverage-schedule-checks {
  margin-top: 20px;
}
.coverage-check-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--surface-border);
  font-size: 13px;
  line-height: 1.6;
}
.coverage-check-line > .icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: #9a6421;
  margin-top: 2px;
}
.finish-appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.finish-brand-preview,
.finish-login-preview {
  padding: 24px;
}
.finish-section-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--surface-muted);
  display: block;
  margin-bottom: 20px;
}
.finish-brand-preview > div:first-of-type {
  display: flex;
  align-items: center;
  gap: 12px;
}
.finish-brand-preview img,
.finish-brand-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: none;
}
.finish-brand-icon {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-canvas);
  color: var(--brand-readable-accent);
}
.finish-brand-preview h2,
.finish-login-preview h2 {
  font-size: 20px;
  line-height: 1.5;
}
.finish-brand-preview p,
.finish-login-preview p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--surface-muted);
  margin: 12px 0;
}
.finish-color-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.finish-color-list > div {
  display: flex;
  gap: 10px;
  align-items: center;
}
.finish-color-list > div > span {
  width: 22px;
  height: 22px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  flex: none;
}
.finish-color-list strong {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}
.finish-color-list code {
  font-size: 12px;
  color: var(--surface-muted);
}
.finish-login-preview h3 {
  font-size: 17px;
  line-height: 1.5;
  margin-top: 20px;
}
.finish-company-address {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  margin: 20px 0;
  color: var(--brand-readable-accent);
}
.finish-category-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-top: 1px solid var(--surface-border);
  font-size: 14px;
}
.finish-category-row .workplace-report-symbol {
  width: 36px;
  height: 36px;
}
.finish-category-row .icon {
  width: 18px;
  height: 18px;
}
.workspace .finish-manager-clock {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
  margin-bottom: 22px;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-ink) 3.1%, transparent);
}
.finish-manager-clock .label {
  display: none;
}
.finish-clock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--brand-canvas);
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 10px;
}
.finish-clock-status .icon {
  width: 14px;
  height: 14px;
}
.finish-clock-status.is-active {
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.finish-manager-clock h2 {
  font-size: 18px;
}
.finish-manager-clock p {
  font-size: 13px;
  color: var(--surface-muted);
  margin-top: 7px;
}
.finish-manager-clock > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px;
}
.finish-manager-clock .btn {
  justify-content: center;
  min-height: 40px;
}
.dialog .requirement-window,
.dialog .availability-hours,
.dialog [data-availability-hours] {
  min-width: 0;
}
.dialog .requirement-window .range-pair,
.dialog [data-availability-hours] {
  gap: 16px;
}
.dialog .requirement-window .field,
.dialog [data-availability-hours] > .field {
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  background: var(--brand-canvas);
}
.dialog .requirement-window .field:last-child,
.dialog [data-availability-hours] > .field:last-child {
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 28%,
    var(--brand-surface)
  );
  background: color-mix(in srgb, var(--brand-accent) 5%, var(--brand-surface));
}
@media (max-width: 1100px) {
  .coverage-record-grid {
    grid-template-columns: 1fr;
  }
  .workspace .finish-manager-clock {
    grid-template-columns: 1fr;
  }
  .finish-manager-clock > .row {
    max-width: 520px;
  }
  .workspace .notification-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workspace .notification-select > select,
  .workspace .notification-select > .searchable-filter {
    width: 100%;
  }
  .workspace .notification-filter-bar .notification-search {
    grid-column: 1/-1;
  }
  .workspace .notification-select {
    display: grid;
    gap: 5px;
  }
  .workspace .notification-filter-bar {
    align-items: end;
  }
}
@media (max-width: 750px) {
  .finish-filter-bar {
    padding: 12px;
    gap: 10px;
  }
  .finish-filter-bar > .finish-search {
    flex-basis: 100%;
  }
  .finish-filter-select {
    flex: 1 1 150px;
    display: grid;
    gap: 6px;
  }
  .finish-filter-select > select,
  .finish-filter-select > .searchable-filter {
    width: 100%;
    max-width: none;
  }
  .workspace .notification-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .workspace .notification-search {
    grid-column: 1/-1;
  }
  .workspace .notification-select > select,
  .workspace .notification-select > .searchable-filter {
    width: 100%;
  }
  .notification-toolbar-actions {
    gap: 8px;
  }
  .workplace-report-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
  }
  .workplace-report-symbol {
    width: 36px;
    height: 36px;
  }
  .workplace-report-footer {
    align-items: flex-start;
  }
  .workplace-report-footer .record-action-row {
    flex-wrap: wrap;
  }
  .coverage-record {
    padding: 16px;
  }
  .coverage-record-heading {
    flex-wrap: wrap;
  }
  .coverage-record-heading > .coverage-gap-badge {
    margin-left: 50px;
  }
  .coverage-record-facts {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 16px 0;
  }
  .finish-appearance-grid {
    grid-template-columns: 1fr;
  }
  .finish-result-row {
    align-items: flex-start;
  }
  .finish-manager-clock > .row {
    max-width: none;
    width: 100%;
  }
  .finish-manager-clock .btn {
    min-height: 44px;
  }
}

.finish-clock-timer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.finish-clock-timer > span {
  font-size: 12px;
  color: var(--surface-muted);
}
.finish-clock-timer > strong {
  font-size: 22px;
  font-weight: 650;
}
.dialog .workplace-report-footer .record-action-row {
  display: none;
}
.dialog .requirement-window.shift-time-panel {
  background: var(--brand-surface);
  padding: 16px;
}
.dialog .requirement-window .shift-time-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dialog .requirement-window .shift-time-pair .field {
  min-width: 0;
}
@media (max-width: 650px) {
  .dialog .requirement-window .shift-time-pair {
    grid-template-columns: 1fr;
  }
}

.finish-open-shift-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--surface-ink);
}
.finish-open-shift-note > .icon {
  width: 20px;
  height: 20px;
  color: var(--brand-readable-accent);
  flex: none;
}
.finish-open-shift-note strong {
  font-size: 14px;
}
.finish-open-shift-note p {
  font-size: 13px;
  line-height: 1.6;
  margin: 4px 0 0;
  color: var(--surface-muted);
}

.team-payroll .finish-payroll-filters {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--surface-border);
  border-radius: 0;
  box-shadow: none;
}
.finish-payroll-result {
  font-size: 12px;
  color: var(--surface-muted);
  flex-basis: 100%;
}
.finish-payroll-empty {
  padding: 24px;
}
.finish-payroll-empty > strong {
  font-size: 15px;
}
.finish-payroll-empty > p {
  font-size: 13px;
  margin: 8px 0 14px;
}

/* Subtle category gradients carry the same meaning as their labels and icons. */
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  [data-category='leave'] {
  --employee-category: var(--type-leave);
  --employee-category-pale: var(--type-leave-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  [data-category='availability'] {
  --employee-category: var(--type-availability);
  --employee-category-pale: var(--type-availability-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  [data-category='swap'] {
  --employee-category: var(--type-swap);
  --employee-category-pale: var(--type-swap-pale);
}
:is(.workspace[data-role='employee'], .workspace[data-view='my-work'])
  .employee-request-record {
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-ink) 3.5%, transparent);
}
[data-kind='management'] {
  --report-tone: var(--type-management);
  --report-pale: var(--type-management-pale);
}
[data-kind='time'] {
  --report-tone: var(--type-time);
  --report-pale: var(--type-time-pale);
}
.finish-category-row {
  gap: 12px;
}
.finish-category-row > strong {
  flex: 1;
  min-width: 0;
}
.finish-category-row > .btn {
  margin-left: auto;
}
.report-icon-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 8px 0 0;
}
.report-icon-picker > legend {
  font-size: 13px;
  font-weight: 650;
  padding: 0 0 12px;
}
.report-icon-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 95px;
  padding: 12px 6px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface);
  cursor: pointer;
  transition:
    border-color 0.16s,
    background 0.16s;
}
.report-icon-option > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  inset: 0;
}
.report-icon-option > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--brand-canvas);
  color: var(--surface-muted);
}
.report-icon-option .icon {
  width: 21px;
  height: 21px;
}
.report-icon-option > strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--surface-ink);
}
.report-icon-option:hover {
  border-color: var(--brand-accent);
  background: var(--brand-canvas);
}
.report-icon-option:has(:checked) {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-surface));
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}
.report-icon-option:has(:checked) > span {
  background: var(--brand-accent);
  color: var(--brand-accent-ink, #fff);
}
.report-icon-option:has(:focus-visible) {
  outline: 2px solid var(--brand-readable-accent);
  outline-offset: 3px;
}
@media (max-width: 620px) {
  .report-icon-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .finish-category-row {
    flex-wrap: wrap;
  }
  .finish-category-row > .btn {
    flex: none;
  }
}

.dialog .swap-picker {
  min-width: 0;
  width: 100%;
}
.dialog .swap-options {
  min-width: 0;
}
.dialog .swap-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  gap: 12px;
  min-width: 0;
  width: 100%;
  padding: 15px;
  background: var(--brand-surface);
}
.dialog .swap-option > input[type='radio'] {
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--brand-accent);
}
.dialog .swap-option-body {
  min-width: 0;
  display: grid;
  gap: 6px;
  width: auto;
}
.dialog .swap-option-body strong {
  font-size: 13px;
}
.dialog .swap-option-body b {
  font-size: 18px;
  line-height: 1.4;
}
.dialog .swap-option-body small {
  font-size: 13px;
  line-height: 1.5;
}
.dialog .swap-option-check {
  width: 20px;
}
.dialog .swap-option-check .icon {
  width: 19px;
  height: 19px;
}
.dialog .swap-option:has(:checked) {
  background: var(--record-gradient);
  border-color: var(--brand-accent);
}
.dialog .shift-comparison {
  gap: 14px;
}
.dialog .shift-comparison > div {
  min-width: 0;
}
.dialog .shift-comparison .mono {
  font-size: 16px;
  line-height: 1.5;
  color: var(--surface-ink);
  font-weight: 600;
}
.dialog .shift-comparison strong {
  font-size: 14px;
}
.dialog .shift-comparison p {
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 620px) {
  .dialog .shift-comparison {
    grid-template-columns: 1fr;
  }
  .dialog .swap-option-body b {
    font-size: 16px;
  }
}

.workplace-report-excerpt.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.workplace-report-copy > .employee-record-progress {
  margin-top: 17px !important;
}
/* Record identity stays in the labeled icon; the record surface stays neutral. */
.employee-request-record {
  --record-tone: var(--employee-category, var(--brand-accent));
}
.notification-card {
  --record-tone: var(--notice-tone, var(--brand-accent));
}
.workplace-report-card {
  --record-tone: var(--report-tone, var(--type-other));
}
.coverage-record.has-gap {
  --record-tone: var(--status-pending);
}
.coverage-record.is-covered {
  --record-tone: var(--status-approved);
}
.warehouse-panel {
  --record-tone: var(--warehouse-color, var(--brand-accent));
}
.layout
  .workspace
  :is(
    .employee-request-record,
    .warning-record,
    .notification-card,
    .workplace-report-card,
    .coverage-record,
    .warehouse-panel
  ) {
  border: 1px solid var(--surface-border);
  border-radius: var(--card-radius, 12px);
  background: var(--record-gradient);
  box-shadow: var(--shadow-card);
  color: var(--surface-ink);
}
.layout .workspace :is(.employee-request-head, .warehouse-panel-head) {
  background: transparent;
  border-top: 0;
}
.layout .workspace .notification-card:hover,
.layout .workspace .workplace-report-card:hover {
  border-color: var(--surface-border);
  box-shadow: var(--shadow-card);
  transform: none;
}
.layout .workspace .notification-card.is-read {
  border-color: var(--surface-border);
}
.notification-card.is-read :is(.notification-title, h3) {
  font-weight: 600;
}
.layout .workspace :is(.notification-body, .workplace-report-excerpt) {
  color: var(--surface-muted);
}
.layout .workspace :is(.notification-title, .workplace-report-copy h2) {
  color: var(--surface-ink);
}
.layout .workspace .notification-title:hover {
  color: var(--brand-readable-accent);
}
.notification-unread {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.notification-empty {
  border-color: var(--surface-border);
  background: var(--brand-surface);
}
.notification-empty > .icon {
  color: var(--brand-readable-accent);
}
.team-approvals tbody tr {
  --record-tone: var(--brand-accent);
  background: var(--record-gradient);
}
.team-approvals tbody tr:has(.is-leave) {
  --record-tone: var(--type-leave);
}
.team-approvals tbody tr:has(.is-availability) {
  --record-tone: var(--type-availability);
}
.team-approvals tbody tr:has(.is-swap) {
  --record-tone: var(--type-swap);
}
.team-approvals tbody tr:has(.is-drop) {
  --record-tone: var(--type-drop);
}
.team-approvals tbody tr:has(.is-correction) {
  --record-tone: var(--type-correction);
}
.layout .workspace .team-approvals tbody tr > td {
  background: transparent;
}
.layout .workspace .team-approvals tbody tr > td:first-child {
  border-left: 0;
}

/* Categories identify the record; brand outline identifies the selected filter. */
.notification-category {
  --chip-tone: var(--filter-tone, var(--brand-accent));
  --chip-ink: #fff;
}
.employee-request-category {
  --chip-tone: var(--employee-category, var(--brand-accent));
  --chip-ink: #fff;
}
.team-category {
  --chip-tone: var(--category-tone, var(--brand-accent));
  --chip-ink: #fff;
}
.workplace-report-categories > button {
  --chip-tone: var(--report-tone, var(--brand-accent));
  --chip-ink: #fff;
}
.coverage-view-filters > button {
  --chip-tone: var(--brand-accent);
  --chip-ink: var(--brand-accent-ink);
}
.coverage-view-filters > button.is-gap {
  --chip-tone: var(--status-pending);
  --chip-ink: #fff;
}
.coverage-view-filters > button[data-coverage-view='covered'] {
  --chip-tone: var(--status-approved);
  --chip-ink: #fff;
}
:is(
  .notification-category[data-category='all'],
  .employee-request-category[data-employee-request-kind='all'],
  .team-category.is-all,
  .workplace-report-categories > button[data-issue-category='all']
) {
  --chip-tone: var(--brand-accent);
  --chip-ink: var(--brand-accent-ink);
}
.layout
  .workspace
  :is(
    .notification-category,
    .employee-request-category,
    .team-category,
    .workplace-report-categories > button,
    .coverage-view-filters > button
  ) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid
    color-mix(in srgb, var(--chip-tone) 25%, var(--surface-border));
  border-radius: var(--control-radius, 8px);
  background: var(--brand-surface);
  color: var(--surface-ink);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
  transition:
    background 0.16s,
    border-color 0.16s;
}
.layout
  .workspace
  :is(
    .notification-category,
    .employee-request-category,
    .team-category,
    .workplace-report-categories > button,
    .coverage-view-filters > button
  )
  > span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--chip-tone) 12%, var(--brand-surface));
  color: var(--surface-ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.layout
  .workspace
  :is(
    .notification-category,
    .employee-request-category,
    .team-category,
    .workplace-report-categories > button,
    .coverage-view-filters > button
  ):hover {
  border-color: var(--chip-tone);
  background: color-mix(in srgb, var(--chip-tone) 12%, var(--brand-surface));
  box-shadow: none;
}
.layout
  .workspace
  :is(
    .notification-category,
    .employee-request-category,
    .team-category,
    .workplace-report-categories > button,
    .coverage-view-filters > button
  ):is(.selected, [aria-pressed='true']) {
  border-color: var(--brand-accent);
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}
.layout
  .workspace
  :is(
    .notification-category,
    .employee-request-category,
    .team-category,
    .workplace-report-categories > button,
    .coverage-view-filters > button
  ):is(.selected, [aria-pressed='true'])
  > span {
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-surface));
  color: var(--brand-readable-accent);
}
.layout
  .workspace
  :is(
    .notification-category,
    .employee-request-category,
    .team-category,
    .workplace-report-categories > button,
    .coverage-view-filters > button
  ):focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .workspace .notification-select.notification-category-select {
    display: grid;
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .layout .workspace .team-approvals tbody tr {
    border-left: 0;
  }
  .layout .workspace .team-approvals tbody tr > td:first-child {
    border-left: 0;
  }
}

.coverage-open-offers:empty {
  display: none;
}
.coverage-open-offers {
  display: grid;
  gap: 6px;
  padding: 12px 0 0;
  margin: 0 18px 16px;
  border: 0;
  border-top: 1px solid var(--surface-border);
  border-radius: 0;
  background: transparent;
}
.coverage-open-offers strong {
  font-size: 12px;
  color: var(--brand-readable-accent);
}
.coverage-open-offers span,
.coverage-open-offers small {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.6;
}
.shift-publication {
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-canvas);
}
.shift-publication legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 650;
}
.shift-publication > .check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shift-publication .note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
}

.shift-eligibility-note {
  padding: 12px 14px;
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--status-pending);
  border-radius: 8px;
  background: var(--brand-canvas);
  font-size: 13px;
  line-height: 1.6;
  color: var(--surface-ink);
}

.coverage-segments {
  margin-top: 18px;
  border-top: 1px solid var(--surface-border);
  padding-top: 14px;
}
.coverage-segments summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  list-style: none;
}
.coverage-segments summary::-webkit-details-marker {
  display: none;
}
.coverage-segments summary > svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.coverage-segments summary > svg:last-child {
  margin-left: auto;
}
.coverage-segments > p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-muted);
  margin: 12px 0;
}
.coverage-segment-track {
  display: flex;
  height: 14px;
  gap: 2px;
  border-radius: 5px;
  overflow: hidden;
  margin: 12px 0;
}
.coverage-segment-track > .has-gap {
  background: var(--status-warning);
}
.coverage-segment-track > .is-covered {
  background: var(--status-approved);
}
.coverage-segments ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.coverage-segments li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-border);
  font-size: 12px;
}
.coverage-segments li > span:first-child {
  flex: 1;
  min-width: 140px;
}

/* Source: workspace-details.css */
/* Company tools and form groups follow the shared card and control rhythm. */
.details-company-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.details-company-metric {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  min-width: 0;
}
.details-company-metric > span,
.details-tool-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 9%, var(--brand-surface));
  color: var(--brand-readable-accent);
  flex: none;
}
.details-company-metric > span .icon {
  width: 21px;
  height: 21px;
}
.details-company-metric > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.details-company-metric strong {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.details-company-metric small {
  font-size: 12px;
  line-height: 1.5;
  color: var(--surface-muted);
}
.details-company-roster {
  margin-top: 24px;
}
.details-company-roster .card-head > .btn {
  display: flex;
  align-items: center;
  gap: 8px;
}
.details-company-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.details-company-tool {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  min-width: 0;
  text-align: left;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    background 0.18s;
}
.details-company-tool:hover {
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 50%,
    var(--surface-border)
  );
  box-shadow: 0 5px 16px color-mix(in srgb, var(--brand-ink) 7%, transparent);
  background: color-mix(in srgb, var(--brand-accent) 3%, var(--brand-surface));
}
.details-company-tool:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}
.details-tool-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.details-tool-copy strong {
  font-size: 15px;
  line-height: 1.45;
  color: var(--surface-ink);
}
.details-tool-copy small {
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-muted);
}
.details-company-tool > .icon {
  width: 18px;
  height: 18px;
  color: var(--surface-muted);
  flex: none;
}
.details-tool-icon .icon {
  width: 21px;
  height: 21px;
}
.details-warehouse-overview .warehouse-panel-head {
  padding: 20px;
}
.details-warehouse-overview .warehouse-panel-title h2 {
  color: var(--surface-ink);
}
.details-warehouse-overview .warehouse-panel-actions {
  padding: 16px 20px;
  gap: 8px;
}
.details-warehouse-overview .warehouse-panel-actions > .btn {
  min-height: 38px;
  font-size: 12px;
  padding: 8px 10px;
  flex: 0 1 auto;
}
.details-warehouse-overview .warehouse-department-list {
  padding: 4px 20px 20px;
}
.details-warehouse-overview .warehouse-department {
  padding: 20px 0 0;
}
.details-warehouse-overview .warehouse-department + .warehouse-department {
  margin-top: 20px;
}
.details-warehouse-overview .warehouse-department-title {
  gap: 8px;
  margin-bottom: 12px;
}
.details-warehouse-overview .warehouse-department-title > strong {
  font-size: 15px;
  line-height: 1.5;
  color: var(--surface-ink);
}
.details-warehouse-overview .warehouse-department-title > span > .icon {
  width: 18px;
  height: 18px;
}
.details-warehouse-overview .warehouse-department-title > .details-add-zone {
  margin-left: auto;
  background: color-mix(in srgb, var(--brand-accent) 9%, var(--brand-surface));
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 25%,
    var(--surface-border)
  );
  color: var(--brand-readable-accent);
  min-height: 38px;
  font-size: 12px;
  padding: 8px 10px;
}
.details-warehouse-overview
  .warehouse-department-title
  > .details-add-zone:hover {
  background: color-mix(in srgb, var(--brand-accent) 16%, var(--brand-surface));
  border-color: var(--brand-accent);
}
.details-warehouse-overview .details-add-zone > .icon {
  width: 16px;
  height: 16px;
}
.details-warehouse-overview .warehouse-zone {
  padding: 12px;
  gap: 12px;
}
.details-warehouse-overview .warehouse-zone strong {
  font-size: 14px;
  color: var(--surface-ink);
  line-height: 1.5;
}
.details-warehouse-overview .warehouse-zone small {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.5;
}
.details-warehouse-overview .details-edit-zone {
  padding: 8px 10px;
  min-height: 38px;
  font-size: 12px;
  color: var(--surface-ink);
  background: var(--brand-surface);
  border-color: var(--surface-border);
  flex: none;
}
.details-warehouse-overview .details-edit-zone:hover {
  background: var(--brand-canvas);
  border-color: var(--brand-accent);
}
.details-warehouse-overview .warehouse-empty > strong {
  display: block;
  font-size: 14px;
  color: var(--surface-ink);
}
.details-warehouse-overview .warehouse-empty > p {
  margin-top: 6px;
  line-height: 1.6;
  font-size: 13px;
  color: var(--surface-muted);
}
.dialog .details-employee-section,
.dialog .details-rate-editor {
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 16px;
  min-width: 0;
}
.details-employee-section legend,
.details-rate-editor legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--surface-ink);
}
.details-employee-section > p,
.details-rate-editor > p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-muted);
  margin: 0 0 16px;
}
.details-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}
.details-form-fields .field {
  min-width: 0;
  margin: 0;
}
.dialog .details-home-warehouse .searchable-filter {
  padding: 10px 12px;
  width: 100%;
  min-height: 42px;
  font-size: 14px;
  gap: 8px;
}
.details-home-warehouse .filter-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog .details-employee-qualifications {
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
}
.details-employee-qualifications > .label {
  font-size: 14px;
  color: var(--surface-ink);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 650;
}
.details-employee-qualifications .row {
  margin-top: 12px;
  gap: 12px;
}
.details-employee-qualifications .check {
  margin: 0;
  font-size: 13px;
}
.dialog .details-money-entry {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--surface-border);
  background: var(--brand-surface);
  border-radius: 8px;
  overflow: hidden;
}
.details-money-entry:focus-within {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 13%, transparent);
}
.dialog .details-money-entry > input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: 0;
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: 10px 8px;
  font-size: 15px;
  appearance: textfield;
}
.details-money-entry > input::-webkit-inner-spin-button,
.details-money-entry > input::-webkit-outer-spin-button {
  appearance: none;
}
.details-money-symbol {
  padding-left: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--surface-muted);
}
.details-money-unit {
  padding-right: 12px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--surface-muted);
}
.details-rate-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  background: var(--brand-canvas);
  border-radius: 10px;
}
.details-rate-person > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--brand-surface);
  color: var(--brand-readable-accent);
  flex: none;
}
.details-rate-person > span .icon {
  width: 20px;
  height: 20px;
}
.details-rate-person > div {
  min-width: 0;
}
.details-rate-person strong {
  font-size: 15px;
  line-height: 1.5;
}
.details-rate-person p {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.5;
  margin-top: 4px;
}
.details-current-rate {
  margin-left: auto;
  text-align: right;
  display: grid;
  gap: 5px;
}
.details-current-rate > span {
  font-size: 12px;
  color: var(--surface-muted);
}
.details-current-rate > strong {
  font-size: 20px;
}
.details-current-rate small {
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
}
.details-rate-editor > p {
  margin: 14px 0 0;
}
.details-rate-history {
  min-width: 0;
}
.details-rate-history h3 {
  font-size: 14px;
  margin: 0 0 12px;
}
.details-rate-history table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}
.details-rate-history th,
.details-rate-history td {
  padding: 12px;
  font-size: 13px;
}
.details-rate-history th {
  font-size: 12px;
}
.details-area-context {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-canvas);
}
.details-area-context > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--brand-surface);
  color: var(--brand-readable-accent);
  flex: none;
}
.details-area-context > span .icon {
  width: 19px;
  height: 19px;
}
.details-area-context strong {
  font-size: 14px;
  line-height: 1.5;
}
.details-area-context p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--surface-muted);
  margin-top: 5px;
}
.details-area-form .field:has([name='color']) {
  max-width: 280px;
}
.details-area-help {
  font-size: 12px;
  line-height: 1.6;
}
.dialog .details-area-form [hidden] {
  display: none !important;
}
@media (max-width: 950px) {
  .details-company-summary {
    gap: 12px;
  }
  .details-company-metric {
    padding: 16px;
    gap: 12px;
  }
  .details-company-metric > span {
    width: 36px;
    height: 36px;
  }
  .details-company-metric strong {
    font-size: 24px;
  }
  .details-company-tools {
    gap: 12px;
  }
  .details-company-tool {
    padding: 16px;
  }
}
@media (max-width: 650px) {
  .details-company-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .details-company-metric {
    padding: 14px 16px;
  }
  .details-company-tools {
    grid-template-columns: 1fr;
  }
  .details-company-roster .card-head {
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }
  .details-form-fields {
    grid-template-columns: 1fr;
  }
  .details-current-rate {
    margin-left: 52px;
    flex-basis: 100%;
    text-align: left;
  }
  .details-rate-person {
    flex-wrap: wrap;
  }
  .details-rate-history .table-wrap {
    overflow-x: visible;
  }
  .details-warehouse-overview .warehouse-panel-actions {
    padding: 12px 16px;
  }
  .details-warehouse-overview .warehouse-department-list {
    padding: 4px 16px 16px;
  }
  .details-warehouse-overview .warehouse-panel-head {
    padding: 16px;
  }
  .details-warehouse-overview .warehouse-department-title > .details-add-zone {
    margin-left: auto;
  }
  .details-warehouse-overview .warehouse-zone {
    flex-wrap: wrap;
  }
  .details-warehouse-overview .warehouse-zone > div {
    flex-basis: calc(100% - 40px);
  }
  .details-warehouse-overview .details-edit-zone {
    margin-left: 20px;
  }
}

.form-dialog .timecard-assignment-fields {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  align-items: start;
}
.dialog .details-published-shift {
  min-width: 0;
}
.dialog .details-published-shift .searchable-filter {
  width: 100%;
  max-width: none;
  min-height: 44px;
  font-size: 13px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.details-shift-assignment {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px 19px;
  border: 1px solid
    color-mix(in srgb, var(--brand-accent) 20%, var(--surface-border));
  border-radius: 10px;
  background: var(--brand-surface, #fff);
  min-width: 0;
}
.details-assignment-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: none;
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-surface));
  color: var(--brand-readable-accent);
  border-radius: 9px;
}
.details-assignment-icon .icon {
  width: 21px;
  height: 21px;
}
.details-assignment-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.details-assignment-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--surface-muted);
}
.details-assignment-copy > strong {
  font-size: 14px;
  line-height: 1.5;
  color: var(--surface-ink);
}
.details-assignment-copy > b {
  font-size: 18px;
  line-height: 1.5;
  color: var(--surface-ink);
}
.details-shift-assignment p {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.5;
  color: var(--surface-muted);
  margin: 0;
}
.details-shift-assignment p .icon {
  width: 15px;
  height: 15px;
  flex: none;
}
.dialog .details-employee-section {
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  padding: 18px;
  margin: 2px 0 10px;
  background: var(--brand-surface);
}
.dialog .details-employee-section > legend {
  padding: 0 7px;
  color: var(--surface-ink);
  font-size: 14px;
  font-weight: 650;
}
.dialog .details-employee-section > p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--surface-muted);
  margin: 0 0 16px;
}
@media (max-width: 620px) {
  .form-dialog .timecard-assignment-fields {
    grid-template-columns: 1fr;
  }
  .details-shift-assignment {
    padding: 14px;
    gap: 10px;
  }
  .details-assignment-copy > b {
    font-size: 16px;
  }
  .dialog .details-employee-section {
    padding: 15px;
  }
}

.workspace .warehouse-department .btn.details-add-zone {
  background: color-mix(in srgb, var(--brand-accent) 9%, var(--brand-surface));
  color: var(--brand-readable-accent);
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 30%,
    var(--surface-border)
  );
}
.workspace .warehouse-department .btn.details-add-zone:hover {
  background: color-mix(in srgb, var(--brand-accent) 16%, var(--brand-surface));
  border-color: color-mix(
    in srgb,
    var(--brand-accent) 60%,
    var(--surface-border)
  );
}
.workspace .warehouse-zone .btn.details-edit-zone {
  background: var(--brand-surface);
  color: var(--surface-ink);
  border-color: var(--surface-border);
}

.company-operations {
  margin: 24px 0;
}
.company-operations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.company-operation-record {
  min-width: 0;
  padding: 22px;
}
.company-operation-record > header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.company-operation-record > header > div {
  flex: 1;
  min-width: 120px;
}
.company-operation-record h3 {
  font-size: 17px;
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}
.company-operation-record small {
  color: var(--surface-muted);
  font-size: 12px;
}
.company-operation-readiness {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0;
  color: var(--surface-muted);
  font-size: 12px;
}
.company-operation-readiness > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.company-operation-readiness svg {
  width: 15px;
  height: 15px;
}
.company-operation-record dl {
  margin: 0;
}
.company-operation-record dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--surface-border);
  font-size: 13px;
}
.company-operation-record dd {
  font-weight: 700;
  font-size: 18px;
  margin: 0;
}
.company-operation-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 48px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-readable-accent);
  font: inherit;
  cursor: pointer;
}
.company-operation-link:hover:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}
.company-operation-link:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.company-operation-link:disabled {
  color: var(--surface-muted);
  cursor: default;
}
.company-operation-link .icon {
  width: 16px;
  height: 16px;
}
.company-operation-record .needs-attention {
  color: var(--status-warning-ink);
}
.company-operation-record > footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
@media (max-width: 750px) {
  .company-operations-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-operation-record {
    padding: 18px;
  }
}

/* Source: workspace-administration.css */
.top .manager-warehouse-context {
  padding: 0;
  border: 0;
  max-width: 320px;
  min-width: 0;
  align-self: center;
  display: block;
}
.top .warehouse-context-switch {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: var(--brand-surface);
  text-align: left;
  color: var(--surface-ink, var(--surface-ink));
  transition:
    background 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
}
.top .warehouse-context-switch:hover {
  background: color-mix(
    in srgb,
    var(--brand-accent, var(--brand-readable-accent)) 6%,
    white
  );
  border-color: color-mix(
    in srgb,
    var(--brand-accent, var(--brand-readable-accent)) 40%,
    var(--surface-border)
  );
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-ink) 4.3%, transparent);
}
.top .warehouse-context-switch:focus-visible,
.warehouse-choice-list > button:focus-visible {
  outline: 2px solid var(--brand-accent, var(--focus-color));
  outline-offset: 3px;
}
.top .warehouse-context-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  margin: 0;
}
.top .warehouse-context-icon .icon {
  width: 19px;
  height: 19px;
}
.top .warehouse-context-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1.25;
}
.top .warehouse-context-copy small {
  font-size: 12px;
  color: var(--surface-muted);
  font-weight: 500;
}
.top .warehouse-context-copy strong {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin: 0;
  display: block;
}
.top .warehouse-context-switch > .icon {
  width: 17px;
  height: 17px;
  color: var(--surface-muted);
}
.warehouse-choice-screen {
  background:
    radial-gradient(
      ellipse at 50% 35%,
      color-mix(in srgb, var(--brand-accent) 8%, var(--brand-canvas)) 0,
      transparent 65%
    ),
    var(--brand-canvas, #f5f8f9);
}
.warehouse-choice-screen > .warehouse-choice {
  box-shadow: 0 18px 55px color-mix(in srgb, var(--brand-ink) 6.3%, transparent);
  max-width: 640px;
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  padding: 30px;
}
.warehouse-choice-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 20px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--surface-ink);
  font-size: 13px;
  line-height: 1.5;
}
.warehouse-choice-notice .icon {
  flex: none;
  width: 18px;
  height: 18px;
}
.warehouse-choice-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.warehouse-choice-heading .warehouse-choice-icon {
  margin: 0;
  flex: none;
}
.warehouse-choice-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--surface-muted);
}
.warehouse-choice-heading h1 {
  font-size: 25px;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin: 5px 0 0;
}
.warehouse-choice > p {
  line-height: 1.6;
}
.warehouse-choice-list {
  max-height: 50dvh;
  overflow-y: auto;
  padding: 3px;
}
.warehouse-choice-list > button {
  min-height: 76px;
  transition:
    background 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
}
.warehouse-choice-list > button:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-ink) 3.1%, transparent);
}
.warehouse-choice-list > button strong {
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.warehouse-choice-list > button small {
  line-height: 1.4;
}
.warehouse-choice-symbol {
  flex: none;
}
.warehouse-choice-list > button > .icon {
  width: 19px;
  height: 19px;
  flex: none;
}
.warehouse-choice-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-top: 1px solid var(--surface-border);
  padding-top: 18px;
  margin-top: 20px;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.5;
}
.warehouse-choice-footer .icon {
  width: 15px;
  height: 15px;
  flex: none;
}
.sidebar .administration-management-entry {
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-surface));
  border: 1px solid var(--surface-border);
  margin: 3px 0;
  color: var(--brand-readable-accent);
  font-weight: 650;
}
.administration-management-workspace .sidebar .nav-group:first-child .nav-btn {
  border: 1px solid var(--surface-border);
  color: var(--surface-muted);
  margin-bottom: 6px;
}
@media (max-width: 1100px) {
  .top .manager-warehouse-context {
    max-width: 250px;
  }
  .top .warehouse-context-switch {
    gap: 8px;
    padding: 7px 9px;
  }
  .top .warehouse-context-copy strong {
    font-size: 12px;
  }
}
@media (max-width: 750px) {
  .warehouse-choice-screen {
    padding: 16px;
  }
  .warehouse-choice-screen > .warehouse-choice {
    padding: 22px;
  }
  .warehouse-choice-heading h1 {
    font-size: 23px;
  }
  .warehouse-choice-list {
    max-height: 52dvh;
  }
  .warehouse-choice-footer {
    justify-content: flex-start;
  }
  .top .manager-warehouse-context {
    max-width: 230px;
  }
}

/* Source: workspace-personal.css */
.personal-work-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  padding: 5px;
  background: var(--brand-surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  width: fit-content;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-ink) 3%, transparent);
}
.personal-work-tabs button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 8px;
}
.personal-work-tabs .icon {
  width: 17px;
  height: 17px;
}
.personal-work-tabs .active {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-accent) 15%, transparent);
}
.personal-subheading {
  margin-bottom: 20px;
}
.personal-subheading h1 {
  font-size: 22px;
}
.personal-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--surface-border);
  margin-bottom: 24px;
}
.personal-clock > div:first-child {
  flex: 1 1 250px;
}
.personal-clock h2 {
  margin: 8px 0;
  font-size: 24px;
}
.personal-clock p {
  color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.6;
}
.personal-running-time {
  display: grid;
  gap: 7px;
}
.personal-running-time > span {
  color: var(--surface-muted);
  font-size: 12px;
}
.personal-running-time strong {
  font-size: 25px;
}
.personal-clock .manager-clock-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.personal-clock .btn {
  min-height: 42px;
  justify-content: center;
}
.personal-next-shift {
  margin-bottom: 24px;
}
.personal-work-note,
.personal-duty-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.personal-work-note > .icon,
.personal-duty-notice > .icon {
  color: var(--brand-readable-accent);
  width: 24px;
  height: 24px;
  flex: none;
}
.personal-work-note > div,
.personal-duty-notice > div {
  flex: 1 1 240px;
}
.personal-work-note p,
.personal-duty-notice p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--surface-muted);
  margin-top: 5px;
}
.personal-duty-notice {
  border: 1px solid
    color-mix(in srgb, var(--brand-accent) 20%, var(--surface-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 4%, var(--brand-surface));
}
.personal-duty-notice strong {
  font-size: 14px;
}
.personal-assignment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
.personal-assignment h3 {
  font-size: 19px;
  line-height: 1.5;
  margin: 8px 0;
}
.personal-assignment p {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1.6;
}
.personal-assignment p .icon {
  width: 16px;
  height: 16px;
  flex: none;
}
.personal-assignment small {
  display: block;
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 6px;
}
.personal-assignment .record-action-row {
  flex-wrap: wrap;
}
.personal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
.personal-day {
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--brand-surface);
  min-width: 0;
}
.personal-day.is-today {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px var(--brand-accent);
}
.personal-day > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--brand-canvas);
  padding: 13px;
  font-size: 13px;
  border-bottom: 1px solid var(--surface-border);
}
.personal-day > header span {
  font-size: 12px;
  color: var(--surface-muted);
}
.personal-day > div {
  padding: 10px;
}
.personal-day .personal-assignment {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  border-left: 3px solid var(--brand-accent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-ink) 4%, transparent);
}
.personal-day .personal-assignment + .personal-assignment {
  margin-top: 10px;
}
.personal-day .personal-assignment .label {
  display: none;
}
.personal-day .personal-assignment h3 {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 9px;
}
.personal-day .personal-assignment p {
  font-size: 12px;
}
.personal-rest-day {
  font-size: 12px;
  color: var(--surface-muted);
  padding: 20px 4px;
  text-align: center;
}
.personal-home-warehouse {
  padding: 8px 11px;
  gap: 8px;
  flex: 0 1 auto;
}
.personal-home-warehouse > span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--surface-muted);
  font-size: 12px;
}
.personal-home-warehouse strong {
  color: var(--surface-ink);
  font-weight: 600;
}
.personal-home-warehouse .icon {
  width: 17px;
  height: 17px;
  flex: none;
}
.personal-manager-directory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.personal-manager-directory > .list-search {
  flex: 1 1 240px;
}
.personal-manager-directory > .field {
  flex: 0 1 240px;
}
.personal-manager-directory > .field > span {
  display: none;
}
.personal-manager-directory [role='status'] {
  font-size: 12px;
  color: var(--surface-muted);
}
.personal-manager-schedule {
  display: grid;
  gap: 20px;
}
.personal-manager-schedule > section > h2 {
  font-size: 14px;
  margin-bottom: 9px;
}
.personal-manager-schedule > section[hidden] {
  display: none;
}
.personal-manager-actions {
  flex-wrap: wrap;
  gap: 7px;
}
.admin-directory-row:has(.personal-manager-actions) {
  grid-template-columns: minmax(160px, 1.2fr) minmax(180px, 1.2fr) minmax(
      100px,
      0.6fr
    ) 200px;
}
.personal-assignment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.personal-manager-assignment {
  border: 1px solid var(--surface-border);
  background: var(--record-gradient);
  padding: 20px 24px;
}
.personal-manager-assignment > div:first-child {
  min-width: 0;
  flex: 1;
}
.personal-manager-assignment .record-action-row {
  justify-content: flex-end;
  gap: 8px;
}
.personal-manager-assignment .badge {
  font-size: 11px;
}
.personal-assignment .personal-published-time {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--surface-border);
  max-width: 560px;
  line-height: 1.6;
}
.personal-published-time .icon {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
}
.personal-assignment-help {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--surface-soft, var(--brand-canvas));
  padding: 14px;
  line-height: 1.6;
}
.personal-assignment-help > .icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brand-readable-accent);
  margin-top: 2px;
}
.personal-assignment-help strong {
  color: var(--surface-ink);
}
@media (max-width: 700px) {
  .personal-manager-assignment {
    padding: 18px;
  }
  .personal-manager-assignment .record-action-row {
    width: 100%;
    justify-content: flex-start;
  }
  .personal-manager-directory > .field {
    flex: 1 1 180px;
  }
  .personal-manager-directory [role='status'] {
    width: 100%;
  }
}
.personal-template-list {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}
.personal-template {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 16px;
}
.personal-template h3 {
  font-size: 15px;
  margin-bottom: 6px;
}
.personal-template strong {
  font-size: 14px;
}
.personal-template p {
  color: var(--surface-muted);
  font-size: 13px;
  margin-top: 7px;
  line-height: 1.5;
}
.personal-template-summary {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px;
  border: 1px solid
    color-mix(in srgb, var(--brand-accent) 30%, var(--surface-border));
  border-radius: 11px;
  background: var(--brand-surface, #fff);
}
.personal-template-summary > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-surface));
  color: var(--brand-readable-accent);
  border-radius: 9px;
  flex: none;
}
.personal-template-summary small {
  font-size: 12px;
  color: var(--surface-muted);
}
.personal-template-summary h3 {
  font-size: 17px;
  margin: 7px 0;
}
.personal-template-summary strong {
  font-size: 16px;
}
.personal-template-summary p {
  font-size: 13px;
  color: var(--surface-muted);
  margin-top: 8px;
  line-height: 1.5;
}
.personal-template-advanced {
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 14px;
}
.personal-template-advanced > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.personal-template-advanced > summary > span {
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
  margin-left: auto;
}
.personal-template-advanced[open] > .form-grid {
  margin-top: 20px;
}
.personal-template-advanced > summary .icon {
  width: 17px;
  height: 17px;
}
.personal-template-advanced:focus-within {
  border-color: var(--brand-accent);
}
/* All time intervals use the same divider, including correction lunch rows. */
.form-dialog .lunch-entry {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-dialog .lunch-entry > .field {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.form-dialog .lunch-entry > .field:nth-child(2) {
  padding-left: 16px;
  border-left: 1px solid var(--surface-border);
}
.form-dialog .lunch-entry > .field:nth-child(2)::before {
  display: none !important;
}
.form-dialog .lunch-entry > [data-remove-lunch] {
  grid-column: 1/-1;
  justify-self: end;
}
@media (max-width: 1250px) {
  .personal-week {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .admin-directory-row:has(.personal-manager-actions) {
    grid-template-columns: minmax(150px, 1fr) minmax(160px, 1fr) minmax(
        100px,
        0.7fr
      ) 115px;
  }
  .personal-manager-actions {
    align-items: flex-start;
  }
}
@media (max-width: 700px) {
  .personal-week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .personal-clock {
    padding: 18px;
    gap: 18px;
  }
  .personal-clock .manager-clock-actions {
    width: 100%;
  }
  .personal-work-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .personal-work-tabs button {
    justify-content: center;
    padding: 10px 6px;
  }
  .personal-assignment {
    flex-wrap: wrap;
    padding: 16px;
  }
  .personal-template-summary {
    padding: 14px;
  }
  .admin-directory-row:has(.personal-manager-actions) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .personal-manager-actions {
    grid-column: 2;
    grid-row: 3;
  }
  .personal-home-warehouse {
    width: 100%;
    justify-content: flex-start;
  }
  .form-dialog .lunch-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .form-dialog .lunch-entry > .field:nth-child(2) {
    border-left: 0;
    border-top: 1px solid var(--surface-border);
    padding: 16px 0 0;
    margin-top: 0;
  }
}
@media (max-width: 420px) {
  .personal-week {
    grid-template-columns: minmax(0, 1fr);
  }
  .personal-work-tabs button {
    font-size: 12px;
  }
  .personal-work-tabs .icon {
    width: 15px;
    height: 15px;
  }
}

/* Employee location stays visible beside the brand, with a compact mobile strip. */
.top .employee-warehouse-context {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 280px;
  padding-left: 18px;
  order: 0;
  flex: 0 1 280px;
}
.top .employee-warehouse-context .employee-warehouse-icon,
.employee-mobile-warehouse .employee-warehouse-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  flex: none;
}
.employee-warehouse-icon .icon {
  width: 18px;
  height: 18px;
}
.employee-warehouse-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  line-height: 1.3;
}
.employee-warehouse-copy small {
  font-size: 12px;
  color: var(--surface-muted);
}
.top .employee-warehouse-copy strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--surface-ink, #213c40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.employee-mobile-warehouse {
  display: none;
}
@media (max-width: 1100px) {
  .top .employee-warehouse-context {
    max-width: 235px;
    flex-basis: 235px;
    padding-left: 14px;
    gap: 8px;
  }
}
@media (max-width: 700px) {
  .employee-mobile-warehouse {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--surface-border, #dce6e8);
    background: var(--brand-surface, #fff);
    min-width: 0;
  }
  .employee-mobile-warehouse .employee-warehouse-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }
  .employee-mobile-warehouse .employee-warehouse-copy {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
  }
  .employee-mobile-warehouse strong {
    font-size: 13px;
    color: var(--surface-ink, #213c40);
    overflow-wrap: break-word;
  }
}

.open-clock-attention {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 16px 18px;
  margin: 0 0 18px;
  border: 1px solid var(--status-warning-border);
  border-inline-start: 3px solid var(--status-warning);
  border-radius: 12px;
  background: var(--status-warning-surface);
  color: var(--status-warning-ink);
}
.open-clock-attention > .icon {
  width: 22px;
  height: 22px;
  flex: none;
}
.open-clock-attention strong {
  font-size: 15px;
}
.open-clock-attention p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Source: platform-console.css */
/* Shared company and platform support surfaces. */
.support-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.7fr);
  min-height: 500px;
}
.support-directory {
  padding: 16px;
  border-right: 1px solid var(--surface-border, #dce6e8);
  background: var(--brand-canvas, #f5f8f9);
}
.platform-page .support-list-item {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 16px;
  margin-bottom: 10px;
  text-align: left;
  color: var(--surface-ink, #213c40);
  background: var(--brand-surface, #fff);
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 10px;
}
.support-list-item:hover,
.support-topic:hover {
  border-color: var(--brand-accent, #0f766e);
  box-shadow: 0 3px 12px #183e3d0c;
}
.support-list-item.selected,
.support-topic.selected {
  border-color: var(--brand-accent, #0f766e);
  box-shadow: none;
  background: color-mix(
    in srgb,
    var(--brand-accent, #0f766e) 6%,
    var(--brand-surface, #fff)
  );
}
.support-list-heading,
.support-list-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.support-list-heading strong {
  font-size: 14px;
}
.support-list-item > span {
  font-size: 13px;
  line-height: 1.5;
}
.support-list-meta time {
  font-size: 12px;
  color: var(--surface-muted, #526e74);
}
.support-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid #dce6e8;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 650;
  white-space: nowrap;
  color: #526e74;
  background: #f5f8f9;
  text-transform: none;
}
.support-status.is-open,
.support-status.is-failed {
  background: #fff3df;
  border-color: #ead5ad;
  color: #855715;
}
.support-status.is-waiting {
  background: #eaf1fb;
  border-color: #c6d8ee;
  color: #335f91;
}
.support-status.is-resolved,
.support-status.is-healthy {
  background: #eaf6ed;
  border-color: #bdd9c5;
  color: #346b43;
}
.support-status.is-stale {
  background: #fff6e6;
  color: #855715;
}
.support-conversation {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.support-conversation-head {
  display: block !important;
  margin: 0 !important;
  padding: 22px;
  border-bottom: 1px solid var(--surface-border, #dce6e8);
}
.support-conversation-head h2 {
  font-size: 19px;
  line-height: 1.5;
  margin: 10px 0 4px !important;
}
.support-conversation-head p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--surface-muted, #526e74);
}
.support-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.support-status-actions button {
  min-height: 38px;
  font-size: 12px;
  padding: 8px 12px;
}
.support-overline {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-readable-accent, #0f766e);
}
.support-overline .icon {
  width: 18px;
  height: 18px;
}
.support-thread {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  max-height: 520px;
  overflow: auto;
}
.support-message {
  padding: 15px 17px;
  background: var(--brand-canvas, #f5f8f9);
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 11px;
  max-width: 94%;
  width: fit-content;
  min-width: min(220px, 100%);
}
.support-message.is-own {
  justify-self: end;
  background: color-mix(
    in srgb,
    var(--brand-accent, #0f766e) 7%,
    var(--brand-surface, #fff)
  );
  border-color: color-mix(
    in srgb,
    var(--brand-accent, #0f766e) 25%,
    var(--surface-border, #dce6e8)
  );
}
.support-message header {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 9px !important;
}
.support-message header strong {
  font-size: 13px;
}
.support-message header span,
.support-message time {
  font-size: 12px;
  color: var(--surface-muted, #526e74);
}
.support-message p {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: 14px;
  line-height: 1.7;
  color: var(--surface-ink, #213c40);
  margin: 0;
}
.support-composer {
  margin-top: auto;
  padding: 20px 22px;
  border-top: 1px solid var(--surface-border, #dce6e8);
}
.support-composer label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--surface-ink, #213c40);
}
.support-composer textarea {
  font: inherit;
  line-height: 1.6;
  resize: vertical;
  min-height: 100px;
  background: var(--brand-surface, #fff);
  color: var(--surface-ink, #213c40);
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 8px;
  padding: 12px;
  width: 100%;
}
.support-composer > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}
.support-composer > div:last-child > span {
  max-width: 380px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--surface-muted, #526e74);
}
.support-composer button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.support-older {
  align-self: center;
  justify-self: center;
  width: fit-content;
  margin: 16px auto 0;
  min-height: 38px;
  font-size: 12px;
}
.company-support-topics {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-bottom: 1px solid var(--surface-border, #dce6e8);
}
.support-topic {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid var(--surface-border, #dce6e8);
  background: var(--brand-surface, #fff);
  color: var(--surface-ink, #213c40);
  font-size: 13px;
}
.support-topic-heading {
  padding: 18px 22px 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.support-topic-heading h3 {
  font-size: 16px;
  margin: 0;
}
.support-topic-heading > span:not(.support-status) {
  font-size: 12px;
  color: var(--surface-muted, #526e74);
}
.support-new-fields {
  display: grid;
  grid-template-columns: minmax(140px, 0.6fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}
.platform-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.platform-summary > button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  text-align: left;
  padding: 20px;
  color: #213c40;
}
.platform-summary > button > span {
  grid-column: 1/-1;
  font-size: 13px;
  color: #526e74;
}
.platform-summary strong {
  font-size: 30px;
  line-height: 1.2;
}
.platform-summary .platform-icon {
  align-self: center;
}
.platform-summary > button:hover {
  border-color: #77b0a6;
  box-shadow: 0 4px 16px #153e3d0f;
}
.platform-overview-section {
  margin-top: 28px;
}
.platform-overview-section > h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  margin: 0 0 14px;
}
.platform-overview-section > h2 > span {
  font-size: 12px;
  background: #eaf2f1;
  color: #456a68;
  padding: 4px 7px;
  border-radius: 6px;
}
.platform-work-list {
  display: grid;
  gap: 12px;
}
.platform-work-item {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.platform-work-item > div {
  flex: 1;
  min-width: 0;
}
.platform-work-item h2 {
  font-size: 16px;
  margin: 0 0 5px;
}
.platform-work-item p {
  font-size: 13px;
  color: #526e74;
}
.platform-work-item > button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-overview-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.platform-overview-support > .support-list-item {
  margin: 0;
}
.platform-empty-line {
  padding: 22px;
  color: #526e74;
  font-size: 13px;
  line-height: 1.6;
}
.platform-failure-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  text-align: left;
  background: var(--brand-surface, #fff);
  color: var(--surface-ink, #213c40);
  border-color: var(--surface-border, #dce6e8);
}
.platform-company-detail {
  margin-bottom: 20px;
}
.platform-detail-facts {
  padding: 0 22px 18px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #526e74;
}
.platform-detail-head {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #dce6e8;
  flex-wrap: wrap;
}
.platform-detail-head h2 {
  font-size: 17px;
}
.platform-detail-head p {
  font-size: 13px;
}
.platform-detail-head > .platform-search {
  width: min(360px, 100%);
}
.platform-account-list {
  margin-bottom: 20px;
}
.platform-account-list > article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 22px;
  border-bottom: 1px solid #e6eeed;
}
.platform-account-list > article > div {
  min-width: 0;
  flex: 1;
}
.platform-account-list strong {
  font-size: 14px;
}
.platform-account-list small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #526e74;
  overflow-wrap: break-word;
}
.platform-account-list button {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 13px;
}
.platform-warehouse-list > div:not(.platform-detail-head) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid #e6eeed;
  font-size: 13px;
}
.platform-warehouse-list > div > span {
  margin-left: auto;
  color: #526e74;
}
.platform-health-context {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 0 20px;
  font-size: 13px;
  color: #526e74;
}
.platform-health-card {
  margin-bottom: 20px;
}
.platform-health-card > p,
.platform-health-card > a {
  margin: 18px 22px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.platform-health-card > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 44px);
}
.platform-health-card > p:last-child,
.platform-health-card > a:last-child {
  margin-bottom: 22px;
}
.platform-health-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #e6eeed;
  font-size: 13px;
}
.platform-health-row small {
  display: block;
  color: #526e74;
  font-size: 12px;
  margin-top: 6px;
}
.platform-network .platform-health-row {
  flex-wrap: wrap;
}
.platform-network .platform-health-row > strong {
  flex: 1 1 240px;
}
.platform-network .platform-health-row > span {
  flex: 2 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.platform-health-row time {
  margin-left: auto;
  color: #526e74;
}
:is(
    .support-workspace,
    .platform-summary,
    .platform-work-list,
    .platform-account-list
  )
  button:focus-visible {
  outline: 3px solid var(--brand-accent, #0f766e);
  outline-offset: 3px;
}
.platform-page [hidden],
.support-workspace [hidden] {
  display: none !important;
}
@media (max-width: 1000px) {
  .platform-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .support-workspace {
    grid-template-columns: 230px minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .support-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .support-directory {
    border-right: 0;
    border-bottom: 1px solid #dce6e8;
    max-height: 270px;
    overflow: auto;
  }
  .support-conversation-head,
  .support-thread,
  .support-composer {
    padding: 17px;
  }
  .support-new-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .platform-overview-support {
    grid-template-columns: 1fr;
  }
  .platform-work-item {
    flex-wrap: wrap;
  }
  .platform-work-item > button {
    margin-left: 54px;
  }
  .platform-account-list > article {
    flex-wrap: wrap;
    padding: 16px;
  }
  .platform-account-list > article > button {
    margin-left: 48px;
  }
  .platform-health-row {
    flex-wrap: wrap;
    padding: 17px;
  }
  .platform-warehouse-list > div:not(.platform-detail-head) {
    flex-wrap: wrap;
  }
  .platform-warehouse-list > div > span {
    margin-left: 30px;
    width: 100%;
  }
}

.support-company-group + .support-company-group {
  margin-top: 22px;
}
.support-company-group h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--surface-muted, #526e74);
}
.support-company-group h2 > span {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.support-company-group .support-list-heading strong {
  display: none;
}

.support-company-group .support-list-heading {
  display: none;
}
.platform-page .support-company-group .support-list-item {
  gap: 12px;
}
/* Platform sign-in keeps administration separate from company workspaces. */
.platform-signin {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse at 50% 28%, #dcefe9 0, transparent 55%), #f5f8f9;
}
.platform-signin-card {
  width: min(100%, 490px);
  border: 1px solid #d9e5e3;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 24px 64px -24px #183e3d30,
    0 4px 14px #183e3d08;
  overflow: hidden;
}
.platform-signin-brand {
  display: grid;
  gap: 24px;
  padding: 30px 32px 26px;
  background: linear-gradient(105deg, #edf7f4, #fff 82%);
  border-bottom: 1px solid #e1eae7;
}
.platform-signin-brand .brand {
  justify-self: start;
  color: #213c40;
  text-decoration: none;
  font-size: 25px;
}
.platform-signin-brand > span {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 650;
  color: #526e74;
}
.platform-signin-brand > span .platform-icon {
  color: #0f766e;
  width: 17px;
  height: 17px;
}
.platform-signin-body {
  padding: 28px 32px 30px;
}
.platform-signin-body h1 {
  font-size: 28px;
  letter-spacing: -0.7px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.platform-signin-body > p {
  font-size: 14px;
  line-height: 1.65;
  color: #526e74;
  max-width: 360px;
}
.platform-signin-body form {
  margin-top: 26px;
}
.platform-signin-body .field {
  font-size: 13px;
  color: #354f54;
  gap: 9px;
  margin-bottom: 18px;
}
.platform-signin-body input {
  min-height: 48px;
  background: #fbfcfc;
  border-color: #bdceca;
  font-size: 15px;
}
.platform-signin-body input:focus-visible {
  outline: 3px solid #0f766e26;
  border-color: #0f766e;
}
.platform-signin-body .password-toggle {
  top: 4px;
  right: 5px;
  height: 40px;
  min-height: 40px;
  font-size: 13px;
  color: #526e74;
}
.platform-signin-body .primary {
  min-height: 48px;
  font-size: 15px;
  margin-top: 4px;
  box-shadow: 0 3px 8px #0f766e1c;
}
.platform-signin-body .primary .platform-icon {
  margin-left: auto;
  transition: transform 0.18s;
}
.platform-signin-body .primary:hover .platform-icon {
  transform: translateX(3px);
}
.platform-signin-body .primary:disabled {
  background: #e7efec;
  color: #526e74;
  border-color: #d4e0db;
  cursor: wait;
  box-shadow: none;
}
.platform-signin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 24px;
  border-top: 1px solid #e1eae7;
  background: #f8faf9;
}
.platform-signin-footer > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #526e74;
}
.platform-signin-footer .platform-icon {
  width: 15px;
  height: 15px;
}
.platform-signin-demo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  color: #526e74;
  text-decoration: none;
  font-size: 13px;
  border-radius: 8px;
}
.platform-signin-demo:hover {
  color: #0f766e;
  background: #e7f2ee;
}
@media (max-width: 520px) {
  .platform-signin {
    padding: 24px 16px;
  }
  .platform-signin-brand,
  .platform-signin-body {
    padding: 24px;
  }
  .platform-signin-body h1 {
    font-size: 25px;
  }
  .platform-signin-footer {
    padding: 16px 24px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .platform-signin-body .primary .platform-icon {
    transition: none;
  }
}
.platform-account-list .platform-account-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.platform-account-list .platform-account-copy {
  flex: 1;
  min-width: 160px;
}
.platform-account-list [hidden] {
  display: none !important;
}
.platform-account-location {
  display: flex !important;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.platform-account-location .platform-icon {
  width: 14px;
  height: 14px;
}
.platform-account-location > span {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding-left: 5px;
  border-left: 1px solid #dce6e8;
}
.platform-password-heading {
  display: grid;
  gap: 5px;
  padding-top: 14px;
  border-top: 1px solid #dce6e8;
}
.platform-password-heading strong {
  font-size: 14px;
}
.platform-password-heading span {
  font-size: 12px;
  color: #526e74;
  line-height: 1.6;
}
.platform-delete-warning {
  border: 1px solid #edcbc9;
  background: #fff6f5;
  border-radius: 10px;
  padding: 20px;
  color: #923c38;
}
.platform-delete-warning p {
  color: #923c38;
  font-size: 13px;
  margin-top: 12px;
  line-height: 1.75;
}
@media (max-width: 580px) {
  .platform-account-list .platform-account-actions {
    flex-basis: 100%;
    padding-left: 48px;
    flex-wrap: wrap;
  }
  .platform-account-list .platform-account-actions button {
    min-height: 44px;
  }
  .platform-account-list .platform-account-copy {
    min-width: 0;
  }
  .platform-account-list .platform-detail-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

.session-reconnect {
  position: fixed;
  z-index: 100000;
  bottom: 16px;
  left: 16px;
  right: 16px;
  margin: auto;
  max-width: 780px;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: #fff7ed;
  color: #7c2d12;
  border: 1px solid #fdba74;
  border-radius: 14px;
  box-shadow: 0 8px 32px #0f172a20;
  font-size: 14px;
}
.session-reconnect a {
  flex-shrink: 0;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.platform-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.platform-settings-card {
  padding: 24px;
  min-width: 0;
}
.platform-settings-card:last-child {
  grid-column: 1/-1;
}
.platform-settings-card header {
  margin-bottom: 24px;
}
.platform-settings-card h2 {
  font-size: 19px;
  margin: 0 0 8px;
}
.platform-settings-card header p,
.platform-environment-note {
  font-size: 14px;
  color: #52636d;
  line-height: 1.6;
}
.platform-policy-editors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.platform-policy-editors form + form {
  border-top: 1px solid var(--surface-border, #d6e3e5);
  padding-top: 28px;
}
.platform-policy-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.platform-policy-title h3 {
  margin: 0;
}
.platform-policy-title a {
  color: var(--brand-accent, #0f766e);
}
.platform-policy-editors textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.6;
}
.platform-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.platform-settings-grid .full {
  grid-column: 1/-1;
}
.platform-page .platform-settings-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 10px;
  background: var(--surface-soft, #f5f8f9);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.platform-page .platform-settings-check input[type='checkbox'] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--brand-accent, #0f766e);
}
.platform-page .platform-settings-check:has(input:checked) {
  background: #fff8ed;
  border-color: #c6903f;
}
.platform-settings-grid .field {
  min-width: 0;
}
.platform-settings-grid input,
.platform-settings-grid select,
.platform-settings-grid textarea {
  width: 100%;
  min-width: 0;
}
.platform-settings-card footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
.platform-settings-card footer [role='status'] {
  flex: 1;
  min-width: 0;
  color: #52636d;
  font-size: 13px;
}
.platform-settings-card .error {
  margin-bottom: 16px;
}
.platform-environment-note {
  margin-top: 24px;
}
.platform-health-overview {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  margin-bottom: 20px;
  background: var(--record-gradient);
}
.platform-health-overview.needs-attention {
  --health-overview-ink: var(--status-warning-ink, #78350f);
  --health-overview-surface: var(--status-warning-surface, #fffbeb);
  background: var(--brand-surface, #fff);
}
.platform-health-overview > span {
  display: grid;
  place-items: center;
  border-radius: 14px;
  padding: 14px;
  background: var(
    --health-overview-surface,
    var(--status-success-surface, #edf8ef)
  );
  color: var(--health-overview-ink, var(--status-success-ink, #166534));
}
.platform-health-overview > div {
  flex: 1;
}
.platform-health-overview h2 {
  margin: 0 0 8px;
  font-size: 22px;
}
.platform-health-overview p {
  margin: 0;
  color: #52636d;
  line-height: 1.5;
}
.platform-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.platform-health-tile {
  padding: 22px;
  min-width: 0;
  border: 1px solid var(--surface-border, #dce6e8);
  background: var(--brand-surface, #fff);
}
.platform-health-tile > span {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #52636d;
}
.platform-health-tile h2 {
  font-size: 21px;
  margin: 18px 0 8px;
  overflow-wrap: break-word;
}
.platform-health-tile p {
  font-size: 13px;
  color: #52636d;
  line-height: 1.5;
}
.platform-health-row p {
  font-size: 13px;
  color: #52636d;
  margin: 8px 0 0;
}
.support-company-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f1f5f9;
}
.support-company-logo img,
.platform-company-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.support-company-context {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.support-company-context img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.support-company-context span {
  font-size: 13px;
  color: #52636d;
}
.support-list-item > small {
  display: block;
  color: #52636d;
  font-size: 12px;
  margin-top: 8px;
}
.company-support-topics {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 280px;
  padding: 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.company-support-topics .support-topic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  white-space: normal !important;
  min-width: 0 !important;
  width: 100%;
  padding: 12px;
}
.company-support-topics .support-topic strong {
  min-width: 0;
  overflow-wrap: break-word;
}
.platform-account-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.platform-account-summary span {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #52636d;
}
.platform-account-summary strong {
  font-size: 18px;
  color: #193438;
}
.platform-count {
  font-size: 13px;
  color: #52636d;
  margin-left: 8px;
}
.platform-account-list .platform-detail-head {
  flex-wrap: wrap;
  gap: 12px;
}
.platform-account-list .platform-detail-head h2 {
  margin-right: auto;
}
.platform-account-list .platform-detail-head select {
  min-height: 42px;
}
.platform-warehouse-field {
  grid-column: 1/-1;
}
.platform-company-choices {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
}
.platform-company-choices label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-company-choices input[type='checkbox'] {
  width: 18px;
  height: 18px;
}
.platform-broadcast-record {
  padding: 20px 24px;
  border-top: 1px solid #e2e8f0;
}
.platform-broadcast-record p {
  white-space: pre-wrap;
  line-height: 1.6;
}
.platform-broadcast-record small {
  color: #52636d;
}
.support-directory .platform-pagination {
  flex-wrap: wrap;
  padding: 12px;
}
.platform-company-detail .platform-company-actions {
  border-top: 1px solid #e2e8f0;
  padding-top: 20px;
}
.brand-preview-mark img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.brand-logo-size-preview {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 12px;
}
.brand-logo-size-preview .logo-frame {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--brand-surface, #fff);
  border-radius: 12px;
}
.brand-logo-size-preview img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.brand-logo-size-preview output {
  font-weight: 700;
}
.domain-provider-guide {
  padding: 16px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  margin-top: 16px;
}
.domain-provider-guide summary {
  cursor: pointer;
  font-weight: 650;
  padding: 4px;
}
.domain-provider-guide p {
  line-height: 1.6;
  font-size: 14px;
}
.domain-dns button {
  min-height: 36px;
}
.domain-dns code {
  overflow-wrap: anywhere;
}
.domain-provider-guide ol {
  padding-left: 24px;
  line-height: 1.7;
  font-size: 14px;
}
.domain-steps .domain-dns {
  min-width: 0;
}
.domain-dns > span {
  font-size: 13px;
}
@media (max-width: 1100px) {
  .platform-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .platform-settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .platform-health-overview {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .platform-settings-grid,
  .platform-health-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .platform-settings-card {
    padding: 18px;
  }
  .platform-health-overview {
    padding: 18px;
  }
  .platform-health-overview > div {
    flex-basis: 70%;
  }
  .platform-account-summary {
    padding: 16px;
  }
  .platform-account-list .platform-detail-head .platform-search {
    width: 100%;
  }
  .platform-filter-bar > .field {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .platform-filter-bar > .field select {
    width: 100%;
  }
  .session-reconnect {
    align-items: flex-start;
  }
  .support-company-context {
    gap: 8px;
  }
}

.platform-company-detail {
  padding: 24px;
}
.platform-company-detail .platform-company-heading {
  margin-bottom: 16px;
}
.platform-company-detail .platform-detail-facts {
  padding: 0;
  gap: 12px;
}
.platform-company-detail .platform-detail-facts span {
  padding: 6px 10px;
  background: #f1f5f9;
  border-radius: 7px;
}
.platform-company-detail .platform-company-actions {
  margin-top: 20px;
  padding-top: 20px;
}
.platform-account-list .platform-detail-head .platform-search {
  flex: 1;
  min-width: 200px;
  width: auto;
}
.platform-account-list .platform-detail-head > select {
  width: 190px;
  flex: 0 0 190px;
}
@media (max-width: 600px) {
  .platform-company-detail {
    padding: 18px;
  }
  .platform-account-list .platform-detail-head > select {
    flex: auto;
    width: 100%;
  }
  .platform-account-list .platform-detail-head .platform-search {
    min-width: 0;
    flex: auto;
    width: 100%;
  }
}

.platform-chat-pagination {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.domain-dns {
  display: block !important;
}
.domain-dns-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.domain-dns-row + .domain-dns-row {
  margin-top: 12px;
}
@media (max-width: 600px) {
  .domain-dns-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .domain-dns-row > span {
    grid-column: 1/-1;
  }
  .domain-dns-row code {
    min-width: 0;
  }
}

.platform-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 7px;
  background: #eaf1fb;
  color: #275785;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}
.platform-owner-badge svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.platform-account-copy > strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.platform-account-copy > strong .platform-owner-badge {
  margin-left: 0;
}

.adoption-request-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.adoption-request-card {
  padding: 26px;
  background: var(--record-gradient);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.adoption-request-card > header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
}
.adoption-request-card h2 {
  margin-top: 8px;
}
.adoption-request-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  overflow-wrap: anywhere;
}
.adoption-request-card .platform-company-facts {
  margin: 0;
}
.adoption-request-card summary {
  cursor: pointer;
  font-weight: 650;
  line-height: 1.6;
}
.adoption-request-details {
  padding: 12px 0;
}
.adoption-request-details h3 {
  font-size: 14px;
  margin: 16px 0 8px;
}
.adoption-request-details p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.adoption-request-card > footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #dde9e5;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.adoption-request-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.platform-page textarea {
  font: inherit;
  resize: vertical;
  min-height: 110px;
  border: 1px solid #d5e5df;
  border-radius: 9px;
  padding: 12px;
  color: #193e40;
}
.adoption-request-card .support-status {
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .adoption-request-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .adoption-request-card {
    padding: 20px;
  }
  .adoption-request-card > header {
    flex-wrap: wrap;
  }
  .adoption-request-card > footer button {
    flex: 1;
  }
}

.platform-ticket-help {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border, #d6e3e5);
  border-radius: 12px;
  background: var(--surface-soft, #f3f8f8);
}
.platform-ticket-help > strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.platform-ticket-help > span {
  font-size: 12px;
  color: var(--muted, #526e74);
}
.platform-ticket-help > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.platform-ticket-help .context-help {
  font-size: 12px;
}

/* Source: demo-preview.css */
.demo-view-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  padding: 9px 20px;
  background: var(--brand-surface, #fff);
  border-bottom: 1px solid var(--surface-border, #dce6e8);
}
.demo-view-switcher > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 650;
  color: var(--surface-muted, #526e74);
}
.demo-view-switcher > span .icon {
  width: 16px;
  height: 16px;
}
.demo-view-switcher > [role='group'] {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface-soft, #f2f6f5);
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 10px;
}
.demo-view-switcher > [role='group'] .btn {
  min-height: 38px;
  font-size: 12px;
  padding: 8px 12px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--surface-muted, #526e74);
}
.demo-view-switcher > [role='group'] .btn:hover {
  background: var(--brand-soft, #eaf5f1);
  color: var(--brand-accent, #0f766e);
}
.demo-view-switcher > [role='group'] .btn.active {
  background: var(--brand-surface, #fff);
  border-color: var(--surface-border, #dce6e8);
  color: var(--brand-accent, #0f766e);
  box-shadow: 0 1px 4px #193e400b;
}
.demo-view-switcher .btn:focus-visible {
  outline: 3px solid var(--brand-accent, #0f766e);
  outline-offset: 2px;
}
.demo-account-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 360px;
  max-width: 100%;
  margin: 0;
}
.demo-account-picker > span {
  flex: none;
  font-size: 12px;
  font-weight: 650;
  color: var(--surface-muted, #526e74);
}
.demo-account-picker .searchable-filter {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  font-size: 13px;
  justify-content: space-between;
}
.demo-account-picker .filter-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-account-picker .icon {
  flex: none;
}
@media (max-width: 580px) {
  .demo-view-switcher {
    gap: 8px;
    padding: 9px 12px;
  }
  .demo-view-switcher > span {
    width: 100%;
    justify-content: center;
  }
  .demo-view-switcher > [role='group'] {
    width: 100%;
    max-width: 410px;
  }
  .demo-view-switcher > [role='group'] .btn {
    flex: 1;
    min-height: 44px;
    padding: 6px;
    font-size: 12px;
    white-space: normal;
    line-height: 1.4;
  }
  .demo-account-picker {
    width: 100%;
  }
}
.demo-relative-control .date-field-trigger {
  display: none !important;
}
.demo-relative-date {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.demo-relative-date select,
.demo-relative-date input {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.demo-relative-date [hidden] {
  display: none !important;
}
.date-time-control.demo-relative-control {
  align-items: start;
}
.demo-weekday-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.demo-weekday-controls select {
  font-size: 13px;
  padding-right: 22px;
  min-height: 44px;
}
.demo-weekly-help {
  border: 1px solid var(--surface-border, #dce6e8);
  background: var(--surface-soft, #f2f6f5);
  border-radius: 9px;
  padding: 12px;
  margin-bottom: 14px !important;
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 580px) {
  .demo-weekday-controls {
    grid-template-columns: 1fr;
  }
}
.approved-demo-bar {
  font-size: 12px;
  background: var(--brand-soft, #edf8f4);
  color: var(--surface-ink, #193e40);
}
.approved-demo-bar .demo-account-picker {
  width: 400px;
}
.approved-demo-bar .demo-publication {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}
.approved-demo-bar .demo-publication span {
  font-size: 12px;
}
.approved-demo-bar .demo-publication .btn {
  min-height: 44px;
}
@media (max-width: 580px) {
  .approved-demo-bar > select {
    width: 100%;
    max-width: 100%;
  }
  .approved-demo-bar .demo-publication {
    width: 100%;
    justify-content: space-between;
  }
}

/* Source: workspace-setup.css */
.setup-guide {
  margin: 0 0 20px;
  border: 1px solid var(--surface-border, #dce6e8);
  overflow: hidden;
}
.setup-guide > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--surface-soft, #f2f6f5);
}
.setup-guide > header > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.setup-guide header strong,
.setup-guide header small {
  display: block;
}
.setup-guide header small {
  margin-top: 3px;
  font-size: 12px;
  color: var(--surface-muted, #526e74);
}
.setup-guide-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
}
.setup-guide nav {
  padding: 12px;
  border-right: 1px solid var(--surface-border, #dce6e8);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.setup-guide nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  color: inherit;
  font: inherit;
  font-size: 12px;
  min-height: 44px;
}
.setup-guide nav button[aria-current='step'] {
  background: var(--brand-soft, #eaf5f1);
  color: var(--brand-accent, #0f766e);
  font-weight: 700;
}
.setup-guide nav button > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 50%;
}
.setup-guide-body > section {
  padding: 22px;
}
.setup-guide-body > section > small {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--surface-muted, #526e74);
}
.setup-guide h2 {
  font-size: 19px;
  margin: 6px 0 16px;
}
.setup-guide dl {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
}
.setup-guide dt {
  font-size: 13px;
  font-weight: 700;
}
.setup-guide dd {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--surface-muted, #526e74);
}
.setup-guide footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.setup-guide .note {
  margin-top: 12px;
  font-size: 11px;
}
.setup-form-help {
  padding: 14px 18px;
  background: var(--brand-soft, #eaf5f1);
  border-left: 3px solid var(--brand-accent, #0f766e);
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 12px;
}
.setup-form-help p {
  margin: 6px 0 0;
}
.setup-guide button:focus-visible {
  outline: 3px solid var(--brand-accent, #0f766e);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .setup-guide-body {
    grid-template-columns: 1fr;
  }
  .setup-guide nav {
    border-right: 0;
    border-bottom: 1px solid var(--surface-border, #dce6e8);
    flex-direction: row;
    overflow: auto;
  }
  .setup-guide nav button {
    min-width: 170px;
  }
  .setup-guide > header {
    padding: 12px;
  }
  .setup-guide-body > section {
    padding: 16px;
  }
}

.setup-guide > header {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  padding: 24px;
}
.setup-guide header small {
  color: inherit;
  opacity: 0.85;
}
.setup-guide header strong {
  font-size: 19px;
}
.setup-percentage {
  font-size: 28px;
  font-weight: 800;
}
.setup-progress {
  height: 5px;
  background: var(--surface-border);
}
.setup-progress > span {
  display: block;
  height: 100%;
  background: var(--brand-secondary);
}
.setup-guide dl > div {
  display: flex;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
}
.setup-instruction-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  font-weight: 700;
}
.setup-guide nav button[aria-current='step'] {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}
.setup-check {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-soft);
  font-size: 13px;
}
.setup-check.is-complete {
  color: #15803d;
}
.setup-invitation {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--brand-accent);
  border-radius: 12px;
  background: var(--brand-surface);
}
.setup-invitation span {
  flex: 1;
  font-size: 13px;
}
.setup-invitation strong {
  display: block;
  margin-bottom: 3px;
}
.setup-finish {
  margin-top: 16px;
}
@media (max-width: 700px) {
  .setup-invitation {
    flex-wrap: wrap;
  }
  .setup-guide > header {
    padding: 18px;
  }
}

.setup-page-guide {
  margin-bottom: 20px;
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--brand-accent);
  border-radius: 12px;
  background: var(--brand-surface);
  overflow: hidden;
}
.setup-page-guide summary,
.setup-modal-guide summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  color: var(--brand-accent);
}
.setup-page-guide summary span,
.setup-modal-guide summary span {
  flex: 1;
}
.setup-page-guide summary strong,
.setup-modal-guide summary strong {
  display: block;
  font-size: 14px;
}
.setup-page-guide summary small,
.setup-modal-guide summary small {
  font-size: 10px;
  letter-spacing: 0.08em;
}
.setup-reference-body {
  padding: 0 18px 16px;
}
.setup-reference-body ol {
  padding-left: 20px;
  margin: 0 0 16px;
  display: grid;
  gap: 12px;
}
.setup-reference-body li {
  padding-left: 5px;
  font-size: 13px;
  line-height: 1.6;
}
.setup-reference-body li::marker {
  color: var(--brand-accent);
  font-weight: 800;
}
.setup-reference-body p {
  margin: 4px 0 0;
  color: var(--surface-muted);
}
.setup-page-guide ol {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.dialog:has(.setup-modal-guide) {
  width: min(1100px, 96vw);
  max-width: 1100px;
}
.dialog-content:has(> .setup-modal-guide) {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
}
.setup-modal-guide {
  overflow: auto;
  background: var(--surface-soft, var(--brand-canvas));
  border-right: 1px solid var(--surface-border);
  min-height: 0;
}
.dialog-content:has(> .setup-modal-guide) > form {
  min-width: 0;
  overflow: hidden;
}
.setup-modal-guide .btn {
  font-size: 11px;
}
.setup-modal-guide summary {
  position: sticky;
  top: 0;
  background: var(--brand-surface);
  z-index: 1;
}
.setup-modal-guide .setup-reference-body {
  padding-top: 14px;
}
@media (max-width: 800px) {
  .setup-page-guide ol {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dialog-content:has(> .setup-modal-guide) {
    display: flex !important;
    flex-direction: column !important;
  }
  .setup-modal-guide {
    max-height: 32vh;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--surface-border);
  }
  .dialog-content:has(> .setup-modal-guide) > form {
    flex: 1;
    min-height: 0;
  }
}

.setup-phase-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.setup-guide .setup-explanation h3,
.setup-action-plan h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin: 0 0 14px;
}
.setup-guide .setup-explanation dl {
  display: block;
  margin: 0;
}
.setup-guide .setup-explanation dl > div {
  background: none;
  border: 0;
  padding: 0 0 14px;
}
.setup-guide .setup-explanation dt {
  font-size: 13px;
}
.setup-explanation {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 18px;
  background: var(--canvas);
}
.setup-action-plan {
  border-left: 3px solid var(--brand-accent, var(--accent));
  padding: 4px 0 4px 18px;
}
.setup-action-plan ol {
  padding-left: 20px;
  line-height: 1.7;
  font-size: 13px;
}
.setup-action-plan li {
  padding-left: 4px;
  margin-bottom: 12px;
}
.setup-guide-body > nav button > small {
  margin-left: auto;
  font-size: 10px;
  color: var(--brand-accent, var(--accent));
}
.setup-complete-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  background: #ecfdf5;
  color: #166534;
  font-size: 13px;
}
.setup-invitation {
  margin-bottom: 18px;
}
.setup-guide-body > section > small {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 10px;
}

.setup-guide {
  border-radius: 20px;
  box-shadow: 0 14px 44px #163c4610;
}
.setup-guide > header {
  padding: 28px 30px;
  position: relative;
  overflow: hidden;
  min-height: 110px;
}
.setup-guide > header:after {
  content: '';
  position: absolute;
  right: 70px;
  top: -80px;
  width: 300px;
  height: 300px;
  border: 50px solid #ffffff09;
  border-radius: 50%;
  pointer-events: none;
}
.setup-guide > header strong {
  font-size: 23px;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.setup-guide > header small {
  font-size: 12px;
  margin-top: 8px;
  opacity: 0.9;
}
.setup-guide > header > div > svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid #ffffff33;
  border-radius: 12px;
  background: #ffffff12;
  box-sizing: content-box;
}
.setup-guide > header .setup-percentage {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.04em;
  background: #ffffff14;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid #ffffff26;
  position: relative;
  z-index: 1;
}
.setup-progress {
  height: 4px !important;
}
.setup-guide-body {
  grid-template-columns: 250px minmax(0, 1fr);
}
.setup-guide-body > nav {
  background: var(--surface-soft, #f8fafb);
  padding: 20px 14px;
  gap: 10px;
}
.setup-guide-body > nav button {
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 56px;
  line-height: 1.45;
  padding: 12px;
  font-size: 12px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.setup-guide-body > nav button[aria-current='step'] {
  border-color: color-mix(in srgb, var(--brand-accent) 24%, transparent);
  background: var(--surface, #fff);
  box-shadow: 0 4px 14px #1c4b5810;
}
.setup-guide-body > nav button > span {
  width: 27px;
  height: 27px;
  font-size: 11px;
  background: var(--surface, #fff);
}
.setup-guide-body > nav button[aria-current='step'] > span {
  background: var(--brand-accent);
  color: var(--brand-accent-ink, #fff);
  border-color: var(--brand-accent);
}
.setup-guide-body > section {
  padding: 30px;
  max-width: 870px;
}
.setup-guide h2 {
  font-size: 25px;
  letter-spacing: -0.035em;
  line-height: 1.3;
  margin: 8px 0 22px;
}
.setup-explanation {
  background: var(--surface-soft, #f8fafb);
  border: 0;
  border-radius: 14px;
  padding: 20px 22px;
}
.setup-explanation h3 {
  color: var(--surface-muted, #526e74);
}
.setup-guide .setup-explanation dl > div:last-child {
  padding-bottom: 0;
}
.setup-guide dd {
  font-size: 12px;
  line-height: 1.65;
}
.setup-action-plan {
  border: 1px solid color-mix(in srgb, var(--brand-accent) 20%, transparent);
  border-radius: 14px;
  padding: 20px 22px;
  background: var(--surface, #fff);
}
.setup-action-plan h3 {
  color: var(--brand-accent);
}
.setup-action-plan ol {
  font-size: 13px;
  line-height: 1.75;
  padding-left: 18px;
  margin: 0 0 14px;
}
.setup-check {
  border-radius: 8px !important;
  padding: 10px 12px !important;
  background: var(--surface-soft, #f8fafb) !important;
  font-size: 12px !important;
}
.setup-check.is-complete {
  background: #ecfdf5 !important;
  color: #166534 !important;
}
.setup-action-plan footer {
  padding-top: 8px;
}
.setup-phase-tabs .btn {
  border-radius: 10px;
}
.setup-invitation {
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 20px #163c4609;
}
.setup-invitation > span {
  font-size: 12px;
}
.setup-invitation strong {
  font-size: 13px;
  margin-bottom: 3px;
}
.setup-finish {
  width: 100%;
  margin-top: 18px;
}
.workflow-guide {
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 14px 44px #163c4610;
}
.workflow-hero {
  position: relative;
  padding: 34px 38px;
  background: var(--brand-accent, #0f766e);
  color: var(--brand-accent-ink, #fff);
  overflow: hidden;
}
.workflow-hero:after {
  content: '';
  width: 350px;
  height: 350px;
  border: 65px solid #ffffff0b;
  border-radius: 50%;
  position: absolute;
  right: -70px;
  top: -150px;
  pointer-events: none;
}
.workflow-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 0.13em;
  font-weight: 700;
  opacity: 0.8;
}
.workflow-eyebrow svg {
  width: 14px;
  height: 14px;
}
.workflow-hero h2 {
  font-size: 34px;
  letter-spacing: -0.045em;
  line-height: 1.16;
  margin: 16px 0 14px;
  position: relative;
  z-index: 1;
}
.workflow-hero p {
  max-width: 520px;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.9;
}
.workflow-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 24px;
  font-size: 11px;
}
.workflow-hero-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.workflow-hero-meta svg {
  width: 15px;
  height: 15px;
}
.workflow-guide-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
}
.workflow-guide-body > nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 14px;
  background: var(--surface-soft, #f8fafb);
  border-right: 1px solid var(--surface-border, #dce6e8);
}
.workflow-guide-body > nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  min-height: 54px;
}
.workflow-guide-body > nav strong {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.workflow-guide-body > nav button > span {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  border: 1px solid var(--surface-border, #dce6e8);
  font-size: 11px;
  background: var(--surface, #fff);
}
.workflow-guide-body > nav button[aria-current='step'] {
  border-color: color-mix(in srgb, var(--brand-accent) 24%, transparent);
  background: var(--surface, #fff);
  color: var(--brand-accent);
  box-shadow: 0 4px 14px #1c4b5810;
}
.workflow-guide-body > nav button[aria-current='step'] > span {
  background: var(--brand-accent);
  color: var(--brand-accent-ink, #fff);
  border-color: var(--brand-accent);
}
.workflow-guide-body > section {
  padding: 30px;
  max-width: 900px;
  min-width: 0;
}
.workflow-guide-body h2 {
  font-size: 25px;
  letter-spacing: -0.035em;
  margin: 8px 0 22px;
}
.workflow-tool-chain {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.workflow-tool-chain button {
  position: relative;
  flex: 1;
  padding: 12px;
  text-align: left;
  min-width: 0;
  background: var(--surface-soft, #f8fafb);
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 10px;
  color: var(--ink);
}
.workflow-tool-chain strong,
.workflow-tool-chain small {
  display: block;
}
.workflow-tool-chain strong {
  font-size: 10px;
  line-height: 1.5;
}
.workflow-tool-chain small {
  font-size: 9px;
  opacity: 0.75;
  margin-top: 4px;
}
.workflow-tool-chain .selected {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
  background: var(--brand-soft, #eaf5f1);
}
.workflow-lesson-content {
  display: grid;
  gap: 20px;
  margin-bottom: 26px;
}
.workflow-lesson-content article {
  display: flex;
  gap: 13px;
}
.workflow-lesson-content article > span {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-soft, #eaf5f1);
  color: var(--brand-accent);
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}
.workflow-lesson-content h3 {
  font-size: 14px;
  margin: 3px 0 8px;
}
.workflow-lesson-content p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  color: var(--surface-muted, #526e74);
}
.workflow-guide footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--surface-border, #dce6e8);
}
.workflow-guide .note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--surface-muted, #526e74);
  margin-top: 14px;
}
.workflow-guide button:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}
@media (max-width: 900px) {
  .setup-guide-body,
  .workflow-guide-body {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .setup-guide-body > section,
  .workflow-guide-body > section {
    padding: 22px;
  }
  .setup-guide-body > nav,
  .workflow-guide-body > nav {
    padding: 14px 10px;
  }
  .workflow-tool-chain {
    flex-wrap: wrap;
  }
  .workflow-tool-chain button {
    min-width: 110px;
  }
}
@media (max-width: 700px) {
  .setup-guide > header {
    padding: 22px 18px;
    min-height: 90px;
  }
  .setup-guide > header strong {
    font-size: 18px;
  }
  .setup-guide > header > div > svg {
    width: 24px;
    height: 24px;
    padding: 7px;
  }
  .setup-guide > header .setup-percentage {
    font-size: 20px;
    padding: 9px;
  }
  .setup-guide-body,
  .workflow-guide-body {
    grid-template-columns: 1fr;
  }
  .setup-guide-body > nav,
  .workflow-guide-body > nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--surface-border);
    gap: 8px;
    padding: 12px;
  }
  .setup-guide-body > nav button,
  .workflow-guide-body > nav button {
    min-width: 180px;
    max-width: 220px;
    min-height: 54px;
    flex-shrink: 0;
  }
  .setup-guide-body > section,
  .workflow-guide-body > section {
    padding: 22px 18px;
  }
  .setup-guide h2,
  .workflow-guide-body h2 {
    font-size: 23px;
  }
  .setup-explanation,
  .setup-action-plan {
    padding: 17px;
  }
  .setup-invitation {
    flex-wrap: wrap;
  }
  .setup-invitation > span {
    flex-basis: 75%;
  }
  .workflow-hero {
    padding: 26px 24px;
  }
  .workflow-hero h2 {
    font-size: 30px;
  }
  .workflow-hero-meta {
    gap: 10px;
    font-size: 10px;
  }
  .workflow-tool-chain button {
    min-width: 0;
    padding: 10px;
  }
  .workflow-tool-chain strong {
    font-size: 9px;
  }
  .workflow-guide footer .btn {
    flex: 1;
    justify-content: center;
  }
}

.workflow-hero h2 {
  color: inherit !important;
  font-size: 29px;
  margin: 14px 0 12px;
}
.workflow-hero {
  padding: 28px 34px;
}
.workflow-hero-meta {
  margin-top: 20px;
}

.setup-guide-body > nav button[aria-current='step'] {
  color: var(--brand-accent);
}
.setup-action-plan ol {
  list-style: decimal;
}
.setup-action-plan li::marker {
  color: var(--brand-accent);
  font-weight: 700;
}

.setup-invitation {
  position: sticky;
  top: 12px;
  z-index: 6;
  margin: 0 0 18px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-ink) 8%, transparent);
  background: var(--brand-surface);
}
.setup-locked {
  opacity: 0.42;
  cursor: not-allowed;
}
.setup-follow-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 9px;
  background: var(--brand-soft);
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-ink);
}
.setup-follow-status > .icon {
  flex: none;
  color: var(--brand-readable-accent);
}
.setup-reference-body > .row {
  gap: 8px;
}
@media (max-width: 700px) {
  .setup-invitation {
    top: 8px;
    gap: 8px;
    padding: 12px;
    flex-wrap: wrap;
  }
  .setup-invitation > span {
    flex: 1;
    min-width: 0;
  }
  .setup-invitation-description {
    display: none;
  }
  .setup-invitation strong {
    margin: 0;
  }
  .setup-invitation .btn {
    margin-left: auto;
  }
  .setup-modal-guide .setup-reference-body {
    max-height: 28dvh;
    overflow: auto;
    overscroll-behavior: contain;
  }
}

.setup-reference-body > h3 {
  font-size: 13px;
  margin: 10px 0;
  color: var(--brand-readable-accent);
}
.setup-follow-information {
  margin-top: 12px;
  border-top: 1px solid var(--surface-border);
  padding-top: 10px;
}
.setup-follow-information > summary {
  font-size: 12px !important;
  padding: 4px !important;
  color: var(--surface-muted);
  cursor: pointer;
}
.setup-form-readiness {
  padding: 10px;
  border-radius: 8px;
  background: var(--brand-soft);
  font-size: 12px;
  line-height: 1.6;
}
.guide-required-field {
  border-left: 3px solid var(--brand-accent);
  padding-left: 10px;
  transition: border-color 0.15s;
}

.onboarding-stages {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}
.onboarding-stages > button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
}
.onboarding-stages > button small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--surface-muted);
}
.onboarding-stages > button[aria-current='step'] {
  border-color: var(--brand-accent);
  background: var(--brand-soft);
}
.onboarding-stages > button:disabled {
  opacity: 0.45;
}
.onboarding-stages .icon {
  flex: none;
  color: var(--brand-readable-accent);
}
.setup-guide > header {
  padding: 18px 24px;
  min-height: 82px;
}
.setup-guide > header strong {
  font-size: 19px;
}
.setup-guide-body > nav button,
.workflow-guide-body > nav button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 3px 10px;
}
.setup-guide-body > nav button > span,
.workflow-guide-body > nav button > span {
  grid-row: 1/3;
}
.setup-guide-body > nav button strong,
.workflow-guide-body > nav button strong {
  font-size: 12px;
  line-height: 1.5;
}
.setup-guide-body > nav button small,
.workflow-guide-body > nav button small {
  grid-column: 2;
  font-size: 10px;
  opacity: 0.7;
}
.setup-action-plan {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.setup-action-plan ol {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.setup-action-plan li {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 12px;
  background: var(--brand-surface);
  border: 1px solid var(--surface-border);
  border-radius: 9px;
}
.setup-action-plan li > span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: none;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  font-size: 12px;
  font-weight: 700;
}
.setup-action-plan li > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.setup-explanation {
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--surface-border);
  background: none;
  margin: 20px 0 0;
}
.setup-explanation > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--surface-muted);
  font-size: 12px;
  cursor: pointer;
}
.setup-explanation dl {
  margin: 14px 0 0;
}
.setup-explanation dl > div {
  display: block;
  padding: 12px;
  border: 0;
  background: var(--brand-surface);
}
.workflow-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  min-height: 100px;
}
.workflow-hero h2 {
  font-size: 22px !important;
  margin: 8px 0 0;
}
.workflow-hero::after,
.setup-guide > header::after {
  display: none;
}
.onboarding-status {
  white-space: nowrap;
  font-size: 12px;
  border: 1px solid #ffffff50;
  border-radius: 20px;
  padding: 8px 12px;
}
.workflow-lesson-content article {
  padding: 14px;
  gap: 12px;
}
.workflow-lesson-content details > summary {
  cursor: pointer;
  color: var(--brand-readable-accent);
  font-size: 11px;
  margin-top: 8px;
}
.workflow-lesson-content p {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 4px;
}
.onboarding-nav-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  opacity: 0.5;
}
.onboarding-nav-status.is-complete {
  color: #15803d;
  opacity: 1;
}
@media (max-width: 700px) {
  .onboarding-stages {
    gap: 8px;
  }
  .onboarding-stages > button {
    flex: 1;
    min-width: 0;
    padding: 10px;
    font-size: 11px;
  }
  .onboarding-stages > span {
    display: none;
  }
  .workflow-hero {
    padding: 18px;
    flex-wrap: wrap;
  }
  .workflow-hero h2 {
    font-size: 19px !important;
  }
  .setup-guide > header {
    padding: 16px;
  }
  .setup-guide-body > section,
  .workflow-guide-body > section {
    padding: 18px;
  }
  .setup-guide-body > nav button,
  .workflow-guide-body > nav button {
    min-width: 165px;
  }
  .setup-action-plan li {
    padding: 10px;
  }
}

/* Source: workspace-experience.css */
.company-logo-frame {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 9px;
}
.company-logo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0 !important;
  flex: none;
}
.signin-brand .company-logo-frame {
  width: 64px;
  height: 64px;
}
.brand-preview-mark {
  overflow: hidden;
  flex: none;
}
.brand-preview-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-crop-editor {
  padding: 16px;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 12px;
}
.logo-crop-editor > p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-muted, #526e74);
  margin-bottom: 16px;
}
.logo-crop-layout {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.logo-crop-layout canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 2px solid var(--brand-accent, #0f766e);
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
  background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 50% / 20px
    20px;
}
.logo-crop-layout output,
[data-form='workspace-branding'] .field > output {
  font-size: 12px;
  color: var(--surface-muted, #526e74);
  font-weight: 650;
}
.logo-crop-layout [data-crop-status] {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 12px;
}
.company-support-workspace {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  height: max(620px, calc(100vh - 225px));
  max-height: 950px;
  overflow: hidden;
}
.company-case-directory {
  padding: 16px;
  border-right: 1px solid var(--surface-border, #dce6e8);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.company-case-directory > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.company-case-directory .field {
  margin: 0;
}
.company-case-directory input,
.company-case-directory select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}
.company-case-list {
  overflow: auto;
  flex: 1;
}
.company-case {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-bottom-color: var(--surface-border, #dce6e8);
  background: transparent;
  padding: 16px 12px;
  border-radius: 9px;
  color: inherit;
  font: inherit;
}
.company-case.selected {
  border-color: var(--brand-accent, #0f766e);
  background: var(--brand-soft, #eaf5f1);
}
.company-case:hover {
  background: var(--surface-soft, #f2f6f5);
}
.company-case-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.company-case-title strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.company-case small,
.company-case time {
  font-size: 11px;
  color: var(--surface-muted, #526e74);
}
.company-case .support-status {
  align-self: flex-start;
}
.company-support-workspace .support-conversation {
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.company-support-workspace .support-thread {
  flex: none;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 24px;
}
.company-support-workspace .support-conversation-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--brand-surface);
  flex: none;
  padding: 20px 24px;
}
.company-support-workspace .support-conversation-head h2 {
  font-size: 18px;
}
.company-support-workspace .support-topic-heading {
  padding: 12px 24px;
  background: var(--surface-soft, #f2f6f5);
}
.company-support-workspace .support-topic-heading h3 {
  display: none;
}
.company-support-workspace .support-composer {
  flex: none;
  padding: 16px 24px;
  border-top: 1px solid var(--surface-border, #dce6e8);
}
.company-support-workspace .support-composer textarea {
  min-height: 84px;
  max-height: 180px;
  resize: vertical;
}
.company-support-workspace .support-composer > .field {
  margin-bottom: 10px;
}
.conversation-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.conversation-identity h2,
.conversation-identity p {
  margin: 0;
}
.conversation-identity p {
  margin-top: 4px;
}
.conversation-identity img,
.platform-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.platform-person-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: #e6f1ef;
  color: #0f766e;
  font-weight: 700;
  font-size: 14px;
}
.platform-contact {
  display: flex;
  align-items: center;
  gap: 12px;
}
.platform-contact-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.platform-contact-copy strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.platform-contact-company {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
  color: #52636d;
}
.platform-contact-company .support-company-logo {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: none;
  overflow: hidden;
  border-radius: 5px;
}
.platform-contact-company .support-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.platform-contact-copy small {
  font-size: 11px;
  color: #64748b;
}
.support-directory .support-list-item {
  padding: 16px;
  text-align: left;
}
.platform-page .support-workspace {
  grid-template-columns: 320px minmax(0, 1fr);
}
.platform-page .support-thread {
  min-height: 260px;
}
.platform-page .support-conversation-head .platform-person-avatar {
  width: 48px;
  height: 48px;
}
.platform-health-tile.state-healthy {
  --health-color: #15803d;
}
.platform-health-tile.state-failed {
  --health-color: #dc2626;
}
.platform-health-tile.state-stale {
  --health-color: #d97706;
}
.platform-health-tile.state-unknown {
  --health-color: #64748b;
}
.health-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--health-background, #f1f5f9);
  color: var(--health-color, #475569);
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.health-state::before,
.support-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.support-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.support-status.is-healthy {
  background: #dcfce7 !important;
  color: #166534 !important;
}
.support-status.is-failed {
  background: #fee2e2 !important;
  color: #991b1b !important;
}
.support-status.is-stale {
  background: #fef3c7 !important;
  color: #92400e !important;
}
.support-status.is-unknown {
  background: #e2e8f0 !important;
  color: #475569 !important;
}
.platform-health-tile.state-healthy .health-state {
  background: #dcfce7;
  color: #166534;
}
.platform-health-tile.state-failed .health-state {
  background: #fee2e2;
  color: #991b1b;
}
.platform-health-tile.state-stale .health-state {
  background: #fef3c7;
  color: #92400e;
}
.health-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  margin: 0 0 18px;
}
.health-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.health-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--health-color);
}
@media (max-width: 800px) {
  .company-support-workspace {
    grid-template-columns: 235px minmax(0, 1fr);
  }
  .platform-page .support-workspace {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .logo-crop-layout {
    grid-template-columns: 1fr;
  }
  .logo-crop-layout canvas {
    max-width: 240px;
    margin: auto;
  }
  .company-support-workspace,
  .platform-page .support-workspace {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }
  .company-case-directory {
    border-right: 0;
    border-bottom: 1px solid var(--surface-border, #dce6e8);
  }
  .company-case-list {
    max-height: 220px;
  }
  .company-support-workspace .support-thread {
    min-height: 0;
    max-height: none;
  }
  .company-support-workspace .support-composer,
  .company-support-workspace .support-conversation-head {
    padding: 16px;
  }
  .platform-contact {
    gap: 9px;
  }
  .platform-person-avatar {
    width: 38px;
    height: 38px;
  }
}
.top .brand .company-logo-frame > .company-logo {
  width: 100%;
  height: 100%;
}
.message-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
@media (max-width: 600px) {
  .top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px !important;
  }
  .top > .row:first-child {
    min-width: 0;
    width: 100%;
    gap: 8px !important;
  }
  .top .brand {
    min-width: 0;
    flex: 1;
  }
  .top .company-brand-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    max-width: none;
    font-size: 13px;
  }
  .top .company-logo-frame {
    width: 32px;
    height: 32px;
  }
  .top > .row:nth-child(2) {
    gap: 8px !important;
  }
  .top .header-clock,
  .top .company-context {
    display: none !important;
  }
}
.message-unread {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 20px;
  background: #0f766e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.support-directory .support-list-item:has(.platform-contact) {
  position: relative;
}
.support-directory .support-list-item:has(.platform-contact) > .message-unread {
  position: absolute;
  right: 12px;
  top: 15px;
}
.support-directory .platform-contact {
  padding-right: 22px;
}
.support-conversation-head .platform-contact-copy > strong {
  font-size: 18px;
}

.support-folder-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--surface-border);
}
.nav-notice-count {
  margin-left: auto;
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 20px;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  font-size: 11px;
  font-weight: 800;
}
.notification-card[data-category='workgrid'] {
  --notice-tone: var(--type-workgrid);
  --notice-pale: var(--type-workgrid-pale);
}
.notification-card[data-category='workgrid'] .notification-symbol {
  background: var(--notice-pale);
  color: var(--notice-tone);
}
.notification-card[data-category='workgrid'] .notification-type {
  color: var(--notice-tone);
}

.notification-category[data-category='workgrid'] {
  --filter-tone: var(--type-workgrid);
  --filter-pale: var(--type-workgrid-pale);
}

.appearance-live-preview {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0 !important;
  background: var(--preview-surface);
  box-shadow: 0 6px 20px #172b3612;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.appearance-preview-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  flex-wrap: wrap;
}
.appearance-preview-tools > strong {
  font-size: 11px;
}
.appearance-preview-tools nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.appearance-preview-tools button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.appearance-preview-tools button[aria-pressed='true'] {
  background: var(--brand-accent);
  color: var(--brand-accent-ink, #fff);
  border-color: var(--brand-accent);
}
.appearance-preview-stage {
  background: var(--preview-canvas);
  padding: 12px;
  color: var(--preview-ink);
}
.appearance-preview-stage > div {
  max-width: 760px;
  margin: auto;
  border: 1px solid #94a3b833;
  border-radius: 9px;
  overflow: hidden;
  background: var(--preview-surface);
}
.appearance-preview-stage.is-phone > div {
  max-width: 290px;
}
.appearance-topbar {
  background: var(--preview-accent);
  color: var(--preview-accent-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  min-height: 60px;
}
.appearance-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
.appearance-brand > strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.appearance-logo {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  background: #ffffff20;
  border-radius: 7px;
}
.appearance-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.appearance-profile {
  border: 1px solid #ffffff60;
  border-radius: 50%;
  font-size: 10px;
  padding: 7px;
}
.appearance-workspace-body {
  display: grid;
  grid-template-columns: 165px 1fr;
  min-height: 190px;
  background: var(--preview-canvas);
}
.appearance-workspace-body aside {
  background: var(--preview-surface);
  padding: 12px 8px;
  border-right: 1px solid #94a3b833;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.appearance-workspace-body aside span {
  padding: 7px;
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.appearance-workspace-body aside svg {
  width: 12px;
  height: 12px;
}
.appearance-nav-selected {
  background: var(--preview-secondary);
  color: var(--preview-secondary-ink);
  border-radius: 6px;
}
.appearance-workspace-body main {
  padding: 16px;
}
.appearance-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.appearance-title h3 {
  font-size: 14px;
  margin: 4px 0;
}
.appearance-title small,
.appearance-sample-card small {
  font-size: 8px;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.appearance-primary,
.appearance-secondary {
  display: inline-block;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 9px;
  font-weight: 600;
  background: var(--preview-accent);
  color: var(--preview-accent-ink);
}
.appearance-secondary {
  background: var(--preview-secondary);
  color: var(--preview-secondary-ink);
}
.appearance-sample-card {
  border: 1px solid #94a3b833;
  border-left: 4px solid var(--preview-secondary);
  padding: 12px;
  border-radius: 8px;
  background: var(--preview-surface);
}
.appearance-sample-card strong {
  display: block;
  font-size: 12px;
  margin-top: 6px;
}
.appearance-sample-card p {
  font-size: 10px;
  margin: 5px 0 10px;
}
.appearance-signin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 230px;
}
.appearance-signin section {
  padding: 20px;
  background: linear-gradient(
    145deg,
    var(--preview-accent),
    var(--preview-secondary)
  );
  color: var(--preview-accent-ink);
}
.appearance-signin h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 16px 0 8px;
}
.appearance-signin section > small {
  font-size: 10px;
  display: block;
  margin-top: 15px;
}
.appearance-signin section p {
  font-size: 11px;
  line-height: 1.6;
}
.appearance-signin main,
.appearance-recovery main {
  padding: 20px;
  background: var(--preview-surface);
}
.appearance-signin main h3,
.appearance-recovery h3 {
  font-size: 14px;
  margin: 0 0 14px;
}
.appearance-preview-stage label {
  display: block;
  font-size: 9px;
  margin-bottom: 10px;
}
.appearance-preview-stage label span {
  display: block;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #94a3b866;
  border-radius: 5px;
  font-size: 10px;
}
.appearance-link {
  display: block;
  color: var(--preview-secondary);
  font-size: 9px;
  margin-top: 10px;
}
.appearance-recovery p {
  font-size: 10px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.appearance-recovery-contact {
  padding: 12px;
  background: var(--preview-canvas);
  border-radius: 7px;
  margin-top: 12px;
  display: grid;
  gap: 5px;
  font-size: 10px;
}
.appearance-recovery-contact > strong {
  font-size: 11px;
  line-height: 1.5;
}
.appearance-recovery-company-help > strong {
  font-size: 10px;
  line-height: 1.5;
}
.appearance-recovery-contact small {
  font-size: 9px;
}
.appearance-preview-stage.is-phone .appearance-workspace-body {
  grid-template-columns: 1fr;
}
.appearance-preview-stage.is-phone aside {
  display: none;
}
.appearance-preview-stage.is-phone .appearance-signin {
  grid-template-columns: 1fr;
}
.appearance-preview-stage.is-phone .appearance-signin section {
  padding: 12px;
}
.appearance-preview-stage.is-phone .appearance-signin section h3 {
  font-size: 14px;
  margin: 10px 0 0;
}
.appearance-preview-stage.is-phone .appearance-signin section > small,
.appearance-preview-stage.is-phone .appearance-signin section > p {
  display: none;
}
.appearance-preview-stage.is-phone main {
  padding: 12px;
}
.appearance-preview-stage.is-phone .appearance-title {
  flex-wrap: wrap;
}
.announcement-folder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.company-announcement-history {
  display: grid;
  gap: 16px;
}
.company-announcement-history article {
  overflow: hidden;
}
.company-announcement-history header {
  display: grid;
  gap: 5px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.company-announcement-history header small {
  font-size: 11px;
  color: var(--muted);
}
.company-announcement-history article > p {
  padding: 0 18px;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
}
.company-announcement-history footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--canvas);
  border-top: 1px solid var(--line);
}
.company-announcement-history footer .danger {
  margin-left: auto;
}
.announcement-revoked {
  color: #9f1239;
  background: #fff1f2;
  padding: 10px !important;
}
@media (max-width: 700px) {
  .appearance-live-preview {
    position: relative;
  }
  .appearance-preview-tools {
    gap: 7px;
  }
  .appearance-preview-tools > strong {
    width: 100%;
  }
  .appearance-preview-tools nav {
    margin-left: 0;
  }
  .appearance-preview-stage {
    padding: 7px;
  }
  .appearance-workspace-body {
    grid-template-columns: 1fr;
  }
  .appearance-workspace-body aside {
    display: none;
  }
  .appearance-signin {
    grid-template-columns: 1fr;
  }
  .appearance-signin section > p {
    display: none;
  }
  .appearance-signin section {
    padding: 12px;
  }
  .appearance-signin section h3 {
    font-size: 14px;
    margin-top: 10px;
  }
  .appearance-signin section > small {
    margin-top: 10px;
  }
  .appearance-signin main {
    padding: 12px;
  }
  .appearance-title {
    flex-wrap: wrap;
  }
}
.appearance-live-preview > .brand-preview-header[hidden] {
  display: none !important;
}
.appearance-live-preview > .appearance-preview-tools {
  display: flex;
  gap: 10px;
}
.appearance-live-preview > .appearance-preview-stage {
  display: block;
  gap: 0;
}
.appearance-live-preview .appearance-brand strong {
  font-size: 14px;
}
.appearance-live-preview .appearance-preview-stage h3 {
  color: inherit;
}
.appearance-form > .form-grid {
  position: relative;
  z-index: 1;
}
.appearance-live-preview .appearance-primary,
.appearance-live-preview .appearance-secondary {
  line-height: 1.4;
}
.appearance-live-preview .appearance-signin main h3 {
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .appearance-preview-tools {
    padding: 8px 10px;
  }
  .appearance-signin main {
    padding: 10px;
  }
  .appearance-signin section {
    padding: 10px;
  }
}

.appearance-workspace > .appearance-topbar {
  background: var(--preview-surface);
  color: var(--preview-ink);
  border-bottom: 1px solid #94a3b833;
}
.appearance-workspace .appearance-logo {
  background: var(--preview-accent);
  color: var(--preview-accent-ink);
}
.appearance-nav-selected {
  background: color-mix(
    in srgb,
    var(--preview-accent) 9%,
    var(--preview-surface)
  );
  color: var(--preview-accent);
}
.appearance-workspace .appearance-profile {
  border-color: #94a3b866;
  color: var(--preview-accent);
}

/* Logo images retain their own transparency, without an added tile. */
.company-logo-frame,
.company-logo-frame img,
.signin-company-logo,
.finish-brand-preview img,
.appearance-logo,
.support-company-logo:has(img),
.platform-company-icon:has(img),
.brand-preview-mark:has(img),
.directory-company-logo:has(img),
.directory-company-logo img {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.company-logo-frame img,
.signin-company-logo,
.finish-brand-preview img {
  border-radius: 0;
}
.appearance-device-tabs {
  display: flex;
  gap: 4px;
}
.appearance-page-preview {
  margin-bottom: 20px;
}
.appearance-page-preview .appearance-live-preview {
  position: relative;
  margin: 0;
  max-height: none;
}
.appearance-page-preview .appearance-preview-stage {
  padding: 20px;
}
.sidebar .nav-btn .nav-notice-count,
.notification-category span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
  flex: 0 0 auto;
  padding: 0 5px !important;
  min-width: 22px;
  height: 22px;
}
.mobile-current-page {
  display: none;
}
.mobile-navigation [aria-current='page'] {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  border-color: var(--brand-accent);
  box-shadow: inset 3px 0 var(--brand-accent);
}
.modal-isolated,
.modal-isolated body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.modal-isolated #app {
  pointer-events: none;
}
dialog::backdrop {
  background: #152d3b70;
  backdrop-filter: blur(5px);
}
dialog,
dialog .dialog-content,
dialog .form-grid {
  overscroll-behavior: contain;
}
@media (max-width: 700px) {
  .mobile-clock-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .mobile-current-page {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    margin-left: auto;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--brand-surface);
    color: var(--surface-ink);
    font: inherit;
    font-weight: 600;
  }
  .mobile-current-page span {
    max-width: 155px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .appearance-preview-tools nav {
    flex-wrap: wrap;
  }
  .appearance-page-preview .appearance-preview-stage {
    padding: 10px;
  }
}

.dialog:has(.mobile-navigation)[open] {
  display: flex;
  flex-direction: column;
  max-height: 85dvh;
  overflow: hidden;
}
.dialog:has(.mobile-navigation) > .dialog-header {
  flex: none;
}
.dialog:has(.mobile-navigation) > .dialog-content {
  overflow: auto;
  min-height: 0;
  flex: 1;
  overscroll-behavior: contain;
}

.dialog:has(.record-deletion) .dialog-header {
  flex-wrap: wrap;
  gap: 16px;
}
.dialog:has(.record-deletion) .dialog-header h2 {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dialog:has(.record-deletion) .dialog-header-actions {
  margin-left: auto;
  flex: none;
}
.record-deletion {
  display: grid;
  gap: 22px;
}
.record-deletion > p {
  margin: 0;
  line-height: 1.75;
}
.record-deletion > .note {
  padding: 16px;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 10px;
  background: var(--surface-soft, #f5f8f7);
}
.record-deletion > label {
  display: grid;
  gap: 12px;
  padding-top: 2px;
  font-weight: 600;
}
.record-deletion input {
  width: 100%;
  min-height: 46px;
  margin: 0;
}
.record-deletion > [role='alert']:empty {
  display: none;
}
.record-deletion > .dialog-footer {
  margin: 0;
  padding-top: 20px;
  gap: 12px;
  border-top: 1px solid var(--surface-border, #dce6e8);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .record-deletion > .dialog-footer > button {
    flex: 1 1 140px;
    min-height: 44px;
  }
}
.confirmation-dialog {
  max-width: 500px;
}
.confirmation-dialog p {
  line-height: 1.7;
  font-size: 14px;
  margin: 0;
}
.confirmation-dialog > .dialog-footer {
  margin: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--surface-border);
  gap: 12px;
}
.appearance-preview-tools {
  justify-content: space-between;
}
[data-profile-preview] .brand-preview-mark {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  flex: none;
}
[data-profile-preview] .brand-preview-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.profile-avatar {
  overflow: hidden;
  flex: none;
}

.domain-provider-guide {
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
}
.domain-provider-guide > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--brand-readable-accent);
  cursor: pointer;
}
.cloudflare-steps {
  padding-left: 22px !important;
  display: grid;
  gap: 18px;
  margin: 18px 0;
}
.cloudflare-steps > li {
  list-style: decimal outside;
  padding-left: 5px;
  font-size: 13px;
  line-height: 1.6;
}
.cloudflare-steps > li > strong {
  display: flex;
  align-items: center;
  gap: 7px;
}
.cloudflare-steps > li.is-complete > strong {
  color: #15803d;
}
.cloudflare-steps p {
  font-size: 12px;
  line-height: 1.65;
  margin: 6px 0 10px;
}
.cloudflare-steps .field {
  margin: 12px 0 6px;
}
.cloudflare-steps small {
  font-size: 11px;
  color: var(--surface-muted);
}
.cloudflare-troubleshooting {
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.cloudflare-troubleshooting summary {
  font-size: 12px;
  cursor: pointer;
  color: var(--brand-readable-accent);
}
.cloudflare-troubleshooting dl {
  font-size: 12px;
  line-height: 1.6;
  margin: 12px 0;
}
.cloudflare-troubleshooting dt {
  font-weight: 700;
  margin-top: 10px;
}
.cloudflare-troubleshooting dd {
  margin: 4px 0 12px;
  color: var(--surface-muted);
}
.domain-gateway-help {
  padding: 12px;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
}
.domain-start-guide ol {
  list-style: decimal outside;
  padding-left: 22px;
  text-align: left;
  max-width: 600px;
  font-size: 13px;
  line-height: 1.8;
}

.company-announcement-back {
  margin-bottom: 18px;
}
.workspace .company-announcement-content > header {
  display: block;
  margin: 0;
  padding: 24px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--brand-surface);
}
.company-announcement-content h2 {
  margin: 10px 0;
}
.company-announcement-content > p {
  padding: 24px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
.company-recipient-directory {
  margin-top: 20px;
}
.workspace .company-recipient-directory > header {
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid var(--surface-border);
}
.company-recipient-directory h2 > span {
  display: inline-block;
  padding: 3px 8px;
  margin-left: 5px;
  font-size: 12px;
  border-radius: 20px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.company-recipient-directory > nav {
  padding: 16px 20px 0;
}
.company-recipient-directory header p {
  font-size: 12px;
  color: var(--surface-muted);
  margin-top: 5px;
}
.company-recipient-filters {
  display: flex;
  gap: 10px;
  padding: 0 20px 20px;
  flex-wrap: wrap;
}
.company-recipient-filters > label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
}
.company-recipient-filters .icon {
  flex: none;
}
.company-recipient-filters input {
  width: 100%;
  min-width: 0;
}
.company-recipient-filters select {
  width: auto;
  flex: 1 1 170px;
}
.company-recipient-list > article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--surface-border);
}
.company-recipient-list > article > div {
  flex: 1;
  min-width: 0;
}
.company-recipient-list strong,
.company-recipient-list small {
  display: block;
  overflow-wrap: anywhere;
}
.company-recipient-list small {
  font-size: 11px;
  color: var(--surface-muted);
  margin-top: 4px;
}
.company-recipient-list .avatar {
  overflow: hidden;
  flex: none;
}
.company-delivery-state {
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #f0fdf4;
  color: #166534;
}
.company-delivery-state.is-revoked {
  background: #fff1f2;
  color: #9f1239;
}
.company-recipient-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  flex-wrap: wrap;
}
.company-recipient-pagination > span {
  white-space: nowrap;
}
.company-recipient-legacy {
  padding: 14px 20px;
  background: #fffbeb;
  font-size: 12px;
  color: #854d0e;
}
@media (max-width: 600px) {
  .company-recipient-list > article {
    flex-wrap: wrap;
  }
  .company-delivery-state {
    margin-left: 44px;
  }
  .company-recipient-list > article > button {
    margin-left: auto;
  }
  .company-recipient-filters {
    padding: 0 16px 16px;
  }
  .company-recipient-list > article {
    padding: 16px;
  }
}

@media (max-width: 600px) {
  .company-recipient-list > article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px 12px;
  }
  .company-recipient-list > article > .avatar {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .company-recipient-list > article > div {
    grid-column: 2/4;
  }
  .company-recipient-list > article > .company-delivery-state {
    grid-column: 2;
    margin: 0;
    justify-self: start;
  }
  .company-recipient-list > article > .company-delivery-state.is-revoked {
    grid-column: 2/4;
  }
  .company-recipient-list > article > button {
    grid-column: 3;
    margin: 0;
    min-width: 70px;
  }
  .company-recipient-list strong {
    font-size: 13px;
    line-height: 1.4;
  }
  .company-recipient-list small {
    line-height: 1.5;
  }
  .company-recipient-list .company-delivery-state {
    font-size: 10px;
    white-space: normal;
  }
}

.appearance-recovery-company-help p {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.65;
  margin: 12px 0;
}

.workgrid-contact-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 14px;
  margin: 0 0 24px;
}
.workgrid-contact-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
}
.workgrid-contact-channel > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--brand-soft);
  border-radius: 12px;
  color: var(--brand-readable-accent);
  flex: none;
}
.workgrid-contact-channel > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.workgrid-contact-channel small {
  display: block;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 6px;
  font-weight: 400;
}
.workgrid-contact-channel.is-selected {
  border-color: var(--brand-accent);
  background: var(--brand-soft);
}
.workspace-back-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 18px;
}

.account-creation-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.account-creation-progress li {
  padding: 10px 14px;
  background: var(--surface-soft);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}
.account-creation-progress [aria-current='step'] {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  font-weight: 650;
}

.appearance-recovery-contact .appearance-recovery-company-help {
  margin: 14px 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.appearance-recovery-contact details {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #dce8e8);
}
.appearance-recovery-contact summary {
  cursor: pointer;
}

/* Source: company-access-art.css */
.access-art {
  position: relative;
  isolation: isolate;
  flex: 1 1 180px;
  min-height: 180px;
  width: 100%;
  --access-accent: var(--login-accent, var(--recovery-accent, #0f766e));
  --access-secondary: var(
    --login-secondary,
    var(--recovery-secondary, #2563a6)
  );
  --access-surface: var(--recovery-surface, #fff);
  --access-ink: var(--recovery-ink, #213c40);
}
.access-art > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.access-halo {
  fill: var(--access-accent);
  opacity: 0.06;
}
.access-orbit {
  stroke: var(--access-accent);
  stroke-opacity: 0.22;
  stroke-dasharray: 3 7;
}
.access-link {
  stroke: var(--access-secondary);
  stroke-opacity: 0.15;
  stroke-width: 2;
}
.access-card {
  fill: var(--access-surface);
  stroke: color-mix(in srgb, var(--access-accent) 20%, var(--access-surface));
  stroke-width: 1.5;
  filter: drop-shadow(0 8px 12px #0f172a0a);
}
.access-accent {
  fill: var(--access-accent);
}
.access-secondary {
  fill: var(--access-secondary);
}
.access-accent-soft {
  fill: color-mix(in srgb, var(--access-accent) 14%, var(--access-surface));
}
.access-secondary-soft {
  fill: color-mix(in srgb, var(--access-secondary) 17%, var(--access-surface));
}
.access-grid {
  fill: color-mix(in srgb, var(--access-ink) 6%, var(--access-surface));
}
.access-check {
  stroke: var(--login-accent-ink, var(--recovery-accent-ink, #fff));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.access-large-check {
  stroke-width: 4;
}
.access-accent-stroke {
  stroke: var(--access-accent);
  stroke-opacity: 0.65;
  stroke-width: 5;
  stroke-linecap: round;
}
.access-secondary-stroke {
  stroke: var(--access-secondary);
  stroke-opacity: 0.6;
  stroke-width: 5;
  stroke-linecap: round;
}
.access-muted-line {
  stroke: var(--access-ink);
  stroke-opacity: 0.15;
  stroke-width: 4;
  stroke-linecap: round;
}
.access-dot {
  fill: var(--access-accent);
  opacity: 0.55;
}
.access-spark {
  stroke: var(--access-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}
.signin-story {
  justify-content: flex-start;
  gap: 24px;
}
.signin-story:after {
  display: none;
}
.signin-story-copy {
  flex: none;
}
.signin-story .access-art {
  --access-surface: #fff;
  --access-ink: #213c40;
  min-height: 180px;
}
.signin-story .access-halo {
  fill: #fff;
  opacity: 0.06;
}
.signin-story .access-orbit {
  stroke: #fff;
  stroke-opacity: 0.2;
}
.signin-story .access-link {
  stroke: #fff;
  stroke-opacity: 0.15;
}
.signin-story .access-dot,
.signin-story .access-spark {
  fill: #fff;
  stroke: #fff;
  opacity: 0.35;
}
.signin-story.is-quiet .access-art {
  min-height: 340px;
}
.signin-story h1 {
  margin: 10px 0 15px;
}
.signin-story-rule {
  margin-top: 20px;
}
.signin-brand {
  flex: none;
}
.auth-shell .auth-recovery-art {
  min-height: 100%;
  justify-content: flex-start;
  gap: 24px;
}
.auth-recovery-art .auth-copy {
  flex: none;
  margin: 8px 0 0;
}
.auth-recovery-art .auth-copy h1 {
  margin: 12px 0 18px;
}
.auth-art .access-art {
  height: auto;
  max-width: none;
  margin: 0;
  min-height: 220px;
  flex: 1 1 220px;
}
.auth-recovery-art .brand {
  flex: none;
}
.auth-recovery-art .recovery-art-caption {
  flex: none;
  margin: 0 auto;
  min-height: 40px;
}
.auth-recovery-art.is-quiet .access-art {
  min-height: 400px;
}
@media (max-width: 760px) {
  .signin-story {
    gap: 16px;
  }
  .signin-story .access-art {
    min-height: 125px;
    flex-basis: 125px;
  }
  .signin-story.is-quiet .access-art {
    min-height: 190px;
  }
  .auth-shell .auth-recovery-art {
    min-height: 0;
    gap: 18px;
  }
  .auth-art .access-art {
    min-height: 150px;
    flex-basis: 150px;
  }
  .auth-recovery-art.is-quiet .access-art {
    min-height: 190px;
  }
  .auth-recovery-art .auth-copy {
    margin: 0;
  }
  .auth-recovery-art .auth-copy h1 {
    font-size: 32px;
    margin: 8px 0;
  }
  .auth-recovery-art .recovery-art-caption {
    margin: 0 auto;
  }
}

.access-art svg {
  max-width: 100%;
}
.access-art[data-art-style='minimal'] .access-card,
.access-art[data-art-style='panorama'] .access-card {
  stroke-opacity: 0.3;
  filter: drop-shadow(0 12px 20px #0d354620);
}

.access-art[data-art-style='custom'] {
  overflow: hidden;
  border-radius: 24px;
  min-height: 240px;
}
.access-art[data-art-style='custom'] > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.signin-story:has([data-art-style='cutout']),
.auth-recovery-art:has([data-art-style='cutout']),
.appearance-signin > section:has([data-art-style='cutout']),
.appearance-recovery-story:has([data-art-style='cutout']) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.signin-story > .access-art[data-art-style='cutout'],
.auth-recovery-art > .access-art[data-art-style='cutout'],
.appearance-signin > section > .access-art[data-art-style='cutout'],
.appearance-recovery-story > .access-art[data-art-style='cutout'] {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 100%;
  z-index: -1;
  pointer-events: none;
}
.access-art[data-art-style='cutout'] > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.access-art[data-art-style='cutout'] {
  overflow: hidden;
}
.access-art-thumbnail .access-art[data-art-style='custom'] {
  border-radius: 12px;
  min-height: 0;
}

.appearance-live-preview .access-art {
  --access-accent: var(--preview-accent);
  --access-secondary: var(--preview-secondary);
  --access-surface: var(--preview-surface);
  --access-ink: var(--preview-ink);
  --login-accent-ink: var(--preview-accent-ink);
}
.appearance-signin > section .access-art {
  --access-surface: #fff;
  --access-ink: #213c40;
}

.signin-page,
.platform-signin,
#app:has(> .auth-shell) {
  position: relative;
  isolation: isolate;
}
.signin-page::before,
.platform-signin::before,
#app:has(> .auth-shell)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    var(--login-accent, var(--recovery-accent, #0f766e)),
    var(--login-secondary, var(--recovery-secondary, #0f766e))
  );
  mask: url('/assets/workgrid-geometry.svg') center top / 1100px 1283px repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
}
.signin-frame {
  position: relative;
  isolation: isolate;
}
.signin-panel {
  background: var(--brand-surface, #fff);
}
#app:has(> .auth-shell) {
  padding: clamp(16px, 3vw, 40px);
  min-height: 100dvh;
  background: var(--recovery-canvas, #f5f8f9);
}
#app > .auth-shell {
  position: relative;
  max-width: 1200px;
  min-height: calc(100dvh - 2 * clamp(16px, 3vw, 40px));
  margin: auto;
  border: 1px solid
    color-mix(
      in srgb,
      var(--recovery-ink, #213c40) 14%,
      var(--recovery-surface, #fff)
    );
  border-radius: 22px;
  overflow: hidden;
  background: var(--recovery-surface, #fff);
  box-shadow: 0 18px 55px
    color-mix(in srgb, var(--recovery-ink, #213c40) 10%, transparent);
}
@media (max-width: 650px) {
  .signin-page::before,
  #app:has(> .auth-shell)::before {
    mask-size: 760px 887px;
    opacity: 0.13;
  }
}
@media print, (forced-colors: active) {
  .signin-page::before,
  .platform-signin::before,
  #app:has(> .auth-shell)::before {
    display: none;
  }
}

/* Source: form-controls.css */
.control-guidance {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #637980);
  margin-top: 7px;
}
.account-delivery {
  border: 1px solid var(--line, #dce6e8);
  border-radius: 14px;
  padding: 18px;
  margin: 8px 0;
  min-width: 0;
}
.account-delivery legend {
  font-weight: 700;
  padding: 0 8px;
}
.account-delivery p,
.account-delivery small {
  font-size: 12px;
  color: var(--muted, #637980);
  line-height: 1.5;
}
.account-delivery .check {
  display: flex;
  gap: 10px;
  align-items: start;
  margin: 12px 0;
}
.account-delivery input[type='checkbox'] {
  width: 18px;
  min-height: 18px;
  margin: 0;
  flex: none;
}
.timezone-trigger,
.color-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  border: 1px solid var(--line, #dce6e8);
  border-radius: 9px;
  background: var(--surface, #fff);
  padding: 10px 12px;
  color: inherit;
}
.timezone-options,
.color-options {
  border: 1px solid var(--line, #dce6e8);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface, #fff);
  margin-top: 8px;
  box-shadow: 0 12px 32px #16383e12;
}
.timezone-options > div {
  max-height: 220px;
  overflow: auto;
  margin-top: 8px;
}
.timezone-options button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px;
  border-radius: 6px;
}
.timezone-options button[aria-selected='true'] {
  background: #0f766e16;
  color: var(--accent, #0f766e);
}
.color-trigger:before {
  content: '';
  background: var(--chosen-color);
  border: 1px solid #b6c7cc;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  margin-right: 12px;
}
.color-options label {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
  font-size: 12px;
}
.color-options input[type='range'] {
  width: 100%;
  height: 24px;
  min-height: 24px;
  padding: 0;
  accent-color: var(--accent, #0f766e);
}
.color-swatches {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.color-swatches button {
  width: 25px;
  height: 25px;
  min-height: 25px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ccdadd;
}
[hidden] {
  display: none !important;
}

.shared-color {
  width: 100%;
  min-width: 0;
  align-self: start;
}
.brand-color-grid .field:has(.shared-color) {
  align-self: start;
}
.color-options .color-hex {
  min-width: 0;
  width: 100%;
  padding: 6px;
  font-size: 12px;
}

.dialog .field,
.platform-modal-fields .field {
  align-content: start;
  grid-auto-rows: max-content;
}
.dialog .field > .control-guidance,
.platform-modal-fields .field > .control-guidance {
  margin-top: 0;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
}
.account-delivery.full {
  grid-column: 1/-1;
}

.shared-color {
  position: relative;
  min-width: 0;
}
.color-options {
  position: fixed;
  z-index: 100;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 16px;
  box-shadow: 0 14px 50px #15343f30;
  border-radius: 16px;
  margin: 0;
  background: var(--surface, #fff);
}
.color-wheel-layout {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 2px auto 14px;
  touch-action: none;
}
.color-wheel {
  width: 220px;
  height: 220px;
  display: block;
  cursor: crosshair;
  touch-action: none;
}
.color-sv {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  cursor: crosshair;
  touch-action: none;
  box-shadow: 0 0 0 1px #ffffff70;
}
.color-sv i {
  position: absolute;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #263d42;
  border-radius: 50%;
  pointer-events: none;
}
.color-current {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
}
.color-current span {
  width: 32px;
  height: 24px;
  border: 1px solid #78919650;
  border-radius: 6px;
}
.color-options label {
  grid-template-columns: 70px minmax(0, 1fr) 37px;
  margin: 12px 0;
  font-size: 11px;
  gap: 9px;
}
.color-options label:has(.color-hex) {
  grid-template-columns: 70px minmax(0, 1fr);
}
.color-options output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.color-options input {
  min-width: 0;
}
.color-options input[type='range'] {
  min-height: 24px;
  height: 24px;
  padding: 0;
}
.color-options .color-rgb {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.color-options .color-rgb label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 5px 0;
  font-size: 11px;
}
.color-options .color-rgb input {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  min-height: 38px;
}
.color-options .color-swatches {
  justify-content: space-between;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.color-options .color-swatches button {
  width: 25px;
  height: 25px;
  min-height: 25px;
}
.color-options input[data-hsv='0'] {
  accent-color: var(--accent);
}

.color-options[popover] {
  inset: auto;
  margin: 0;
  color: inherit;
}

.timezone-trigger {
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-height: 56px;
}
.timezone-trigger > span:first-child {
  flex: 1;
  min-width: 0;
}
.timezone-trigger strong,
.timezone-options strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}
.timezone-trigger small,
.timezone-options small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--surface-muted, #637b83);
  line-height: 1.5;
}
.timezone-trigger b,
.timezone-meta b {
  font-size: 10px;
  font-weight: 650;
  background: var(--brand-soft, #edf5f5);
  color: var(--brand-accent, #0f766e);
  border-radius: 6px;
  padding: 4px 7px;
  white-space: nowrap;
}
.timezone-options {
  padding: 10px;
  max-width: 100%;
  box-shadow: 0 16px 48px #173b4826;
}
.timezone-options > [role='listbox'] {
  max-height: 290px;
  overflow: auto;
}
.timezone-options [role='option'] {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  border-bottom: 1px solid var(--surface-border, #e7eeef);
}
.timezone-options [role='option'] > span:first-child {
  min-width: 0;
}
.timezone-options [role='option'] small {
  overflow-wrap: anywhere;
}
.timezone-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.timezone-meta small {
  font-size: 10px;
}
.timezone-options [aria-selected='true'] {
  background: var(--brand-soft, #edf5f5);
}
.timezone-options button:focus-visible {
  outline: 2px solid var(--brand-accent, #0f766e);
  outline-offset: -2px;
}
@media (max-width: 500px) {
  .timezone-options [role='option'] {
    gap: 6px;
    padding: 9px 5px;
  }
  .timezone-options [role='option'] small {
    font-size: 10px;
  }
  .timezone-meta b {
    font-size: 9px;
  }
}

.timezone-regions {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  max-height: none !important;
  overflow: visible !important;
}
.timezone-options .timezone-regions > button {
  flex: 1;
  width: auto;
  text-align: center;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  padding: 9px 5px;
  color: var(--ink, #213c40);
}
.timezone-options .timezone-regions > [aria-pressed='true'] {
  background: var(--brand-accent, var(--accent, #0f766e));
  color: var(--brand-accent-ink, #fff);
  border-color: transparent;
}
.timezone-options > [role='listbox'] {
  max-height: 340px !important;
  scrollbar-width: thin;
}
.timezone-options [role='option'] {
  min-height: 75px;
}
.timezone-options .timezone-id {
  font-size: 9px;
  opacity: 0.7;
  margin-top: 3px;
}
.timezone-options [role='option'] strong {
  font-size: 13px;
}
.timezone-options .timezone-help {
  font-size: 10px;
  line-height: 1.6;
  color: var(--surface-muted, #637b83);
  padding: 10px 3px 0;
  margin: 0;
}
.timezone-options .timezone-empty {
  font-size: 12px;
  padding: 14px;
  line-height: 1.6;
  color: var(--surface-muted, #637b83);
}
.timezone-trigger > span:first-child small {
  font-size: 10px;
  line-height: 1.55;
  margin-top: 2px;
}
.timezone-options .timezone-meta {
  padding-left: 5px;
}
.timezone-options [role='option'] small {
  line-height: 1.55;
}
@media (max-width: 500px) {
  .timezone-trigger > span:first-child small {
    font-size: 9px;
  }
  .timezone-options > [role='listbox'] {
    max-height: 260px !important;
  }
  .timezone-options [role='option'] {
    min-height: 76px;
  }
}

/* Shared action geometry. Card pickers and navigation keep their own layouts. */
:root {
  /* Category identities are fixed across workspaces; company colors own selection and branding. */
  --type-workgrid: #334155;
  --type-workgrid-pale: #f1f5f9;
  --type-announcements: #c2410c;
  --type-announcements-pale: #fff7ed;
  --type-schedule: #1d4ed8;
  --type-schedule-pale: #eff6ff;
  --type-requests: #6d28d9;
  --type-requests-pale: #f5f3ff;
  --type-time: #4d7c0f;
  --type-time-pale: #f7fee7;
  --type-pay: #166534;
  --type-pay-pale: #f0fdf4;
  --type-messages: #0e7490;
  --type-messages-pale: #ecfeff;
  --type-cases: #be185d;
  --type-cases-pale: #fdf2f8;
  --type-other: #475569;
  --type-other-pale: #f1f5f9;
  --type-leave: var(--type-requests);
  --type-leave-pale: var(--type-requests-pale);
  --type-availability: #0f766e;
  --type-availability-pale: #f0fdfa;
  --type-swap: var(--type-schedule);
  --type-swap-pale: var(--type-schedule-pale);
  --type-drop: var(--type-other);
  --type-drop-pale: var(--type-other-pale);
  --type-correction: var(--type-announcements);
  --type-correction-pale: var(--type-announcements-pale);
  --type-transfer: var(--type-cases);
  --type-transfer-pale: var(--type-cases-pale);
  --type-safety: var(--type-announcements);
  --type-safety-pale: var(--type-announcements-pale);
  --type-equipment: var(--type-messages);
  --type-equipment-pale: var(--type-messages-pale);
  --type-behavior: var(--type-requests);
  --type-behavior-pale: var(--type-requests-pale);
  --type-management: var(--type-cases);
  --type-management-pale: var(--type-cases-pale);
  --action-gap: 8px;
  --action-group-gap: 12px;
  --control-height: 40px;
  --control-compact-height: 36px;
  --control-period-height: 48px;
}
:is(.layout, .dialog) :is(.btn, .icon-btn) {
  align-items: center;
  justify-content: center;
  gap: var(--action-gap);
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
  max-width: 100%;
}
:is(.layout, .dialog) :is(.btn, .icon-btn) > .icon {
  flex: none;
  display: block;
}
:is(.layout, .platform-page) .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
}
:is(.layout, .platform-page) .badge > :is(.icon, .platform-icon) {
  flex: none;
}
.workspace .page-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
}
.workspace .page-head > .page-head-actions {
  justify-content: flex-start;
  align-items: center;
}
.workspace .page-head-actions:empty {
  display: none;
}
.workspace .page-head-actions > .btn {
  margin: 0;
  min-height: 42px;
}
.workspace :is(.page-head, .card-head) {
  min-width: 0;
}
.workspace :is(.page-head, .card-head) > div:first-child {
  min-width: 0;
}
.workspace :is(.page-head, .card-head) > .row {
  flex-wrap: wrap;
  gap: var(--action-gap);
}
.workspace .card-head > .row {
  justify-content: flex-end;
}
.workspace .page-head h1 {
  overflow-wrap: anywhere;
}
.workspace
  :is(
    .timecard-row-actions,
    .notification-actions,
    .account-access-actions,
    .shift-coverage-actions,
    .staffing-actions,
    .report-actions
  ) {
  align-items: center;
  gap: var(--action-gap);
  flex-wrap: wrap;
}
:is(.dialog .dialog-footer, .platform-dialog-footer) {
  align-items: center;
  gap: var(--action-group-gap);
  flex-wrap: wrap;
}
:is(.dialog .dialog-footer, .platform-dialog-footer) > :is(button, .btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--action-gap);
  line-height: 1.35;
  min-height: 44px;
  margin: 0;
}
.platform-page :is(button, .button-link) {
  line-height: 1.35;
}
.platform-page
  :is(.platform-filter-bar, .platform-person-search)
  :is(input, select, button) {
  min-height: var(--control-height);
  height: var(--control-height);
  box-sizing: border-box;
}
.platform-page
  :is(.platform-filter-bar, .platform-person-search)
  > :is(label, .platform-search) {
  min-height: var(--control-height);
  align-items: center;
}
.platform-page :is(.platform-filter-bar, .platform-person-search) input {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.platform-page .platform-person-search > label {
  height: var(--control-height);
  box-sizing: border-box;
}
.platform-page .platform-person-search > label input {
  height: calc(var(--control-height) - 2px);
  min-height: 0;
}
.platform-page
  :is(
    .platform-person-tabs,
    .platform-ticket-tabs,
    .platform-ticket-status-controls
  )
  button {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 700px) {
  :root {
    --control-height: 44px;
    --control-compact-height: 44px;
  }
  :is(.layout, .dialog) .btn {
    white-space: normal;
    overflow-wrap: break-word;
    min-height: 44px;
  }
  .workspace :is(.page-head, .card-head) > .row {
    justify-content: flex-start;
  }
  :is(.dialog .dialog-footer, .platform-dialog-footer) > :is(button, .btn) {
    flex: 1 1 120px;
  }
  .platform-page
    :is(
      .platform-pagination,
      .platform-chat-pagination,
      .pagination,
      .recipient-actions,
      .support-composer
    )
    button {
    min-height: 44px;
  }
}

/* Operational records share a quiet surface. Category, state and selection have separate markers. */
:is(
  .clock-box,
  .today-assignment,
  .notification-card,
  .manager-timecard,
  .workplace-report-card,
  .coverage-record,
  .dialog .swap-option:has(:checked),
  .employee-request-record,
  .warehouse-panel,
  .team-approvals tbody tr,
  .personal-manager-assignment,
  .warning-record,
  .platform-company-card,
  .platform-health-overview,
  .adoption-request-card,
  .platform-attention-company,
  .platform-request-context
) {
  --record-gradient: var(--brand-surface, #fff);
  --record-inset-surface: transparent;
}

/* Shared interaction and status colors. Brand aliases follow each company's palette. */
:root {
  --tab-active-bg: var(--brand-soft, #eaf5f1);
  --tab-active-ink: var(--brand-readable-accent, #0f766e);
  --tab-active-border: var(--brand-accent, #0f766e);
  --status-warning: #b45309;
  --status-warning-surface: #fffbeb;
  --status-warning-ink: #78350f;
  --status-warning-border: #f1d7a3;
  --status-danger: #b91c1c;
  --status-danger-surface: #fceded;
  --status-danger-ink: #991b1b;
  --status-danger-border: #edc4c8;
  --status-success: #15803d;
  --status-success-surface: #edf8ef;
  --status-success-ink: #166534;
  --status-waiting: #1d4ed8;
  --status-pending: var(--status-warning-ink);
  --status-pending-pale: var(--status-warning-surface);
  --status-approved: var(--status-success-ink);
  --status-approved-pale: var(--status-success-surface);
  --status-denied: var(--status-danger-ink);
  --status-denied-pale: var(--status-danger-surface);
  --person-avatar-radius: 50%;
  --person-avatar-bg: var(--brand-soft, #eaf5f1);
  --person-avatar-ink: var(--brand-readable-accent, #0f766e);
}
/* Status rails supplement each record's written status; category icons remain independent. */
.record-status-rail {
  position: relative;
}
.record-next-step {
  display: flex;
  align-items: start;
  gap: 8px;
  margin: 14px 0;
  color: var(--surface-ink, #213c40);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}
.record-next-step > .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
}
.record-reference {
  color: var(--surface-muted, #526e74);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.record-deadline {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}
.record-deadline.is-overdue {
  color: var(--status-warning-ink);
  background: var(--status-warning-surface);
  padding: 3px 7px;
  border-radius: 5px;
}
.record-status-rail[data-record-state='action'] {
  --record-state-color: var(--status-warning);
}
.record-status-rail[data-record-state='urgent'] {
  --record-state-color: var(--status-danger);
}
.record-status-rail[data-record-state='waiting'] {
  --record-state-color: var(--status-waiting);
}
.record-status-rail[data-record-state='info'] {
  --record-state-color: var(--brand-accent, #0f766e);
}
.record-status-rail:is(
    [data-record-state='action'],
    [data-record-state='urgent'],
    [data-record-state='waiting'],
    [data-record-state='info']
  )::before {
  content: '';
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--record-state-color);
  pointer-events: none;
}
.workspace .notification-category.selected,
.workspace .warning-tabs button.selected,
.workspace .segmented button.active,
.workspace .appearance-editor-tabs button[aria-selected='true'],
.workspace .coverage-view-filters > button.selected,
.platform-page .platform-ticket-tabs button.selected,
.platform-page .platform-person-tabs button.selected,
.platform-page .platform-announcement-folders .selected,
.platform-page .platform-communication-tabs button.selected {
  background: var(--tab-active-bg);
  border-color: var(--tab-active-border);
  color: var(--tab-active-ink);
  box-shadow: inset 0 0 0 1px var(--tab-active-border);
}
.workspace .notification-category.selected > .notification-category-count,
.platform-page .platform-ticket-tabs button.selected > span,
.platform-page .platform-person-tabs button.selected > span {
  background: color-mix(in srgb, var(--tab-active-ink) 18%, transparent);
  color: inherit;
}
.workspace .avatar,
.workspace .warning-avatar,
.workspace .admin-person > span,
.workspace .message-person-avatar,
.workspace .profile-avatar,
.platform-page .platform-person-avatar,
.platform-page .avatar {
  border-radius: var(--person-avatar-radius);
  background: var(--person-avatar-bg);
  color: var(--person-avatar-ink);
  overflow: hidden;
}
.workspace .badge.amber,
.workspace .banner.amber,
.platform-page .badge.suspended {
  background: var(--status-warning-surface);
  color: var(--status-warning-ink);
  border-color: var(--status-warning-border);
}
.workspace .badge.red,
.workspace .banner.red {
  background: var(--status-danger-surface);
  color: var(--status-danger-ink);
  border-color: var(--status-danger-border);
}
.workspace .availability-rule.unavailable {
  border-color: var(--status-warning-border);
  border-left-color: var(--status-warning);
  background: var(--status-warning-surface);
}
.workspace .availability-rule.unavailable .availability-state {
  color: var(--status-warning-ink);
}
.workspace .availability-state {
  color: var(--status-success-ink);
}
.workspace .shift-block.draft {
  border-left-color: var(--status-warning);
  background: var(--status-warning-surface);
}
.workspace .payroll-readiness.has-errors {
  border-left-color: var(--status-warning);
}
.workspace .payroll-readiness.has-errors .payroll-readiness-heading > .icon {
  color: var(--status-warning-ink);
}

.field-requirements {
  display: grid;
  gap: 5px;
  font-weight: 400;
  line-height: 1.45;
}
.field-requirement {
  display: flex;
  align-items: start;
  gap: 6px;
  color: var(--surface-muted, #526e74);
  font-size: 11px;
}
.requirement-mark {
  flex: none;
  width: 13px;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}
.field-requirement.is-met {
  color: var(--status-success-ink, #166534);
}
.requirement-note {
  display: block;
  color: var(--surface-muted, #526e74);
  font-size: 11px;
  line-height: 1.6;
  margin-top: 2px;
}

.platform-page .platform-communication-tabs button.selected small,
.platform-page .platform-communication-tabs button.selected strong {
  color: inherit;
  opacity: 1;
}

.page-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-width: 0;
}
.page-title-line > :is(h1, h2) {
  margin: 0;
}
.page-title-line > .context-help {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}
.context-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--surface-border, #d6e3e5);
  border-radius: 9px;
  background: var(--brand-surface, #fff);
  color: var(--surface-ink, #213c40);
}
.context-help svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.context-help:hover {
  background: var(--surface-soft, #edf5f5);
}
.context-help:focus-visible {
  outline: 2px solid var(--brand-accent, #0f766e);
  outline-offset: 3px;
}
.context-help-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
.dialog-header > .context-help-actions,
.platform-dialog-head > .context-help-actions {
  flex-wrap: nowrap;
}
.auth-box > .context-help {
  margin-top: 18px;
}
@media (max-width: 600px) {
  .dialog-header > .context-help-actions,
  .platform-dialog-head > .context-help-actions {
    gap: 6px;
  }
  .context-help {
    min-height: 40px;
    padding: 8px;
    font-size: 11px;
  }
  .context-help-actions {
    max-width: 100%;
  }
}

dialog > .dialog-feedback {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 0 0 auto;
  max-height: min(25dvh, 160px);
  overflow: auto;
  margin: 0 18px 12px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border, #d6e3e5);
  border-radius: 10px;
  background: var(--surface-soft, #edf5f5);
  color: var(--surface-ink, #213c40);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 3px 12px #0000000a;
}
dialog > .dialog-feedback.is-error {
  border-color: #e5b5ad;
  background: #fff3f0;
  color: #8a2d1c;
}
.dialog-feedback > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dialog-feedback-close {
  flex: 0 0 auto;
  display: grid !important;
  place-items: center;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 22px !important;
}
.form-error:focus,
[role='alert']:focus {
  outline: 2px solid var(--brand-accent, #0f766e);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  dialog > .dialog-feedback {
    margin: 0 10px 10px;
    padding: 10px 12px;
    max-height: 25dvh;
  }
}

#toast.standalone-feedback:not([hidden]):not(.hidden) {
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#toast.standalone-feedback > span {
  flex: 1;
  overflow-wrap: anywhere;
}
#toast.standalone-feedback.error {
  background: #8a2d1c;
  color: white;
}

.account-invitation-choice {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--surface-border, #d6e3e5);
  border-radius: 12px;
  background: var(--surface-soft, #f2f7f7);
}
.account-invitation-choice > .field {
  margin: 0;
}
.account-invitation-choice .note {
  margin: 0;
  line-height: 1.55;
}
.account-invitation-choice [hidden] {
  display: none !important;
}
.account-invitation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--surface-border, #d6e3e5);
}
.account-invitation-row > div:first-child {
  min-width: 0;
}
.account-invitation-row p {
  margin: 6px 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.account-invitation-row .row {
  flex-shrink: 0;
  gap: 12px;
}
.invitation-context {
  padding: 16px;
  margin: 0 0 20px;
  border: 1px solid var(--recovery-accent, #0f766e);
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--recovery-accent, #0f766e) 7%,
    var(--recovery-surface, #fff)
  );
  color: var(--recovery-ink, #213c40);
}
.invitation-context p {
  margin: 6px 0;
  overflow-wrap: anywhere;
}
.invitation-context small {
  line-height: 1.5;
}
@media (max-width: 650px) {
  .account-invitation-row {
    align-items: stretch;
    flex-direction: column;
  }
  .account-invitation-row .row {
    flex-wrap: wrap;
  }
  .account-invitation-choice {
    padding: 14px;
  }
}

.manager-account-panel > .account-invitation-choice {
  margin-bottom: 16px;
}
.manager-account-panel > .field {
  margin-top: 16px;
}

.layout,
.platform-layout {
  position: relative;
  isolation: isolate;
}
.layout::before,
.platform-layout::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    145deg,
    var(--brand-accent, #0f766e),
    var(--brand-secondary, #0f766e)
  );
  mask: url('/assets/workgrid-geometry.svg') center top / 1000px 1167px repeat;
  opacity: 0.14;
}
.workspace {
  position: relative;
  isolation: isolate;
  width: calc(100% - 40px);
  margin: 20px auto;
  background: var(--brand-surface, #fff);
  border: 1px solid var(--surface-border, #dbe5e0);
  border-radius: 20px;
  box-shadow: 0 8px 28px
    color-mix(in srgb, var(--brand-ink, #213c40) 4%, transparent);
}
@media (max-width: 650px) {
  .workspace {
    width: calc(100% - 16px);
    margin: 8px auto;
    border-radius: 16px;
  }
}
@media print, (forced-colors: active) {
  .layout::before,
  .platform-layout::before {
    display: none;
  }
}

.role-access-control {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.role-access-control > .field,
.role-access-control > p {
  margin: 0;
}
.role-access-control [hidden] {
  display: none !important;
}
.role-access-custom {
  padding: 18px;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 12px;
  background: var(--surface-soft, #f5f8f9);
}
.role-access-custom h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
.role-access-custom p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.role-access-permissions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.role-permission-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}
.role-permission-group + .role-permission-group {
  border-top: 1px solid var(--surface-border, #dce6e8);
  padding-top: 20px;
}
.role-permission-group > h4 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--brand-readable-accent);
  font-size: 14px;
}
.role-permission-group[hidden] {
  display: none !important;
}
.role-access-permissions legend {
  padding: 0 8px;
  font-weight: 650;
}
.role-access-permissions .check {
  display: flex;
  gap: 9px;
  align-items: start;
  font-size: 13px;
  line-height: 1.5;
}
.role-access-permissions input {
  width: 18px;
  min-height: 18px;
  margin: 1px 0 0;
  flex: none;
}
@media (max-width: 650px) {
  .role-access-permissions {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .role-permission-group {
    grid-template-columns: minmax(0, 1fr);
  }
  .role-access-custom {
    padding: 14px;
  }
}

.confirmation-phrase {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.confirmation-phrase button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--surface-border, #cfdddd);
  border-radius: var(--control-radius, 10px);
  background: var(--brand-canvas, #f4f8f7);
  color: var(--surface-ink, #1f4147);
  text-align: left;
}
.confirmation-phrase code {
  font-size: 16px;
  font-weight: 650;
  overflow-wrap: anywhere;
  user-select: text;
}
.confirmation-phrase button > span,
.confirmation-phrase small {
  font-size: 12px;
  color: var(--surface-muted, #526e74);
}

/* Source: form-readiness.css */
/* Highlight unfinished fields; server errors and focus rings keep their own styling. */
.form-needed:not([aria-invalid='true']):not([type='checkbox']):not(
    [type='radio']
  ) {
  border-color: var(--status-warning, #ae8037) !important;
  background-color: color-mix(
    in srgb,
    var(--status-warning, #ae8037) 3%,
    var(--brand-surface, #fff)
  );
}
.form-complete:not([aria-invalid='true']):not([type='checkbox']):not(
    [type='radio']
  ) {
  border-color: color-mix(
    in srgb,
    var(--status-success, #27805a) 55%,
    var(--surface-border, #dce6e8)
  ) !important;
}
input:is([type='checkbox'], [type='radio']).form-needed:not(
    [aria-invalid='true']
  ):not(:focus-visible) {
  outline: 2px solid var(--status-warning, #ae8037);
  outline-offset: 3px;
}
input:is([type='checkbox'], [type='radio']).form-complete:not(
    [aria-invalid='true']
  ):not(:focus-visible) {
  outline: 1px solid var(--status-success, #27805a);
  outline-offset: 3px;
}
.form-readiness {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 16px 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: color-mix(
    in srgb,
    var(--status-warning, #ae8037) 7%,
    var(--brand-surface, #fff)
  );
  color: var(--status-warning-ink, #78350f);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.form-readiness[data-state='complete'] {
  color: var(--status-success-ink, #216947);
  background: color-mix(
    in srgb,
    var(--status-success, #27805a) 7%,
    var(--brand-surface, #fff)
  );
}
.form-readiness[hidden] {
  display: none;
}
.form-readiness-mark {
  font-size: 16px;
  line-height: 1;
  flex: none;
}

/* Source: workspace-usability.css */
.workflow-guide-body > nav button {
  padding: 16px;
  gap: 12px;
  min-height: 78px;
}
.workflow-guide-body > nav button > span {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  font-weight: 700;
}
.workflow-hero {
  background: linear-gradient(
    125deg,
    var(--brand-accent, #0f766e),
    color-mix(in srgb, var(--brand-accent, #0f766e) 78%, #213c40)
  );
  padding: 24px !important;
}
.workflow-tool-chain {
  display: flex;
  gap: 12px;
  margin: 22px 0;
  flex-wrap: wrap;
}
.workflow-tool-chain button {
  flex: 1;
  min-width: 130px;
  padding: 14px;
  gap: 14px;
  font-weight: 700;
}
.workflow-tool-chain svg,
.workflow-guide footer svg,
.setup-action-plan footer svg {
  width: 22px;
  height: 22px;
  flex: none;
  stroke-width: 2;
}
.workflow-lesson-content article {
  padding: 18px 0 !important;
  gap: 16px !important;
}
.workflow-lesson-content article > span {
  width: 34px;
  height: 34px;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--accent, #0f766e) 12%, transparent);
  color: var(--accent, #0f766e);
  font-weight: 700;
  flex: none;
}
.workflow-guide footer {
  gap: 18px !important;
  display: flex;
  flex-wrap: wrap;
}
.workflow-guide footer button {
  padding: 13px 18px;
  gap: 14px;
  min-height: 48px;
}
.coverage-fixed-context,
.own-admin-account {
  padding: 20px;
  border: 1px solid var(--line, #dce6e8);
  border-radius: 14px;
  background: var(--surface, #fff);
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.coverage-fixed-context small {
  color: var(--muted, #637980);
  line-height: 1.5;
}
.own-admin-account {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.own-admin-account small {
  color: var(--accent, #0f766e);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.own-admin-account h2 {
  margin: 6px 0;
  font-size: 18px;
}
.own-admin-account p {
  font-size: 12px;
  color: var(--muted, #637980);
}
.people-departments {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.people-departments > span:first-child {
  font-size: 12px;
  color: var(--muted, #637980);
}
.warehouse-address-suggestions {
  border: 1px solid var(--line, #dce6e8);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
}
.warehouse-address-suggestions button {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: left;
  border: 0;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, #dce6e8);
  font-size: 13px;
}
.warehouse-address-suggestions small {
  display: block;
  text-align: right;
  padding: 8px;
  font-size: 11px;
}
.access-design-settings {
  padding: 18px;
  border: 1px solid var(--line, #dce6e8);
  border-radius: 12px;
}
.access-design-settings legend {
  font-weight: 700;
  padding: 0 8px;
}
@media (max-width: 760px) {
  .own-admin-account {
    align-items: start;
    flex-direction: column;
  }
  .workflow-guide-body > nav {
    display: flex !important;
    overflow: auto;
    gap: 8px;
    padding: 12px !important;
  }
  .workflow-guide-body > nav button {
    flex: none;
    min-width: 180px;
  }
  .workflow-tool-chain button {
    min-width: 90px;
    font-size: 12px;
    padding: 10px;
  }
}

.warning-policy-summary {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  padding: 22px;
  margin-bottom: 20px;
}
.warning-policy-summary h2 {
  font-size: 18px;
}
.warning-policy-summary p,
.warning-policy-summary span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #637980);
}
.warning-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.warning-filters input {
  flex: 1;
  min-width: 180px;
}
.warning-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.warning-record {
  padding: 22px;
}
.warning-record.is-written {
  border-left-color: #d66d23;
}
.warning-record.is-final {
  border-left-color: #ba3f4d;
}
.warning-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  margin-bottom: 16px;
  color: var(--muted, #637980);
}
.warning-level {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #9d6815;
}
.is-written .warning-level {
  color: #ba5217;
}
.is-final .warning-level {
  color: #b63243;
}
.warning-level svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.warning-record h3 {
  font-size: 17px;
  margin: 8px 0;
}
.warning-record p {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
}
.warning-record small {
  font-size: 11px;
  color: var(--muted, #637980);
}
.warning-record .row {
  margin-top: 16px;
  gap: 12px;
}
.warning-pagination {
  margin: 24px 0;
  gap: 20px;
}
.personal-warning-section {
  margin-top: 26px;
}
.personal-warning-section > p {
  font-size: 13px;
  color: var(--muted, #637980);
}
@media (max-width: 760px) {
  .warning-list {
    grid-template-columns: 1fr;
  }
  .warning-policy-summary {
    flex-direction: column;
  }
  .warning-filters select {
    width: 100%;
  }
  .warning-record-head {
    align-items: start;
  }
}

.warning-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) minmax(130px, 180px) auto;
  align-items: center;
}
.warning-filters input,
.warning-filters select {
  width: 100%;
  min-width: 0;
}
.warning-filters .btn {
  width: auto;
}
@media (max-width: 760px) {
  .warning-filters {
    grid-template-columns: 1fr 1fr;
  }
  .warning-filters input {
    grid-column: 1/-1;
  }
  .warning-filters .btn {
    grid-column: 1/-1;
  }
}

.access-design-settings {
  background: var(--brand-surface);
  margin: 4px 0;
  padding: 20px;
  border-color: var(--surface-border);
}
.access-design-settings > p {
  margin: 0 0 18px;
  max-width: 560px;
}
.access-art-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.access-art-choices > button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--surface-border);
  background: var(--brand-surface);
  border-radius: 13px;
  min-width: 0;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.access-art-choices > button:hover {
  border-color: var(--brand-readable-accent);
}
.access-art-choices > button[aria-pressed='true'] {
  border: 2px solid var(--brand-readable-accent);
  padding: 11px;
  box-shadow: 0 0 0 3px var(--brand-focus-shadow);
}
.access-art-thumbnail {
  display: block;
  width: 100%;
  border-radius: 9px;
  background: var(--surface-soft);
  margin-bottom: 12px;
  overflow: hidden;
}
.access-art-thumbnail .access-art {
  min-height: 130px;
  height: 130px;
}
.access-art-choices strong {
  font-size: 12px;
  font-weight: 700;
}
.access-art-choices small {
  font-size: 10px;
  color: var(--surface-muted);
  line-height: 1.6;
  margin-top: 7px;
}
.access-art-selection {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--brand-readable-accent);
  margin-top: 12px;
  font-weight: 700;
}
.access-art-selection svg {
  width: 12px;
  height: 12px;
}
.access-art-choices [aria-pressed='true'] .access-art-selection {
  display: flex;
}
.appearance-preview-stage .access-art {
  --access-accent: var(--preview-accent);
  --access-secondary: var(--preview-secondary);
  --access-surface: var(--preview-surface);
  --access-ink: var(--preview-ink);
  height: 190px;
  min-height: 150px;
  margin-top: 18px;
  flex: 1;
}
.appearance-signin > section {
  display: flex;
  flex-direction: column;
}
.appearance-signin .access-art .access-halo {
  fill: #fff;
  opacity: 0.07;
}
.appearance-signin .access-art .access-orbit {
  stroke: #fff;
  stroke-opacity: 0.22;
}
.appearance-recovery {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
}
.appearance-recovery-story {
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    125deg,
    color-mix(in srgb, var(--preview-accent) 13%, var(--preview-surface)),
    color-mix(in srgb, var(--preview-secondary) 10%, var(--preview-surface))
  );
  min-width: 0;
}
.appearance-recovery > main {
  padding: 28px;
}
.appearance-preview-stage.is-phone .appearance-recovery {
  grid-template-columns: 1fr !important;
}
.appearance-preview-stage.is-phone .appearance-recovery-story {
  padding: 20px;
}
.appearance-preview-stage.is-phone .access-art {
  height: 140px;
  min-height: 140px;
}
.appearance-preview-stage.is-phone .appearance-recovery > main {
  padding: 22px;
}
.appearance-preview-stage .appearance-recovery .appearance-brand {
  font-size: 12px;
}
.appearance-preview-stage .appearance-recovery .appearance-logo {
  width: 30px;
  height: 30px;
}
.appearance-preview-stage .appearance-recovery .appearance-logo img {
  max-height: 30px;
}
@media (max-width: 600px) {
  .access-art-choices {
    grid-template-columns: 1fr;
  }
  .access-art-choices > button {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 6px 12px;
  }
  .access-art-thumbnail {
    grid-row: 1/4;
    margin: 0;
  }
  .access-art-thumbnail .access-art {
    height: 90px;
    min-height: 90px;
  }
  .access-art-choices small {
    margin: 0;
  }
  .access-art-selection {
    margin: 0;
  }
  .access-design-settings {
    padding: 16px;
  }
}
.company-admin-accounts {
  margin: 0 0 24px;
  padding: 22px;
  border-radius: 14px;
}
.company-admin-accounts > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.company-admin-accounts h2 {
  font-size: 18px;
  margin-bottom: 6px;
}
.company-admin-accounts p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-muted);
}
.company-admin-accounts-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.company-admin-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  min-width: 0;
}
.company-admin-account > .avatar {
  background: var(--brand-focus-shadow);
  color: var(--brand-readable-accent);
  flex: none;
}
.company-admin-account > div {
  flex: 1;
  min-width: 0;
}
.company-admin-account strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.company-admin-account small {
  display: block;
  font-size: 11px;
  color: var(--surface-muted);
  margin-top: 5px;
}
.company-admin-account .btn {
  flex: none;
}
@media (max-width: 700px) {
  .company-admin-accounts-list {
    grid-template-columns: 1fr;
  }
  .company-admin-account {
    flex-wrap: wrap;
  }
}

.appearance-recovery-story > small {
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-top: 16px;
  color: var(--preview-accent);
}
.appearance-recovery-story > h3 {
  font-size: 21px;
  line-height: 1.3;
  margin: 10px 0;
}
.appearance-recovery-story > p {
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
  color: var(--preview-ink);
}

.report-category-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.report-category-actions .btn {
  min-height: 38px;
}
.finish-category-row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.settings-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.settings-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: var(--brand-surface, #fff);
}
.settings-card > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--brand-focus-shadow);
  color: var(--brand-readable-accent);
}
.settings-card h2 {
  margin: 0;
  font-size: 18px;
}
.settings-card p {
  margin: 0;
  color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.65;
}
.settings-card .row {
  margin-top: auto;
  gap: 10px;
}
.settings-default-facts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-default-facts span {
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid var(--surface-border);
  font-size: 12px;
  color: var(--surface-ink);
}
.settings-device-section {
  margin-top: 22px;
}
@media (max-width: 700px) {
  .settings-cards {
    grid-template-columns: 1fr;
  }
  .finish-category-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  .report-category-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* Source: workspace-warnings.css */
.warning-workspace > .page-head {
  margin-bottom: 16px;
}
.warning-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.warning-metrics svg {
  width: 21px;
  height: 21px;
}
.warning-metrics strong {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
  display: block;
}
.warning-metrics small {
  font-size: 11px;
  color: var(--surface-muted);
  line-height: 1.5;
  display: block;
  margin-top: 4px;
}
.warning-metrics .is-pending > span {
  background: var(--status-warning-surface);
  color: var(--status-warning-ink);
}
.warning-metrics .is-final > span {
  background: var(--status-danger-surface);
  color: var(--status-danger);
}
.warning-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.warning-section-heading h2 {
  font-size: 19px;
  margin: 0 0 6px;
}
.warning-section-heading p {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.6;
  margin: 0;
}
.warning-section-heading > span {
  font-size: 12px;
  color: var(--surface-muted);
  white-space: nowrap;
}
.warning-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.warning-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 190px;
  padding: 0 12px;
  border: 1px solid #74868f;
  border-radius: 9px;
  background: var(--brand-surface);
}
.warning-search svg {
  width: 17px;
  height: 17px;
  color: var(--surface-muted);
  flex: none;
}
.warning-filters :is(select, .searchable-filter) {
  width: auto;
  min-width: 130px;
  max-width: 260px;
  font-size: 12px;
}
.warning-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.warning-record.is-dismissed {
  --warning-tone: var(--surface-muted);
}
.warning-record > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
}
.warning-level {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 750;
  color: var(--status-warning-ink);
}
.warning-level svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.is-written .warning-level {
  color: var(--type-announcements);
}
.is-final .warning-level {
  color: var(--status-danger-ink);
}
.warning-status {
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.4;
  background: var(--status-warning-surface);
  color: var(--status-warning-ink);
}
.warning-status.is-acknowledged {
  background: var(--brand-focus-shadow);
  color: var(--brand-readable-accent);
}
.warning-status.is-dismissed {
  background: var(--surface-soft);
  color: var(--surface-muted);
}
.warning-person {
  display: flex;
  gap: 12px;
  align-items: center;
}
.warning-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  color: var(--brand-readable-accent);
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.warning-person h3 {
  margin: 0 0 4px;
  font-size: 17px;
}
.warning-person small {
  font-size: 11px;
  color: var(--surface-muted);
}
.warning-reason {
  margin: 14px 0 !important;
  line-height: 1.7;
  font-size: 13px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.warning-source {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--surface-muted);
  font-size: 11px;
}
.warning-source svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.warning-record > footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.warning-record > footer > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.warning-record > footer > small {
  font-size: 10px;
  color: var(--surface-muted);
}
.warning-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 24px 0;
}
.warning-pagination > span {
  font-size: 12px;
  color: var(--surface-muted);
}
.warning-policy-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--surface-border);
  border-radius: 0;
  padding: 18px 0;
  margin: 12px 0 0;
  box-shadow: none;
  flex-wrap: wrap;
}
.warning-policy-summary > span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 11px;
  color: var(--surface-muted);
  line-height: 1.7;
  flex-wrap: wrap;
}
.warning-policy-summary svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.warning-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 52px 20px;
  border: 1px dashed var(--surface-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand-surface) 70%, transparent);
}
.warning-empty > span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  margin: 0 auto 18px;
  background: var(--brand-focus-shadow);
  color: var(--brand-readable-accent);
}
.warning-empty svg {
  width: 26px;
  height: 26px;
}
.warning-empty h3 {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.warning-empty p {
  color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 22px;
}
.warning-rules-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.warning-rules-heading h2 {
  margin: 7px 0;
  font-size: 23px;
  letter-spacing: -0.03em;
}
.warning-rules-heading p {
  max-width: 650px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--surface-muted);
}
.warning-trigger-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.warning-trigger {
  padding: 24px;
  border-radius: 14px;
}
.warning-trigger > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--brand-readable-accent);
  margin-bottom: 18px;
}
.warning-trigger svg {
  width: 19px;
  height: 19px;
}
.warning-trigger h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.warning-trigger p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--surface-muted);
  min-height: 44px;
}
.warning-trigger strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  margin-top: 18px;
  color: var(--brand-readable-accent);
}
.warning-trigger strong.is-automatic {
  color: var(--status-warning-ink);
}
.warning-trigger strong svg {
  width: 14px;
  height: 14px;
}
.warning-escalation {
  padding: 26px;
  border-radius: 16px;
}
.warning-escalation > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.warning-escalation h2 {
  font-size: 20px;
  margin-bottom: 8px;
}
.warning-escalation p {
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.7;
}
.warning-escalation > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 26px 0;
}
.warning-escalation article {
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
}
.warning-escalation article strong {
  display: block;
  margin: 14px 0 7px;
  font-size: 16px;
}
.warning-escalation > footer {
  display: flex;
  gap: 10px;
  align-items: start;
  padding-top: 20px;
  border-top: 1px solid var(--surface-border);
  font-size: 12px;
  line-height: 1.8;
  color: var(--surface-muted);
}
.warning-escalation > footer svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
}
.warning-detail h3 {
  font-size: 23px;
  margin: 16px 0 6px;
}
.warning-detail-role {
  font-size: 12px;
  color: var(--surface-muted);
}
.warning-detail > section {
  padding: 20px;
  background: var(--surface-soft);
  border-radius: 12px;
  margin: 22px 0;
}
.warning-detail section small {
  font-size: 9px;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--surface-muted);
}
.warning-detail section p {
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  margin-top: 10px;
}
.warning-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.warning-timeline li {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--surface-border);
}
.warning-timeline li > svg {
  width: 19px;
  height: 19px;
  color: var(--brand-readable-accent);
  flex: none;
}
.warning-timeline li > div {
  display: grid;
  gap: 6px;
}
.warning-timeline strong {
  font-size: 13px;
}
.warning-timeline span,
.warning-timeline small,
.warning-timeline p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--surface-muted);
}
.warning-timeline .is-waiting > svg {
  color: var(--surface-muted);
}
@media (max-width: 900px) {
  .warning-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .warning-trigger-grid {
    grid-template-columns: 1fr;
  }
  .warning-trigger p {
    min-height: 0;
  }
  .warning-escalation > div {
    gap: 12px;
  }
  .warning-metrics > button {
    padding: 17px;
  }
}
@media (max-width: 600px) {
  .warning-list {
    grid-template-columns: 1fr;
  }
  .warning-metrics {
    gap: 10px;
  }
  .warning-metrics > button {
    padding: 14px;
    gap: 10px;
  }
  .warning-metrics > button > span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex: none;
  }
  .warning-metrics strong {
    font-size: 24px;
  }
  .warning-metrics small {
    font-size: 10px;
  }
  .warning-tabs {
    width: 100%;
  }
  .warning-tabs button {
    padding: 10px 12px;
    font-size: 12px;
  }
  .warning-record {
    padding: 18px;
  }
  .warning-record > header {
    align-items: start;
  }
  .warning-filters > :is(select, .searchable-filter) {
    flex: 1;
    max-width: none;
    min-width: 120px;
  }
  .warning-search {
    flex-basis: 100%;
  }
  .warning-rules-heading {
    flex-direction: column;
  }
  .warning-escalation {
    padding: 20px;
  }
  .warning-escalation > header {
    flex-direction: column;
    align-items: start;
  }
  .warning-escalation > div {
    grid-template-columns: 1fr;
  }
  .warning-section-heading {
    align-items: start;
  }
  .warning-section-heading p {
    max-width: 240px;
  }
  .warning-head-actions {
    width: 100%;
  }
  .warning-head-actions .btn {
    flex: 1;
    justify-content: center;
  }
  .warning-pagination .btn {
    padding: 10px;
    gap: 8px;
  }
  .warning-policy-summary > span {
    flex-basis: 100%;
  }
}
.warning-metrics > button {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  background: var(--brand-surface, #fff);
  border: 1px solid var(--surface-border);
  min-width: 0;
  text-align: left;
  color: var(--surface-ink);
  cursor: pointer;
}
.warning-metrics > button > div {
  min-width: 0;
  flex: 1;
}
.warning-metrics > button > svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--surface-muted);
}
.warning-metrics > button[aria-pressed='true'] {
  border-color: var(--brand-accent);
}
.warning-metrics > button:hover {
  border-color: var(--brand-accent);
}
.warning-metrics > button:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 3px;
}
.warning-metrics > button > span {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.warning-record {
  --record-tone: var(--warning-tone, var(--brand-accent));
  position: relative;
  padding: 20px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
  column-gap: 28px;
  align-items: start;
}
.warning-record
  > :is(
    header,
    .warning-person,
    .warning-personal-heading,
    .warning-reason,
    .warning-source,
    .warning-review-summary
  ) {
  grid-column: 1;
  min-width: 0;
}
.warning-record > .warning-record-facts {
  grid-column: 2;
  grid-row: 1 / 7;
  min-width: 0;
  padding-left: 22px;
  border-left: 1px solid var(--surface-border);
  align-self: stretch;
}
.warning-review-summary {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--surface-border);
  min-width: 0;
}
.warning-review-summary > div,
.warning-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.warning-review-summary strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--surface-ink);
}
.warning-review-summary svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.warning-review-summary > div > span {
  font-size: 12px;
  color: var(--surface-muted);
}
.warning-review-summary.is-due > div > span {
  color: var(--status-warning-ink);
  background: var(--status-warning-surface);
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 650;
}
.warning-review-summary p,
.warning-review-intro p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--surface-ink);
}
.warning-review-summary small,
.warning-review-intro p {
  color: var(--surface-muted);
  font-size: 12px;
  line-height: 1.6;
}
.warning-detail-actions {
  margin-top: 16px;
}
.warning-review-intro {
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: 12px;
}
.warning-record > footer {
  grid-column: 1 / -1;
}
.warning-record-facts .warning-person-count.is-compact {
  margin-top: 0;
  grid-template-columns: 1fr;
  gap: 10px;
}
.warning-record-facts .warning-person-count.is-compact > small {
  font-size: 12px;
}
.warning-record-next {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--surface-ink);
  margin-top: 16px;
}
.warning-record h3 {
  overflow-wrap: anywhere;
}
.warning-record :is(.btn, .warning-status) {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.warning-record > footer > div {
  min-width: 0;
}
.warning-record .btn {
  min-height: 40px;
  height: auto;
  justify-content: center;
}
.warning-workspace {
  min-width: 0;
}
.warning-workspace .searchable-filter {
  min-width: 0;
}
.warning-workspace :is(.warning-tabs, .warning-filters) {
  overflow: visible;
}
.warning-workspace .warning-tabs {
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .warning-record {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .warning-record > .warning-record-facts {
    grid-column: 1;
    grid-row: auto;
    padding: 14px 0 0;
    border: 0;
  }
  .warning-record-facts .warning-person-count.is-compact {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .warning-record > footer {
    grid-column: 1;
  }
  .warning-record > footer > div > .btn {
    flex: 1 1 140px;
  }
  .warning-metrics > button {
    gap: 10px;
    padding: 14px;
  }
  .warning-metrics > button > svg {
    display: none;
  }
  .warning-pagination {
    gap: 10px;
  }
}
.warning-record.is-advisory:not(.is-dismissed) {
  --warning-tone: var(--status-warning);
}
.warning-record.is-written:not(.is-dismissed) {
  --warning-tone: var(--type-announcements);
}
.warning-record.is-final:not(.is-dismissed) {
  --warning-tone: var(--status-danger);
}
.warning-tabs {
  display: flex;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  width: fit-content;
  background: transparent;
  max-width: 100%;
  overflow: auto;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.warning-tabs button {
  background: var(--brand-surface);
  padding: 9px 16px;
  border-radius: 9px;
  color: var(--surface-muted);
  font-size: 13px;
  white-space: nowrap;
  border: 1px solid var(--surface-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  font-weight: 650;
  line-height: 1.35;
}
.warning-tabs button.selected {
  background: var(--tab-active-bg);
  color: var(--tab-active-ink);
  font-weight: 700;
  border-color: var(--tab-active-border);
}
@media (max-width: 700px) {
  .warning-tabs button {
    min-height: 44px;
    flex: 1 1 auto;
  }
  .warning-metrics small {
    font-size: 11px;
    line-height: 1.5;
  }
}
.warning-filters > :is(select, .searchable-filter),
.warning-filters > .btn,
.warning-search {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
}
.warning-search input {
  border: 0 !important;
  padding: 12px 0;
  box-shadow: none;
  min-width: 0;
  width: 100%;
  background: transparent;
  height: 38px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 700px) {
  .warning-filters > :is(select, .searchable-filter),
  .warning-filters > .btn,
  .warning-search {
    height: 44px;
    min-height: 44px;
  }
  .warning-search input {
    height: 42px;
  }
}
.warning-personal-heading h3 {
  font-size: 18px;
  margin: 0 0 7px;
}
.warning-personal-heading p {
  font-size: 12px;
  color: var(--surface-muted);
  margin: 0;
}
.warning-reason > small {
  display: block;
  color: var(--surface-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.warning-reason > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.warning-person-count {
  margin: 18px 0 0;
  padding: 13px 14px;
  background: var(--brand-surface);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  display: grid;
  gap: 6px;
}
.warning-person-count > span:first-child {
  font-size: 12px;
}
.warning-person-count strong {
  font-size: 15px;
}
.warning-person-count small {
  font-size: 11px;
  color: var(--surface-muted);
  line-height: 1.5;
}
.warning-count-track {
  height: 4px;
  border-radius: 4px;
  background: var(--surface-border);
  overflow: hidden;
  margin-top: 3px;
}
.warning-count-track > span {
  display: block;
  height: 100%;
  background: var(--warning-tone, var(--brand-accent));
  border-radius: 4px;
}
.warning-access-review {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 15px 0 0;
}
.warning-access-review > div {
  display: grid;
  gap: 5px;
  flex: 1;
  min-width: 180px;
}
.warning-access-review strong {
  font-size: 12px;
  color: var(--status-danger-ink);
}
.warning-access-review small,
.warning-access-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--surface-muted);
}
.warning-access-note {
  display: flex;
  gap: 8px;
  align-items: start;
  margin-top: 16px;
}
.warning-access-note svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}
.warning-access-confirm {
  padding: 18px;
  background: var(--status-danger-surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
}
.warning-access-confirm h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
.warning-access-confirm p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.warning-record[data-warning-record-id]:focus {
  outline: 3px solid var(--brand-accent);
  outline-offset: 4px;
}
@media (max-width: 600px) {
  .warning-person-count {
    padding: 12px;
  }
  .warning-access-review > .btn {
    width: 100%;
    justify-content: center;
  }
  .warning-record > header {
    flex-wrap: wrap;
  }
}

.warning-person-count.is-compact {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
}
.warning-person-count.is-compact strong {
  margin-right: 4px;
}
.warning-person-count.is-compact > small {
  font-size: 11px;
  color: var(--surface-muted);
}
.warning-person-count.is-compact .warning-count-track {
  grid-column: 1 / -1;
}
.warning-record .warning-source {
  flex-wrap: wrap;
  gap: 6px 10px;
}
.warning-record .warning-source > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.warning-record > footer {
  gap: 10px;
}

.warning-list-guidance {
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-muted);
  margin: 0 0 10px;
}

@media (max-width: 700px) {
  .warning-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .warning-filters > .warning-search {
    grid-column: 1/-1;
    min-width: 0;
    width: 100%;
  }
  .warning-filters > :is(.searchable-filter, select, .btn) {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .warning-filters > .btn {
    justify-content: center;
  }
}

form[data-form='issue-warning'] .dialog-footer button {
  white-space: normal;
  overflow-wrap: anywhere;
}

.warning-outcome-editor {
  border-top: 1px solid var(--surface-border);
  padding-top: 20px;
}
.warning-outcome-editor > p {
  color: var(--surface-muted);
  line-height: 1.6;
}
.warning-outcome-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--surface-border);
}
.warning-outcome-row > .btn {
  justify-self: start;
}
.warning-outcome-editor > .btn {
  margin-top: 16px;
}
@media (max-width: 600px) {
  .warning-outcome-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Source: workspace-continuity.css */
.access-art-choices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.coverage-offer-summary {
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 8px 0;
  background: var(--surface);
  text-align: left;
}
.coverage-offer-summary small {
  display: block;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .coverage-offer-summary {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.warehouse-gps-fields {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  min-width: 0;
}
.warehouse-gps-fields legend {
  font-weight: 700;
}
.warehouse-gps-fields > small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
}
.location-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 22px;
}
.location-setting {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 26px;
  gap: 16px;
}
.location-setting > div {
  width: 100%;
  min-width: 0;
  border-bottom: 1px solid var(--surface-border, var(--line));
  padding-bottom: 20px;
}
.location-setting-icon {
  display: grid;
  place-items: center;
  border-radius: 14px;
  width: 50px;
  height: 50px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.location-setting h2 {
  font-size: 20px;
  margin: 8px 0;
}
.location-setting p,
.location-setting li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.location-setting .badge {
  margin-top: 10px;
}
.location-setting ol,
.location-setting ul {
  padding-left: 20px;
  margin: 0;
}
.location-setting li {
  padding-left: 5px;
  margin: 8px 0;
}
.location-setting > .btn {
  margin-top: auto;
}
.location-warehouses {
  padding: 24px;
}
.location-warehouses header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--surface-border, var(--line));
}
.location-warehouses h2 {
  font-size: 18px;
  margin: 0 0 6px;
}
.location-warehouses header p {
  font-size: 12px;
  color: var(--muted);
}
.location-warehouses article {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.location-warehouses header + article {
  border-top: 0;
}
.location-warehouses article > div {
  flex: 1;
}
.location-warehouses small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.gps-device-control {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
}
.gps-device-control > span {
  color: var(--brand-readable-accent);
}
.gps-device-control > div {
  flex: 1;
  min-width: 0;
}
.gps-device-control p,
.gps-device-control small {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.location-dialog-intro {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  background: var(--brand-soft);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.location-dialog-intro > .icon {
  flex: none;
  width: 28px;
  height: 28px;
}
.workflow-redesign {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 24px;
}
.workflow-redesign .workflow-hero {
  padding: 26px 30px;
  gap: 24px;
  background: var(--brand-header, var(--brand-accent));
  color: var(--brand-header-ink, var(--brand-accent-ink, #fff));
}
.workflow-redesign .workflow-hero > div {
  display: block;
}
.workflow-redesign .workflow-hero p {
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.85;
  margin: 10px 0 0;
}
.workflow-redesign .workflow-hero h2 {
  font-size: 24px !important;
  letter-spacing: -0.035em;
  margin: 12px 0 0;
}
.workflow-redesign .workflow-progress {
  display: grid !important;
  gap: 5px;
  min-width: 140px;
}
.workflow-progress strong {
  font-size: 27px;
}
.workflow-progress span {
  font-size: 11px;
  opacity: 0.85;
}
.workflow-progress progress {
  appearance: none;
  width: 100%;
  height: 5px;
  border: 0;
  background: #ffffff30;
  border-radius: 20px;
  margin-top: 8px;
}
.workflow-progress progress::-webkit-progress-bar {
  background: #ffffff30;
  border-radius: 20px;
}
.workflow-progress progress::-webkit-progress-value {
  background: currentColor;
  border-radius: 20px;
}
.workflow-redesign .workflow-guide-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}
.workflow-redesign .workflow-guide-body > nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  background: var(--canvas);
  border-right: 1px solid var(--line);
}
.workflow-redesign .workflow-guide-body > nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  padding: 14px 12px;
  color: var(--muted);
  min-height: 76px;
}
.workflow-redesign .workflow-guide-body > nav button[aria-current='step'] {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: var(--surface);
  color: var(--brand-readable-accent);
  box-shadow: 0 4px 14px #173a4010;
}
.workflow-redesign .workflow-guide-body > nav button > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.workflow-redesign .workflow-guide-body > nav button > span .icon {
  width: 18px;
  height: 18px;
}
.workflow-redesign .workflow-guide-body > nav button > div {
  flex: 1;
  min-width: 0;
}
.workflow-redesign .workflow-guide-body > nav button small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.workflow-redesign .workflow-guide-body > nav button strong {
  font-size: 12px;
  line-height: 1.5;
  display: block;
}
.workflow-redesign .workflow-guide-body > nav button > .icon {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.6;
}
.workflow-redesign .workflow-active-lesson {
  padding: 28px;
  min-width: 0;
}
.workflow-redesign .workflow-active-lesson h2 {
  font-size: 23px;
  letter-spacing: -0.025em;
  margin: 12px 0;
}
.workflow-redesign .workflow-outcome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 22px;
}
.workflow-redesign .workflow-lesson-content {
  display: grid;
  gap: 12px;
}
.workflow-redesign .workflow-lesson-content article {
  display: flex;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.workflow-redesign .workflow-lesson-content article > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.workflow-redesign .workflow-lesson-content h3 {
  font-size: 14px;
  margin: 2px 0 7px;
}
.workflow-redesign .workflow-lesson-content p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}
.workflow-redesign .workflow-lesson-content summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  margin-top: 10px;
  color: var(--brand-readable-accent);
}
.workflow-redesign .workflow-lesson-content summary .icon {
  width: 14px;
  height: 14px;
}
.workflow-redesign .workflow-tool-chain {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.workflow-redesign .workflow-tool-chain button {
  flex: 1;
  min-width: 0;
  padding: 11px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
  color: var(--muted);
}
.workflow-redesign .workflow-tool-chain button.selected {
  background: var(--brand-soft);
  border-color: var(--accent);
  color: var(--brand-readable-accent);
}
.workflow-tool-chain small,
.workflow-tool-chain strong {
  display: block;
  line-height: 1.5;
}
.workflow-tool-chain small {
  font-size: 10px;
  margin-bottom: 4px;
}
.workflow-tool-chain strong {
  font-size: 11px;
}
.workflow-redesign .workflow-tool-chain > .icon {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--muted);
}
.workflow-action {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 22px;
}
.workflow-action > div {
  flex: 1;
}
.workflow-action strong,
.workflow-action small {
  display: block;
}
.workflow-action strong {
  font-size: 13px;
}
.workflow-action small {
  font-size: 11px;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
}
.workflow-redesign .workflow-active-lesson footer {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  flex-wrap: nowrap;
}
.workflow-active-lesson footer > div {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.workflow-active-lesson footer small,
.workflow-active-lesson footer strong {
  display: block;
}
.workflow-active-lesson footer small {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 5px;
}
.workflow-active-lesson footer strong {
  font-size: 11px;
}
.workflow-redesign .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: normal;
  line-height: 1.5;
  flex-shrink: 0;
}
.workflow-redesign .btn > .icon {
  width: 19px;
  height: 19px;
  flex: none;
}
.workflow-redesign .workflow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
@media (max-width: 1050px) {
  .workflow-redesign .workflow-guide-body {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .workflow-redesign .workflow-active-lesson {
    padding: 22px;
  }
  .workflow-active-lesson footer > div {
    display: none;
  }
  .workflow-redesign .workflow-active-lesson footer {
    justify-content: space-between;
  }
  .workflow-action {
    flex-wrap: wrap;
  }
}
@media (max-width: 700px) {
  .access-art-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .location-settings-grid {
    grid-template-columns: 1fr;
  }
  .location-setting {
    padding: 22px;
  }
  .location-warehouses header,
  .location-warehouses article {
    flex-wrap: wrap;
  }
  .gps-device-control {
    flex-wrap: wrap;
  }
  .gps-device-control > div {
    flex-basis: calc(100% - 40px);
  }
  .gps-device-control > .btn {
    margin-left: 34px;
  }
  .workflow-redesign .workflow-hero {
    padding: 22px;
    align-items: start;
    flex-direction: column;
  }
  .workflow-redesign .workflow-hero h2 {
    font-size: 21px !important;
  }
  .workflow-redesign .workflow-progress {
    width: 100%;
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .workflow-progress span {
    text-align: right;
  }
  .workflow-progress progress {
    grid-column: 1/-1;
  }
  .workflow-redesign .workflow-guide-body {
    grid-template-columns: 1fr;
  }
  .workflow-redesign .workflow-guide-body > nav {
    flex-direction: row;
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px;
    scroll-snap-type: x proximity;
  }
  .workflow-redesign .workflow-guide-body > nav button {
    min-width: 210px;
    scroll-snap-align: center;
    min-height: 68px;
    padding: 10px;
  }
  .workflow-redesign .workflow-active-lesson {
    padding: 20px;
  }
  .workflow-redesign .workflow-tool-chain {
    gap: 5px;
  }
  .workflow-redesign .workflow-tool-chain button {
    padding: 9px 7px;
  }
  .workflow-redesign .workflow-tool-chain > .icon {
    width: 14px;
    height: 14px;
  }
  .workflow-redesign .workflow-lesson-content article {
    padding: 14px 12px;
    gap: 10px;
  }
  .workflow-redesign .workflow-action {
    padding: 15px;
  }
  .workflow-action > .btn {
    width: 100%;
  }
  .workflow-redesign .workflow-active-lesson footer {
    gap: 12px;
  }
  .workflow-redesign footer .btn {
    font-size: 11px;
    padding: 10px 12px;
  }
  .workflow-redesign .workflow-previous {
    padding: 10px 8px;
  }
}

.attendance-explainer {
  margin: 0 !important;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--brand-soft);
  border-radius: 8px;
  line-height: 1.65;
  font-size: 12px;
}

/* Source: workspace-refinements.css */
.artwork-upload {
  padding: 20px;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 14px;
  margin-top: 18px;
  background: var(--surface-soft, #f8fafb);
}
.artwork-upload > .field {
  margin-bottom: 18px;
}
.artwork-crop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.artwork-crop-layout canvas {
  width: 100%;
  border-radius: 12px;
  background: repeating-conic-gradient(#e7edef 0% 25%, #fff 0% 50%) 0/20px 20px;
  touch-action: none;
  cursor: grab;
}
.artwork-crop-layout .field {
  margin-bottom: 14px;
}
.artwork-crop-layout output {
  font-size: 11px;
  color: var(--brand-accent);
}
.artwork-upload > small {
  display: block;
  margin-top: 12px;
  color: var(--surface-muted, #637b83);
}
.email-preferences {
  max-width: 1050px;
  overflow: hidden;
  padding: 0;
}
.email-preferences > header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px;
  background: var(--surface-soft, #f8fafb);
  border-bottom: 1px solid var(--surface-border, #dce6e8);
}
.email-preferences > header > span:first-child {
  padding: 14px;
  border-radius: 16px;
  background: var(--brand-soft, #edf5f5);
  color: var(--brand-accent);
}
.email-preferences > header > div {
  flex: 1;
}
.email-preferences h2 {
  font-size: 24px;
  margin: 8px 0;
}
.email-preferences p {
  font-size: 13px;
  color: var(--surface-muted, #637b83);
  line-height: 1.65;
}
.email-preferences form {
  padding: 30px;
}
.email-alert-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  margin-top: 18px;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border, #dce6e8);
}
.email-alert-toggle small {
  display: block;
  margin-top: 6px;
  color: var(--surface-muted, #637b83);
}
.email-alert-toggle input {
  width: 24px;
  height: 24px;
  flex: none;
  accent-color: var(--brand-accent);
}
.email-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 28px 0 4px;
}
.email-premium-setting {
  grid-column: 1/-1;
  padding: 22px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--brand-soft);
}
.email-premium-setting h3 {
  font-size: 15px;
  margin: 0 0 18px;
}
.email-premium-setting .field {
  max-width: 340px;
  margin: 0;
}
.email-premium-setting .email-filter-explanation {
  margin: 12px 0 0;
  font-size: 12px;
}
.email-filter-grid fieldset {
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 14px;
  padding: 20px;
  min-width: 0;
}
.email-filter-grid legend {
  font-weight: 650;
  font-size: 14px;
  padding: 0 7px;
}
.email-filter-grid small {
  font-size: 11px;
  color: var(--surface-muted, #637b83);
}
.email-choice-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.email-weekdays {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.email-weekdays input {
  position: absolute;
  opacity: 0;
}
.email-weekdays span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  border: 1px solid var(--surface-border, #dce6e8);
  font-size: 12px;
  cursor: pointer;
}
.email-weekdays input:checked + span {
  background: var(--brand-accent);
  color: var(--brand-accent-ink, #fff);
  border-color: var(--brand-accent);
}
.email-weekdays input:focus-visible + span {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}
.email-preferences footer {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--surface-border, #dce6e8);
  padding-top: 20px;
}
.email-preferences footer p {
  max-width: 550px;
  font-size: 11px;
}
.email-preferences footer .btn {
  flex-shrink: 0;
}
.workflow-focus-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  border-bottom: 1px solid var(--surface-border, #dce6e8);
  background: var(--surface, #fff);
}
.workflow-focus-heading small {
  font-size: 10px;
  color: var(--brand-accent);
  letter-spacing: 0.15em;
  font-weight: 700;
}
.workflow-focus-heading h2 {
  font-size: 27px;
  letter-spacing: -0.04em;
  margin: 8px 0 0;
}
.workflow-focus-heading > span {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  font-size: 12px;
  color: var(--brand-accent);
}
.workflow-focus-heading svg {
  width: 20px;
  height: 20px;
}
.workflow-journey {
  display: flex;
  gap: 8px;
  padding: 18px;
  background: var(--surface-soft, #f8fafb);
  overflow: auto;
}
.workflow-journey button {
  flex: 1;
  min-width: 130px;
  border: 1px solid var(--surface-border, #dce6e8);
  background: var(--surface, #fff);
  color: var(--ink);
  padding: 16px;
  text-align: left;
  border-radius: 12px;
  position: relative;
}
.workflow-journey button > span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--surface-soft, #f8fafb);
  border-radius: 9px;
}
.workflow-journey svg {
  width: 17px;
  height: 17px;
}
.workflow-journey small {
  float: right;
  opacity: 0.45;
  font-size: 11px;
}
.workflow-journey strong {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin: 12px 0 6px;
}
.workflow-journey em {
  font-size: 10px;
  font-style: normal;
  opacity: 0.7;
}
.workflow-journey [aria-current='step'] {
  border-color: var(--brand-accent);
  background: var(--brand-soft, #edf5f5);
  color: var(--brand-accent);
}
.workflow-focus > .workflow-active-lesson {
  padding: 30px;
  max-width: 1000px;
  margin: auto;
}
.workflow-focus .workflow-lesson-content {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.workflow-focus .workflow-lesson-content article {
  display: block;
  border: 1px solid var(--surface-border, #dce6e8);
  padding: 20px;
  border-radius: 14px;
  background: var(--surface, #fff);
}
.workflow-focus .workflow-lesson-content h3 {
  margin: 16px 0 8px;
}
.workflow-focus .workflow-lesson-content p {
  font-size: 13px;
  line-height: 1.65;
}
.workflow-focus details {
  margin-top: 14px;
}
.workflow-focus details summary {
  font-size: 11px;
  color: var(--brand-accent);
  cursor: pointer;
}
.workflow-focus details p {
  margin-top: 12px;
}
.workflow-focus footer {
  justify-content: space-between;
  gap: 30px;
}
.workflow-connection {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border-radius: 12px;
  padding: 18px;
  background: var(--brand-soft, #edf5f5);
}
.workflow-connection span {
  font-size: 11px;
  line-height: 1.5;
}
.workflow-connection b {
  display: block;
  color: var(--brand-accent);
  margin-bottom: 6px;
}
.workflow-connection p {
  grid-column: 1/-1;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}
.workflow-tool-chain button:after {
  content: none !important;
}
.workflow-focus button:after,
.setup-focus button:after {
  content: none !important;
}
.workflow-focus .btn svg,
.setup-focus .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.setup-focus .setup-guide-body > section {
  padding: 28px;
}
.setup-task-cards {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.setup-task-cards article {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--surface-border, #dce6e8);
  padding: 14px;
  border-radius: 12px;
}
.setup-task-cards article > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--brand-accent);
  background: var(--brand-soft, #edf5f5);
  font-size: 12px;
  font-weight: 700;
}
.setup-task-cards p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.setup-focus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 18px 0;
}
.setup-explanation > p {
  font-size: 12px;
  line-height: 1.65;
}
.guide-coach.setup-page-guide {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 340px;
  z-index: 35;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, transparent);
  background: var(--surface, #fff);
  box-shadow: 0 16px 60px #14394130;
  border-radius: 16px;
}
.guide-coach details > summary {
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}
.guide-coach summary > span {
  flex: 1;
}
.guide-coach summary strong,
.guide-coach summary small {
  display: block;
}
.guide-coach summary strong {
  font-size: 13px;
  margin-top: 4px;
}
.guide-coach summary small {
  font-size: 9px;
  letter-spacing: 0.09em;
  color: var(--brand-accent);
}
.guide-coach summary > svg {
  width: 18px;
  height: 18px;
  color: var(--brand-accent);
}
.guide-coach-body {
  padding: 0 16px 16px;
}
.guide-coach-body > p {
  font-size: 12px;
  line-height: 1.65;
  margin: 14px 0;
}
.coach-progress {
  display: flex;
  gap: 6px;
}
.coach-progress button {
  height: 26px;
  width: 26px;
  border-radius: 8px;
  border: 1px solid var(--surface-border, #dce6e8);
  background: var(--surface, #fff);
  font-size: 11px;
  color: var(--ink);
}
.coach-progress [aria-current='step'] {
  background: var(--brand-accent);
  color: var(--brand-accent-ink, #fff);
}
.guide-coach footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.coach-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.guide-coach .btn {
  font-size: 11px;
  padding: 8px 10px;
  gap: 8px;
}
.guide-coach button:after {
  content: none !important;
}
.guide-coach .btn svg {
  width: 16px;
  height: 16px;
}
.setup-modal-guide.guide-coach {
  padding: 0 !important;
  background: var(--brand-soft, #edf5f5);
  margin: 0 0 18px !important;
  border-radius: 12px;
  max-height: 260px;
  overflow: auto;
}
.guide-target {
  outline: 3px solid color-mix(in srgb, var(--brand-accent) 65%, transparent);
  outline-offset: 5px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-accent) 12%, transparent);
}
@media (max-width: 760px) {
  .artwork-crop-layout,
  .email-filter-grid {
    grid-template-columns: 1fr;
  }
  .email-preferences > header,
  .email-preferences form {
    padding: 20px;
  }
  .email-preferences h2 {
    font-size: 20px;
  }
  .email-preferences footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .workflow-focus-heading {
    padding: 20px;
    align-items: flex-start;
  }
  .workflow-focus-heading h2 {
    font-size: 22px;
  }
  .workflow-focus-heading > span {
    font-size: 10px;
  }
  .workflow-journey {
    padding: 12px;
  }
  .workflow-journey button {
    min-width: 125px;
    padding: 12px;
  }
  .workflow-focus > .workflow-active-lesson {
    padding: 20px;
  }
  .workflow-focus .workflow-lesson-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .workflow-focus .workflow-lesson-content article {
    display: flex;
    padding: 16px;
    gap: 14px;
  }
  .workflow-focus .workflow-lesson-content h3 {
    margin-top: 2px;
  }
  .workflow-connection {
    gap: 8px;
    padding: 12px;
  }
  .workflow-connection span {
    font-size: 10px;
  }
  .workflow-focus footer {
    flex-wrap: nowrap;
    gap: 16px;
  }
  .workflow-focus footer .btn {
    font-size: 11px;
    padding: 10px;
  }
  .guide-coach.setup-page-guide {
    right: 12px;
    bottom: 82px;
    width: min(340px, calc(100vw - 24px));
    max-height: 50dvh;
    overflow: auto;
  }
  .guide-coach.setup-page-guide summary {
    padding: 12px;
  }
  .setup-focus .setup-guide-body > section {
    padding: 20px;
  }
}

.email-delivery-notice {
  margin: 20px 30px 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--brand-soft, #edf5f5);
  color: var(--brand-readable-accent, #0f766e) !important;
}

.email-preferences .form-error:empty {
  display: none;
}

.setup-modal-guide.guide-coach {
  max-height: none;
  overflow: visible;
}
.guide-coach-body [hidden] {
  display: none !important;
}

.setup-focus .setup-guide-body {
  grid-template-columns: 290px minmax(0, 1fr);
}
.setup-focus .setup-guide-body > nav button {
  gap: 12px;
  min-height: 68px;
  padding: 14px;
  font-size: 12px;
}
.setup-focus .setup-guide-body > nav strong {
  flex: 1;
  font-weight: 600;
}
.setup-focus .setup-guide-body > nav small {
  font-size: 9px;
}
.setup-focus h2 {
  font-size: 23px;
  margin-bottom: 20px;
}
.setup-focus .setup-task-cards article {
  padding: 18px;
  min-height: 66px;
  align-items: flex-start;
}
.setup-focus .setup-task-cards p {
  font-size: 12.5px;
  line-height: 1.7;
}
.setup-auto-note,
.coach-auto-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--surface-muted, #526e74);
  font-size: 11px;
  line-height: 1.6;
}
.setup-auto-note svg,
.coach-auto-note svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--brand-accent);
  margin-top: 2px;
}
.workflow-focus .workflow-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 22px 30px;
  overflow: visible;
}
.workflow-focus .workflow-journey button {
  min-width: 0;
  min-height: 92px;
  padding: 17px 18px 17px 66px;
}
.workflow-focus .workflow-journey button > span {
  position: absolute;
  left: 18px;
  top: 20px;
  width: 34px;
  height: 34px;
}
.workflow-focus .workflow-journey strong {
  margin: 0 12px 6px 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.workflow-focus .workflow-journey small {
  position: absolute;
  right: 12px;
  bottom: 13px;
  float: none;
}
.workflow-focus .workflow-journey em {
  font-size: 10px;
  opacity: 0.8;
}
.workflow-focus .workflow-journey [aria-current='step'] > span {
  background: var(--brand-accent);
  color: var(--brand-accent-ink, #fff);
}
.workflow-focus .workflow-journey button:has(.lucide-check) {
  border-color: color-mix(in srgb, var(--brand-accent) 25%, var(--surface-border, #dce6e8));
}
.workflow-focus .workflow-lesson-content {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px;
}
.workflow-focus .workflow-lesson-content article {
  padding: 22px;
  min-width: 0;
}
.workflow-focus .workflow-lesson-content h3 {
  font-size: 14px;
  line-height: 1.5;
  margin: 14px 0 9px;
}
.workflow-focus .workflow-lesson-content p {
  font-size: 12.5px;
  line-height: 1.7;
}
.workflow-focus .workflow-active-lesson > header h2 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin: 9px 0;
}
.workflow-focus .workflow-action {
  gap: 20px;
  flex-wrap: wrap;
}
.workflow-focus footer .btn {
  gap: 12px;
  min-height: 44px;
}
.guide-coach.setup-page-guide {
  width: 365px;
  max-height: calc(100dvh - 130px);
  overflow: auto;
}
@media (min-width: 1280px) {
  .workspace:has(.setup-page-guide) {
    padding-right: 415px;
  }
}
@media (min-width: 701px) and (max-width: 1279px) {
  .guide-coach.setup-page-guide {
    position: relative;
    inset: auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0 0 20px;
    z-index: auto;
  }
}
body:has(#modal[open]) .setup-page-guide {
  display: none;
}
.dialog:has(.setup-modal-guide) {
  width: min(1180px, 96vw);
  max-width: 1180px;
}
.dialog-content:has(> .setup-modal-guide) {
  grid-template-columns: 310px minmax(0, 1fr);
}
.guide-coach summary strong {
  font-size: 13px;
  line-height: 1.5;
}
.guide-coach-body > p {
  font-size: 12px;
  line-height: 1.75;
  margin: 16px 0;
}
.coach-journey {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 10px;
  padding: 4px 0 16px;
  color: var(--surface-muted, #526e74);
}
.coach-journey > span {
  font-weight: 650;
  color: var(--brand-accent);
}
.coach-journey > small {
  font-size: 10px;
}
.coach-journey > div {
  flex-basis: 100%;
  display: flex;
  gap: 5px;
}
.coach-journey > div > span {
  height: 4px;
  border-radius: 4px;
  flex: 1;
  background: color-mix(in srgb, var(--brand-accent) 14%, var(--surface, #fff));
}
.coach-journey > div > .is-done {
  background: var(--brand-accent);
}
.coach-journey > div > .is-current {
  outline: 1px solid var(--brand-accent);
  outline-offset: 2px;
}
.guide-coach .coach-live-stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 !important;
  margin: 0;
  list-style: none;
  font-size: 11px;
}
.coach-live-stages li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0 !important;
}
.coach-live-stages li:not(:last-child):before {
  content: '';
  position: absolute;
  left: 12px;
  top: 36px;
  width: 1px;
  height: 19px;
  background: var(--surface-border, #dce6e8);
}
.coach-live-stages li > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid var(--surface-border, #dce6e8);
  background: var(--surface, #fff);
  flex-shrink: 0;
  font-size: 11px;
}
.coach-live-stages strong {
  font-size: 11px;
  line-height: 1.6;
  font-weight: 600;
}
.coach-live-stages small {
  display: block;
  font-size: 10px;
  line-height: 1.6;
  opacity: 0.75;
  margin-top: 2px;
}
.coach-live-stages .is-done > span {
  background: var(--brand-accent);
  color: var(--brand-accent-ink, #fff);
  border-color: var(--brand-accent);
}
.coach-live-stages .is-current strong {
  color: var(--brand-accent);
}
.coach-live-stages .is-current > span {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 12%, transparent);
}
.guide-coach .setup-form-readiness {
  padding: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 10px;
  font-size: 11px;
}
.guide-target {
  transition:
    outline-color 0.18s,
    box-shadow 0.18s;
  border-radius: 8px;
}
@media (max-width: 980px) {
  .setup-focus .setup-guide-body {
    grid-template-columns: 250px minmax(0, 1fr);
  }
  .workflow-focus .workflow-journey {
    padding: 18px;
    gap: 10px;
  }
  .workflow-focus .workflow-journey button {
    padding-left: 55px;
  }
  .workflow-focus .workflow-journey button > span {
    left: 12px;
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 700px) {
  .setup-focus .setup-guide-body {
    grid-template-columns: 1fr;
  }
  .setup-focus .setup-guide-body > nav button {
    min-width: 205px;
    min-height: 64px;
  }
  .setup-focus .setup-task-cards article {
    padding: 15px;
  }
  .setup-focus h2 {
    font-size: 21px;
  }
  .workflow-focus .workflow-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
    gap: 9px;
  }
  .workflow-focus .workflow-journey button {
    padding: 14px;
    min-height: 126px;
  }
  .workflow-focus .workflow-journey button > span {
    position: static;
    width: 28px;
    height: 28px;
    margin-bottom: 9px;
  }
  .workflow-focus .workflow-journey strong {
    font-size: 11px;
    line-height: 1.5;
    margin-right: 0;
  }
  .workflow-focus .workflow-journey em {
    font-size: 9px;
  }
  .workflow-focus .workflow-lesson-content article {
    padding: 18px;
  }
  .workflow-focus .workflow-lesson-content h3 {
    margin-top: 0;
  }
  .workflow-focus .workflow-active-lesson > header h2 {
    font-size: 21px;
  }
  .guide-coach.setup-page-guide {
    position: relative;
    inset: auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0 0 20px;
    z-index: auto;
  }
  .mobile-clock-context,
  .guide-target {
    scroll-margin-top: 76px;
  }
  .coach-journey {
    padding-bottom: 12px;
  }
  .setup-modal-guide.guide-coach {
    max-height: 38dvh;
    overflow: auto;
  }
  .coach-live-stages {
    gap: 0;
  }
  .coach-live-stages li {
    padding: 7px 0 !important;
  }
  .coach-live-stages li:not(:last-child):before {
    height: 13px;
    top: 32px;
  }
  .guide-coach-body > p {
    margin: 10px 0;
  }
  .coach-links {
    margin-top: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .guide-target {
    transition: none;
  }
}

.guide-instruction-kind {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--surface-muted);
}
.guide-instruction-kind > .icon {
  width: 15px;
  height: 15px;
  flex: none;
}
.guide-instruction-kind > strong {
  font-size: 11px;
  letter-spacing: 0.035em;
}
.guide-instruction-kind.is-action > strong,
.guide-instruction-kind.is-action > .icon {
  color: var(--brand-readable-accent);
}
.guide-instruction-kind > small {
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid var(--surface-border);
  border-radius: 20px;
  color: var(--surface-muted);
}
.guide-instruction-kind.is-action > small:first-of-type {
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  border-color: transparent;
}
.setup-task-cards article > div {
  min-width: 0;
  flex: 1;
}
.guide-coach-body > .guide-instruction-kind {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}

.guide-instruction-kind > strong {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
}
.guide-instruction-kind.is-optional > strong {
  background: var(--warning-surface, #fff3d8);
  color: var(--warning-ink, #805309);
}
.guide-instruction-kind.is-optional > .icon {
  color: var(--warning-ink, #805309);
}
.guide-instruction-kind.is-information > strong {
  background: #eaf1fb;
  color: #275785;
}
.guide-instruction-kind.is-information > .icon {
  color: #275785;
}
.guide-instruction-kind.is-optional > small:first-of-type,
.guide-instruction-kind.is-information > small:first-of-type {
  background: transparent;
  color: var(--surface-muted);
  border-color: var(--surface-border);
}

.guide-instruction-kind.is-action > strong {
  background: var(--status-success-surface, #e8f5ec);
  color: var(--status-success-ink, #1f6842);
}
.guide-instruction-kind.is-action > .icon {
  color: var(--status-success-ink, #1f6842);
}

.coach-feedback {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, var(--line));
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-readable-accent);
  font-size: 13px;
  line-height: 1.5;
}
.coach-feedback > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.coach-feedback.is-error {
  background: var(--status-danger-surface, #fff0ed);
  color: var(--status-danger-ink, #9f2720);
  border-color: color-mix(in srgb, #b42318 25%, var(--line));
}
.coach-feedback .toast-close {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}
.coach-feedback .toast-close:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.email-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.email-category-choice {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--brand-surface);
  cursor: pointer;
}
.email-category-choice:has(input:checked) {
  background: var(--brand-soft);
  border-color: var(--brand-accent);
}
.email-category-choice > span {
  flex: 1;
  min-width: 0;
}
.email-category-choice small {
  display: block;
  margin-top: 6px;
  color: var(--surface-muted);
  line-height: 1.5;
}
.email-category-choice input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-accent);
}
.email-open-shift-filters {
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 18px;
  margin: 32px 0;
  background: var(--brand-canvas);
}
.email-open-shift-filters summary {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 650;
  cursor: pointer;
}
.email-open-shift-filters summary > span:first-of-type {
  flex: 1;
  min-width: 0;
}
.email-open-shift-filters summary small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--surface-muted);
  margin-top: 5px;
}
.email-open-shift-filters summary > .icon:last-child {
  width: 17px;
  height: 17px;
  transition: transform 0.2s;
}
.email-open-shift-filters[open] summary > .icon:last-child {
  transform: rotate(180deg);
}
.context-help-actions {
  flex: 0 0 auto;
  align-self: center;
}
.context-help {
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .email-category-grid {
    grid-template-columns: 1fr;
  }
}

/* Source: workspace-operations.css */
.personal-settings-tabs {
  display: flex;
  gap: 12px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.personal-device-settings {
  margin-top: 24px;
  padding: 32px;
  display: flex;
  gap: 24px;
  max-width: 850px;
}
.personal-device-settings h2 {
  margin: 8px 0 14px;
}
.personal-device-settings p,
.personal-device-settings li {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}
.personal-device-settings ul {
  padding-left: 20px;
  margin: 20px 0;
}
.device-setting-icon {
  background: var(--brand-soft);
  border-radius: 14px;
  padding: 16px;
  height: fit-content;
  color: var(--brand-readable-accent);
}
.account-access-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-directory-row .account-access-actions {
  max-width: 300px;
}
.company-admin-account {
  flex-wrap: wrap;
}
.company-admin-account .account-access-actions {
  flex-basis: 100%;
  justify-content: flex-start;
}
.warehouse-needs-setup {
  flex-wrap: wrap;
  color: var(--muted);
}
.warehouse-needs-setup small {
  margin-left: 26px;
  width: 100%;
  color: #a15c05;
}
.warehouse-access-hint,
.defaults-coach-note {
  font-size: 12px;
  line-height: 1.7;
  margin: 16px 0;
  padding: 12px 16px;
  background: #fff7e8;
  color: #865008;
  border: 1px solid #f3d5a0;
  border-radius: 10px;
}
.setup-prerequisite {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  margin-bottom: 20px;
  background: #fff7e8;
  color: #865008;
  border: 1px solid #f3d5a0;
  border-radius: 14px;
}
.guide-target {
  outline: 3px solid #d97706 !important;
  outline-offset: 5px !important;
  box-shadow: 0 0 0 9px #f59e0b24 !important;
}
.appearance-designer-dialog {
  width: min(1480px, 97vw) !important;
  max-width: 1480px !important;
}
.appearance-designer .form-grid {
  display: block;
  padding: 0;
}
.appearance-designer-layout {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(360px, 1.15fr);
  align-items: start;
}
.appearance-designer-controls {
  grid-column: 1;
  grid-row: 1;
  padding: 26px;
  min-width: 0;
}
.appearance-designer-controls > header h3 {
  font-size: 22px;
  letter-spacing: -0.025em;
  margin: 10px 0;
}
.appearance-designer-controls > header p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.appearance-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.appearance-editor-tabs button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
}
.appearance-editor-tabs button[aria-selected='true'] {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-accent-ink, #fff);
  box-shadow: 0 3px 8px var(--brand-focus-shadow);
  font-weight: 700;
}
.appearance-editor-tabs .icon {
  width: 16px;
  height: 16px;
}
.appearance-designer [data-appearance-panel] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.appearance-designer [data-appearance-panel][hidden] {
  display: none !important;
}
.appearance-designer fieldset {
  min-width: 0;
  margin: 0;
}
.appearance-designer .brand-color-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.appearance-designer .access-art-choices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.appearance-designer .appearance-live-preview {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: block;
  max-height: none;
  position: sticky;
  top: 0;
  padding: 24px;
  margin: 0;
  min-width: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--canvas);
}
.appearance-designer .appearance-preview-stage {
  height: 420px;
  min-height: 420px;
  overflow: auto;
}
.appearance-designer .appearance-preview-stage.is-phone {
  height: 520px;
}
.appearance-designer .logo-crop-layout {
  grid-template-columns: 1fr;
  gap: 24px;
}
.appearance-designer .logo-crop-layout canvas {
  width: min(260px, 100%);
  height: auto;
  justify-self: center;
}
.appearance-designer .artwork-crop-layout {
  grid-template-columns: 1fr;
}
.appearance-designer .artwork-crop-layout canvas {
  max-width: 100%;
  height: auto;
}
.image-range-field {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
  gap: 12px;
}
.image-range-field > span {
  font-size: 12px;
}
.workflow-redesign .workflow-lesson-content,
.workflow-focus .workflow-lesson-content {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.workflow-redesign .workflow-lesson-content article,
.workflow-focus .workflow-lesson-content article {
  padding: 24px;
  min-height: 110px;
  gap: 20px;
}
.workflow-redesign .workflow-lesson-content article > span,
.workflow-focus .workflow-lesson-content article > span {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.workflow-redesign .workflow-lesson-content h3,
.workflow-focus .workflow-lesson-content h3 {
  font-size: 15px;
}
.workflow-redesign .workflow-lesson-content p,
.workflow-focus .workflow-lesson-content p {
  font-size: 13px;
  line-height: 1.75;
}
.workflow-active-lesson footer {
  gap: 20px !important;
}
@media (max-width: 1180px) {
  .appearance-designer-layout {
    grid-template-columns: 1fr;
  }
  .appearance-designer-controls {
    grid-row: 2;
  }
  .appearance-designer .appearance-live-preview {
    grid-column: 1;
    grid-row: 1;
    order: -1;
    position: relative;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .appearance-designer .appearance-preview-stage {
    height: 280px;
    min-height: 280px;
  }
  .appearance-designer .appearance-preview-stage.is-phone {
    height: 390px;
  }
}
@media (max-width: 700px) {
  .appearance-designer .appearance-editor-tabs {
    grid-column: 1;
    grid-row: 1;
    padding: 14px 16px;
    margin: 0;
    gap: 7px;
  }
  .appearance-designer .appearance-preview-stage.is-phone {
    height: 280px;
    min-height: 280px;
  }
  .appearance-designer [data-appearance-panel]:not([hidden]) {
    grid-column: 1;
    grid-row: 3;
    padding: 20px;
    min-width: 0;
  }
  .personal-device-settings {
    padding: 22px;
    gap: 16px;
  }
  .personal-device-settings > .device-setting-icon {
    display: none;
  }
  .account-access-actions {
    justify-content: flex-start;
  }
  .appearance-designer-controls {
    display: contents;
    padding: 18px;
  }
  .appearance-designer-controls > header {
    display: none;
  }
  .appearance-designer .appearance-live-preview {
    grid-row: 2;
    padding: 16px;
  }
  .appearance-designer .appearance-preview-stage {
    height: 230px;
    min-height: 230px;
  }
  .appearance-designer .brand-color-grid {
    grid-template-columns: 1fr;
  }
  .appearance-editor-tabs button {
    padding: 9px;
    font-size: 11px;
  }
  .appearance-editor-tabs .icon {
    width: 14px;
    height: 14px;
  }
  .workflow-redesign .workflow-lesson-content article,
  .workflow-focus .workflow-lesson-content article {
    padding: 20px;
    gap: 14px;
    min-height: 140px;
  }
}

.workflow-focus .workflow-lesson-content article,
.workflow-redesign .workflow-lesson-content article {
  display: flex !important;
  align-items: flex-start;
  padding: 24px !important;
  gap: 20px !important;
}
.workflow-focus .workflow-lesson-content article > span {
  flex: none;
}
.workflow-focus .workflow-lesson-content article > div {
  flex: 1;
  min-width: 0;
}
.workflow-focus .workflow-lesson-content h3 {
  margin: 2px 0 8px !important;
}
@media (max-width: 700px) {
  .workflow-focus .workflow-lesson-content article,
  .workflow-redesign .workflow-lesson-content article {
    padding: 20px !important;
    gap: 14px !important;
  }
}

.company-owner-badge {
  margin: 10px 0 4px;
  gap: 6px;
}
.account-access-protected {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand-readable-accent);
  font-size: 12px;
  line-height: 1.5;
}
.account-access-protected .icon {
  width: 17px;
  height: 17px;
  flex: none;
}
.admin-directory-row:has(.personal-manager-actions),
.admin-directory-row,
.admin-directory-columns {
  grid-template-columns:
    minmax(150px, 1fr) minmax(170px, 1fr) minmax(110px, 0.6fr)
    minmax(280px, 1.25fr);
}
.admin-directory-actions,
.admin-directory-row .personal-manager-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.admin-directory-actions .account-access-actions {
  display: contents;
}
.admin-directory-actions > .btn,
.admin-directory-actions .account-access-actions > .btn {
  flex: 0 1 auto;
  white-space: nowrap;
}
.admin-directory-row .account-access-actions {
  max-width: none;
}
@media (max-width: 1200px) {
  .admin-directory-row:has(.personal-manager-actions),
  .admin-directory-row,
  .admin-directory-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(100px, 0.6fr);
  }
  .admin-directory-row .admin-account-state {
    grid-column: 3;
    grid-row: 1;
  }
  .admin-directory-actions,
  .admin-directory-row .personal-manager-actions {
    grid-column: 1/-1;
    grid-row: 2;
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid var(--surface-border);
  }
  .admin-directory-columns > span:nth-child(3) {
    display: block;
  }
  .admin-directory-columns > span:nth-child(4) {
    display: none;
  }
}
@media (max-width: 700px) {
  .admin-directory-row:has(.personal-manager-actions),
  .admin-directory-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-directory-row .admin-account-state {
    grid-column: 1;
    grid-row: 3;
  }
  .admin-directory-actions,
  .admin-directory-row .personal-manager-actions {
    grid-column: 1;
    grid-row: 4;
  }
  .admin-directory-actions .btn {
    flex: 1 1 140px;
  }
}

.crop-axis-hint {
  display: block;
  color: var(--surface-muted);
  font-size: 11px;
  line-height: 1.5;
}
.image-range-field input[type='range']:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.logo-crop-editor [data-apply-logo-crop][hidden] {
  display: none !important;
}
.logo-crop-layout canvas,
.artwork-crop-layout canvas {
  cursor: grab;
  touch-action: none;
}
.logo-crop-layout canvas:active,
.artwork-crop-layout canvas:active {
  cursor: grabbing;
}

.employee-primary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap !important;
}
.employee-primary-actions > .btn {
  white-space: nowrap;
}
.employee-more {
  width: 36px;
  min-width: 36px;
  padding: 8px !important;
}
.employee-action-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 8px;
  min-width: 210px;
  max-width: calc(100vw - 16px);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--brand-surface);
  color: var(--surface-ink);
  box-shadow: var(--shadow-overlay);
}
.employee-action-popover:popover-open {
  display: grid;
  gap: 4px;
}
.employee-action-popover > .btn {
  width: 100%;
  justify-content: flex-start !important;
  border: 0;
  background: transparent;
  min-height: 40px;
  text-align: left !important;
}
.employee-action-popover > .btn:hover,
.employee-action-popover > .btn:focus-visible {
  background: var(--brand-soft);
}
.employee-action-popover > .btn.danger {
  color: #b42318;
  border-top: 1px solid var(--surface-border);
  border-radius: 0 0 6px 6px;
}
.employee-action-popover::backdrop {
  background: transparent;
}
.workspace[data-view='timecards'] .timecard-status-filter {
  width: 100%;
  min-width: 0;
}
.workspace[data-view='schedule'] .calendar-filters {
  gap: 8px;
  margin-bottom: 12px;
}
.workspace[data-view='schedule'] .calendar-filters > .list-search {
  flex: 1 1 220px;
}
.workspace[data-view='schedule'] .calendar-filters > .searchable-filter {
  flex: 0 1 165px;
  min-width: 145px;
}
.workspace[data-view='schedule'] .calendar-filters > .filter-label {
  display: none;
}
.calendar-filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  width: 100%;
  padding-top: 2px;
}
.calendar-filters .calendar-filter-meta .calendar-result {
  flex: 0 0 auto;
  margin: 0;
  order: 0;
}
.calendar-filter-meta .calendar-category-legend {
  margin: 0;
  padding: 8px 10px;
  flex: 0 1 auto;
  font-size: 11px;
}
.calendar-filter-meta .calendar-category-legend > strong {
  font-size: 11px;
}
.calendar-filter-meta .category-key {
  padding: 4px 7px;
  font-size: 11px;
}
.toast {
  pointer-events: none;
}
.toast button,
.toast a {
  pointer-events: auto;
}
.location-setting ul {
  list-style: disc outside;
}
.location-setting ol {
  list-style: decimal outside;
}
.location-setting li::marker {
  color: var(--brand-readable-accent);
  font-weight: 700;
}
.employee-request-status {
  display: none;
}
@media (min-width: 851px) {
  .top {
    grid-template-columns: fit-content(42%) minmax(180px, 1fr) auto auto;
  }
  .top .header-brand .brand {
    flex: 1;
    min-width: 0;
  }
  .top .company-brand-name {
    max-width: none;
    flex: 1;
  }
  .top .warehouse-context-switch {
    width: max-content;
    max-width: 100%;
    min-width: min(280px, 100%);
  }
  .top .warehouse-context-copy {
    max-width: none;
    min-width: 0;
    flex: 1;
  }
}
@media (max-width: 700px) {
  .employee-primary-actions .employee-more {
    min-width: 44px;
    width: 44px;
  }
  .employee-action-popover > .btn {
    min-height: 44px;
  }
  .toast {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 16px;
    max-width: calc(100vw - 32px);
  }
  .workspace[data-view='schedule'] .calendar-filters > .list-search {
    flex-basis: 100%;
  }
  .workspace[data-view='schedule'] .calendar-filters > .searchable-filter {
    flex: 1 1 140px;
  }
  .workspace[data-view='dashboard'][data-role='employee']
    .home-metrics
    > .metric:last-child {
    display: none;
  }
  .employee-request-status {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin: -4px 0 24px;
    text-align: left;
    cursor: pointer;
  }
  .employee-request-status > span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .employee-request-status strong {
    font-size: 12px;
    font-weight: 650;
  }
  .employee-request-status small {
    font-size: 11px;
    color: var(--surface-muted);
  }
  .employee-request-status > .icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--brand-readable-accent);
  }
}

@media (min-width: 851px) {
  .top .manager-warehouse-context {
    max-width: none;
  }
  .top .header-brand .brand {
    flex: 0 1 auto;
  }
}

.account-first-shift {
  padding: 16px 18px;
  border: 1px solid var(--brand-border);
  border-left: 3px solid var(--brand-accent);
  background: var(--brand-surface, #fff);
  border-radius: 10px;
  display: grid;
  gap: 7px;
}
.account-first-shift > span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--brand-readable-accent);
  font-weight: 750;
}
.account-first-shift > strong {
  font-size: 17px;
}
.account-first-shift p {
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  color: var(--surface-muted);
}

.artwork-upload[hidden] {
  display: none !important;
}
.appearance-designer [data-appearance-panel='signin'] fieldset,
.appearance-designer [data-appearance-panel='recovery'] fieldset {
  display: grid;
  gap: 22px;
  padding: 24px;
}
.appearance-designer [data-appearance-panel='signin'] .field,
.appearance-designer [data-appearance-panel='recovery'] .field {
  margin: 0;
  gap: 10px;
}
.workflow-learning .workflow-active-lesson h2 {
  margin: 8px 0 22px;
}
.workflow-learning .setup-explanation .workflow-connection {
  margin: 18px 0;
}
@media (max-width: 700px) {
  .appearance-designer [data-appearance-panel='signin'] fieldset,
  .appearance-designer [data-appearance-panel='recovery'] fieldset {
    padding: 18px;
    gap: 20px;
  }
}

.logo-crop-editor[hidden],
.image-range-field[hidden] {
  display: none !important;
}

.toast.mobile-inline-feedback {
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  margin: 0 0 18px;
  padding: 11px 14px;
  gap: 12px;
  box-shadow: 0 2px 7px var(--brand-focus-shadow);
}

.workforce-policy-card {
  margin-bottom: 24px;
}
.workforce-policy-card > form {
  padding: 24px;
}
.workforce-policy-card > form > .dialog-footer {
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.workforce-policy-card > .settings-cards {
  padding: 24px;
  margin: 0;
  gap: 18px;
}
.workforce-policy-card > .row {
  padding: 0 24px 20px;
}
.workforce-policy-card > .note {
  padding: 20px 24px;
  margin: 0;
}
.workforce-policy-card > .work-area-row {
  padding: 18px 24px;
  border-top: 1px solid var(--line);
}
.workforce-policy-card small {
  display: block;
  line-height: 1.6;
  margin-top: 5px;
  color: var(--surface-muted);
}
@media (max-width: 700px) {
  .workforce-policy-card > form,
  .workforce-policy-card > .settings-cards {
    padding: 20px;
  }
  .workforce-policy-card > .row {
    padding: 0 20px 20px;
  }
  .workforce-policy-card > .note,
  .workforce-policy-card > .work-area-row {
    padding: 18px 20px;
  }
  .workforce-policy-card > .work-area-row {
    gap: 14px;
    flex-wrap: wrap;
  }
  .workforce-policy-card > .work-area-row > .btn {
    margin-left: auto;
  }
}

.clock-badge-shortcut {
  gap: 12px;
  margin: 0 0 24px;
}
.clock-badge-card {
  max-width: 540px;
  display: grid;
  gap: 20px;
  justify-items: start;
}
.clock-badge-image {
  background: white;
  padding: 16px;
  border-radius: 16px;
  max-width: 320px;
  width: 100%;
}
.clock-badge-image svg {
  display: block;
  width: 100%;
  height: auto;
}
.workforce-policy-card .check small {
  display: block;
  margin-top: 7px;
  color: var(--surface-muted);
  line-height: 1.5;
}

.manager-hiring-progress {
  white-space: nowrap;
}
.manager-hiring-progress > span {
  font-size: 11px;
  background: var(--brand-soft);
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--brand-readable-accent);
}
.appearance-designer .access-art-thumbnail .access-art {
  --access-accent: var(--brand-accent);
  --access-secondary: var(--brand-secondary);
  --access-surface: var(--brand-surface);
  --access-ink: var(--brand-text);
}
.appearance-editor-tabs button {
  min-height: 42px;
  font-size: 13px;
  font-weight: 600;
}
.appearance-editor-tabs button:not([aria-selected='true']) {
  color: var(--ink);
  background: var(--canvas);
}
.appearance-recovery-contact dl {
  margin: 4px 0;
  display: grid;
  gap: 6px;
}
.appearance-recovery-contact dl > div {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.appearance-recovery-contact dt {
  font-weight: 600;
}
.appearance-recovery-contact dd {
  margin: 0;
  text-align: right;
}
.appearance-recovery-company-help {
  margin-top: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--preview-accent);
  font-size: 10px;
}
.appearance-recovery-company-help p {
  margin: 6px 0;
}
.appearance-recovery-company-help small {
  overflow-wrap: anywhere;
}
.appearance-recovery-story {
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--preview-accent) 8%, var(--preview-surface)),
    var(--preview-surface) 78%
  ) !important;
}
.appearance-preview-stage {
  overflow: auto;
}
@media (max-width: 700px) {
  .appearance-editor-tabs button {
    font-size: 12px;
  }
}

.open-shift-reminder-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.55;
}
.open-shift-reminder-note .icon {
  flex: 0 0 18px;
  color: var(--brand-readable-accent);
  margin-top: 2px;
}

.manager-warehouse-options > .warehouse-access-hint {
  grid-column: 1/-1;
  margin: 6px 0 0;
}

.policy-impact-preview {
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--brand-accent);
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 18px;
  margin: 18px 0;
}
.policy-impact-preview h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin: 0 0 14px;
}
.policy-impact-preview h3 svg {
  width: 18px;
  height: 18px;
}
[data-policy-impact-content] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}
[data-policy-impact-content] strong {
  font-size: 12px;
}
[data-policy-impact-content] p {
  font-size: 12px;
  color: var(--surface-muted);
  line-height: 1.65;
  margin: 5px 0 0;
}
.workspace-saved-outcome {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--brand-accent);
  border-radius: 12px;
  background: var(--brand-soft);
}
.workspace-saved-outcome > span svg {
  width: 22px;
  height: 22px;
  color: var(--brand-readable-accent);
}
.workspace-saved-outcome > div {
  flex: 1;
  min-width: 0;
}
.workspace-saved-outcome strong {
  font-size: 14px;
}
.workspace-saved-outcome p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--surface-muted);
  margin: 5px 0 0;
}
@media (max-width: 600px) {
  [data-policy-impact-content] {
    grid-template-columns: 1fr;
  }
}

.assignment-activity ol {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.assignment-activity li {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--surface-border);
  padding: 16px 0;
  font-size: 13px;
}
.assignment-activity li > span {
  color: var(--brand-readable-accent);
}
.assignment-activity li > div {
  min-width: 0;
}
.assignment-activity li p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--surface-muted);
  margin: 6px 0;
}
.assignment-activity dl > div {
  margin: 10px 0;
}
.assignment-activity dt {
  font-size: 11px;
  color: var(--surface-muted);
}
.assignment-activity dd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  margin: 5px 0 0;
}
.assignment-activity dd svg {
  width: 14px;
  height: 14px;
}
.assignment-activity > footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  font-size: 12px;
}

.role-recommendations {
  margin: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--surface-border);
}
.workforce-policy-card > .role-people-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
  border-bottom: 1px solid var(--surface-border);
}
.role-people-filters > .field {
  margin: 0;
  min-width: 0;
}
.role-people-filters .role-filter-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}
.workforce-policy-card .role-person-status {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .workforce-policy-card > .role-people-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}
.role-recommendations > summary {
  cursor: pointer;
  line-height: 1.6;
}
.role-recommendations > .row {
  margin-top: 20px;
  gap: 12px;
}
@media (max-width: 600px) {
  .role-recommendations {
    margin: 20px 16px;
  }
}
@media (min-width: 1200px) {
  .settings-cards.role-default-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}