/* Generated by scripts/build-frontend.mjs. Edit resources/css/* instead. */

/* resources/css/core/base.css */
:root {
  --canvas: #f5f7f6;
  --surface: #ffffff;
  --surface-soft: #f0f4f2;
  --surface-muted: #f8faf9;
  --ink: #17221e;
  --muted: #66736d;
  --text-soft: #4f5e57;
  --line: #dce4df;
  --line-strong: #c8d3cd;
  --accent: #087a55;
  --accent-strong: #056444;
  --accent-soft: #e7f4ee;
  --coral: #c04f3f;
  --coral-soft: #faece9;
  --amber: #8b6508;
  --amber-soft: #fff5d9;
  --blue: #28658c;
  --blue-soft: #eaf3f8;
  --shadow: 0 12px 36px rgba(23, 34, 30, 0.08);
  --sidebar-width: 252px;
  color-scheme: light;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--canvas);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

button,
input,
textarea {
  font: inherit;
}

/* iOS Safari zooms focused form controls whose text is smaller than 16px. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  input::placeholder,
  textarea::placeholder {
    font-size: 12px !important;
  }
}

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

button {
  border: 0;
}

a {
  color: inherit;
}

.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;
}

.boot-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  align-content: center;
  gap: 24px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
}

.brand-symbol {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-size: 17px;
  font-weight: 800;
}

.boot-progress,
.spinner {
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.boot-progress {
  width: 26px;
  height: 26px;
}

.spinner {
  width: 17px;
  height: 17px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.login-page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(320px, 0.95fr) minmax(460px, 1.05fr);
  background: var(--surface);
}

.login-brand {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px clamp(36px, 6vw, 88px);
  background: #102d25;
  color: white;
}

.login-brand .brand-mark {
  color: white;
}

.login-brand .brand-symbol {
  background: white;
  color: var(--accent-strong);
}

.login-statement {
  max-width: 520px;
  padding: 72px 0;
}

.login-statement p {
  max-width: 440px;
  margin: 18px 0 0;
  color: #c7d8d1;
  font-size: 16px;
}

.login-statement h1 {
  max-width: 520px;
  margin: 0;
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: 0;
}

.login-brand-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #c7d8d1;
  font-size: 12px;
}

.status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #60d6a6;
}

.login-workspace {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 48px clamp(28px, 7vw, 104px);
}

.login-panel {
  width: min(100%, 430px);
}

.login-mobile-brand {
  display: none;
  margin-bottom: 52px;
}

.login-kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.login-panel h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0;
}

.login-copy {
  margin: 10px 0 30px;
  color: var(--muted);
}

.field {
  display: block;
  margin-bottom: 18px;
}

.field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  outline: none;
  background: white;
  color: var(--ink);
  padding: 0 13px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field textarea {
  min-height: 92px;
  padding-top: 11px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 122, 85, 0.12);
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 88px;
}

.password-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 36px;
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
}

.login-options {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: flex-end;
  margin: -6px 0 16px;
}

.deferred-link {
  color: var(--muted);
  font-size: 12px;
}

.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  padding: 0 16px;
  text-decoration: none;
  font-weight: 750;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button-primary {
  background: var(--accent);
  color: white;
}

.button-primary:hover:not(:disabled) {
  background: var(--accent-strong);
}

.button-secondary {
  border-color: var(--line-strong);
  background: white;
  color: var(--ink);
}

.button-secondary:hover:not(:disabled) {
  background: var(--surface-soft);
}

.button-danger {
  background: #a94234;
  color: white;
}

.button-danger:hover:not(:disabled) {
  background: var(--coral);
}

.button-quiet {
  min-height: 36px;
  background: transparent;
  color: var(--muted);
  padding: 0 8px;
}

.button-block {
  width: 100%;
  min-height: 48px;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px 13px;
  font-size: 13px;
}

.alert-mark {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.alert-error {
  border-color: #ecc6c0;
  background: var(--coral-soft);
  color: #7e2d23;
}

.alert-error .alert-mark {
  background: #f1c4bd;
}

.alert-warning {
  border-color: #eadcae;
  background: var(--amber-soft);
  color: #6f5108;
}

.alert-warning .alert-mark {
  background: #f0dd9d;
}

.alert-info {
  border-color: #c9dce8;
  background: var(--blue-soft);
  color: #1e526f;
}

.alert-info .alert-mark {
  background: #c9e1ee;
}

.login-security-note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.app-frame {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 22px 14px 16px;
}

.sidebar-brand {
  padding: 0 8px 22px;
}

.context-panel {
  margin: 0 2px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.context-role {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-scope {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-context-field {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.branch-context-field span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.branch-context-field select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 0 8px;
}

.nav-label {
  margin: 6px 10px 7px;
  color: #87918c;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 3px;
}

.nav-link {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  border-radius: 7px;
  color: #46534d;
  padding: 0 11px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}

.nav-link:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.nav-glyph {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
}

.nav-link.active .nav-glyph {
  border-color: #acd8c7;
  background: white;
}

.nav-coming {
  margin-left: auto;
  color: #8a9690;
  font-size: 9px;
  font-weight: 700;
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 14px 8px 0;
}

.environment-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.app-column {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  padding: 0 28px;
}

.page-identity {
  min-width: 0;
}

.breadcrumb {
  margin: 0 0 1px;
  color: var(--muted);
  font-size: 11px;
}

.header-title {
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
}

.icon-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.notification-button {
  position: relative;
}

.notification-button::after {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--coral);
  content: "";
}

.user-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-left: 4px;
}

.avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #d9ece4;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 850;
}

.user-copy {
  max-width: 160px;
}

.user-copy strong,
.user-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-copy strong {
  font-size: 12px;
}

.user-copy span {
  color: var(--muted);
  font-size: 10px;
}

.mobile-menu-button {
  display: none;
}

.main-content {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 30px 30px 60px;
}

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

.page-heading h1 {
  margin: 0;
  font-size: 27px;
  line-height: 1.22;
  letter-spacing: 0;
}

.page-heading p {
  max-width: 650px;
  margin: 7px 0 0;
  color: var(--muted);
}

.date-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.context-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 13px 16px;
}

.context-strip-item {
  min-width: 0;
}

.context-strip-item span,
.metric-label,
.surface-label {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.context-strip-item strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 800;
}

.badge-success {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.badge-warning {
  background: var(--amber-soft);
  color: var(--amber);
}

.badge-neutral {
  background: #edf0ee;
  color: #59645f;
}

.badge-info {
  background: var(--blue-soft);
  color: var(--blue);
}

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

.surface {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px;
}

.surface-accent {
  border-top: 3px solid var(--accent);
}

.surface-coral {
  border-top: 3px solid var(--coral);
}

.surface-blue {
  border-top: 3px solid var(--blue);
}

.surface h2,
.surface h3 {
  margin: 0;
  letter-spacing: 0;
}

.surface h2 {
  font-size: 17px;
}

.surface h3 {
  font-size: 14px;
}

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

.surface-value {
  display: block;
  margin: 9px 0 4px;
  font-size: 27px;
  line-height: 1.1;
  font-weight: 800;
}

.surface-value.compact {
  font-size: 20px;
}

.surface-meta {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.surface-footer {
  display: flex;
  min-height: 42px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 12px;
}

.section-heading h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.activity-list,
.status-list,
.detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-row,
.status-row,
.detail-row {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.activity-row:last-child,
.status-row:last-child,
.detail-row:last-child {
  border-bottom: 0;
}

.row-copy {
  min-width: 0;
}

.row-copy strong,
.row-copy span {
  display: block;
}

.row-copy strong {
  font-size: 13px;
}

.row-copy span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.row-value {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.wide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 14px;
}

.branch-board {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.branch-board-header,
.branch-board-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.3fr) minmax(110px, 0.7fr) minmax(110px, 0.7fr) minmax(120px, 0.8fr);
  gap: 16px;
  align-items: center;
  padding: 13px 16px;
}

.branch-board-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.branch-board-row {
  min-height: 62px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.branch-board-row:last-child {
  border-bottom: 0;
}

.branch-name strong,
.branch-name span {
  display: block;
}

.branch-name span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.read-only-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  border: 1px solid #c9dce8;
  border-radius: 8px;
  background: var(--blue-soft);
  padding: 15px 16px;
}

.read-only-notice strong,
.read-only-notice span {
  display: block;
}

.read-only-notice span {
  margin-top: 2px;
  color: #39647b;
  font-size: 12px;
}

.future-page {
  display: grid;
  min-height: 56vh;
  place-items: center;
}

.future-content {
  max-width: 530px;
  text-align: center;
}

.future-symbol,
.empty-symbol,
.access-symbol {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 18px;
  font-weight: 850;
}

.future-content h1,
.empty-state h3,
.access-panel h1 {
  margin: 0;
  letter-spacing: 0;
}

.future-content h1 {
  font-size: 26px;
}

.future-content p {
  margin: 9px auto 22px;
  color: var(--muted);
}

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

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

.empty-state,
.access-panel,
.maintenance-state {
  text-align: center;
}

.empty-state {
  padding: 18px 4px 8px;
}

.empty-state h3 {
  font-size: 15px;
}

.empty-state p {
  margin: 6px auto 0;
  font-size: 12px;
}

.skeleton-stack {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.skeleton-line {
  height: 12px;
  overflow: hidden;
  border-radius: 4px;
  background: #e8eeeb;
}

.skeleton-line.short {
  width: 62%;
}

.loading-inline {
  display: flex;
  min-height: 102px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
}

.conflict-box {
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  padding: 13px 14px;
}

.conflict-box strong,
.conflict-box span {
  display: block;
}

.conflict-box span {
  margin-top: 4px;
  color: #745b1d;
  font-size: 12px;
}

.access-page {
  display: grid;
  min-height: calc(100vh - 160px);
  place-items: center;
}

.access-panel {
  max-width: 560px;
  padding: 40px 28px;
}

.access-symbol {
  background: var(--coral-soft);
  color: var(--coral);
}

.access-panel h1 {
  font-size: 25px;
}

.access-panel p {
  margin: 10px auto 22px;
  color: var(--muted);
}

.maintenance-state {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 20px 14px;
}

.maintenance-state strong,
.maintenance-state span {
  display: block;
}

.maintenance-state span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.toast-region {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  gap: 8px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #add5c6;
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
  padding: 13px 14px;
  color: var(--ink);
  animation: toast-in 0.2s ease-out;
}

.toast-mark {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}

.toast-success .toast-mark {
  background: #e8f6ee;
  color: #2f8f5b;
}

.toast-mark svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

dialog {
  width: min(480px, calc(100vw - 32px));
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(16, 45, 37, 0.22);
  padding: 0;
}

dialog::backdrop {
  background: rgba(15, 28, 23, 0.5);
}

.dialog-body {
  padding: 24px;
}

.dialog-body h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0;
}

.dialog-body > p {
  margin: 8px 0 20px;
  color: var(--muted);
}

.dialog-risk {
  border-top: 4px solid var(--coral);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
}

.mobile-nav,
.mobile-drawer,
.mobile-scrim {
  display: none;
}

.schedule-loading,
.workforce-loading-scaffold {
  display: flex;
  min-height: clamp(360px, calc(100vh - 250px), 620px);
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.schedule-loading,
.workforce-loading-status {
  gap: 10px;
}

.workforce-loading-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.schedule-loading strong,
.workforce-loading-status strong {
  color: #626975;
  font-size: 12px;
  font-weight: 700;
}

.schedule-toolbar {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.compact-field,
.schedule-reason {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.compact-field > span,
.schedule-reason > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.compact-field input,
.compact-field select,
.compact-field textarea,
.schedule-reason input {
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.compact-field input,
.compact-field select,
.schedule-reason input {
  height: 39px;
  padding: 0 10px;
}

.compact-field textarea {
  padding: 10px;
  line-height: 1.45;
}

.compact-field input:focus,
.compact-field select:focus,
.compact-field textarea:focus,
.schedule-reason input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.schedule-open-control {
  position: relative;
}

.schedule-open-control summary {
  min-height: 39px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
  background: var(--surface);
  padding: 9px 13px;
  font-weight: 750;
}

.schedule-open-control summary::-webkit-details-marker {
  display: none;
}

.schedule-open-control[open] {
  width: min(100%, 410px);
}

.schedule-inline-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 8px;
}

.schedule-period-empty {
  color: var(--muted);
  font-size: 12px;
}

.schedule-period-selector {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.schedule-period-more {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d9d9df;
  border-radius: 7px;
  cursor: pointer;
  background: #ffffff;
  color: #4f5360;
  padding: 0 11px;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.schedule-period-more svg {
  width: 15px;
  height: 15px;
}

.schedule-period-more:hover {
  border-color: #777fd4;
  background: #f4f4fc;
  color: #474fb0;
}

.schedule-period-more:focus-visible {
  outline: 2px solid #5963d6;
  outline-offset: 2px;
}

.schedule-period-picker {
  min-width: 0;
  padding: 13px 14px;
}

.schedule-period-trigger {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border: 1px solid #d9dbe1;
  border-radius: 7px;
  cursor: pointer;
  background: #ffffff;
  color: #292a31;
  padding: 8px 44px;
  font: inherit;
  text-align: center;
}

.schedule-period-trigger:hover {
  border-color: #aeb1ba;
  background: #fafafd;
}

.schedule-period-trigger:focus-visible {
  outline: 2px solid #34353d;
  outline-offset: 2px;
}

.schedule-period-trigger-arrow svg {
  width: 17px;
  height: 17px;
}

.schedule-period-trigger-copy,
.schedule-period-label-row,
.schedule-period-trigger-copy small,
.schedule-period-trigger-copy strong,
.schedule-period-trigger-copy em,
.schedule-period-trigger-meta {
  display: block;
  min-width: 0;
}

.schedule-period-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}

.schedule-period-trigger-copy small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.schedule-period-trigger-copy strong {
  margin-top: 6px;
  overflow: hidden;
  color: #111116;
  font-size: 20px;
  font-weight: 820;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.schedule-period-trigger-copy em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.schedule-period-trigger-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #60636c;
}

.schedule-period-current-mark {
  border-radius: 999px;
  background: #dcefe6;
  color: #226947;
  padding: 5px 7px;
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.schedule-period-selected-mark,
.schedule-period-choice-arrow {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #4f515a;
}

.schedule-period-selected-mark {
  border-radius: 50%;
  background: #34353d;
  color: #ffffff;
}

.schedule-team-dashboard {
  display: grid;
  gap: 18px;
}

.schedule-team-metrics,
.schedule-team-view-tabs {
  display: grid;
  gap: 12px;
}

.schedule-team-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.schedule-team-view-tabs { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.schedule-team-metric,
.schedule-team-view-card {
  display: grid;
  min-height: 112px;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 16px;
}

.schedule-team-view-card {
  position: relative;
  cursor: pointer;
  font: inherit;
  text-align: left;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 251, 0.9));
  box-shadow: 0 10px 26px rgba(30, 36, 32, 0.04);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.schedule-team-view-card:hover {
  border-color: #c8ced8;
  box-shadow: 0 10px 24px rgba(17, 19, 24, 0.06);
}

.schedule-team-view-card:active {
  transform: translateY(1px);
}

.schedule-team-view-card.is-active {
  border-color: #17191d;
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: inset 0 0 0 1px #17191d, 0 10px 22px rgba(17, 19, 24, 0.07);
  color: inherit;
}

.schedule-team-view-card {
  min-height: 92px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 46px 12px 12px;
}

.schedule-team-metric > span,
.schedule-team-view-card > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #f1f3f6;
  color: #69727d;
}

.schedule-team-view-card.is-active > span {
  box-shadow: inset 0 0 0 1px rgba(17, 19, 24, 0.05);
}

.schedule-team-metric div,
.schedule-team-view-card div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.schedule-team-metric small,
.schedule-team-metric em,
.schedule-team-view-card small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.schedule-team-view-card small {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.schedule-team-view-card.is-active small {
  color: var(--muted);
}

.schedule-team-metric strong,
.schedule-team-view-card b {
  color: var(--ink);
  font-size: 32px;
  line-height: 1;
}

.schedule-team-view-card strong {
  color: inherit;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.2;
}

.schedule-team-view-card b {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: transparent;
  font-size: 22px;
  font-weight: 900;
}

.schedule-team-view-card.is-active b {
  color: #111116;
}

.schedule-team-metric.tone-blue > span,
.schedule-team-view-card.tone-blue > span { background: #edf2ff; color: #5871d8; }
.schedule-team-metric.tone-amber > span,
.schedule-team-view-card.tone-amber > span { background: #fff3d8; color: #a36d16; }
.schedule-team-metric.tone-green > span,
.schedule-team-view-card.tone-green > span { background: #eaf7ef; color: #347c55; }
.schedule-team-metric.tone-slate > span,
.schedule-team-view-card.tone-slate > span { background: #eef1f4; color: #56606c; }

.schedule-team-layout,
.schedule-team-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.schedule-team-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.schedule-team-panel-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
  padding: 16px 18px;
}

.schedule-team-panel-head.compact {
  grid-template-columns: 42px minmax(0, 1fr);
}

.schedule-team-panel-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  background: #f2f4f7;
  color: #5f6874;
}

.schedule-team-panel-head.compact .schedule-team-panel-icon {
  width: 42px;
  height: 42px;
}

.schedule-team-panel-head div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.schedule-team-panel-head span:not(.schedule-team-panel-icon) {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-team-panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.schedule-team-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.schedule-team-period-list,
.schedule-team-review-list,
.schedule-team-swap-list {
  display: grid;
}

.schedule-team-period-list {
  gap: 10px;
  padding: 16px 18px 18px;
}

.employee-schedule-toolbar.period-only.schedule-team-period-selector {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: #fbfbfd;
  padding: 12px 16px;
}

.schedule-team-period-selector .schedule-period-picker {
  max-width: none;
  padding: 0;
}

.schedule-team-period-selector .schedule-period-trigger {
  align-content: center;
  min-height: 78px;
  padding: 12px 44px;
}

.schedule-team-period-selector .schedule-period-trigger-copy {
  display: grid;
  justify-items: center;
}

.schedule-team-period-selector .schedule-period-trigger-copy strong {
  margin-top: 4px;
  font-size: 18px;
}

.schedule-team-period-selector .schedule-period-trigger-meta {
  margin-top: 6px;
}

.schedule-team-period-selector + .schedule-team-board-detail {
  border-top: 0;
  padding-top: 12px;
}

.schedule-team-period-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #e1e1e6;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  color: #292930;
}

.schedule-team-period-card:last-child,
.schedule-team-review-card:last-child,
.schedule-team-swap-card:last-child {
  border-bottom: 0;
}

.schedule-team-period-card.is-current {
  border-color: #b9d9cb;
  background: #f1f8f5;
}

.schedule-team-period-card.is-selected {
  border-color: #34353d;
  background: #f5f5f7;
  box-shadow: inset 0 0 0 1px #34353d;
}

.schedule-team-period-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #f1f1f5;
  color: #5d606b;
}

.schedule-team-period-card.is-current .schedule-team-period-icon {
  background: #dcefe6;
  color: #287453;
}

.schedule-team-period-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.schedule-team-period-copy span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-team-period-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-period-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-period-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.schedule-team-period-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.schedule-team-period-actions,
.schedule-team-review-actions,
.schedule-team-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.schedule-team-period-actions .button,
.schedule-team-review-actions .button {
  min-height: 36px;
  padding: 0 12px;
}

.schedule-team-issue-list {
  display: grid;
  gap: 8px;
}

.schedule-team-issue-list span {
  display: grid;
  grid-template-columns: 18px minmax(62px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #eedbad;
  border-radius: 8px;
  background: #fffaf0;
  color: #76550d;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 780;
}

.schedule-team-issue-list svg {
  width: 16px;
  height: 16px;
}

.schedule-team-issue-list em {
  min-width: 0;
  overflow: hidden;
  color: #7d6a47;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-open-feature {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(280px, 380px) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 16px;
}

.schedule-team-open-feature.is-muted {
  grid-template-columns: minmax(0, 1fr);
}

.schedule-team-open-copy {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.schedule-team-open-copy > span:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.schedule-team-open-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: #edf2ff;
  color: #5871d8;
}

.schedule-team-open-feature small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-team-open-feature strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.18;
}

.schedule-team-open-feature em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 720;
  line-height: 1.35;
}

.schedule-team-open-feature .compact-field,
.schedule-team-open-feature .button {
  align-self: end;
}

.schedule-team-rule-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-team-rule-list li {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

.schedule-team-rule-list li:last-child { border-bottom: 0; }

.schedule-team-rule-list strong {
  color: var(--ink);
  font-size: 13px;
}

.schedule-team-rule-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.schedule-team-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
  gap: 0;
}

.schedule-team-review-list {
  border-right: 1px solid var(--line);
}

.schedule-team-review-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
}

.schedule-team-review-card.is-selected {
  box-shadow: inset 4px 0 0 #111116;
  background: #fbfcfd;
}

.schedule-team-review-card div:first-child {
  display: grid;
  gap: 3px;
}

.schedule-team-review-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-team-review-card strong {
  color: var(--ink);
  font-size: 16px;
}

.schedule-team-review-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.schedule-team-editor {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.schedule-team-editor > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.schedule-team-editor > header > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #fff4dc;
  color: #9a6817;
}

.schedule-team-editor.is-ready > header > span {
  background: #e7f4ed;
  color: #3f8f5d;
}

.schedule-team-editor header div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.schedule-team-editor small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-team-editor strong {
  color: var(--ink);
  font-size: 18px;
}

.schedule-team-editor em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 720;
}

.schedule-team-editor-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.schedule-team-empty {
  display: grid;
  min-height: 150px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 24px 18px;
  color: var(--muted);
}

.schedule-team-empty > svg {
  width: 26px;
  height: 26px;
}

.schedule-team-empty > span {
  display: grid;
  gap: 4px;
}

.schedule-team-empty strong {
  color: var(--ink);
  font-size: 15px;
}

.schedule-team-empty small {
  font-size: 12px;
  line-height: 1.45;
}

.schedule-team-two-column {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.schedule-team-published-list {
  border-bottom: 0;
}

.schedule-team-board-detail {
  border-top: 1px solid var(--line);
  padding: 18px;
}

.schedule-team-published-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

.schedule-team-published-summary div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.schedule-team-published-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-team-published-summary strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-day-preview {
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding: 16px 18px 18px;
}

.schedule-team-day-card {
  display: grid;
  min-width: 92px;
  gap: 10px;
  border: 1px solid #e5e8ee;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.schedule-team-day-card > strong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.schedule-team-day-card > strong b {
  color: var(--ink);
  font-size: 24px;
}

.schedule-team-day-card div {
  display: grid;
  gap: 5px;
}

.schedule-team-day-card div span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 760;
}

.schedule-team-day-card em {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #eef1f4;
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.schedule-team-day-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.schedule-team-swap-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

.schedule-team-swap-card > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #f1f4ff;
  color: #5871d8;
}

.schedule-team-swap-card div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.schedule-team-swap-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.schedule-team-swap-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-swap-card em {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-swap-card b {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .schedule-team-metrics,
  .schedule-team-view-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-team-layout,
  .schedule-team-two-column,
  .schedule-team-review-grid {
    grid-template-columns: 1fr;
  }

  .schedule-team-review-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .schedule-team-dashboard {
    gap: 14px;
  }

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

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

  .schedule-team-metric,
  .schedule-team-view-card {
    min-height: 92px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .schedule-team-metric > span,
  .schedule-team-view-card > span {
    width: 30px;
    height: 30px;
    grid-column: auto;
  }

  .schedule-team-metric strong,
  .schedule-team-view-card b {
    font-size: 24px;
  }

  .schedule-team-metric small,
  .schedule-team-metric em,
  .schedule-team-view-card small {
    font-size: 10px;
  }

  .schedule-team-view-card strong {
    font-size: 13px;
    line-height: 1.25;
  }

  .schedule-team-view-card {
    position: relative;
    min-height: 104px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 8px;
    padding: 11px 11px 42px;
  }

  .schedule-team-view-card > span {
    width: 36px;
    height: 36px;
  }

  .schedule-team-view-card b {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 21px;
  }

  .schedule-team-panel,
  .schedule-team-period-card,
  .schedule-team-review-card,
  .schedule-team-swap-card {
    border-radius: 8px;
  }

  .schedule-team-panel-head {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: flex-start;
    padding: 14px;
  }

  .schedule-team-panel-head p {
    font-size: 11px;
  }

  .employee-schedule-toolbar.period-only.schedule-team-period-selector {
    padding: 10px 12px;
  }

  .schedule-team-period-selector .schedule-period-trigger {
    min-height: 92px;
    padding: 12px 34px;
  }

  .schedule-team-period-selector + .schedule-team-board-detail {
    padding-top: 10px;
  }

  .schedule-team-period-selector .schedule-period-trigger-copy strong {
    font-size: 18px;
    white-space: normal;
  }

  .schedule-team-panel-icon,
  .schedule-team-panel-head.compact .schedule-team-panel-icon {
    width: 40px;
    height: 40px;
  }

  .schedule-team-period-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .schedule-team-issue-list span {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .schedule-team-issue-list b {
    grid-column: 2;
  }

  .schedule-team-issue-list em {
    grid-column: 2;
    white-space: normal;
  }

  .schedule-team-period-meta {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: column;
    justify-self: start;
  }

  .schedule-team-period-actions,
  .schedule-team-review-actions,
  .schedule-team-editor-actions {
    width: 100%;
    justify-content: stretch;
  }

  .schedule-team-period-actions .button,
  .schedule-team-review-actions .button,
  .schedule-team-editor-actions .button {
    flex: 1 1 0;
  }

  .schedule-team-period-actions .button {
    min-width: max-content;
  }

  .schedule-team-open-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .schedule-team-open-copy {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .schedule-team-open-icon {
    width: 40px;
    height: 40px;
  }

  .schedule-team-open-feature label,
  .schedule-team-open-feature .button {
    width: 100%;
  }

  .schedule-team-open-feature em {
    font-size: 11px;
  }

  .schedule-team-board-detail {
    padding: 14px;
  }

  .schedule-team-period-icon {
    width: 38px;
    height: 38px;
  }

  .schedule-team-period-copy strong,
  .schedule-team-period-copy small {
    white-space: normal;
  }

  .schedule-team-editor {
    padding: 14px;
  }

  .schedule-team-editor-form {
    grid-template-columns: 1fr;
  }

  .schedule-team-published-summary {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

  .schedule-team-published-summary .button {
    width: 100%;
  }

  .schedule-team-day-preview {
    grid-template-columns: repeat(7, 88px);
    padding: 14px;
  }

  .schedule-team-swap-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .schedule-team-swap-card > span {
    width: 38px;
    height: 38px;
  }

  .schedule-team-swap-card b,
  .schedule-team-swap-card .button {
    grid-column: 2;
    justify-self: start;
  }
}

.employee-schedule-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(430px, 1fr);
  align-items: stretch;
  gap: 0;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.employee-schedule-toolbar.period-only {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.employee-schedule-toolbar.period-only .schedule-period-picker {
  padding: 0;
}

.employee-schedule-toolbar.period-only .schedule-period-trigger {
  min-height: 88px;
  border-color: #d4d8d6;
  border-left-width: 4px;
  background: #ffffff;
  padding: 15px 18px;
}

.employee-schedule-toolbar.period-only .schedule-period-trigger.current {
  border-color: #a9d7c1;
  border-left-color: #2f8b61;
  background:
    linear-gradient(135deg, rgba(232, 246, 239, 0.98), rgba(255, 249, 232, 0.92)),
    #ffffff;
  box-shadow: inset 0 0 0 1px rgba(47, 139, 97, 0.08), 0 10px 26px rgba(47, 139, 97, 0.09);
}

.employee-schedule-toolbar.period-only .schedule-period-trigger.current .schedule-period-trigger-copy strong {
  color: #123f2e;
}

.employee-schedule-toolbar.period-only .schedule-period-trigger.tone-published { border-left-color: #438663; }
.employee-schedule-toolbar.period-only .schedule-period-trigger.tone-open,
.employee-schedule-toolbar.period-only .schedule-period-trigger.tone-locked { border-left-color: #c58b25; }
.employee-schedule-toolbar.period-only .schedule-period-trigger.tone-review { border-left-color: #5f70b7; }
.employee-schedule-toolbar.period-only .schedule-period-trigger.tone-cancelled { border-left-color: #b9574b; }
.employee-schedule-toolbar.period-only .schedule-period-trigger.tone-neutral { border-left-color: #77817c; }

.employee-schedule-toolbar.period-only .schedule-period-trigger.current {
  border-left-color: #2f8b61;
}

.schedule-period-trigger-copy em.schedule-period-status {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.schedule-period-trigger-copy em.schedule-period-branch {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  color: #6c6b77;
  padding: 0;
  font-size: 9px;
  font-style: normal;
  font-weight: 720;
}

.schedule-period-trigger-copy em.schedule-period-branch svg {
  width: 12px;
  height: 12px;
}

.schedule-period-trigger-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 7px;
}

.schedule-period-trigger-meta svg {
  width: 11px;
  height: 11px;
}

.schedule-period-trigger-copy em.schedule-period-active-status {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  background: #176b49;
  color: #ffffff;
  padding: 4px 8px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.schedule-period-status.badge-success {
  background: #e5f2e9;
  color: #2f704f;
}

.schedule-period-status.badge-warning {
  background: #fff1c8;
  color: #77550c;
}

.schedule-period-status.badge-info {
  background: #eaf0fb;
  color: #4b62a7;
}

.schedule-period-status.badge-danger {
  background: #fae8e5;
  color: #9c4539;
}

.schedule-period-status.badge-neutral {
  background: #eff1f0;
  color: #626965;
}

.employee-schedule-status {
  display: grid;
  min-width: 0;
  min-height: 78px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: #fafafd;
  padding: 14px 20px;
}

.employee-schedule-status-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  background: #f0f1f4;
  color: #5e6068;
}

.employee-schedule-status-icon svg {
  width: 17px;
  height: 17px;
}

.employee-schedule-status > div,
.employee-schedule-status > div > span,
.employee-schedule-status > div > strong,
.employee-schedule-status > div > small {
  display: block;
  min-width: 0;
}

.employee-schedule-status > div > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
}

.employee-schedule-status > div > strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 12px;
}

.employee-schedule-status > div > small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.employee-schedule-status.status-open {
  border-left-color: #ead59c;
  background: #fff9e9;
}

.employee-schedule-status.status-published .employee-schedule-status-icon {
  background: #e6f3eb;
  color: #28734f;
}

.employee-schedule-status.status-open .employee-schedule-status-icon {
  background: #f7e7b6;
  color: #9a6a0d;
}

.employee-schedule-status.status-open > div > strong {
  color: #6d4d0d;
}

.employee-schedule-status.status-locked {
  border-color: #ead9af;
  background: #fffbf2;
}

.employee-schedule-status.status-locked .employee-schedule-status-icon {
  background: #f7edcf;
  color: #916b18;
}

.employee-schedule-status.status-review {
  border-color: #cedaf0;
  background: #f6f8fd;
}

.employee-schedule-status.status-review .employee-schedule-status-icon {
  background: #e8eef9;
  color: #4969a8;
}

.employee-schedule-tools {
  margin: -4px 0 20px;
}

.employee-schedule-tools-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dfe2e8;
  border-radius: 8px;
  background: #f6f7f8;
}

.employee-schedule-tools-tab {
  display: grid;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: transparent;
  padding: 11px 15px 9px;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.employee-schedule-tools-tab + .employee-schedule-tools-tab {
  border-left: 1px solid #dfe2e8;
}

.employee-schedule-tools-tab:hover {
  background: #fafafa;
}

.employee-schedule-tools-tab.is-active {
  border-bottom-color: #18191d;
  background: #ffffff;
}

.employee-schedule-tools-tab:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #4f66a7;
  outline-offset: -3px;
}

.employee-schedule-tools-tab-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  background: #ecefed;
  color: #4b5550;
}

.employee-schedule-tools-tab-icon svg {
  width: 18px;
  height: 18px;
}

.employee-schedule-tools-tab > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.employee-schedule-tools-tab strong {
  font-size: 12px;
}

.employee-schedule-tools-tab small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-schedule-tools-tab em {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: #fff1c8;
  color: #77550c;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.employee-schedule-tools-panel {
  margin-top: 10px;
}

.employee-schedule-tools-panel .employee-rest-quota,
.employee-schedule-tools-panel .schedule-swap-workspace {
  margin: 0;
}

.employee-schedule-tools-panel .schedule-swap-workspace {
  border: 1px solid #dfe2e8;
  border-radius: 8px;
}

.employee-rest-quota {
  display: grid;
  grid-template-columns: minmax(270px, 0.8fr) minmax(390px, 1.2fr);
  align-items: center;
  gap: 16px 24px;
  margin: -4px 0 20px;
  border: 1px solid #dfe2e8;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px 18px;
}

.employee-rest-quota.has-warning {
  border-color: #e2e3e7;
  background: #ffffff;
}

.employee-rest-quota-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.employee-rest-quota-heading .employee-rest-quota-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 7px;
  background: #fff0f0;
  color: #b33a3a;
}

.employee-rest-quota-icon svg {
  width: 21px;
  height: 21px;
}

.employee-rest-quota-heading > div,
.employee-rest-quota-heading span,
.employee-rest-quota-heading strong,
.employee-rest-quota-heading small {
  display: block;
  min-width: 0;
}

.employee-rest-quota-heading span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.employee-rest-quota-heading strong {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 1px;
  color: var(--text);
}

.employee-rest-quota-heading strong b {
  font-size: 30px;
  line-height: 1;
}

.employee-rest-quota-heading strong em {
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
}

.employee-rest-quota-heading small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.employee-rest-quota-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #e6e7eb;
  border-radius: 7px;
  background: #fafafd;
}

.employee-rest-quota-facts > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 8px;
  padding: 12px;
}

.employee-rest-quota-facts i {
  display: grid;
  width: 24px;
  height: 24px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 6px;
  background: #eef0f3;
  color: #5f626c;
}

.employee-rest-quota-facts i svg {
  width: 13px;
  height: 13px;
}

.employee-rest-quota-facts > span + span {
  border-left: 1px solid #e6e7eb;
}

.employee-rest-quota-facts small {
  color: var(--muted);
  font-size: 8px;
}

.employee-rest-quota-facts strong {
  font-size: 11px;
}

.employee-rest-quota-warning {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 8px;
  margin: 0 -18px -16px;
  border-top: 1px solid #eedda9;
  background: #fff9e9;
  color: #7a570f;
  padding: 11px 18px;
  font-size: 10px;
  line-height: 1.5;
}

.employee-rest-quota-warning svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.headstore-submit-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -6px 0 20px;
  border: 1px solid #ead9aa;
  border-left: 4px solid #c49a3c;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px 18px;
}

.headstore-submit-panel.is-ready {
  border-color: #cfe3d6;
  border-left-color: #4f9468;
}

.headstore-submit-copy {
  display: grid;
  min-width: 0;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.headstore-submit-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  background: #fff6df;
  color: #9b6d1b;
}

.headstore-submit-panel.is-ready .headstore-submit-icon {
  background: #eaf7ef;
  color: #347c55;
}

.headstore-submit-icon svg {
  width: 21px;
  height: 21px;
}

.headstore-submit-copy small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.headstore-submit-copy strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.18;
}

.headstore-submit-copy p {
  max-width: 760px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.headstore-submit-panel .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.headstore-submit-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.schedule-submit-detail-dialog {
  width: min(720px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  color: var(--text);
  box-shadow: 0 24px 72px rgba(18, 18, 24, 0.28);
}

.schedule-submit-detail-dialog::backdrop {
  background: rgba(18, 18, 24, 0.56);
  backdrop-filter: blur(2px);
}

.schedule-submit-detail-shell {
  display: grid;
  max-height: calc(100dvh - 24px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.schedule-submit-detail-shell > header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 18px 20px;
}

.schedule-submit-detail-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 9px;
}

.schedule-submit-detail-icon.is-blocked {
  background: #fff6df;
  color: #9b6d1b;
}

.schedule-submit-detail-icon.is-ready {
  background: #eaf7ef;
  color: #347c55;
}

.schedule-submit-detail-icon svg {
  width: 21px;
  height: 21px;
}

.schedule-submit-detail-shell header small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-submit-detail-shell h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.schedule-submit-detail-shell header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.schedule-submit-detail-body {
  display: grid;
  min-height: 0;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px;
  scroll-padding-bottom: 18px;
}

.schedule-submit-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.schedule-submit-detail-summary span {
  display: grid;
  gap: 2px;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  background: #fbfbfc;
  padding: 12px;
}

.schedule-submit-detail-summary span.is-primary {
  border-color: #ead9aa;
  background: #fffaf0;
}

.schedule-submit-detail-summary small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-submit-detail-summary strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.schedule-submit-detail-summary em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.schedule-submit-detail-section {
  overflow: hidden;
  border: 1px solid #e1e4e8;
  border-radius: 9px;
  background: #fff;
}

.schedule-submit-detail-section > header,
.schedule-submit-detail-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf0f2;
  background: #fafbfc;
  padding: 13px 15px;
}

.schedule-submit-detail-section > summary {
  cursor: default;
  list-style: none;
}

.schedule-submit-detail-section > summary::-webkit-details-marker {
  display: none;
}

.schedule-submit-detail-section > header span,
.schedule-submit-detail-section > summary span {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.schedule-submit-detail-section > header p,
.schedule-submit-detail-section > summary p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.schedule-submit-detail-section > header strong,
.schedule-submit-detail-section > summary strong {
  display: grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: #f0f1f4;
  color: var(--ink);
  font-size: 13px;
}

.schedule-submit-detail-list {
  display: grid;
  max-height: min(260px, 34vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.schedule-submit-detail-day {
  display: grid;
  gap: 8px;
  border-top: 1px solid #edf0f2;
  padding: 13px 15px;
}

.schedule-submit-detail-day:first-child {
  border-top: 0;
}

.schedule-submit-detail-day strong {
  color: var(--ink);
  font-size: 12px;
}

.schedule-submit-detail-day ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-submit-detail-day li {
  position: relative;
  padding-left: 14px;
  color: #565d69;
  font-size: 11px;
  line-height: 1.45;
}

.schedule-submit-detail-day li::before {
  position: absolute;
  top: .62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c49a3c;
  content: "";
}

.schedule-submit-detail-day li b {
  color: var(--ink);
}

.schedule-submit-detail-day.is-missing {
  gap: 10px;
}

.schedule-submit-missing-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.schedule-submit-missing-list span {
  display: grid;
  gap: 2px;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  background: #fbfbfc;
  padding: 10px 11px;
}

.schedule-submit-missing-list b {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-submit-missing-list small {
  color: var(--muted);
  font-size: 9px;
}

.schedule-submit-detail-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 15px;
  color: #52625a;
  font-size: 11px;
}

.schedule-submit-detail-empty svg {
  width: 16px;
  height: 16px;
  color: #4f9468;
}

.schedule-submit-confirm-dialog {
  width: min(560px, calc(100vw - 32px));
}

.schedule-submit-confirm-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #d5eadc;
  border-radius: 9px;
  background: #f7fbf8;
  padding: 14px;
}

.schedule-submit-confirm-card > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 9px;
  background: #eaf7ef;
  color: #347c55;
}

.schedule-submit-confirm-card > span svg {
  width: 21px;
  height: 21px;
}

.schedule-submit-confirm-card strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.schedule-submit-confirm-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.schedule-submit-confirm-actions {
  display: flex;
  gap: 9px;
}

.schedule-submit-detail-shell > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 13px 20px 16px;
}

.schedule-submit-detail-shell > footer span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 820px) {
  .employee-schedule-toolbar,
  .employee-rest-quota {
    grid-template-columns: 1fr;
  }

  .headstore-submit-panel {
    align-items: stretch;
    flex-direction: column;
    padding: 15px;
  }

  .headstore-submit-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .headstore-submit-panel .button {
    width: 100%;
  }

  .schedule-submit-detail-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .schedule-submit-detail-shell {
    max-height: calc(100dvh - 20px);
  }

  .schedule-submit-detail-shell > header {
    grid-template-columns: 42px minmax(0, 1fr) 40px;
    padding: 15px;
  }

  .schedule-submit-detail-icon {
    width: 42px;
    height: 42px;
  }

  .schedule-submit-detail-body {
    gap: 12px;
    padding: 15px;
  }

  .schedule-submit-detail-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .schedule-submit-detail-summary span {
    min-width: 0;
    padding: 10px 8px;
  }

  .schedule-submit-detail-summary small {
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .schedule-submit-detail-summary strong {
    font-size: 16px;
  }

  .schedule-submit-detail-summary em {
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .schedule-submit-detail-list {
    max-height: 210px;
  }

  .schedule-submit-missing-list {
    grid-template-columns: 1fr;
  }

  .schedule-submit-detail-shell > footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 15px 15px;
  }

  .schedule-submit-confirm-card {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 12px;
  }

  .schedule-submit-confirm-card > span {
    width: 42px;
    height: 42px;
  }

  .schedule-submit-confirm-actions {
    flex-direction: column-reverse;
  }

  .schedule-submit-confirm-actions .button {
    width: 100%;
  }

  .employee-schedule-status {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .employee-schedule-status.status-open {
    border-top-color: #ead59c;
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .employee-schedule-toolbar.period-only .schedule-period-trigger {
    min-height: 82px;
    grid-template-columns: minmax(0, 1fr);
    padding: 13px 42px;
  }

  .schedule-period-trigger-arrow {
    right: 12px;
  }

  .schedule-period-trigger-copy strong {
    font-size: 18px;
    line-height: 1.15;
  }

  .schedule-period-trigger-copy small,
  .schedule-period-trigger-copy em.schedule-period-branch,
  .schedule-period-trigger-copy em.schedule-period-status,
  .schedule-period-trigger-copy em.schedule-period-active-status {
    font-size: 8px;
  }

  .employee-schedule-tools {
    margin-top: 0;
  }

  .employee-schedule-tools-tab {
    min-height: 62px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 10px 7px;
  }

  .employee-schedule-tools-tab-icon {
    width: 34px;
    height: 34px;
  }

  .employee-schedule-tools-tab strong {
    font-size: 10px;
  }

  .employee-schedule-tools-tab small {
    font-size: 8px;
  }

  .employee-schedule-tools-tab em {
    min-width: 20px;
    height: 20px;
  }
}

.schedule-status-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.schedule-status-band > div {
  min-width: 0;
  padding: 13px 15px;
}

.schedule-status-band > div + div {
  border-left: 1px solid var(--line);
}

.schedule-status-band span,
.schedule-status-band strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-status-band span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.schedule-status-band strong {
  margin-top: 3px;
  font-size: 13px;
}

.schedule-action-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
  border-left: 3px solid var(--blue);
  background: var(--blue-soft);
  padding: 12px 14px;
}

.schedule-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.schedule-review-editor {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(95, 112, 183, 0.28);
  background: var(--surface);
  padding: 16px;
}

.schedule-review-editor header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.schedule-review-editor-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 10px;
  background: #eef2ff;
  color: #5f70b7;
}

.schedule-review-editor header span:not(.schedule-review-editor-icon) {
  color: #5f70b7;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.schedule-review-editor h2 {
  margin: 2px 0 3px;
  font-size: 20px;
}

.schedule-review-editor p {
  margin: 0;
  color: var(--muted);
}

.schedule-review-form {
  display: grid;
  grid-template-columns: minmax(130px, 0.85fr) minmax(180px, 1.15fr) minmax(180px, 1.15fr) auto;
  align-items: end;
  gap: 10px;
}

.schedule-editor {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 12px;
}

.schedule-editor-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(135px, 0.9fr) minmax(120px, 0.8fr) minmax(165px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.schedule-board {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface);
}

.schedule-grid-header,
.schedule-grid-row {
  display: grid;
  min-width: 940px;
  grid-template-columns: 190px repeat(7, minmax(100px, 1fr));
}

.schedule-grid-header {
  min-height: 50px;
  align-items: stretch;
  border-bottom: 1px solid var(--line-strong);
  background: #edf2ef;
}

.schedule-grid-header > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.schedule-grid-header > span:first-child {
  justify-content: flex-start;
  border-left: 0;
  padding-left: 14px;
  font-weight: 750;
}

.schedule-grid-header small {
  font-size: 10px;
}

.schedule-grid-row + .schedule-grid-row {
  border-top: 1px solid var(--line);
}

.schedule-person {
  display: flex;
  min-width: 0;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
}

.schedule-person strong,
.schedule-person span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-person strong {
  font-size: 12px;
}

.schedule-person span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.schedule-cell {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 82px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--line);
  padding: 9px 6px;
  text-align: center;
}

.schedule-cell.empty {
  color: #9ca6a1;
}

.schedule-cell.filled {
  background: var(--accent-soft);
}

.schedule-cell strong,
.schedule-cell span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-cell strong {
  color: var(--accent-strong);
  font-size: 11px;
}

.schedule-cell span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.schedule-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  color: var(--coral);
  font-size: 17px;
  line-height: 1;
}

.schedule-remove:hover {
  background: var(--coral-soft);
}

.schedule-board-empty {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.schedule-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  text-align: center;
}

.schedule-empty p {
  margin: 6px 0 0;
}

.published-schedule-list {
  border-top: 1px solid var(--line);
}

.published-schedule-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.8fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 15px 4px;
}

.published-schedule-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.published-schedule-row strong,
.published-schedule-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.published-schedule-row > div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 1180px) {
  .schedule-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-editor-grid .button {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .schedule-toolbar,
  .schedule-action-bar,
  .schedule-review-form {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

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

  .schedule-open-control,
  .schedule-open-control[open] {
    width: 100%;
  }

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

  .schedule-status-band > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .schedule-status-band > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .schedule-action-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .schedule-inline-form,
  .schedule-editor-grid,
  .published-schedule-row {
    grid-template-columns: 1fr;
  }

  .schedule-inline-form .button,
  .schedule-action-buttons .button {
    width: 100%;
  }

  .published-schedule-row {
    gap: 8px;
    padding: 14px 2px;
  }
}

/* resources/css/core/components.css */
/* Attendance presentation states */
.daily-activity {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

.daily-activity-head {
  margin-bottom: 16px;
  font-size: 11px;
}

.daily-activity-head .surface-label {
  font-size: 11px;
  letter-spacing: 0;
}

.daily-activity-state {
  grid-template-columns: 34px minmax(0, 1fr);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 16px 18px;
}

.daily-activity-state .daily-activity-icon {
  color: currentColor;
}

.daily-activity-state .daily-activity-icon svg {
  width: 22px;
  height: 22px;
}

.daily-activity-state h2 {
  font-size: 16px;
  font-weight: 720;
}

.daily-activity-state p {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
}

.daily-activity-state small {
  display: block;
  margin-top: 7px;
  color: inherit;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.78;
}

.daily-activity-neutral .daily-activity-state { border-color: #e2e2e8; background: #f1f1f5; color: #17171c; }
.daily-activity-info .daily-activity-state { border-color: #cbd8f4; background: #f0f4ff; color: #3e62ca; }
.daily-activity-success .daily-activity-state { border-color: #bfe8d7; background: #effbf6; color: #288364; }
.daily-activity-warning .daily-activity-state { border-color: #ecd99b; background: #fffbed; color: #a96d09; }
.daily-activity-danger .daily-activity-state { border-color: #efc8c5; background: #fff5f4; color: #bd3833; }

.workforce-command-confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0;
}

.workforce-command-confirm-dialog.has-change-summary {
  width: min(590px, calc(100vw - 32px));
}

.workforce-command-confirm-dialog::backdrop {
  background: rgba(18, 20, 25, 0.42);
  backdrop-filter: blur(2px);
}

.workforce-command-confirm-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(17, 19, 24, 0.22);
  padding: 18px;
}

.workforce-command-confirm-dialog.has-change-summary .workforce-command-confirm-card {
  max-height: calc(100dvh - 32px);
  overflow: auto;
}

.workforce-command-confirm-icon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 8px;
  border: 1px solid #cfe4d8;
  background: linear-gradient(145deg, #eff8f3, #e5f1eb);
  color: #4e8b62;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 22px rgba(52, 88, 64, 0.1);
}

.workforce-command-confirm-icon::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
}

.workforce-command-confirm-icon.tone-warning {
  border-color: #efd9a4;
  background: linear-gradient(145deg, #fff7e5, #faeed0);
  color: #a46c12;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 22px rgba(141, 91, 14, 0.11);
}

.workforce-command-confirm-icon.tone-danger {
  border-color: #edc6c0;
  background: linear-gradient(145deg, #fff1ee, #fae3df);
  color: #c85b4d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 22px rgba(166, 69, 55, 0.12);
}

.workforce-command-confirm-icon svg {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
}

.workforce-command-confirm-card small,
.workforce-command-confirm-card h2,
.workforce-command-confirm-card p {
  margin: 0;
}

.workforce-command-confirm-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.workforce-command-confirm-card h2 {
  margin-top: 4px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.16;
}

.workforce-command-confirm-card p {
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.45;
}

.workforce-command-confirm-changes {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 3px;
}

.workforce-command-confirm-change {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e0e2e7;
  border-left: 3px solid #aeb4bd;
  border-radius: 7px;
  background: #f8f9fa;
}

.workforce-command-confirm-change.tone-added {
  border-color: #d3e6da;
  border-left-color: #5b936d;
  background: #f5faf7;
}

.workforce-command-confirm-change.tone-removed {
  border-color: #ecd8d4;
  border-left-color: #bd6758;
  background: #fff8f6;
}

.workforce-command-confirm-change > header {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(111, 116, 126, 0.14);
  padding: 9px 10px;
  color: #59606a;
}

.workforce-command-confirm-change.tone-added > header { color: #477655; }
.workforce-command-confirm-change.tone-removed > header { color: #a95447; }

.workforce-command-confirm-change > header span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  background: #eceef1;
}

.workforce-command-confirm-change.tone-added > header span { background: #e4f1e8; }
.workforce-command-confirm-change.tone-removed > header span { background: #f7e8e4; }

.workforce-command-confirm-change > header svg {
  width: 13px;
  height: 13px;
}

.workforce-command-confirm-change > header strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-command-confirm-change > header b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: currentColor;
  font-size: 11px;
}

.workforce-command-confirm-change ul {
  max-height: 145px;
  overflow: auto;
  margin: 0;
  padding: 3px 10px;
  list-style: none;
}

.workforce-command-confirm-change li {
  padding: 7px 0;
  color: #4e535b;
  font-size: 12px;
  line-height: 1.35;
}

.workforce-command-confirm-change li + li {
  border-top: 1px solid rgba(111, 116, 126, 0.12);
}

.workforce-command-confirm-card footer {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 4px;
}

@media (max-width: 520px) {
  .workforce-command-confirm-dialog,
  .workforce-command-confirm-dialog.has-change-summary {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .workforce-command-confirm-dialog.has-change-summary .workforce-command-confirm-card {
    max-height: calc(100dvh - 24px);
  }

  .workforce-command-confirm-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
  }

  .workforce-command-confirm-icon {
    width: 42px;
    height: 42px;
  }

  .workforce-command-confirm-card h2 { font-size: 18px; }
  .workforce-command-confirm-changes { grid-template-columns: 1fr; }
  .workforce-command-confirm-change ul { max-height: 112px; }

  .workforce-command-confirm-card footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .workforce-command-confirm-card footer .button {
    min-width: 0;
    padding-inline: 10px;
  }
}

.system-master-dialog {
  width: min(1120px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  color: var(--text);
  box-shadow: 0 28px 70px rgba(16, 18, 18, 0.24);
}

.system-master-dialog::backdrop {
  background: rgba(18, 20, 20, 0.56);
  backdrop-filter: blur(3px);
}

.system-master-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.system-master-dialog-shell > header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.system-master-dialog-shell > header.without-icon {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.system-master-dialog-icon,
.system-master-dialog-close {
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.system-master-dialog-icon {
  width: 52px;
  height: 52px;
  background: #eef4f0;
  color: #4f765d;
}

.system-master-dialog-icon svg {
  width: 21px;
  height: 21px;
}

.system-master-dialog-shell > header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.system-master-dialog-shell > header small,
.system-master-dialog-shell > header h2,
.system-master-dialog-shell > header p {
  margin: 0;
}

.system-master-dialog-shell > header small {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 750;
}

.system-master-dialog-shell > header h2 {
  font-size: 22px;
  line-height: 1.2;
}

.system-master-dialog-shell > header p {
  color: var(--muted);
  font-size: 12px;
}

.system-master-dialog-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.system-master-dialog-close svg {
  width: 18px;
  height: 18px;
}

.system-master-dialog-body {
  min-width: 0;
  overflow: auto;
  padding: 20px;
  overscroll-behavior: contain;
}

@media (max-width: 760px) {
  .system-master-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .system-master-dialog-shell {
    max-height: calc(100dvh - 20px);
  }

  .system-master-dialog-shell > header {
    grid-template-columns: 42px minmax(0, 1fr) 40px;
    gap: 10px;
    padding: 13px 14px;
  }

  .system-master-dialog-shell > header.without-icon {
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .system-master-dialog-icon {
    width: 42px;
    height: 42px;
  }

  .system-master-dialog-shell > header h2 {
    font-size: 18px;
  }

  .system-master-dialog-shell > header p {
    font-size: 10px;
  }

  .system-master-dialog-close {
    width: 40px;
    height: 40px;
  }

  .system-master-dialog-body {
    padding: 10px;
  }
}

@media (max-width: 520px) {
  .workforce-command-confirm-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
  }

  .workforce-command-confirm-icon {
    width: 40px;
    height: 40px;
  }

  .workforce-command-confirm-card h2 {
    font-size: 18px;
  }

  .workforce-command-confirm-card footer {
    flex-direction: column-reverse;
  }

  .workforce-command-confirm-card footer .button {
    width: 100%;
  }
}

.logout-confirm-dialog {
  width: min(450px, calc(100vw - 32px));
  border-radius: 8px;
}

.logout-confirm-dialog::backdrop {
  background: rgba(13, 15, 19, 0.58);
  backdrop-filter: blur(4px);
}

.logout-confirm-dialog .workforce-command-confirm-card {
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 17px;
  row-gap: 22px;
  overflow: hidden;
  border-color: #dedfe4;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(12, 14, 18, 0.28);
  padding: 23px 23px 0;
}

.logout-confirm-dialog .workforce-command-confirm-icon {
  width: 54px;
  height: 54px;
  border-color: #efcec9;
  background: #fff3f1;
  color: #bb4e45;
  box-shadow: none;
}

.logout-confirm-dialog .workforce-command-confirm-icon::before {
  display: none;
}

.logout-confirm-dialog .workforce-command-confirm-icon svg {
  width: 23px;
  height: 23px;
}

.logout-confirm-dialog .workforce-command-confirm-content {
  min-width: 0;
  padding-top: 1px;
}

.logout-confirm-dialog .workforce-command-confirm-content small {
  color: #9f4a43;
  font-size: 10px;
}

.logout-confirm-dialog .workforce-command-confirm-content h2 {
  margin-top: 5px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.logout-confirm-dialog .workforce-command-confirm-content p {
  max-width: 330px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
}

.logout-confirm-dialog .workforce-command-confirm-card footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 10px;
  margin: 0 -23px;
  border-top: 1px solid #e7e7eb;
  background: #fafafb;
  padding: 16px 23px 19px;
}

.logout-confirm-dialog .workforce-command-confirm-card footer .button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.logout-confirm-dialog .workforce-command-confirm-card footer .button-secondary {
  border-color: #dcdde2;
  background: #fff;
}

.logout-confirm-dialog .workforce-command-confirm-card footer .button-danger {
  border-color: #b94d45;
  background: #c4584f;
  box-shadow: 0 7px 16px rgba(158, 56, 48, 0.18);
}

.logout-confirm-dialog .workforce-command-confirm-card footer .button-danger:hover:not(:disabled) {
  border-color: #a9433c;
  background: #ad473f;
}

.logout-confirm-dialog .workforce-command-confirm-card footer svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 520px) {
  .logout-confirm-dialog {
    width: calc(100vw - 24px);
  }

  .logout-confirm-dialog .workforce-command-confirm-card {
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 13px;
    row-gap: 18px;
    padding: 18px 18px 0;
  }

  .logout-confirm-dialog .workforce-command-confirm-icon {
    width: 46px;
    height: 46px;
  }

  .logout-confirm-dialog .workforce-command-confirm-content h2 {
    font-size: 19px;
  }

  .logout-confirm-dialog .workforce-command-confirm-content p {
    margin-top: 6px;
    font-size: 12px;
  }

  .logout-confirm-dialog .workforce-command-confirm-card footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 8px;
    margin: 0 -18px;
    padding: 14px 18px 17px;
  }

  .logout-confirm-dialog .workforce-command-confirm-card footer .button {
    min-height: 42px;
    padding-inline: 9px;
    font-size: 12px;
  }
}

@media (max-width: 340px) {
  .logout-confirm-dialog .workforce-command-confirm-card footer {
    grid-template-columns: 1fr;
  }
}

.attendance-state-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
}

.attendance-state-actions .button {
  min-height: 46px;
  flex: 1 1 auto;
  justify-content: center;
  text-decoration: none;
}

.attendance-state-actions .button-primary {
  border-color: #111116;
  background: #111116;
  color: #fff;
}

.attendance-state-actions .button-secondary {
  flex: 0 1 auto;
  border-color: #dedee5;
  background: #fff;
  color: #17171c;
}

.attendance-help-link {
  min-height: 46px;
  border: 0;
  background: transparent;
  color: #3e62ca;
  cursor: pointer;
  font-weight: 650;
}

.attendance-state-loading {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #3e62ca;
  font-size: 13px;
  font-weight: 650;
}

.attendance-gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: white;
  padding: 12px 14px;
}

.attendance-gallery-toolbar span {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}

.attendance-state-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.attendance-state-gallery .daily-activity {
  margin: 0;
}

.attendance-camera-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 13px 2px 8px;
  color: #777780;
  font-size: 11px;
  line-height: 1.45;
}

.attendance-camera-privacy svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #238464;
}

.camera-gallery-control {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #ececf0;
  background: #fafafd;
  padding: 10px 30px;
  font-size: 11px;
  font-weight: 700;
}

.camera-gallery-control select {
  min-width: 0;
  flex: 1;
  border: 1px solid #dedee4;
  border-radius: 6px;
  background: white;
  padding: 8px 10px;
  color: #222228;
}

.attendance-camera-stage[data-camera-state="success"] .attendance-camera-symbol {
  background: rgba(47, 125, 86, 0.18);
  color: #70d5ae;
}

.attendance-camera-stage[data-camera-state="success"] .attendance-camera-open {
  display: none;
}

.attendance-camera-stage[data-camera-state="requesting"] .attendance-camera-open {
  display: none;
}

.attendance-camera-close:focus-visible,
.attendance-camera-open:focus-visible,
.attendance-camera-shutter:focus-visible,
.attendance-camera-retake:focus-visible,
.attendance-state-actions .button:focus-visible,
.attendance-help-link:focus-visible {
  outline: 3px solid rgba(35, 132, 100, 0.28);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .attendance-state-gallery { grid-template-columns: 1fr; }
  .attendance-gallery-toolbar { align-items: stretch; flex-direction: column; }
  .attendance-gallery-toolbar span { margin-left: 0; }
  .attendance-state-actions { flex-direction: column; }
  .attendance-state-actions .button-secondary { flex-basis: auto; }
  .daily-activity { padding: 15px; }
  .daily-activity-state { padding: 14px; }
  .daily-activity-state h2 { font-size: 15px; }
  .daily-activity-state p { font-size: 12px; }
}

/* Realtime Clock In capture */
.attendance-camera-dialog {
  width: min(568px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(14, 14, 18, 0.32);
  color: #17171c;
}

.attendance-camera-dialog::backdrop {
  background: rgba(14, 14, 18, 0.64);
  backdrop-filter: blur(4px);
}

.attendance-camera-shell {
  display: flex;
  max-height: calc(100dvh - 32px);
  flex-direction: column;
}

.attendance-camera-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #ece6dc;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
  padding: 18px 24px 14px;
  box-shadow: 0 8px 22px rgba(21, 21, 27, 0.04);
}

.attendance-camera-title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
}

.attendance-camera-title-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 9px;
  background: #d3a247;
  color: white;
}

.attendance-camera-title-icon svg {
  width: 16px;
  height: 16px;
}

.attendance-camera-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}

.attendance-camera-header p {
  margin: 3px 0 0;
  color: #969daa;
  font-size: 14px;
  line-height: 1.35;
}

.attendance-camera-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f3f3f6;
  color: #626269;
  cursor: pointer;
}

.attendance-camera-close:hover {
  background: #e8e8ed;
  color: #17171c;
}

.attendance-camera-close svg {
  width: 19px;
  height: 19px;
}

.attendance-camera-body {
  overflow-y: auto;
  padding: 16px 24px 26px;
}

.attendance-camera-stage-wrap {
  position: relative;
  display: grid;
  transition: padding-bottom 0.18s ease;
}

.attendance-camera-shell[data-camera-state="live"] .attendance-camera-stage-wrap {
  padding-bottom: 42px;
}

.attendance-camera-stage {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: center;
  border-radius: 10px;
  background: #0b0b0f;
  color: #ffffff;
}

.attendance-camera-stage video,
.attendance-camera-stage > img {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attendance-camera-stage[data-camera-state="live"] video,
.attendance-camera-stage[data-camera-state="captured"] > img {
  display: block;
}

.attendance-camera-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
}

.attendance-camera-stage[data-camera-state="live"] .attendance-camera-frame {
  display: block;
}

.attendance-camera-frame span {
  position: absolute;
  width: 64px;
  height: 50px;
  border-color: #d8a94b;
  border-style: solid;
}

.attendance-camera-frame span:nth-child(1) { top: 12%; left: 14%; border-width: 4px 0 0 4px; border-radius: 2px 0 0 0; }
.attendance-camera-frame span:nth-child(2) { top: 12%; right: 14%; border-width: 4px 4px 0 0; border-radius: 0 2px 0 0; }
.attendance-camera-frame span:nth-child(3) { bottom: 16%; left: 14%; border-width: 0 0 4px 4px; border-radius: 0 0 0 2px; }
.attendance-camera-frame span:nth-child(4) { bottom: 16%; right: 14%; border-width: 0 4px 4px 0; border-radius: 0 0 2px 0; }

.attendance-camera-frame i {
  position: absolute;
  top: 18%;
  left: 50%;
  width: min(44%, 270px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 3px dashed rgba(255, 255, 255, 0.38);
  border-radius: 50%;
}

.attendance-camera-placeholder {
  position: relative;
  z-index: 2;
  display: flex;
  max-width: 330px;
  align-items: center;
  flex-direction: column;
  padding: 22px;
  text-align: center;
}

.attendance-camera-stage[data-camera-state="live"] .attendance-camera-placeholder,
.attendance-camera-stage[data-camera-state="captured"] .attendance-camera-placeholder {
  display: none;
}

.attendance-camera-symbol {
  display: grid;
  width: 74px;
  height: 74px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 12px;
  background: #2a2a2d;
  color: white;
}

.attendance-camera-symbol svg {
  width: 30px;
  height: 30px;
}

.attendance-camera-placeholder strong {
  font-size: 20px;
  font-weight: 800;
}

.attendance-camera-placeholder p {
  margin: 6px 0 20px;
  color: #707075;
  font-size: 14px;
  font-weight: 650;
}

.attendance-camera-placeholder .attendance-camera-open {
  min-height: 48px;
  border-color: #d3a247;
  border-radius: 10px;
  background: #d3a247;
  padding: 0 24px;
  color: #111116;
  font-size: 15px;
  font-weight: 850;
}

.attendance-camera-open:disabled {
  opacity: 0.58;
}

.attendance-camera-live-badge,
.attendance-camera-shutter,
.attendance-camera-retake {
  position: absolute;
  z-index: 3;
  display: none;
}

.attendance-camera-live-badge {
  right: auto;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.74);
  padding: 8px 14px;
  color: #e8e8ec;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.attendance-camera-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6a66;
  fill: #ef635f;
  color: #ef635f;
}

.attendance-camera-shutter,
.attendance-camera-retake {
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 740;
}

.attendance-camera-shutter {
  bottom: 6px;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translateX(-50%);
  background: #d3a247;
  color: white;
  box-shadow: 0 16px 36px rgba(150, 104, 20, 0.26);
}

.attendance-camera-retake {
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
  background: rgba(13, 13, 16, 0.76);
  padding: 0 18px;
  color: #ffffff;
}

.attendance-camera-shutter svg {
  width: 27px;
  height: 27px;
}

.attendance-camera-retake svg {
  width: 18px;
  height: 18px;
}

.attendance-camera-stage[data-camera-state="live"] .attendance-camera-live-badge,
.attendance-camera-stage[data-camera-state="captured"] .attendance-camera-retake {
  display: flex;
}

.attendance-camera-shell[data-camera-state="live"] .attendance-camera-shutter {
  display: grid;
}

.attendance-camera-feedback {
  min-height: 16px;
  margin: 8px 2px 12px;
  color: #777780;
  font-size: 12px;
}

.attendance-camera-feedback[data-status-type="error"] {
  color: #bd3939;
}

.attendance-camera-feedback[data-status-type="success"] {
  color: #20795b;
}

.attendance-camera-note {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  color: #777780;
  font-size: 15px;
}

.attendance-camera-note strong {
  color: #222228;
}

.attendance-camera-note textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid #dedee4;
  border-radius: 8px;
  outline: 0;
  background: #fafafd;
  padding: 14px 15px;
  color: #222228;
  font: inherit;
  line-height: 1.45;
}

.attendance-camera-note textarea:focus {
  border-color: #238464;
  box-shadow: 0 0 0 3px rgba(35, 132, 100, 0.14);
}

.attendance-camera-meta {
  --attendance-camera-time-color: #2f8b61;
  position: relative;
  display: grid;
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 0;
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid #ead8a1;
  border-radius: 8px;
  background: #fffdfa;
  padding: 9px 12px;
  color: #7d6b4c;
  font-size: 13px;
  box-shadow: none;
}

.attendance-camera-meta[data-time-tone="danger"] {
  --attendance-camera-time-color: #c4473d;
}

.attendance-camera-meta::before {
  display: none;
  content: none;
}

.attendance-camera-clock-icon,
.attendance-camera-time-row .attendance-camera-clock-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--attendance-camera-time-color);
  stroke: currentColor;
}

.attendance-camera-clock-icon :where(path, line, polyline):not(:first-child),
.attendance-camera-time-row .attendance-camera-clock-icon :where(path, line, polyline):not(:first-child) {
  animation: attendance-clock-hand-spin 4.2s linear infinite;
  transform-box: view-box;
  transform-origin: 12px 12px;
}

@keyframes attendance-clock-hand-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes attendance-clock-color-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.16;
  }
}

.attendance-camera-meta-content {
  display: grid;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.attendance-camera-time-row {
  display: inline-grid;
  grid-template-columns: auto auto;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}

.attendance-camera-meta small {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: #9a8a6d;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.attendance-camera-meta strong {
  display: inline-flex;
  min-width: 0;
  min-height: 16px;
  align-items: center;
  font-family: inherit;
  color: var(--attendance-camera-time-color);
  font-size: 14px;
  font-weight: 620;
  line-height: 1;
}

.attendance-camera-time-row .attendance-camera-clock-icon,
.attendance-camera-time-row strong {
  animation: attendance-clock-color-blink 1.05s ease-in-out infinite;
}

.attendance-camera-meta em {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #e8e0c9;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.78);
  color: #5e6470;
  padding: 3px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-camera-meta em svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: #9a6a14;
}

.attendance-camera-footer {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid #e6e6ec;
  background: #fbfbfd;
  padding: 16px 24px 18px;
  box-shadow: 0 -10px 24px rgba(21, 21, 27, 0.05);
}

.attendance-camera-footer .button {
  min-height: 54px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 850;
}

.attendance-camera-footer .button:disabled {
  border-color: #f0f0f3;
  background: #f0f0f3;
  color: #d1d4db;
}

@media (max-width: 620px) {
  .attendance-camera-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 10px;
  }

  .attendance-camera-shell {
    max-height: calc(100dvh - 20px);
  }

  .attendance-camera-header {
    padding: 18px 20px 14px;
  }

  .attendance-camera-header h2 {
    font-size: 20px;
  }

  .attendance-camera-header p {
    font-size: 14px;
  }

  .attendance-camera-title {
    gap: 10px;
  }

  .attendance-camera-title-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 8px;
  }

  .attendance-camera-close {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .attendance-camera-body {
    padding: 16px 20px 22px;
  }

  .attendance-camera-stage {
    min-height: 250px;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
  }

  .attendance-camera-stage video {
    transform: scaleX(-1);
  }

  .attendance-camera-shell[data-camera-state="live"] .attendance-camera-stage-wrap {
    padding-bottom: 42px;
  }

  .attendance-camera-frame span {
    width: 42px;
    height: 34px;
  }

  .attendance-camera-frame span:nth-child(1) { border-width: 3px 0 0 3px; }
  .attendance-camera-frame span:nth-child(2) { border-width: 3px 3px 0 0; }
  .attendance-camera-frame span:nth-child(3) { border-width: 0 0 3px 3px; }
  .attendance-camera-frame span:nth-child(4) { border-width: 0 3px 3px 0; }

  .attendance-camera-frame i {
    top: 18%;
    width: min(50%, 180px);
    border-width: 2px;
  }

  .attendance-camera-symbol {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: 10px;
  }

  .attendance-camera-placeholder {
    max-width: 260px;
    padding: 14px;
  }

  .attendance-camera-placeholder strong {
    font-size: 17px;
  }

  .attendance-camera-placeholder p {
    margin: 6px 0 12px;
    font-size: 12px;
  }

  .attendance-camera-placeholder .attendance-camera-open {
    min-height: 42px;
    border-radius: 9px;
    padding: 0 18px;
    font-size: 13px;
  }

  .attendance-camera-live-badge {
    bottom: 14px;
    max-width: calc(100% - 28px);
    font-size: 12px;
  }

  .attendance-camera-shutter {
    bottom: 4px;
    width: 66px;
    height: 66px;
  }

  .attendance-camera-shutter svg {
    width: 25px;
    height: 25px;
  }

  .attendance-camera-note textarea {
    min-height: 78px;
  }

  .attendance-camera-meta {
    min-height: 70px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 5px;
    padding: 9px 10px;
  }

  .attendance-camera-clock-icon,
  .attendance-camera-time-row .attendance-camera-clock-icon {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .attendance-camera-meta small {
    font-size: 8px;
  }

  .attendance-camera-meta-content {
    gap: 4px;
  }

  .attendance-camera-time-row {
    gap: 6px;
  }

  .attendance-camera-meta strong {
    min-height: 15px;
    font-size: 14px;
    font-weight: 620;
  }

  .attendance-camera-meta em {
    width: max-content;
    max-width: 100%;
    padding: 3px 7px;
    font-size: 10px;
  }

  .attendance-camera-footer {
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    padding: 16px 20px 18px;
  }

  .attendance-camera-footer .button {
    min-height: 54px;
    border-radius: 8px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .attendance-camera-clock-icon :where(path, line, polyline):not(:first-child),
  .attendance-camera-time-row .attendance-camera-clock-icon :where(path, line, polyline):not(:first-child) {
    animation: none;
  }

  .attendance-camera-time-row .attendance-camera-clock-icon,
  .attendance-camera-time-row strong {
    animation: none;
  }
}

@media (max-width: 1050px) {
  .overview-grid,
  .state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  .login-page {
    display: block;
    background: var(--surface);
  }

  .login-brand {
    display: none;
  }

  .login-workspace {
    display: block;
    min-height: 100vh;
    padding: 28px 22px 44px;
  }

  .login-panel {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
  }

  .login-mobile-brand {
    display: block;
  }

  .login-panel h2 {
    font-size: 27px;
  }

  .sidebar {
    display: none;
  }

  .app-column {
    margin-left: 0;
  }

  .app-header {
    height: 62px;
    padding: 0 16px;
  }

  .mobile-menu-button {
    display: grid;
  }

  .page-identity {
    flex: 1;
  }

  .breadcrumb,
  .user-copy,
  .header-logout {
    display: none;
  }

  .main-content {
    padding: 22px 16px 96px;
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-heading h1 {
    font-size: 23px;
  }

  .context-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    overflow: hidden;
  }

  .context-strip-item {
    min-width: 0;
  }

  .context-strip-item strong {
    white-space: normal;
  }

  .context-strip > .badge {
    align-self: start;
    justify-self: start;
  }

  .mobile-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 35;
    display: grid;
    height: 68px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    background: white;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  }

  .mobile-nav-link {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
    font-size: 9px;
    font-weight: 750;
  }

  .mobile-nav-link.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
  }

  .mobile-nav-glyph {
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-scrim.open {
    position: fixed;
    inset: 0;
    z-index: 48;
    display: block;
    background: rgba(15, 28, 23, 0.42);
  }

  .mobile-drawer.open {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 50;
    display: flex;
    height: 100dvh;
    max-height: 100dvh;
    width: min(330px, 88vw);
    flex-direction: column;
    background: white;
    box-shadow: -12px 0 36px rgba(23, 34, 30, 0.14);
    overflow: hidden;
    padding: 18px 14px 0;
  }

  .drawer-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 0 7px;
  }

  .mobile-drawer .context-panel {
    flex: 0 0 auto;
  }

  .mobile-drawer.open .nav-list {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    grid-auto-rows: max-content;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 0 12px;
  }

  .drawer-footer {
    flex: 0 0 auto;
    margin-top: auto;
    border-top: 1px solid var(--line);
    background: inherit;
    padding: 12px 4px max(14px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 620px) {
  .overview-grid,
  .profile-grid,
  .state-grid {
    grid-template-columns: 1fr;
  }

  .surface {
    padding: 16px;
  }

  .context-strip {
    margin-right: -16px;
    margin-left: -16px;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-right: 16px;
    padding-left: 16px;
  }

  .branch-board {
    overflow-x: auto;
  }

  .branch-board-header,
  .branch-board-row {
    width: 640px;
  }

  .read-only-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-actions {
    gap: 5px;
  }

  .notification-button {
    display: none;
  }

  .toast-region {
    right: 16px;
    bottom: 84px;
  }
}

.version-lineage {
  display: grid;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface);
}

.version-lineage-row {
  display: grid;
  min-height: 42px;
  grid-template-columns: minmax(100px, 0.7fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 12px;
}
.user-avatar-media {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  color: #78817d;
}

.user-avatar-media > svg {
  width: 46%;
  height: 46%;
}

.user-avatar-media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* resources/css/features/workforce/workforce-self.css */
.leave-command-panel,
.leave-record {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 16px;
}

.leave-command-panel {
  margin-bottom: 18px;
}

details.leave-command-panel summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.leave-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}

.leave-wide {
  grid-column: span 2;
}

.leave-list-section {
  margin-top: 24px;
}

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

.leave-record-head,
.leave-record-head > div,
.leave-evidence-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.leave-record-head > div {
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.leave-record-head span,
.record-meta,
.leave-decision-empty {
  color: var(--muted);
  font-size: 12px;
}

.leave-record > p {
  margin: 12px 0;
  color: var(--text-soft);
  font-size: 13px;
}

.leave-facts,
.leave-decision {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 0;
  background: var(--line);
}

.leave-decision {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.leave-facts > span,
.leave-decision > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  background: var(--surface-muted);
  padding: 10px;
}

.leave-facts small,
.leave-decision small {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.leave-facts strong,
.leave-decision strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.leave-evidence-summary,
.leave-action-buttons,
.leave-evidence-form,
.leave-decision-form {
  flex-wrap: wrap;
  margin-top: 12px;
}

.leave-action-buttons,
.leave-evidence-form,
.leave-decision-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leave-evidence-form input,
.leave-decision-form input,
.leave-decision-form select {
  min-width: 150px;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  padding: 7px 9px;
}

.evidence-file-field {
  display: grid;
  min-width: min(100%, 260px);
  gap: 5px;
}

.evidence-file-field input[type="file"] {
  width: 100%;
  min-height: 44px;
  padding: 7px;
  background: var(--surface);
}

.evidence-file-field input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: white;
  color: var(--ink);
}

.leave-handoff-list,
.protected-evidence-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.leave-handoff-list > div,
.protected-evidence-list > div {
  display: grid;
  min-height: 40px;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-size: 12px;
}

@media (max-width: 820px) {
  .leave-form-grid,
  .leave-facts,
  .leave-decision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .leave-form-grid,
  .leave-facts,
  .leave-decision,
  .version-lineage-row,
  .leave-handoff-list > div,
  .protected-evidence-list > div {
    grid-template-columns: 1fr;
  }

  .leave-wide {
    grid-column: auto;
  }

  .leave-record-head,
  .leave-evidence-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.attendance-capture-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
  gap: 16px;
  margin-bottom: 18px;
}

.attendance-clock-panel,
.attendance-context-panel,
.attendance-latest,
.attendance-empty {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 18px;
}

.attendance-clock-panel {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.attendance-local-time {
  margin-top: 18px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}

.attendance-timezone {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.attendance-clock-button {
  width: min(100%, 220px);
  min-height: 54px;
  margin: 24px 0 10px;
  font-size: 15px;
}

.attendance-context-panel,
.attendance-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.attendance-context-panel > div,
.attendance-fact-grid > div {
  display: flex;
  min-width: 0;
  min-height: 92px;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: var(--surface-muted);
  padding: 14px;
}

.attendance-context-panel span,
.attendance-fact-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.attendance-context-panel strong,
.attendance-fact-grid strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.attendance-recovery-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  border-left: 3px solid var(--coral);
  background: var(--coral-soft);
  padding: 14px 16px;
}

.attendance-recovery-band > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.attendance-recovery-band p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
}

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

.attendance-latest,
.attendance-list-section {
  margin-top: 20px;
}

.attendance-latest .alert {
  margin-bottom: 12px;
}

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

.attendance-fact-grid > div {
  min-height: 76px;
}

.attendance-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  text-align: center;
}

.attendance-empty h2,
.attendance-empty p {
  margin: 8px 0 0;
}

.attendance-empty p {
  color: var(--muted);
}

.attendance-history {
  border-top: 1px solid var(--line);
}

.attendance-history-row {
  display: grid;
  min-height: 52px;
  grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 9px 4px;
  font-size: 12px;
}

.attendance-history-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.attendance-record-stack {
  display: grid;
  gap: 12px;
}

.attendance-record-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 16px;
}

.attendance-record-row h3 {
  margin: 3px 0 0;
  font-size: 16px;
  letter-spacing: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
}

.form-grid select {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
}

.badge-danger {
  border-color: var(--coral);
  background: var(--coral-soft);
  color: var(--coral);
}

@media (max-width: 820px) {
  .attendance-capture-layout {
    grid-template-columns: 1fr;
  }

  .attendance-clock-panel {
    min-height: 230px;
  }

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

  .attendance-recovery-band {
    align-items: flex-start;
    flex-direction: column;
  }

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

@media (max-width: 620px) {
  .attendance-context-panel,
  .attendance-fact-grid,
  .attendance-history-row {
    grid-template-columns: 1fr;
  }

  .attendance-context-panel > div,
  .attendance-fact-grid > div {
    min-height: 68px;
  }

  .attendance-recovery-actions,
  .attendance-recovery-actions .button {
    width: 100%;
  }


  .form-grid .button {
    width: 100%;
  }
}

.period-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background: var(--line);
}

.period-metrics > div,
.period-fact-grid > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
  padding: 14px;
}

.period-metrics span,
.period-fact-grid span,
.handoff-meta span,
.finalization-lineage-row > div > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.period-metrics strong {
  font-size: 22px;
}

.finalization-command-band,
.finalization-section {
  margin-bottom: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 18px;
}

.period-command-grid {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(190px, 1.3fr) minmax(120px, 0.6fr) minmax(190px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 14px;
}

.period-command-grid input,
.period-command-grid select,
.finalize-form input,
.reopen-decision-form input,
.refinalize-form select,
.lineage-actions input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 10px;
}

.finalization-stack,
.handoff-stack,
.finalization-table {
  display: grid;
  gap: 12px;
}

.finalization-record,
.reopen-record,
.handoff-record,
.finalization-lineage-row {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
  padding: 16px;
}

.finalization-record.is-blocked {
  border-left: 3px solid var(--coral);
}

.finalization-record-head,
.handoff-record > header,
.reopen-record {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.finalization-record h3,
.handoff-record h3 {
  margin: 3px 0 0;
  font-size: 15px;
  letter-spacing: 0;
}

.finalization-status {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}

.record-meta,
.handoff-meta {
  color: var(--muted);
  font-size: 11px;
}

.period-fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  background: var(--line);
}

.period-fact-grid strong,
.recovery-table > div > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.blocker-list,
.declared-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.blocker-list > div,
.declared-list {
  border-left: 3px solid var(--coral);
  background: var(--coral-soft);
  padding: 10px 12px;
}

.blocker-list > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.declared-list {
  border-left-color: var(--amber);
}

.declared-list span,
.blocker-list span {
  color: var(--text-soft);
  font-size: 12px;
}

.finalize-form,
.reopen-decision-form,
.refinalize-form,
.lineage-actions form,
.handoff-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.check-line {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 8px 10px;
  font-size: 12px;
}

.check-line input {
  width: 16px;
  height: 16px;
}

.finalization-lineage-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(190px, 1.3fr) minmax(150px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.finalization-lineage-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.lineage-actions {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.lineage-actions summary {
  cursor: pointer;
  font-weight: 750;
}

.handoff-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
}

.recovery-table {
  border-top: 1px solid var(--line);
}

.recovery-table > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(190px, 1.3fr) minmax(180px, 1fr) minmax(150px, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  padding: 8px 2px;
  font-size: 12px;
}

@media (max-width: 1080px) {
  .period-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .period-command-grid .button {
    justify-self: start;
  }
}

@media (max-width: 820px) {
  .period-metrics,
  .period-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finalization-lineage-row,
  .recovery-table > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .period-metrics,
  .period-fact-grid,
  .period-command-grid,
  .finalization-lineage-row,
  .recovery-table > div {
    grid-template-columns: 1fr;
  }

  .finalization-record-head,
  .handoff-record > header,
  .reopen-record,
  .finalization-status {
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
  }

  .period-command-grid .button,
  .finalize-form .button,
  .reopen-decision-form .button,
  .refinalize-form .button,
  .lineage-actions .button,
  .handoff-actions .button {
    width: 100%;
  }
}

/* resources/css/core/layout.css */
/* SNA-49B integrated Workforce Portal */
.nav-group + .nav-group {
  margin-top: 14px;
}

.nav-count {
  display: grid;
  min-width: 22px;
  height: 20px;
  place-items: center;
  margin-left: auto;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--coral);
  padding: 0 6px;
  font-size: 10px;
  font-weight: 800;
}

.notification-button {
  text-decoration: none;
  font-size: 11px;
}

.notification-button::after {
  display: none;
}

.workforce-tabs {
  display: flex;
  gap: 4px;
  margin: -8px 0 22px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.workforce-tabs a {
  position: relative;
  min-width: max-content;
  color: var(--muted);
  padding: 10px 12px 12px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.workforce-tabs a:hover {
  color: var(--ink);
}

.workforce-tabs a.active {
  color: var(--accent-strong);
}

.workforce-tabs a.active::after {
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  background: var(--accent);
  content: "";
}

.daily-activity,
.control-focus {
  display: grid;
  min-height: 184px;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.34fr);
  align-items: stretch;
  margin-bottom: 16px;
  border: 1px solid #c9ded5;
  border-radius: 8px;
  overflow: hidden;
  background: #12382e;
  color: white;
}

.daily-activity-loading {
  display: flex;
  min-height: 132px;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.daily-activity-loading .spinner {
  border-color: rgba(255, 255, 255, 0.28);
  border-top-color: white;
}

.daily-activity-copy,
.control-focus > div:first-child {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  padding: 26px 28px;
}

.daily-activity .surface-label,
.control-focus .surface-label {
  color: #b9d3c8;
}

.daily-activity h2,
.control-focus h2 {
  margin: 5px 0 4px;
  font-size: 23px;
  letter-spacing: 0;
}

.daily-activity p,
.control-focus p {
  max-width: 620px;
  margin: 0;
  color: #d2e2dc;
}

.daily-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #b9d3c8;
  font-size: 11px;
}

.daily-clock-action {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  padding: 24px;
  text-align: center;
}

.daily-clock-action > strong {
  font-size: 27px;
  line-height: 1.1;
}

.daily-clock-action > span {
  margin: 4px 0 14px;
  color: #b9d3c8;
  font-size: 11px;
}

.daily-clock-action > a {
  margin-top: 12px;
  color: #d7ebe3;
  font-size: 11px;
}

.home-clock-button {
  min-height: 46px;
  background: white;
  color: var(--accent-strong);
}

.home-clock-button:hover:not(:disabled) {
  background: var(--accent-soft);
}

.control-focus {
  min-height: 142px;
  align-items: center;
}

.control-focus > .badge {
  justify-self: center;
}

.portal-metrics {
  margin-bottom: 12px;
}

.portal-metric {
  position: relative;
  min-height: 156px;
  color: inherit;
  text-decoration: none;
}

.portal-metric::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--line-strong);
  content: "";
}

.portal-metric-warning::before { background: var(--amber); }
.portal-metric-success::before { background: var(--accent); }
.portal-metric-info::before { background: var(--blue); }

.portal-link-label {
  display: inline-block;
  margin-top: 14px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
}

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

.workforce-overview-card {
  display: grid;
  min-width: 0;
  min-height: 118px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 15px;
  color: inherit;
  text-decoration: none;
}

.workforce-overview-card:hover {
  border-color: var(--line-strong);
  background: #f8faf9;
}

.workforce-overview-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #eef4f1;
  color: var(--accent);
}

.workforce-overview-card.tone-attendance .workforce-overview-icon { background: var(--blue-soft); color: var(--blue); }
.workforce-overview-card.tone-leave .workforce-overview-icon { background: var(--amber-soft); color: var(--amber); }

.workforce-overview-icon svg { width: 19px; height: 19px; }
.workforce-overview-copy { display: grid; min-width: 0; gap: 3px; }
.workforce-overview-copy small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.workforce-overview-copy strong { overflow: hidden; font-size: 18px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.workforce-overview-copy em { overflow: hidden; color: var(--text-soft); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.workforce-overview-arrow { color: var(--muted); }
.workforce-overview-arrow svg { width: 18px; height: 18px; }

.portal-section {
  margin-top: 26px;
}

.portal-section > .section-heading {
  margin-top: 0;
}

.section-heading > div h2,
.section-heading > div p {
  margin: 0;
}

.section-heading > div p {
  margin-top: 3px;
}

.text-link {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 750;
}

.task-preview-list,
.task-list,
.journey-grid,
.assignment-list {
  display: grid;
  gap: 10px;
}

.task-preview-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.task-preview-row {
  display: grid;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  text-decoration: none;
}

.task-preview-row:last-child {
  border-bottom: 0;
}

.task-preview-row:hover {
  background: var(--surface-muted);
}

.task-preview-row > span:nth-child(2),
.task-preview-row strong,
.task-preview-row small {
  display: block;
  min-width: 0;
}

.task-preview-row small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-domain-mark,
.journey-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 850;
}

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

.journey-item {
  display: grid;
  min-width: 0;
  min-height: 88px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 15px;
  text-decoration: none;
}

.journey-item:hover {
  border-color: #a9cfc0;
  box-shadow: 0 8px 20px rgba(23, 34, 30, 0.06);
}

.journey-item strong,
.journey-item small {
  display: block;
}

.journey-item small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.45;
}

.journey-arrow {
  color: var(--muted);
  font-size: 16px;
}

.inline-loading,
.compact-empty {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
}

.compact-empty {
  justify-content: flex-start;
  padding: 18px;
}

.compact-empty > .empty-symbol {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin: 0;
  place-items: center;
  line-height: 1;
  text-align: center;
}

.compact-empty strong,
.compact-empty span {
  display: block;
}

.compact-empty div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

/* Profile */
.profile-page {
  display: grid;
  gap: 16px;
}

.profile-identity-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  grid-template-rows: 68px 30px;
  align-items: center;
  column-gap: 18px;
  row-gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  padding: 22px 24px;
}

.profile-avatar {
  display: grid;
  overflow: hidden;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 8px;
  background: #eef5f1;
  color: var(--accent-strong);
  font-size: 22px;
  font-weight: 800;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-identity-copy,
.profile-overview-item > div,
.profile-info-item > div {
  min-width: 0;
}

.profile-identity-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.profile-identity-edit {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.profile-eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-identity-copy h2 {
  margin: 3px 0 0;
  font-size: 24px;
  line-height: 1.2;
}

.profile-identity-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.profile-account-status {
  display: inline-flex;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: #edf7f0;
  padding: 0 11px;
  color: #397653;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.profile-account-status svg {
  width: 14px;
  height: 14px;
}

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

.profile-overview-item {
  display: grid;
  min-width: 0;
  min-height: 116px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.profile-overview-item > span,
.profile-access-note > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text-soft);
}

.profile-overview-item:first-child > span,
.profile-access-note > span {
  background: #eef5f1;
  color: var(--accent);
}

.profile-overview-item:nth-child(2) > span {
  background: var(--blue-soft);
  color: var(--blue);
}

.profile-overview-item > span svg,
.profile-access-note > span svg {
  width: 19px;
  height: 19px;
}

.profile-overview-item small,
.profile-overview-item strong,
.profile-overview-item p {
  display: block;
}

.profile-overview-item small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.profile-overview-item strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.3;
}

.profile-overview-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.profile-access-note {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  border: 1px solid #d9e6df;
  border-radius: 8px;
  background: #f7faf8;
  padding: 14px 16px;
}

.profile-access-note strong,
.profile-access-note p {
  display: block;
  margin: 0;
}

.profile-access-note strong {
  font-size: 13px;
}

.profile-access-note p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.profile-info-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.profile-section-heading h2,
.profile-section-heading p {
  margin: 0;
}

.profile-section-heading h2 {
  margin-top: 3px;
  font-size: 17px;
}

.profile-section-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 16px 20px 20px;
}

.profile-info-item {
  min-width: 0;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 15px 16px;
}

.profile-info-item.wide {
  grid-column: 1 / -1;
}

.profile-info-item small,
.profile-info-item strong {
  display: block;
}

.profile-info-item small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.profile-info-item strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 14px;
}

@media (max-width: 980px) {
  .profile-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .compact-empty {
    padding: 14px;
  }

  .profile-page {
    gap: 10px;
  }

  .profile-identity-card {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 6px;
    padding: 15px;
  }

  .profile-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 52px;
    height: 52px;
    font-size: 17px;
  }

  .profile-identity-copy h2 {
    font-size: 19px;
  }

  .profile-identity-copy {
    grid-row: 1;
  }

  .profile-identity-edit {
    grid-column: 3;
    grid-row: 1;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }

  .profile-identity-edit .profile-edit-label {
    display: none;
  }

  .profile-account-status {
    grid-column: 2 / span 2;
    grid-row: 2;
    justify-self: start;
    min-height: 26px;
    margin-top: 0;
  }

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

  .profile-overview-item,
  .profile-overview-item:last-child {
    min-height: 88px;
    grid-column: auto;
    padding: 12px;
  }

  .profile-access-note {
    padding: 12px;
  }

  .profile-section-heading {
    align-items: flex-start;
    padding: 15px;
  }

  .profile-section-heading p {
    max-width: 230px;
  }

  .profile-info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 15px 15px;
  }

  .profile-info-item,
  .profile-info-item.wide {
    min-height: 70px;
    grid-column: auto;
    padding: 11px 12px;
  }
}

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

.segmented-control {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 3px;
}

.segmented-control button {
  display: inline-flex;
  min-width: max-content;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.segmented-control button.active {
  background: white;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(23, 34, 30, 0.08);
}

.segmented-control button strong {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 10px;
}

.attendance-view-switch {
  margin-bottom: 16px;
}

.scope-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  border-left: 3px solid var(--blue);
  background: var(--blue-soft);
  padding: 11px 14px;
  color: var(--blue);
  font-size: 12px;
}

.scope-notice span {
  color: #3e6174;
}

.task-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px;
}

.task-card-technical {
  border-left: 3px solid var(--amber);
}

.task-card > header,
.task-card > footer,
.task-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.task-title {
  min-width: 0;
  justify-content: flex-start;
}

.task-title h2 {
  margin: 2px 0 0;
  font-size: 15px;
  letter-spacing: 0;
}

.task-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  background: var(--line);
}

.task-facts > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-muted);
  padding: 12px;
}

.task-facts span,
.task-card > footer span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.task-facts strong,
.task-card > footer strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.task-blocker {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  padding: 10px 12px;
  color: var(--amber);
  font-size: 12px;
}

.task-card > footer {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.task-card > footer > div span,
.task-card > footer > div strong {
  display: block;
}

.authorization-reference {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

.authorization-reference summary {
  cursor: pointer;
}

.authorization-reference code {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.system-status-grid {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.system-status-grid .status-row {
  border-bottom: 1px solid var(--line);
}

.system-status-grid .status-row:last-child {
  border-bottom: 0;
}

.assignment-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.assignment-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, 0.7fr) minmax(220px, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

.assignment-row:last-child {
  border-bottom: 0;
}

.assignment-row strong,
.assignment-row span,
.assignment-row code {
  min-width: 0;
  overflow-wrap: anywhere;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(40, 101, 140, 0.28);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .task-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  .daily-activity,
  .control-focus {
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  .daily-activity-copy,
  .control-focus > div:first-child {
    padding: 22px;
  }

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

@media (max-width: 620px) {
  .workforce-tabs {
    margin-right: -16px;
    margin-left: -16px;
    padding: 0 8px;
  }

  .daily-activity,
  .control-focus {
    grid-template-columns: 1fr;
  }

  .daily-activity-copy,
  .control-focus > div:first-child,
  .daily-clock-action {
    padding: 20px;
  }

  .daily-clock-action {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 0;
  }

  .daily-clock-action > strong {
    font-size: 24px;
  }

  .my-work-toolbar,
  .scope-notice,
  .task-card > header,
  .task-card > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .segmented-control {
    width: 100%;
  }

  .my-work-toolbar > .button,
  .task-card > footer > .button {
    width: 100%;
  }

  .task-facts,
  .assignment-row {
    grid-template-columns: 1fr;
  }

  .task-preview-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .task-preview-row > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .journey-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 13px;
  }
}

/* SNA-49C Figma Workforce visual parity */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("manrope-latin.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  --canvas: #f4f4f7;
  --surface: #ffffff;
  --surface-soft: #f0f0f5;
  --surface-muted: #f8f8fa;
  --ink: #111118;
  --muted: #6b6a7a;
  --text-soft: #535260;
  --line: #e4e4eb;
  --line-strong: #d5d5de;
  --accent: #e8a020;
  --accent-strong: #9a6511;
  --accent-soft: #fef3e2;
  --coral: #d34c45;
  --coral-soft: #fdf0ef;
  --amber: #9a6511;
  --amber-soft: #fff8e7;
  --blue: #4d67b0;
  --blue-soft: #f0f3ff;
  --shadow: 0 8px 24px rgba(17, 17, 24, 0.06);
  --sidebar-width: 224px;
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
}

body {
  background: var(--canvas);
  font-size: 13px;
  line-height: 1.45;
}

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

code {
  font-family: "JetBrains Mono", Consolas, monospace;
}

[data-lucide] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.brand-mark {
  gap: 10px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 3px;
}

.brand-symbol {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--accent);
  color: #111116;
}

.brand-symbol [data-lucide] {
  width: 16px;
  height: 16px;
}

.boot-screen {
  background: #111116;
  color: white;
}

.boot-screen .brand-mark {
  color: white;
}

.boot-progress,
.spinner {
  border-color: #d9d9e1;
  border-top-color: var(--accent);
}

/* Login */
.login-page,
.login-workspace {
  min-height: 100vh;
  background: #f5f5f8;
}

.login-page {
  display: block;
}

.login-workspace {
  display: grid;
  place-items: center;
  padding: 44px 20px;
}

.login-shell {
  width: min(100%, 384px);
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.login-panel {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  box-shadow: 0 2px 5px rgba(17, 17, 24, 0.05);
  padding: 28px;
}

.login-panel h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0;
}

.login-copy {
  margin: 5px 0 24px;
  color: var(--muted);
  font-size: 13px;
}

.field {
  margin-bottom: 16px;
}

.field-label {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
}

.field input,
.field textarea,
.compact-field input,
.compact-field select,
.schedule-reason input {
  border-color: var(--line);
  border-radius: 7px;
  background: #f8f8fa;
}

.field input {
  min-height: 45px;
}

.field input:focus,
.field textarea:focus,
.compact-field input:focus,
.compact-field select:focus,
.schedule-reason input:focus {
  border-color: #b47a18;
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.14);
}

.password-wrap {
  display: block;
}

.password-toggle {
  top: 50%;
  right: 4px;
  display: grid;
  width: 38px;
  padding: 0;
  place-items: center;
  color: var(--muted);
  transform: translateY(-50%);
}

.login-panel .button-primary {
  margin-top: 2px;
}

.login-security-note {
  margin-top: 20px;
  color: #92919d;
  font-size: 11px;
}

/* App shell */
.sidebar {
  width: var(--sidebar-width);
  border-right-color: #24242b;
  background: #111116;
  padding: 0 8px 14px;
}

.sidebar-brand {
  display: flex;
  height: 56px;
  align-items: center;
  margin: 0 -8px 12px;
  border-bottom: 1px solid #24242b;
  padding: 0 16px;
}

.sidebar .brand-mark {
  color: white;
  text-decoration: none;
}

.nav-list {
  gap: 2px;
}

.nav-group + .nav-group {
  margin-top: 12px;
  border-top: 1px solid #24242b;
  padding-top: 10px;
}

.nav-label {
  margin: 5px 11px 6px;
  color: #656570;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

.nav-link {
  position: relative;
  min-height: 42px;
  gap: 10px;
  border-radius: 6px;
  color: #aaa9b3;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 500;
}

.nav-link:hover {
  background: #1b1b21;
  color: white;
}

.nav-link.active {
  background: #302719;
  color: #f0aa2d;
}

.nav-link.active::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  content: "";
}

.nav-glyph {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  color: currentColor;
}

.nav-link.active .nav-glyph {
  border: 0;
  background: transparent;
}

.nav-count {
  min-width: 20px;
  height: 18px;
  background: #3c2824;
  color: #f4a19a;
}

.sidebar-footer {
  border-top-color: #24242b;
  padding: 12px 6px 0;
}

.sidebar-user {
  display: grid;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: white;
  text-decoration: none;
}

.sidebar-user .avatar {
  width: 30px;
  height: 30px;
}

.sidebar-user strong,
.sidebar-user small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user strong {
  font-size: 11px;
}

.sidebar-user small {
  margin-top: 1px;
  color: #7e7d88;
  font-size: 9px;
}

.environment-line {
  margin-top: 10px;
  color: #696873;
  font-size: 9px;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: #58b98b;
}

.app-column {
  margin-left: var(--sidebar-width);
}

.app-header {
  height: 56px;
  gap: 14px;
  border-bottom-color: var(--line);
  background: #ffffff;
  padding: 0 16px;
}

.page-identity {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
}

.header-title {
  font-size: 14px;
  font-weight: 650;
}

.header-scope {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 3px 7px;
  font-size: 10px;
}

.header-scope [data-lucide] {
  width: 11px;
  height: 11px;
}

.header-actions {
  gap: 8px;
}

.header-context {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  border: 1px solid #f1e3bd;
  border-radius: 8px;
  background: #fffdf5;
  padding: 4px 8px;
}

.header-role {
  display: flex;
  max-width: 250px;
  align-items: baseline;
  gap: 4px;
  overflow: hidden;
  color: #5a451f;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-role small {
  color: #b0822d;
  font-size: 9px;
  font-weight: 500;
}

.header-context .branch-context-field {
  margin: 0;
}

.header-context .branch-context-field > span {
  display: none;
}

.header-context .branch-context-field select {
  max-width: 125px;
  min-height: 26px;
  border: 0;
  background: transparent;
  color: #5a451f;
  padding: 0 20px 0 2px;
  font-size: 10px;
  font-weight: 600;
}

.icon-button {
  width: 36px;
  height: 36px;
  border-color: var(--line);
  border-radius: 8px;
  background: #f8f8fa;
  color: var(--muted);
}

.notification-button {
  overflow: visible;
}

.notification-count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--coral);
  color: white;
  padding: 0 4px;
  font-size: 8px;
  font-weight: 700;
}

.avatar {
  width: 32px;
  height: 32px;
  background: #fff5d7;
  color: #9a6511;
  font-size: 10px;
}

.main-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 28px 56px;
}

.page-heading {
  align-items: flex-start;
  margin-bottom: 18px;
}

.page-heading h1 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.page-heading p {
  margin-top: 2px;
  font-size: 11px;
}

.module-heading {
  margin: 18px 0 14px;
}

.module-heading h2,
.module-heading p {
  margin: 0;
}

.module-heading h2 {
  font-size: 14px;
  font-weight: 700;
}

.module-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.button {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 650;
}

.button-primary {
  background: #111116;
  color: white;
}

.button-primary:hover:not(:disabled) {
  background: #29292f;
}

.button-secondary {
  border-color: var(--line);
  background: white;
}

.surface,
.task-preview-list,
.journey-item,
.inline-loading,
.compact-empty,
.branch-board,
.assignment-list,
.system-status-grid {
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: none;
}

.surface-label,
.metric-label,
.context-strip-item span {
  letter-spacing: 0;
  font-size: 9px;
  font-weight: 650;
}

.badge {
  min-height: 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 9px;
  font-weight: 600;
}

.badge-success {
  border-color: #d4ebdd;
  background: #f1faf5;
  color: #39805c;
}

.badge-warning {
  border-color: #f0e1b3;
  background: #fff9e9;
  color: #9a6511;
}

.badge-info,
.badge-domain {
  border-color: #dfe4f6;
  background: #f4f6ff;
  color: #4d67b0;
}

.badge-neutral {
  border-color: #e6e6eb;
  background: #f5f5f7;
  color: #73727e;
}

.badge [data-lucide] {
  width: 11px;
  height: 11px;
}

.alert {
  border-radius: 10px;
}

.alert-mark [data-lucide] {
  width: 13px;
  height: 13px;
}

.sidebar .nav-label,
.mobile-drawer .nav-label {
  display: none;
}

.module-development-page {
  display: grid;
  min-height: calc(100vh - 118px);
  place-items: center;
  padding: 40px 20px;
}

.module-development-content {
  display: grid;
  width: min(460px, 100%);
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.module-development-icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid #efd475;
  border-radius: 16px;
  background: #fffdf4;
  color: #d78300;
}

.module-development-icon [data-lucide] {
  width: 26px;
  height: 26px;
}

.module-development-content h1 {
  margin: 10px 0 0;
  color: #080b17;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: 0;
}

.module-development-content p {
  margin: -4px 0 2px;
  color: #66657a;
  font-size: 16px;
  line-height: 1.5;
}

.module-development-badge {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  border: 1px solid #efd475;
  border-radius: 13px;
  background: #fffbed;
  color: #b26500;
  padding: 0 17px;
  font-size: 14px;
  font-weight: 650;
}

.module-development-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f3c756;
}

/* Workforce navigation */
.workforce-tabs {
  width: max-content;
  max-width: 100%;
  gap: 2px;
  margin: 0 0 20px;
  border: 0;
  border-radius: 10px;
  background: #f0f0f5;
  padding: 4px;
  scrollbar-width: none;
}

.workforce-tabs::-webkit-scrollbar,
.segmented-control::-webkit-scrollbar {
  display: none;
}

.workforce-tabs a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 550;
}

.workforce-tabs a.active {
  border-color: #111116;
  background: white;
  color: #111116;
  box-shadow: 0 1px 2px rgba(17, 17, 24, 0.04);
}

.workforce-tabs a.active::after {
  display: none;
}

.workforce-tabs [data-lucide] {
  width: 13px;
  height: 13px;
}

.workforce-control-tabs {
  position: sticky;
  top: 56px;
  z-index: 24;
  display: grid;
  gap: 12px;
  margin: -12px 0 10px;
  background: var(--canvas);
  padding: 12px 0 6px;
  isolation: isolate;
}

.workforce-control-tabs-clean {
  gap: 10px;
  margin-bottom: 20px;
}

.workforce-control-tabs-clean .workforce-section-tabs {
  width: max-content;
  max-width: 100%;
  background: #f3f3f7;
  padding: 5px;
}

.workforce-control-tabs-clean .workforce-section-tabs a {
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 650;
}

.workforce-control-tabs-clean .workforce-team-filter + .workforce-section-tabs {
  margin-top: 2px;
}

.workforce-mode-switcher {
  display: grid;
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  align-items: center;
  gap: 16px;
  border: 1px solid #e1e1e8;
  border-radius: 10px;
  background: #ffffff;
  padding: 13px 16px;
  box-shadow: 0 1px 2px rgba(17, 17, 24, 0.03);
}

.workforce-mode-switcher.has-team-filter {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
}

.workforce-mode-switcher-direct {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}

.workforce-mode-current {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.workforce-mode-switcher-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #eef2ff;
  color: #5b6ed6;
}

.workforce-mode-switcher.tone-self .workforce-mode-switcher-icon {
  background: #fff4d8;
  color: #b78026;
}

.workforce-mode-switcher.tone-team .workforce-mode-switcher-icon {
  background: #eaf7f1;
  color: #438663;
}

.workforce-mode-switcher-icon svg {
  width: 18px;
  height: 18px;
}

.workforce-mode-current-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workforce-mode-current-copy small,
.workforce-mode-field span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.workforce-mode-current-copy strong {
  overflow: hidden;
  color: #05060a;
  font-size: 18px;
  font-weight: 780;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-mode-current-copy em {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 620;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-mode-filter-toggle {
  display: none;
}

.workforce-mode-fields {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(210px, 260px);
  justify-content: end;
  gap: 10px;
}

.workforce-mode-switcher.has-team-filter .workforce-mode-fields {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.workforce-mode-field {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 5px;
}

.workforce-mode-field select {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
  border: 1px solid #d9dbe2;
  border-radius: 8px;
  outline: none;
  background: #f9fafb;
  color: #17181f;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 42px 0 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.2;
  text-align: left;
  text-align-last: left;
}

.workforce-mode-field::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 17px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #5f6670;
  border-bottom: 2px solid #5f6670;
  pointer-events: none;
  transform: rotate(45deg);
}

.workforce-mode-field select:focus {
  border-color: #111116;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(17, 17, 24, 0.08);
}

.workforce-direct-scope-field {
  justify-self: end;
  width: min(320px, 100%);
}

.workforce-team-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  align-items: center;
  gap: 14px;
  border: 1px solid #e3e5ea;
  border-radius: 10px;
  background: #fbfbfc;
  padding: 11px 14px;
}

.workforce-team-filter-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.workforce-team-filter-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #eef5f1;
  color: #438663;
}

.workforce-team-filter-icon svg {
  width: 16px;
  height: 16px;
}

.workforce-team-filter-copy span:last-child,
.workforce-team-filter-field {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.workforce-team-filter-copy small,
.workforce-team-filter-field span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.workforce-team-filter-copy strong {
  overflow: hidden;
  color: #111116;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-team-filter-copy em {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-team-filter-field select {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  min-height: 42px;
  border: 1px solid #d9dbe2;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: #17181f;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 42px 0 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
  text-align: left;
  text-align-last: left;
}

.workforce-team-filter-field select:focus {
  border-color: #111116;
  box-shadow: 0 0 0 3px rgba(17, 17, 24, 0.08);
}

.workforce-team-filter-field {
  position: relative;
}

.workforce-team-filter-field::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #5f6670;
  border-bottom: 2px solid #5f6670;
  pointer-events: none;
  transform: rotate(45deg);
}

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

.workforce-mode-card {
  display: grid;
  min-height: 94px;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: start;
  gap: 12px;
  border: 1px solid #e1e1e8;
  border-radius: 10px;
  background: #ffffff;
  padding: 16px 18px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.workforce-mode-card:hover {
  border-color: #cbcbd5;
  box-shadow: 0 8px 18px rgba(17, 17, 24, 0.06);
  transform: translateY(-1px);
}

.workforce-mode-card.active {
  border-color: #111116;
  box-shadow: inset 0 0 0 1px #111116, 0 10px 22px rgba(17, 17, 24, 0.06);
}

.workforce-mode-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.workforce-mode-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.workforce-mode-copy strong {
  color: #05060a;
  font-size: 30px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}

.workforce-mode-copy em {
  color: var(--text-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}

.workforce-mode-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  justify-self: end;
  border-radius: 8px;
  background: #f3f4f8;
  color: #626a78;
}

.workforce-mode-icon svg {
  width: 18px;
  height: 18px;
}

.workforce-mode-card.tone-overview .workforce-mode-icon {
  background: #eef2ff;
  color: #5b6ed6;
}

.workforce-mode-card.tone-self .workforce-mode-icon {
  background: #fff4d8;
  color: #b78026;
}

.workforce-mode-card.tone-team .workforce-mode-icon {
  background: #eaf7f1;
  color: #438663;
}

.workforce-section-tabs {
  width: max-content;
  max-width: 100%;
  margin: 0;
}

.workforce-overview-pill {
  display: inline-flex;
  width: max-content;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid #dedee6;
  border-radius: 9px;
  background: #ffffff;
  padding: 0 14px;
  color: #575c69;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(18, 18, 24, 0.03);
}

.workforce-overview-pill.active {
  border-color: #111116;
  color: #111116;
}

.workforce-overview-pill svg {
  width: 14px;
  height: 14px;
}

.workforce-tab-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workforce-tab-group {
  display: grid;
  min-width: 0;
  gap: 10px;
  border: 1px solid #e1e1e8;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px;
}

.workforce-tab-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workforce-tab-group header div {
  display: grid;
  gap: 2px;
}

.workforce-tab-group header strong {
  color: #111116;
  font-size: 14px;
  line-height: 1.2;
}

.workforce-tab-group header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.workforce-tab-group .workforce-tabs {
  display: flex;
  width: 100%;
  max-width: none;
  flex-wrap: wrap;
  margin: 0;
}

.workforce-tab-group .workforce-tabs a {
  flex: 1 1 106px;
  justify-content: center;
}

.workforce-overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.overview-metric-card {
  position: relative;
  display: grid;
  min-height: 108px;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 14px;
  overflow: hidden;
  border: 1px solid #dde0e8;
  border-radius: 10px;
  background: #ffffff;
  padding: 17px 18px 16px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(25, 28, 36, 0.035);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  --metric-color: #5f78dc;
  --metric-soft: #edf2ff;
}

.overview-metric-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--metric-color);
  content: "";
}

.overview-metric-card:hover {
  transform: translateY(-1px);
  border-color: #cfd4df;
  box-shadow: 0 14px 30px rgba(32, 33, 39, 0.08);
}

.overview-metric-card.tone-attendance {
  border-color: #e1e1e8;
  background: #ffffff;
  --metric-color: #d45d4f;
  --metric-soft: #fff1ed;
}

.overview-metric-card.tone-leave {
  border-color: #e1e1e8;
  background: #ffffff;
  --metric-color: #4f9b62;
  --metric-soft: #edf8f1;
}

.overview-metric-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
}

.overview-metric-copy small,
.overview-metric-copy em {
  color: #747482;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

.overview-metric-copy strong {
  color: #111116;
  font-size: 31px;
  line-height: 1;
  letter-spacing: 0;
}

.overview-metric-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  justify-self: end;
  border-radius: 10px;
  background: var(--metric-soft);
  color: var(--metric-color);
}

.overview-metric-icon svg { width: 20px; height: 20px; }

.workforce-overview-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

.overview-scope-tabs {
  display: inline-flex;
  max-width: 100%;
  gap: 5px;
  overflow-x: auto;
  margin: 0 0 14px;
  border-radius: 10px;
  background: #f0f0f5;
  padding: 4px;
  scrollbar-width: none;
}

.overview-scope-tabs::-webkit-scrollbar {
  display: none;
}

.overview-scope-tabs button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: #666776;
  padding: 0 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

.overview-scope-tabs button.active {
  border-color: #111116;
  background: #ffffff;
  color: #111116;
  box-shadow: 0 1px 2px rgba(17, 17, 24, 0.04);
}

.overview-scope-tabs svg {
  width: 14px;
  height: 14px;
}

.overview-scope-stack {
  display: grid;
  gap: 18px;
}

.overview-scope-stack.is-tabbed {
  gap: 0;
}

.overview-scope-section {
  overflow: hidden;
  border: 1px solid #e1e1e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(28, 30, 39, 0.05);
}

.overview-scope-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #eceef3;
  background: #fbfbfc;
  padding: 18px 20px;
}

.overview-scope-team .overview-scope-head {
  background: #f8fbf9;
}

.overview-scope-head div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.overview-scope-head span {
  color: var(--amber);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.overview-scope-head h2 {
  margin: 0;
  color: #111116;
  font-size: 24px;
  line-height: 1.12;
}

.overview-scope-head p {
  margin: 0;
  color: #696979;
  font-size: 13px;
  line-height: 1.45;
}

.overview-scope-head a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dedfe7;
  border-radius: 10px;
  background: #ffffff;
  color: #262730;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.overview-scope-head a:hover {
  border-color: #cfd2dc;
  box-shadow: 0 8px 18px rgba(28, 30, 39, 0.06);
}

.overview-scope-head a svg {
  width: 15px;
  height: 15px;
}

.overview-scope-section > .workforce-overview-metrics {
  margin: 16px 18px 14px;
}

.overview-scope-section > .workforce-overview-board {
  padding: 0 18px 18px;
}

.overview-self-content {
  display: grid;
  gap: 18px;
}

.overview-self-content > .workforce-overview-metrics {
  margin: 0;
}

.overview-self-content > .workforce-overview-board {
  padding: 0;
}

.overview-team-context {
  padding: 14px 18px 0;
}

.overview-team-context .workforce-team-filter {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  background: #ffffff;
  padding: 12px 14px;
}

.overview-team-content {
  display: grid;
  gap: 16px;
}

.overview-team-content .overview-team-metrics {
  padding: 0;
}

.overview-team-content .overview-team-priority {
  margin: 0;
}

.overview-team-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 18px 0;
}

.overview-team-card {
  --team-card-accent: #5f78dc;
  --team-card-soft: #eef3ff;
  display: grid;
  min-height: 118px;
  grid-template-columns: minmax(0, 1fr) 50px;
  align-items: start;
  gap: 16px;
  border: 1px solid #e2e4eb;
  border-left: 4px solid var(--team-card-accent);
  border-radius: 10px;
  background: #ffffff;
  color: inherit;
  padding: 18px 18px 16px 20px;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.overview-team-card:hover {
  transform: translateY(-1px);
  border-color: #e2e4eb;
  border-left-color: var(--team-card-accent);
  box-shadow: 0 10px 22px rgba(28, 30, 39, 0.06);
}

.overview-team-card-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 12px;
  background: var(--team-card-soft);
  color: var(--team-card-accent);
  justify-self: end;
}

.overview-team-card-icon svg {
  width: 20px;
  height: 20px;
}

.overview-team-card-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 5px;
}

.overview-team-card-copy strong,
.overview-team-card-copy small,
.overview-team-card-copy em {
  overflow: visible;
  text-overflow: clip;
}

.overview-team-card-copy strong {
  color: #111116;
  font-size: 32px;
  font-weight: 900;
  line-height: .95;
  letter-spacing: 0;
  white-space: normal;
}

.overview-team-card-copy small {
  color: #686979;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
  white-space: normal;
}

.overview-team-card-copy em {
  color: #686979;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.overview-team-card.tone-schedule { --team-card-accent: #5f78dc; --team-card-soft: #eef3ff; }
.overview-team-card.tone-swap { --team-card-accent: #4d7f67; --team-card-soft: #eef7f2; }
.overview-team-card.tone-attendance { --team-card-accent: #c75b45; --team-card-soft: #fff2eb; }
.overview-team-card.tone-leave { --team-card-accent: #a97817; --team-card-soft: #fff7df; }
.overview-team-card.tone-activity { --team-card-accent: #3e8a5e; --team-card-soft: #eef7f2; }

.owner-attendance-overview {
  overflow: hidden;
  border: 1px solid #e2e4eb;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(21, 24, 35, 0.04);
}

.owner-attendance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #edf0f3;
  background: #fbfcfd;
  padding: 16px 18px;
}

.owner-attendance-scope {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.owner-attendance-scope > span {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #eef7f2;
  color: #3e8a5e;
}

.owner-attendance-scope p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.owner-attendance-scope small,
.owner-attendance-month-field span {
  color: #686979;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.owner-attendance-scope strong {
  overflow: hidden;
  color: #111116;
  font-size: 18px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-month-field {
  display: grid;
  min-width: 220px;
  gap: 6px;
}

.owner-attendance-month-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 46px;
  border: 1px solid #dfe2ea;
  border-radius: 10px;
  background: #ffffff;
  color: #111116;
  padding: 0 14px;
  font: inherit;
  font-weight: 800;
}

.owner-attendance-month-field input[type="month"] {
  text-align: center;
}

.owner-attendance-month-field input[type="month"]::-webkit-date-and-time-value {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.owner-attendance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-bottom: 1px solid #edf0f3;
  background: #ffffff;
  padding: 14px 18px;
}

.owner-attendance-summary-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  border: 1px solid #e5e7ee;
  border-radius: 10px;
  background: #ffffff;
  padding: 13px;
}

.owner-attendance-summary-card > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: #f1f2f6;
  color: #626675;
}

.owner-attendance-summary-card p {
  display: grid;
  min-width: 0;
  gap: 2px;
  margin: 0;
}

.owner-attendance-summary-card strong {
  color: #111116;
  font-size: 22px;
  line-height: 1;
}

.owner-attendance-summary-card small {
  color: #686979;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.owner-attendance-summary-card.tone-success > span { background: #eef7f2; color: #3e8a5e; }
.owner-attendance-summary-card.tone-warning > span { background: #fff4df; color: #a97817; }
.owner-attendance-summary-card.tone-info > span { background: #eef3ff; color: #5f78dc; }

.owner-attendance-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-bottom: 1px solid #edf0f3;
  background: #fbfcfd;
  padding: 14px 18px;
}

.owner-attendance-view-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid #e2e4eb;
  border-radius: 10px;
  cursor: pointer;
  background: #ffffff;
  padding: 14px 16px;
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.owner-attendance-view-card:hover {
  border-color: #cfd3dd;
  box-shadow: 0 14px 28px rgba(17, 17, 24, 0.06);
  transform: translateY(-1px);
}

.owner-attendance-view-card.active {
  border-color: #111116;
  box-shadow: inset 0 0 0 1px #111116, 0 14px 28px rgba(17, 17, 24, 0.06);
}

.owner-attendance-view-card > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 10px;
  background: #f1f2f6;
  color: #626675;
}

.owner-attendance-view-card p,
.owner-attendance-view-card em {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.owner-attendance-view-card p strong,
.owner-attendance-view-card em b {
  color: #111116;
  font-size: 18px;
  font-style: normal;
  line-height: 1.1;
}

.owner-attendance-view-card p small,
.owner-attendance-view-card em small {
  overflow: hidden;
  color: #686979;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-view-card em {
  justify-items: end;
  border-left: 1px solid #edf0f3;
  padding-left: 14px;
}

.owner-attendance-view-card.tone-date > span { background: #eef3ff; color: #5f78dc; }
.owner-attendance-view-card.tone-employee > span { background: #eef7f2; color: #3e8a5e; }

.owner-attendance-calendar {
  background: #ffffff;
}

.owner-attendance-calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edf0f3;
  padding: 17px 18px 15px;
}

.owner-attendance-calendar-head h3,
.owner-attendance-calendar-head p {
  margin: 0;
}

.owner-attendance-calendar-head h3 {
  color: #111116;
  font-size: 22px;
  line-height: 1.1;
}

.owner-attendance-calendar-head p {
  margin-top: 5px;
  color: #686979;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.owner-attendance-calendar-head > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f1f2f6;
  color: #4f5261;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 850;
}

.owner-attendance-calendar-scroll {
  overflow-x: auto;
  background: #f7f8fa;
  padding: 16px 18px 18px;
}

.owner-attendance-calendar-scroll::-webkit-scrollbar {
  height: 8px;
}

.owner-attendance-calendar-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d7dbe5;
}

.owner-attendance-calendar-grid {
  display: grid;
  min-width: 1040px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid #dfe2ea;
  border-radius: 10px;
  background: #dfe2ea;
  gap: 1px;
  overflow: hidden;
}

.owner-attendance-calendar-weekday {
  background: #f3f4f6;
  color: #4f5261;
  padding: 13px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 850;
}

.owner-attendance-day {
  display: grid;
  min-height: 188px;
  align-content: start;
  gap: 9px;
  background: #ffffff;
  padding: 14px 13px;
}

.owner-attendance-day.is-empty {
  background: #fafbfc;
}

.owner-attendance-day.is-weekend {
  background: #fbfcfd;
}

.owner-attendance-day.has-records {
  background: #ffffff;
}

.owner-attendance-day.is-today {
  box-shadow: inset 0 0 0 2px #111116;
}

.owner-attendance-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.owner-attendance-day-top p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.owner-attendance-day-top small {
  display: none;
  color: #686979;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.owner-attendance-day-top strong {
  color: #111116;
  font-size: 18px;
  line-height: 1;
}

.owner-attendance-day-top span {
  border-radius: 7px;
  background: #111116;
  color: #ffffff;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 850;
}

.owner-attendance-day-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.owner-attendance-day-count {
  display: none;
  color: #686979;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.owner-attendance-day-toggle {
  display: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #e2e4eb;
  border-radius: 8px;
  cursor: pointer;
  background: #ffffff;
  color: #686979;
  padding: 0;
}

.owner-attendance-day-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform .16s ease;
}

.owner-attendance-day.is-expanded .owner-attendance-day-toggle svg {
  transform: rotate(180deg);
}

.owner-attendance-day-badge {
  justify-self: start;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.owner-attendance-day-badge.tone-success { background: #eef7f2; color: #32764f; }
.owner-attendance-day-badge.tone-warning { background: #fff4df; color: #986714; }
.owner-attendance-day-badge.tone-info { background: #eef7f2; color: #347b53; }
.owner-attendance-day-badge.tone-muted { background: #f0f2f6; color: #686979; }

.owner-attendance-day-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.owner-attendance-day-items {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.owner-attendance-day-items > em {
  color: #70717f;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.owner-attendance-day-entry {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-left: 3px solid #d7dbe5;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px;
  cursor: pointer;
  background: #ffffff;
  padding: 8px 9px;
  font: inherit;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.owner-attendance-day-entry.tone-success { border-left-color: #4f9e69; }
.owner-attendance-day-entry.tone-warning { border-left-color: #d3a247; }
.owner-attendance-day-entry.tone-info { border-left-color: #3e8a5e; }
.owner-attendance-day-entry.tone-muted { border-left-color: #b8bdc8; }

.owner-attendance-day-entry:hover {
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(17, 17, 24, 0.08);
  transform: translateY(-1px);
}

.owner-attendance-day-entry strong,
.owner-attendance-day-entry span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-day-entry strong {
  color: #111116;
  font-size: 12px;
  line-height: 1.2;
}

.owner-attendance-day-entry span {
  flex: 0 1 auto;
  border-radius: 999px;
  background: #f1f2f6;
  color: #686979;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 850;
}

.owner-attendance-day-entry.tone-success span,
.owner-attendance-day-entry.tone-info span {
  background: #f1f2f6;
  color: #4f5261;
}

.owner-attendance-day-entry.tone-warning span {
  background: #fff1d5;
  color: #986714;
}

.owner-attendance-employee-overview {
  background: #ffffff;
}

.owner-attendance-employee-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background: #f7f8fa;
  padding: 16px 18px 18px;
}

.owner-attendance-employee-card {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1.3fr);
  align-items: center;
  gap: 16px;
  border: 1px solid #e2e4eb;
  border-left: 4px solid #d7dbe5;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 16px;
}

.owner-attendance-employee-card.tone-success { border-left-color: #4f9e69; }
.owner-attendance-employee-card.tone-warning { border-left-color: #d3a247; }

.owner-attendance-employee-card header {
  display: grid;
  min-width: 0;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.owner-attendance-employee-card .owner-attendance-employee-details,
.owner-attendance-employee-card .owner-attendance-employee-clean {
  grid-column: 1 / -1;
}

.owner-attendance-employee-avatar {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 10px;
  background: #f1f2f6;
  color: #4f5261;
  font-size: 13px;
  font-weight: 900;
}

.owner-attendance-employee-card header p {
  display: grid;
  min-width: 0;
  gap: 4px;
  margin: 0;
}

.owner-attendance-employee-card header strong {
  overflow: hidden;
  color: #111116;
  font-size: 19px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-card header small {
  overflow: hidden;
  color: #686979;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-card header em {
  border-radius: 999px;
  background: #f1f2f6;
  color: #686979;
  padding: 7px 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.owner-attendance-employee-card header em.tone-success { background: #e7f5ec; color: #32764f; }
.owner-attendance-employee-card header em.tone-warning { background: #fff1d5; color: #986714; }

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

.owner-attendance-employee-stat {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #fbfcfd;
  padding: 9px 10px;
}

.owner-attendance-employee-stat svg {
  width: 16px;
  height: 16px;
  color: #686979;
}

.owner-attendance-employee-stat small {
  overflow: hidden;
  color: #686979;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-stat strong {
  color: #111116;
  font-size: 22px;
  line-height: 1;
}

.owner-attendance-employee-stat.tone-success svg { color: #3e8a5e; }
.owner-attendance-employee-stat.tone-warning svg { color: #a97817; }
.owner-attendance-employee-stat.tone-info svg { color: #5f78dc; }
.owner-attendance-employee-stat.tone-muted svg { color: #686979; }
.owner-attendance-employee-stat.tone-rest svg { color: #c24c4c; }

.owner-attendance-employee-stats-clean {
  grid-template-columns: minmax(160px, 0.95fr) minmax(220px, 1.35fr) minmax(170px, 0.9fr);
  align-items: stretch;
}

.owner-attendance-employee-stats-clean > .owner-attendance-employee-stat:first-child {
  min-height: 64px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  border-color: #dcefe3;
  background: #fbfffc;
}

.owner-attendance-employee-stats-clean > .owner-attendance-employee-stat:first-child small {
  font-size: 12px;
}

.owner-attendance-employee-stats-clean > .owner-attendance-employee-stat:first-child strong {
  font-size: 25px;
}

.owner-attendance-employee-substats {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.owner-attendance-employee-substats .owner-attendance-employee-stat {
  min-height: 64px;
  grid-template-columns: 16px minmax(0, 1fr);
  padding: 9px;
}

.owner-attendance-employee-substats .owner-attendance-employee-stat small {
  font-size: 10px;
}

.owner-attendance-employee-substats .owner-attendance-employee-stat strong {
  font-size: 21px;
}

.owner-attendance-employee-late-summary {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #fbfcfd;
  padding: 10px;
  color: #686979;
}

.owner-attendance-employee-late-summary.has-late {
  border-color: #ead8ad;
  background: #fffdf8;
  color: #986714;
}

.owner-attendance-employee-late-summary svg {
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.owner-attendance-employee-late-summary small {
  overflow: hidden;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-late-summary strong {
  overflow: hidden;
  color: #111116;
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-details {
  overflow: hidden;
  border: 1px solid #e2e4eb;
  border-radius: 10px;
  background: #ffffff;
}

.owner-attendance-employee-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 12px 13px;
}

.owner-attendance-employee-details summary::-webkit-details-marker {
  display: none;
}

.owner-attendance-employee-details summary span {
  color: #111116;
  font-size: 13px;
  font-weight: 850;
}

.owner-attendance-employee-details summary strong {
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #fff1d5;
  color: #986714;
  font-size: 12px;
}

.owner-attendance-employee-details > div {
  display: grid;
  gap: 8px;
  border-top: 1px solid #edf0f3;
  background: #fbfcfd;
  padding: 10px;
}

.owner-attendance-employee-issue {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7ee;
  border-left: 3px solid #d3a247;
  border-radius: 10px;
  cursor: pointer;
  background: #ffffff;
  padding: 10px;
  font: inherit;
  text-align: left;
}

.owner-attendance-employee-issue time {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 9px;
  background: #f1f2f6;
}

.owner-attendance-employee-issue time small {
  color: #686979;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.owner-attendance-employee-issue time strong {
  color: #111116;
  font-size: 18px;
  line-height: 1;
}

.owner-attendance-employee-issue p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.owner-attendance-employee-issue p strong {
  overflow: hidden;
  color: #111116;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-issue p small {
  overflow: hidden;
  color: #686979;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-issue em {
  color: #4f5261;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.owner-attendance-employee-clean {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid #e7f5ec;
  border-radius: 10px;
  background: #fbfefa;
  color: #32764f;
  padding: 11px 12px;
  font-size: 12px;
  font-weight: 800;
}

.owner-attendance-employee-clean svg {
  width: 16px;
  height: 16px;
}

.owner-attendance-detail-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 28px));
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 0;
}

.owner-attendance-detail-dialog::backdrop {
  background: rgba(18, 18, 24, 0.56);
  backdrop-filter: blur(2px);
}

.owner-attendance-detail-shell {
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 24px 72px rgba(16, 18, 26, 0.28);
}

.owner-attendance-detail-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #edf0f3;
  padding: 22px 24px;
}

.owner-attendance-detail-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 12px;
  background: #f1f2f6;
  color: #666b76;
}

.owner-attendance-detail-icon.tone-success,
.owner-attendance-detail-status.tone-success > span { background: #eaf7f0; color: #3e8a5e; }
.owner-attendance-detail-icon.tone-warning,
.owner-attendance-detail-status.tone-warning > span { background: #fff3dc; color: #a46f1f; }
.owner-attendance-detail-icon.tone-info,
.owner-attendance-detail-status.tone-info > span { background: #eef7f2; color: #347b53; }
.owner-attendance-detail-icon.tone-muted,
.owner-attendance-detail-status.tone-muted > span { background: #f1f2f6; color: #686979; }

.owner-attendance-detail-icon svg {
  width: 22px;
  height: 22px;
}

.owner-attendance-detail-head small,
.owner-attendance-detail-status small,
.owner-attendance-detail-fact small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.owner-attendance-detail-head h2 {
  margin: 3px 0 0;
  color: #08090d;
  font-size: 28px;
  line-height: 1.1;
}

.owner-attendance-detail-head p {
  margin: 7px 0 0;
  color: #6f7280;
  font-size: 14px;
  font-weight: 650;
}

.owner-attendance-detail-body {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 230px);
  overflow: auto;
  padding: 20px 24px 22px;
}

.owner-attendance-detail-status {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid #e1e4ea;
  border-radius: 10px;
  background: #fbfcfd;
  padding: 15px;
}

.owner-attendance-detail-status > span,
.owner-attendance-detail-fact > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 10px;
  background: #f1f2f6;
  color: #66707a;
}

.owner-attendance-detail-status p,
.owner-attendance-detail-fact p {
  display: grid;
  min-width: 0;
  gap: 5px;
  margin: 0;
}

.owner-attendance-detail-status strong,
.owner-attendance-detail-fact strong {
  color: #08090d;
  font-size: 18px;
  line-height: 1.2;
}

.owner-attendance-detail-status em,
.owner-attendance-detail-fact em {
  color: #6f7280;
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}

.owner-attendance-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.owner-attendance-detail-fact {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  border: 1px solid #e1e4ea;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px;
}

.owner-attendance-detail-fact .team-attendance-source-badge {
  justify-self: start;
}

.owner-attendance-detail-footer {
  border-top: 1px solid #edf0f3;
  padding: 14px 24px 18px;
}

.owner-attendance-detail-footer .button {
  width: 100%;
}

.owner-attendance-day-empty {
  margin: 0;
  color: #9a9daa;
  font-size: 12px;
  font-weight: 650;
}

.owner-attendance-list {
  display: grid;
  gap: 10px;
  background: #f7f8fa;
  padding: 14px 18px 18px;
}

.owner-attendance-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 58px minmax(160px, .75fr) minmax(170px, .75fr) minmax(300px, 1.2fr) minmax(190px, .8fr);
  align-items: center;
  gap: 14px;
  border: 1px solid #e2e4eb;
  border-left: 4px solid #d7dbe5;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 16px;
}

.owner-attendance-row.tone-success { border-left-color: #4f9e69; }
.owner-attendance-row.tone-warning { border-left-color: #d3a247; }
.owner-attendance-row.tone-info { border-left-color: #5f78dc; }
.owner-attendance-row.tone-muted { border-left-color: #b8bdc8; }

.owner-attendance-person {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.owner-attendance-person strong {
  color: #111116;
  font-size: 17px;
  line-height: 1.2;
}

.owner-attendance-person span,
.owner-attendance-person small {
  overflow: hidden;
  color: #686979;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-schedule,
.owner-attendance-clock,
.owner-attendance-status {
  display: grid;
  min-width: 0;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7ee;
  border-radius: 10px;
  background: #fbfcfd;
  padding: 11px 12px;
}

.owner-attendance-schedule > span,
.owner-attendance-clock > span,
.owner-attendance-status > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: #f0f2f6;
  color: #626675;
}

.owner-attendance-schedule p,
.owner-attendance-clock p,
.owner-attendance-status p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.owner-attendance-schedule small,
.owner-attendance-clock small {
  color: #686979;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.owner-attendance-schedule strong,
.owner-attendance-clock strong {
  color: #111116;
  font-size: 17px;
  line-height: 1;
}

.owner-attendance-schedule em {
  overflow: hidden;
  color: #777987;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-actual {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.owner-attendance-status strong {
  color: #111116;
  font-size: 15px;
  line-height: 1.2;
}

.owner-attendance-status small {
  color: #686979;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.owner-attendance-schedule.tone-schedule > span { background: #eef3ff; color: #5f78dc; }
.owner-attendance-schedule.tone-leave > span,
.owner-attendance-status.tone-info > span { background: #eef7f2; color: #3e8a5e; }
.owner-attendance-schedule.tone-rest > span,
.owner-attendance-status.tone-muted > span { background: #f1f2f6; color: #70717f; }
.owner-attendance-status.tone-success > span { background: #eef7f2; color: #3e8a5e; }
.owner-attendance-status.tone-warning > span { background: #fff4df; color: #a97817; }

.owner-attendance-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 18px 18px;
  border: 1px dashed #dfe2ea;
  border-radius: 10px;
  background: #fbfcfd;
  padding: 18px;
}

.owner-attendance-empty > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: #f0f2f6;
  color: #6d7280;
}

.owner-attendance-empty p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.owner-attendance-empty strong {
  color: #111116;
  font-size: 15px;
}

.owner-attendance-empty small {
  color: #70717f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.overview-team-priority {
  overflow: hidden;
  margin: 16px 18px 18px;
  border: 1px solid #e2e4eb;
  border-radius: 10px;
  background: #ffffff;
}

.overview-team-priority header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf0f3;
  background: #fbfbfc;
  padding: 13px 16px;
}

.overview-team-priority header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.overview-team-priority header strong {
  overflow: hidden;
  color: #111116;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-team-priority-list {
  display: grid;
  grid-template-columns: 1fr;
}

.overview-team-priority-list.is-split {
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
}

.overview-team-priority-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 12px;
  border-bottom: 1px solid #edf0f3;
  color: inherit;
  padding: 14px 16px;
  text-decoration: none;
  transition: background .16s ease;
}

.overview-team-priority-row:hover {
  background: #fbfbfd;
}

.overview-team-priority-row:last-child {
  border-bottom: 0;
}

.overview-team-priority-list.is-split .overview-team-priority-row:nth-child(-n + 3) {
  border-right: 1px solid #edf0f3;
}

.overview-team-priority-list.is-split .overview-team-priority-row:nth-child(3) {
  border-bottom: 0;
}

.overview-team-priority-row > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  grid-column: 1;
  grid-row: 1 / span 2;
  border-radius: 8px;
  background: #eef3ff;
  color: #5f78dc;
}

.overview-team-priority-row > span svg {
  width: 16px;
  height: 16px;
}

.overview-team-priority-row b,
.overview-team-priority-row small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}

.overview-team-priority-row b {
  grid-column: 2;
  grid-row: 1;
  color: #111116;
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
}

.overview-team-priority-row small {
  grid-column: 2;
  grid-row: 2;
  color: #70717f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
}

.overview-team-priority-row > svg {
  width: 16px;
  height: 16px;
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  color: #7a7d89;
}

.overview-team-priority-row.tone-attendance > span { background: #fff2eb; color: #c75b45; }
.overview-team-priority-row.tone-leave > span { background: #fff7df; color: #a97817; }
.overview-team-priority-row.tone-activity > span { background: #eef7f2; color: #3e8a5e; }
.overview-team-priority-row.tone-decision > span { background: #fff8e5; color: #a97817; }

.overview-team-priority-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px;
}

.overview-team-priority-empty > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: #eef7f2;
  color: #3e8a5e;
}

.overview-team-priority-empty p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.overview-team-priority-empty strong {
  color: #111116;
  font-size: 15px;
}

.overview-team-priority-empty small {
  color: #70717f;
  font-size: 12px;
  font-weight: 650;
}

.overview-team-priority-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #edf0f3;
  background: #fbfbfc;
  padding: 10px 12px 10px 16px;
}

.overview-team-priority-footer small {
  color: #70717f;
  font-size: 11px;
  font-weight: 750;
}

.overview-team-priority-footer div {
  display: flex;
  gap: 6px;
}

.overview-team-priority-footer button {
  display: grid;
  width: 34px;
  height: 32px;
  place-items: center;
  border: 1px solid #dfe2ea;
  border-radius: 9px;
  background: #ffffff;
  color: #32333b;
}

.overview-team-priority-footer button:disabled {
  cursor: not-allowed;
  color: #b4b7c0;
  opacity: .6;
}

.workforce-overview-panel {
  display: grid;
  min-width: 0;
  height: 100%;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e1e1e8;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 7px rgba(17, 17, 24, 0.04);
}

.workforce-overview-panel.tone-attendance,
.workforce-overview-panel.tone-leave {
  grid-template-rows: auto minmax(0, 1fr);
}

.workforce-overview-panel.tone-attendance > .overview-empty,
.workforce-overview-panel.tone-leave > .overview-empty {
  height: 100%;
  align-items: flex-start;
  align-self: stretch;
  padding-top: 28px;
}

.workforce-overview-panel.tone-schedule {
  grid-column: 1 / -1;
}

.overview-panel-head {
  display: grid;
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #edf0f5;
  background: #fbfcff;
  padding: 14px 16px;
}

.overview-schedule-panel .overview-panel-head {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  border-bottom-color: #dbe7ff;
  background: #f4f8ff;
}

.tone-attendance .overview-panel-head {
  border-bottom-color: #f3d7cf;
  background: #fff7f4;
}

.tone-leave .overview-panel-head {
  border-bottom-color: #d7eadf;
  background: #f4fbf7;
}

.overview-panel-icon,
.overview-panel-link {
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.overview-panel-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #edf4ff;
  color: #356fd6;
}

.tone-attendance .overview-panel-icon {
  background: #fff0e9;
  color: #c2573f;
}

.tone-leave .overview-panel-icon {
  background: #edf8f1;
  color: #2d7a57;
}

.overview-panel-icon [data-lucide] {
  width: 18px;
  height: 18px;
}

.overview-panel-head h2,
.overview-panel-head p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-panel-head h2 {
  color: #111116;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
}

.overview-panel-head p {
  margin-top: 3px;
  color: #787684;
  font-size: 11px;
}

.overview-panel-link {
  width: 32px;
  height: 32px;
  border: 1px solid #e4e4ea;
  background: #fafafa;
  color: #7b7985;
  text-decoration: none;
}

.overview-panel-link:hover {
  border-color: #d1d1da;
  color: #111116;
}

.overview-panel-link [data-lucide] {
  width: 17px;
  height: 17px;
}

.overview-panel-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #f0f0f3;
  border-radius: 0;
  background: #f7f7fa;
  padding: 13px 16px;
}

.overview-panel-summary strong,
.overview-panel-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-panel-summary strong {
  color: #111116;
  font-size: 18px;
  line-height: 1.1;
}

.overview-panel-summary span {
  color: #777684;
  font-size: 12px;
  font-weight: 650;
}

.tone-attendance .overview-panel-summary,
.tone-leave .overview-panel-summary {
  display: none;
}

.overview-week-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  border-top: 1px solid #f0f0f3;
  padding: 12px 18px 10px;
  scrollbar-width: none;
}

.overview-week-strip::-webkit-scrollbar {
  display: none;
}

.overview-week-day {
  appearance: none;
  display: grid;
  width: 52px;
  min-width: 52px;
  height: 60px;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  background: #f7f7fa;
  color: #4f5160;
  font: inherit;
  padding: 0;
}

.overview-week-day:hover {
  background: #f0f0f5;
}

.overview-week-day:focus-visible {
  outline: 2px solid #4778d8;
  outline-offset: 3px;
}

.overview-week-day small {
  color: #6f7280;
  font-size: 9px;
  font-weight: 750;
}

.overview-week-day strong {
  font-size: 16px;
  line-height: 1;
}

.overview-week-day i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4d78cf;
}

.overview-week-day.active {
  background: #4778d8;
  color: white;
}

.overview-week-day.active small {
  color: white;
}

.overview-week-day.active i {
  background: white;
}

.overview-week-day.is-missing {
  opacity: 0.48;
}

.overview-week-day.is-rest {
  background: #fff1ef;
  color: #b9473c;
  opacity: 1;
}

.overview-week-day.is-rest small {
  color: #a6534b;
}

.overview-week-day.is-rest i {
  background: #d85b50;
}

.overview-week-day.is-rest.active {
  background: #d85b50;
  color: white;
}

.overview-week-day.is-rest.active small {
  color: white;
}

.overview-week-day.is-rest.active i {
  background: white;
}

.overview-today-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  margin: 0 18px 14px;
  border: 1px solid #cfe0ff;
  border-radius: 10px;
  background: #f5f8ff;
  padding: 14px 16px;
}

.overview-today-card div {
  min-width: 0;
}

.overview-today-card span:first-child {
  color: #3158a6;
  font-size: 12px;
  font-weight: 850;
}

.overview-today-card strong,
.overview-today-card p {
  display: block;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-today-card strong {
  margin-top: 5px;
  color: #111116;
  font-size: 16px;
  line-height: 1.2;
}

.overview-today-card p {
  margin-top: 3px;
  color: #727484;
  font-size: 12px;
}

.overview-today-card > span:last-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  justify-self: end;
  border-radius: 10px;
  background: #4778d8;
  color: white;
}

.overview-today-card.is-rest {
  border-color: #f1c2bd;
  background: #fff6f4;
}

.overview-today-card.is-rest span:first-child {
  color: #b9473c;
}

.overview-today-card.is-rest > span:last-child {
  background: #d85b50;
}

.overview-today-card > span:last-child svg {
  width: 18px;
  height: 18px;
}

.overview-leave-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border-top: 1px solid #f0f0f3;
}

.overview-leave-stats > div {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 13px 8px;
}

.overview-leave-stats > div + div {
  border-left: 1px solid #f0f0f3;
}

.overview-leave-stats strong {
  color: #111116;
  font-size: 21px;
  line-height: 1;
}

.overview-leave-stats span {
  color: #9699a7;
  font-size: 11px;
  font-weight: 750;
}

.overview-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #f0f0f3;
  padding: 13px 16px;
}

.overview-progress > span {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: #eff1f2;
}

.overview-progress b {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #62c472;
}

.overview-progress .progress-0 { width: 0; }
.overview-progress .progress-10 { width: 10%; }
.overview-progress .progress-20 { width: 20%; }
.overview-progress .progress-30 { width: 30%; }
.overview-progress .progress-40 { width: 40%; }
.overview-progress .progress-50 { width: 50%; }
.overview-progress .progress-60 { width: 60%; }
.overview-progress .progress-70 { width: 70%; }
.overview-progress .progress-80 { width: 80%; }
.overview-progress .progress-90 { width: 90%; }
.overview-progress .progress-100 { width: 100%; }

.overview-progress strong {
  color: #5b6a61;
  font-size: 12px;
}

.overview-list {
  display: grid;
  gap: 0;
  border-top: 1px solid #f0f0f3;
}

.overview-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 11px 16px;
  color: inherit;
  text-decoration: none;
}

.overview-row + .overview-row {
  border-top: 1px solid #f2f2f5;
}

.overview-row:hover {
  background: #fcfcfd;
}

.overview-row.is-today {
  border-color: #f0d383;
  background: #fffaf0;
}

.overview-row.is-rest {
  background: #f8fbf9;
}

.overview-row.is-missing {
  border-style: dashed;
  color: #777684;
}

.overview-date-tile {
  display: grid;
  width: 42px;
  height: 44px;
  place-items: center;
  align-content: center;
  gap: 1px;
  border-radius: 9px;
  background: #f0f0f5;
  color: #111116;
}

.overview-date-tile small,
.overview-date-tile strong {
  line-height: 1;
}

.overview-date-tile small {
  color: #777684;
  font-size: 9px;
  font-weight: 700;
}

.overview-date-tile strong {
  font-size: 16px;
}

.overview-icon-tile [data-lucide] {
  width: 18px;
  height: 18px;
}

.overview-row.tone-warning .overview-icon-tile {
  background: #fff3d7;
  color: #9a6511;
}

.overview-row.tone-info .overview-icon-tile {
  background: #edf5ff;
  color: #28658c;
}

.overview-row.tone-success .overview-icon-tile {
  background: #edf8f1;
  color: #2d7a57;
}

.overview-row-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.overview-row-main strong,
.overview-row-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-row-main strong {
  color: #171720;
  font-size: 12px;
  line-height: 1.25;
}

.overview-row-main span {
  color: #75737f;
  font-size: 10px;
}

.overview-row-badge {
  display: inline-flex;
  max-width: 128px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f2f2f6;
  color: #62616f;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-row.tone-handling .overview-row-badge,
.overview-row.tone-warning .overview-row-badge {
  background: #fff3d7;
  color: #9a6511;
}

.overview-row.tone-processing .overview-row-badge,
.overview-row.tone-info .overview-row-badge {
  background: #edf5ff;
  color: #28658c;
}

.overview-row.tone-success .overview-row-badge {
  background: #edf8f1;
  color: #2d7a57;
}

.overview-empty {
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: 10px;
  border: 1px dashed #d9d9e2;
  border-radius: 10px;
  background: #fbfbfd;
  padding: 13px;
}

.overview-empty > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #f0f0f5;
  color: #777684;
}

.overview-empty p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.overview-empty strong {
  color: #171720;
  font-size: 12px;
}

.overview-empty small {
  color: #777684;
  font-size: 11px;
}

/* Home */
.daily-activity {
  display: block;
  min-height: 0;
  margin-bottom: 16px;
  border-color: var(--line);
  border-radius: 14px;
  background: white;
  color: var(--ink);
  padding: 18px;
}

.daily-activity-loading {
  display: flex;
  min-height: 132px;
  color: var(--muted);
}

.daily-activity-loading .spinner {
  border-color: var(--line);
  border-top-color: var(--accent);
}

.daily-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 9px;
}

.daily-activity-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: #f0f0f5;
  padding: 13px 14px;
}

.daily-activity-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #111116;
}

.daily-activity-copy {
  display: block;
  padding: 0;
}

.daily-activity h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.daily-activity p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.daily-activity .daily-activity-detail {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: #4f5260;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  opacity: 1;
}

.daily-activity-detail svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.home-clock-button {
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  background: #111116;
  color: white;
}

.daily-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: var(--accent-strong);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
}

.daily-detail-link [data-lucide] {
  width: 12px;
  height: 12px;
}

.control-focus {
  min-height: 112px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  padding: 18px;
}

.control-focus > div:first-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 14px;
  padding: 0;
}

.control-icon,
.portal-metric-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.control-focus h2 {
  margin: 2px 0;
  font-size: 15px;
}

.control-focus p {
  color: var(--muted);
  font-size: 11px;
}

.control-focus-action {
  display: grid;
  min-width: 142px;
  grid-template-columns: auto 1fr 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
}

.control-focus-action strong {
  font-size: 18px;
  line-height: 1;
}

.control-focus-action span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.control-focus-action [data-lucide] {
  width: 13px;
  height: 13px;
  color: var(--accent-strong);
}

.portal-metric {
  min-height: 142px;
  border-radius: 10px;
  padding: 16px;
}

.portal-metric::before {
  display: none;
}

.portal-metric-icon {
  margin-bottom: 13px;
}

.portal-metric .surface-value.compact {
  margin: 4px 0 2px;
  font-size: 18px;
}

.portal-link-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-strong);
}

.portal-link-label [data-lucide] {
  width: 11px;
  height: 11px;
}

.portal-section {
  margin-top: 22px;
}

.section-heading {
  margin: 24px 0 10px;
}

.section-heading h2,
.section-heading > div h2 {
  font-size: 14px;
}

.task-preview-row {
  min-height: 62px;
}

.task-domain-mark,
.journey-mark {
  border-radius: 8px;
  background: #f0f0f5;
  color: #555461;
}

.journey-item {
  min-height: 78px;
  border-radius: 10px;
}

/* My Work */
.my-work-summary {
  display: grid;
  max-width: 1060px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.my-work-summary > div {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-right: 1px solid var(--line);
  padding: 10px 16px;
}

.my-work-summary > div:first-child {
  padding-left: 0;
}

.my-work-summary > div:last-child {
  border-right: 0;
}

.my-work-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.my-work-summary strong {
  font-size: 18px;
}

.my-work-summary .is-urgent strong {
  color: var(--coral);
}

.my-work-toolbar {
  justify-content: flex-start;
  max-width: 1060px;
  margin-bottom: 16px;
}

.my-work-search {
  position: relative;
  display: flex;
  min-width: 240px;
  max-width: 580px;
  flex: 1;
  align-items: center;
}

.my-work-search > [data-lucide] {
  position: absolute;
  left: 14px;
  z-index: 1;
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.my-work-search input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: white;
  padding: 0 14px 0 38px;
}

.my-work-search input:focus {
  border-color: #b47a18;
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.12);
}

.segmented-control {
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
}

.segmented-control button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  padding: 0 12px;
  font-weight: 500;
}

.segmented-control button.active {
  border-color: #111116;
  background: #111116;
  color: white;
  box-shadow: none;
}

.segmented-control button strong {
  display: none;
}

.my-work-reload {
  background: white;
}

.task-list {
  max-width: 1060px;
  gap: 10px;
}

.task-card {
  border-radius: 12px;
  padding: 16px 18px;
}

.task-card-technical {
  border-left-width: 1px;
}

.task-card > header {
  align-items: center;
}

.task-card-head code {
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.task-age {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

.task-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-card > h2 {
  margin: 12px 0 2px;
  font-size: 14px;
  letter-spacing: 0;
}

.task-required-action {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.task-context-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.task-context-grid > div {
  min-width: 0;
  background: var(--surface-muted);
  padding: 10px 12px;
}

.task-context-grid span,
.task-context-grid strong {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.task-context-grid span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
}

.task-context-grid strong {
  overflow-wrap: anywhere;
  font-size: 10px;
}

.task-context-grid [data-lucide] {
  width: 10px;
  height: 10px;
}

.task-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  background: transparent;
}

.task-facts > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  text-transform: none;
}

.task-facts [data-lucide] {
  width: 11px;
  height: 11px;
}

.task-card > footer {
  align-items: flex-end;
  margin-top: 12px;
  padding-top: 10px;
}

.task-card > footer span {
  font-size: 8px;
}

.task-next-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-strong);
  text-decoration: none;
  font-size: 10px;
  font-weight: 650;
}

.task-next-link [data-lucide] {
  width: 12px;
  height: 12px;
}

.authorization-reference {
  margin-top: 8px;
  font-size: 9px;
}

.authorization-reference summary {
  width: max-content;
  color: var(--muted);
  cursor: pointer;
}

.authorization-reference dl {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.authorization-reference dl > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
}

.authorization-reference dt {
  color: var(--muted);
}

.authorization-reference dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font-family: "JetBrains Mono", Consolas, monospace;
}

.badge-danger {
  border-color: #f0c9c7;
  background: var(--coral-soft);
  color: #a53e38;
}

/* resources/css/features/workforce/schedule.css */
/* Schedule */
.schedule-toolbar {
  min-height: 48px;
  margin-bottom: 12px;
  border: 0;
  padding: 0;
}

.schedule-open-control summary,
.leave-create-panel > summary {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: #111116;
  color: white;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 650;
}

.schedule-status-band {
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: 10px;
}

.schedule-status-band > div {
  padding: 11px 13px;
}

.schedule-status-band span {
  font-size: 8px;
}

.schedule-status-band strong {
  font-size: 11px;
}

.schedule-action-bar {
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.schedule-editor {
  border-radius: 10px;
  background: white;
}

.schedule-board {
  overflow: auto;
  border-radius: 12px;
}

.schedule-grid-header {
  min-height: 42px;
  background: #fafafd;
}

.schedule-grid-header > span {
  border-left: 0;
  color: var(--muted);
  font-size: 9px;
}

.schedule-grid-row {
  min-height: 54px;
}

.schedule-person,
.schedule-cell {
  min-height: 54px;
}

.schedule-cell {
  border-left: 0;
}

.schedule-cell.filled {
  background: white;
}

.schedule-cell.filled strong {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  border-radius: 999px;
  background: #f2f2ff;
  color: #5762ad;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 550;
}

.schedule-cell span {
  font-size: 8px;
}

.fixed-schedule-band {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #d9eadf;
  border-radius: 10px;
  background: #f6fbf8;
  padding: 20px;
}

.fixed-schedule-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  background: #e4f3e9;
  color: #2f7a4b;
}

.fixed-schedule-icon svg {
  width: 20px;
  height: 20px;
}

.fixed-schedule-band span,
.fixed-schedule-band h2,
.fixed-schedule-band p,
.personal-schedule-heading span,
.personal-schedule-heading h2,
.personal-schedule-heading p {
  margin: 0;
}

.fixed-schedule-band > div:nth-child(2) > span,
.personal-schedule-heading span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.fixed-schedule-band h2,
.personal-schedule-heading h2 {
  margin-top: 3px;
  font-size: 16px;
}

.fixed-schedule-band p,
.personal-schedule-heading p,
.personal-schedule-footer span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.personal-schedule-editor {
  padding: 18px;
}

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

.personal-schedule-heading p {
  max-width: 390px;
  text-align: right;
}

.personal-schedule-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 8px;
}

.personal-day-field {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.personal-day-field > span,
.personal-day-field strong,
.personal-day-field small {
  display: block;
}

.personal-day-field strong {
  font-size: 11px;
}

.personal-day-field small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.personal-day-field select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: white;
  padding: 0 8px;
  font: inherit;
  font-size: 10px;
}

.personal-day-field select:focus {
  outline: 2px solid #767ce8;
  outline-offset: 1px;
}

.personal-schedule-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.shift-schedule-section {
  display: grid;
  gap: 12px;
}

.shift-schedule-heading,
.date-slot-picker-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.shift-schedule-heading span,
.date-slot-picker-heading span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.shift-schedule-heading h2,
.date-slot-picker-heading h3,
.shift-schedule-heading p,
.date-slot-picker-heading p {
  margin: 0;
}

.shift-schedule-heading h2,
.date-slot-picker-heading h3 {
  margin-top: 3px;
  font-size: 16px;
}

.shift-schedule-heading p,
.date-slot-picker-heading p {
  max-width: 470px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}

.shift-first-board {
  border-color: #dfe1e6;
  border-radius: 8px;
  background: #ffffff;
}

.schedule-desktop-workspace {
  display: grid;
  gap: 12px;
}

.mobile-schedule-workspace {
  display: none;
}

.shift-top-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.shift-top-item {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #e1e3e8;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.shift-top-item > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #e0e2e7;
  border-radius: 8px;
  background: #f2f3f5;
  color: #555861;
}

.shift-top-item svg {
  width: 16px;
  height: 16px;
}

.shift-top-item strong,
.shift-top-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shift-top-item strong {
  color: #25252b;
  font-size: 11px;
}

.shift-top-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.shift-top-item.rest-row {
  border-color: #efcece;
  background: #fff7f7;
}

.shift-top-item.rest-row > span {
  border-color: #efcece;
  background: #f9dede;
  color: #b64242;
}

.shift-top-item.rest-row strong {
  color: #a83c3c;
}

.personal-mobile-schedule {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.personal-mobile-schedule-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 0 1px 10px;
}

.personal-mobile-schedule-heading span,
.personal-mobile-schedule-heading strong {
  display: block;
}

.personal-mobile-schedule-heading span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.personal-mobile-schedule-heading strong {
  color: #292930;
  font-size: 12px;
}

.personal-mobile-schedule-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.personal-mobile-schedule-day {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid #e1e1e6;
  border-radius: 8px;
  background: #ffffff;
  color: #292930;
  padding: 9px 11px;
  font: inherit;
  text-align: left;
}

button.personal-mobile-schedule-day {
  cursor: pointer;
}

button.personal-mobile-schedule-day:hover {
  border-color: #c9c9d1;
  background: #f7f7fa;
}

button.personal-mobile-schedule-day:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #5963d6;
  outline-offset: 2px;
}

.personal-mobile-date-tile {
  display: grid;
  width: 42px;
  height: 46px;
  place-items: center;
  align-content: center;
  border-radius: 7px;
  background: #f1f1f5;
  color: #555861;
}

.personal-mobile-date-tile small,
.personal-mobile-date-tile strong {
  display: block;
}

.personal-mobile-date-tile small {
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
}

.personal-mobile-date-tile strong {
  margin-top: 1px;
  font-size: 15px;
}

.personal-mobile-date-copy {
  display: block;
  min-width: 0;
}

.personal-mobile-date-copy > strong,
.personal-mobile-date-copy > span {
  display: flex;
  min-width: 0;
  align-items: center;
}

.personal-mobile-date-copy > strong {
  overflow: hidden;
  color: #292930;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-mobile-date-copy > span {
  gap: 5px;
  margin-top: 5px;
  color: #62636c;
  font-size: 9px;
  line-height: 1.35;
}

.personal-mobile-date-copy svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.personal-mobile-date-action {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #5a5fca;
}

.personal-mobile-date-action small {
  font-size: 8px;
  font-weight: 750;
}

.personal-mobile-date-action svg {
  width: 15px;
  height: 15px;
}

.personal-mobile-schedule-day.tone-selected .personal-mobile-date-tile {
  background: #e8f3ec;
  color: #267554;
}

.personal-mobile-schedule-day.tone-rest {
  border-color: #efd0d0;
  background: #fff8f8;
}

.personal-mobile-schedule-day.tone-rest .personal-mobile-date-tile {
  background: #f8dfdf;
  color: #aa3f3f;
}

.personal-mobile-schedule-day.tone-rest .personal-mobile-date-copy > span {
  color: #a04343;
}

.personal-mobile-schedule-day.tone-leave {
  border-color: #d8def1;
  background: #f7f8fc;
}

.personal-mobile-schedule-day.tone-leave .personal-mobile-date-tile {
  background: #e2e7f7;
  color: #5267b9;
}

.personal-mobile-schedule-day.tone-leave .personal-mobile-date-action,
.personal-mobile-schedule-day.tone-leave .personal-mobile-date-copy > span {
  color: #5267b9;
}

.personal-mobile-schedule-day.tone-missing {
  border-color: #eee0b6;
  background: #fffbef;
}

.personal-mobile-schedule-day.tone-missing .personal-mobile-date-tile {
  background: #f8e9bd;
  color: #8b620e;
}

.personal-mobile-schedule-day.tone-missing .personal-mobile-date-action,
.personal-mobile-schedule-day.tone-missing .personal-mobile-date-copy > span {
  color: #8b620e;
}

.shift-first-grid {
  display: grid;
  min-width: 890px;
  grid-template-columns: repeat(7, minmax(127px, 1fr));
}

.shift-first-corner,
.shift-date-label,
.shift-date-button {
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid #d7dae0;
  background: #fafafb;
}

.shift-first-corner {
  position: sticky;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  border-right: 1px solid #d7dae0;
  background: #f5f6f8;
  padding: 0 20px;
  color: #4a4d56;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 6px 0 12px rgba(35, 38, 46, 0.035);
}

.shift-date-label,
.shift-date-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid #d9dce2;
  color: #303038;
  font: inherit;
}

.shift-date-label strong,
.shift-date-button strong {
  font-size: 12px;
}

.shift-date-label small,
.shift-date-button small {
  color: var(--muted);
  font-size: 10px;
}

.shift-date-label.editable {
  min-height: 84px;
  gap: 4px;
  padding: 8px 6px;
}

.shift-date-adjust {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 3px;
  border: 1px solid #d9d9df;
  border-radius: 6px;
  cursor: pointer;
  background: #ffffff;
  color: #4f5360;
  padding: 0 7px;
  font: inherit;
  font-size: 8px;
  font-weight: 700;
}

.shift-date-adjust svg {
  width: 11px;
  height: 11px;
}

.shift-date-adjust:hover {
  border-color: #777fd4;
  background: #f4f4fc;
  color: #474fb0;
}

.shift-date-adjust:focus-visible {
  outline: 2px solid #5963d6;
  outline-offset: 2px;
}

.shift-date-label.today {
  border-left-color: #ddb962;
  border-right: 1px solid #ddb962;
  background: #fff9eb;
  box-shadow: inset 0 3px #d49d2d;
}

.shift-date-label.today strong { color: #76550d; }
.shift-date-today {
  display: inline-flex;
  min-height: 16px;
  align-items: center;
  border-radius: 4px;
  background: #f2d892;
  padding: 0 5px;
  color: #684b0c;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.shift-date-leave {
  display: inline-flex;
  min-height: 17px;
  align-items: center;
  gap: 3px;
  border: 1px solid #cfd8f4;
  border-radius: 999px;
  background: #f0f3ff;
  color: #5267b9;
  padding: 1px 5px;
  font-size: 7px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.shift-date-leave svg {
  width: 9px;
  height: 9px;
}

.shift-date-label.approved-leave {
  background: #f6f7fb;
}

.shift-date-label.swap-ready .shift-date-adjust:hover {
  border-color: #34363e;
  background: #34363e;
  color: #fff;
}

.shift-date-button {
  cursor: pointer;
}

.shift-date-button:hover {
  background: #f1f2f7;
}

.shift-date-button.selected {
  background: #ededfb;
  box-shadow: inset 0 -3px #6069d8;
  color: #3f49b3;
}

.shift-date-button:focus-visible,
.date-slot-option:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #5963d6;
  outline-offset: -3px;
}

.shift-row-label,
.shift-slot-cell {
  min-height: 76px;
  border-bottom: 1px solid #e7e8ec;
}

.shift-row-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid #d9dce2;
  padding: 12px 18px;
  background: #ffffff;
  box-shadow: 6px 0 12px rgba(35, 38, 46, 0.03);
}

.shift-row-label > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 7px;
  border: 1px solid #e0e2e7;
  background: #f0f1f4;
  color: #4d5059;
}

.shift-row-label svg {
  width: 15px;
  height: 15px;
}

.shift-row-label strong,
.shift-row-label small {
  display: block;
}

.shift-row-label.rest-row {
  border-bottom-color: #efcece;
  border-right-color: #e9c5c5;
  background: #fff0f0;
}

.shift-row-label.rest-row > span {
  background: #f9dede;
  color: #b64242;
}

.shift-row-label.rest-row strong {
  color: #a83c3c;
}

.shift-row-label strong {
  color: #25252b;
  font-size: 11px;
}

.shift-row-label small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.shift-slot-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  border-left: 1px solid #eceef1;
  padding: 8px;
  text-align: center;
}

.shift-slot-cell:nth-last-child(-n + 7) {
  border-bottom-width: 0;
}

.shift-slot-cell.available {
  background: #fcfcfd;
  color: #9b9ba4;
  font-size: 9px;
}

.shift-slot-cell.leave-blocked {
  background: #f4f5f7;
  color: #8a8e98;
}

.shift-slot-cell.leave-blocked > svg {
  width: 17px;
  height: 17px;
}

.shift-slot-cell.leave-blocked .shift-cell-slot-label {
  background: #e7e9ed;
  color: #767b85;
}

.shift-cell-slot-label {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border-radius: 999px;
  background: #f1f2f5;
  color: #6d717b;
  padding: 2px 7px;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.shift-slot-cell.occupied {
  background: #ffffff;
}

.shift-slot-cell.occupied.own {
  background: #f1f8f4;
  box-shadow: inset 0 0 0 1px #abd2bb;
}

.shift-slot-cell strong,
.shift-slot-cell span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shift-slot-cell strong {
  color: #2d2d34;
  font-size: 10px;
}

.shift-slot-cell.own strong,
.shift-slot-cell.own span {
  color: #267554;
}

.shift-slot-cell span {
  font-size: 8px;
}

.shift-slot-cell.rest-slot {
  border-bottom-color: #efcece;
  border-left-color: #f1d6d6;
  background: #fff7f7;
}

.shift-slot-cell.rest-slot.occupied {
  background: #fdecec;
}

.shift-slot-cell.rest-slot.occupied.own {
  background: #fae7e7;
  box-shadow: inset 0 0 0 1px #dc9292;
}

.shift-slot-cell.rest-slot.leave-occupied,
.shift-slot-cell.rest-slot.leave-occupied.own {
  background: #f1f3fb;
  box-shadow: inset 0 0 0 1px #c8d1ef;
}

.shift-slot-cell.rest-slot.leave-occupied .shift-cell-slot-label {
  background: #dfe5f7;
  color: #4f62ad;
}

.shift-slot-cell.rest-slot.leave-occupied strong,
.shift-slot-cell.rest-slot.leave-occupied span {
  color: #4f5f91;
}

.shift-slot-cell.today {
  border-left-color: #ddb962;
  border-right: 1px solid #ddb962;
  box-shadow: inset 2px 0 rgba(212, 157, 45, 0.38), inset -2px 0 rgba(212, 157, 45, 0.38);
}

.shift-slot-cell.today.occupied.own {
  box-shadow: inset 2px 0 rgba(212, 157, 45, 0.45), inset -2px 0 rgba(212, 157, 45, 0.45), inset 0 0 0 1px #abd2bb;
}

.mobile-schedule-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid #e0e2e7;
  border-radius: 8px;
  background: #f2f3f5;
  padding: 3px;
}

.mobile-schedule-mode button {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: #696b73;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
}

.mobile-schedule-mode button.active {
  background: #ffffff;
  color: #25262c;
  box-shadow: 0 1px 4px rgba(35, 38, 46, 0.1);
}

.mobile-schedule-mode button:focus-visible {
  outline: 2px solid #4d5562;
  outline-offset: 1px;
}

.mobile-schedule-mode svg {
  width: 15px;
  height: 15px;
}

.mobile-team-schedule {
  display: grid;
  gap: 12px;
}

.mobile-team-date-selector {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.mobile-team-date-selector button {
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid #e0e2e7;
  border-radius: 7px;
  cursor: pointer;
  background: #ffffff;
  color: #676a73;
  font: inherit;
}

.mobile-team-date-selector button.active {
  border-color: #34363e;
  background: #34363e;
  color: #ffffff;
}

.mobile-team-date-selector button:focus-visible {
  outline: 2px solid #34363e;
  outline-offset: 2px;
}

.mobile-team-date-selector small {
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
}

.mobile-team-date-selector strong {
  font-size: 12px;
}

.mobile-team-date-selector button.today {
  border-color: #d7ad4f;
  box-shadow: inset 0 0 0 1px #d7ad4f;
}

.mobile-team-date-selector button.today i {
  color: #8a6514;
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.mobile-team-date-selector button.today.active i { color: #f5dda1; }
.mobile-team-date-selector button.has-approved-leave {
  min-height: 59px;
}

.mobile-team-date-selector .mobile-team-leave-count {
  display: block;
  border-radius: 999px;
  background: #e9edfb;
  color: #5267b9;
  padding: 1px 4px;
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.mobile-team-date-selector button.active .mobile-team-leave-count {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.personal-mobile-date-tile.today { box-shadow: inset 0 0 0 2px #d7ad4f; }
.personal-mobile-date-tile.today i { color: #8a6514; font-size: 6px; font-style: normal; font-weight: 800; text-transform: uppercase; }

.mobile-team-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 1px 0;
}

.mobile-team-heading span,
.mobile-team-heading strong,
.mobile-team-heading small {
  display: block;
}

.mobile-team-heading span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.mobile-team-heading strong {
  margin-top: 2px;
  font-size: 12px;
}

.mobile-team-heading > small {
  color: var(--muted);
  font-size: 9px;
}

.mobile-team-shift-list {
  overflow: hidden;
  border: 1px solid #e0e2e7;
  border-radius: 8px;
  background: #ffffff;
}

.mobile-team-shift-row {
  display: grid;
  min-width: 0;
  min-height: 66px;
  grid-template-columns: 34px minmax(68px, 0.62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e9eaed;
  padding: 9px 11px;
}

.mobile-team-shift-row:last-child {
  border-bottom: 0;
}

.mobile-team-shift-row.rest {
  background: #fff7f7;
}

.mobile-team-shift-row.own {
  background: #f2f8f4;
}

.mobile-team-shift-row.rest.own {
  background: #fae8e8;
}

.mobile-team-shift-row.leave-occupied,
.mobile-team-shift-row.leave-occupied.own {
  background: #f2f4fb;
}

.mobile-team-shift-row.leave-occupied .mobile-team-shift-icon {
  background: #e1e6f7;
  color: #5267b9;
}

.mobile-team-shift-row.leave-blocked {
  background: #f5f6f7;
  color: #858993;
}

.mobile-team-shift-row.leave-blocked .mobile-team-shift-icon {
  background: #e8eaed;
  color: #7b8089;
}

.mobile-team-shift-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #f0f1f4;
  color: #555862;
}

.mobile-team-shift-row.rest .mobile-team-shift-icon {
  background: #f8dddd;
  color: #ab4040;
}

.mobile-team-shift-icon svg {
  width: 16px;
  height: 16px;
}

.mobile-team-shift-copy,
.mobile-team-shift-copy strong,
.mobile-team-shift-copy small {
  display: block;
  min-width: 0;
}

.mobile-team-shift-copy strong {
  font-size: 10px;
}

.mobile-team-shift-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.mobile-team-assignee {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.mobile-team-assignee > i,
.mobile-team-assignee > svg {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #dfe1e6;
  border-radius: 50%;
  background: #ffffff;
  color: #5e616a;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.mobile-team-shift-row.own .mobile-team-assignee > i {
  border-color: #2e7a57;
  background: #2e7a57;
  color: #ffffff;
}

.mobile-team-assignee > span,
.mobile-team-assignee strong,
.mobile-team-assignee small {
  display: block;
  min-width: 0;
}

.mobile-team-assignee strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-team-assignee small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.mobile-team-assignee small svg {
  width: 10px;
  height: 10px;
  vertical-align: -2px;
}

.mobile-team-assignee.empty {
  color: #92949b;
}

.mobile-team-adjust {
  display: inline-flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: #292a30;
  background: #292a30;
  color: #ffffff;
}

.mobile-team-adjust svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 820px) {
  .schedule-desktop-workspace {
    display: none;
  }

  .mobile-schedule-workspace {
    display: grid;
    gap: 12px;
  }

  .shift-schedule-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .shift-schedule-heading p {
    max-width: none;
    text-align: left;
  }
}

.shift-employee-chip {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  text-align: left;
}

.shift-employee-avatar {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #dedee4;
  border-radius: 50%;
  background: #ffffff;
  color: #555861;
  font-size: 7px !important;
  font-weight: 800;
}

.shift-slot-cell.own .shift-employee-avatar {
  border-color: #8fc3a3;
  background: #267554;
  color: #ffffff;
}

.shift-slot-cell.rest-slot .shift-employee-avatar {
  border-color: #e0a0a0;
  background: #ffffff;
  color: #ac4141;
}

.shift-slot-cell.rest-slot.own .shift-employee-avatar {
  background: #b84545;
  color: #ffffff;
}

.shift-employee-copy {
  display: block;
  min-width: 0;
}

.shift-own-marker,
.shift-filled-marker {
  display: flex !important;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
}

.shift-own-marker svg,
.shift-filled-marker svg {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

.shift-filled-marker {
  color: #777983;
}

.date-slot-picker {
  display: grid;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 17px;
}

.date-slot-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.date-slot-option {
  display: grid;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  background: #ffffff;
  padding: 10px;
  color: #25252b;
  font: inherit;
  text-align: left;
}

.date-slot-option:hover:not(:disabled) {
  border-color: #7a81db;
  background: #f8f8fe;
}

.date-slot-option.selected {
  border-color: #acd8bd;
  background: #eef8f2;
}

.date-slot-option:disabled:not(.selected) {
  cursor: not-allowed;
  background: #f5f5f7;
  color: #85858d;
  opacity: 0.78;
}

.date-slot-option-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 7px;
  background: #f0f0f4;
}

.date-slot-option-icon svg {
  width: 16px;
  height: 16px;
}

.date-slot-option strong,
.date-slot-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-slot-option strong {
  font-size: 11px;
}

.date-slot-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.date-slot-option-state {
  color: #5963c9;
  font-size: 9px;
  font-weight: 750;
}

.date-slot-option-state svg {
  width: 16px;
  height: 16px;
  color: #267554;
}

.date-slot-option.rest-option {
  border-color: #ecc7c7;
  background: #fff8f8;
}

.date-slot-option.rest-option .date-slot-option-icon {
  background: #f9e2e2;
  color: #ad4141;
}

.date-slot-option.rest-option.selected {
  border-color: #da8585;
  background: #fbe5e5;
}

.schedule-date-dialog {
  width: min(570px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 24px 72px rgba(18, 18, 24, 0.28);
  color: var(--text);
}

.schedule-date-dialog::backdrop {
  background: rgba(18, 18, 24, 0.54);
  backdrop-filter: blur(2px);
}

.schedule-date-dialog-shell {
  display: flex;
  max-height: calc(100dvh - 24px);
  flex-direction: column;
}

.schedule-date-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 20px 22px 17px;
}

.schedule-date-dialog-header span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.schedule-date-dialog-header h2,
.schedule-date-dialog-header p {
  margin: 0;
}

.schedule-date-dialog-header h2 {
  margin-top: 3px;
  font-size: 18px;
}

.schedule-date-dialog-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.schedule-date-dialog-close {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: #f1f1f5;
  color: #62636c;
}

.schedule-date-dialog-close svg {
  width: 17px;
  height: 17px;
}

.schedule-date-dialog-body {
  overflow-y: auto;
  padding: 18px 22px;
}

.team-date-dialog {
  width: min(620px, calc(100vw - 32px));
}

.team-date-employee-list {
  display: grid;
  gap: 9px;
}

.team-date-employee-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(190px, 0.72fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #e2e5eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.team-date-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: #eef1f4;
  color: #525b66;
  font-size: 11px;
  font-weight: 900;
}

.team-date-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.team-date-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-date-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-date-employee-row select {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.team-date-employee-row.approved-leave {
  border-color: #d5dcf1;
  background: #f5f7fc;
}

.team-date-employee-row.approved-leave .team-date-copy small {
  color: #5368b5;
}

.team-date-employee-row.approved-leave select {
  border-color: #d7dced;
  background: #eceff8;
  color: #58668f;
  opacity: 1;
}

.schedule-date-dialog .date-slot-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-date-dialog-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.schedule-date-dialog-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 13px 22px 16px;
}

.schedule-period-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 24px 72px rgba(18, 18, 24, 0.28);
  color: var(--text);
}

.schedule-period-dialog::backdrop {
  background: rgba(18, 18, 24, 0.54);
  backdrop-filter: blur(2px);
}

.schedule-period-dialog-shell {
  display: flex;
  max-height: calc(100dvh - 24px);
  flex-direction: column;
}

.schedule-period-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 20px 22px 17px;
}

.schedule-period-dialog-header span,
.schedule-period-dialog-header h2,
.schedule-period-dialog-header p {
  display: block;
  margin: 0;
}

.schedule-period-dialog-header span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.schedule-period-dialog-header h2 {
  margin-top: 3px;
  font-size: 18px;
}

.schedule-period-dialog-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.schedule-period-dialog-body {
  overflow-y: auto;
  padding: 16px 22px 20px;
}

.schedule-period-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid #dcdce2;
  border-radius: 7px;
  background: #fafafd;
  padding: 0 11px;
  color: #6b6d76;
}

.schedule-period-search:focus-within {
  border-color: #666ed0;
  box-shadow: 0 0 0 3px rgba(89, 99, 214, 0.14);
}

.schedule-period-search svg {
  width: 16px;
  height: 16px;
}

.schedule-period-search input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #292930;
  font: inherit;
  font-size: 11px;
}

.schedule-period-options {
  display: grid;
  gap: 7px;
  margin-top: 0;
}

.schedule-period-option {
  display: grid;
  min-width: 0;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e1e1e6;
  border-radius: 7px;
  cursor: pointer;
  background: #ffffff;
  color: #292930;
  padding: 10px 11px;
  font: inherit;
  text-align: left;
}

.schedule-period-option[hidden],
.schedule-period-no-results[hidden] {
  display: none;
}

.schedule-period-option:hover {
  border-color: #c8c9d2;
  background: #f8f8fb;
}

.schedule-period-option.selected {
  border-color: #34353d;
  background: #f5f5f7;
  box-shadow: inset 0 0 0 1px #34353d;
}

.schedule-period-option.current {
  border-color: #b9d9cb;
  background: #f1f8f5;
}

.schedule-period-option.current.selected {
  border-color: #287453;
  box-shadow: inset 0 0 0 1px #287453;
}

.schedule-period-option.current .schedule-period-option-icon {
  background: #dcefe6;
  color: #287453;
}

.schedule-period-option:focus-visible {
  outline: 2px solid #5963d6;
  outline-offset: 2px;
}

.schedule-period-option-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: #f1f1f5;
  color: #5d606b;
}

.schedule-period-option-icon svg {
  width: 17px;
  height: 17px;
}

.schedule-period-option > span:nth-child(2) {
  display: block;
  min-width: 0;
}

.schedule-period-option strong,
.schedule-period-option small {
  display: block;
}

.schedule-period-option strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-period-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.schedule-period-no-results {
  margin: 18px 0 4px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.schedule-date-dialog [hidden] {
  display: none !important;
}

.schedule-release-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: #e6bebe;
  background: #fff8f8;
  color: #a63f3f;
}

.schedule-release-trigger:hover {
  border-color: #d99a9a;
  background: #fcecec;
}

.schedule-release-trigger svg {
  width: 16px;
  height: 16px;
}

.schedule-release-confirmation {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 30px 28px 26px;
  text-align: center;
}

.schedule-release-confirmation-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: #f9e4e4;
  color: #a64040;
}

.schedule-release-confirmation-icon svg {
  width: 22px;
  height: 22px;
}

.schedule-release-confirmation h3,
.schedule-release-confirmation p {
  margin: 0;
}

.schedule-release-confirmation h3 {
  font-size: 17px;
}

.schedule-release-confirmation p {
  max-width: 410px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.schedule-release-confirmation-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  width: 100%;
}

.employee-rest-quota.is-global {
  align-items: start;
}

.employee-rest-quota.is-global .employee-rest-quota-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.employee-rest-quota.is-global .employee-rest-quota-facts > span > em {
  min-width: 0;
  grid-column: 2;
  grid-row: 3;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-rest-quota.is-global .employee-rest-quota-facts > span > small {
  grid-column: 2;
  grid-row: 1;
}

.employee-rest-quota.is-global .employee-rest-quota-facts > span > strong {
  grid-column: 2;
  grid-row: 2;
}

.employee-rest-fact-compact {
  display: none;
}

.employee-rest-summary {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.employee-rest-summary header span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.employee-rest-history {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  gap: 9px;
  border: 1px solid #e3e5e9;
  border-radius: 7px;
  background: #fff;
  padding: 12px;
}

.employee-rest-history header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.employee-rest-history header span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.employee-rest-history header strong {
  color: #343740;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.employee-rest-history-list {
  display: grid;
  gap: 7px;
}

.employee-rest-history-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #eceef1;
  border-radius: 7px;
  background: #fbfbfc;
  padding: 8px 9px;
}

.employee-rest-history-row > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 6px;
  background: #edf1ee;
  color: #4d6457;
}

.employee-rest-history-row.tone-scheduled > span {
  background: #eef2ff;
  color: #536bd0;
}

.employee-rest-history-row svg {
  width: 14px;
  height: 14px;
}

.employee-rest-history-row div,
.employee-rest-history-row strong,
.employee-rest-history-row small {
  display: block;
  min-width: 0;
}

.employee-rest-history-row strong {
  overflow: hidden;
  color: #2e3139;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-rest-history-row small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-rest-history-row em {
  border-radius: 999px;
  background: #e8f4ed;
  color: #2f704f;
  padding: 4px 7px;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.employee-rest-history-row.tone-scheduled em {
  background: #eef2ff;
  color: #536bd0;
}

.employee-rest-history-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed #d7dadf;
  border-radius: 7px;
  background: #fafbfa;
  padding: 10px;
  color: var(--muted);
  font-size: 10px;
}

.employee-rest-history-empty svg {
  width: 15px;
  height: 15px;
}

.employee-rest-history-more {
  color: var(--muted);
  font-size: 9px;
}

.employee-rest-pagination {
  margin-top: 2px;
}

.schedule-swap-workspace {
  margin-top: 18px;
  border-top: 1px solid #e1e2e6;
  border-bottom: 1px solid #e1e2e6;
  background: #fff;
  padding: 18px 22px;
}

.schedule-swap-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.schedule-swap-heading-icon,
.schedule-swap-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 7px;
  background: #eef1ef;
  color: #47514c;
}

.schedule-swap-heading-icon {
  width: 48px;
  height: 48px;
  background: #eaf0fb;
  color: #4f67aa;
}

.schedule-swap-heading-icon svg { width: 21px; height: 21px; }
.schedule-swap-card-icon svg { width: 19px; height: 19px; }
.schedule-swap-heading-copy { display: block; min-width: 0; }
.schedule-swap-heading-copy > span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.schedule-swap-heading-copy h2 { display: flex; align-items: baseline; gap: 7px; margin: 2px 0 0; line-height: 1; }
.schedule-swap-heading-copy h2 b { font-size: 30px; }
.schedule-swap-heading-copy h2 em { font-size: 13px; font-style: normal; font-weight: 750; }
.schedule-swap-heading-copy p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.schedule-swap-start { min-height: 42px; padding: 0 14px; white-space: nowrap; }
.schedule-swap-start svg { width: 16px; height: 16px; }
.schedule-swap-count { border-radius: 5px; background: #fff3cf; padding: 7px 9px; color: #7b5a0e; font-size: 9px; font-weight: 800; }
.schedule-swap-list { display: grid; gap: 8px; margin-top: 14px; }
.schedule-swap-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  border: 1px solid #e1e2e6;
  border-radius: 7px;
  background: #fff;
  padding: 10px 11px;
}

.schedule-swap-card.actionable { border-color: #c7d3ec; background: #fbfcff; }
.schedule-swap-card .schedule-swap-card-icon { width: 38px; height: 38px; }
.schedule-swap-card.tone-warning .schedule-swap-card-icon { background: #fff3cf; color: #8a6514; }
.schedule-swap-card.tone-info .schedule-swap-card-icon { background: #eaf0fb; color: #5067ad; }
.schedule-swap-card.tone-success .schedule-swap-card-icon { background: #e5f2e9; color: #327453; }
.schedule-swap-card.tone-danger {
  border-color: #f0cac6;
  background: #fffafa;
}
.schedule-swap-card.tone-danger .schedule-swap-card-icon { background: #fdeceb; color: #b54841; }
.schedule-swap-card-main { display: grid; min-width: 0; gap: 2px; }
.schedule-swap-card-kicker { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.schedule-swap-card-main strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-swap-card-main small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-swap-status { border-radius: 5px; padding: 6px 8px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.schedule-swap-status.badge-warning { background: #fff3cf; color: #76550d; }
.schedule-swap-status.badge-info { background: #eaf0fb; color: #4b62a7; }
.schedule-swap-status.badge-success { background: #e5f2e9; color: #2f704f; }
.schedule-swap-status.badge-neutral { background: #eff1f0; color: #636a66; }
.schedule-swap-status.badge-danger { background: #fdeceb; color: #a83e37; }
.schedule-swap-open {
  min-height: 34px;
  gap: 6px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 850;
}
.schedule-swap-open svg {
  width: 14px;
  height: 14px;
}
.schedule-swap-open-review {
  border-color: #111116;
  background: #111116;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(17, 17, 22, 0.18);
}
.schedule-swap-open-review:hover:not(:disabled) {
  background: #2a2b31;
  border-color: #2a2b31;
}
.schedule-swap-open-escalated,
.schedule-swap-open-escalated:disabled {
  cursor: not-allowed;
  border-color: #dde2e7;
  background: #f3f5f7;
  color: #68717c;
  opacity: 1;
  box-shadow: none;
}
.schedule-swap-open-escalated svg {
  color: #7b8590;
}
.schedule-swap-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  width: max-content;
  margin: 12px 0 0 auto;
  background: transparent;
}
.schedule-swap-page-button {
  position: relative;
  min-height: 34px;
  border: 1px solid #dfe3e7;
  border-radius: 5px;
  background: #ffffff;
  padding: 0 12px;
  color: #464c54;
  font-size: 8px;
  box-shadow: none;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.schedule-swap-page-button:hover:not(:disabled) {
  border-color: #bfc5cc;
  background: #f6f7f8;
  color: #15181c;
}
.schedule-swap-page-button:active:not(:disabled) {
  border-color: #aeb5bd;
  background: #e7e9ec;
}
.schedule-swap-page-button:focus-visible {
  outline: 2px solid #7b838d;
  outline-offset: 2px;
}
.schedule-swap-page-button:disabled {
  cursor: default;
  border-color: #edf0f2;
  background: #fafbfc;
  color: #b2b7bd;
  opacity: 1;
}
.schedule-swap-page-button svg {
  width: 13px;
  height: 13px;
}
.schedule-swap-page-info {
  display: grid;
  min-width: 62px;
  min-height: 34px;
  align-content: center;
  justify-items: center;
  gap: 1px;
  background: transparent;
  padding: 2px 7px;
  color: #525961;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}
.schedule-swap-page-info small {
  color: #8a9199;
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase;
}
.schedule-swap-page-info strong {
  color: #171a1e;
  font-size: 11px;
}
.schedule-swap-empty { display: flex; align-items: center; gap: 9px; margin-top: 14px; border: 1px dashed #d6d9d7; border-radius: 7px; background: #fafbfa; padding: 13px; color: #66706a; }
.schedule-swap-empty > svg { width: 18px; height: 18px; }
.schedule-swap-empty span { display: grid; gap: 2px; }
.schedule-swap-empty strong { color: #353a37; font-size: 10px; }
.schedule-swap-empty small { font-size: 9px; }
.schedule-swap-empty.inline { margin-top: 0; }

.schedule-team-swap-list {
  display: grid;
}

.schedule-team-swap-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  background: #ffffff;
  padding: 20px 26px;
}

.schedule-team-swap-card:first-child {
  border-top: 0;
}

.schedule-team-swap-card > span:first-child {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 9px;
  background: #eef1f4;
  color: #56606c;
}

.schedule-team-swap-card.tone-warning > span:first-child { background: #fff3cf; color: #8a6514; }
.schedule-team-swap-card.tone-info > span:first-child { background: #eaf0fb; color: #5067ad; }
.schedule-team-swap-card.tone-success > span:first-child { background: #e5f2e9; color: #327453; }
.schedule-team-swap-card.tone-danger > span:first-child { background: #fdeceb; color: #b54841; }

.schedule-team-swap-card > span:first-child svg {
  width: 20px;
  height: 20px;
}

.schedule-team-swap-card > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.schedule-team-swap-card > div small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-swap-card > div strong {
  overflow: hidden;
  color: #111116;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-swap-card > div em {
  overflow: hidden;
  color: #686979;
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-swap-action {
  min-width: 120px;
  justify-content: center;
}

.schedule-swap-dialog {
  width: min(610px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: #fff;
  padding: 0;
  box-shadow: 0 24px 72px rgba(18, 18, 24, 0.28);
  color: var(--text);
}

.schedule-swap-dialog::backdrop { background: rgba(18, 18, 24, 0.56); backdrop-filter: blur(2px); }
.schedule-swap-dialog-shell { display: grid; max-height: calc(100dvh - 24px); grid-template-rows: auto minmax(0, 1fr) auto; }
.schedule-swap-dialog-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 18px 20px; }
.schedule-swap-dialog-shell > header span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.schedule-swap-dialog-shell > header h2 { margin: 3px 0 0; font-size: 19px; }
.schedule-swap-dialog-shell > header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.schedule-swap-dialog-body { display: grid; min-height: 0; gap: 13px; overflow-y: auto; padding: 17px 20px; }
.schedule-swap-dialog-shell > footer { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); background: #fff; padding: 12px 20px 16px; }
.schedule-swap-decision-action {
  min-height: 42px;
  gap: 8px;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 900;
}
.schedule-swap-decision-action svg {
  width: 15px;
  height: 15px;
}
.schedule-swap-decision-action.is-escalate {
  border-color: #d8c38d;
  background: #fff8e8;
  color: #806012;
  box-shadow: 0 8px 18px rgba(128, 96, 18, 0.08);
}
.schedule-swap-decision-action.is-escalate:hover:not(:disabled) {
  border-color: #c29b40;
  background: #fff2cf;
}
.schedule-swap-decision-action.is-reject {
  color: #a43f39;
}
.schedule-swap-form-intro {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe4ee;
  border-radius: 7px;
  background: #f8faff;
  padding: 11px 12px;
}
.schedule-swap-form-intro > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  background: #eaf0fb;
  color: #536bd0;
}
.schedule-swap-form-intro strong { display: block; font-size: 11px; }
.schedule-swap-form-intro small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.schedule-swap-form-section {
  display: grid;
  gap: 9px;
  border: 1px solid #e2e4e8;
  border-radius: 7px;
  background: #fff;
  padding: 12px;
}
.schedule-swap-section-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}
.schedule-swap-section-title strong { display: block; font-size: 11px; }
.schedule-swap-section-title small { display: block; margin-top: 1px; color: var(--muted); font-size: 8px; }
.schedule-swap-source-list {
  display: grid;
  max-height: 220px;
  gap: 7px;
  overflow-y: auto;
  padding-right: 3px;
}
.schedule-swap-source-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  border: 1px solid #dfe1e5;
  border-radius: 7px;
  background: #fff;
  padding: 8px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.schedule-swap-source-option:hover { border-color: #aeb5b1; background: #fafbfa; }
.schedule-swap-source-option.selected { border-color: #6377d8; background: #f8faff; box-shadow: inset 0 0 0 1px #6377d8; }
.schedule-swap-date-tile {
  display: grid;
  width: 42px;
  min-height: 42px;
  place-items: center;
  border-radius: 7px;
  background: #f0f1f4;
}
.schedule-swap-date-tile small { color: var(--muted); font-size: 8px; font-weight: 800; }
.schedule-swap-date-tile strong { font-size: 17px; line-height: 1; }
.schedule-swap-source-option.selected .schedule-swap-date-tile { background: #eef2ff; color: #536bd0; }
.schedule-swap-source-option > .schedule-swap-option-copy { display: grid; min-width: 0; gap: 2px; }
.schedule-swap-source-option > .schedule-swap-option-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-swap-source-option > .schedule-swap-option-copy small { color: var(--muted); font-size: 9px; }
.schedule-swap-source-option i { color: #747b76; }
.schedule-swap-source-option.selected i { color: #536bd0; }
.schedule-swap-target-panel { min-width: 0; }
.schedule-swap-own-shift { display: flex; align-items: center; gap: 10px; border: 1px solid #dfe3e0; border-radius: 7px; background: #f7f9f8; padding: 10px 11px; }
.schedule-swap-own-shift > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 6px; background: #e9edeb; color: #4f5954; }
.schedule-swap-own-shift svg { width: 16px; height: 16px; }
.schedule-swap-own-shift div { display: grid; gap: 2px; }
.schedule-swap-own-shift small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.schedule-swap-own-shift strong { font-size: 11px; }
.schedule-swap-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.schedule-swap-option { display: grid; min-width: 0; min-height: 66px; grid-template-columns: 34px minmax(0, 1fr) 17px; align-items: center; gap: 9px; border: 1px solid #dfe1e5; border-radius: 7px; cursor: pointer; background: #fff; padding: 9px; color: var(--text); font: inherit; text-align: left; }
.schedule-swap-option:hover { border-color: #aeb5b1; background: #fafbfa; }
.schedule-swap-option.selected { border-color: #4c8e67; background: #f7fbf8; box-shadow: inset 0 0 0 1px #4c8e67; }
.schedule-swap-locked-group { display: grid; gap: 8px; margin-top: 12px; }
.schedule-swap-locked-group > span { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.schedule-swap-target-options.is-locked { opacity: .94; }
.schedule-swap-option.is-disabled { cursor: not-allowed; background: #fafafa; color: #7b827e; }
.schedule-swap-option.is-disabled:hover { border-color: #dfe1e5; background: #fafafa; }
.schedule-swap-option.is-disabled .schedule-swap-avatar { background: #f0f1f3; color: #757c78; }
.schedule-swap-option.is-disabled i { color: #8d948f; }
.schedule-swap-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #eef1ef; color: #48524d; font-size: 9px; font-weight: 800; }
.schedule-swap-option.selected .schedule-swap-avatar { background: #e9f5ee; color: #327350; }
.schedule-swap-option > .schedule-swap-option-copy { display: grid; min-width: 0; gap: 3px; }
.schedule-swap-option small { color: var(--muted); font-size: 8px; }
.schedule-swap-option strong { overflow: visible; font-size: 10px; line-height: 1.3; text-overflow: clip; white-space: normal; }
.schedule-swap-option em { color: var(--muted); font-size: 8px; font-style: normal; line-height: 1.35; }
.schedule-swap-option-detail {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}
.schedule-swap-option-detail span {
  min-width: 0;
}
.schedule-swap-option-detail b {
  color: #4f5964;
  font-weight: 850;
}
.schedule-swap-option-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.schedule-swap-day-pill {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.schedule-swap-day-pill svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}
.schedule-swap-day-pill.is-same {
  border-color: #cbd7ff;
  background: #eef2ff;
  color: #536bd0;
}
.schedule-swap-day-pill.is-different {
  border-color: #cfe0f4;
  background: #edf6ff;
  color: #2c6fa4;
}
.schedule-swap-option-role {
  width: max-content;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0;
}
.schedule-swap-option-role.is-mine { background: #eef2ff; color: #536bd0; }
.schedule-swap-option-role.is-peer { background: #e9f5ee; color: #327350; }
.schedule-rest-swap-options { max-height: 280px; overflow-y: auto; padding-right: 3px; }
.schedule-rest-swap-option { min-height: 78px; }
.schedule-swap-option i { color: #a4aaa6; }
.schedule-swap-option.selected i { color: #327350; }
.schedule-swap-option i svg { width: 16px; height: 16px; }
.schedule-swap-note { margin: 0; }
.schedule-swap-note textarea { min-height: 74px; }
.schedule-swap-cutoff { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 9px; }
.schedule-swap-cutoff svg { width: 14px; height: 14px; }
.schedule-swap-confirmation { display: grid; justify-items: center; gap: 12px; padding: 8px 4px; text-align: center; }
.schedule-swap-confirmation-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: #eef2ff; color: #536bd0; }
.schedule-swap-confirmation > .schedule-swap-day-pill { justify-self: center; padding: 5px 9px; font-size: 8px; }
.schedule-swap-confirmation h3 { margin: 3px 0 0; font-size: 17px; }
.schedule-swap-confirmation > div > span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.schedule-swap-confirmation > div > p, .schedule-swap-confirmation > p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.schedule-swap-confirmation-grid { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 8px; }
.schedule-swap-confirmation-grid span { display: grid; gap: 3px; border: 1px solid #e0e2e5; border-radius: 7px; background: #fafbfa; padding: 12px; }
.schedule-swap-confirmation-card.is-mine { border-color: #cad5ff; background: #f8faff; }
.schedule-swap-confirmation-card.is-peer { border-color: #cae4d4; background: #f7fbf8; }
.schedule-swap-confirmation-grid small { color: var(--muted); font-size: 8px; }
.schedule-swap-confirmation-grid strong { font-size: 10px; }
.schedule-swap-confirmation-grid em { color: var(--muted); font-size: 8px; font-style: normal; line-height: 1.35; }
.schedule-swap-decision-confirm {
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 10px 4px 4px;
  text-align: center;
}
.schedule-swap-decision-confirm-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 50%;
}
.schedule-swap-decision-confirm-icon svg {
  width: 22px;
  height: 22px;
}
.schedule-swap-decision-confirm-icon.tone-success {
  background: #e8f6ee;
  color: #2f8f5b;
}
.schedule-swap-decision-confirm-icon.tone-danger {
  background: #fdeceb;
  color: #c4544d;
}
.schedule-swap-decision-confirm-icon.tone-warning {
  background: #fff3cf;
  color: #9b6b13;
}
.schedule-swap-decision-confirm-icon.tone-neutral {
  background: #eff1f0;
  color: #5d6561;
}
.schedule-swap-decision-confirm small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}
.schedule-swap-decision-confirm h3 {
  margin: 3px 0 0;
  font-size: 18px;
  line-height: 1.25;
}
.schedule-swap-decision-confirm p {
  max-width: 430px;
  margin: 4px auto 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.schedule-swap-decision-summary {
  display: grid;
  width: min(100%, 480px);
  gap: 8px;
  margin-top: 3px;
  text-align: left;
}
.schedule-swap-decision-summary span {
  display: grid;
  gap: 3px;
  border: 1px solid #e2e4e7;
  border-radius: 7px;
  background: #fafbfa;
  padding: 10px 12px;
}
.schedule-swap-decision-summary strong {
  color: var(--ink);
  font-size: 10px;
  line-height: 1.35;
}
.schedule-swap-review-summary { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.schedule-swap-review-summary > div { display: grid; gap: 3px; }
.schedule-swap-review-summary small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.schedule-swap-review-summary strong { font-size: 13px; }
.schedule-swap-review-summary p { margin: 0; color: var(--muted); font-size: 9px; }
.schedule-swap-request-note { border-radius: 7px; background: #f5f6f5; padding: 10px 11px; }
.schedule-swap-request-note small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.schedule-swap-request-note p { margin: 4px 0 0; font-size: 10px; }
.schedule-swap-contract-warning {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #e8c7c3;
  border-radius: 7px;
  background: #fff8f7;
  padding: 10px 11px;
  color: #8f3f38;
}
.schedule-swap-contract-warning > svg { width: 17px; height: 17px; justify-self: center; }
.schedule-swap-contract-warning span { display: grid; gap: 2px; }
.schedule-swap-contract-warning strong { color: #6f2f2a; font-size: 10px; }
.schedule-swap-contract-warning small { color: #865b57; font-size: 9px; line-height: 1.4; }
.schedule-swap-timeline h3 { margin: 0 0 8px; font-size: 12px; }
.schedule-swap-timeline-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 7px 0; }
.schedule-swap-timeline-row + .schedule-swap-timeline-row { border-top: 1px solid #eceeec; }
.schedule-swap-timeline-row > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #edf1ee; color: #4d6457; }
.schedule-swap-timeline-row svg { width: 12px; height: 12px; }
.schedule-swap-timeline-row div { display: grid; gap: 2px; }
.schedule-swap-timeline-row strong { font-size: 10px; }
.schedule-swap-timeline-row small { color: var(--muted); font-size: 8px; }
.schedule-swap-timeline-row p { margin: 2px 0 0; color: #555b57; font-size: 9px; }

@media (max-width: 620px) {
  .schedule-swap-workspace { margin-top: 14px; padding: 15px 16px; }
  .schedule-swap-heading { grid-template-columns: 40px minmax(0, 1fr); align-items: center; }
  .schedule-swap-heading-icon,
  .employee-rest-quota-heading .employee-rest-quota-icon { width: 40px; height: 40px; }
  .schedule-swap-heading-icon svg,
  .employee-rest-quota-icon svg { width: 19px; height: 19px; }
  .employee-rest-quota-heading { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .employee-rest-quota.is-global .employee-rest-quota-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .employee-rest-quota.is-global .employee-rest-quota-facts > span {
    display: grid;
    min-width: 0;
    grid-template-columns: 20px minmax(0, 1fr);
    align-content: start;
    gap: 2px 6px;
    padding: 8px 7px;
  }
  .employee-rest-quota.is-global .employee-rest-quota-facts > span + span {
    border-top: 0;
    border-left: 1px solid #e6e7eb;
  }
  .employee-rest-quota.is-global .employee-rest-quota-facts i {
    width: 20px;
    height: 20px;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .employee-rest-quota.is-global .employee-rest-quota-facts > span > small {
    min-height: 28px;
    grid-column: 2;
    grid-row: 1;
    font-size: 8px;
    line-height: 1.2;
  }
  .employee-rest-quota.is-global .employee-rest-quota-facts > span > strong {
    min-height: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 1px;
    font-size: 16px;
    line-height: 1;
  }
  .employee-rest-quota.is-global .employee-rest-fact-full {
    display: none;
  }
  .employee-rest-quota.is-global .employee-rest-fact-compact {
    display: inline;
  }
  .employee-rest-quota.is-global .employee-rest-quota-facts > span > em {
    width: 100%;
    min-height: 0;
    grid-column: 1 / -1;
    grid-row: 3;
    overflow: visible;
    overflow-wrap: anywhere;
    font-size: 7px;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
  }
  .employee-rest-history-row { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  .employee-rest-history-row em { grid-column: 2; justify-self: start; }
  .schedule-swap-heading-copy h2 b { font-size: 27px; }
  .schedule-swap-heading-copy h2 em { font-size: 12px; }
  .schedule-swap-start { grid-column: 1 / -1; width: 100%; }
  .schedule-swap-count { grid-column: 2; justify-self: start; }
  .schedule-swap-card { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; padding: 10px; }
  .schedule-swap-card .schedule-swap-card-icon { width: 34px; height: 34px; }
  .schedule-swap-status { align-self: start; }
  .schedule-swap-open { grid-column: 2 / -1; width: 100%; }
  .schedule-team-swap-card {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 14px;
  }
  .schedule-team-swap-card > span:first-child {
    width: 38px;
    height: 38px;
  }
  .schedule-team-swap-card > b {
    grid-column: 2;
    justify-self: start;
  }
  .schedule-team-swap-action {
    grid-column: 2;
    width: 100%;
    min-width: 0;
  }
  .schedule-swap-pagination {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    margin-left: 0;
  }
  .schedule-swap-page-button {
    width: 100%;
    padding: 0 8px;
  }
  .schedule-swap-page-info {
    align-self: center;
    padding: 4px 9px;
  }
  .schedule-swap-card-main strong,
  .schedule-swap-card-main small { overflow: visible; text-overflow: clip; white-space: normal; }
  .schedule-swap-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .schedule-swap-dialog-shell { max-height: calc(100dvh - 20px); }
  .schedule-swap-dialog-shell > header { padding: 16px; }
  .schedule-swap-dialog-body { padding: 15px 16px; }
  .schedule-swap-dialog-shell > footer { flex-direction: column-reverse; padding: 11px 16px 15px; }
  .schedule-swap-dialog-shell > footer .button { width: 100%; }
  .schedule-swap-options { grid-template-columns: 1fr; }
  .schedule-swap-source-list { max-height: none; overflow: visible; padding-right: 0; }
  .schedule-rest-swap-options { max-height: none; overflow: visible; padding-right: 0; }
  .schedule-swap-confirmation-grid { grid-template-columns: 1fr; }
  .schedule-swap-confirmation-grid > i { transform: rotate(90deg); }
  .mobile-team-date-selector button { min-height: 54px; }
}

@media (max-width: 980px) {
  .personal-schedule-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personal-mobile-schedule-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 620px) {
  .fixed-schedule-band {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 16px;
  }

  .fixed-schedule-band > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .personal-schedule-heading,
  .personal-schedule-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .personal-schedule-heading p {
    text-align: left;
  }

  .personal-schedule-days {
    grid-template-columns: 1fr;
  }

  .personal-schedule-footer .button {
    width: 100%;
  }

  .shift-schedule-heading,
  .date-slot-picker-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .shift-schedule-heading p,
  .date-slot-picker-heading p {
    text-align: left;
  }

  .date-slot-picker {
    padding: 14px;
  }

  .date-slot-options {
    grid-template-columns: 1fr;
  }

  .schedule-date-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .schedule-date-dialog-shell {
    max-height: calc(100dvh - 20px);
  }

  .schedule-date-dialog-header {
    padding: 18px 17px 15px;
  }

  .schedule-date-dialog-body {
    padding: 16px 17px;
  }

  .schedule-date-dialog .date-slot-options {
    grid-template-columns: 1fr;
  }

  .team-date-employee-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .team-date-avatar {
    width: 40px;
    height: 40px;
  }

  .team-date-employee-row select {
    grid-column: 1 / -1;
  }

  .schedule-date-dialog-footer {
    flex-direction: column-reverse;
    padding: 12px 17px 15px;
  }

  .schedule-date-dialog-footer .button {
    width: 100%;
  }

  .personal-mobile-schedule {
    display: grid;
    gap: 10px;
    margin-top: 8px;
  }

  .personal-mobile-schedule-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 0 1px 10px;
  }

  .personal-mobile-schedule-heading span,
  .personal-mobile-schedule-heading strong {
    display: block;
  }

  .personal-mobile-schedule-heading span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
  }

  .personal-mobile-schedule-heading strong {
    color: #292930;
    font-size: 12px;
  }

  .personal-mobile-schedule-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid #e1e1e6;
    border-radius: 8px;
    background: #ffffff;
  }

  .personal-mobile-schedule-day {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 68px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border: 0;
    border-bottom: 1px solid #e9e9ed;
    border-radius: 0;
    background: #ffffff;
    color: #292930;
    padding: 9px 11px;
    font: inherit;
    text-align: left;
  }

  button.personal-mobile-schedule-day {
    cursor: pointer;
  }

  .personal-mobile-schedule-day:last-child {
    border-bottom: 0;
  }

  button.personal-mobile-schedule-day:hover {
    background: #f7f7fa;
  }

  button.personal-mobile-schedule-day:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #5963d6;
    outline-offset: -3px;
  }

  .personal-mobile-date-tile {
    display: grid;
    width: 42px;
    height: 46px;
    place-items: center;
    align-content: center;
    border-radius: 7px;
    background: #f1f1f5;
    color: #555861;
  }

  .personal-mobile-date-tile small,
  .personal-mobile-date-tile strong {
    display: block;
  }

  .personal-mobile-date-tile small {
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
  }

  .personal-mobile-date-tile strong {
    margin-top: 1px;
    font-size: 15px;
  }

  .personal-mobile-date-copy {
    display: block;
    min-width: 0;
  }

  .personal-mobile-date-copy > strong,
  .personal-mobile-date-copy > span {
    display: flex;
    min-width: 0;
    align-items: center;
  }

  .personal-mobile-date-copy > strong {
    overflow: hidden;
    color: #292930;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .personal-mobile-date-copy > span {
    gap: 5px;
    margin-top: 5px;
    color: #62636c;
    font-size: 9px;
    line-height: 1.35;
  }

  .personal-mobile-date-copy svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
  }

  .personal-mobile-date-action {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #5a5fca;
  }

  .personal-mobile-date-action small {
    font-size: 8px;
    font-weight: 750;
  }

  .personal-mobile-date-action svg {
    width: 15px;
    height: 15px;
  }

  .personal-mobile-schedule-day.tone-selected .personal-mobile-date-tile {
    background: #e8f3ec;
    color: #267554;
  }

  .personal-mobile-schedule-day.tone-rest {
    background: #fff8f8;
  }

  .personal-mobile-schedule-day.tone-rest .personal-mobile-date-tile {
    background: #f8dfdf;
    color: #aa3f3f;
  }

  .personal-mobile-schedule-day.tone-rest .personal-mobile-date-copy > span {
    color: #a04343;
  }

  .personal-mobile-schedule-day.tone-leave {
    background: #f7f8fc;
  }

  .personal-mobile-schedule-day.tone-leave .personal-mobile-date-tile {
    background: #e2e7f7;
    color: #5267b9;
  }

  .personal-mobile-schedule-day.tone-leave .personal-mobile-date-action,
  .personal-mobile-schedule-day.tone-leave .personal-mobile-date-copy > span {
    color: #5267b9;
  }

  .personal-mobile-schedule-day.tone-missing {
    background: #fffbef;
  }

  .personal-mobile-schedule-day.tone-missing .personal-mobile-date-tile {
    background: #f8e9bd;
    color: #8b620e;
  }

  .personal-mobile-schedule-day.tone-missing .personal-mobile-date-action,
  .personal-mobile-schedule-day.tone-missing .personal-mobile-date-copy > span {
    color: #8b620e;
  }

  .schedule-release-confirmation {
    padding: 26px 18px 22px;
  }

  .schedule-release-confirmation-actions {
    flex-direction: column-reverse;
  }

  .schedule-release-confirmation-actions .button {
    width: 100%;
  }

  .employee-schedule-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .employee-rest-quota {
    grid-template-columns: 1fr;
  }

  .schedule-period-picker {
    padding: 12px;
  }

  .schedule-period-trigger {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-period-trigger-arrow {
    right: 12px;
  }

  .employee-schedule-status {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .employee-schedule-status.status-open {
    border-top-color: #ead59c;
    border-left: 0;
  }

  .employee-schedule-status {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .employee-schedule-status > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .employee-rest-quota-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .employee-rest-quota-facts > span + span {
    border-top: 0;
    border-left: 1px solid #e6e7eb;
  }

  .employee-rest-quota-facts > span {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
  }

  .employee-rest-quota-facts i {
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
  }

  .headstore-submit-copy {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .headstore-submit-icon {
    width: 40px;
    height: 40px;
  }

  .headstore-submit-copy strong {
    font-size: 16px;
  }
}

.version-lineage {
  overflow: hidden;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
}

.schedule-team-rest-entry {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 36px minmax(0, 1fr) auto 18px;
  align-items: center;
  justify-self: stretch;
  gap: 10px;
  border: 1px solid #dfe2e6;
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.schedule-team-rest-entry:hover {
  border-color: #c9ced4;
  background: #fcfcfd;
}

.schedule-team-rest-entry.is-active {
  border-color: #bfc4ca;
  background: #fffafa;
  box-shadow: inset 3px 0 0 #a14e59;
}

.schedule-team-rest-entry-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: #fff0f1;
  color: #a14e59;
}

.schedule-team-rest-entry-icon svg {
  width: 17px;
  height: 17px;
}

.schedule-team-rest-entry-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.schedule-team-rest-entry-copy small {
  color: #9a6870;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-team-rest-entry-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-rest-entry-copy em {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-rest-entry-count {
  display: grid;
  justify-items: end;
  gap: 1px;
}

.schedule-team-rest-entry-count strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.schedule-team-rest-entry-count small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
}

.schedule-team-rest-entry-arrow {
  display: grid;
  place-items: center;
  color: #8a919a;
}

.schedule-team-rest-entry-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform .16s ease;
}

.schedule-team-rest-entry.is-active .schedule-team-rest-entry-arrow svg {
  transform: rotate(90deg);
}

.schedule-team-rest-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.schedule-team-rest-summary > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  padding: 14px 16px;
}

.schedule-team-rest-summary > span + span {
  border-left: 1px solid var(--line);
}

.schedule-team-rest-summary i {
  display: grid;
  width: 34px;
  height: 34px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 7px;
  background: #f0f2f5;
  color: #626b76;
}

.schedule-team-rest-summary i svg {
  width: 17px;
  height: 17px;
}

.schedule-team-rest-summary small,
.schedule-team-rest-summary em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.schedule-team-rest-summary strong {
  color: var(--ink);
  font-size: 23px;
  line-height: 1;
}

.schedule-team-rest-summary em {
  align-self: end;
  padding-bottom: 1px;
}

.schedule-team-rest-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #edcaca;
  background: #fff8f8;
  color: #9b4141;
  padding: 11px 18px;
}

.schedule-team-rest-alert > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.schedule-team-rest-alert span {
  display: grid;
  gap: 2px;
}

.schedule-team-rest-alert strong {
  font-size: 12px;
}

.schedule-team-rest-alert small {
  color: #775858;
  font-size: 10px;
}

.schedule-team-rest-list {
  display: grid;
}

.schedule-team-rest-row {
  display: grid;
  grid-template-columns: minmax(250px, .85fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 18px;
  padding: 15px 18px;
}

.schedule-team-rest-row + .schedule-team-rest-row {
  border-top: 1px solid var(--line);
}

.schedule-team-rest-row.has-warning {
  box-shadow: inset 3px 0 0 #b75b5b;
  background: #fffbfb;
}

.schedule-team-rest-person {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.schedule-team-rest-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #e0e3e7;
  border-radius: 50%;
  background: #f1f3f5;
  color: #555e68;
  font-size: 13px;
  font-weight: 850;
}

.schedule-team-rest-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule-team-rest-person > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.schedule-team-rest-person strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-rest-person small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-rest-person > .badge {
  justify-self: end;
  white-space: nowrap;
}

.schedule-team-rest-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #e1e4e8;
  border-radius: 7px;
  background: #ffffff;
}

.schedule-team-rest-facts > span {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 5px;
  padding: 10px 11px;
}

.schedule-team-rest-facts > span + span {
  border-left: 1px solid #e6e8eb;
}

.schedule-team-rest-facts small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-team-rest-facts strong {
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
}

.schedule-team-rest-facts em {
  align-self: end;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

@media (max-width: 900px) {
  .schedule-team-rest-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 620px) {
  .schedule-team-rest-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-team-rest-summary > span:nth-child(3) {
    border-left: 0;
  }

  .schedule-team-rest-summary > span:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .schedule-team-rest-summary > span {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 2px 7px;
    padding: 11px;
  }

  .schedule-team-rest-summary i {
    width: 30px;
    height: 30px;
  }

  .schedule-team-rest-summary strong {
    font-size: 20px;
  }

  .schedule-team-rest-row {
    padding: 13px;
  }

  .schedule-team-rest-person {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .schedule-team-rest-avatar {
    width: 40px;
    height: 40px;
  }

  .schedule-team-rest-person > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .schedule-team-rest-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-team-rest-facts > span:nth-child(3) {
    border-left: 0;
  }

  .schedule-team-rest-facts > span:nth-child(n + 3) {
    border-top: 1px solid #e6e8eb;
  }
}

/* resources/css/features/workforce/leave.css */
/* Leave */
.leave-command-panel,
.leave-record {
  border-radius: 12px;
  background: white;
}

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

.leave-create-panel > summary {
  width: max-content;
  list-style: none;
  cursor: pointer;
}

.leave-create-panel > summary::-webkit-details-marker {
  display: none;
}

.leave-create-panel[open] {
  border: 1px solid var(--line);
  background: white;
  padding: 14px;
}

.leave-create-panel[open] > summary {
  margin-bottom: 14px;
}

.leave-list-section {
  margin-top: 16px;
}

.leave-record-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.leave-record {
  border: 0;
  border-radius: 0;
  padding: 16px 18px;
}

.leave-record + .leave-record {
  border-top: 1px solid var(--line);
}

.leave-control-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 16px;
}

.leave-control-tab {
  position: relative;
  display: grid;
  min-height: 92px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 251, 0.9));
  color: inherit;
  padding: 12px 46px 12px 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(30, 36, 32, 0.04);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.leave-control-tab:hover {
  border-color: #c5cbc8;
  box-shadow: 0 10px 24px rgba(30, 36, 32, 0.06);
  transform: translateY(-1px);
}

.leave-control-tab.active {
  border-color: #17191d;
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfd 100%);
  color: inherit;
  box-shadow: inset 0 0 0 1px #17191d, 0 10px 22px rgba(17, 17, 22, 0.07);
}

.leave-control-tab > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f3;
  color: #56625d;
}

.leave-control-tab.tone-approval > span { background: #eef3ff; color: #5871d8; }
.leave-control-tab.tone-owner > span { background: #f1edff; color: #7656c8; }
.leave-control-tab.tone-evidence > span { background: #fff4df; color: #a06b00; }
.leave-control-tab.tone-decided > span { background: #eaf6ee; color: #2f8b61; }

.leave-control-tab.active > span {
  box-shadow: inset 0 0 0 1px rgba(17, 19, 24, 0.05);
}

.leave-control-tab.active.tone-approval > span { background: #eef3ff; color: #5871d8; }
.leave-control-tab.active.tone-owner > span { background: #f1edff; color: #7656c8; }
.leave-control-tab.active.tone-evidence > span { background: #fff4df; color: #a06b00; }
.leave-control-tab.active.tone-decided > span { background: #eaf6ee; color: #2f8b61; }

.leave-control-tab svg {
  width: 18px;
  height: 18px;
}

.leave-control-tab div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.leave-control-tab strong {
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
}

.leave-control-tab small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.leave-control-tab.active small {
  color: var(--muted);
}

.leave-control-tab b {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: block;
  min-width: 0;
  height: auto;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

.leave-control-tab.active b {
  background: transparent;
  color: #111116;
}

.leave-control-board {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.leave-control-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfd 100%);
  padding: 18px 22px;
}

.leave-control-board-head > span {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f3;
  color: #56625d;
}

.leave-control-board-head svg {
  width: 21px;
  height: 21px;
}

.leave-control-board-head small {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.leave-control-board-head h2,
.leave-control-board-head p,
.leave-control-card h3,
.leave-control-card p,
.leave-control-status strong,
.leave-control-status small,
.leave-control-decision p,
.leave-control-checks small {
  margin: 0;
}

.leave-control-board-head h2 {
  margin-top: 3px;
  font-size: 25px;
  line-height: 1.18;
}

.leave-control-board-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.leave-control-board-head b {
  display: grid;
  min-width: 0;
  min-height: 34px;
  place-items: center;
  border-radius: 999px;
  background: #f4f5f7;
  color: var(--text-soft);
  font-size: 12px;
  padding: 0 14px;
}

.leave-control-list {
  display: grid;
  gap: 12px;
  padding: 16px 22px 22px;
}

.leave-control-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid #8d9692;
  border-radius: 8px;
  background: white;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(30, 36, 32, 0.035);
}

.leave-control-card.tone-success {
  border-color: #c8e4d2;
  border-left-color: var(--accent);
  background: #ffffff;
}
.leave-control-card.is-approved {
  border-color: #c8e4d2;
  border-left-color: #2f8b61 !important;
  background: #ffffff;
}
.leave-control-card.tone-warning { border-left-color: #c99a35; }
.leave-control-card.tone-danger { border-left-color: var(--coral); }
.leave-control-card.tone-info { border-left-color: var(--blue); }

.leave-control-card.tone-success .leave-control-date,
.leave-control-card.is-approved .leave-control-date {
  background: #eaf7ef;
  color: var(--accent-strong);
}

.leave-control-card.tone-success .leave-control-date small,
.leave-control-card.is-approved .leave-control-date small {
  color: var(--accent-strong);
}

.leave-control-date {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  align-content: center;
  border-radius: 8px;
  background: #f2f4f5;
  text-align: center;
}

.leave-control-date small {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 800;
}

.leave-control-date strong {
  font-size: 24px;
  line-height: 1;
}

.leave-control-main {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.leave-control-title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.leave-control-title > div {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.leave-control-title h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.15;
}

.leave-control-title p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 800;
}

.leave-control-number {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.leave-control-main > p {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
}

.leave-control-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.leave-control-meta span {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fafbfc;
  color: #4f5a55;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  padding: 7px 10px;
}

.leave-control-meta svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.leave-control-reason {
  margin: 0;
  border-left: 3px solid #d9dedb;
  color: #535d59;
  font-size: 13px;
  line-height: 1.45;
  padding-left: 10px;
}

.leave-control-main blockquote {
  margin: 0;
  border-left: 3px solid var(--line-strong);
  color: #424b47;
  padding-left: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.leave-control-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
}

.leave-control-facts span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

.leave-control-facts span + span {
  border-left: 1px solid var(--line);
}

.leave-control-facts small,
.leave-control-evidence-panel small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.leave-control-facts strong,
.leave-control-evidence-panel strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leave-control-request-facts {
  grid-template-columns: 1.2fr 1.25fr .75fr;
}

.leave-control-request-facts strong {
  white-space: normal;
}

.leave-control-impact {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.leave-control-impact.risk-high {
  border-color: #f2b9ad;
  background: #fff8f6;
}

.leave-control-impact summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  list-style: none;
  padding: 12px;
}

.leave-control-impact summary::-webkit-details-marker {
  display: none;
}

.leave-control-impact summary > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: var(--amber-soft);
  color: var(--amber);
}

.leave-control-impact.risk-high summary > span,
.leave-control-impact.risk-high .leave-control-impact-warning > span {
  background: var(--coral-soft);
  color: var(--coral);
}

.leave-control-impact summary div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.leave-control-impact summary strong {
  font-size: 14px;
}

.leave-control-impact summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.leave-control-impact summary i {
  color: var(--muted);
  transition: transform .16s ease;
}

.leave-control-impact[open] summary i {
  transform: rotate(180deg);
}

.leave-control-impact-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 12px;
}

.leave-control-impact-warning {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #f2dfb7;
  border-radius: 8px;
  background: #fffaf0;
  padding: 10px;
}

.leave-control-impact.risk-high .leave-control-impact-warning {
  border-color: #f2b9ad;
  background: #fff3ef;
}

.leave-control-impact-warning > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--amber-soft);
  color: var(--amber);
}

.leave-control-impact-warning p,
.leave-control-impact-grid span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.leave-control-impact-warning small,
.leave-control-impact-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.leave-control-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.leave-control-impact-grid span {
  padding: 10px 12px;
}

.leave-control-impact-grid span + span {
  border-left: 1px solid var(--line);
}

.leave-control-impact-grid strong {
  font-size: 12px;
  line-height: 1.35;
}

.leave-control-evidence-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.leave-control-evidence-panel > summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 12px;
}

.leave-control-evidence-panel > summary::-webkit-details-marker {
  display: none;
}

.leave-control-evidence-panel > summary > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f3;
  color: #66736d;
}

.leave-control-evidence-panel > summary div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.leave-control-evidence-panel > summary i {
  color: var(--muted);
  transition: transform .16s ease;
}

.leave-control-evidence-panel[open] > summary i {
  transform: rotate(180deg);
}

.leave-control-evidence-body {
  border-top: 1px solid var(--line);
  padding: 12px;
}

.leave-control-evidence-body > .button {
  width: 100%;
  gap: 8px;
}

.leave-control-document-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.leave-control-evidence-list {
  display: grid;
  gap: 8px;
}

.leave-control-evidence-list > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
  padding: 10px;
}

.leave-control-evidence-list > div > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
}

.leave-control-evidence-list p {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.leave-control-evidence-list p strong,
.leave-control-evidence-list p small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leave-control-evidence-list p small {
  color: var(--muted);
  font-size: 11px;
}

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

.leave-control-document-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

button.leave-control-document-card {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

button.leave-control-document-card:hover {
  border-color: #c7ced6;
  box-shadow: 0 10px 24px rgba(31, 38, 48, .06);
  transform: translateY(-1px);
}

.leave-control-document-card.missing {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  background: #fafbfc;
}

.leave-control-document-card header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.leave-control-document-card header > span,
.leave-control-document-card.missing > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
}

.leave-control-document-card.missing > span {
  background: #f1f4f3;
  color: #758079;
}

.leave-control-document-card header div,
.leave-control-document-card.missing div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.leave-control-document-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.leave-control-document-card strong,
.leave-control-document-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leave-control-document-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.leave-control-document-card b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #d8def5;
  border-radius: 999px;
  background: #f7f8ff;
  color: #5b67bf;
  font-size: 11px;
  padding: 6px 9px;
}

.leave-control-document-card b svg {
  width: 13px;
  height: 13px;
}

.leave-control-document-preview {
  width: 100%;
  height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
  object-fit: cover;
}

iframe.leave-control-document-preview {
  display: block;
}

.leave-control-document-placeholder {
  display: grid;
  min-height: 120px;
  place-items: center;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.leave-control-decision,
.leave-control-pending-action {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 13px;
}

.leave-control-release-action {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid #ecd2ce;
  border-radius: 8px;
  background: #fffafa;
  padding: 12px;
}

.leave-control-decision > span,
.leave-control-pending-action > span,
.leave-control-release-action > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.leave-control-release-action > span {
  width: 38px;
  height: 38px;
  background: #fdeceb;
  color: var(--coral);
}

.leave-control-release-action p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.leave-control-release-action strong {
  color: #9f473d;
  font-size: 13px;
}

.leave-control-release-action small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.leave-control-release-action .button {
  min-height: 34px;
  gap: 7px;
  padding-inline: 12px;
  font-size: 11px;
}

.leave-control-decision.is-approved {
  border-color: #cfe5d8;
  background: #f8fcfa;
}

.leave-control-decision.is-approved > span {
  background: #eaf7ef;
  color: #2f8b61;
}

.leave-control-decision.is-approved strong {
  color: #236b49;
}

.leave-control-decision.is-partial {
  border-color: #ead8ad;
  background: #fffdf8;
}

.leave-control-decision.is-partial > span {
  background: #fff4df;
  color: #9b6c16;
}

.leave-control-decision.is-partial strong {
  color: #765216;
}

.leave-control-decision.is-rejected {
  border-color: #f0cbc7;
  background: #fffafa;
}

.leave-control-decision.is-rejected > span {
  background: #fdeceb;
  color: var(--coral);
}

.leave-control-decision.is-rejected strong {
  color: #ad4c41;
}

.leave-control-decision p {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.leave-control-decision p small,
.leave-control-pending-action p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.leave-control-decision time {
  align-self: start;
  border: 1px solid rgba(79, 94, 87, 0.12);
  border-radius: 999px;
  background: rgba(79, 94, 87, 0.06);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 850;
  padding: 5px 8px;
  white-space: nowrap;
}

.leave-control-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  border: 1px solid #e7d8b4;
  border-radius: 8px;
  background: #fffaf0;
  padding: 11px;
}

.leave-control-checks .button {
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
}

.leave-control-checks small {
  color: #86611a;
  font-size: 11px;
  font-weight: 800;
}

.leave-control-decision-form {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px;
}

.leave-control-decision-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.leave-control-decision-options label {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 11px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.leave-control-decision-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.leave-control-decision-options label > span {
  display: grid;
  width: 38px;
  height: 38px;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f3;
  color: #66736d;
}

.leave-control-decision-options label:has(input[value="APPROVED"]:checked) {
  border-color: #b9dbc7;
  background: #f7fcf9;
  box-shadow: inset 0 0 0 1px #b9dbc7;
}

.leave-control-decision-options label:has(input[value="APPROVED"]:checked) > span {
  background: var(--accent-soft);
  color: var(--accent);
}

.leave-control-decision-options label:has(input[value="PARTIALLY_APPROVED"]:checked) {
  border-color: #e5cd97;
  background: #fffaf0;
  box-shadow: inset 0 0 0 1px #e5cd97;
}

.leave-control-decision-options label:has(input[value="PARTIALLY_APPROVED"]:checked) > span {
  background: #fff0cc;
  color: #9b6c16;
}

.leave-control-decision-options label:has(input[value="REJECTED"]:checked) {
  border-color: #f0b8ad;
  background: #fff7f5;
  box-shadow: inset 0 0 0 1px #f0b8ad;
}

.leave-control-decision-options label:has(input[value="REJECTED"]:checked) > span {
  background: var(--coral-soft);
  color: var(--coral);
}

.leave-control-decision-options strong,
.leave-control-decision-options small {
  min-width: 0;
}

.leave-control-decision-options strong {
  font-size: 13px;
}

.leave-control-decision-options small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.leave-control-partial-panel {
  display: none;
  gap: 11px;
  border: 1px solid #e5cd97;
  border-radius: 8px;
  background: #fffaf0;
  padding: 12px;
}

.leave-control-decision-form:has(input[name="outcome"][value="PARTIALLY_APPROVED"]:checked) .leave-control-partial-panel {
  display: grid;
}

.leave-control-partial-summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.leave-control-partial-summary > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #fff0cc;
  color: #9b6c16;
}

.leave-control-partial-summary p,
.leave-control-partial-hint {
  margin: 0;
}

.leave-control-partial-summary p {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.leave-control-partial-summary strong {
  font-size: 13px;
}

.leave-control-partial-summary small,
.leave-control-partial-hint {
  color: #7d6330;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.leave-control-partial-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.leave-control-partial-fields input {
  width: 100%;
  min-width: 0;
}

.leave-control-decision-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.leave-control-decision-shell > summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 12px;
}

.leave-control-decision-shell > summary::-webkit-details-marker {
  display: none;
}

.leave-control-decision-shell > summary > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.leave-control-decision-shell > summary strong {
  font-size: 14px;
}

.leave-control-decision-shell > summary i {
  color: var(--muted);
  transition: transform .16s ease;
}

.leave-control-decision-shell[open] > summary i {
  transform: rotate(180deg);
}

.leave-document-preview-dialog {
  width: min(760px, calc(100vw - 28px));
}

.leave-document-preview-dialog.is-pdf {
  width: min(920px, calc(100vw - 18px));
  max-height: calc(100dvh - 18px);
}

.leave-document-preview-shell > header {
  background: linear-gradient(180deg, #fffdfa 0%, #fbf8ef 100%);
}

.leave-document-preview-shell > header > span {
  background: #fff3d9;
  color: var(--amber);
}

.leave-document-preview-canvas iframe {
  display: block;
  width: min(100%, 720px);
  height: min(72vh, 720px);
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.leave-document-preview-dialog.is-pdf .leave-document-preview-shell {
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 18px);
}

.leave-document-preview-dialog.is-pdf .leave-document-preview-canvas {
  display: block;
  overflow: auto;
  height: min(74dvh, 740px);
  min-height: 320px;
  padding: 12px;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.leave-document-pdf-frame {
  height: 100%;
  min-height: 0;
  overflow: auto;
  border-radius: 8px;
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}

.leave-document-pdf-frame object,
.leave-document-pdf-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 720px;
  border: 0;
  margin: 0 auto;
}

.leave-control-form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 360px);
  gap: 12px;
}

.leave-control-decision-form textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
}

.leave-control-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.leave-control-form-actions .button {
  gap: 8px;
}

.leave-control-status {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 108px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
  padding: 16px;
}

.leave-control-status > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f3;
  color: #66736d;
}

.tone-success .leave-control-status > span { background: var(--accent-soft); color: var(--accent); }
.tone-warning .leave-control-status > span { background: var(--amber-soft); color: var(--amber); }
.tone-danger .leave-control-status > span { background: var(--coral-soft); color: var(--coral); }
.tone-info .leave-control-status > span { background: var(--blue-soft); color: var(--blue); }

.leave-control-status strong {
  font-size: 15px;
}

.leave-control-status small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.leave-control-empty {
  margin: 18px 24px 24px;
}

@media (max-width: 1100px) {
  .leave-control-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leave-control-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .leave-control-status {
    grid-column: 2;
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .leave-control-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 10px;
    margin-right: 0;
    padding: 0;
    scroll-snap-type: none;
  }

  .leave-control-tabs::-webkit-scrollbar {
    display: none;
  }

  .leave-control-tab {
    min-width: 0;
    min-height: 104px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    padding: 11px 11px 42px;
    scroll-snap-align: unset;
  }

  .leave-control-tab > span {
    width: 36px;
    height: 36px;
  }

  .leave-control-tab strong {
    font-size: 12px;
    line-height: 1.18;
  }

  .leave-control-tab small {
    font-size: 10px;
  }

  .leave-control-tab b {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-width: 0;
    height: auto;
    font-size: 21px;
  }

  .leave-control-board-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 18px;
  }

  .leave-control-board-head > span {
    width: 42px;
    height: 42px;
  }

  .leave-control-board-head h2 {
    font-size: 22px;
  }

  .leave-control-board-head p {
    font-size: 12px;
  }

  .leave-control-list {
    padding: 14px 12px 20px;
  }

  .leave-control-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .leave-control-date {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 50px;
    height: 54px;
  }

  .leave-control-date strong {
    font-size: 21px;
  }

  .leave-control-title {
    flex-direction: column;
    gap: 8px;
    min-height: 58px;
    padding-left: 66px;
  }

  .leave-control-title .badge {
    align-self: flex-start;
  }

  .leave-control-title h3 {
    font-size: 19px;
  }

  .leave-control-facts,
  .leave-control-impact-grid,
  .leave-control-document-grid,
  .leave-control-form-grid,
  .leave-control-partial-fields,
  .leave-control-decision-options {
    grid-template-columns: 1fr;
  }

  .leave-control-facts span + span,
  .leave-control-impact-grid span + span {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .leave-control-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .leave-control-form-actions .button {
    width: 100%;
  }

  .leave-control-release-action {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .leave-control-release-action > span {
    width: 34px;
    height: 34px;
  }

  .leave-control-release-action .button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .leave-control-document-card header {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .leave-control-document-card b {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .leave-document-preview-canvas iframe {
    height: min(68vh, 560px);
  }

  .leave-document-preview-dialog.is-pdf .leave-document-preview-canvas {
    height: calc(100dvh - 174px);
    padding: 8px;
  }

  .leave-document-pdf-frame object,
  .leave-document-pdf-frame iframe {
    min-height: calc(100dvh - 190px);
  }

  .leave-control-evidence-list > div,
  .leave-control-decision,
  .leave-control-pending-action {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .leave-control-evidence-list .button,
  .leave-control-decision time {
    grid-column: 1 / -1;
  }

  .leave-control-impact summary {
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    padding: 11px;
  }

  .leave-control-impact summary > span {
    width: 36px;
    height: 36px;
  }

  .leave-control-document-preview {
    height: 150px;
  }

  .leave-control-status {
    grid-column: 1 / -1;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
  }

  .leave-control-status small {
    grid-column: 2;
  }

  .leave-control-empty {
    margin: 14px;
  }
}

/* Operational permission experience */
.permission-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 6px 0 22px;
}

.permission-page-head h1,
.permission-page-head p,
.permission-record h2,
.permission-record p,
.permission-metric p,
.permission-dialog h2,
.permission-dialog h3,
.permission-dialog p {
  margin: 0;
}

.permission-page-head h1 {
  margin-top: 3px;
  font-size: 30px;
  line-height: 1.2;
}

.permission-page-head p {
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 14px;
}

.permission-eyebrow,
.permission-dialog-head > div > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.permission-create-button {
  min-width: 150px;
  gap: 8px;
}

.permission-page-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
}

.permission-download-button {
  gap: 8px;
  border-color: var(--line-strong);
  background: white;
}

.permission-download-button:hover {
  border-color: #8c9892;
  background: #f8faf9;
}

.permission-create-button svg,
.permission-download-button svg {
  width: 17px;
  height: 17px;
}

.permission-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.permission-metric {
  display: grid;
  min-height: 102px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: white;
  color: inherit;
  padding: 17px 20px;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.permission-metric:hover {
  background: #f8fbfd;
}

.permission-metric:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.permission-metric.active {
  background: #f7fbfd;
}

.permission-metric.is-attention:hover,
.permission-metric.is-attention.active {
  background: #fffaf0;
}

.permission-metric.is-attention:focus-visible {
  outline-color: #c98a12;
}

.permission-metric + .permission-metric {
  border-left: 1px solid var(--line);
}

.permission-metric-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f3;
  color: #56625d;
}

.permission-metric.is-info .permission-metric-icon {
  background: var(--blue-soft);
  color: var(--blue);
}

.permission-metric.is-attention .permission-metric-icon {
  background: var(--amber-soft);
  color: var(--amber);
}

.permission-metric.active .permission-metric-icon {
  box-shadow: inset 0 0 0 1px currentColor;
}

.permission-metric svg {
  width: 20px;
  height: 20px;
}

.permission-metric-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}

.permission-metric small {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
}

.permission-metric strong {
  grid-row: span 2;
  font-size: 26px;
  line-height: 1;
}

.permission-metric-note {
  color: var(--muted);
  font-size: 11px;
}

.permission-approved-section {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  margin-bottom: 20px;
  border: 1px solid #cbe4d6;
  border-radius: 8px;
  background: linear-gradient(135deg, #f3fbf7 0%, #ffffff 68%);
  padding: 17px;
}

.permission-approved-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.permission-approved-head h2,
.permission-approved-head p,
.permission-approved-empty p,
.permission-approved-card h3,
.permission-approved-card p {
  margin: 0;
}

.permission-approved-head div > span {
  color: #056444;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.permission-approved-head h2 {
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.25;
}

.permission-approved-head p {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

.permission-approved-count {
  display: grid;
  align-content: center;
  justify-items: end;
  padding-top: 14px;
  justify-self: end;
  color: #056444;
  font-weight: 800;
  white-space: nowrap;
}

.permission-approved-count b {
  color: #07110d;
  font-size: 34px;
  line-height: 0.9;
}

.permission-approved-count span {
  margin-top: 5px;
  color: #056444;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

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

.permission-approved-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  border: 1px solid #d7e9df;
  border-left: 3px solid #087a55;
  border-radius: 8px;
  background: #ffffff;
  padding: 13px;
}

.permission-approved-card.is-partial {
  border-color: #ead9a6;
  border-left-color: var(--amber);
}

.permission-approved-card-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: #e7f4ee;
  color: #087a55;
}

.permission-approved-card.is-partial .permission-approved-card-icon {
  background: var(--amber-soft);
  color: var(--amber);
}

.permission-approved-card-icon svg {
  width: 18px;
  height: 18px;
}

.permission-approved-card-main {
  min-width: 0;
}

.permission-approved-card-title {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.permission-approved-card-title time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.permission-approved-card h3 {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.3;
}

.permission-approved-card p {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

.permission-approved-empty {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px dashed #badac9;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  padding: 12px;
}

.permission-approved-empty > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: #ffffff;
  color: #087a55;
}

.permission-approved-empty strong,
.permission-approved-empty small {
  display: block;
}

.permission-approved-empty strong {
  font-size: 12px;
}

.permission-approved-empty small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.permission-filters {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  scroll-margin-top: 76px;
  margin: 24px 0 12px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.permission-filters::-webkit-scrollbar {
  display: none;
}

.permission-filter {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.permission-filter b {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #ecefed;
  color: #5c6862;
  font-size: 10px;
}

.permission-filter.active {
  border-bottom-color: #111116;
  color: #111116;
}

.permission-filter.active b {
  background: #111116;
  color: white;
}

.permission-list {
  display: grid;
  gap: 10px;
}

.permission-record {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 15px;
  border: 1px solid var(--line);
  border-left: 3px solid #aeb7b2;
  border-radius: 8px;
  background: white;
  padding: 18px;
}

.permission-record.tone-info { border-left-color: var(--blue); }
.permission-record.tone-success { border-left-color: var(--accent); }
.permission-record.tone-warning { border-left-color: #c98a12; }
.permission-record.tone-danger { border-left-color: var(--coral); }

.permission-record-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #f1f3f2;
  color: #5a6560;
}

.tone-info .permission-record-icon { background: var(--blue-soft); color: var(--blue); }
.tone-success .permission-record-icon { background: var(--accent-soft); color: var(--accent); }
.tone-warning .permission-record-icon { background: var(--amber-soft); color: var(--amber); }
.tone-danger .permission-record-icon { background: var(--coral-soft); color: var(--coral); }

.permission-record-icon svg {
  width: 21px;
  height: 21px;
}

.permission-record-main {
  min-width: 0;
}

.permission-record-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.permission-record-title > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.permission-record h2 {
  font-size: 15px;
  line-height: 1.35;
}

.permission-record time {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 12px;
}

.permission-record-main > p {
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 13px;
}

.permission-document-status,
.permission-existing-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.permission-document-chip {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
}

.permission-document-chip.complete {
  border-color: #b9dfce;
  background: #f1faf6;
  color: var(--accent-strong);
}

.permission-document-chip.missing {
  border-color: #ead8a4;
  background: #fffbef;
  color: var(--amber);
}

.permission-document-chip svg {
  width: 13px;
  height: 13px;
}

.permission-followup {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid #eadfbf;
  padding-top: 13px;
}

.permission-followup > span {
  color: var(--amber);
}

.permission-followup p {
  display: flex;
  flex-direction: column;
}

.permission-followup small {
  color: var(--muted);
  font-size: 11px;
}

.permission-partial {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.permission-partial > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
}

.permission-partial > div.approved { background: #f4faf7; color: var(--accent-strong); }
.permission-partial > div.rejected { background: #fff7f5; color: var(--coral); }
.permission-partial svg { width: 17px; height: 17px; }
.permission-partial p { display: flex; flex-direction: column; gap: 2px; }
.permission-partial small { color: var(--text-soft); font-size: 11px; }

.permission-empty {
  display: grid;
  min-height: 240px;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.permission-empty > span { color: #87928d; }
.permission-empty svg { width: 28px; height: 28px; }
.permission-empty h2 { margin: 5px 0 0; font-size: 15px; }
.permission-empty p { margin: 0; color: var(--muted); font-size: 12px; }

.permission-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 26px 80px rgba(20, 28, 24, 0.24);
}

.permission-dialog::backdrop {
  background: rgba(19, 25, 22, 0.55);
  backdrop-filter: blur(3px);
}

.permission-dialog-shell {
  display: grid;
  width: 100%;
  min-width: 0;
  max-height: calc(100vh - 32px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: white;
}

.permission-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 22px 24px 18px;
}

.permission-dialog-head h2 {
  margin-top: 3px;
  font-size: 23px;
  line-height: 1.25;
}

.permission-dialog-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.permission-dialog-close {
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f0f2f1;
}

.permission-form-scroll {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 24px 24px;
}

.permission-form-section {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.permission-form-section + .permission-form-section {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.permission-form-section[hidden] {
  display: none;
}

.permission-field {
  display: block;
  min-width: 0;
}

.permission-form-section legend,
.permission-field > span {
  display: block;
  margin-bottom: 9px;
  color: #2d3732;
  font-size: 12px;
  font-weight: 800;
}

.permission-field > span b {
  margin-left: 4px;
  color: var(--coral);
  font-size: 9px;
  text-transform: uppercase;
}

.permission-duration-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.permission-duration-option {
  position: relative;
  display: grid;
  min-height: 88px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 13px;
  cursor: pointer;
}

.permission-duration-option:has(input:checked) {
  border-color: #111116;
  box-shadow: inset 0 0 0 1px #111116;
}

.permission-duration-option input {
  position: absolute;
  opacity: 0;
}

.permission-duration-option > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #f0f3f1;
  color: #56635d;
}

.permission-duration-option > span svg { width: 18px; height: 18px; }
.permission-duration-option div { display: flex; min-width: 0; flex-direction: column; }
.permission-duration-option strong { font-size: 12px; }
.permission-duration-option small { color: var(--muted); font-size: 10px; }
.permission-duration-option > i { display: none; }

.permission-duration-option:has(input:checked) > i {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: #111116;
  color: white;
}

.permission-duration-option > i svg { width: 11px; height: 11px; }

.permission-field-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  gap: 10px;
  min-width: 0;
}

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

.permission-field select,
.permission-field input,
.permission-field textarea {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: 0;
  background: white;
  color: var(--ink);
  padding: 10px 11px;
}

.permission-field input[type="date"],
.permission-field input[type="time"] {
  height: 46px;
  min-height: 46px;
  line-height: 46px;
  padding-block: 0;
}

.permission-field input[type="date"]::-webkit-date-and-time-value,
.permission-field input[type="time"]::-webkit-date-and-time-value {
  display: flex;
  min-height: 46px;
  align-items: center;
  text-align: left;
}

.permission-field input[type="date"]::-webkit-calendar-picker-indicator,
.permission-field input[type="time"]::-webkit-calendar-picker-indicator {
  margin: 0;
}

.permission-field textarea {
  min-height: 94px;
  resize: vertical;
}

.permission-field select:focus,
.permission-field input:focus,
.permission-field textarea:focus {
  border-color: #111116;
  box-shadow: 0 0 0 3px rgba(17, 17, 22, 0.08);
}

.permission-form-section > .permission-field + .permission-field-grid {
  margin-top: 12px;
}

.permission-day-count {
  margin-top: 8px !important;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
}

.permission-evidence-section {
  border-radius: 7px;
  background: #f8faf9;
  padding: 16px;
}

.permission-evidence-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.permission-evidence-heading > span {
  color: var(--accent);
}

.permission-evidence-heading svg { width: 19px; height: 19px; }
.permission-evidence-heading h3 { font-size: 13px; }
.permission-evidence-heading p { margin-top: 2px; color: var(--muted); font-size: 11px; }

.permission-form-download {
  display: grid;
  min-height: 64px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 13px;
  border: 1px solid #cfe0d7;
  border-radius: 7px;
  background: #f3f9f6;
  padding: 10px 11px;
}

.permission-form-download > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: white;
  color: var(--accent);
}

.permission-form-download > span svg {
  width: 18px;
  height: 18px;
}

.permission-form-download > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.permission-form-download strong {
  font-size: 11px;
}

.permission-form-download small {
  color: var(--text-soft);
  font-size: 10px;
}

.permission-form-download .button {
  min-height: 34px;
  gap: 6px;
  padding: 7px 10px;
  font-size: 10px;
}

.permission-form-download .button svg {
  width: 14px;
  height: 14px;
}

.permission-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}

.permission-upload {
  position: relative;
  display: grid;
  min-height: 78px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
  background: white;
  padding: 12px;
  cursor: pointer;
}

.permission-upload:hover {
  border-color: #7c8983;
}

.permission-upload > span { color: #66736d; }
.permission-upload > span svg { width: 19px; height: 19px; }
.permission-upload div { display: flex; min-width: 0; flex-direction: column; }
.permission-upload strong { font-size: 11px; }
.permission-upload small { color: var(--muted); font-size: 9px; }
.permission-upload b { max-width: 100px; overflow: hidden; color: var(--accent-strong); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.permission-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.permission-form-alert {
  margin-top: 14px;
}

.permission-saving {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 12px;
}

.permission-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid var(--line);
  background: white;
  padding: 14px 24px;
}

.permission-evidence-submit {
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 760px) {
  .schedule-loading,
  .workforce-loading-scaffold {
    min-height: clamp(320px, calc(100vh - 220px), 520px);
  }

  .permission-page-head {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .permission-page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-create-button,
  .permission-download-button {
    width: 100%;
  }

  .permission-overview {
    grid-template-columns: 1fr;
  }

  .permission-approved-section {
    padding: 14px;
  }

  .permission-approved-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  .permission-approved-count {
    justify-self: end;
    padding-top: 13px;
  }

  .permission-approved-count b {
    font-size: 31px;
  }

  .permission-approved-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .permission-approved-card-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .permission-approved-card-title time {
    white-space: normal;
  }

  .permission-metric {
    min-height: 76px;
    padding: 12px 15px;
  }

  .permission-metric + .permission-metric {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .permission-record {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
  }

  .permission-record-icon {
    width: 36px;
    height: 36px;
  }

  .permission-record > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .permission-record-title {
    flex-direction: column;
    gap: 5px;
  }

  .permission-record-title > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .permission-record time {
    white-space: normal;
  }

  .permission-followup {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .permission-followup .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .permission-partial,
  .permission-duration-options,
  .permission-field-grid,
  .permission-field-grid.two,
  .permission-upload-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .permission-dialog {
    inset: auto 8px 0;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 16px);
    margin: 0;
    border-radius: 8px 8px 0 0;
  }

  .permission-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .permission-field input[name="partialDate"],
  .permission-field input[name="fullDate"],
  .permission-field input[name="multiStart"],
  .permission-field input[name="multiEnd"],
  .permission-field input[name="startTime"],
  .permission-field input[name="endTime"] {
    display: block;
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
    min-width: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    line-height: 48px;
    padding-block: 0;
  }

  .permission-dialog-shell {
    max-height: calc(100dvh - 16px);
  }

  .permission-dialog-head,
  .permission-form-scroll,
  .permission-dialog-actions {
    padding-right: 16px;
    padding-left: 16px;
  }

  .permission-dialog-actions .button {
    min-width: 0;
    flex: 1 1 0;
  }

  .permission-form-download {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .permission-form-download .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    .permission-dialog,
    .permission-dialog-shell,
    .permission-form-scroll,
    .permission-form-section,
    .permission-field-grid,
    .permission-field {
      box-sizing: border-box;
      min-width: 0;
      max-width: 100%;
      overflow-x: hidden;
    }

    .permission-field input[type="date"],
    .permission-field input[type="time"] {
      -webkit-appearance: none;
      appearance: none;
      display: block;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: 48px;
      line-height: 48px;
      overflow: hidden;
      padding: 0 12px;
      text-align: left;
    }

    .permission-field input[type="date"]::-webkit-date-and-time-value,
    .permission-field input[type="time"]::-webkit-date-and-time-value {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      height: 48px;
      line-height: 48px;
      overflow: hidden;
      padding: 0;
      text-align: left;
    }

    .permission-field input[type="date"]::-webkit-calendar-picker-indicator,
    .permission-field input[type="time"]::-webkit-calendar-picker-indicator {
      display: none;
    }
  }
}

@media (max-width: 420px) {
  .permission-page-actions {
    grid-template-columns: 1fr;
  }
}

.fixed-rest-swap-section {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.fixed-rest-swap-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.fixed-rest-swap-head > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  color: var(--green);
  background: #edf5f0;
}

.fixed-rest-swap-head > span svg {
  width: 20px;
  height: 20px;
}

.fixed-rest-swap-head small,
.fixed-rest-swap-head h2,
.fixed-rest-swap-head p,
.fixed-rest-swap-card p {
  margin: 0;
}

.fixed-rest-swap-head small {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.fixed-rest-swap-head h2 {
  margin-top: 2px;
  font-size: 20px;
}

.fixed-rest-swap-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.fixed-rest-swap-list {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8f9fa;
}

.fixed-rest-swap-card {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(330px, 1.35fr) minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid #a6adb5;
  border-radius: 6px;
  background: #fff;
}

.fixed-rest-swap-card.tone-info { border-left-color: #6f8fd7; }
.fixed-rest-swap-card.tone-success { border-left-color: #5f9b73; }
.fixed-rest-swap-card.tone-danger { border-left-color: #c56f63; }

.fixed-rest-swap-identity {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-width: 0;
}

.fixed-rest-swap-identity > strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixed-rest-swap-dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.fixed-rest-swap-dates > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfbfc;
}

.fixed-rest-swap-dates small,
.fixed-rest-swap-dates em,
.fixed-rest-swap-note small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.fixed-rest-swap-dates strong {
  font-size: 13px;
}

.fixed-rest-swap-dates > i {
  display: grid;
  color: var(--text-soft);
  place-items: center;
}

.fixed-rest-swap-dates > i svg {
  width: 17px;
  height: 17px;
}

.fixed-rest-swap-note,
.fixed-rest-swap-guidance,
.fixed-rest-swap-empty {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.fixed-rest-swap-note > span,
.fixed-rest-swap-guidance > span,
.fixed-rest-swap-empty > span {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: var(--green);
  place-items: center;
}

.fixed-rest-swap-note p,
.fixed-rest-swap-guidance p,
.fixed-rest-swap-empty p {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fixed-rest-swap-note strong,
.fixed-rest-swap-guidance strong,
.fixed-rest-swap-empty strong {
  font-size: 13px;
}

.fixed-rest-swap-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.fixed-rest-swap-actions label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.fixed-rest-swap-actions label > span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.fixed-rest-swap-actions textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  resize: vertical;
}

.fixed-rest-swap-actions > div {
  display: flex;
  align-items: end;
  gap: 8px;
}

.fixed-rest-swap-actions .button.is-danger {
  color: #a4473c;
  border-color: #e5beb8;
  background: #fff8f6;
}

.fixed-rest-swap-empty {
  padding: 18px 20px;
  color: var(--muted);
}

.fixed-rest-swap-empty small,
.fixed-rest-swap-guidance small {
  color: var(--muted);
  font-size: 12px;
}

.fixed-rest-swap-form-body {
  display: grid;
  gap: 18px;
}

.fixed-rest-swap-guidance {
  padding: 12px;
  border: 1px solid #dce8df;
  border-radius: 6px;
  background: #f7fbf8;
}

@media (max-width: 980px) {
  .fixed-rest-swap-card {
    grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr);
  }

  .fixed-rest-swap-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .fixed-rest-swap-section {
    margin: 12px 0;
  }

  .fixed-rest-swap-head {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .fixed-rest-swap-head > span {
    width: 38px;
    height: 38px;
  }

  .fixed-rest-swap-head h2 {
    font-size: 17px;
  }

  .fixed-rest-swap-head .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .fixed-rest-swap-list {
    gap: 8px;
    padding: 8px;
  }

  .fixed-rest-swap-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }

  .fixed-rest-swap-identity {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .fixed-rest-swap-dates {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    gap: 5px;
  }

  .fixed-rest-swap-dates > span {
    padding: 9px;
  }

  .fixed-rest-swap-dates strong {
    font-size: 12px;
  }

  .fixed-rest-swap-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .fixed-rest-swap-actions > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fixed-rest-swap-actions button[value="escalate"] {
    grid-column: 1 / -1;
  }

  .fixed-rest-swap-actions .button {
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
  }

  .fixed-rest-swap-dialog .permission-field-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }

  .fixed-rest-swap-dialog input[type="date"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }
}

/* resources/css/features/workforce/attendance.css */
/* Attendance */
.attendance-capture-layout {
  gap: 12px;
  grid-template-columns: minmax(340px, 0.95fr) minmax(420px, 1.05fr);
}

.attendance-location-access {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}

.attendance-location-access.is-home {
  width: 100%;
  margin: 12px 0 0;
}

.attendance-location-access > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
}

.attendance-location-access > span svg {
  width: 18px;
  height: 18px;
}

.attendance-location-access strong,
.attendance-location-access p {
  display: block;
  margin: 0;
}

.attendance-location-access strong {
  font-size: 12px;
}

.attendance-location-access p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.attendance-location-access.is-blocked {
  border-color: #e5c7c1;
  background: #fffafa;
}

.attendance-location-access.is-blocked > span {
  background: #f8e9e6;
  color: #a55548;
}

.attendance-location-access.is-ready {
  grid-template-columns: 34px minmax(0, 1fr);
  border-color: #b8ddc4;
  background: #f2fbf5;
}

.attendance-location-access.is-ready > span {
  background: #dff4e6;
  color: #257348;
}

.attendance-location-access.is-ready strong {
  color: #1f6840;
}

.attendance-location-access.is-ready p {
  color: #4f6b5b;
}

.attendance-location-access.is-wfa {
  border-color: #c9dccf;
  background: #f7faf8;
}

.attendance-location-access.is-wfa > span {
  background: #e8f2eb;
  color: #4f765f;
}

.attendance-location-access .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.attendance-location-retry[aria-busy="true"] svg {
  animation: spin 0.8s linear infinite;
}

/* Team attendance queue: structural polish based on the latest reference. */
.team-attendance-board {
  gap: 20px;
}

.team-attendance-mode-switch {
  gap: 14px;
}

.team-attendance-mode-switch button {
  min-height: 116px;
  align-content: center;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  border-radius: 8px;
  padding: 24px 26px;
  box-shadow: 0 12px 28px rgba(22, 26, 32, 0.04);
}

.team-attendance-mode-icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
}

.team-attendance-mode-icon svg {
  width: 22px;
  height: 22px;
}

.team-attendance-mode-switch strong {
  font-size: 21px;
  line-height: 1.12;
}

.team-attendance-mode-copy > span {
  font-size: 14px;
  line-height: 1.35;
}

.team-attendance-mode-switch button.is-active {
  border-color: #15171c;
  background: #15171c;
  box-shadow: 0 18px 34px rgba(17, 19, 24, 0.12);
}

.team-attendance-metrics {
  gap: 16px;
}

.team-attendance-metric {
  min-height: 126px;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  border-radius: 8px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #fff 0%, #fbfcfd 100%);
}

.team-attendance-metric.is-active {
  border-color: #17191d;
  background: #fff;
  box-shadow: inset 0 0 0 1px #17191d, 0 12px 28px rgba(17, 17, 22, 0.06);
}

.team-attendance-metric > span {
  width: 56px;
  height: 56px;
  border-radius: 8px;
}

.team-attendance-metric > span svg {
  width: 24px;
  height: 24px;
}

.team-attendance-metric div {
  gap: 6px;
}

.team-attendance-metric strong {
  font-size: 17px;
  line-height: 1.22;
}

.team-attendance-metric small {
  font-size: 13px;
  line-height: 1.28;
}

.team-attendance-metric b {
  right: 24px;
  bottom: 22px;
  font-size: 31px;
}

.team-attendance-workbench {
  border-radius: 8px;
}

.team-attendance-head {
  align-items: flex-start;
  background: #fbfbfd;
  padding: 30px 32px;
}

.team-attendance-head h2 {
  margin-top: 4px;
  font-size: 30px;
  line-height: 1.15;
}

.team-attendance-head p {
  max-width: 740px;
  font-size: 16px;
  line-height: 1.5;
}

.team-attendance-scope {
  margin-top: 30px;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
}

.team-attendance-filters {
  gap: 18px;
  padding: 0 28px;
}

.team-attendance-filters button {
  min-height: 62px;
  padding: 0;
  font-size: 15px;
  font-weight: 780;
}

.team-attendance-filters b {
  min-width: 28px;
  height: 28px;
  font-size: 12px;
}

.team-attendance-card {
  gap: 18px;
  min-height: 136px;
  padding: 0 26px 0 24px;
}

.team-attendance-card-main {
  grid-template-columns: 72px minmax(240px, 1.25fr) minmax(180px, auto) minmax(180px, auto);
  gap: 24px;
  min-height: 136px;
}

.team-attendance-date {
  width: 72px;
  height: 78px;
}

.team-attendance-date small {
  font-size: 13px;
}

.team-attendance-date strong {
  font-size: 28px;
}

.team-attendance-copy small {
  font-size: 13px;
}

.team-attendance-copy strong {
  font-size: 22px;
  line-height: 1.18;
}

.team-attendance-copy em {
  font-size: 15px;
}

.team-attendance-times {
  gap: 14px;
}

.team-attendance-time-chip {
  min-width: 72px;
  gap: 4px;
}

.team-attendance-time-chip b {
  font-size: 19px;
}

.team-attendance-time-chip small {
  font-size: 11px;
  padding: 4px 9px;
}

.team-attendance-status {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
}

.team-attendance-card-actions .button {
  min-width: 170px;
  min-height: 56px;
  border-radius: 8px;
}

@media (max-width: 980px) {
  .team-attendance-mode-switch button {
    min-height: 96px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .team-attendance-mode-icon {
    width: 44px;
    height: 44px;
  }

  .team-attendance-mode-switch strong {
    font-size: 18px;
  }

  .team-attendance-mode-copy > span {
    font-size: 12px;
  }

  .team-attendance-metric {
    min-height: 116px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 16px 48px;
  }

  .team-attendance-metric > span {
    width: 44px;
    height: 44px;
  }

  .team-attendance-metric b {
    right: 16px;
    bottom: 14px;
    font-size: 28px;
  }

  .team-attendance-head {
    padding: 24px 22px;
  }

  .team-attendance-head h2 {
    font-size: 26px;
  }

  .team-attendance-head p {
    font-size: 14px;
  }

  .team-attendance-scope {
    margin-top: 8px;
  }

  .team-attendance-card {
    min-height: 0;
    padding: 16px;
  }

  .team-attendance-card-main {
    min-height: 0;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
  }

  .team-attendance-date {
    width: 58px;
    height: 64px;
  }

  .team-attendance-date strong {
    font-size: 23px;
  }

  .team-attendance-copy strong {
    font-size: 19px;
  }

  .team-attendance-times {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .team-attendance-status {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .team-attendance-card-actions {
    padding: 0;
  }
}

@media (max-width: 620px) {
  .team-attendance-board {
    gap: 14px;
  }

  .team-attendance-mode-switch {
    gap: 10px;
  }

  .team-attendance-mode-switch button {
    min-height: 86px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 12px;
  }

  .team-attendance-mode-icon {
    width: 38px;
    height: 38px;
  }

  .team-attendance-mode-switch strong {
    font-size: 15px;
  }

  .team-attendance-mode-copy > span {
    font-size: 11px;
  }

  .team-attendance-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .team-attendance-metric {
    min-height: 112px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 10px 40px;
  }

  .team-attendance-metric > span {
    width: 34px;
    height: 34px;
  }

  .team-attendance-metric > span svg {
    width: 17px;
    height: 17px;
  }

  .team-attendance-metric strong {
    font-size: 12px;
  }

  .team-attendance-metric small {
    font-size: 10px;
  }

  .team-attendance-metric b {
    right: 10px;
    bottom: 10px;
    font-size: 23px;
  }

  .team-attendance-head {
    padding: 20px 18px;
  }

  .team-attendance-head h2 {
    font-size: 24px;
  }

  .team-attendance-head p {
    font-size: 13px;
  }

  .team-attendance-filters {
    gap: 18px;
    padding: 0 18px;
  }

  .team-attendance-filters button {
    min-height: 56px;
    font-size: 13px;
  }

  .team-attendance-filters b {
    min-width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .team-attendance-card {
    padding: 16px 14px;
  }

  .team-attendance-copy strong {
    font-size: 18px;
    white-space: normal;
  }

  .team-attendance-copy em {
    font-size: 13px;
  }

  .team-attendance-times {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    width: 100%;
    gap: 8px;
  }

  .team-attendance-time-chip {
    min-width: 0;
    justify-items: start;
    border: 1px solid #edf0f3;
    border-radius: 8px;
    padding: 9px 10px;
  }

  .team-attendance-time-chip b {
    font-size: 17px;
  }

  .team-attendance-times i {
    justify-content: center;
    align-self: center;
  }

  .team-attendance-status {
    min-height: 38px;
    font-size: 12px;
  }

  .team-attendance-card-actions .button {
    min-height: 50px;
  }
}

.attendance-capture-layout.attendance-capture-single {
  grid-template-columns: minmax(0, 1fr);
}

.attendance-clock-panel,
.attendance-context-panel,
.attendance-latest,
.attendance-empty,
.attendance-list-section,
.attendance-record-row {
  border-color: var(--line);
  border-radius: 12px;
  background: white;
}

.attendance-clock-panel {
  background: white;
  color: var(--ink);
  min-height: 214px;
  padding: 18px 20px;
}

.attendance-local-time {
  font-family: "JetBrains Mono", Consolas, monospace;
  margin-top: 10px;
  font-size: 36px;
  font-weight: 600;
}

.attendance-current-date {
  margin-top: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  text-transform: capitalize;
}

.attendance-clock-panel .attendance-timezone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 11px;
}

.attendance-clock-panel .attendance-timezone svg {
  width: 13px;
  height: 13px;
}

.attendance-clock-button {
  width: min(100%, 330px);
  min-height: 46px;
  margin: 18px 0 0;
  background: #111116;
}

.attendance-clock-complete {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  border: 1px solid #c9e5d4;
  border-radius: 7px;
  background: #edf8f2;
  color: #2f7d56;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 800;
}

.attendance-clock-complete svg { width: 16px; height: 16px; }

@media (min-width: 761px) {
  .attendance-clock-panel.is-complete { min-height: 214px; padding: 18px 20px; }
}

.attendance-today-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 3px solid #9ca7a1;
  border-radius: 8px;
  background: white;
}

.attendance-today-panel.tone-success { border-left-color: #2f7d56; }
.attendance-today-panel.tone-info { border-left-color: var(--blue); }
.attendance-today-panel.tone-warning { border-left-color: var(--amber); }
.attendance-today-panel.tone-danger { border-left-color: var(--coral); }

.attendance-today-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
}

.attendance-today-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f2;
  color: #59665f;
}

.attendance-today-icon svg { width: 20px; height: 20px; }
.attendance-today-head h2 { margin: 2px 0 0; font-size: 18px; }
.attendance-today-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }

.attendance-today-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  background: #fafbfA;
}

.attendance-today-facts > div {
  display: grid;
  min-height: 72px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
}

.attendance-today-facts > div:nth-child(odd) { border-right: 1px solid var(--line); }
.attendance-today-facts > div:nth-last-child(-n + 2) { border-bottom: 0; }
.attendance-today-facts > div > span { color: #68746e; }
.attendance-today-facts > div > span svg { width: 16px; height: 16px; }
.attendance-today-facts p { display: flex; min-width: 0; flex-direction: column; gap: 2px; margin: 0; }
.attendance-today-facts small { color: var(--muted); font-size: 9px; }
.attendance-today-facts strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attendance-today-facts .tone-success strong { color: var(--accent-strong); }
.attendance-today-facts .tone-info strong { color: var(--blue); }
.attendance-today-facts .tone-warning strong { color: #956510; }
.attendance-today-facts .tone-danger strong { color: var(--coral); }

.attendance-today-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  border-top: 1px solid #f1d6b0;
  background: #fff9ef;
  color: #805713;
  padding: 10px 14px;
  font-size: 10px;
}

.attendance-today-warning svg { width: 14px; height: 14px; flex: 0 0 auto; }

.attendance-view-switch {
  width: max-content;
  border-radius: 10px;
  background: #f0f0f5;
  padding: 4px;
}

.attendance-view-switch button {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
}

.attendance-view-switch button.active {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
}

.attendance-summary {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.attendance-personal-history {
  margin-top: 24px;
}

.attendance-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.attendance-history-heading > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.attendance-history-heading-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: #eef4f1;
  color: var(--accent);
}

.attendance-history-heading-icon svg { width: 18px; height: 18px; }
.attendance-history-heading h2 { margin: 2px 0 0; font-size: 18px; }
.attendance-history-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.attendance-history-count { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--text-soft); padding: 7px 10px; font-size: 10px; font-weight: 750; }

.attendance-check-info {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  border: 1px solid #cfdaef;
  border-radius: 7px;
  background: #f5f8fd;
  color: #405879;
  padding: 11px 13px;
}

.attendance-check-info > svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.attendance-check-info p { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 10px; }
.attendance-check-info span { color: #60728e; }

.attendance-personal-history-stack {
  display: grid;
  gap: 10px;
}

.attendance-personal-history-day {
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 3px solid #9ca7a1;
  border-radius: 8px;
  background: white;
}

.attendance-personal-history-day.tone-success { border-left-color: var(--accent); }
.attendance-personal-history-day.tone-info { border-left-color: var(--blue); }
.attendance-personal-history-day.tone-warning { border-left-color: var(--amber); }
.attendance-personal-history-day.tone-danger { border-left-color: var(--coral); }

.attendance-personal-history-day > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
}

.attendance-personal-history-day > header > div { display: flex; min-width: 0; align-items: center; gap: 10px; }
.attendance-personal-history-day > header span:not(.attendance-history-day-icon, .attendance-history-status) { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.attendance-personal-history-day h3 { margin: 2px 0 0; font-size: 14px; }
.attendance-history-day-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: #f1f4f2; color: #5e6a64; }
.attendance-history-day-icon svg { width: 17px; height: 17px; }
.attendance-history-status { flex: 0 0 auto; border-radius: 5px; background: #f1f3f2; color: #5d6862; padding: 5px 8px; font-size: 9px; font-weight: 800; }
.attendance-history-status.tone-success { background: var(--accent-soft); color: var(--accent-strong); }
.attendance-history-status.tone-info { background: #edf3fc; color: var(--blue); }
.attendance-history-status.tone-warning { background: #fff5df; color: #8c5e0c; }
.attendance-history-status.tone-danger { background: var(--coral-soft); color: var(--coral); }

.attendance-history-day-body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  background: #fafbfa;
}

.attendance-history-day-body > div {
  display: grid;
  min-height: 76px;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--line);
  padding: 11px 13px;
}

.attendance-history-day-body > div:last-child { border-right: 0; }
.attendance-history-day-body > div > span { color: #67736d; }
.attendance-history-day-body > div > span svg { width: 16px; height: 16px; }
.attendance-history-day-body p { display: flex; min-width: 0; flex-direction: column; gap: 2px; margin: 0; }
.attendance-history-day-body small { color: var(--muted); font-size: 9px; }
.attendance-history-day-body strong { font-size: 11px; }
.attendance-history-day-body i { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.attendance-history-day-body .tone-success strong { color: var(--accent-strong); }
.attendance-history-day-body .tone-info strong { color: var(--blue); }
.attendance-history-day-body .tone-warning strong { color: #8e600e; }
.attendance-history-day-body .tone-danger strong { color: var(--coral); }

.attendance-history-warning,
.attendance-history-note,
.attendance-history-action-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  color: var(--text-soft);
  font-size: 10px;
}

.attendance-history-warning { background: #fff9ef; color: #805713; }
.attendance-history-action-note { background: #f5f8fd; color: #405879; }
.attendance-history-warning svg,
.attendance-history-note svg,
.attendance-history-action-note svg { width: 14px; height: 14px; flex: 0 0 auto; }

.attendance-history-action,
.attendance-personal-history-day > .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 12px 14px;
}

.attendance-personal-history-day > .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }

.attendance-history-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  text-align: center;
}

.attendance-history-empty svg { width: 24px; height: 24px; }
.attendance-history-empty p { margin: 0; font-size: 11px; }

.attendance-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
}

.attendance-summary-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.attendance-summary-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: #eef4f1;
  color: var(--accent);
}

.attendance-summary-icon svg { width: 21px; height: 21px; }
.attendance-summary-head h2 { margin: 2px 0 0; font-size: 20px; text-transform: capitalize; }
.attendance-summary-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.attendance-summary-timezone {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
}

.attendance-summary-timezone svg { width: 14px; height: 14px; }

.attendance-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fafcfb;
}

.attendance-summary-metric {
  display: grid;
  min-height: 82px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 14px 18px;
  color: inherit;
  text-align: left;
}

button.attendance-summary-metric { cursor: pointer; }
button.attendance-summary-metric:hover { background: #f4f7f5; }
button.attendance-summary-metric[aria-pressed="true"] { background: white; box-shadow: inset 0 -3px 0 currentColor; }
button.attendance-summary-metric.tone-warning { color: var(--amber); }
button.attendance-summary-metric.tone-warning:hover { background: #f4f7f5; }
button.attendance-summary-metric.tone-warning[aria-pressed="true"] { background: white; color: var(--amber); }
button.attendance-summary-metric:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(77, 102, 193, 0.24); outline-offset: -3px; }

.attendance-summary-metric + .attendance-summary-metric { border-left: 1px solid var(--line); }
.attendance-summary-metric > span { color: #65726c; }
.attendance-summary-metric.tone-success > span { color: #2f7d56; }
.attendance-summary-metric.tone-info > span { color: var(--blue); }
.attendance-summary-metric.tone-warning > span { color: var(--amber); }
.attendance-summary-metric.tone-danger > span { color: var(--coral); }
.attendance-summary-metric > span svg { width: 18px; height: 18px; }
.attendance-summary-metric > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1px 8px; }
.attendance-summary-metric small { color: var(--text-soft); font-size: 11px; font-weight: 800; }
.attendance-summary-metric strong { grid-row: span 2; font-size: 23px; }
.attendance-summary-metric p { margin: 0; color: var(--muted); font-size: 10px; }

.attendance-calendar-desktop { padding: 18px 22px 12px; }
.attendance-calendar-weekdays,
.attendance-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.attendance-calendar-weekdays { border: 1px solid var(--line); border-bottom: 0; border-radius: 7px 7px 0 0; background: #f4f6f5; }
.attendance-calendar-weekdays span { padding: 10px; color: var(--text-soft); font-size: 11px; font-weight: 800; text-align: center; }
.attendance-calendar-weekdays span + span { border-left: 1px solid var(--line); }
.attendance-calendar-grid { overflow: hidden; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 0 0 7px 7px; }

.attendance-calendar-blank,
.attendance-calendar-day {
  min-width: 0;
  min-height: 116px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: white;
}

.attendance-calendar-blank { background: #fafbfa; }
.attendance-calendar-day { display: flex; flex-direction: column; gap: 6px; padding: 10px; text-align: left; cursor: pointer; }
.attendance-calendar-day:hover { background: #f8faf9; }
.attendance-calendar-day.selected { box-shadow: inset 0 0 0 2px #111116; }
.attendance-calendar-day.today { background: #f3f8f5; }
.attendance-calendar-day.category-complete { background: #f2faf5; }
.attendance-calendar-day.category-processing { background: #f5f8fd; }
.attendance-calendar-day.category-handling { background: #fffaf0; }
.attendance-calendar-date { display: flex; min-height: 22px; align-items: center; justify-content: space-between; gap: 6px; }
.attendance-calendar-date strong { font-size: 13px; }
.attendance-calendar-date i { border-radius: 4px; background: #111116; color: white; padding: 3px 5px; font-size: 8px; font-style: normal; font-weight: 800; }
.attendance-calendar-state { width: max-content; max-width: 100%; border-radius: 4px; background: #f0f2f1; color: #5d6862; padding: 3px 6px; font-size: 8px; font-weight: 800; line-height: 1.2; }
.attendance-calendar-day.category-complete .attendance-calendar-state { background: #e2f3e9; color: #2f7d56; }
.attendance-calendar-day.category-processing .attendance-calendar-state { background: #e8f0fb; color: var(--blue); }
.attendance-calendar-day.category-handling .attendance-calendar-state { background: #f7edcf; color: #765716; }
.attendance-calendar-schedule { display: flex; min-width: 0; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.attendance-calendar-schedule svg { width: 10px; height: 10px; flex: 0 0 auto; }

.attendance-calendar-line {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 9px;
}

.attendance-calendar-line i { color: var(--muted); font-style: normal; }
.attendance-calendar-line b { flex: 0 0 auto; font-size: 10px; white-space: nowrap; }
.attendance-calendar-line.tone-success { color: #2f7d56; }
.attendance-calendar-line.tone-info { color: var(--blue); }
.attendance-calendar-line.tone-warning { color: #9a6811; }
.attendance-calendar-line.tone-danger { color: var(--coral); }
.attendance-calendar-line.tone-neutral { color: #66736d; }
.attendance-calendar-day.category-handling .attendance-calendar-line.tone-danger { color: #956510; }

.attendance-mobile-calendar-divider,
.attendance-calendar-mobile { display: none; }

.attendance-action-summary-trigger {
  display: none;
  width: calc(100% - 44px);
  min-height: 74px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 18px 22px 2px;
  border: 1px solid #ddc98d;
  border-radius: 7px;
  background: #fffaf0;
  padding: 13px 15px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.attendance-action-summary-trigger:hover { background: #fff7e6; }
.attendance-action-summary-trigger:focus-visible { outline: 3px solid rgba(139, 101, 8, 0.22); outline-offset: 2px; }
.attendance-action-summary-trigger > span:first-child { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 7px; background: #f7edcf; color: var(--amber); }
.attendance-action-summary-trigger > span:first-child svg { width: 18px; height: 18px; }
.attendance-action-summary-trigger > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.attendance-action-summary-trigger strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.attendance-action-summary-trigger small { color: #695f45; font-size: 10px; }
.attendance-action-summary-trigger em { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.attendance-action-summary-trigger em svg { width: 13px; height: 13px; }
.attendance-action-summary-trigger.tone-info { border-color: #cbd8ef; background: #f8faff; }
.attendance-action-summary-trigger.tone-info:hover { background: #f1f6fd; }
.attendance-action-summary-trigger.tone-info > span:first-child { background: #e8f0fb; color: var(--blue); }
.attendance-action-summary-trigger.tone-info em { color: var(--blue); }
.attendance-action-summary-trigger.tone-success { border-color: #c9e2d4; background: #f3faf6; }
.attendance-action-summary-trigger.tone-success:hover { background: #eef7f2; }
.attendance-action-summary-trigger.tone-success > span:first-child { background: #e2f3e9; color: #2f7d56; }
.attendance-action-summary-trigger.tone-success em { color: #2f7d56; }

.attendance-action-summary {
  margin: 18px 22px 2px;
  overflow: hidden;
  border: 1px solid #e2d3a8;
  border-radius: 7px;
  background: #fffdf7;
}

.attendance-action-summary-inline { display: block; }
.attendance-action-summary.tone-info { border-color: #cbd8ef; background: #f8faff; }
.attendance-action-summary.tone-info > header { border-bottom-color: #dbe4f4; }
.attendance-action-summary.tone-info > header > span { background: #e8f0fb; color: var(--blue); }
.attendance-action-summary.tone-success { border-color: #c9e2d4; background: #f3faf6; }
.attendance-action-summary.tone-success > header { border-bottom-color: #d8eadf; }
.attendance-action-summary.tone-success > header > span { background: #e2f3e9; color: #2f7d56; }

.attendance-action-summary > header {
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #eadfbe;
  padding: 13px 15px;
}

.attendance-action-summary > header > span { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: #f7edcf; color: var(--amber); }
.attendance-action-summary > header > span svg { width: 17px; height: 17px; }
.attendance-action-summary h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.25; }
.attendance-action-summary header p { margin: 4px 0 0; color: #695f45; font-size: 10px; }
.attendance-action-list { display: grid; }
.attendance-action-list button,
.attendance-action-list article { display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 0; background: white; padding: 11px 14px; text-align: left; }
.attendance-action-list button { cursor: pointer; }
.attendance-action-list button + button,
.attendance-action-list article + article { border-top: 1px solid var(--line); }
.attendance-action-list button:hover { background: #f7f8f7; }
.attendance-action-date { display: grid; width: 38px; height: 38px; place-items: center; align-content: center; border: 1px solid #ddc98d; border-radius: 6px; background: #fffcf3; color: var(--amber); }
.attendance-action-date strong { font-size: 14px; line-height: 1; }
.attendance-action-date i { margin-top: 2px; font-size: 8px; font-style: normal; text-transform: uppercase; }
.attendance-action-list button > span:nth-child(2),
.attendance-action-list article > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.attendance-action-list button > span:nth-child(2) strong,
.attendance-action-list article > span:nth-child(2) strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attendance-action-list button > span:nth-child(2) i,
.attendance-action-list article > span:nth-child(2) i { color: var(--muted); font-size: 9px; font-style: normal; }
.attendance-action-list em { display: inline-flex; align-items: center; gap: 5px; color: #8a5b08; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.attendance-action-list em svg { width: 13px; height: 13px; }
.attendance-action-summary.tone-info .attendance-action-date { border-color: #cbd8ef; color: var(--blue); }
.attendance-action-summary.tone-info .attendance-action-list em { color: var(--blue); }
.attendance-action-summary.tone-success .attendance-action-date { border-color: #c9e2d4; color: #2f7d56; }
.attendance-action-summary.tone-success .attendance-action-list em { color: #2f7d56; }
.attendance-action-empty { margin: 0; background: white; padding: 18px 15px; color: var(--muted); font-size: 11px; }

.attendance-summary-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  background: white;
  padding: 10px 12px;
}

.attendance-summary-pagination span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.attendance-summary-pagination > div {
  display: flex;
  gap: 6px;
}

.attendance-summary-pagination .icon-button {
  width: 32px;
  height: 32px;
}

.attendance-summary-pagination .icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.attendance-day-detail {
  display: grid;
  grid-template-columns: 40px minmax(180px, 0.9fr) minmax(320px, 1.35fr);
  align-items: center;
  gap: 13px;
  margin: 0 22px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid #9ca7a1;
  border-radius: 7px;
  padding: 14px;
}

.attendance-day-detail.tone-success { border-left-color: #2f7d56; }
.attendance-day-detail.tone-info { border-left-color: var(--blue); }
.attendance-day-detail.tone-warning { border-left-color: var(--amber); }
.attendance-day-detail.tone-danger { border-left-color: var(--coral); }
.attendance-day-detail-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 7px; background: #f0f3f1; color: #5f6b65; }
.attendance-day-detail.tone-success .attendance-day-detail-icon { background: #e7f4ec; color: #2f7d56; }
.attendance-day-detail.tone-info .attendance-day-detail-icon { background: #eaf0fb; color: var(--blue); }
.attendance-day-detail.tone-warning .attendance-day-detail-icon { background: #fff3d1; color: #956510; }
.attendance-day-detail.tone-danger .attendance-day-detail-icon { background: #fdeceb; color: var(--coral); }
.attendance-day-detail-icon svg { width: 19px; height: 19px; }
.attendance-day-detail-main h3 { margin: 2px 0 0; font-size: 14px; }
.attendance-day-detail-main p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.attendance-day-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.attendance-day-facts > div { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 54px; padding: 9px 11px; }
.attendance-day-facts > div + div { border-left: 1px solid var(--line); }
.attendance-day-facts > div > span { color: #6a756f; }
.attendance-day-facts > div > span svg { width: 16px; height: 16px; }
.attendance-day-facts p { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.attendance-day-facts small { color: var(--muted); font-size: 9px; }
.attendance-day-facts strong { font-size: 11px; }
.attendance-day-facts i { color: var(--muted); font-size: 9px; font-style: normal; }
.attendance-day-facts .tone-success strong { color: #2f7d56; }
.attendance-day-facts .tone-info strong { color: var(--blue); }
.attendance-day-facts .tone-warning strong { color: #956510; }
.attendance-day-facts .tone-danger strong { color: var(--coral); }
.attendance-day-note { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; margin: -3px 0 0; color: var(--muted); font-size: 9px; }
.attendance-day-note svg { width: 12px; height: 12px; }
.attendance-day-action { grid-column: 2 / -1; width: max-content; justify-self: end; }
.attendance-day-detail.in-dialog { margin: 0; }

.attendance-summary-dialog {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(25, 28, 27, 0.24);
}

.attendance-summary-dialog::backdrop {
  background: rgba(24, 27, 26, 0.56);
  backdrop-filter: blur(3px);
}

.attendance-summary-dialog-shell {
  position: relative;
  background: white;
  padding: 18px;
}

.attendance-summary-dialog-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
}

.attendance-summary-dialog .attendance-action-summary {
  margin: 0;
}

.attendance-summary-dialog .attendance-action-summary > header {
  padding-right: 60px;
}

.attendance-action-list.in-dialog {
  max-height: min(420px, 58vh);
  overflow: auto;
}

.attendance-day-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(25, 28, 27, 0.24);
}

.attendance-day-dialog::backdrop {
  background: rgba(24, 27, 26, 0.56);
  backdrop-filter: blur(3px);
}

.attendance-day-dialog-shell {
  background: white;
}

.attendance-day-dialog-shell > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.attendance-day-dialog-shell h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.attendance-day-dialog-shell header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.attendance-day-dialog-body {
  padding: 18px 20px 20px;
}

.attendance-action-dialog { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 24px); overflow: hidden; border: 0; border-radius: 10px; padding: 0; box-shadow: 0 24px 70px rgba(25, 28, 27, 0.24); }
.attendance-action-dialog::backdrop { background: rgba(24, 27, 26, 0.56); backdrop-filter: blur(3px); }
.attendance-action-dialog-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100dvh - 24px); }
.attendance-action-dialog-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 18px 20px; }
.attendance-action-dialog-shell h2 { margin: 3px 0 0; font-size: 20px; }
.attendance-action-dialog-shell header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.attendance-action-dialog-body { display: grid; min-height: 0; gap: 14px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 18px; padding: 18px 20px; }
.attendance-action-reason { display: flex; align-items: center; gap: 11px; border: 1px solid #e1c46f; border-radius: 7px; background: #fffaf0; padding: 11px 12px; color: #765716; }
.attendance-action-reason > svg { width: 19px; height: 19px; flex: 0 0 auto; }
.attendance-action-reason p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.attendance-action-reason strong { color: var(--ink); font-size: 12px; }
.attendance-action-reason span { color: var(--muted); font-size: 10px; }
.attendance-action-form { display: grid; gap: 14px; }
.attendance-action-form .field { margin-bottom: 0; }
.attendance-action-form .field > span { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.attendance-action-form textarea { min-height: 96px; padding: 12px 13px; line-height: 1.45; }
.attendance-explanation-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.attendance-explanation-tab { display: grid; min-width: 0; min-height: 62px; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 9px 10px; color: var(--ink); text-align: left; }
.attendance-explanation-tab > span:first-child { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 6px; background: #f1f3f2; color: #68716c; }
.attendance-explanation-tab.scope-clock-out > span:first-child { background: #f1f3f2; color: #68716c; }
.attendance-explanation-tab svg { width: 16px; height: 16px; }
.attendance-explanation-tab > span:last-child { display: grid; min-width: 0; gap: 2px; }
.attendance-explanation-tab small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.attendance-explanation-tab strong { overflow: hidden; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.attendance-explanation-tab.is-active { border-color: #aeb7b1; background: #fff; box-shadow: inset 0 -2px 0 #242a27; }
.attendance-explanation-tab.scope-clock-out.is-active { border-color: #aeb7b1; background: #fff; box-shadow: inset 0 -2px 0 #242a27; }
.attendance-explanation-tab:focus-visible { outline: 3px solid rgba(179, 79, 65, 0.18); outline-offset: 2px; }
.attendance-explanation-items { display: grid; gap: 12px; }
.attendance-explanation-items.is-tabbed { gap: 0; }
.attendance-explanation-item[hidden] { display: none; }
.attendance-explanation-item { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 13px; }
.attendance-explanation-item.scope-clock-out { background: #fff; }
.attendance-explanation-heading { display: flex; align-items: center; gap: 11px; }
.attendance-explanation-heading > span { display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border-radius: 7px; background: #fbecea; color: #b34f41; }
.attendance-explanation-item.scope-clock-out .attendance-explanation-heading > span { background: #fbecea; color: #b34f41; }
.attendance-explanation-heading svg { width: 18px; height: 18px; }
.attendance-explanation-heading p { display: grid; gap: 2px; min-width: 0; margin: 0; }
.attendance-explanation-heading small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.attendance-explanation-heading strong { color: var(--ink); font-size: 13px; line-height: 1.35; }
.attendance-explanation-heading i { color: var(--muted); font-size: 10px; font-style: normal; }
.attendance-explanation-item textarea { min-height: 82px; background: #fff; }
.attendance-action-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.attendance-action-form .button { width: 100%; min-height: 45px; justify-self: stretch; }
.attendance-action-submit { z-index: 3; border-top: 1px solid var(--line); background: #fff; padding: 12px 20px 20px; box-shadow: 0 -8px 18px rgba(25, 28, 27, 0.05); }
.attendance-action-submit .button { width: 100%; min-height: 45px; }
.attendance-evidence-field > span small { color: var(--muted); font-weight: 500; }
.attendance-evidence-field > small { color: var(--muted); font-size: 9px; }
.attendance-evidence-picker { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 11px; min-height: 58px; border: 1px dashed #c7cfc9; border-radius: 7px; background: #f8faf9; padding: 9px 10px; cursor: pointer; }
.attendance-evidence-picker:hover { border-color: #8c9891; background: #f2f6f3; }
.attendance-evidence-picker:focus-within { outline: 3px solid rgba(77, 102, 193, 0.2); outline-offset: 2px; }
.attendance-evidence-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.attendance-evidence-picker > span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; background: white; padding: 8px 10px; color: var(--ink); font-size: 10px; font-weight: 750; }
.attendance-evidence-picker > span svg { width: 14px; height: 14px; }
.attendance-evidence-picker > small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.attendance-evidence-list { display: flex; flex-wrap: wrap; gap: 6px; }
.attendance-evidence-list:empty { display: none; }
.attendance-evidence-list > span { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: 5px; border: 1px solid #dce3de; border-radius: 5px; background: white; padding: 6px 8px; color: #526159; }
.attendance-evidence-list svg { width: 12px; height: 12px; flex: 0 0 auto; }
.attendance-evidence-list i { overflow: hidden; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.attendance-action-unavailable { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 7px; background: #f7f8f7; padding: 13px; color: var(--muted); }
.attendance-action-unavailable > svg { width: 17px; height: 17px; flex: 0 0 auto; }
.attendance-action-unavailable p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.attendance-action-unavailable strong { color: var(--ink); font-size: 11px; }
.attendance-action-unavailable span { font-size: 10px; }

.attendance-summary-legend { display: flex; flex-wrap: wrap; gap: 14px; border-top: 1px solid var(--line); padding: 11px 22px; color: var(--muted); font-size: 9px; }
.attendance-summary-legend span { display: inline-flex; align-items: center; gap: 5px; }
.attendance-summary-legend i { width: 7px; height: 7px; border-radius: 50%; background: #9ba59f; }
.attendance-summary-legend i.success { background: #2f7d56; }
.attendance-summary-legend i.info { background: var(--blue); }
.attendance-summary-legend i.warning { width: 8px; height: 8px; background: var(--amber); box-shadow: 0 0 0 2px rgba(139, 101, 8, 0.13); }
.attendance-summary-legend i.danger { background: var(--coral); }

.team-attendance-board {
  display: grid;
  gap: 18px;
}

.team-attendance-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.team-attendance-metric,
.team-attendance-workbench,
.team-attendance-dialog {
  border: 1px solid var(--line);
  background: white;
}

.team-attendance-metric {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 84px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  padding: 11px 44px 11px 11px;
  text-align: left;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 251, 0.9));
  box-shadow: 0 10px 26px rgba(30, 36, 32, 0.04);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.team-attendance-metric:hover {
  border-color: #c5cbc8;
  box-shadow: 0 10px 24px rgba(30, 36, 32, 0.06);
  transform: translateY(-1px);
}

.team-attendance-metric:active {
  transform: translateY(1px);
}

.team-attendance-metric.is-active {
  border-color: #17191d;
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: inset 0 0 0 1px #17191d, 0 10px 22px rgba(17, 17, 22, 0.07);
}

.team-attendance-metric > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #f0f1f4;
  color: #656976;
}

.team-attendance-metric div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.team-attendance-metric strong,
.team-attendance-metric small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-attendance-metric strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.2;
  white-space: normal;
}

.team-attendance-metric small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.team-attendance-metric b {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.team-attendance-metric > span svg { width: 20px; height: 20px; }
.team-attendance-metric.tone-warning > span { background: #fff4db; color: #a16d10; }
.team-attendance-metric.tone-info > span { background: #eef3ff; color: #5d72d8; }
.team-attendance-metric.tone-success > span { background: #eaf6ee; color: #3e8b5f; }

.team-attendance-workbench {
  overflow: hidden;
  border-radius: 10px;
}

.team-attendance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfd;
  padding: 20px 22px;
}

.team-attendance-head h2 {
  margin: 3px 0 0;
  font-size: 22px;
}

.team-attendance-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.team-attendance-scope {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--text-soft);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 750;
}

.team-attendance-scope svg { width: 14px; height: 14px; }

.team-attendance-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.team-attendance-mode-switch button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  cursor: pointer;
  padding: 16px 18px;
  color: var(--text-soft);
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.team-attendance-mode-switch button:hover {
  border-color: #bec6d0;
  box-shadow: 0 8px 22px rgba(25, 28, 34, 0.05);
}

.team-attendance-mode-switch button:active { transform: translateY(1px); }

.team-attendance-mode-switch button.is-active {
  border-color: #17191d;
  background: #17191d;
  box-shadow: 0 14px 28px rgba(17, 19, 24, 0.14), inset 0 0 0 1px #17191d;
  color: #ffffff;
}

.team-attendance-mode-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 9px;
  background: #f0f2f6;
  color: #6a7280;
}

.team-attendance-mode-icon svg {
  width: 18px;
  height: 18px;
}

.team-attendance-mode-switch button.is-active .team-attendance-mode-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.team-attendance-mode-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.team-attendance-mode-switch strong {
  color: inherit;
  font-size: 16px;
  font-weight: 900;
}

.team-attendance-mode-copy > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.team-attendance-mode-switch button.is-active .team-attendance-mode-copy > span {
  color: rgba(255, 255, 255, 0.72);
}

.team-attendance-filters {
  display: flex;
  min-width: 0;
  gap: 3px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0 18px;
  scrollbar-width: none;
}

.team-attendance-filters::-webkit-scrollbar { display: none; }

.team-attendance-filters button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 42px;
  min-width: max-content;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #676b77;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.team-attendance-filters button.active {
  border-bottom-color: #111116;
  background: transparent;
  color: #111116;
}

.team-attendance-filters b {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #f0f1f4;
  color: var(--text-soft);
  font-size: 11px;
}

.team-attendance-filters button.active b {
  background: #111116;
  color: #fff;
}

.team-attendance-list {
  display: grid;
}

.team-attendance-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  padding: 14px 18px 14px 15px;
}

.team-attendance-card:last-child { border-bottom: 0; }
.team-attendance-card.tone-warning { border-left-color: #d3a247; }
.team-attendance-card.tone-info { border-left-color: #5f79d8; }
.team-attendance-card.tone-danger { border-left-color: #c85f55; }
.team-attendance-card.tone-success { border-left-color: #4f9e69; }
.team-attendance-card.tone-neutral { border-left-color: #aab0b7; }

.team-attendance-card-main {
  display: grid;
  min-width: 0;
  grid-template-columns: 54px minmax(190px, 1fr) minmax(120px, auto) minmax(150px, auto);
  align-items: center;
  gap: 14px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.team-attendance-card-main:hover .team-attendance-copy strong { text-decoration: underline; }
.team-attendance-card-main.is-passive {
  cursor: default;
}
.team-attendance-card-main.is-passive:hover .team-attendance-copy strong {
  text-decoration: none;
}

.team-attendance-date {
  display: grid;
  width: 48px;
  height: 52px;
  place-items: center;
  align-content: center;
  border-radius: 8px;
  background: #f2f3f6;
}

.team-attendance-date small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: capitalize;
}

.team-attendance-date strong {
  font-size: 19px;
  line-height: 1;
}

.team-attendance-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.team-attendance-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.team-attendance-copy strong {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-copy em {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-times {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.team-attendance-times i {
  display: inline-flex;
  color: var(--muted);
}

.team-attendance-times svg { width: 13px; height: 13px; }

.team-attendance-time-chip {
  display: grid;
  min-width: 54px;
  justify-items: center;
  gap: 1px;
}

.team-attendance-time-chip b {
  font-size: 13px;
  line-height: 1;
}

.team-attendance-time-chip small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 999px;
  background: #eef1f5;
  color: #67717c;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}

.team-attendance-time-chip small svg {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

.team-attendance-time-chip.tone-system small {
  background: #edf8f2;
  color: #2f7d56;
}

.team-attendance-time-chip.tone-correction small {
  background: #eef4ff;
  color: #4d66c1;
}

.team-attendance-time-chip.tone-muted small {
  background: #f0f1f4;
  color: #777f88;
}

.team-attendance-status {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--text-soft);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.team-attendance-card.tone-warning .team-attendance-status { background: #fff5df; color: #946510; }
.team-attendance-card.tone-info .team-attendance-status { background: #eef4ff; color: #4d66c1; }
.team-attendance-card.tone-danger .team-attendance-status { background: #fdeceb; color: #b34f41; }
.team-attendance-card.tone-success .team-attendance-status { background: #edf8f2; color: #2f7d56; }
.team-attendance-status svg { width: 14px; height: 14px; }

.team-attendance-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-attendance-card-actions .button {
  min-height: 38px;
  white-space: nowrap;
}

.team-attendance-owner-escalated-action:disabled {
  border-color: #dfe3e8;
  background: #f3f5f7;
  color: #626a75;
  cursor: not-allowed;
  opacity: 1;
}

.team-attendance-owner-escalated-action svg {
  width: 15px;
  height: 15px;
}

.team-attendance-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.team-attendance-empty svg { width: 28px; height: 28px; color: #8a9490; }
.team-attendance-empty h3 { margin: 0; color: var(--ink); font-size: 18px; }
.team-attendance-empty p { max-width: 420px; margin: 0; font-size: 12px; }

.team-attendance-archive-workbench {
  overflow: visible;
}

.team-attendance-archive-date-area {
  display: grid;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 16px 18px;
}

.team-attendance-archive-date-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.team-attendance-archive-date-head div {
  display: grid;
  gap: 3px;
}

.team-attendance-archive-date-head span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.team-attendance-archive-date-head strong {
  color: var(--ink);
  font-size: 18px;
}

.team-attendance-archive-date-head small {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f1f3f6;
  color: var(--text-soft);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
}

.team-attendance-archive-date-strip {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.team-attendance-archive-date-strip::-webkit-scrollbar {
  display: none;
}

.team-attendance-archive-date-strip button {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  min-width: 70px;
  height: 76px;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid #e4e7ec;
  border-radius: 9px;
  background: #f8f9fb;
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  padding: 8px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  text-align: center;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.team-attendance-archive-date-strip button:hover {
  border-color: #c6cbd4;
  background: #fff;
}

.team-attendance-archive-date-strip button:active {
  transform: translateY(1px);
}

.team-attendance-archive-date-strip button.is-active {
  border-color: #17191d;
  background: #17191d;
  color: #ffffff;
}

.team-attendance-archive-date-strip button span {
  font-size: 10px;
  font-weight: 850;
  text-transform: capitalize;
}

.team-attendance-archive-date-strip button strong {
  font-size: 22px;
  line-height: 1;
}

.team-attendance-archive-date-strip button small {
  color: inherit;
  font-size: 9px;
  font-weight: 750;
}

.team-attendance-archive-date-strip button em {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(102, 115, 109, 0.12);
  color: inherit;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.team-attendance-archive-date-strip button.is-active em {
  background: rgba(255, 255, 255, 0.18);
}

.team-attendance-archive-date-empty {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.team-attendance-archive-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(170px, 280px) minmax(130px, 180px);
  align-items: end;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
  padding: 14px 18px;
}

.team-attendance-archive-toolbar label {
  display: grid;
  min-width: 0;
  max-width: 100%;
  min-inline-size: 0;
  gap: 6px;
}

.team-attendance-archive-toolbar label span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.team-attendance-archive-toolbar input,
.team-attendance-archive-toolbar select {
  box-sizing: border-box;
  display: block;
  inline-size: 100%;
  width: 100%;
  max-inline-size: 100%;
  max-width: 100%;
  min-width: 0;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid #d9dee6;
  border-radius: 7px;
  background: #fbfbfc;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.team-attendance-archive-toolbar select[data-attendance-archive-filter="status"] {
  text-align: center;
  text-align-last: center;
  padding-inline: 28px;
}

.team-attendance-archive-toolbar select[data-attendance-archive-filter="status"] option {
  text-align: center;
}

.team-attendance-archive-toolbar .button {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
  white-space: nowrap;
}

.team-attendance-archive-count {
  display: grid;
  min-height: 40px;
  align-content: center;
  justify-items: end;
  gap: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.team-attendance-archive-count strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.team-attendance-archive-list {
  display: grid;
  gap: 10px;
  background: #f6f7f9;
  overflow: visible;
  padding: 14px 18px 16px;
}

.team-attendance-archive-card {
  display: grid;
  grid-template-columns: 58px minmax(150px, .85fr) minmax(320px, 1.2fr) minmax(170px, .7fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid transparent;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(25, 28, 34, 0.035);
  padding: 16px;
}

.team-attendance-archive-card:last-child { border-bottom: 1px solid var(--line); }
.team-attendance-archive-card.tone-warning { border-left-color: #d3a247; }
.team-attendance-archive-card.tone-info { border-left-color: #5f79d8; }
.team-attendance-archive-card.tone-success { border-left-color: #4f9e69; }

.team-attendance-archive-person {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.team-attendance-archive-person strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-archive-person span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-archive-clocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.team-attendance-archive-clock {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e5e8ee;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}

.team-attendance-archive-clock > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #eef1f5;
  color: #66707c;
}

.team-attendance-archive-clock svg { width: 15px; height: 15px; }

.team-attendance-archive-clock p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.team-attendance-archive-clock small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.team-attendance-archive-clock strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
}

.team-attendance-archive-photo {
  display: inline-flex;
  justify-self: end;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9e1f6;
  border-radius: 8px;
  background: #f5f8ff;
  color: #4d66c1;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.team-attendance-archive-photo span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-attendance-archive-photo.is-muted {
  border-color: #e4e6ea;
  background: #f2f3f5;
  color: #7b838d;
  cursor: default;
}

.team-attendance-archive-photo svg {
  width: 15px;
  height: 15px;
}

.team-attendance-archive-status {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  justify-self: end;
  width: 100%;
}

.team-attendance-archive-status > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #f2f3f6;
  color: #69736e;
}

.team-attendance-archive-card.tone-warning .team-attendance-archive-status > span { background: #fff5df; color: #946510; }
.team-attendance-archive-card.tone-info .team-attendance-archive-status > span { background: #eef4ff; color: #4d66c1; }
.team-attendance-archive-card.tone-success .team-attendance-archive-status > span { background: #edf8f2; color: #2f7d56; }

.team-attendance-archive-status p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.team-attendance-archive-status strong {
  color: var(--ink);
  font-size: 13px;
}

.team-attendance-archive-status small {
  overflow: visible;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
}

.team-attendance-dialog {
  width: min(780px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(25, 28, 27, 0.24);
}

.team-attendance-dialog::backdrop {
  background: rgba(24, 27, 26, 0.56);
  backdrop-filter: blur(3px);
}

.team-attendance-dialog-shell {
  display: grid;
  max-height: calc(100dvh - 32px);
  grid-template-rows: auto minmax(0, 1fr);
}

.team-attendance-dialog-shell > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #ffffff 0%, #f8faf9 100%);
  padding: 18px 20px;
}

.team-attendance-dialog-shell > header .surface-label {
  color: #9a6a0d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
}

.team-attendance-dialog h2 {
  margin: 4px 0 0;
  color: #101418;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
}

.team-attendance-dialog header p {
  margin: 6px 0 0;
  color: #4f5e57;
  font-size: 13px;
  font-weight: 750;
}

.team-attendance-dialog-shell > header .icon-button {
  border-color: #dfe5e1;
  background: #ffffff;
  color: #59645e;
}

.team-attendance-dialog-shell > header .icon-button:hover {
  background: #f4f6f5;
}

.team-attendance-dialog-body {
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding: 18px 20px 22px;
}

.team-attendance-detail-hero,
.team-attendance-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.team-attendance-detail-hero {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.team-attendance-detail-hero > span,
.team-attendance-panel > header > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: #f2f3f6;
  color: var(--text-soft);
}

.team-attendance-detail-hero.tone-warning > span { background: #fff5df; color: #946510; }
.team-attendance-detail-hero.tone-info > span { background: #eef4ff; color: #4d66c1; }
.team-attendance-detail-hero.tone-danger > span { background: #fdeceb; color: #b34f41; }
.team-attendance-detail-hero.tone-success > span { background: #edf8f2; color: #2f7d56; }
.team-attendance-detail-hero svg,
.team-attendance-panel > header > span svg { width: 18px; height: 18px; }
.team-attendance-detail-hero small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.team-attendance-detail-hero strong { display: block; margin-top: 3px; font-size: 18px; }
.team-attendance-detail-hero p { margin: 3px 0 0; color: var(--text-soft); font-size: 12px; }

.team-attendance-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.team-attendance-detail-grid > div {
  display: grid;
  min-height: 76px;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--line);
  background: white;
  padding: 12px;
}

.team-attendance-detail-grid > div:last-child { border-right: 0; }
.team-attendance-detail-grid svg { width: 16px; height: 16px; color: #69736e; }
.team-attendance-detail-grid p { display: grid; min-width: 0; gap: 3px; margin: 0; }
.team-attendance-detail-grid small { color: var(--muted); font-size: 10px; }
.team-attendance-detail-grid strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.team-attendance-source-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: #eef1f5;
  color: #67717c;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.team-attendance-source-badge svg {
  width: 11px;
  height: 11px;
}

.team-attendance-source-badge.tone-system {
  background: #edf8f2;
  color: #2f7d56;
}

.team-attendance-source-badge.tone-correction {
  background: #eef4ff;
  color: #4d66c1;
}

.team-attendance-source-badge.tone-muted {
  background: #f0f1f4;
  color: #777f88;
}

.team-attendance-panel {
  overflow: hidden;
}

.team-attendance-panel > header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfd;
  padding: 13px 14px;
}

.team-attendance-clarification-panel {
  border-color: #d7e2ff;
}

.team-attendance-clarification-panel > header {
  background: #f6f9ff;
}

.team-attendance-clarification-panel > header > span {
  background: #eef4ff;
  color: #4d66c1;
}

.team-attendance-history-panel {
  border-color: #dce8df;
}

.team-attendance-history-panel > header {
  background: #f6fbf8;
}

.team-attendance-history-panel > header > span {
  background: #edf8f2;
  color: #2f7d56;
}

.team-attendance-panel h3 { margin: 0; font-size: 16px; }
.team-attendance-panel header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }

.team-attendance-note-stack,
.team-attendance-history {
  display: grid;
}

.team-attendance-note-stack article,
.team-attendance-history article {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
}

.team-attendance-note-stack article:last-child,
.team-attendance-history article:last-child { border-bottom: 0; }
.team-attendance-note-stack strong { font-size: 12px; }
.team-attendance-note-stack span,
.team-attendance-note-stack p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.45; }

.team-attendance-clarification-response {
  gap: 10px;
}

.team-attendance-response-meta {
  display: grid;
  gap: 3px;
}

.team-attendance-response-meta strong {
  color: var(--ink);
}

.team-attendance-response-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid #e3e8e5;
  border-radius: 7px;
  background: #fbfcfb;
  padding: 10px;
}

.team-attendance-response-scope {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #eef4ff;
  color: #4d66c1;
}

.team-attendance-response-scope svg {
  width: 16px;
  height: 16px;
}

.team-attendance-response-item > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.team-attendance-response-item strong {
  color: var(--ink);
  font-size: 12px;
}

.team-attendance-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.team-attendance-evidence span,
.team-attendance-evidence a,
.team-attendance-evidence button,
.team-attendance-evidence.muted {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #dfe6e1;
  border-radius: 6px;
  background: white;
  color: #59645e;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.team-attendance-evidence button {
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.team-attendance-evidence svg {
  width: 13px;
  height: 13px;
}

.team-attendance-evidence.muted {
  border-color: #e8ece9;
  background: #f7f8f8;
  color: var(--muted);
  width: max-content;
}

.team-attendance-evidence a,
.team-attendance-evidence button {
  border-color: #cfdaf8;
  background: #f6f8ff;
  color: #465fb9;
}

.team-attendance-pending-correction {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: #fffaf0;
  padding: 13px 14px;
}

.team-attendance-pending-correction span { color: #715c28; font-size: 12px; }
.team-attendance-pending-correction > div { display: flex; flex-wrap: wrap; gap: 8px; }

.team-attendance-correction-workspace {
  display: grid;
  gap: 14px;
  border: 1px solid #d6e2dc;
  border-radius: 8px;
  background: linear-gradient(180deg, #f9fbfa 0%, #ffffff 44%);
  padding: 16px;
}

.team-attendance-correction-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #e2e9e5;
  padding-bottom: 12px;
}

.team-attendance-correction-heading > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #fff6df;
  color: #9a6a0d;
}

.team-attendance-correction-heading svg { width: 20px; height: 20px; }
.team-attendance-correction-heading small {
  display: block;
  color: #9a6a0d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
}
.team-attendance-correction-heading h3 { margin: 2px 0 0; color: #12191f; font-size: 18px; }

.team-attendance-review-panels {
  display: grid;
  gap: 9px;
}

.team-attendance-review-panel {
  overflow: hidden;
  border: 1px solid #e0e7e2;
  border-radius: 8px;
  background: #ffffff;
}

.team-attendance-review-panel-clarification.is-highlighted {
  border-color: #c9d7ff;
  box-shadow: 0 8px 20px rgba(69, 92, 171, 0.08);
}

.team-attendance-review-panel summary {
  display: grid;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  background: #fbfcfb;
  padding: 10px 12px;
}

.team-attendance-review-panel-clarification.is-highlighted summary {
  background: #f6f8ff;
}

.team-attendance-review-panel-clarification.is-highlighted summary > span {
  background: #eaf0ff;
  color: #5069c9;
}

.team-attendance-review-panel summary::-webkit-details-marker {
  display: none;
}

.team-attendance-review-panel summary > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #f0f4f2;
  color: #59645e;
}

.team-attendance-review-panel summary p {
  display: grid;
  min-width: 0;
  gap: 2px;
  margin: 0;
}

.team-attendance-review-panel summary strong {
  color: var(--ink);
  font-size: 13px;
}

.team-attendance-review-panel summary small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.team-attendance-review-panel summary i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #697383;
  transition: transform .16s ease;
}

.team-attendance-review-panel[open] summary i {
  transform: rotate(180deg);
}

.team-attendance-review-panel svg {
  width: 15px;
  height: 15px;
}

.team-attendance-review-panel-body {
  border-top: 1px solid #e4eae6;
  background: #ffffff;
}

.team-attendance-note-stack.compact article,
.team-attendance-history.compact article {
  padding: 12px;
}

.team-attendance-review-empty {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.team-attendance-review-empty strong {
  color: var(--ink);
  font-size: 12px;
}

.team-attendance-review-empty span {
  color: var(--muted);
  font-size: 11px;
}

.team-attendance-current-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #e3e8e5;
  border-radius: 8px;
  background: #f8faf9;
}

.team-attendance-current-time-grid > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border-right: 1px solid #e3e8e5;
  padding: 10px 12px;
}

.team-attendance-current-time-grid > div:nth-child(2) { border-right: 0; }
.team-attendance-current-time-grid > div:last-child {
  grid-column: 1 / -1;
  border-top: 1px solid #e3e8e5;
  border-right: 0;
}
.team-attendance-current-time-fact > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #eef1f5;
  color: #626c75;
}
.team-attendance-current-time-fact > span svg {
  width: 16px;
  height: 16px;
}
.team-attendance-current-time-fact p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}
.team-attendance-current-time-grid small { color: var(--muted); font-size: 10px; }
.team-attendance-current-time-grid strong { color: var(--ink); font-size: 14px; }

.team-attendance-correction-form {
  display: grid;
  gap: 12px;
  border: 1px solid #e3e8e5;
  border-radius: 8px;
  background: white;
  padding: 12px;
}

.team-attendance-final-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-attendance-time-draft {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 12px;
  border: 1px solid #e0e7e2;
  border-radius: 8px;
  background: #fbfcfb;
  padding: 12px;
}

.team-attendance-time-draft.is-changed {
  border-color: #cbdccf;
  background: #f8fbf8;
}

.team-attendance-time-draft.is-locked {
  border-color: #edc9c4;
  background: #fff8f6;
}

.team-attendance-time-draft-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e2e9e5;
  padding-bottom: 12px;
}

.team-attendance-time-draft-heading > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: #fff6df;
  color: #9a6a0d;
}

.team-attendance-time-draft.is-locked .team-attendance-time-draft-heading > span {
  background: #fdecea;
  color: #a65045;
}

.team-attendance-time-draft p {
  display: grid;
  min-width: 0;
  gap: 2px;
  margin: 0;
}

.team-attendance-time-draft small {
  color: #5a6473;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.team-attendance-time-draft strong {
  color: var(--ink);
  font-size: 13px;
}

.team-attendance-time-draft em {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-time-draft-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.team-attendance-time-draft-item {
  display: grid;
  min-width: 0;
  min-height: 62px;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid #e0e7e2;
  border-radius: 7px;
  background: #ffffff;
  color: #59636f;
  cursor: pointer;
  font: inherit;
  padding: 9px;
  text-align: left;
}

.team-attendance-time-draft-item:hover {
  border-color: #cbdccf;
  background: #f8fbf8;
}

.team-attendance-time-draft-item:disabled,
.team-attendance-time-draft-item.is-locked {
  border-color: #ebd6d2;
  background: #fffafa;
  color: #8d7773;
  cursor: not-allowed;
  opacity: 1;
}

.team-attendance-time-draft-item:disabled:hover,
.team-attendance-time-draft-item.is-locked:hover {
  border-color: #ebd6d2;
  background: #fffafa;
}

.team-attendance-time-draft-item.is-changed {
  border-color: #99c2a7;
  background: #f2faf4;
}

.team-attendance-time-draft-item > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: #f0f4f2;
  color: #3d7752;
}

.team-attendance-time-draft-item.is-locked > span {
  background: #f7ecea;
  color: #a65045;
}

.team-attendance-time-draft-item p {
  gap: 1px;
}

.team-attendance-time-draft-item em {
  overflow: visible;
  white-space: normal;
}

.team-attendance-time-draft-item svg {
  width: 14px;
  height: 14px;
}

.team-attendance-time-draft-item strong {
  color: var(--ink);
  font-size: 13px;
}

.team-attendance-time-draft-item i {
  display: grid;
  place-items: center;
  color: #7a8493;
}

.team-attendance-correction-form .field { margin: 0; }
.team-attendance-correction-form textarea { min-height: 78px; }
.team-attendance-correction-form textarea[aria-invalid="true"] {
  border-color: #c45142;
  box-shadow: 0 0 0 3px rgba(196, 81, 66, 0.12);
}
.team-attendance-correction-form .field small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.team-attendance-field-error {
  display: block;
  margin-top: 5px;
  color: #b33b2f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.team-attendance-field-error[hidden] {
  display: none;
}
.team-attendance-correction-form .button { min-height: 44px; }

.team-attendance-correction-form input[type="time"] {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.team-attendance-time-dialog,
.attendance-evidence-preview-dialog {
  width: min(560px, calc(100vw - 28px));
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0;
  box-shadow: 0 24px 80px rgba(11, 13, 18, 0.24);
}

.attendance-evidence-preview-dialog {
  width: min(680px, calc(100vw - 28px));
}

.team-attendance-time-dialog::backdrop,
.attendance-evidence-preview-dialog::backdrop {
  background: rgba(17, 19, 24, 0.58);
  backdrop-filter: blur(3px);
}

.team-attendance-time-dialog-shell,
.attendance-evidence-preview-shell {
  display: grid;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #e1e5ec;
  border-radius: 10px;
  background: #ffffff;
}

.team-attendance-time-dialog-shell *,
.team-attendance-time-dialog-shell *::before,
.team-attendance-time-dialog-shell *::after {
  box-sizing: border-box;
}

.team-attendance-time-dialog-shell > header,
.attendance-evidence-preview-shell > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e7e9ee;
  background: linear-gradient(180deg, #fbfcff 0%, #f6f8ff 100%);
  padding: 15px 18px;
}

.team-attendance-time-dialog-shell > header > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #eef4ff;
  color: #4d66c1;
}

.attendance-evidence-preview-shell > header > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #eef4ff;
  color: #4d66c1;
}

.attendance-evidence-preview-title {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.team-attendance-time-dialog-shell header small,
.attendance-evidence-preview-shell header small {
  color: #657086;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.team-attendance-time-dialog-shell h3,
.attendance-evidence-preview-shell h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 18px;
}

.attendance-evidence-preview-title h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.attendance-evidence-preview-title p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.team-attendance-time-dialog-shell header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.team-attendance-time-dialog-body {
  display: grid;
  min-width: 0;
  gap: 14px;
  overflow: hidden;
  padding: 20px 26px;
}

.team-attendance-time-dialog-body .field,
.team-attendance-single-time-field {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.team-attendance-time-dialog-body input[type="time"],
.team-attendance-single-time-field input[type="time"] {
  display: block;
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  max-inline-size: 100%;
  min-width: 0;
  min-inline-size: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.team-attendance-single-time-field input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

.team-attendance-single-time-field input[type="time"]::-webkit-calendar-picker-indicator {
  flex-shrink: 0;
  margin: 0;
}

.team-attendance-time-dialog-current {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e8ee;
  border-radius: 8px;
  background: #f9fafb;
  padding: 12px 14px;
}

.team-attendance-time-dialog-current > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #eef1f5;
  color: #66707c;
}

.team-attendance-time-dialog-current p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.team-attendance-time-dialog-current strong {
  font-size: 12px;
}

.team-attendance-time-dialog-current small {
  color: var(--muted);
  font-size: 10px;
}

.team-attendance-time-dialog-shell footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid #e7e9ee;
  background: #fbfbfd;
  padding: 14px 18px;
}

.attendance-evidence-preview-canvas {
  display: grid;
  min-height: 320px;
  place-items: center;
  background:
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25% 50%, rgba(255,255,255,.035) 50% 75%, transparent 75%),
    #111317;
  background-size: 18px 18px;
  padding: 18px;
}

.attendance-evidence-preview-canvas img {
  display: block;
  max-width: 100%;
  max-height: min(64vh, 560px);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  object-fit: contain;
}

.attendance-evidence-preview-canvas p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 10px 12px;
  font-size: 12px;
}

.attendance-evidence-preview-canvas p[hidden] {
  display: none;
}

.team-attendance-correction-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-attendance-correction-actions .button {
  width: 100%;
  min-width: 0;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}

.team-attendance-correction-actions .button svg {
  flex: 0 0 auto;
}

.team-attendance-no-show-action.button-danger {
  border-color: #d94a3d;
  background: #d94a3d;
}

.team-attendance-no-show-action.button-danger:hover:not(:disabled) {
  border-color: #a94234;
  background: #a94234;
}

.team-attendance-correction-actions.is-no-show-absent [data-attendance-owner-escalate] {
  grid-column: 1 / -1;
}

.team-attendance-correction-actions .button-primary[type="submit"],
.team-attendance-correction-actions .button:only-child {
  grid-column: 1 / -1;
}

.team-attendance-readonly-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #e3e8e5;
  border-radius: 8px;
  background: #fafafa;
  padding: 12px;
}

.team-attendance-readonly-note > svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.team-attendance-readonly-note p { display: grid; gap: 2px; margin: 0; }
.team-attendance-readonly-note strong { font-size: 12px; }
.team-attendance-readonly-note span { color: var(--muted); font-size: 11px; }

.team-attendance-no-show-note {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #edc9c4;
  border-radius: 8px;
  background: #fff8f6;
  padding: 13px;
}

.team-attendance-no-show-note > svg {
  width: 18px;
  height: 18px;
  color: #a65045;
  justify-self: center;
}

.team-attendance-no-show-note p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.team-attendance-no-show-note strong {
  color: #7e3d35;
  font-size: 13px;
  font-weight: 850;
}

.team-attendance-no-show-note span {
  color: #745e5a;
  font-size: 12px;
  line-height: 1.45;
}

.team-attendance-escalation-note {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  background: #f8f9fb;
  padding: 13px;
}

.team-attendance-escalation-note > svg {
  width: 18px;
  height: 18px;
  color: #626a75;
  justify-self: center;
}

.team-attendance-escalation-note p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.team-attendance-escalation-note strong {
  color: #303641;
  font-size: 13px;
  font-weight: 850;
}

.team-attendance-escalation-note span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.team-attendance-source-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
  padding: 12px 14px;
}

.team-attendance-source-overview article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e3e8e5;
  border-radius: 8px;
  background: white;
  padding: 10px;
}

.team-attendance-source-overview article > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #f2f3f6;
  color: var(--text-soft);
}

.team-attendance-source-overview svg { width: 15px; height: 15px; }
.team-attendance-source-overview p { display: grid; min-width: 0; gap: 2px; margin: 0; }
.team-attendance-source-overview small { color: var(--muted); font-size: 9px; font-weight: 800; }
.team-attendance-source-overview strong { font-size: 13px; }
.team-attendance-source-overview em {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-history article {
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.team-attendance-history article > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: #f2f3f6;
  color: var(--text-soft);
}

.team-attendance-history svg { width: 15px; height: 15px; }
.team-attendance-history p { display: grid; gap: 2px; margin: 0; }
.team-attendance-history strong { font-size: 12px; }
.team-attendance-history small,
.team-attendance-history em { color: var(--muted); font-size: 11px; font-style: normal; }

@media (max-width: 980px) {
  .team-attendance-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .team-attendance-metric { min-height: 96px; padding: 12px; }
  .team-attendance-head { align-items: flex-start; flex-direction: column; padding: 18px; }
  .team-attendance-card { grid-template-columns: 1fr; align-items: stretch; gap: 12px; padding: 14px; }
  .team-attendance-card-main { grid-template-columns: 50px minmax(0, 1fr); align-items: start; }
  .team-attendance-times,
  .team-attendance-status { grid-column: 2; justify-self: start; }
  .team-attendance-card-actions { justify-content: stretch; }
  .team-attendance-card-actions .button { flex: 1 1 0; }
  .team-attendance-archive-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .team-attendance-archive-card { grid-template-columns: 50px minmax(0, 1fr); align-items: start; }
  .team-attendance-archive-clocks,
  .team-attendance-archive-status { grid-column: 2; }
  .team-attendance-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-attendance-detail-grid > div:nth-child(2) { border-right: 0; }
  .team-attendance-detail-grid > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .team-attendance-current-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-attendance-current-time-grid > div { border-right: 1px solid #e3e8e5; border-bottom: 0; }
  .team-attendance-current-time-grid > div:nth-child(2) { border-right: 0; }
  .team-attendance-current-time-grid > div:last-child { border-top: 1px solid #e3e8e5; border-bottom: 0; }
}

@media (max-width: 620px) {
  .team-attendance-board { gap: 14px; }
  .team-attendance-metrics { gap: 7px; }
  .team-attendance-metric {
    min-height: 104px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 8px;
    border-radius: 8px;
    padding: 11px 11px 42px;
  }
  .team-attendance-metric > span { width: 36px; height: 36px; }
  .team-attendance-metric strong { font-size: 12px; line-height: 1.18; }
  .team-attendance-metric small { font-size: 10px; line-height: 1.2; }
  .team-attendance-metric b {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-width: 0;
    height: auto;
    font-size: 21px;
  }
  .team-attendance-metric > span svg { width: 18px; height: 18px; }
  .team-attendance-mode-switch { gap: 7px; }
  .team-attendance-mode-switch button {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 76px;
    gap: 9px;
    padding: 10px;
  }
  .team-attendance-mode-icon { width: 30px; height: 30px; border-radius: 8px; }
  .team-attendance-mode-icon svg { width: 15px; height: 15px; }
  .team-attendance-mode-switch strong { font-size: 13px; }
  .team-attendance-mode-copy > span { font-size: 10px; line-height: 1.25; }
  .team-attendance-workbench { border-radius: 8px; }
  .team-attendance-head h2 { font-size: 20px; }
  .team-attendance-filters { padding: 0 14px; }
  .team-attendance-archive-date-area { padding: 14px; }
  .team-attendance-archive-date-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .team-attendance-archive-date-head strong { font-size: 16px; }
  .team-attendance-archive-date-strip button { min-width: 62px; height: 68px; border-radius: 8px; }
  .team-attendance-archive-date-strip button strong { font-size: 19px; }
  .team-attendance-archive-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    overflow: hidden;
    padding: 14px 16px 16px;
  }
  .team-attendance-archive-toolbar > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
  }
  .team-attendance-archive-toolbar label {
    gap: 7px;
    contain: inline-size;
  }
  .team-attendance-archive-toolbar input,
  .team-attendance-archive-toolbar select,
  .team-attendance-archive-toolbar .button {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    min-height: 48px;
    border-radius: 10px;
  }
  .team-attendance-archive-toolbar .button {
    grid-column: 1 / -1;
  }
  .team-attendance-archive-toolbar input[type="month"] {
    display: block;
    block-size: 48px;
    inline-size: 100%;
    max-inline-size: 100%;
    padding: 0 8px;
    font-size: 12px;
    line-height: 48px;
    text-align: center;
  }
  .team-attendance-archive-toolbar input[type="month"]::-webkit-date-and-time-value {
    min-height: 48px;
    line-height: 48px;
    padding: 0;
    text-align: center;
  }
  .team-attendance-archive-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
  .team-attendance-archive-clocks {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .team-attendance-archive-status {
    grid-column: 1 / -1;
    border: 1px solid #eceff3;
    border-radius: 8px;
    background: #fbfcfd;
    padding: 8px;
  }
  .team-attendance-archive-person span { white-space: normal; }
  .team-attendance-archive-status small { overflow: visible; text-overflow: clip; white-space: normal; }
  .team-attendance-archive-clock {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 7px;
    padding: 8px;
  }
  .team-attendance-archive-clock > span:first-child,
  .team-attendance-archive-status > span { width: 32px; height: 32px; }
  .team-attendance-archive-clock > span:first-child { width: 30px; height: 30px; }
  .team-attendance-archive-photo {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    border-radius: 7px;
    padding: 0;
  }
  .team-attendance-archive-clock strong { font-size: 14px; }
  .team-attendance-archive-clock small { font-size: 8px; }
  .team-attendance-card-actions { flex-direction: column; }
  .team-attendance-card-actions .button { width: 100%; }
  .team-attendance-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .team-attendance-dialog-shell { max-height: calc(100dvh - 20px); }
  .team-attendance-dialog-shell > header { padding: 16px; }
  .team-attendance-dialog h2 { font-size: 20px; }
  .team-attendance-dialog-body { padding: 16px; }
  .team-attendance-detail-grid { grid-template-columns: 1fr; }
  .team-attendance-detail-grid > div,
  .team-attendance-detail-grid > div:nth-child(2) { border-right: 0; }
  .team-attendance-detail-grid > div:nth-child(3) { border-bottom: 1px solid var(--line); }
  .team-attendance-correction-workspace { padding: 14px; }
  .team-attendance-correction-heading { grid-template-columns: 40px minmax(0, 1fr); }
  .team-attendance-correction-heading > span { width: 40px; height: 40px; }
  .team-attendance-time-draft { grid-template-columns: 1fr; }
  .team-attendance-time-draft-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-attendance-time-draft-item { min-height: 58px; }
  .team-attendance-time-dialog {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
  }
  .team-attendance-time-dialog-shell > header,
  .attendance-evidence-preview-shell > header { grid-template-columns: 38px minmax(0, 1fr) 38px; padding: 13px 14px; }
  .team-attendance-time-dialog-shell > header > span,
  .attendance-evidence-preview-shell > header > span { width: 38px; height: 38px; }
  .attendance-evidence-preview-title h3 { font-size: 16px; }
  .attendance-evidence-preview-title p { font-size: 11px; }
  .team-attendance-time-dialog-body { padding: 14px; }
  .team-attendance-single-time-field { contain: inline-size; }
  .team-attendance-time-dialog-body input[type="time"],
  .team-attendance-single-time-field input[type="time"] {
    height: 44px;
    min-height: 44px;
    max-width: 100%;
    padding: 0 8px 0 10px;
    font-size: 16px;
    line-height: 44px;
  }
  .team-attendance-single-time-field input[type="time"]::-webkit-date-and-time-value {
    min-height: 44px;
    line-height: 44px;
  }
  .team-attendance-single-time-field input[type="time"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    padding: 0;
  }
  .team-attendance-time-dialog-shell footer { flex-direction: column-reverse; padding: 14px 18px; }
  .team-attendance-time-dialog-shell footer .button { width: 100%; }
  .attendance-evidence-preview-canvas { min-height: 260px; padding: 12px; }
  .team-attendance-final-time-grid { grid-template-columns: 1fr; }
  .team-attendance-correction-actions { gap: 10px; }
  .team-attendance-correction-actions .button { width: 100%; min-width: 0; min-height: 44px; padding: 0 10px; font-size: 13px; }
  .team-attendance-source-overview { grid-template-columns: 1fr; }
  .team-attendance-source-overview article { grid-template-columns: 34px minmax(0, 1fr); }
  .team-attendance-source-overview .team-attendance-source-badge { grid-column: 2; }
  .team-attendance-response-item { grid-template-columns: 38px minmax(0, 1fr); }
  .team-attendance-response-scope { width: 34px; height: 34px; }
}

@media (min-width: 761px) {
  .attendance-summary > .attendance-day-detail,
  .attendance-summary > .attendance-summary-legend { display: none; }
}

@media (max-width: 980px) {
  .attendance-capture-layout { grid-template-columns: minmax(0, 1fr); }
  .attendance-clock-panel,
  .attendance-today-panel { min-width: 0; }
  .attendance-calendar-day { min-height: 104px; padding: 8px; }
  .attendance-calendar-line i { display: inline; }
  .attendance-day-detail { grid-template-columns: 40px minmax(0, 1fr); }
  .attendance-day-facts { grid-column: 1 / -1; }
  .attendance-history-day-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-history-day-body > div:nth-child(2) { border-right: 0; }
  .attendance-history-day-body > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .attendance-personal-history-day > .form-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .attendance-location-access {
    grid-template-columns: 30px minmax(0, 1fr) 32px;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px;
  }

  .attendance-location-access.is-home {
    margin: 10px 0 0;
  }

  .attendance-location-access.is-ready {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .attendance-location-access > span {
    width: 30px;
    height: 30px;
  }

  .attendance-location-access > span svg {
    width: 15px;
    height: 15px;
  }

  .attendance-location-access strong {
    font-size: 10px;
    line-height: 1.25;
  }

  .attendance-location-access p {
    margin-top: 1px;
    font-size: 8px;
    line-height: 1.35;
  }

  .attendance-location-access .attendance-location-retry {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    align-self: center;
    padding: 0;
  }

  .attendance-location-retry > span {
    display: none;
  }

  .attendance-location-retry svg {
    width: 14px;
    height: 14px;
  }

  .attendance-summary { margin-top: 10px; }
  .attendance-summary-head { align-items: flex-start; padding: 16px; }
  .attendance-summary-head p { max-width: 260px; }
  .attendance-summary-timezone { display: none; }
  .attendance-summary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-summary-metric { min-width: 0; min-height: 78px; grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 4px; padding: 9px 4px; text-align: center; }
  .attendance-summary-metric + .attendance-summary-metric { border-left: 1px solid var(--line); }
  .attendance-summary-metric > div { display: flex; min-width: 0; align-items: center; flex-direction: column; gap: 1px; }
  .attendance-summary-metric small { font-size: 9px; line-height: 1.25; }
  .attendance-summary-metric strong { font-size: 19px; line-height: 1; }
  .attendance-summary-metric p { display: none; }
  .attendance-action-summary-trigger { display: none; }
  .attendance-action-summary-inline { display: block; }
  .attendance-action-summary { margin: 14px 16px 0; }
  .attendance-action-summary > header { align-items: flex-start; }
  .attendance-action-list button,
  .attendance-action-list article { grid-template-columns: 38px minmax(0, 1fr); }
  .attendance-action-list em { grid-column: 2; justify-self: start; }
  .attendance-action-list button > span:nth-child(2) strong,
  .attendance-action-list article > span:nth-child(2) strong { overflow: visible; text-overflow: clip; white-space: normal; }
  .attendance-calendar-desktop { display: none; }
  .attendance-mobile-calendar-divider {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    border-top: 10px solid #f1f2f4;
    border-bottom: 1px solid var(--line);
    padding: 11px 16px 10px;
  }
  .attendance-mobile-calendar-divider > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; background: #eef2ef; color: #4d6959; }
  .attendance-mobile-calendar-divider svg { width: 15px; height: 15px; }
  .attendance-mobile-calendar-divider strong { font-size: 12px; }
  .attendance-calendar-mobile { display: flex; gap: 7px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .attendance-calendar-mobile::-webkit-scrollbar { display: none; }
  .attendance-mobile-date { display: grid; width: 48px; min-width: 48px; height: 62px; flex: 0 0 48px; place-items: center; align-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 7px; background: white; scroll-snap-align: center; }
  .attendance-mobile-date span { color: var(--muted); font-size: 9px; }
  .attendance-mobile-date strong { font-size: 15px; }
  .attendance-mobile-date i { width: 5px; height: 5px; border-radius: 50%; background: #a5afa9; }
  .attendance-mobile-date.category-complete i { background: #2f7d56; }
  .attendance-mobile-date.category-processing i { background: var(--blue); }
  .attendance-mobile-date.category-handling i { background: var(--amber); }
  .attendance-mobile-date.selected { border-color: #111116; background: #111116; color: white; box-shadow: 0 0 0 2px rgba(17, 17, 22, 0.1); }
  .attendance-mobile-date.selected span { color: #d5d5da; }
  .attendance-mobile-date.today:not(.selected) { background: #eef6f2; }
  .attendance-day-detail { margin: 0 16px 14px; padding: 13px; }
  .attendance-day-facts { grid-template-columns: 1fr; }
  .attendance-day-facts > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .attendance-day-note { grid-column: 1 / -1; }
  .attendance-day-action { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
  .attendance-summary-legend { padding: 10px 16px; }
  .attendance-summary-dialog { width: calc(100vw - 20px); }
  .attendance-summary-dialog-shell { padding: 12px; }
  .attendance-day-dialog { width: calc(100vw - 20px); }
  .attendance-day-dialog-shell > header,
  .attendance-day-dialog-body { padding: 16px; }
  .attendance-action-dialog { width: calc(100vw - 20px); }
  .attendance-action-dialog-shell > header { padding: 16px; }
  .attendance-action-dialog-body { scroll-padding-bottom: 16px; padding: 16px; }
  .attendance-action-submit { padding: 12px 16px 16px; }
  .attendance-explanation-tab { min-height: 58px; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; padding: 8px; }
  .attendance-explanation-tab > span:first-child { width: 28px; height: 28px; }
  .attendance-explanation-tab strong { font-size: 10px; }
  .attendance-action-time-fields { grid-template-columns: 1fr; }
  .attendance-action-form .button { width: 100%; justify-self: stretch; }
  .attendance-clock-panel { min-height: 208px; padding: 16px; }
  .attendance-local-time { font-size: 34px; font-weight: 600; }
  .attendance-current-date { font-size: 12px; font-weight: 650; }
  .attendance-clock-panel.is-complete { min-height: 208px; padding: 16px; }
  .attendance-today-facts { grid-template-columns: 1fr; }
  .attendance-today-facts > div { min-height: 60px; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .attendance-today-facts > div:last-child { border-bottom: 0 !important; }
  .attendance-history-heading { align-items: flex-start; }
  .attendance-history-count { display: none; }
  .attendance-history-day-body { grid-template-columns: 1fr; }
  .attendance-history-day-body > div { min-height: 62px; border-right: 0; border-bottom: 1px solid var(--line); }
  .attendance-history-day-body > div:last-child { border-bottom: 0; }
  .attendance-personal-history-day > header { align-items: flex-start; }
  .attendance-history-status { max-width: 116px; text-align: right; }
  .attendance-history-action,
  .attendance-personal-history-day > .form-grid { grid-template-columns: 1fr; }
  .attendance-history-action .button,
  .attendance-personal-history-day > .form-grid .button { width: 100%; }
}

dialog {
  border-radius: 14px;
}

@media (max-width: 1050px) {
  .header-role small {
    display: none;
  }

  .header-context {
    max-width: 250px;
  }
}

@media (max-width: 820px) {
  .app-column {
    margin-left: 0;
  }

  .login-workspace {
    display: grid;
    padding: 32px 18px;
  }

  .login-shell {
    max-width: 384px;
  }

  .login-panel {
    padding: 24px;
  }

  .app-header {
    height: 58px;
    padding: 0 12px;
  }

  .header-context {
    display: none;
  }

  .header-scope {
    display: none;
  }

  .main-content {
    padding: 20px 16px 94px;
  }

  .page-heading {
    margin-bottom: 14px;
  }

  .page-heading h1 {
    font-size: 18px;
  }

  .mobile-nav {
    height: 66px;
    border-top-color: var(--line);
    background: white;
  }

  .mobile-nav-link {
    border-radius: 8px;
    color: var(--muted);
  }

  .mobile-nav-link.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
  }

  .mobile-nav-glyph [data-lucide] {
    width: 17px;
    height: 17px;
  }

  .mobile-drawer.open {
    background: #111116;
    color: white;
  }

  .mobile-drawer .brand-mark {
    color: white;
  }

  .mobile-drawer .context-panel {
    border-color: #2a2a32;
    background: #1a1a20;
  }

  .mobile-drawer .context-role {
    color: white;
  }

  .mobile-drawer .branch-context-field select {
    border-color: #363640;
    background: #111116;
    color: white;
  }

  .mobile-drawer .icon-button {
    border-color: #33333b;
    background: #1b1b21;
    color: white;
  }

  .mobile-drawer .drawer-footer {
    border-top-color: #2a2a32;
  }

  .mobile-drawer .drawer-footer .button {
    border-color: #33333b;
    background: #1b1b21;
    color: white;
  }

  .workforce-tabs {
    width: calc(100% + 16px);
    margin-right: -16px;
    overflow-x: auto;
    border-radius: 10px 0 0 10px;
    padding-right: 16px;
  }

  .my-work-toolbar {
    flex-wrap: wrap;
  }

  .my-work-search {
    min-width: 100%;
    max-width: none;
  }

  .segmented-control {
    flex: 1;
  }

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

@media (max-width: 620px) {
  .login-logo {
    margin-bottom: 24px;
  }

  .module-development-page {
    min-height: calc(100vh - 142px);
    padding: 32px 12px;
  }

  .module-development-icon {
    width: 56px;
    height: 56px;
    border-radius: 15px;
  }

  .module-development-content h1 {
    font-size: 24px;
  }

  .module-development-content p {
    font-size: 14px;
  }

  .module-development-badge {
    min-height: 40px;
    border-radius: 12px;
    padding: 0 15px;
    font-size: 13px;
  }

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

  .workforce-overview-grid {
    grid-template-columns: 1fr;
  }

  .workforce-overview-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .overview-metric-card {
    min-height: 108px;
    grid-template-columns: 1fr;
    align-content: space-between;
    gap: 9px;
    padding: 12px 11px;
  }

  .overview-metric-copy {
    gap: 4px;
  }

  .overview-metric-copy small,
  .overview-metric-copy em {
    font-size: 10px;
    line-height: 1.25;
  }

  .overview-metric-copy strong {
    font-size: 23px;
  }

  .overview-metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    justify-self: end;
  }

  .overview-metric-icon svg {
    width: 17px;
    height: 17px;
  }

  .workforce-overview-board {
    grid-template-columns: 1fr;
  }

  .workforce-overview-panel.tone-schedule {
    grid-row: auto;
  }

  .workforce-overview-panel {
    border-radius: 10px;
    padding: 0;
  }

  .overview-panel-head {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 13px;
  }

  .overview-panel-icon {
    width: 38px;
    height: 38px;
  }

  .overview-panel-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
  }

  .overview-week-strip {
    gap: 7px;
    padding: 11px 13px 9px;
  }

  .overview-week-day {
    width: 46px;
    min-width: 46px;
    height: 56px;
    border-radius: 10px;
  }

  .overview-week-day strong {
    font-size: 15px;
  }

  .overview-today-card {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 10px;
    margin: 0 13px 12px;
    padding: 13px;
  }

  .overview-today-card strong {
    font-size: 15px;
  }

  .overview-today-card p {
    font-size: 12px;
  }

  .overview-today-card > span:last-child {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .overview-leave-stats > div {
    padding: 12px 8px;
  }

  .overview-progress {
    padding: 12px 13px;
  }

  .overview-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 13px;
  }

  .overview-date-tile {
    width: 40px;
    height: 42px;
  }

  .overview-row-badge {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
  }

  .daily-activity {
    padding: 14px;
  }

  .daily-activity-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .daily-activity-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .daily-activity-row > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .control-focus {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .control-focus > .badge {
    justify-self: start;
  }

  .control-focus-action {
    width: 100%;
  }

  .my-work-summary > div {
    min-height: 54px;
    align-items: flex-start;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px;
  }

  .my-work-summary > div:first-child {
    padding-left: 0;
  }

  .my-work-toolbar {
    align-items: center;
    flex-direction: row;
  }

  .segmented-control {
    width: calc(100% - 46px);
  }

  .segmented-control button {
    min-height: 36px;
    padding: 0 10px;
  }

  .my-work-toolbar > .button,
  .task-card > footer > .button {
    width: auto;
  }

  .task-card > header,
  .task-card > footer {
    align-items: flex-start;
    flex-direction: row;
  }

  .task-card > footer {
    align-items: flex-end;
  }

  .task-context-grid {
    grid-template-columns: 1fr;
  }

  .task-card-head code {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

  .schedule-status-band > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .schedule-status-band > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .leave-create-panel > summary {
    width: 100%;
    justify-content: center;
  }
}

/* Keep Attendance state rules last so legacy Home declarations cannot override them. */
.daily-activity.daily-activity-neutral,
.daily-activity.daily-activity-info,
.daily-activity.daily-activity-success,
.daily-activity.daily-activity-warning,
.daily-activity.daily-activity-danger { display: block; min-height: 0; border-radius: 8px; padding: 20px; }
.daily-activity .daily-activity-state { grid-template-columns: 34px minmax(0, 1fr); border-radius: 8px; padding: 16px 18px; }
.daily-activity .attendance-state-actions { display: flex; gap: 10px; margin-top: 14px; }
.daily-activity .attendance-state-actions .button { width: auto; min-height: 46px; margin: 0; flex: 1 1 auto; }
.attendance-state-gallery-single { grid-template-columns: minmax(0, 1fr); }
.attendance-state-gallery-single .daily-activity { width: 100%; }
@media (max-width: 720px) {
  .daily-activity.daily-activity-neutral,
  .daily-activity.daily-activity-info,
  .daily-activity.daily-activity-success,
  .daily-activity.daily-activity-warning,
  .daily-activity.daily-activity-danger { padding: 15px; }
  .daily-activity .daily-activity-state { grid-template-columns: 30px minmax(0, 1fr); padding: 14px; }
  .daily-activity .attendance-state-actions { flex-direction: column; }
  .daily-activity .attendance-state-actions .button { width: 100%; }
}

@media (max-width: 760px) {
  .workforce-control-tabs {
    gap: 10px;
    margin-bottom: 6px;
  }

  .overview-scope-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
  }

  .overview-scope-tabs button {
    flex: 1 0 auto;
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }

  .workforce-control-tabs-clean {
    gap: 9px;
    margin-bottom: 18px;
  }

  .workforce-control-tabs-clean .workforce-section-tabs {
    width: 100%;
    overflow-x: auto;
    padding: 5px;
  }

  .workforce-control-tabs-clean .workforce-section-tabs a {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 0 12px;
    font-size: 12px;
  }

  .workforce-mode-switcher {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
  }

  .workforce-mode-switcher.has-team-filter {
    grid-template-columns: 1fr;
  }

  .workforce-mode-switcher-direct {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 11px 12px;
  }

  .workforce-direct-scope-field {
    justify-self: stretch;
    width: 100%;
  }

  .workforce-mode-fields,
  .workforce-mode-switcher.has-team-filter .workforce-mode-fields {
    grid-template-columns: 1fr;
    gap: 10px;
    justify-content: stretch;
  }

  .workforce-mode-current {
    gap: 10px;
  }

  .workforce-mode-switcher-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .workforce-mode-current-copy strong {
    font-size: 16px;
  }

  .workforce-mode-current-copy em {
    white-space: normal;
  }

  .workforce-mode-filter-toggle {
    display: grid;
    min-height: 40px;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    border: 1px solid #e1e4ea;
    border-radius: 10px;
    cursor: pointer;
    background: #fbfcfd;
    color: #20222a;
    padding: 0 12px;
    font: inherit;
    text-align: left;
  }

  .workforce-mode-filter-toggle span,
  .workforce-mode-filter-toggle small {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
  }

  .workforce-mode-filter-toggle span {
    font-size: 12px;
    font-weight: 820;
    white-space: nowrap;
  }

  .workforce-mode-filter-toggle small {
    justify-content: flex-end;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workforce-mode-filter-toggle svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
  }

  .workforce-mode-filter-toggle > svg:last-child {
    color: #5f6670;
    transition: transform .16s ease;
  }

  .workforce-mode-switcher.is-filter-open .workforce-mode-filter-toggle > svg:last-child {
    transform: rotate(180deg);
  }

  .workforce-mode-field {
    gap: 6px;
  }

  .workforce-mode-fields,
  .workforce-mode-switcher.has-team-filter .workforce-mode-fields {
    display: none;
    border-top: 1px solid #edf0f3;
    padding-top: 10px;
  }

  .workforce-mode-switcher.is-filter-open .workforce-mode-fields,
  .workforce-mode-switcher.has-team-filter.is-filter-open .workforce-mode-fields {
    display: grid;
  }

  .workforce-mode-field select {
    height: 44px;
    min-height: 44px;
    border-radius: 10px;
    background: #fbfcfd;
    padding: 0 40px 0 13px;
    font-size: 13px;
  }

  .workforce-mode-field::after {
    bottom: 17px;
  }

  .workforce-team-filter {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .workforce-team-filter-copy em {
    white-space: normal;
  }

  .workforce-team-filter-field select {
    height: 42px;
    min-height: 42px;
    border-radius: 10px;
    padding-right: 42px;
    font-size: 13px;
  }

  .workforce-team-filter-field::after {
    bottom: 17px;
  }

  .workforce-mode-cards {
    grid-template-columns: 1fr;
  }

  .workforce-mode-card {
    min-height: 82px;
    padding: 14px 16px;
  }

  .workforce-mode-copy strong {
    font-size: 26px;
  }

  .workforce-section-tabs {
    width: 100%;
    margin-right: 0;
    overflow-x: auto;
    border-radius: 10px;
    padding-right: 4px;
  }

  .workforce-section-tabs a {
    flex: 0 0 auto;
  }

  .workforce-overview-pill {
    width: 100%;
    justify-content: center;
  }

  .workforce-tab-groups {
    grid-template-columns: 1fr;
  }

  .workforce-tab-group {
    padding: 12px;
  }

  .workforce-tab-group .workforce-tabs {
    width: 100%;
    margin-right: 0;
    overflow: visible;
    border-radius: 10px;
    padding-right: 4px;
  }

  .workforce-tab-group .workforce-tabs a {
    min-width: 0;
    flex: 1 1 120px;
  }
}

@media (max-width: 760px) {
  .overview-scope-stack {
    gap: 14px;
  }

  .overview-scope-section {
    border-radius: 10px;
  }

  .overview-scope-head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px 14px;
  }

  .overview-scope-head h2 {
    font-size: 22px;
  }

  .overview-scope-head p {
    font-size: 12px;
  }

  .overview-scope-head a {
    width: 100%;
    min-height: 40px;
  }

  .overview-scope-section > .workforce-overview-metrics {
    margin: 12px;
  }

  .overview-scope-section > .workforce-overview-board {
    padding: 0 12px 12px;
  }

  .overview-self-content {
    gap: 14px;
  }

  .overview-team-context {
    padding: 12px 12px 0;
  }

  .overview-team-context .workforce-team-filter {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .overview-team-content {
    gap: 12px;
  }

  .overview-team-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 12px 12px 0;
  }

  .overview-team-content .overview-team-metrics {
    padding: 0;
  }

  .overview-team-card {
    min-height: 112px;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 10px;
    padding: 14px 14px 13px 16px;
  }

  .overview-team-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
  }

  .overview-team-card-copy strong {
    font-size: 28px;
  }

  .overview-team-card-copy small {
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }

  .overview-team-card-copy em {
    font-size: 10px;
  }

  .owner-attendance-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .owner-attendance-scope {
    gap: 10px;
  }

  .owner-attendance-scope > span {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .owner-attendance-scope strong {
    font-size: 16px;
  }

  .owner-attendance-month-field {
    width: 100%;
    min-width: 0;
  }

  .owner-attendance-month-field input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 44px;
    -webkit-appearance: none;
    appearance: none;
  }

  .owner-attendance-month-field input[type="month"]::-webkit-date-and-time-value {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    text-align: center;
  }

  .owner-attendance-summary {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
    scroll-snap-type: x proximity;
  }

  .owner-attendance-summary::-webkit-scrollbar {
    display: none;
  }

  .owner-attendance-summary-card {
    flex: 0 0 128px;
    scroll-snap-align: start;
    gap: 8px;
    border-radius: 9px;
    padding: 10px;
  }

  .owner-attendance-summary-card > span {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .owner-attendance-summary-card strong {
    font-size: 18px;
  }

  .owner-attendance-summary-card small {
    font-size: 10px;
    line-height: 1.2;
  }

  .owner-attendance-view-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px;
  }

  .owner-attendance-view-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
  }

  .owner-attendance-view-card > span {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .owner-attendance-view-card p strong {
    font-size: 14px;
  }

  .owner-attendance-view-card p small {
    font-size: 10px;
    white-space: normal;
  }

  .owner-attendance-view-card em {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
    gap: 5px;
    border-left: 0;
    border-top: 1px solid #edf0f3;
    padding: 8px 0 0;
  }

  .owner-attendance-view-card em b {
    font-size: 17px;
  }

  .owner-attendance-calendar-head {
    align-items: center;
    flex-direction: row;
    gap: 12px;
    padding: 13px 12px;
  }

  .owner-attendance-calendar-head h3 {
    font-size: 18px;
  }

  .owner-attendance-calendar-head p {
    display: none;
  }

  .owner-attendance-calendar-head > span {
    align-self: center;
    padding: 7px 10px;
    font-size: 11px;
  }

  .owner-attendance-calendar-scroll {
    overflow: visible;
    background: #f4f5f7;
    padding: 10px 12px 12px;
  }

  .owner-attendance-calendar-grid {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 9px;
    overflow: visible;
  }

  .owner-attendance-calendar-weekday,
  .owner-attendance-day.is-empty {
    display: none;
  }

  .owner-attendance-day {
    min-height: 0;
    gap: 7px;
    border: 1px solid #e1e4ea;
    border-left: 4px solid #d7dbe5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(18, 18, 24, 0.05);
    padding: 10px;
  }

  .owner-attendance-day.is-expanded {
    grid-column: 1 / -1;
  }

  .owner-attendance-day.has-records {
    background: #ffffff;
  }

  .owner-attendance-day.tone-success {
    border-left-color: #4f9e69;
  }

  .owner-attendance-day.tone-warning {
    border-left-color: #c99a3f;
  }

  .owner-attendance-day.tone-info {
    border-left-color: #3e8a5e;
  }

  .owner-attendance-day.tone-muted {
    border-left-color: #aeb4c0;
  }

  .owner-attendance-day.is-today {
    box-shadow: inset 0 0 0 1px #111116, 0 10px 22px rgba(18, 18, 24, 0.05);
  }

  .owner-attendance-day-top {
    align-items: flex-start;
    gap: 8px;
  }

  .owner-attendance-day-top strong {
    font-size: 19px;
  }

  .owner-attendance-day-top small {
    display: block;
  }

  .owner-attendance-day-top span {
    padding: 5px 8px;
  }

  .owner-attendance-day-count {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #f1f2f6;
    padding: 4px 7px;
  }

  .owner-attendance-day-toggle {
    display: grid;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
  }

  .owner-attendance-day-badge {
    padding: 5px 8px;
    font-size: 10px;
  }

  .owner-attendance-day-body {
    display: none;
  }

  .owner-attendance-day.is-expanded .owner-attendance-day-body {
    display: grid;
  }

  .owner-attendance-day-items {
    gap: 7px;
  }

  .owner-attendance-day-entry {
    min-height: 36px;
    border: 1px solid #eceff4;
    border-left-width: 3px;
    background: #ffffff;
    padding: 8px 9px;
  }

  .owner-attendance-day-entry.tone-success { border-left-color: #4f9e69; }
  .owner-attendance-day-entry.tone-warning { border-left-color: #d3a247; }
  .owner-attendance-day-entry.tone-info { border-left-color: #3e8a5e; }
  .owner-attendance-day-entry.tone-muted { border-left-color: #b8bdc8; }

  .owner-attendance-day-entry strong {
    font-size: 13px;
  }

  .owner-attendance-day-entry span {
    max-width: 48%;
    flex: 0 0 auto;
  }

  .owner-attendance-day.is-expanded .owner-attendance-day-entry span {
    max-width: none;
  }

  .owner-attendance-day-empty {
    margin: 0;
    font-size: 12px;
  }

  .owner-attendance-employee-list {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .owner-attendance-employee-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 13px;
  }

  .owner-attendance-employee-card header {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .owner-attendance-employee-avatar {
    width: 40px;
    height: 40px;
  }

  .owner-attendance-employee-card header strong {
    font-size: 17px;
  }

  .owner-attendance-employee-card header em {
    padding: 6px 8px;
    font-size: 10px;
  }

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

  .owner-attendance-employee-stat {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px;
  }

  .owner-attendance-employee-stat strong {
    font-size: 18px;
  }

  .owner-attendance-employee-issue {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .owner-attendance-employee-issue time {
    width: 40px;
    height: 40px;
  }

  .owner-attendance-employee-issue em {
    grid-column: 2;
  }

  .owner-attendance-list {
    gap: 10px;
    padding: 12px;
  }

  .owner-attendance-row {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }

  .owner-attendance-person {
    align-self: center;
  }

  .owner-attendance-person strong {
    font-size: 18px;
  }

  .owner-attendance-schedule,
  .owner-attendance-actual,
  .owner-attendance-status {
    grid-column: 1 / -1;
  }

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

  .owner-attendance-schedule,
  .owner-attendance-clock,
  .owner-attendance-status {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .owner-attendance-schedule > span,
  .owner-attendance-clock > span,
  .owner-attendance-status > span {
    width: 32px;
    height: 32px;
  }

  .owner-attendance-clock strong,
  .owner-attendance-schedule strong {
    font-size: 15px;
  }

  .owner-attendance-status small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .owner-attendance-detail-dialog {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }

  .owner-attendance-detail-head {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    gap: 11px;
    padding: 18px 16px;
  }

  .owner-attendance-detail-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .owner-attendance-detail-head h2 {
    font-size: 23px;
  }

  .owner-attendance-detail-head p {
    font-size: 12px;
  }

  .owner-attendance-detail-body {
    max-height: calc(100vh - 205px);
    gap: 12px;
    padding: 16px;
  }

  .owner-attendance-detail-status,
  .owner-attendance-detail-fact {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
  }

  .owner-attendance-detail-status > span,
  .owner-attendance-detail-fact > span {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .owner-attendance-detail-grid {
    grid-template-columns: 1fr;
  }

  .owner-attendance-detail-status strong,
  .owner-attendance-detail-fact strong {
    font-size: 16px;
  }

  .owner-attendance-detail-footer {
    padding: 12px 16px 16px;
  }

  .owner-attendance-empty {
    margin: 12px;
    padding: 14px;
  }

  .overview-team-priority {
    margin: 12px;
  }

  .overview-team-content .overview-team-priority {
    margin: 0;
  }

  .overview-team-priority header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
  }

  .overview-team-priority-list {
    grid-template-columns: 1fr;
  }

  .overview-team-priority-list.is-split {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .overview-team-priority-row {
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    border-right: 0;
    border-bottom: 1px solid #edf0f3;
    padding: 13px 12px;
  }

  .overview-team-priority-list.is-split .overview-team-priority-row:nth-child(-n + 3) {
    border-right: 0;
  }

  .overview-team-priority-list.is-split .overview-team-priority-row:nth-child(3) {
    border-bottom: 1px solid #edf0f3;
  }

  .overview-team-priority-row > span {
    width: 36px;
    height: 36px;
  }

  .overview-team-priority-row b {
    font-size: 13px;
  }

  .overview-team-priority-row:last-child {
    border-bottom: 0;
  }

  .overview-team-priority-row small {
    font-size: 10px;
    white-space: normal;
  }
}

/* Team attendance queue final layout override. Keep this last so it wins over older attendance rules. */
.attendance-feature-head {
  margin: 4px 0 18px;
}

.attendance-feature-head h1 {
  margin-top: 3px;
  font-size: 30px;
  line-height: 1.16;
}

.attendance-feature-head p {
  max-width: 760px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
}

.team-attendance-board {
  gap: 16px;
}

.team-attendance-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-attendance-mode-switch button {
  display: grid;
  min-height: 78px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 19, 28, 0.035);
  color: var(--text-soft);
  padding: 13px 15px;
}

.team-attendance-mode-switch button:hover {
  border-color: #cfd5dd;
  box-shadow: 0 10px 22px rgba(16, 19, 28, 0.055);
}

.team-attendance-mode-switch button.is-active {
  border-color: #15161c;
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: inset 0 0 0 1px #15161c, 0 10px 22px rgba(16, 19, 28, 0.06);
  color: #15161c;
}

.team-attendance-mode-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #f1f3f6;
  color: #6d7480;
}

.team-attendance-mode-icon svg {
  width: 18px;
  height: 18px;
}

.team-attendance-mode-switch button.is-active .team-attendance-mode-icon {
  background: #eef0f3;
  color: #15161c;
}

.team-attendance-mode-switch strong {
  font-size: 15px;
  font-weight: 850;
  line-height: 1.16;
  white-space: normal;
}

.team-attendance-mode-copy > span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.team-attendance-mode-switch button.is-active .team-attendance-mode-copy > span {
  color: var(--muted);
}

.team-attendance-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.team-attendance-metric {
  position: relative;
  display: grid;
  min-height: 96px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #fff 0%, #fff 55%, #fbfbfd 100%);
  box-shadow: 0 14px 30px rgba(16, 19, 28, 0.035);
  padding: 17px 18px;
  text-align: left;
}

.team-attendance-metric:hover {
  border-color: #cfd5dd;
  box-shadow: 0 18px 34px rgba(16, 19, 28, 0.06);
}

.team-attendance-metric.is-active {
  border-color: #15161c;
  box-shadow: inset 0 0 0 1px #15161c, 0 16px 32px rgba(16, 19, 28, 0.08);
}

.team-attendance-metric > span {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

.team-attendance-metric > span svg {
  width: 21px;
  height: 21px;
}

.team-attendance-metric strong {
  overflow: hidden;
  color: #101116;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-metric small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-metric b {
  align-self: end;
  color: #03050a;
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.team-attendance-workbench {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(16, 19, 28, 0.035);
}

.team-attendance-archive-workbench {
  overflow: visible;
}

.team-attendance-head {
  padding: 20px 22px;
}

.team-attendance-head h2 {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
}

.team-attendance-head p {
  max-width: 620px;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
}

.team-attendance-scope {
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
}

.team-attendance-filters {
  gap: 12px;
  padding: 0 20px;
}

.team-attendance-filters button {
  min-height: 42px;
  gap: 7px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 760;
}

.team-attendance-filters b {
  min-width: 24px;
  height: 24px;
  font-size: 12px;
}

.team-attendance-card {
  min-height: 86px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 20px 14px 17px;
}

.team-attendance-card-main {
  grid-template-columns: 54px minmax(230px, 1fr) minmax(180px, auto) minmax(170px, auto);
  gap: 18px;
}

.team-attendance-date {
  width: 48px;
  height: 52px;
}

.team-attendance-date strong {
  font-size: 19px;
}

.team-attendance-copy {
  gap: 5px;
}

.team-attendance-copy small {
  color: var(--text-soft);
  font-size: 12px;
}

.team-attendance-copy strong {
  font-size: 17px;
}

.team-attendance-copy em {
  font-size: 12px;
}

.team-attendance-times {
  gap: 12px;
}

.team-attendance-time-chip {
  min-width: 70px;
  gap: 4px;
}

.team-attendance-time-chip b {
  font-size: 16px;
}

.team-attendance-time-chip small {
  padding: 3px 8px;
  font-size: 10px;
}

.team-attendance-status {
  min-height: 32px;
  padding: 7px 11px;
  font-size: 11px;
}

.team-attendance-card-actions .button {
  min-height: 38px;
  border-radius: 8px;
  padding-inline: 14px;
}

.team-attendance-archive-toolbar {
  grid-template-columns: minmax(150px, 220px) minmax(160px, 250px) minmax(116px, 150px);
  gap: 9px;
  padding: 12px 18px;
}

.team-attendance-archive-toolbar input,
.team-attendance-archive-toolbar select,
.team-attendance-archive-toolbar .button {
  height: 38px;
  min-height: 38px;
  border-radius: 7px;
  font-size: 12px;
}

.team-attendance-archive-toolbar input[type="month"],
.team-attendance-archive-toolbar input[type="month"]::-webkit-date-and-time-value {
  line-height: 38px;
  text-align: center;
}

.team-attendance-archive-toolbar input[type="month"]::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  margin-left: 4px;
}

.team-attendance-archive-date-area {
  gap: 10px;
  padding: 14px 18px;
}

.team-attendance-archive-date-head strong {
  font-size: 16px;
}

.team-attendance-archive-date-strip button {
  min-width: 62px;
  height: 66px;
  border-radius: 8px;
}

.team-attendance-archive-date-strip button strong {
  font-size: 19px;
}

@media (max-width: 920px) {
  .team-attendance-mode-switch,
  .team-attendance-metrics {
    gap: 9px;
  }

  .team-attendance-mode-switch button {
    min-height: 72px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }

  .team-attendance-mode-icon {
    width: 34px;
    height: 34px;
  }

  .team-attendance-mode-icon svg {
    width: 16px;
    height: 16px;
  }

  .team-attendance-mode-switch strong {
    font-size: 14px;
  }

  .team-attendance-metric {
    min-height: 84px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .team-attendance-metric > span {
    width: 40px;
    height: 40px;
  }

  .team-attendance-metric b {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -18px;
    font-size: 22px;
  }

  .team-attendance-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px 16px 13px;
  }

  .team-attendance-card-main {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
  }

  .team-attendance-times,
  .team-attendance-status {
    grid-column: 2;
    justify-self: start;
  }

  .team-attendance-times {
    margin-top: 3px;
  }

  .team-attendance-card-actions {
    padding-left: 65px;
  }
}

@media (max-width: 620px) {
  .team-attendance-board {
    gap: 12px;
  }

  .team-attendance-mode-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .team-attendance-mode-switch button {
    min-height: 66px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .team-attendance-mode-icon {
    width: 32px;
    height: 32px;
  }

  .team-attendance-mode-switch strong {
    font-size: 12px;
  }

  .team-attendance-mode-copy > span {
    font-size: 10px;
  }

  .team-attendance-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .team-attendance-metric {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px;
  }

  .team-attendance-metric > span {
    width: 32px;
    height: 32px;
  }

  .team-attendance-metric strong {
    font-size: 12px;
    white-space: normal;
  }

  .team-attendance-metric small {
    font-size: 10px;
    white-space: normal;
  }

  .team-attendance-metric b {
    margin: auto 0 0;
    align-self: flex-end;
    font-size: 21px;
  }

  .team-attendance-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
  }

  .team-attendance-head h2 {
    font-size: 20px;
  }

  .team-attendance-head p {
    font-size: 12px;
  }

  .team-attendance-scope {
    min-height: 36px;
    font-size: 13px;
  }

  .team-attendance-filters {
    gap: 14px;
    padding: 0 16px;
  }

  .team-attendance-filters button {
    min-height: 48px;
    font-size: 13px;
  }

  .team-attendance-card-main {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .team-attendance-copy strong {
    font-size: 17px;
    white-space: normal;
  }

  .team-attendance-copy em {
    font-size: 13px;
  }

  .team-attendance-times {
    width: 100%;
    justify-content: flex-start;
  }

  .team-attendance-status {
    max-width: 100%;
    white-space: normal;
  }

  .team-attendance-card-actions {
    padding-left: 0;
  }

  .team-attendance-card-actions .button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .attendance-feature-head h1 {
    font-size: 26px;
  }

  .attendance-feature-head p {
    font-size: 13px;
  }
}

@media (max-width: 340px) {
  .team-attendance-archive-toolbar {
    grid-template-columns: 1fr;
  }
}

/* Final attendance responsive polish. Keep this block last so it wins over older stacked overrides. */
.team-attendance-mode-switch button.is-active {
  border-color: #15161c;
  background: #15161c;
  box-shadow: 0 14px 28px rgba(17, 19, 24, 0.14), inset 0 0 0 1px #15161c;
  color: #ffffff;
}

.team-attendance-mode-switch button.is-active .team-attendance-mode-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.team-attendance-mode-switch button.is-active .team-attendance-mode-copy > span {
  color: rgba(255, 255, 255, 0.72);
}

.team-attendance-archive-date-strip button em {
  display: none;
}

.team-attendance-archive-filter-panel {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border-top: 1px solid #d9dde5;
  border-bottom: 1px solid #d0d6df;
  background: #f7f8fa;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 8px 22px rgba(17, 24, 39, 0.06);
}

.team-attendance-archive-filter-panel summary {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 0 26px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
}

.team-attendance-archive-filter-panel summary::-webkit-details-marker {
  display: none;
}

.team-attendance-archive-filter-panel summary > span,
.team-attendance-archive-filter-panel summary > strong {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.team-attendance-archive-filter-panel summary > strong {
  margin-left: auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-archive-filter-panel summary svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  transition: transform .16s ease;
}

.team-attendance-archive-filter-panel[open] summary {
  border-bottom: 1px solid var(--line);
}

.team-attendance-archive-filter-panel[open] summary > svg:last-child {
  transform: rotate(180deg);
}

.team-attendance-archive-filter-panel > .team-attendance-archive-toolbar {
  position: relative;
  z-index: 1;
  border-bottom: 0;
  background: transparent;
  padding: 22px 26px 18px;
}

.team-attendance-archive-filter-panel .team-attendance-archive-toolbar {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(170px, 270px);
  gap: 18px;
}

.team-attendance-archive-filter-panel .team-attendance-archive-toolbar label span {
  color: #4b5568;
  font-size: 10px;
  font-weight: 900;
}

.team-attendance-archive-filter-panel .team-attendance-archive-toolbar input,
.team-attendance-archive-filter-panel .team-attendance-archive-toolbar select,
.team-attendance-archive-filter-panel .team-attendance-archive-toolbar .button {
  height: 46px;
  min-height: 46px;
  border-radius: 9px;
  border-color: #d3d8e1;
  background-color: #ffffff;
  box-shadow:
    0 6px 14px rgba(17, 24, 39, 0.05),
    inset 0 1px 0 #ffffff;
}

.team-attendance-archive-filter-panel .team-attendance-archive-toolbar input[type="month"],
.team-attendance-archive-filter-panel .team-attendance-archive-toolbar input[type="month"]::-webkit-date-and-time-value {
  line-height: 46px;
}

.team-attendance-archive-filter-panel .team-attendance-archive-toolbar input:hover,
.team-attendance-archive-filter-panel .team-attendance-archive-toolbar select:hover,
.team-attendance-archive-filter-panel .team-attendance-archive-toolbar .button:hover {
  border-color: #b8c0cc;
  background-color: #ffffff;
}

.team-attendance-archive-filter-panel .team-attendance-archive-toolbar [data-attendance-archive-reset],
.team-attendance-archive-filter-panel .team-attendance-archive-toolbar [data-attendance-team-reset] {
  border-color: #343941;
  background-color: #343941;
  color: #ffffff;
  box-shadow:
    0 8px 18px rgba(17, 24, 39, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.team-attendance-archive-filter-panel .team-attendance-archive-toolbar [data-attendance-archive-reset]:hover,
.team-attendance-archive-filter-panel .team-attendance-archive-toolbar [data-attendance-team-reset]:hover {
  border-color: #111116;
  background-color: #111116;
  color: #ffffff;
}

.team-attendance-archive-filter-panel .team-attendance-archive-toolbar [data-attendance-archive-reset]:focus-visible,
.team-attendance-archive-filter-panel .team-attendance-archive-toolbar [data-attendance-team-reset]:focus-visible {
  outline: 3px solid rgba(17, 17, 22, 0.18);
  outline-offset: 1px;
}

.team-attendance-archive-filter-panel .team-attendance-archive-toolbar input:focus,
.team-attendance-archive-filter-panel .team-attendance-archive-toolbar select:focus {
  outline: 3px solid rgba(17, 17, 22, 0.14);
  outline-offset: 1px;
  border-color: #111116;
  background-color: #ffffff;
}

.team-attendance-archive-filter-panel:not([open]) > .team-attendance-archive-toolbar {
  display: none;
}

@media (max-width: 760px) {
  .team-attendance-archive-filter-panel summary {
    min-height: 46px;
    gap: 12px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 680;
  }

  .team-attendance-archive-filter-panel summary > strong {
    font-size: 11px;
    font-weight: 620;
  }

  .team-attendance-archive-filter-panel summary svg {
    width: 16px;
    height: 16px;
  }

  .team-attendance-archive-toolbar,
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 14px 16px 16px;
  }

  .team-attendance-archive-toolbar > *,
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar > * {
    min-width: 0;
    max-width: 100%;
  }

  .team-attendance-archive-toolbar label,
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar label {
    contain: inline-size;
  }

  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar label span {
    font-size: 9px;
    font-weight: 820;
  }

  .team-attendance-archive-toolbar input,
  .team-attendance-archive-toolbar select,
  .team-attendance-archive-toolbar .button,
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar input,
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar select,
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar .button {
    width: 100%;
    height: 46px;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    justify-content: center;
    border-radius: 9px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.2;
  }

  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar input[type="month"],
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar input[type="month"]::-webkit-date-and-time-value {
    line-height: 46px;
  }

  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar .button {
    font-size: 13px;
    font-weight: 740;
  }

  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar .button svg {
    width: 17px;
    height: 17px;
  }

  .team-attendance-archive-toolbar .button,
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar .button {
    grid-column: 1 / -1;
    padding-inline: 12px;
    white-space: nowrap;
  }

  .team-attendance-archive-date-strip button {
    min-width: 66px;
    height: 64px;
    padding: 8px 7px;
  }
}

@media (max-width: 620px) {
  .team-attendance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .team-attendance-metric {
    min-height: 72px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 10px;
  }

  .team-attendance-metric:nth-child(3) {
    grid-column: 1 / -1;
  }

  .team-attendance-metric > span {
    width: 34px;
    height: 34px;
  }

  .team-attendance-metric strong,
  .team-attendance-metric small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .team-attendance-metric strong {
    font-size: 12px;
    line-height: 1.15;
  }

  .team-attendance-metric small {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.18;
  }

  .team-attendance-metric b {
    position: static;
    align-self: center;
    margin: 0;
    font-size: 20px;
    line-height: 1;
  }
}

@media (max-width: 430px) {
  .team-attendance-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-attendance-metric,
  .team-attendance-metric:nth-child(3) {
    grid-column: auto;
  }

  .team-attendance-archive-toolbar,
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 14px;
  }

  .team-attendance-archive-toolbar .button,
  .team-attendance-archive-filter-panel .team-attendance-archive-toolbar .button {
    grid-column: auto;
  }
}

.team-attendance-queue-workbench {
  overflow: visible;
}

.team-attendance-queue-date-area {
  border-top: 0;
}

.team-attendance-queue-card {
  overflow: hidden;
}

.team-attendance-archive-card.tone-danger {
  border-left-color: #c85f55;
}

.team-attendance-archive-card.tone-neutral {
  border-left-color: #aab0b7;
}

.team-attendance-archive-card.tone-danger .team-attendance-archive-status > span {
  background: #fdeceb;
  color: #b34f41;
}

.team-attendance-archive-card.tone-neutral .team-attendance-archive-status > span {
  background: #eef0f3;
  color: #626a75;
}

.team-attendance-queue-card .team-attendance-card-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  padding-top: 4px;
}

.team-attendance-queue-card .team-attendance-archive-status {
  overflow: hidden;
}

.team-attendance-queue-card .team-attendance-archive-status p {
  overflow: hidden;
}

.team-attendance-queue-card .team-attendance-archive-status strong {
  white-space: normal;
}

.team-attendance-queue-card .team-attendance-archive-status small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.team-attendance-queue-card .team-attendance-card-actions .button {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  border-radius: 8px;
  padding-inline: 14px;
}

@media (max-width: 980px) {
  .team-attendance-queue-card .team-attendance-card-actions {
    grid-column: 1 / -1;
  }

  .team-attendance-queue-card .team-attendance-card-actions .button {
    width: 100%;
  }
}

/* Owner escalation surface: reuse attendance/leave components with a tighter route wrapper. */
.owner-escalation-page {
  display: grid;
  gap: 16px;
}

.owner-escalation-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.owner-escalation-mode-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.owner-escalation-mode-cards .schedule-team-view-card {
  min-height: 104px;
}

.owner-escalation-mode-cards .schedule-team-view-card > span {
  color: #5871d8;
}

.owner-escalation-mode-cards .schedule-team-view-card.tone-green > span {
  background: #eaf7ef;
  color: #347c55;
}

.owner-escalation-mode-cards .schedule-team-view-card.tone-amber > span {
  background: #fff3d8;
  color: #a36d16;
}

.owner-escalation-mode-cards .schedule-team-view-card.tone-slate > span {
  background: #eef1f4;
  color: #56606c;
}

.owner-escalation-board-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfd 100%);
  padding: 16px 18px;
}

.owner-escalation-board-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f3;
  color: #56625d;
}

.owner-escalation-board-icon svg {
  width: 18px;
  height: 18px;
}

.owner-escalation-board-head > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.owner-escalation-board-head small {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.owner-escalation-board-head h2,
.owner-escalation-board-head p {
  margin: 0;
}

.owner-escalation-board-head h2 {
  color: #07090f;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
}

.owner-escalation-board-head p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.owner-escalation-board-head .team-attendance-scope {
  margin-top: 0;
  min-height: 32px;
  justify-self: end;
  padding: 6px 11px;
  font-size: 11px;
}

.owner-escalation-swap-list {
  margin: 0;
  padding: 16px 18px 18px;
}

.owner-escalation-swap-board .owner-escalation-empty {
  margin: 18px 20px 20px;
}

.owner-escalation-filter-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
  border: 1px solid #dde2e9;
  border-radius: 10px;
  background: #eef1f5;
  padding: 4px;
}

.owner-escalation-filter-tabs button {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  padding: 0 10px;
  font: inherit;
  cursor: pointer;
}

.owner-escalation-filter-tabs button:hover {
  background: rgba(255, 255, 255, 0.45);
}

.owner-escalation-filter-tabs button.is-active {
  background: #ffffff;
  color: #111116;
  box-shadow: 0 8px 18px rgba(17, 19, 24, 0.08);
}

.owner-escalation-filter-tabs span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  flex: 0 0 18px;
  color: currentColor;
}

.owner-escalation-filter-tabs svg {
  width: 15px;
  height: 15px;
}

.owner-escalation-filter-tabs strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-escalation-filter-tabs b {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.07);
  color: #30343b;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.owner-escalation-filter-tabs button.is-active b {
  background: #15161c;
  color: #ffffff;
}

.owner-escalation-empty {
  margin: 18px 20px 20px;
}

@media (max-width: 720px) {
  .owner-escalation-page {
    gap: 12px;
  }

  .owner-escalation-mode-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .owner-escalation-mode-cards .schedule-team-view-card {
    min-height: 86px;
    padding: 11px 40px 11px 11px;
  }

  .owner-escalation-mode-cards .schedule-team-view-card > span {
    width: 34px;
    height: 34px;
  }

  .owner-escalation-mode-cards .schedule-team-view-card strong {
    font-size: 12px;
  }

  .owner-escalation-mode-cards .schedule-team-view-card small {
    font-size: 10px;
  }

  .owner-escalation-mode-cards .schedule-team-view-card b {
    right: 10px;
    bottom: 10px;
    font-size: 20px;
  }

  .owner-escalation-filter-tabs button {
    min-height: 42px;
    gap: 5px;
    padding-inline: 7px;
  }

  .owner-escalation-filter-tabs strong {
    font-size: 11px;
  }

  .owner-escalation-filter-tabs b {
    min-width: 19px;
    height: 19px;
    font-size: 10px;
  }

  .owner-escalation-board-head {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    padding: 12px;
  }

  .owner-escalation-board-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
  }

  .owner-escalation-board-icon svg {
    width: 16px;
    height: 16px;
  }

  .owner-escalation-board-head small {
    font-size: 9px;
  }

  .owner-escalation-board-head h2 {
    font-size: 17px;
  }

  .owner-escalation-board-head p {
    font-size: 10px;
    line-height: 1.35;
  }

  .owner-escalation-board-head .team-attendance-scope {
    grid-column: 1 / -1;
    min-height: 29px;
    justify-self: stretch;
    padding: 5px 9px;
    font-size: 10px;
  }

  .owner-escalation-swap-list {
    padding: 12px;
  }
}

@media (max-width: 430px) {
  .owner-escalation-mode-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.team-attendance-date-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #fffaf0;
  padding: 10px 18px;
  color: #6f5320;
  font-size: 12px;
  font-weight: 750;
}

.team-attendance-date-filter span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.team-attendance-date-filter svg {
  width: 15px;
  height: 15px;
}

.team-attendance-date-filter strong {
  min-width: 0;
  overflow: hidden;
  color: #332716;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-attendance-date-filter small {
  color: #9a7a38;
  font-size: 11px;
}

.team-attendance-date-filter button {
  flex: 0 0 auto;
  border: 1px solid rgba(151, 111, 31, 0.22);
  border-radius: 8px;
  background: #fff;
  color: #8a6219;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 720px) {
  .team-attendance-date-filter {
    align-items: flex-start;
    padding: 10px 14px;
  }

  .team-attendance-date-filter span {
    display: grid;
    gap: 2px;
  }

  .team-attendance-date-filter span svg {
    display: none;
  }
}

/* resources/css/features/workforce/activity.css */
/* Team Activity */
.team-activity-workspace {
  display: grid;
  gap: 18px;
}

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

.team-activity-metric {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 92px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 251, 0.9));
  color: inherit;
  padding: 12px;
  text-align: left;
  box-shadow: 0 10px 26px rgba(30, 36, 32, 0.04);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.team-activity-metric:hover {
  border-color: #c5cbc8;
  box-shadow: 0 10px 24px rgba(30, 36, 32, 0.06);
  transform: translateY(-1px);
}

.team-activity-metric.active {
  border-color: #17191d;
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfd 100%);
  color: inherit;
  box-shadow: inset 0 0 0 1px #17191d, 0 10px 22px rgba(17, 17, 22, 0.07);
}

.team-activity-metric > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #f0f1f4;
  color: #656976;
}

.team-activity-metric.tone-blue > span { background: #eef3ff; color: #5d72d8; }
.team-activity-metric.tone-green > span { background: #eaf6ee; color: #3e8b5f; }
.team-activity-metric.tone-amber > span { background: #fff4db; color: #a16d10; }
.team-activity-metric.tone-coral > span { background: #fff0ed; color: #ca5b4d; }

.team-activity-metric.active.tone-blue > span { background: #eef3ff; color: #5d72d8; }
.team-activity-metric.active.tone-green > span { background: #eaf6ee; color: #3e8b5f; }
.team-activity-metric.active.tone-amber > span { background: #fff4db; color: #a16d10; }
.team-activity-metric.active.tone-coral > span { background: #fff0ed; color: #ca5b4d; }

.team-activity-metric svg {
  width: 20px;
  height: 20px;
}

.team-activity-metric div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.team-activity-metric strong,
.team-activity-metric small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-activity-metric strong {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 820;
  white-space: normal;
}

.team-activity-metric small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.team-activity-metric.active small {
  color: var(--muted);
}

.team-activity-metric b {
  display: block;
  align-self: end;
  justify-self: end;
  min-width: 0;
  height: auto;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

.team-activity-metric.active b {
  background: transparent;
  color: #111116;
}

.team-activity-board {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(23, 26, 35, 0.04);
}

.team-activity-board-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #ffffff 0%, #fbfcff 100%);
  padding: 20px 22px;
}

.team-activity-board-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: #eef3ff;
  color: #5d72d8;
}

.team-activity-board-head small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.team-activity-board-head h2,
.team-activity-board-head p {
  margin: 0;
}

.team-activity-board-head h2 {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.15;
}

.team-activity-board-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  max-width: 620px;
}

.team-activity-count {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f3f4f7;
  color: #535764;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}

.team-activity-filter-tabs {
  display: flex;
  min-width: 0;
  gap: 3px;
  overflow-x: auto;
  scroll-margin-top: 76px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0 20px;
  scrollbar-width: none;
}

.team-activity-filter-tabs::-webkit-scrollbar {
  display: none;
}

.team-activity-filter-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #676b77;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 0 13px;
}

.team-activity-filter-tabs button.active {
  border-bottom-color: #111116;
  color: #111116;
}

.team-activity-filter-tabs b {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #eef0f3;
  color: #5d626e;
  font-size: 10px;
  font-weight: 850;
}

.team-activity-filter-tabs button.active b {
  background: #111116;
  color: #fff;
}

.team-activity-filter-panel {
  min-width: 0;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
}

.team-activity-filter-panel summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 0 20px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
}

.team-activity-filter-panel summary::-webkit-details-marker {
  display: none;
}

.team-activity-filter-panel summary > span,
.team-activity-filter-panel summary > strong {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.team-activity-filter-panel summary > strong {
  margin-left: auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-activity-filter-panel summary svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.team-activity-filter-panel[open] summary {
  border-bottom: 1px solid var(--line);
}

.team-activity-filter-panel[open] summary > svg:last-child {
  transform: rotate(180deg);
}

.team-activity-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 10px 14px;
  background: #fafbfc;
  padding: 14px 18px;
}

.team-activity-controls label {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.team-activity-date-range {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.team-activity-controls span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 760;
  text-transform: uppercase;
}

.team-activity-controls input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid #dadde4;
  border-radius: 7px;
  background: #fbfbfc;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 0 12px;
}

.team-activity-controls input:focus {
  border-color: #aeb8ff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(88, 113, 216, 0.13);
}

.team-activity-date-control {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.team-activity-date-control:focus-within {
  outline: 0;
}

.team-activity-date-control input[type="date"] {
  display: block;
  width: 100%;
  height: 42px;
  min-height: 42px;
  border: 1px solid #dadde4;
  border-radius: 7px;
  background: #fbfbfc;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  line-height: 42px;
  padding: 0 10px;
  text-align: center;
}

.team-activity-controls .button {
  box-sizing: border-box;
  grid-column: 1 / -1;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  font-size: 12px;
  font-weight: 720;
}

.team-activity-search-field {
  grid-column: 1 / -1;
  min-width: 0;
}

.team-activity-controls input[type="date"] {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
}

.team-activity-controls input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.team-activity-controls input[type="date"]::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  margin-left: 4px;
}

.team-activity-timeline {
  display: grid;
  border-top: 10px solid #f1f3f6;
}

.team-activity-day {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}

.team-activity-day + .team-activity-day {
  border-top: 10px solid #f1f3f6;
}

.team-activity-day:last-child {
  border-bottom: 0;
}

.team-activity-day-label {
  display: grid;
  align-content: start;
  gap: 6px;
  border-right: 1px solid var(--line);
  background: #fbfcfd;
  padding: 18px 20px;
}

.team-activity-day-label strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.team-activity-day-label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.team-activity-day-list {
  display: grid;
}

.team-activity-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid #eef0f3;
  padding: 15px 18px;
}

.team-activity-item:last-child {
  border-bottom: 0;
}

.team-activity-item::before {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #c9cdd6;
  content: "";
}

.team-activity-item.tone-blue::before { background: #6579df; }
.team-activity-item.tone-green::before { background: #4c9a68; }
.team-activity-item.tone-amber::before { background: #c69232; }
.team-activity-item.tone-red::before,
.team-activity-item.tone-coral::before { background: #cf6254; }

.team-activity-item-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #f0f1f4;
  color: #656976;
}

.team-activity-item.tone-blue .team-activity-item-icon { background: #eef3ff; color: #5d72d8; }
.team-activity-item.tone-green .team-activity-item-icon { background: #eaf6ee; color: #3e8b5f; }
.team-activity-item.tone-amber .team-activity-item-icon { background: #fff4db; color: #a16d10; }
.team-activity-item.tone-red .team-activity-item-icon,
.team-activity-item.tone-coral .team-activity-item-icon { background: #fff0ed; color: #ca5b4d; }

.team-activity-item-icon svg {
  width: 17px;
  height: 17px;
}

.team-activity-item-main {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.team-activity-item-title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.team-activity-item-title div {
  min-width: 0;
}

.team-activity-item-title small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 780;
  text-transform: uppercase;
}

.team-activity-item-title h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.24;
}

.team-activity-item-title .button {
  min-height: 36px;
  padding-inline: 12px;
  white-space: nowrap;
}

.team-activity-detail-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  color: #303540;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 820;
  padding: 0 11px;
  white-space: nowrap;
}

.team-activity-detail-button:hover {
  border-color: #cfd4dd;
  background: #f8f9fb;
}

.team-activity-detail-button svg {
  width: 15px;
  height: 15px;
}

.team-activity-item-main p {
  margin: 0;
  color: #4e5260;
  font-size: 12px;
  font-weight: 610;
  line-height: 1.45;
}

.team-activity-item-foot {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.team-activity-actor-line {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #747986;
  font-size: 12px;
  font-weight: 760;
}

.team-activity-actor-line svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.team-activity-item-chips {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
}

.team-activity-item-chips span {
  display: inline-flex;
  max-width: 100%;
  min-height: 27px;
  align-items: center;
  gap: 6px;
  border: 1px solid #e3e6ec;
  border-radius: 999px;
  background: #fbfcfd;
  color: #5b606c;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 760;
}

.team-activity-item-chips span.status {
  border-color: #e7eadf;
  background: #f8faf4;
  color: #5d653d;
}

.team-activity-item-chips span.reference {
  color: #636879;
}

.team-activity-item-chips svg {
  width: 13px;
  height: 13px;
}

.team-activity-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

.team-activity-empty svg {
  width: 28px;
  height: 28px;
}

.team-activity-empty strong {
  color: var(--ink);
  font-size: 16px;
}

.team-activity-empty span {
  font-size: 13px;
}

.team-activity-modal {
  position: fixed;
  z-index: 80;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow-y: auto;
  background: rgba(24, 27, 30, 0.56);
  padding: 20px 24px;
  backdrop-filter: blur(3px);
}

.team-activity-modal-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 26px 72px rgba(22, 24, 32, 0.24);
}

@supports (height: 100dvh) {
  .team-activity-modal-shell {
    max-height: calc(100dvh - 40px);
  }
}

.team-activity-modal-shell > header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  align-items: start;
  gap: 13px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  padding: 21px 24px;
}

.team-activity-modal-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  background: #eef1f4;
  color: #60656f;
}

.team-activity-modal-icon.tone-blue { background: #eef3ff; color: #5d72d8; }
.team-activity-modal-icon.tone-green { background: #eaf6ee; color: #3e8b5f; }
.team-activity-modal-icon.tone-amber { background: #fff4db; color: #a16d10; }
.team-activity-modal-icon.tone-red,
.team-activity-modal-icon.tone-coral { background: #fff0ed; color: #ca5b4d; }

.team-activity-modal-shell header small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.team-activity-modal-shell h2 {
  margin: 3px 0 0;
  font-size: 22px;
  line-height: 1.2;
}

.team-activity-modal-shell header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.team-activity-modal-body {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 14px;
  overflow-y: auto;
  background: #fbfcfd;
  padding: 20px 24px 22px;
}

.team-activity-hero-detail {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.team-activity-hero-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #eef1f4;
  color: #60656f;
}

.team-activity-hero-icon.tone-blue { background: #eef3ff; color: #5d72d8; }
.team-activity-hero-icon.tone-green { background: #eaf6ee; color: #3e8b5f; }
.team-activity-hero-icon.tone-amber { background: #fff4db; color: #a16d10; }
.team-activity-hero-icon.tone-red,
.team-activity-hero-icon.tone-coral { background: #fff0ed; color: #ca5b4d; }

.team-activity-hero-detail div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.team-activity-hero-detail small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.team-activity-hero-detail strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.team-activity-hero-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.team-activity-people-line {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.team-activity-people-line span {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 7px;
  border: 1px solid #e1e5eb;
  border-radius: 999px;
  background: #ffffff;
  color: #5b6170;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 760;
}

.team-activity-people-line svg {
  width: 14px;
  height: 14px;
}

.team-activity-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.team-activity-facts span {
  display: grid;
  min-width: 0;
  gap: 5px;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.team-activity-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  background: #ffffff;
  padding: 14px 24px;
}

.team-activity-modal-footer span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.team-activity-modal-footer svg {
  width: 15px;
  height: 15px;
  color: #3e8b5f;
}

.team-activity-modal-footer .button {
  min-height: 36px;
  padding: 0 18px;
}

.team-activity-facts small,
.team-activity-detail-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.team-activity-facts strong,
.team-activity-detail-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.team-activity-detail-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.team-activity-detail-card h3 {
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
  padding: 13px 14px;
  font-size: 15px;
}

.team-activity-detail-card div {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
}

.team-activity-detail-card div:last-child {
  border-bottom: 0;
}

@media (max-width: 1100px) {
  .team-activity-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .team-activity-workspace {
    gap: 12px;
  }

  .team-activity-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .team-activity-metric {
    min-height: 104px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    padding: 11px 11px 42px;
  }

  .team-activity-metric > span {
    width: 36px;
    height: 36px;
  }

  .team-activity-metric strong {
    font-size: 13px;
  }

  .team-activity-metric small {
    font-size: 10px;
  }

  .team-activity-metric b {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-width: 0;
    height: auto;
    font-size: 21px;
  }

  .team-activity-board-head {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    padding: 17px 16px;
  }

  .team-activity-board-icon {
    width: 42px;
    height: 42px;
  }

  .team-activity-filter-tabs {
    gap: 3px;
    padding: 0 16px;
  }

  .team-activity-filter-tabs button {
    min-height: 42px;
    font-size: 12px;
    padding: 0 13px;
  }

  .team-activity-filter-panel summary {
    padding: 0 16px;
  }

  .team-activity-filter-panel summary > strong {
    max-width: 46%;
  }

  .team-activity-board-head h2 {
    font-size: 20px;
  }

  .team-activity-board-head p {
    font-size: 12px;
  }

  .team-activity-controls {
    grid-template-columns: repeat(2, minmax(118px, 1fr));
    gap: 8px;
    padding: 13px 14px 15px;
  }

  .team-activity-date-range {
    display: flex;
    flex-direction: column;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .team-activity-search-field,
  .team-activity-date-field,
  .team-activity-controls .button {
    grid-column: 1 / -1;
  }

  .team-activity-controls label,
  .team-activity-controls input,
  .team-activity-controls .button {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .team-activity-controls input[type="date"] {
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 5px 0 7px;
    font-size: 11px;
    letter-spacing: 0;
    text-align: center;
  }

  .team-activity-controls input[type="date"]::-webkit-date-and-time-value {
    padding: 0;
    min-width: 0;
    max-width: 100%;
    line-height: 40px;
    text-align: center;
  }

  .team-activity-controls input[type="date"]::-webkit-calendar-picker-indicator {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    padding: 0;
  }

  .team-activity-day {
    grid-template-columns: 1fr;
    border-bottom: 0;
  }

  .team-activity-timeline {
    border-top-width: 12px;
  }

  .team-activity-day + .team-activity-day {
    border-top: 12px solid #eef0f4;
  }

  .team-activity-day-label {
    border-right: 0;
    border-bottom: 1px solid #dfe3ea;
    background: #f8f9fb;
    padding: 16px;
  }

  .team-activity-day-label strong {
    font-size: 15px;
  }

  .team-activity-day-label span {
    font-size: 12px;
  }

  .team-activity-item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    padding: 15px 16px;
  }

  .team-activity-item-icon {
    width: 38px;
    height: 38px;
  }

  .team-activity-item-title {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .team-activity-item-title h3 {
    font-size: 16px;
  }

  .team-activity-item-title .button {
    width: 100%;
  }

  .team-activity-detail-button {
    width: 100%;
  }

  .team-activity-item-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-activity-item-chips {
    gap: 6px;
  }

  .team-activity-item-chips span {
    min-height: 25px;
    font-size: 10px;
  }

  .team-activity-modal {
    padding: 12px;
  }

  .team-activity-modal-shell {
    max-height: calc(100dvh - 20px);
    border-radius: 9px;
  }

  .team-activity-modal-shell > header {
    grid-template-columns: 42px minmax(0, 1fr) 40px;
    gap: 11px;
    padding: 17px;
  }

  .team-activity-modal-icon {
    width: 42px;
    height: 42px;
  }

  .team-activity-modal-shell h2 {
    font-size: 19px;
  }

  .team-activity-modal-body {
    gap: 12px;
    padding: 16px;
  }

  .team-activity-hero-detail {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
  }

  .team-activity-hero-icon {
    width: 38px;
    height: 38px;
  }

  .team-activity-hero-detail strong {
    font-size: 13px;
  }

  .team-activity-hero-detail p,
  .team-activity-people-line span {
    font-size: 11px;
  }

  .team-activity-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .team-activity-facts span,
  .team-activity-facts span:nth-child(2n),
  .team-activity-facts span:nth-last-child(-n + 2) {
    border: 1px solid #e1e5eb;
    padding: 12px 10px;
  }

  .team-activity-facts small {
    font-size: 8px;
  }

  .team-activity-facts strong {
    font-size: 11px;
    line-height: 1.3;
  }

  .team-activity-modal-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 13px 16px 16px;
  }

  .team-activity-modal-footer span {
    justify-content: center;
    text-align: center;
  }

  .team-activity-modal-footer .button {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .team-activity-controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .team-activity-date-range {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .team-activity-search-field,
  .team-activity-date-field {
    grid-column: 1 / -1 !important;
  }

  .team-activity-date-control,
  .team-activity-controls input[type="date"],
  .team-activity-controls input[type="search"],
  .team-activity-controls .button {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .owner-attendance-calendar-head {
    align-items: flex-start;
    padding: 12px 12px 11px;
  }

  .owner-attendance-calendar-head h3 {
    font-size: 19px;
  }

  .owner-attendance-calendar-head > span {
    padding: 6px 9px;
    font-size: 10px;
  }

  .owner-attendance-calendar-scroll {
    padding: 10px;
  }

  .owner-attendance-calendar-grid {
    gap: 8px;
  }

  .owner-attendance-day {
    position: relative;
    overflow: hidden;
    gap: 8px;
    border: 1px solid #e0e3ea;
    border-left: 0;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(18, 18, 24, 0.045);
    padding: 9px 9px 10px 12px;
  }

  .owner-attendance-day::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #b8bdc8;
    content: "";
  }

  .owner-attendance-day.tone-success::before,
  .owner-attendance-day.tone-info::before {
    background: #4f9e69;
  }

  .owner-attendance-day.tone-warning::before {
    background: #c99a3f;
  }

  .owner-attendance-day.tone-muted::before {
    background: #b8bdc8;
  }

  .owner-attendance-day.is-today {
    box-shadow: inset 0 0 0 1px #111116, 0 8px 18px rgba(18, 18, 24, 0.045);
  }

  .owner-attendance-day-top {
    align-items: flex-start;
    gap: 6px;
  }

  .owner-attendance-day-top p {
    gap: 4px;
  }

  .owner-attendance-day-top strong {
    font-size: 24px;
  }

  .owner-attendance-day-top small {
    font-size: 9px;
  }

  .owner-attendance-day-actions {
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
  }

  .owner-attendance-day-top span {
    display: none;
  }

  .owner-attendance-day-count {
    border-radius: 999px;
    background: #f2f3f6;
    color: #5f6470;
    padding: 3px 6px;
    font-size: 9px;
    letter-spacing: 0;
  }

  .owner-attendance-day-toggle {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .owner-attendance-day-badge {
    max-width: 100%;
    overflow: hidden;
    padding: 6px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .owner-attendance-day.is-expanded {
    padding-bottom: 11px;
  }

  .owner-attendance-day.is-expanded .owner-attendance-day-body {
    margin-top: 1px;
    border-top: 1px solid #edf0f3;
    padding-top: 8px;
  }

  .owner-attendance-day-entry {
    min-height: 34px;
    border-radius: 8px;
    padding: 7px 8px;
  }

  .owner-attendance-day-entry strong {
    font-size: 12px;
  }

  .owner-attendance-day-entry span {
    padding: 4px 6px;
    font-size: 9px;
  }

  .owner-attendance-employee-card {
    border-left-width: 3px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(18, 18, 24, 0.04);
  }

  .owner-attendance-employee-stat {
    border-radius: 9px;
    background: #ffffff;
  }
}

/* resources/css/features/workforce/evaluation.css */
.evaluation-surface {
  display: grid;
  gap: 0;
}

.owner-attendance-overview.evaluation-filter-overview .owner-attendance-filter-section.evaluation-filter-section {
  margin: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  box-shadow: 0 8px 22px rgba(23, 31, 28, .04) !important;
}

.evaluation-workbench,
.evaluation-employee-card,
.evaluation-dialog-summary,
.evaluation-dialog-date-card,
.evaluation-day-record,
.evaluation-dialog-empty-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(23, 31, 28, .06);
}

.evaluation-avatar,
.evaluation-dialog-icon,
.evaluation-dialog-summary > span,
.evaluation-day-summary > span,
.evaluation-leave-note > svg,
.evaluation-dialog-empty-card > svg {
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #edf6f0;
  color: #337452;
}

.evaluation-dialog-summary > span {
  width: 48px;
  height: 48px;
}

.evaluation-dialog-icon svg,
.evaluation-dialog-summary svg,
.evaluation-day-summary svg,
.evaluation-leave-note svg,
.evaluation-dialog-empty-card svg {
  width: 19px;
  height: 19px;
}

.evaluation-workbench-head .surface-label,
.evaluation-employee-title .surface-label,
.evaluation-dialog-head small,
.evaluation-dialog-summary small,
.evaluation-day-summary small,
.evaluation-fact-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.evaluation-workbench-head p,
.evaluation-employee-title p,
.evaluation-dialog-head p,
.evaluation-dialog-summary p,
.evaluation-day-summary p,
.evaluation-leave-note p,
.evaluation-dialog-empty-card p {
  margin: 0;
  color: var(--muted);
}

.evaluation-workbench-head p {
  font-size: 13px;
}

.evaluation-workbench {
  overflow: hidden;
}

.evaluation-workbench-connected {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.evaluation-workbench-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #fff 0%, #f8faf9 100%);
}

.evaluation-workbench-head h2 {
  margin: 3px 0 4px;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0;
}

.evaluation-refresh {
  min-height: 40px;
  padding-inline: 14px;
}

.evaluation-employee-board {
  display: grid;
  gap: 24px;
  padding: 20px 20px 24px;
  background: transparent;
}

.evaluation-employee-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 16px;
  overflow: hidden;
  padding: 18px;
  border-color: #dfe3e7;
  border-left-width: 4px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .07);
}

.evaluation-employee-card::after {
  content: none;
  display: none;
}

.evaluation-employee-card.tone-success { border-left-color: #4f9465; }
.evaluation-employee-card.tone-warning { border-left-color: #ba8c23; }
.evaluation-employee-card.tone-danger { border-left-color: #bd5d4f; }
.evaluation-employee-card.tone-neutral { border-left-color: #b8c0ca; }

.evaluation-employee-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.evaluation-avatar {
  width: 46px;
  height: 46px;
  color: #405149;
  font-size: 13px;
  font-weight: 900;
}

.evaluation-employee-title {
  min-width: 0;
}

.evaluation-employee-title h3 {
  margin: 2px 0 1px;
  overflow: hidden;
  color: #090d12;
  font-size: 21px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evaluation-badge-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.evaluation-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f3f5;
  color: #59636d;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.evaluation-status-badge svg {
  width: 14px;
  height: 14px;
}

.evaluation-status-badge.tone-success { background: #eaf6ee; color: #32714d; }
.evaluation-status-badge.tone-warning { background: #fff4d8; color: #8c6411; }
.evaluation-status-badge.tone-danger { background: #fbecea; color: #aa4e43; }

.evaluation-employee-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.evaluation-period-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.evaluation-review-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.evaluation-category-section {
  display: grid;
  gap: 11px;
  min-width: 0;
  border: 1px solid #e3e8e4;
  border-radius: 8px;
  background: #fbfcfc;
  padding: 13px;
}

.evaluation-category-section.is-period {
  border-color: #e3e8e4;
  background: #fbfcfc;
}

.evaluation-category-section h4 {
  margin: 0;
  color: #4f5d56;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.evaluation-category-grid {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.evaluation-category-grid.is-double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.evaluation-category-grid.is-triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.evaluation-metric-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 70px;
  align-content: start;
  border: 1px solid var(--line);
  border-left: 3px solid #cfd6dc;
  border-radius: 8px;
  background: #fff;
  padding: 9px 34px 8px 10px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.evaluation-metric-card:hover,
.evaluation-metric-card:focus-visible {
  border-color: #111318;
  box-shadow: 0 16px 30px rgba(18, 24, 21, .11);
  transform: translateY(-1px);
}

.evaluation-metric-card > .evaluation-metric-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #f1f4f2;
  color: #69746f;
  line-height: 1;
}

.evaluation-metric-card > .evaluation-metric-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.evaluation-metric-card.is-period {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 14px;
  min-height: 86px;
  border: 1px solid #c9d5e8;
  background: #f8fafc;
  box-shadow: 0 8px 18px rgba(43, 75, 116, .045);
  padding: 13px 16px;
}

.evaluation-metric-card.is-period > .evaluation-metric-icon {
  position: static;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(82, 127, 202, .13);
  border-radius: 8px;
  background: #dfe8fb;
}

.evaluation-metric-card.is-period > .evaluation-metric-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.evaluation-metric-card.is-period > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  min-width: 0;
}

.evaluation-metric-card.is-period small {
  grid-column: 1;
  grid-row: 1;
  color: #34445e;
  font-size: 13px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evaluation-metric-card.is-period strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: block;
  margin-top: 0;
  font-size: 36px;
  text-align: right;
}

.evaluation-metric-card.is-period em {
  grid-column: 1;
  grid-row: 2;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evaluation-metric-card small {
  display: block;
  color: #53615a;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.evaluation-metric-card strong {
  display: block;
  margin-top: 4px;
  color: #070a10;
  font-size: 24px;
  line-height: 1;
}

.evaluation-metric-card em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.evaluation-metric-card.is-review {
  min-height: 66px;
  border: 1px solid #e1e6ec;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: 0 7px 18px rgba(17, 24, 39, .045);
  padding: 8px 34px 8px 10px;
}

.evaluation-metric-card.is-review:hover,
.evaluation-metric-card.is-review:focus-visible {
  border-color: #c9d1dc;
  box-shadow: 0 12px 24px rgba(17, 24, 39, .09);
}

.evaluation-metric-card.is-review em {
  display: none;
}

.evaluation-metric-card.is-review > .evaluation-metric-icon {
  right: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(17, 24, 39, .04);
  border-radius: 8px;
}

.evaluation-metric-card.is-review > .evaluation-metric-icon svg {
  width: 13px;
  height: 13px;
}

.evaluation-metric-card.is-review small {
  padding-right: 4px;
  color: #3f4a45;
  font-size: 10px;
  line-height: 1.12;
}

.evaluation-metric-card.is-review strong {
  margin-top: 4px;
  font-size: 23px;
}

.evaluation-metric-card.tone-success { border-left-color: #4f9465; }
.evaluation-metric-card.tone-info { border-left-color: #527fca; }
.evaluation-metric-card.tone-warning { border-left-color: #ba8c23; }
.evaluation-metric-card.tone-danger { border-left-color: #bd5d4f; }
.evaluation-metric-card.tone-neutral { border-left-color: #b8c0ca; }
.evaluation-metric-card.is-review.tone-success { border-color: #b8dcc6; }
.evaluation-metric-card.is-review.tone-info { border-color: #bfd0ef; }
.evaluation-metric-card.is-review.tone-warning { border-color: #ead28d; }
.evaluation-metric-card.is-review.tone-danger { border-color: #e5bbb5; }
.evaluation-metric-card.is-review.tone-neutral { border-color: #d7dde3; }
.evaluation-metric-card.is-review.tone-success:hover,
.evaluation-metric-card.is-review.tone-success:focus-visible { border-color: #78b68d; }
.evaluation-metric-card.is-review.tone-info:hover,
.evaluation-metric-card.is-review.tone-info:focus-visible { border-color: #86a3d8; }
.evaluation-metric-card.is-review.tone-warning:hover,
.evaluation-metric-card.is-review.tone-warning:focus-visible { border-color: #c89a38; }
.evaluation-metric-card.is-review.tone-danger:hover,
.evaluation-metric-card.is-review.tone-danger:focus-visible { border-color: #c98076; }
.evaluation-metric-card.is-review.tone-neutral:hover,
.evaluation-metric-card.is-review.tone-neutral:focus-visible { border-color: #abb4bf; }
.evaluation-metric-card.tone-success > span { background: #edf7f0; color: #377650; }
.evaluation-metric-card.tone-info > span { background: #eef4ff; color: #386db1; }
.evaluation-metric-card.tone-warning > span { background: #fff4d8; color: #9b7116; }
.evaluation-metric-card.tone-danger > span { background: #fbecea; color: #aa4e43; }

.evaluation-period-metrics .evaluation-metric-card.is-period.tone-info {
  border-color: #b8c7e8;
  background: #f8f9fc;
}

.evaluation-period-metrics .evaluation-metric-card.is-period.tone-neutral {
  border-color: #c7ceca;
  background: #f8faf9;
  box-shadow: 0 8px 18px rgba(40, 49, 45, .04);
}

.evaluation-period-metrics .evaluation-metric-card.is-period.tone-neutral > .evaluation-metric-icon {
  border-color: rgba(105, 116, 111, .13);
  background: #e3e9e6;
  color: #596760;
}

@media (min-width: 901px) {
  .evaluation-workbench .evaluation-employee-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 20px 20px;
  }

  .evaluation-workbench .evaluation-employee-head {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
  }

  .evaluation-workbench .evaluation-avatar {
    width: 44px;
    height: 44px;
    font-size: 12px;
  }

  .evaluation-workbench .evaluation-employee-title h3 {
    font-size: 22px;
  }

  .evaluation-workbench .evaluation-employee-title p {
    font-size: 13px;
    line-height: 1.25;
  }

  .evaluation-workbench .evaluation-employee-sections,
  .evaluation-workbench .evaluation-period-metrics,
  .evaluation-workbench .evaluation-review-sections {
    justify-self: stretch;
    width: 100%;
  }

  .evaluation-workbench .evaluation-period-metrics,
  .evaluation-workbench .evaluation-review-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.evaluation-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px dashed #d3dbd7;
  border-radius: 8px;
  background: #fff;
  padding: 44px 20px;
  text-align: center;
}

.evaluation-empty svg {
  width: 34px;
  height: 34px;
  color: #8c9892;
}

.evaluation-empty h3 {
  margin: 0;
  font-size: 20px;
}

.evaluation-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.evaluation-dialog {
  width: min(760px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 26px 80px rgba(20, 28, 24, .25);
}

.evaluation-dialog::backdrop {
  background: rgba(18, 24, 21, .58);
  backdrop-filter: blur(3px);
}

.evaluation-dialog-shell {
  display: grid;
  width: 100%;
  max-height: calc(100dvh - 28px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #fff;
}

.evaluation-dialog-head {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 42px;
  align-items: start;
  gap: 13px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #fff 0%, #f8faf9 100%);
  padding: 18px 20px;
}

.evaluation-dialog-icon {
  width: 50px;
  height: 50px;
}

.evaluation-dialog-icon.tone-success,
.evaluation-day-summary.tone-success > span { background: #edf7f0; color: #347650; }
.evaluation-dialog-icon.tone-info,
.evaluation-day-summary.tone-info > span { background: #eef4ff; color: #386db1; }
.evaluation-dialog-icon.tone-warning,
.evaluation-day-summary.tone-warning > span { background: #fff4d8; color: #9b7116; }
.evaluation-dialog-icon.tone-danger,
.evaluation-day-summary.tone-danger > span { background: #fbecea; color: #aa4e43; }
.evaluation-dialog-icon.tone-neutral,
.evaluation-day-summary.tone-neutral > span { background: #f1f3f5; color: #69746f; }

.evaluation-dialog-head h2 {
  margin: 2px 0 4px;
  color: #0a0d12;
  font-size: 24px;
  line-height: 1.14;
  letter-spacing: 0;
}

.evaluation-dialog-head p {
  font-size: 13px;
  font-weight: 700;
}

.evaluation-dialog-head .icon-button {
  align-self: start;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  color: #64706a;
}

.evaluation-dialog-body {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 20px 18px;
}

.evaluation-dialog-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.evaluation-dialog-summary strong {
  display: block;
  margin: 2px 0 3px;
  font-size: 20px;
  line-height: 1.1;
}

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

.evaluation-dialog-date-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px 14px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.evaluation-dialog-date-card:hover,
.evaluation-dialog-date-card:focus-visible {
  border-color: #111318;
  box-shadow: 0 14px 28px rgba(18, 24, 21, .12);
  transform: translateY(-1px);
}

.evaluation-dialog-date-card time {
  display: grid;
  place-items: center;
  width: 50px;
  height: 56px;
  padding: 7px 4px;
  border-radius: 8px;
  background: #f2f4f5;
  color: #4d5660;
  line-height: 1.05;
}

.evaluation-dialog-date-card time small,
.evaluation-dialog-date-card time span {
  font-size: 9px;
  font-weight: 850;
}

.evaluation-dialog-date-card time strong {
  font-size: 20px;
  line-height: .95;
}

.evaluation-dialog-date-card p {
  min-width: 0;
  margin: 0;
}

.evaluation-dialog-date-card p > strong,
.evaluation-dialog-date-card p > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evaluation-dialog-date-card p > strong {
  font-size: 15px;
  line-height: 1.2;
}

.evaluation-dialog-date-card p > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.evaluation-dialog-date-card > svg {
  width: 18px;
  height: 18px;
  color: #7d8782;
}

.evaluation-dialog-date-card.tone-success time { background: #edf7f0; color: #32714d; }
.evaluation-dialog-date-card.tone-info time { background: #eef4ff; color: #386db1; }
.evaluation-dialog-date-card.tone-warning time { background: #fff4d8; color: #8c6411; }
.evaluation-dialog-date-card.tone-danger time { background: #fbecea; color: #aa4e43; }

.evaluation-dialog-footer {
  display: flex;
  justify-content: stretch;
  border-top: 1px solid var(--line);
  padding: 12px 20px 16px;
}

.evaluation-dialog-footer .button {
  width: 100%;
  min-height: 42px;
}

.evaluation-dialog-empty-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
}

.evaluation-dialog-empty-card > svg {
  width: 46px;
  height: 46px;
  border: 1px solid #e2e5e8;
  background: #f1f3f4;
  padding: 12px;
  color: #7c838a;
}

.evaluation-dialog-empty-card h3 {
  margin: 0;
  font-size: 20px;
}

.evaluation-day-record {
  display: grid;
  gap: 13px;
  padding: 14px;
  border-left-width: 4px;
}

.evaluation-day-record.tone-success { border-left-color: #4f9465; }
.evaluation-day-record.tone-warning { border-left-color: #ba8c23; }
.evaluation-day-record.tone-danger { border-left-color: #bd5d4f; }
.evaluation-day-record.tone-neutral { border-left-color: #b8c0ca; }

.evaluation-day-record > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.evaluation-future-record > header {
  grid-template-columns: 48px minmax(0, 1fr);
}

.evaluation-day-record h3 {
  margin: 0 0 2px;
  color: #0b0e13;
  font-size: 23px;
  line-height: 1.12;
}

.evaluation-day-record header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.evaluation-day-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.evaluation-day-summary > span {
  width: 42px;
  height: 42px;
}

.evaluation-day-summary strong {
  display: block;
  margin: 2px 0 2px;
  font-size: 17px;
}

.evaluation-day-summary p {
  font-size: 12px;
}

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

.evaluation-fact-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
  padding: 10px;
}

.evaluation-fact-grid strong {
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.1;
}

.evaluation-leave-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #ead7a7;
  border-radius: 8px;
  background: #fffaf0;
  padding: 12px;
}

.evaluation-leave-note > svg {
  width: 42px;
  height: 42px;
  padding: 11px;
  background: #fff2ce;
  color: #9b7116;
}

.evaluation-leave-note strong {
  display: block;
  margin-bottom: 2px;
}

.evaluation-reason-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0 0 0 18px;
  color: #4f5e57;
  font-size: 13px;
}

@media (max-width: 900px) {
  .evaluation-employee-card {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 18px;
  }

  .evaluation-employee-sections {
    grid-template-columns: 1fr;
  }

  .evaluation-review-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .evaluation-surface {
    gap: 0;
  }

  .evaluation-workbench-head {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .evaluation-workbench-head h2 {
    font-size: 22px;
  }

  .evaluation-workbench-head p {
    font-size: 12px;
  }

  .evaluation-refresh {
    width: 100%;
  }

  .evaluation-employee-board {
    gap: 18px;
    padding: 14px 12px 16px;
  }

  .evaluation-employee-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .evaluation-employee-head,
  .evaluation-day-record > header {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  .evaluation-avatar {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  .evaluation-employee-title h3,
  .evaluation-day-record h3 {
    font-size: 20px;
  }

  .evaluation-badge-stack {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .evaluation-status-badge {
    min-height: 25px;
    padding: 0 8px;
    font-size: 10px;
  }

  .evaluation-category-section {
    padding: 9px;
  }

  .evaluation-category-section h4 {
    font-size: 11px;
  }

  .evaluation-category-grid {
    gap: 6px;
  }

  .evaluation-category-grid.is-double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evaluation-category-grid.is-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .evaluation-metric-card {
    min-height: 62px;
    padding: 7px 27px 7px 8px;
  }

  .evaluation-metric-card > .evaluation-metric-icon {
    right: 7px;
    top: 7px;
    width: 22px;
    height: 22px;
  }

  .evaluation-metric-card > .evaluation-metric-icon svg {
    width: 13px;
    height: 13px;
  }

  .evaluation-metric-card small {
    font-size: 9px;
    line-height: 1.18;
  }

  .evaluation-metric-card strong {
    font-size: 20px;
  }

  .evaluation-metric-card em {
    font-size: 9px;
  }

  .evaluation-metric-card.is-review {
    min-height: 58px;
    border-left-width: 1px;
    box-shadow: 0 5px 14px rgba(17, 24, 39, .04);
    padding: 7px 27px 7px 8px;
  }

  .evaluation-metric-card.is-review > .evaluation-metric-icon {
    right: 7px;
    top: 7px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
  }

  .evaluation-metric-card.is-review small {
    font-size: 9px;
    line-height: 1.1;
  }

  .evaluation-metric-card.is-review strong {
    margin-top: 3px;
    font-size: 20px;
  }

  .evaluation-metric-card.is-period {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    min-height: 70px;
    padding: 9px;
  }

  .evaluation-metric-card.is-period > .evaluation-metric-icon {
    width: 32px;
    height: 32px;
  }

  .evaluation-metric-card.is-period > .evaluation-metric-icon svg {
    width: 14px;
    height: 14px;
  }

  .evaluation-metric-card.is-period > div {
    column-gap: 8px;
  }

  .evaluation-metric-card.is-period small {
    font-size: 9px;
    line-height: 1.14;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .evaluation-metric-card.is-period strong {
    font-size: 24px;
  }

  .evaluation-metric-card.is-period em {
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
  }

  .evaluation-dialog {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
  }

  .evaluation-dialog-shell {
    max-height: calc(100dvh - 18px);
  }

  .evaluation-dialog-head {
    grid-template-columns: 42px minmax(0, 1fr) 38px;
    gap: 10px;
    padding: 15px 14px;
  }

  .evaluation-dialog-icon {
    width: 42px;
    height: 42px;
  }

  .evaluation-dialog-head h2 {
    font-size: 21px;
  }

  .evaluation-dialog-head p {
    font-size: 12px;
  }

  .evaluation-dialog-head .icon-button {
    width: 38px;
    height: 38px;
  }

  .evaluation-dialog-body {
    gap: 10px;
    padding: 12px;
  }

  .evaluation-dialog-summary {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .evaluation-dialog-summary > span {
    width: 38px;
    height: 38px;
  }

  .evaluation-dialog-summary strong {
    font-size: 17px;
  }

  .evaluation-dialog-summary p {
    font-size: 12px;
  }

  .evaluation-dialog-date-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .evaluation-dialog-date-card {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    min-height: 72px;
    gap: 10px;
    padding: 10px 11px;
  }

  .evaluation-dialog-date-card time {
    width: 44px;
    height: 50px;
    padding: 6px 4px;
  }

  .evaluation-dialog-date-card time strong {
    font-size: 18px;
  }

  .evaluation-dialog-date-card p > strong {
    font-size: 14px;
  }

  .evaluation-dialog-date-card p > small {
    font-size: 11px;
  }

  .evaluation-dialog-footer {
    padding: 10px 12px 12px;
  }

  .evaluation-dialog-footer .button {
    width: 100%;
  }

  .evaluation-day-record {
    gap: 11px;
    padding: 11px;
  }

  .evaluation-day-summary,
  .evaluation-leave-note {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .evaluation-day-summary > span,
  .evaluation-leave-note > svg {
    width: 36px;
    height: 36px;
  }

  .evaluation-day-summary strong {
    font-size: 15px;
  }

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

  .evaluation-fact-grid span {
    padding: 8px;
  }

  .evaluation-fact-grid strong {
    font-size: 14px;
    font-weight: 740;
  }

  .evaluation-reason-list {
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  .evaluation-category-grid.is-triple {
    gap: 5px;
  }

  .evaluation-metric-card {
    min-height: 58px;
    padding: 7px 27px 7px 7px;
  }

  .evaluation-metric-card strong {
    font-size: 18px;
  }

  .evaluation-metric-card em {
    display: none;
  }

  .evaluation-metric-card.is-period {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    min-height: 68px;
    padding: 8px;
  }

  .evaluation-metric-card.is-period > .evaluation-metric-icon {
    width: 28px;
    height: 28px;
  }

  .evaluation-metric-card.is-period > .evaluation-metric-icon svg {
    width: 13px;
    height: 13px;
  }

  .evaluation-metric-card.is-period > div {
    column-gap: 6px;
  }

  .evaluation-metric-card.is-period small {
    font-size: 8.5px;
  }

  .evaluation-metric-card.is-period strong {
    font-size: 22px;
  }
}

/* resources/css/features/workforce/workforce-team.css */
/* Owner workforce attendance refinement */
.owner-attendance-overview .owner-attendance-view-card {
  min-height: 96px;
}

.owner-attendance-employee-list {
  gap: 12px;
}

.owner-attendance-employee-card {
  grid-template-columns: minmax(250px, 0.72fr) minmax(400px, 1fr) minmax(190px, 0.48fr);
  align-items: stretch;
  gap: 14px;
  padding: 13px 15px;
}

.owner-attendance-employee-card header {
  align-self: center;
}

.owner-attendance-employee-card .owner-attendance-employee-details {
  grid-column: 1 / -1;
}

.owner-attendance-employee-card .owner-attendance-employee-clean {
  align-self: stretch;
  grid-column: auto;
  justify-content: center;
  min-height: 52px;
  border-color: #e2e4eb;
  background: #ffffff;
}

.owner-attendance-employee-stats {
  align-self: stretch;
}

.owner-attendance-employee-stat {
  min-height: 48px;
  background: #ffffff;
}

.owner-attendance-employee-stat.tone-rest svg {
  color: #c24c4c;
}

.owner-attendance-calendar-grid {
  min-width: 980px;
}

.owner-attendance-day {
  min-height: 168px;
}

.owner-attendance-day-entry {
  background: #fbfcfd;
}

@media (max-width: 1180px) {
  .owner-attendance-employee-card {
    grid-template-columns: minmax(230px, 0.75fr) minmax(360px, 1fr);
  }

  .owner-attendance-employee-card .owner-attendance-employee-clean {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    padding: 8px 12px 10px;
  }

  .owner-attendance-overview .owner-attendance-view-tabs {
    gap: 8px;
    padding: 10px 12px;
  }

  .owner-attendance-overview .owner-attendance-view-card {
    min-height: 82px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: 9px;
    padding: 10px;
  }

  .owner-attendance-overview .owner-attendance-view-card > span {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .owner-attendance-overview .owner-attendance-view-card p strong {
    font-size: 13px;
  }

  .owner-attendance-overview .owner-attendance-view-card p small {
    font-size: 9px;
    line-height: 1.25;
  }

  .owner-attendance-overview .owner-attendance-view-card em {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid #edf0f3;
    padding-top: 7px;
  }

  .owner-attendance-calendar-head {
    align-items: center;
    padding: 11px 12px;
  }

  .owner-attendance-calendar-head h3 {
    font-size: 18px;
  }

  .owner-attendance-calendar-head > span {
    padding: 6px 8px;
  }

  .owner-attendance-calendar-scroll {
    padding: 9px 10px 12px;
  }

  .owner-attendance-calendar-grid {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .owner-attendance-day {
    min-height: 84px;
    gap: 7px;
    border: 1px solid #e0e3ea;
    border-left: 0;
    border-radius: 10px;
    background: #ffffff;
    padding: 9px 9px 9px 12px;
  }

  .owner-attendance-day.is-expanded {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .owner-attendance-day-top strong {
    font-size: 22px;
  }

  .owner-attendance-day-top small {
    display: block;
    font-size: 9px;
  }

  .owner-attendance-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 68px;
    min-height: 22px;
    padding: 0 7px;
    font-size: 9px;
  }

  .owner-attendance-day-toggle {
    display: grid;
    width: 24px;
    height: 24px;
  }

  .owner-attendance-day-badge {
    justify-self: stretch;
    max-width: 100%;
    border-radius: 8px;
    padding: 6px 7px;
    font-size: 9px;
    text-align: center;
  }

  .owner-attendance-day:not(.is-expanded) .owner-attendance-day-body {
    display: none;
  }

  .owner-attendance-day.is-expanded .owner-attendance-day-body {
    display: grid;
  }

  .owner-attendance-day-entry {
    min-height: 34px;
    background: #ffffff;
  }

  .owner-attendance-employee-list {
    gap: 9px;
    padding: 10px 12px 12px;
  }

  .owner-attendance-employee-card {
    grid-template-columns: 1fr;
    gap: 10px;
    border-left-width: 3px;
    padding: 11px;
  }

  .owner-attendance-employee-card header {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .owner-attendance-employee-avatar {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .owner-attendance-employee-card header strong {
    font-size: 16px;
  }

  .owner-attendance-employee-card header small {
    font-size: 11px;
  }

  .owner-attendance-employee-card header em {
    padding: 5px 7px;
    font-size: 9px;
  }

  .owner-attendance-employee-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .owner-attendance-employee-stat {
    min-height: 42px;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 6px;
    border-radius: 9px;
    padding: 8px;
  }

  .owner-attendance-employee-stat svg {
    width: 15px;
    height: 15px;
  }

  .owner-attendance-employee-stat small {
    font-size: 9px;
  }

  .owner-attendance-employee-stat strong {
    font-size: 17px;
  }

  .owner-attendance-employee-card .owner-attendance-employee-clean {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-height: 40px;
    padding: 9px 10px;
  }

  .owner-attendance-employee-details summary {
    min-height: 42px;
    padding: 10px;
  }

  .owner-attendance-employee-issue {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .owner-attendance-employee-issue em {
    grid-column: 2;
    white-space: normal;
  }
}

/* Owner attendance record: one clear return path and a quieter information hierarchy. */
.owner-attendance-record-detail .owner-attendance-detail-head {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 20px 22px 18px;
}

.owner-attendance-record-detail .owner-attendance-detail-heading {
  align-self: center;
  min-width: 0;
}

.owner-attendance-record-detail .owner-attendance-detail-heading > small {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.owner-attendance-record-detail .owner-attendance-detail-heading h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.owner-attendance-record-detail .owner-attendance-detail-heading p {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.owner-attendance-record-detail .owner-attendance-detail-body {
  gap: 12px;
  padding: 18px 22px 20px;
}

.owner-attendance-record-detail .owner-attendance-detail-summary {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: #fff;
}

.owner-attendance-record-detail .owner-attendance-detail-status-inline {
  gap: 11px;
}

.owner-attendance-record-detail .owner-attendance-detail-status-inline > span {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.owner-attendance-record-detail .owner-attendance-detail-status-inline > span svg {
  width: 20px;
  height: 20px;
}

.owner-attendance-record-detail .owner-attendance-detail-summary small,
.owner-attendance-record-detail .owner-attendance-detail-time-card small,
.owner-attendance-record-detail .owner-attendance-detail-fact small {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.owner-attendance-record-detail .owner-attendance-detail-summary strong {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.owner-attendance-record-detail .owner-attendance-detail-summary em {
  margin-top: 3px;
  overflow: visible;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}

.owner-attendance-record-detail .owner-attendance-detail-time-grid {
  gap: 10px;
}

.owner-attendance-record-detail .owner-attendance-detail-time-card,
.owner-attendance-record-detail .owner-attendance-detail-fact {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 88px;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 8px;
}

.owner-attendance-record-detail .owner-attendance-detail-time-card > span,
.owner-attendance-record-detail .owner-attendance-detail-fact > span {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.owner-attendance-record-detail .owner-attendance-detail-time-card > span svg,
.owner-attendance-record-detail .owner-attendance-detail-fact > span svg {
  width: 19px;
  height: 19px;
}

.owner-attendance-record-detail .owner-attendance-detail-time-card strong,
.owner-attendance-record-detail .owner-attendance-detail-fact strong {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.owner-attendance-record-detail .owner-attendance-detail-fact em {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.owner-attendance-record-detail .owner-attendance-detail-footer {
  padding: 12px 22px 18px;
}

.owner-attendance-record-detail .owner-attendance-back-button {
  min-height: 44px;
  gap: 8px;
  border-radius: 8px;
  border-color: #111117;
  background: #111117;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(17, 17, 23, 0.12);
}

.owner-attendance-record-detail .owner-attendance-back-button:hover {
  border-color: #26262d;
  background: #26262d;
}

.owner-attendance-record-detail .owner-attendance-back-button svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 640px) {
  .owner-attendance-record-detail .owner-attendance-detail-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 16px 15px 14px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-heading h2 {
    font-size: 21px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-heading p {
    margin-top: 4px;
    font-size: 12px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-body {
    gap: 10px;
    padding: 14px 15px 16px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-summary {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-summary strong {
    font-size: 17px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-time-card,
  .owner-attendance-record-detail .owner-attendance-detail-fact {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 84px;
    gap: 8px;
    padding: 10px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-time-card > span,
  .owner-attendance-record-detail .owner-attendance-detail-fact > span {
    width: 34px;
    height: 34px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-time-card strong,
  .owner-attendance-record-detail .owner-attendance-detail-fact strong {
    font-size: 15px;
  }

  .owner-attendance-record-detail .owner-attendance-detail-footer {
    padding: 10px 15px 14px;
  }
}

/* Owner workforce attendance final polish */
.owner-attendance-overview {
  overflow: hidden;
}

.owner-attendance-summary {
  align-items: stretch;
}

.owner-attendance-summary-card {
  min-height: 78px;
}

.owner-attendance-view-tabs {
  gap: 10px;
}

.owner-attendance-overview .owner-attendance-view-card {
  min-height: 88px;
  border-radius: 10px;
  background: #ffffff;
}

.owner-attendance-overview .owner-attendance-view-card.active {
  border-color: #111116;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #111116, 0 12px 24px rgba(17, 17, 24, 0.05);
}

.owner-attendance-calendar-head,
.owner-attendance-toolbar {
  background: #ffffff;
}

.owner-attendance-calendar-grid {
  min-width: 1020px;
}

.owner-attendance-day {
  min-height: 164px;
  background: #ffffff;
}

.owner-attendance-day.has-records,
.owner-attendance-day.is-weekend {
  background: #ffffff;
}

.owner-attendance-day-mini {
  display: none;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.owner-attendance-day-mini span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.owner-attendance-day-mini .tone-success { background: #eef7f2; color: #32764f; }
.owner-attendance-day-mini .tone-warning { background: #fff3da; color: #986714; }
.owner-attendance-day-mini .tone-info { background: #eef3ff; color: #4f67c8; }
.owner-attendance-day-mini .tone-rest { background: #fff0f0; color: #a74444; }
.owner-attendance-day-mini .tone-muted { background: #f0f2f6; color: #686979; }

.owner-attendance-employee-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.owner-attendance-employee-card {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 13px;
  min-height: 0;
  padding: 15px;
}

.owner-attendance-employee-card header {
  align-self: auto;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 11px;
}

.owner-attendance-employee-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.owner-attendance-employee-card header strong {
  font-size: 18px;
}

.owner-attendance-employee-card header small {
  font-size: 12px;
}

.owner-attendance-employee-card header em {
  align-self: start;
  padding: 6px 9px;
  font-size: 10px;
}

.owner-attendance-employee-stats {
  align-self: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.owner-attendance-employee-stat {
  min-height: 48px;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  background: #fbfcfd;
  padding: 9px 10px;
}

.owner-attendance-employee-stat.tone-rest svg {
  color: #c24c4c;
}

.owner-attendance-employee-card .owner-attendance-employee-clean {
  grid-column: 1 / -1;
  min-height: 44px;
  justify-content: flex-start;
  background: #fbfcfd;
}

.owner-attendance-employee-card .owner-attendance-employee-details {
  grid-column: 1 / -1;
}

.owner-attendance-employee-details summary {
  min-height: 46px;
}

@media (max-width: 1180px) {
  .owner-attendance-employee-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    gap: 8px;
    padding: 9px 12px 10px;
  }

  .owner-attendance-overview .owner-attendance-view-tabs {
    gap: 8px;
    padding: 10px 12px;
  }

  .owner-attendance-overview .owner-attendance-view-card {
    min-height: 74px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
  }

  .owner-attendance-overview .owner-attendance-view-card > span {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .owner-attendance-overview .owner-attendance-view-card p strong {
    font-size: 13px;
  }

  .owner-attendance-overview .owner-attendance-view-card p small {
    display: none;
  }

  .owner-attendance-overview .owner-attendance-view-card em {
    grid-column: auto;
    justify-items: end;
    border-top: 0;
    border-left: 1px solid #edf0f3;
    padding: 0 0 0 8px;
  }

  .owner-attendance-overview .owner-attendance-view-card em b {
    font-size: 16px;
  }

  .owner-attendance-overview .owner-attendance-view-card em small {
    font-size: 8px;
  }

  .owner-attendance-calendar-head {
    align-items: center;
    padding: 11px 12px;
  }

  .owner-attendance-calendar-head h3 {
    font-size: 18px;
  }

  .owner-attendance-calendar-scroll {
    overflow: visible;
    padding: 10px 12px 12px;
  }

  .owner-attendance-calendar-grid {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .owner-attendance-calendar-weekday,
  .owner-attendance-day.is-empty {
    display: none;
  }

  .owner-attendance-day {
    position: relative;
    min-height: 104px;
    overflow: hidden;
    gap: 7px;
    border: 1px solid #e2e4eb;
    border-left: 0;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(18, 18, 24, 0.04);
    padding: 10px 9px 10px 12px;
  }

  .owner-attendance-day::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #b8bdc8;
    content: "";
  }

  .owner-attendance-day.tone-success::before,
  .owner-attendance-day.tone-info::before {
    background: #4f9e69;
  }

  .owner-attendance-day.tone-warning::before {
    background: #c99a3f;
  }

  .owner-attendance-day.tone-muted::before {
    background: #b8bdc8;
  }

  .owner-attendance-day.is-expanded {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .owner-attendance-day-top {
    align-items: flex-start;
  }

  .owner-attendance-day-top p {
    gap: 4px;
  }

  .owner-attendance-day-top strong {
    font-size: 23px;
  }

  .owner-attendance-day-top small {
    display: block;
    font-size: 9px;
  }

  .owner-attendance-day-actions {
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
  }

  .owner-attendance-day-top span {
    display: none;
  }

  .owner-attendance-day-count {
    display: inline-flex;
    border-radius: 999px;
    background: #f1f2f6;
    padding: 4px 7px;
    font-size: 9px;
  }

  .owner-attendance-day-toggle {
    display: grid;
    width: 24px;
    height: 24px;
  }

  .owner-attendance-day-badge {
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    padding: 5px 7px;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .owner-attendance-day-mini {
    display: flex;
  }

  .owner-attendance-day:not(.is-expanded) .owner-attendance-day-body {
    display: none;
  }

  .owner-attendance-day.is-expanded .owner-attendance-day-body {
    display: grid;
    margin-top: 1px;
    border-top: 1px solid #edf0f3;
    padding-top: 8px;
  }

  .owner-attendance-day-entry {
    min-height: 34px;
    border: 1px solid #eceff4;
    border-left-width: 3px;
    border-radius: 8px;
    padding: 7px 8px;
  }

  .owner-attendance-employee-list {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 10px 12px 12px;
  }

  .owner-attendance-employee-card {
    gap: 10px;
    border-left-width: 3px;
    padding: 11px;
  }

  .owner-attendance-employee-card header {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .owner-attendance-employee-avatar {
    width: 38px;
    height: 38px;
  }

  .owner-attendance-employee-card header strong {
    font-size: 16px;
  }

  .owner-attendance-employee-card header small {
    font-size: 11px;
  }

  .owner-attendance-employee-stats {
    gap: 7px;
  }

  .owner-attendance-employee-stat {
    min-height: 40px;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    padding: 8px;
  }
}

/* Owner attendance overview compact redesign */
.owner-attendance-overview {
  border-radius: 12px;
}

.owner-attendance-overview .owner-attendance-calendar-head {
  padding: 18px 22px;
}

.owner-attendance-overview .owner-attendance-calendar-head p {
  max-width: 620px;
}

.owner-attendance-calendar-scroll {
  padding: 18px 22px 22px;
}

.owner-attendance-calendar-grid {
  border-color: #e1e4ea;
}

.owner-attendance-day {
  min-height: 150px;
  padding: 13px;
}

.owner-attendance-day-badge {
  width: fit-content;
}

.owner-attendance-day-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 9px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(18, 18, 24, 0.035);
}

.owner-attendance-day-entry span {
  justify-self: end;
  max-width: 116px;
  overflow: hidden;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f4f5f7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-overview .owner-attendance-calendar-head {
  border-bottom: 1px solid #edf0f4;
}

.owner-attendance-employee-list {
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 14px;
  padding: 18px 22px 22px;
}

.owner-attendance-employee-card {
  gap: 12px;
  border-radius: 12px;
  border-left-width: 4px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(18, 18, 24, 0.04);
}

.owner-attendance-employee-card header {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
}

.owner-attendance-employee-card header p {
  min-width: 0;
}

.owner-attendance-employee-card header strong,
.owner-attendance-employee-card header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-card header em {
  border-radius: 999px;
  box-shadow: none;
}

.owner-attendance-employee-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 10px;
  background: #fafbfc;
  padding: 9px 11px;
  color: #676b78;
  font-size: 12px;
  font-weight: 800;
}

.owner-attendance-employee-total span,
.owner-attendance-employee-total strong {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.owner-attendance-employee-total svg {
  width: 15px;
  height: 15px;
}

.owner-attendance-employee-total strong {
  color: #111116;
  white-space: nowrap;
}

.owner-attendance-employee-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.owner-attendance-employee-stat {
  min-height: 58px;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 7px;
  border-radius: 10px;
  padding: 10px;
}

.owner-attendance-employee-stat svg {
  grid-row: 1 / span 2;
}

.owner-attendance-employee-stat small {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-stat strong {
  font-size: 22px;
  line-height: 1;
}

.owner-attendance-employee-details summary,
.owner-attendance-employee-clean {
  border-radius: 10px;
}

@media (min-width: 1181px) {
  .owner-attendance-employee-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-calendar-head {
    padding: 14px 14px 13px;
  }

  .owner-attendance-calendar-scroll {
    padding: 10px 12px 12px;
  }

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

  .owner-attendance-day {
    min-height: 84px;
    gap: 6px;
    padding: 9px 9px 9px 12px;
  }

  .owner-attendance-day-top strong {
    font-size: 21px;
  }

  .owner-attendance-day-count {
    padding: 3px 6px;
  }

  .owner-attendance-day-badge {
    padding: 4px 7px;
  }

  .owner-attendance-day-mini span {
    padding: 3px 6px;
    font-size: 8px;
  }

  .owner-attendance-day.is-expanded {
    min-height: 0;
  }

  .owner-attendance-day.is-expanded .owner-attendance-day-body {
    padding-top: 7px;
  }

  .owner-attendance-day-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 32px;
    padding: 6px 7px;
  }

  .owner-attendance-day-entry span {
    max-width: 92px;
    padding: 3px 6px;
    font-size: 9px;
  }

  .owner-attendance-employee-list {
    grid-template-columns: 1fr;
    padding: 10px 12px 12px;
  }

  .owner-attendance-employee-card {
    padding: 12px;
  }

  .owner-attendance-employee-total {
    padding: 8px 9px;
    font-size: 11px;
  }

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

  .owner-attendance-employee-stat {
    min-height: 44px;
    padding: 8px;
  }

  .owner-attendance-employee-stat strong {
    font-size: 18px;
  }
}

.owner-attendance-employee-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #ead8ad;
  border-radius: 10px;
  cursor: pointer;
  background: #fffdf7;
  padding: 11px 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.owner-attendance-employee-action:hover {
  border-color: #d3a247;
  box-shadow: 0 10px 22px rgba(108, 79, 19, 0.09);
  transform: translateY(-1px);
}

.owner-attendance-employee-action span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.owner-attendance-employee-action strong {
  overflow: hidden;
  color: #111116;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-action small {
  overflow: hidden;
  color: #686979;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-action em {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: #f7e8bf;
  color: #8a5f12;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.owner-attendance-employee-action svg {
  width: 17px;
  height: 17px;
  color: #8a5f12;
}

.owner-attendance-employee-issues-dialog .owner-attendance-detail-shell {
  max-width: 780px;
}

.owner-attendance-employee-issues-dialog .owner-attendance-detail-head {
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}

.owner-attendance-employee-issues-dialog .owner-attendance-detail-head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.owner-attendance-employee-issues-dialog .owner-attendance-detail-head .surface-label,
.owner-attendance-employee-issues-dialog .owner-attendance-detail-head h3,
.owner-attendance-employee-issues-dialog .owner-attendance-detail-head p {
  margin: 0;
}

.owner-attendance-employee-issues-dialog .owner-attendance-detail-head h3 {
  color: #111116;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.2;
}

.owner-attendance-employee-issues-dialog .owner-attendance-detail-head p {
  overflow: hidden;
  color: #6f7280;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .owner-attendance-employee-issues-dialog .owner-attendance-detail-head {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    gap: 12px;
    padding: 16px;
  }

  .owner-attendance-employee-issues-dialog .owner-attendance-detail-icon {
    width: 44px;
    height: 44px;
  }

  .owner-attendance-employee-issues-dialog .owner-attendance-detail-head h3 {
    font-size: 18px;
  }

  .owner-attendance-employee-issues-dialog .owner-attendance-detail-head p {
    font-size: 11px;
  }
}

.owner-attendance-employee-issues-list {
  display: grid;
  max-height: min(48vh, 420px);
  overflow: auto;
  gap: 9px;
  border: 1px solid #e2e4eb;
  border-radius: 12px;
  background: #fbfcfd;
  padding: 10px;
}

.owner-attendance-employee-issues-list .owner-attendance-employee-issue {
  background: #ffffff;
}

.owner-attendance-day-detail-button {
  display: inline-grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #e2e4eb;
  border-radius: 8px;
  cursor: pointer;
  background: #ffffff;
  color: #686979;
  padding: 0;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.owner-attendance-day-detail-button:hover {
  border-color: #cfd4df;
  background: #f7f8fb;
  color: #111116;
  transform: translateY(-1px);
}

.owner-attendance-day-detail-button svg {
  width: 14px;
  height: 14px;
}

.owner-attendance-day-dialog .owner-attendance-detail-shell {
  max-width: 820px;
}

.owner-attendance-day-dialog-list {
  display: grid;
  max-height: min(48vh, 430px);
  overflow: auto;
  gap: 9px;
  border: 1px solid #e2e4eb;
  border-radius: 12px;
  background: #fbfcfd;
  padding: 10px;
}

.owner-attendance-day-dialog-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #e5e8ef;
  border-left: 3px solid #b8bdc8;
  border-radius: 10px;
  cursor: pointer;
  background: #ffffff;
  padding: 10px;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.owner-attendance-day-dialog-row.tone-success,
.owner-attendance-day-dialog-row.tone-info {
  border-left-color: #4f9e69;
}

.owner-attendance-day-dialog-row.tone-warning {
  border-left-color: #d3a247;
}

.owner-attendance-day-dialog-row.tone-muted {
  border-left-color: #b8bdc8;
}

.owner-attendance-day-dialog-row:hover {
  border-color: #d8dce6;
  box-shadow: 0 10px 22px rgba(17, 17, 24, 0.07);
  transform: translateY(-1px);
}

.owner-attendance-day-dialog-row p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.owner-attendance-day-dialog-row strong,
.owner-attendance-day-dialog-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-day-dialog-row strong {
  color: #111116;
  font-size: 14px;
  font-weight: 900;
}

.owner-attendance-day-dialog-row small {
  color: #686979;
  font-size: 11px;
  font-weight: 750;
}

.owner-attendance-day-dialog-row em {
  justify-self: end;
  border-radius: 999px;
  background: #f1f2f6;
  color: #4f5261;
  padding: 6px 9px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.owner-attendance-day-dialog-row.tone-warning em {
  background: #fff1d5;
  color: #986714;
}

.owner-attendance-day-dialog-row.tone-success em,
.owner-attendance-day-dialog-row.tone-info em {
  background: #eaf7f0;
  color: #32764f;
}

.owner-attendance-day-dialog-row > svg {
  width: 16px;
  height: 16px;
  color: #686979;
}

@media (max-width: 760px) {
  .owner-attendance-day {
    grid-column: auto !important;
  }

  .owner-attendance-day.is-expanded {
    grid-column: auto !important;
    min-height: 104px;
    padding-bottom: 10px;
  }

  .owner-attendance-day .owner-attendance-day-body,
  .owner-attendance-day:not(.is-expanded) .owner-attendance-day-body,
  .owner-attendance-day.is-expanded .owner-attendance-day-body {
    display: none !important;
  }

  .owner-attendance-day-detail-button {
    width: 25px;
    height: 25px;
    border-radius: 7px;
  }

  .owner-attendance-day-dialog-list {
    max-height: 46vh;
    padding: 8px;
  }

  .owner-attendance-day-dialog-row {
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    gap: 8px;
    padding: 9px;
  }

  .owner-attendance-day-dialog-row em {
    grid-column: 2 / 3;
    justify-self: start;
    padding: 5px 7px;
    font-size: 9px;
  }

  .owner-attendance-day-dialog-row > svg {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .owner-attendance-employee-action {
    grid-template-columns: minmax(0, 1fr) auto 16px;
    padding: 9px 10px;
  }

  .owner-attendance-employee-action strong {
    font-size: 12px;
  }

  .owner-attendance-employee-action small {
    font-size: 10px;
  }

  .owner-attendance-employee-action em {
    min-width: 25px;
    height: 25px;
    font-size: 11px;
  }

  .owner-attendance-employee-issues-list {
    max-height: 46vh;
    padding: 8px;
  }
}

/* Owner per-employee attendance summary */
.owner-attendance-employee-stats.owner-attendance-employee-stats-clean {
  display: grid;
  grid-template-columns: minmax(160px, 0.95fr) minmax(240px, 1.35fr) minmax(170px, 0.9fr);
  align-items: stretch;
  gap: 8px;
}

.owner-attendance-employee-stats-clean > .owner-attendance-employee-stat:first-child {
  min-height: 64px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  border-color: #dcefe3;
  background: #fbfffc;
}

.owner-attendance-employee-stats-clean > .owner-attendance-employee-stat:first-child svg {
  grid-row: auto;
}

.owner-attendance-employee-stats-clean > .owner-attendance-employee-stat:first-child small {
  font-size: 12px;
}

.owner-attendance-employee-stats-clean > .owner-attendance-employee-stat:first-child strong {
  font-size: 25px;
}

.owner-attendance-employee-substats {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.owner-attendance-employee-substats .owner-attendance-employee-stat {
  min-height: 64px;
  grid-template-columns: 16px minmax(0, 1fr);
  grid-template-rows: auto auto;
  padding: 9px;
}

.owner-attendance-employee-substats .owner-attendance-employee-stat svg {
  grid-row: 1 / span 2;
}

.owner-attendance-employee-substats .owner-attendance-employee-stat small {
  font-size: 10px;
}

.owner-attendance-employee-substats .owner-attendance-employee-stat strong {
  font-size: 21px;
}

.owner-attendance-employee-late-summary {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #fbfcfd;
  padding: 10px;
  color: #686979;
}

.owner-attendance-employee-late-summary.has-late {
  border-color: #ead8ad;
  background: #fffdf8;
  color: #986714;
}

.owner-attendance-employee-late-summary svg {
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.owner-attendance-employee-late-summary small {
  overflow: hidden;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-late-summary strong {
  overflow: hidden;
  color: #111116;
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .owner-attendance-employee-stats.owner-attendance-employee-stats-clean {
    grid-template-columns: 1fr;
  }

  .owner-attendance-employee-substats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .owner-attendance-employee-substats {
    gap: 6px;
  }

  .owner-attendance-employee-substats .owner-attendance-employee-stat {
    min-height: 56px;
    gap: 2px 5px;
    padding: 8px 7px;
  }

  .owner-attendance-employee-substats .owner-attendance-employee-stat small {
    font-size: 9px;
  }

  .owner-attendance-employee-substats .owner-attendance-employee-stat strong {
    font-size: 18px;
  }
}

/* Owner per-employee attendance summary, final visual pass */
.owner-attendance-employee-list {
  grid-template-columns: 1fr;
  gap: 12px;
}

.owner-attendance-employee-card {
  display: grid;
  grid-template-columns: minmax(230px, 0.68fr) minmax(0, 1.32fr);
  align-items: stretch;
  gap: 12px 16px;
  border-left-width: 4px;
  padding: 15px;
}

.owner-attendance-employee-card header {
  grid-column: 1;
  align-self: start;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
}

.owner-attendance-employee-card header em {
  grid-column: 2;
  justify-self: start;
  margin-top: 2px;
}

.owner-attendance-employee-total {
  grid-column: 1;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 6px;
  border: 0;
  background: #fafbfc;
  padding: 10px 11px;
}

.owner-attendance-employee-total span,
.owner-attendance-employee-total strong {
  justify-content: flex-start;
  font-size: 12px;
}

.owner-attendance-employee-total strong {
  color: #1f2128;
}

.owner-attendance-employee-summary-board {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: minmax(152px, 0.8fr) minmax(0, 1.2fr);
  gap: 9px;
  align-content: start;
}

.owner-attendance-employee-main-stat {
  display: grid;
  min-width: 0;
  min-height: 82px;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #dcefe3;
  border-radius: 10px;
  background: #fbfffc;
  padding: 12px;
}

.owner-attendance-employee-main-stat svg {
  width: 18px;
  height: 18px;
  color: #3e8a5e;
}

.owner-attendance-employee-main-stat span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.owner-attendance-employee-main-stat small {
  overflow: hidden;
  color: #686979;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-main-stat strong {
  color: #111116;
  font-size: 32px;
  font-weight: 950;
  line-height: 1;
}

.owner-attendance-employee-mini-stats {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.owner-attendance-employee-mini-stat {
  display: grid;
  min-width: 0;
  min-height: 82px;
  grid-template-columns: 17px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 7px;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
}

.owner-attendance-employee-mini-stat svg {
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  color: #686979;
}

.owner-attendance-employee-mini-stat small {
  overflow: hidden;
  color: #686979;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-mini-stat strong {
  color: #111116;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.owner-attendance-employee-mini-stat.tone-rest svg {
  color: #c24c4c;
}

.owner-attendance-employee-mini-stat.tone-info svg {
  color: #5f78dc;
}

.owner-attendance-employee-mini-stat.tone-warning svg {
  color: #a97817;
}

.owner-attendance-late-breakdown {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.owner-attendance-late-stat {
  display: grid;
  min-width: 0;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
}

.owner-attendance-late-stat > svg {
  width: 17px;
  height: 17px;
  color: #686979;
}

.owner-attendance-late-stat > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.owner-attendance-late-stat small {
  overflow: hidden;
  color: #686979;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-late-stat strong {
  overflow: hidden;
  color: #111116;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-late-stat em {
  overflow: hidden;
  color: #8a8f9b;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-late-stat.tone-success.has-value {
  border-color: #dcefe3;
  background: #fbfffc;
}

.owner-attendance-late-stat.tone-success.has-value > svg {
  color: #3e8a5e;
}

.owner-attendance-late-stat.tone-warning.has-value {
  border-color: #ead8ad;
  background: #fffdf8;
}

.owner-attendance-late-stat.tone-warning.has-value > svg {
  color: #a97817;
}

.owner-attendance-employee-card .owner-attendance-employee-action,
.owner-attendance-employee-card .owner-attendance-employee-clean {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .owner-attendance-employee-card {
    grid-template-columns: 1fr;
  }

  .owner-attendance-employee-card header,
  .owner-attendance-employee-total,
  .owner-attendance-employee-summary-board,
  .owner-attendance-employee-card .owner-attendance-employee-action,
  .owner-attendance-employee-card .owner-attendance-employee-clean {
    grid-column: 1;
    grid-row: auto;
  }

  .owner-attendance-employee-summary-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .owner-attendance-employee-list {
    gap: 10px;
    padding: 10px;
  }

  .owner-attendance-employee-card {
    gap: 10px;
    padding: 12px;
  }

  .owner-attendance-employee-card header {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .owner-attendance-employee-card header em {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    max-width: 96px;
  }

  .owner-attendance-employee-total {
    padding: 8px 9px;
  }

  .owner-attendance-employee-main-stat {
    min-height: 58px;
    padding: 9px 10px;
  }

  .owner-attendance-employee-main-stat strong {
    font-size: 27px;
  }

  .owner-attendance-employee-mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .owner-attendance-employee-mini-stat {
    min-height: 58px;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px;
  }

  .owner-attendance-employee-mini-stat svg {
    grid-row: auto;
    width: 15px;
    height: 15px;
  }

  .owner-attendance-employee-mini-stat small {
    font-size: 9px;
  }

  .owner-attendance-employee-mini-stat strong {
    font-size: 20px;
  }

  .owner-attendance-late-breakdown {
    grid-template-columns: 1fr;
  }

  .owner-attendance-late-stat {
    padding: 9px 10px;
  }
}

/* Owner per-employee attendance summary, simplified visual pass */
.owner-attendance-employee-list {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 18px 18px;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: 10px 14px;
  border-left-width: 4px;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 10px 22px rgba(18, 18, 24, 0.035);
}

.owner-attendance-employee-head-v2 {
  grid-column: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.owner-attendance-employee-head-v2 p {
  min-width: 0;
  margin: 0;
}

.owner-attendance-employee-head-v2 p strong,
.owner-attendance-employee-head-v2 p small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-head-v2 p strong {
  color: #111116;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.owner-attendance-employee-head-v2 p small {
  margin-top: 3px;
  color: #5f6370;
  font-size: 12px;
  font-weight: 750;
}

.owner-attendance-employee-head-v2 em {
  grid-column: 1 / -1;
  justify-self: start;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.owner-attendance-employee-head-v2 em.tone-success {
  background: #eaf7f0;
  color: #32764f;
}

.owner-attendance-employee-head-v2 em.tone-warning {
  background: #fff1d5;
  color: #8a5f12;
}

.owner-attendance-employee-meta-v2 {
  grid-column: 1;
  display: grid;
  align-self: end;
  gap: 6px;
  border-radius: 10px;
  background: #fafbfc;
  padding: 9px 10px;
}

.owner-attendance-employee-meta-v2 span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: #6b707c;
  font-size: 11px;
  font-weight: 800;
}

.owner-attendance-employee-meta-v2 svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.owner-attendance-employee-kpis-v2 {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1.15fr repeat(3, 0.85fr);
  gap: 8px;
}

.owner-attendance-kpi-pill {
  display: grid;
  min-width: 0;
  gap: 4px;
  border: 1px solid #edf0f3;
  border-left: 3px solid #cfd4dc;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 11px;
}

.owner-attendance-kpi-pill small {
  overflow: hidden;
  color: #686979;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-kpi-pill strong {
  color: #111116;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.owner-attendance-kpi-pill.tone-success {
  border-left-color: #4f9e69;
  background: #fbfffc;
}

.owner-attendance-kpi-pill.tone-rest {
  border-left-color: #c24c4c;
}

.owner-attendance-kpi-pill.tone-info {
  border-left-color: #667ee8;
}

.owner-attendance-kpi-pill.tone-warning {
  border-left-color: #d3a247;
  background: #fffdf8;
}

.owner-attendance-late-row-v2 {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.owner-attendance-late-chip {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #ffffff;
  padding: 9px 11px;
}

.owner-attendance-late-chip small {
  overflow: hidden;
  color: #686979;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-late-chip strong {
  flex: 0 0 auto;
  color: #111116;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.owner-attendance-late-chip.tone-success.has-value {
  border-color: #dcefe3;
  background: #fbfffc;
}

.owner-attendance-late-chip.tone-warning.has-value {
  border-color: #ead8ad;
  background: #fffdf8;
}

.owner-attendance-employee-action.owner-attendance-employee-action-v2,
.owner-attendance-employee-clean.owner-attendance-employee-clean-v2 {
  grid-column: 2;
  margin: 0;
}

.owner-attendance-employee-action.owner-attendance-employee-action-v2 {
  grid-template-columns: minmax(0, 1fr) 18px;
  border-color: #ead8ad;
  background: #fffdf8;
  padding: 10px 11px;
}

.owner-attendance-employee-clean.owner-attendance-employee-clean-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dcefe3;
  border-radius: 10px;
  background: #fbfffc;
  color: #32764f;
  padding: 10px 11px;
  font-size: 12px;
  font-weight: 850;
}

.owner-attendance-employee-clean.owner-attendance-employee-clean-v2 svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 {
    grid-template-columns: 1fr;
  }

  .owner-attendance-employee-head-v2,
  .owner-attendance-employee-meta-v2,
  .owner-attendance-employee-kpis-v2,
  .owner-attendance-late-row-v2,
  .owner-attendance-employee-action.owner-attendance-employee-action-v2,
  .owner-attendance-employee-clean.owner-attendance-employee-clean-v2 {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 520px) {
  .owner-attendance-employee-list {
    gap: 10px;
    padding: 10px;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 {
    gap: 9px;
    padding: 12px;
  }

  .owner-attendance-employee-head-v2 {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .owner-attendance-employee-head-v2 p strong {
    font-size: 17px;
  }

  .owner-attendance-employee-head-v2 em {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .owner-attendance-employee-meta-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 9px;
  }

  .owner-attendance-employee-meta-v2 span {
    font-size: 10px;
  }

  .owner-attendance-employee-kpis-v2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .owner-attendance-kpi-pill {
    gap: 3px;
    padding: 8px 7px;
  }

  .owner-attendance-kpi-pill small {
    font-size: 9px;
  }

  .owner-attendance-kpi-pill strong {
    font-size: 19px;
  }

  .owner-attendance-late-row-v2 {
    grid-template-columns: 1fr;
  }

  .owner-attendance-late-chip {
    padding: 8px 9px;
  }
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 {
  grid-column: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 em {
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: start;
  align-self: auto;
  max-width: none;
  margin-top: 0;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 520px) {
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 em {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Owner attendance detail polish */
.owner-attendance-day-count {
  display: none !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 {
  border-left-width: 5px;
  border-radius: 14px;
  padding: 16px;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2.tone-success {
  border-left-color: #4f9e69;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2.tone-warning {
  border-left-color: #c69a3d;
}

.owner-attendance-employee-kpis-v2 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.owner-attendance-kpi-pill {
  position: relative;
  min-height: 78px;
  border: 1px solid #e4e7ec;
  border-left: 1px solid #e4e7ec;
  border-radius: 13px;
  background: #fbfcfe;
  padding: 12px 13px;
}

.owner-attendance-kpi-pill::after {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c8ccd4;
  content: "";
}

.owner-attendance-kpi-pill small {
  color: #686979;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
}

.owner-attendance-kpi-pill strong {
  align-self: end;
  color: #0f1015;
  font-size: 27px;
  font-weight: 950;
  letter-spacing: 0;
}

.owner-attendance-kpi-pill.tone-success,
.owner-attendance-kpi-pill.tone-rest,
.owner-attendance-kpi-pill.tone-info,
.owner-attendance-kpi-pill.tone-warning {
  background: #fbfcfe;
}

.owner-attendance-kpi-pill.tone-success::after {
  background: #4f9e69;
}

.owner-attendance-kpi-pill.tone-rest::after {
  background: #bf5454;
}

.owner-attendance-kpi-pill.tone-info::after {
  background: #667ee8;
}

.owner-attendance-kpi-pill.tone-warning::after {
  background: #c69a3d;
}

.owner-attendance-late-row-v2 {
  gap: 9px;
}

.owner-attendance-late-chip {
  border-radius: 13px;
  background: #ffffff;
  padding: 10px 12px;
}

.owner-attendance-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 12px;
  border: 1px solid #e2e6ec;
  border-radius: 14px;
  background: #fbfcfe;
  padding: 14px;
}

.owner-attendance-detail-status-inline,
.owner-attendance-detail-shift {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.owner-attendance-detail-status-inline > span {
  display: inline-flex;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef0f4;
  color: #686979;
}

.owner-attendance-detail-summary.tone-success .owner-attendance-detail-status-inline > span {
  background: #eaf7f0;
  color: #3e8a5e;
}

.owner-attendance-detail-summary.tone-warning .owner-attendance-detail-status-inline > span {
  background: #fff3dc;
  color: #a46f1f;
}

.owner-attendance-detail-summary.tone-info .owner-attendance-detail-status-inline > span {
  background: #eef2ff;
  color: #596ad6;
}

.owner-attendance-detail-summary.tone-rest .owner-attendance-detail-status-inline > span {
  background: #fff0f0;
  color: #bf5454;
}

.owner-attendance-detail-status-inline svg {
  width: 21px;
  height: 21px;
}

.owner-attendance-detail-status-inline p,
.owner-attendance-detail-shift {
  min-width: 0;
  margin: 0;
}

.owner-attendance-detail-status-inline small,
.owner-attendance-detail-shift small,
.owner-attendance-detail-time-card small {
  display: block;
  color: #686979;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.owner-attendance-detail-status-inline strong,
.owner-attendance-detail-shift strong {
  display: block;
  overflow: hidden;
  color: #111116;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-detail-status-inline em,
.owner-attendance-detail-shift em {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #686979;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-detail-shift {
  display: block;
  border-left: 1px solid #e2e6ec;
  padding-left: 14px;
}

.owner-attendance-detail-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.owner-attendance-detail-time-card,
.owner-attendance-detail-time-grid .owner-attendance-detail-fact {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #e2e6ec;
  border-radius: 14px;
  background: #ffffff;
  padding: 13px;
}

.owner-attendance-detail-time-card > span,
.owner-attendance-detail-time-grid .owner-attendance-detail-fact > span {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f1f3f6;
  color: #686979;
}

.owner-attendance-detail-time-card p,
.owner-attendance-detail-time-grid .owner-attendance-detail-fact p {
  min-width: 0;
  margin: 0;
}

.owner-attendance-detail-time-card strong,
.owner-attendance-detail-time-grid .owner-attendance-detail-fact strong {
  display: block;
  color: #111116;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.2;
}

.owner-attendance-detail-time-card .team-attendance-source-badge {
  margin-top: 6px;
}

.owner-attendance-detail-footer {
  gap: 10px;
}

.owner-attendance-detail-footer .button {
  min-height: 48px;
}

@media (max-width: 640px) {
  .owner-attendance-employee-kpis-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-attendance-kpi-pill {
    min-height: 66px;
    padding: 10px 11px;
  }

  .owner-attendance-kpi-pill strong {
    font-size: 23px;
  }

  .owner-attendance-detail-summary {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .owner-attendance-detail-shift {
    border-left: 0;
    border-top: 1px solid #e2e6ec;
    padding: 12px 0 0;
  }

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

  .owner-attendance-detail-time-card,
  .owner-attendance-detail-time-grid .owner-attendance-detail-fact {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 11px;
  }

  .owner-attendance-detail-time-card > span,
  .owner-attendance-detail-time-grid .owner-attendance-detail-fact > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .owner-attendance-detail-time-card strong,
  .owner-attendance-detail-time-grid .owner-attendance-detail-fact strong {
    font-size: 17px;
  }
}

/* Owner attendance overview: reference-inspired structure */
.owner-attendance-overview {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.owner-attendance-toolbar {
  display: flex;
  justify-content: flex-end;
  border: 0;
  background: transparent;
  padding: 0 0 18px;
}

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

.owner-attendance-month-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.owner-attendance-month-field input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 6px 15px rgba(17, 17, 22, 0.08);
  color: #343847;
  font-size: 16px;
  font-weight: 800;
  text-align: left;
}

.owner-attendance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  margin: 0 0 24px;
  padding: 0;
}

.owner-attendance-summary-card {
  position: relative;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid #e2e5eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 24px 28px;
  box-shadow: 0 6px 15px rgba(17, 17, 22, 0.08);
}

.owner-attendance-summary-card::after {
  content: "";
  position: absolute;
  top: -42px;
  right: -34px;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: #f4f5f8;
  opacity: 0.82;
}

.owner-attendance-summary-card > span {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f1f3f8;
  color: #6475e9;
  box-shadow: 0 4px 10px rgba(17, 17, 22, 0.08);
}

.owner-attendance-summary-card > span svg {
  width: 22px;
  height: 22px;
}

.owner-attendance-summary-card.tone-neutral > span {
  background: #f0f2f6;
  color: #15161d;
}

.owner-attendance-summary-card.tone-success > span {
  background: #e5f4ec;
  color: #4f9e69;
}

.owner-attendance-summary-card.tone-warning > span {
  background: #fff2d9;
  color: #c08719;
}

.owner-attendance-summary-card.tone-info > span {
  background: #edf5ff;
  color: #4d95e9;
}

.owner-attendance-summary-card.tone-success::after {
  background: #eaf7ef;
}

.owner-attendance-summary-card.tone-warning::after {
  background: #fff5dc;
}

.owner-attendance-summary-card.tone-info::after {
  background: #eef7ff;
}

.owner-attendance-summary-card p {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 0;
}

.owner-attendance-summary-card strong {
  color: #11131e;
  font-size: 40px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.owner-attendance-summary-card small {
  color: #6d7280;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.owner-attendance-calendar,
.owner-attendance-employee-overview {
  overflow: hidden;
  border: 1px solid #e2e5eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(17, 17, 22, 0.05);
}

.owner-attendance-calendar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid #eef1f5;
  background: #ffffff;
}

.owner-attendance-calendar-head h3 {
  margin: 6px 0 4px;
  color: #11131e;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.12;
}

.owner-attendance-calendar-head p {
  max-width: 700px;
  margin: 0;
  color: #8b909e;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
}

.owner-attendance-calendar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.owner-attendance-calendar-actions > span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f4f5f8;
  color: #6f7483;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.owner-attendance-view-tabs {
  display: inline-flex;
  gap: 0;
  border-radius: 10px;
  background: #f1f3f6;
  padding: 4px;
}

.owner-attendance-overview .owner-attendance-view-card {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 9px 14px;
  color: #9aa0ad;
  box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.owner-attendance-overview .owner-attendance-view-card > span {
  width: auto;
  height: auto;
  background: transparent;
  color: currentColor;
  box-shadow: none;
}

.owner-attendance-overview .owner-attendance-view-card svg {
  width: 16px;
  height: 16px;
}

.owner-attendance-overview .owner-attendance-view-card > strong {
  color: currentColor;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.owner-attendance-overview .owner-attendance-view-card.active {
  background: #ffffff;
  color: #15161d;
  box-shadow: 0 3px 10px rgba(17, 17, 22, 0.12);
}

.owner-attendance-calendar-scroll {
  overflow: auto;
  padding: 0;
}

.owner-attendance-calendar-grid {
  min-width: 980px;
  display: grid;
  grid-template-columns: repeat(7, minmax(138px, 1fr));
  gap: 1px;
  border: 0;
  background: #e7eaf0;
}

.owner-attendance-calendar-weekday {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfc;
  color: #6f7483;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.owner-attendance-day {
  min-height: 152px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 14px;
}

.owner-attendance-day.has-records {
  background: #fbfefc;
}

.owner-attendance-day.tone-warning {
  background: #fffdf8;
}

.owner-attendance-day.is-today {
  box-shadow: inset 0 0 0 2px #15161d;
}

.owner-attendance-day-entry {
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-left: 3px solid #4f9e69;
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 9px;
  box-shadow: 0 5px 14px rgba(17, 17, 22, 0.035);
}

.owner-attendance-day-entry.tone-warning {
  border-left-color: #c69a3d;
  background: #fffaf1;
}

.owner-attendance-day-entry.tone-rest {
  border-left-color: #bf5454;
}

.owner-attendance-day-entry.tone-info {
  border-left-color: #667ee8;
}

.owner-attendance-day-entry strong {
  min-width: 0;
  overflow: hidden;
  color: #11131e;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-day-entry span {
  max-width: 86px;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
  color: #6f7483;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-employee-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px 28px 24px;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 {
  display: grid;
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr) minmax(100px, 0.12fr);
  align-items: center;
  gap: 18px;
  border: 1px solid #e2e5eb;
  border-top: 4px solid #c69a3d;
  border-left: 0;
  border-radius: 12px;
  background: #ffffff;
  padding: 22px 26px;
  box-shadow: 0 8px 18px rgba(17, 17, 22, 0.06);
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2.tone-success {
  border-top-color: #4f9e69;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2.tone-warning {
  border-top-color: #c69a3d;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 {
  grid-column: auto;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 em {
  grid-column: 2;
  justify-self: start;
  margin-top: 4px;
}

.owner-attendance-employee-meta-v2 {
  grid-column: 1;
  align-self: start;
  background: transparent;
  padding: 0;
}

.owner-attendance-employee-kpis-v2 {
  grid-column: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.owner-attendance-kpi-pill {
  min-height: 72px;
  border-radius: 10px;
  background: #fafbfc;
  padding: 13px 16px;
}

.owner-attendance-late-row-v2 {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.owner-attendance-employee-action-v2,
.owner-attendance-employee-clean-v2 {
  grid-column: 3;
  align-self: stretch;
  min-height: 84px;
}

@media (max-width: 980px) {
  .owner-attendance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 {
    grid-template-columns: 1fr;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2,
  .owner-attendance-employee-meta-v2,
  .owner-attendance-employee-kpis-v2,
  .owner-attendance-late-row-v2,
  .owner-attendance-employee-action-v2,
  .owner-attendance-employee-clean-v2 {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .owner-attendance-toolbar {
    padding: 0 0 14px;
  }

  .owner-attendance-month-field {
    width: 100%;
  }

  .owner-attendance-month-field input {
    min-height: 46px;
    font-size: 15px;
    text-align: center;
  }

  .owner-attendance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }

  .owner-attendance-summary-card {
    min-height: 112px;
    padding: 15px;
  }

  .owner-attendance-summary-card::after {
    top: -42px;
    right: -44px;
    width: 96px;
    height: 96px;
  }

  .owner-attendance-summary-card > span {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .owner-attendance-summary-card strong {
    font-size: 30px;
  }

  .owner-attendance-summary-card small {
    font-size: 12px;
  }

  .owner-attendance-calendar-head {
    align-items: stretch;
    flex-direction: column;
    padding: 18px 18px 14px;
  }

  .owner-attendance-calendar-head h3 {
    font-size: 25px;
  }

  .owner-attendance-calendar-head p {
    font-size: 14px;
  }

  .owner-attendance-calendar-actions {
    justify-content: space-between;
  }

  .owner-attendance-calendar-actions > span {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .owner-attendance-view-tabs {
    width: 100%;
  }

  .owner-attendance-overview .owner-attendance-view-card {
    flex: 1;
    padding: 9px 8px;
  }

  .owner-attendance-overview .owner-attendance-view-card > strong {
    font-size: 13px;
  }

  .owner-attendance-calendar-scroll {
    overflow: visible;
  }

  .owner-attendance-calendar-grid {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    background: transparent;
    padding: 14px;
  }

  .owner-attendance-calendar-weekday,
  .owner-attendance-day.is-empty {
    display: none;
  }

  .owner-attendance-day {
    min-height: 132px;
    border: 1px solid #e2e5eb;
    border-left: 4px solid #4f9e69;
    border-radius: 12px;
    background: #ffffff;
    padding: 12px;
  }

  .owner-attendance-day.tone-warning {
    border-left-color: #c69a3d;
  }

  .owner-attendance-day-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 7px 8px;
  }

  .owner-attendance-day-entry span {
    max-width: 100%;
  }

  .owner-attendance-employee-list {
    padding: 14px;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 {
    gap: 14px;
    padding: 16px;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .owner-attendance-employee-kpis-v2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .owner-attendance-kpi-pill {
    min-height: 58px;
    padding: 9px;
  }

  .owner-attendance-kpi-pill small {
    font-size: 9px;
  }

  .owner-attendance-kpi-pill strong {
    font-size: 23px;
  }

  .owner-attendance-late-row-v2 {
    grid-template-columns: 1fr;
  }

  .owner-attendance-employee-action-v2,
  .owner-attendance-employee-clean-v2 {
    min-height: 50px;
  }
}

/* Owner attendance overview: align visual rhythm with the Team Attendance tab */
.owner-attendance-overview {
  display: grid;
  gap: 18px;
}

.owner-attendance-overview .owner-attendance-toolbar {
  padding: 0;
}

.owner-attendance-overview .owner-attendance-month-field input {
  min-height: 46px;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(16, 19, 28, 0.06);
  font-size: 15px;
  font-weight: 850;
}

.owner-attendance-overview .owner-attendance-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.owner-attendance-overview .owner-attendance-summary-card {
  min-height: 108px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid #dfe4eb;
  border-left: 4px solid #c9ced8;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px 20px;
  box-shadow: 0 14px 30px rgba(16, 19, 28, 0.04);
}

.owner-attendance-overview .owner-attendance-summary-card::after {
  display: none;
}

.owner-attendance-overview .owner-attendance-summary-card > span {
  grid-column: 2;
  grid-row: 1;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  box-shadow: none;
}

.owner-attendance-overview .owner-attendance-summary-card p {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column-reverse;
  gap: 7px;
  min-width: 0;
}

.owner-attendance-overview .owner-attendance-summary-card strong {
  color: #05070d;
  font-size: 34px;
  font-weight: 950;
  line-height: 0.95;
}

.owner-attendance-overview .owner-attendance-summary-card small {
  overflow: hidden;
  color: #676c78;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-neutral {
  border-left-color: #697386;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-neutral > span {
  background: #f1f3f6;
  color: #15161c;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-success {
  border-left-color: #4f9e69;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-warning {
  border-left-color: #c69a3d;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  border-left-color: #667ee8;
}

.owner-attendance-overview .owner-attendance-calendar,
.owner-attendance-overview .owner-attendance-employee-overview {
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(16, 19, 28, 0.04);
}

.owner-attendance-overview .owner-attendance-calendar-head {
  align-items: center;
  padding: 24px 26px;
}

.owner-attendance-overview .owner-attendance-calendar-head h3 {
  margin: 5px 0 0;
  font-size: 28px;
  line-height: 1.1;
}

.owner-attendance-overview .owner-attendance-calendar-head p {
  max-width: 620px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 650;
}

.owner-attendance-overview .owner-attendance-calendar-actions > span {
  min-height: 34px;
  background: #f1f3f6;
  font-size: 13px;
}

.owner-attendance-overview .owner-attendance-view-tabs {
  border-radius: 8px;
  background: #f1f3f6;
  padding: 3px;
}

.owner-attendance-overview .owner-attendance-view-card {
  min-height: 34px;
  border-radius: 7px;
  padding: 8px 13px;
}

.owner-attendance-overview .owner-attendance-view-card.active {
  box-shadow: 0 3px 10px rgba(16, 19, 28, 0.12);
}

@media (max-width: 980px) {
  .owner-attendance-overview .owner-attendance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .owner-attendance-overview {
    gap: 14px;
  }

  .owner-attendance-overview .owner-attendance-toolbar {
    justify-content: stretch;
  }

  .owner-attendance-overview .owner-attendance-summary {
    gap: 10px;
  }

  .owner-attendance-overview .owner-attendance-summary-card {
    min-height: 92px;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 10px;
    padding: 14px;
  }

  .owner-attendance-overview .owner-attendance-summary-card > span {
    width: 40px;
    height: 40px;
  }

  .owner-attendance-overview .owner-attendance-summary-card strong {
    font-size: 27px;
  }

  .owner-attendance-overview .owner-attendance-summary-card small {
    font-size: 11px;
  }

  .owner-attendance-overview .owner-attendance-calendar-head {
    align-items: stretch;
    padding: 18px;
  }

  .owner-attendance-overview .owner-attendance-calendar-actions {
    justify-content: stretch;
  }
}

/* Owner attendance summary cards use the same compact structure as Team Attendance metrics. */
.owner-attendance-overview .owner-attendance-summary-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 84px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 251, 0.9));
  box-shadow: 0 10px 26px rgba(30, 36, 32, 0.04);
  padding: 11px 44px 11px 11px;
}

.owner-attendance-overview .owner-attendance-summary-card > span {
  grid-column: 1;
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.owner-attendance-overview .owner-attendance-summary-card div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.owner-attendance-overview .owner-attendance-summary-card div strong,
.owner-attendance-overview .owner-attendance-summary-card div small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.owner-attendance-overview .owner-attendance-summary-card div strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.2;
  white-space: normal;
}

.owner-attendance-overview .owner-attendance-summary-card div small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.owner-attendance-overview .owner-attendance-summary-card b {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-neutral > span {
  background: #f0f1f4;
  color: #656976;
}

@media (max-width: 640px) {
  .owner-attendance-overview .owner-attendance-summary-card {
    min-height: 88px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 36px 10px 10px;
  }

  .owner-attendance-overview .owner-attendance-summary-card > span {
    width: 34px;
    height: 34px;
  }

  .owner-attendance-overview .owner-attendance-summary-card div strong {
    font-size: 12px;
  }

  .owner-attendance-overview .owner-attendance-summary-card div small {
    font-size: 9px;
    white-space: normal;
  }

  .owner-attendance-overview .owner-attendance-summary-card b {
    right: 12px;
    bottom: 12px;
    font-size: 20px;
  }
}

/* Final owner overview metric style: aligned with Leave/Activity filter cards. */
.owner-attendance-overview .owner-attendance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.owner-attendance-overview .owner-attendance-summary-card,
.owner-attendance-overview .owner-attendance-summary-card.tone-success,
.owner-attendance-overview .owner-attendance-summary-card.tone-warning,
.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  position: relative;
  display: grid;
  min-height: 92px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  overflow: visible;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(30, 36, 32, 0.04);
  color: inherit;
  padding: 12px 46px 12px 12px;
}

.owner-attendance-overview .owner-attendance-summary-card::after {
  display: none;
  content: none;
}

.owner-attendance-overview .owner-attendance-summary-card > span {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  box-shadow: none;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-success > span {
  background: #eaf6ee;
  color: #2f8b61;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-warning > span {
  background: #fff4df;
  color: #a06b00;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-info > span {
  background: #eef3ff;
  color: #5871d8;
}

.owner-attendance-overview .owner-attendance-summary-card > span svg {
  width: 18px;
  height: 18px;
}

.owner-attendance-overview .owner-attendance-summary-card div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.owner-attendance-overview .owner-attendance-summary-card div strong,
.owner-attendance-overview .owner-attendance-summary-card div small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.owner-attendance-overview .owner-attendance-summary-card div strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.2;
  white-space: normal;
}

.owner-attendance-overview .owner-attendance-summary-card div small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.owner-attendance-overview .owner-attendance-summary-card b {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: block;
  min-width: 0;
  height: auto;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .owner-attendance-overview .owner-attendance-summary-card,
  .owner-attendance-overview .owner-attendance-summary-card.tone-success,
  .owner-attendance-overview .owner-attendance-summary-card.tone-warning,
  .owner-attendance-overview .owner-attendance-summary-card.tone-info {
    min-height: 82px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: 11px 42px 11px 11px;
  }

  .owner-attendance-overview .owner-attendance-summary-card > span {
    width: 36px;
    height: 36px;
  }

  .owner-attendance-overview .owner-attendance-summary-card div strong {
    font-size: 13px;
  }

  .owner-attendance-overview .owner-attendance-summary-card div small {
    font-size: 10px;
  }

  .owner-attendance-overview .owner-attendance-summary-card b {
    right: 13px;
    bottom: 13px;
    font-size: 21px;
  }
}

/* Owner attendance summary must stay plain like the leave/activity cards. */
.owner-attendance-overview .owner-attendance-summary {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.owner-attendance-overview .owner-attendance-summary-card,
.owner-attendance-overview .owner-attendance-summary-card.tone-success,
.owner-attendance-overview .owner-attendance-summary-card.tone-warning,
.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  background: #fff !important;
  background-image: none !important;
}

.owner-attendance-overview .owner-attendance-summary-card::before,
.owner-attendance-overview .owner-attendance-summary-card::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* Owner attendance final layout: compact cards on every viewport. */
.owner-attendance-overview .owner-attendance-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.owner-attendance-overview .owner-attendance-summary-card,
.owner-attendance-overview .owner-attendance-summary-card.tone-success,
.owner-attendance-overview .owner-attendance-summary-card.tone-warning,
.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  min-height: 88px !important;
  padding: 12px 42px 12px 12px !important;
}

.owner-attendance-overview .owner-attendance-summary-card b {
  right: 13px !important;
  bottom: 13px !important;
}

/* Use the same date-card calendar treatment on desktop and mobile. */
.owner-attendance-overview .owner-attendance-calendar-scroll {
  overflow: visible !important;
}

.owner-attendance-overview .owner-attendance-calendar-grid {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 16px !important;
}

.owner-attendance-overview .owner-attendance-calendar-weekday,
.owner-attendance-overview .owner-attendance-day.is-empty {
  display: none !important;
}

.owner-attendance-overview .owner-attendance-day {
  min-height: 122px !important;
  border: 1px solid #e2e5eb !important;
  border-left: 4px solid #4f9e69 !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 12px !important;
  box-shadow: 0 8px 18px rgba(17, 17, 22, 0.045) !important;
}

.owner-attendance-overview .owner-attendance-day.tone-warning {
  border-left-color: #c69a3d !important;
  background: #fffdf8 !important;
}

.owner-attendance-overview .owner-attendance-day.tone-muted {
  border-left-color: #bcc2ce !important;
}

.owner-attendance-overview .owner-attendance-day.is-today {
  box-shadow: inset 0 0 0 2px #15161d, 0 8px 18px rgba(17, 17, 22, 0.045) !important;
}

.owner-attendance-overview .owner-attendance-day-body {
  display: block !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card,
  .owner-attendance-overview .owner-attendance-summary-card.tone-success,
  .owner-attendance-overview .owner-attendance-summary-card.tone-warning,
  .owner-attendance-overview .owner-attendance-summary-card.tone-info {
    min-height: 96px !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 7px !important;
    padding: 10px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card > span {
    width: 34px !important;
    height: 34px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card div strong {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card div small {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card b {
    right: 10px !important;
    bottom: 10px !important;
    font-size: 22px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .owner-attendance-overview .owner-attendance-day {
    min-height: 112px !important;
    padding: 11px !important;
  }
}

/* Final owner attendance override: same card system across mobile and desktop. */
.owner-attendance-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

.owner-attendance-summary-card,
.owner-attendance-summary-card.tone-success,
.owner-attendance-summary-card.tone-warning,
.owner-attendance-summary-card.tone-info {
  position: relative !important;
  min-height: 86px !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(17, 17, 22, 0.04) !important;
  padding: 12px 46px 12px 12px !important;
}

.owner-attendance-summary-card::before,
.owner-attendance-summary-card::after {
  display: none !important;
  content: none !important;
}

.owner-attendance-summary-card > span {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
}

.owner-attendance-summary-card div {
  min-width: 0 !important;
}

.owner-attendance-summary-card div strong {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.owner-attendance-summary-card div small {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.owner-attendance-summary-card b {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  color: var(--ink) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.owner-attendance-calendar-scroll {
  overflow: visible !important;
}

.owner-attendance-calendar-grid {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(166px, 1fr)) !important;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 16px !important;
}

.owner-attendance-calendar-weekday,
.owner-attendance-day.is-empty {
  display: none !important;
}

.owner-attendance-day {
  min-height: 116px !important;
  border: 1px solid #e1e5ec !important;
  border-left: 4px solid #55976d !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 12px !important;
  box-shadow: 0 8px 18px rgba(17, 17, 22, 0.045) !important;
}

.owner-attendance-day.tone-warning {
  border-left-color: #c7a24d !important;
  background: #fffdf8 !important;
}

.owner-attendance-day.tone-muted {
  border-left-color: #c3c8d2 !important;
}

.owner-attendance-day.is-today {
  box-shadow: inset 0 0 0 2px #14151b, 0 8px 18px rgba(17, 17, 22, 0.045) !important;
}

@media (max-width: 760px) {
  .owner-attendance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .owner-attendance-summary-card,
  .owner-attendance-summary-card.tone-success,
  .owner-attendance-summary-card.tone-warning,
  .owner-attendance-summary-card.tone-info {
    min-height: 92px !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  .owner-attendance-summary-card > span {
    width: 32px !important;
    height: 32px !important;
  }

  .owner-attendance-summary-card div strong {
    font-size: 10.5px !important;
  }

  .owner-attendance-summary-card div small {
    display: none !important;
  }

  .owner-attendance-summary-card b {
    right: 9px !important;
    bottom: 9px !important;
    font-size: 22px !important;
  }

  .owner-attendance-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .owner-attendance-day {
    min-height: 108px !important;
    padding: 11px !important;
  }
}

/* Owner attendance final polish: compact strip cards + schedule-like month selector. */
.owner-attendance-overview .owner-attendance-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-summary-card,
.owner-attendance-overview .owner-attendance-summary-card.tone-success,
.owner-attendance-overview .owner-attendance-summary-card.tone-warning,
.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  min-height: 86px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 12px 46px 12px 12px !important;
}

.owner-attendance-period-filter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  margin: 0 0 18px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #cfded4;
  border-left: 4px solid #4f956a;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(79, 149, 106, 0.09), rgba(190, 151, 55, 0.08));
}

.owner-attendance-period-copy {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 20px 58px;
  text-align: center;
}

.owner-attendance-period-copy small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #5f6675;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.owner-attendance-period-copy small svg {
  width: 14px;
  height: 14px;
}

.owner-attendance-period-copy strong {
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

.owner-attendance-period-filter > svg {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: #606774;
  transform: translateY(-50%);
  pointer-events: none;
}

.owner-attendance-period-filter input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  opacity: 0;
  cursor: pointer;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 12px !important;
    border: 1px solid #e0e4ea !important;
    border-radius: 8px !important;
    background: #fff !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card,
  .owner-attendance-overview .owner-attendance-summary-card.tone-success,
  .owner-attendance-overview .owner-attendance-summary-card.tone-warning,
  .owner-attendance-overview .owner-attendance-summary-card.tone-info {
    min-height: 86px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-right: 1px solid #e0e4ea !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 9px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card:last-child {
    border-right: 0 !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card > span {
    width: 34px !important;
    height: 34px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card div strong {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card b {
    right: 10px !important;
    bottom: 10px !important;
    font-size: 22px !important;
  }

  .owner-attendance-period-filter {
    min-height: 98px;
    margin: 0 0 14px;
  }

  .owner-attendance-period-copy {
    gap: 5px;
    padding: 17px 42px;
  }

  .owner-attendance-period-copy strong {
    font-size: 20px;
  }

  .owner-attendance-period-filter > svg {
    right: 16px;
  }
}

/* Owner attendance month picker: reuse the schedule period rhythm without native month input quirks. */
.owner-attendance-month-picker {
  margin: 0 0 18px;
}

.owner-attendance-month-picker .owner-attendance-period-filter {
  width: 100%;
  min-height: 112px;
  margin: 0;
  padding: 0 58px;
  border: 1px solid #cfded4;
  border-left: 4px solid #4f956a;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(79, 149, 106, 0.08), rgba(190, 151, 55, 0.07));
}

.owner-attendance-month-picker .owner-attendance-period-copy {
  padding: 0;
}

.owner-attendance-month-picker .schedule-period-trigger-arrow {
  right: 22px;
}

.owner-attendance-month-dialog .schedule-period-option-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

/* Owner calendar final: desktop keeps weekday columns, cell content stays concise like mobile. */
@media (min-width: 761px) {
  .owner-attendance-overview .owner-attendance-calendar-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(138px, 1fr)) !important;
    min-width: 980px !important;
    gap: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid #e0e4ea !important;
    border-radius: 12px !important;
    background: #e0e4ea !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-weekday {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    background: #f7f8fa !important;
    color: #606675 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .owner-attendance-overview .owner-attendance-day.is-empty {
    display: block !important;
    min-height: 126px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fbfcfd !important;
    box-shadow: none !important;
  }

  .owner-attendance-overview .owner-attendance-day {
    min-height: 126px !important;
    padding: 12px !important;
    border: 0 !important;
    border-left: 3px solid #5b9b70 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .owner-attendance-overview .owner-attendance-day.tone-warning {
    border-left-color: #c6a052 !important;
    background: #fffdf7 !important;
  }

  .owner-attendance-overview .owner-attendance-day.tone-muted {
    border-left-color: #c4c9d3 !important;
  }

  .owner-attendance-overview .owner-attendance-day.is-today {
    box-shadow: inset 0 0 0 2px #15161d !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini {
    display: flex !important;
    margin-top: 7px !important;
  }

  .owner-attendance-overview .owner-attendance-day-empty {
    margin: 8px 0 0 !important;
    color: #858b98 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card,
  .owner-attendance-overview .owner-attendance-summary-card.tone-success,
  .owner-attendance-overview .owner-attendance-summary-card.tone-warning,
  .owner-attendance-overview .owner-attendance-summary-card.tone-info {
    min-height: 92px !important;
    border: 1px solid #e0e4ea !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 10px 9px !important;
  }

  .owner-attendance-overview .owner-attendance-month-picker {
    margin-bottom: 14px;
  }

  .owner-attendance-month-picker .owner-attendance-period-filter {
    min-height: 94px;
    padding: 0 42px;
  }

  .owner-attendance-overview .owner-attendance-calendar-scroll {
    overflow: visible !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-weekday,
  .owner-attendance-overview .owner-attendance-day.is-empty {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini {
    display: flex !important;
  }
}

/* Owner attendance follows the schedule page color language. */
.owner-attendance-overview .owner-attendance-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-summary-card,
.owner-attendance-overview .owner-attendance-summary-card.tone-success,
.owner-attendance-overview .owner-attendance-summary-card.tone-warning,
.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  min-height: 86px !important;
  border: 1px solid #d9dbe1 !important;
  border-left-width: 4px !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-success {
  border-left-color: #438663 !important;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-warning {
  border-left-color: #c58b25 !important;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  border-left-color: #5f70b7 !important;
}

.owner-attendance-month-picker {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter {
  min-height: 88px !important;
  margin: 0 !important;
  padding: 15px 48px 15px 18px !important;
  border: 1px solid #d4d8d6 !important;
  border-left: 4px solid #438663 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter.current {
  border-color: #a9d7c1 !important;
  border-left-color: #2f8b61 !important;
  background:
    linear-gradient(135deg, rgba(232, 246, 239, 0.98), rgba(255, 249, 232, 0.92)),
    #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(47, 139, 97, 0.08), 0 10px 26px rgba(47, 139, 97, 0.09) !important;
}

.owner-attendance-month-picker .schedule-period-trigger.current .schedule-period-trigger-copy strong {
  color: #123f2e !important;
}

.owner-attendance-month-picker .schedule-period-trigger-arrow {
  right: 18px !important;
}

.owner-attendance-overview .owner-attendance-day.tone-warning {
  background: #fff !important;
  border-left-color: #c58b25 !important;
}

.owner-attendance-overview .owner-attendance-day.tone-muted {
  border-left-color: #c4c9d3 !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card,
  .owner-attendance-overview .owner-attendance-summary-card.tone-success,
  .owner-attendance-overview .owner-attendance-summary-card.tone-warning,
  .owner-attendance-overview .owner-attendance-summary-card.tone-info {
    min-height: 82px !important;
    padding: 9px !important;
  }

  .owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter {
    min-height: 82px !important;
    padding: 13px 42px !important;
  }
}

.owner-attendance-filter-section {
  margin: 0 0 16px !important;
  overflow: hidden !important;
  border: 1px solid #dde1e6 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.owner-attendance-filter-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid #e5e7ec !important;
  background: #fff !important;
}

.owner-attendance-filter-icon {
  display: inline-flex !important;
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #f2f4f7 !important;
  color: #667085 !important;
}

.owner-attendance-filter-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.9 !important;
}

.owner-attendance-filter-header .surface-label {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.owner-attendance-filter-header h2 {
  margin: 4px 0 0 !important;
  color: #070910 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.owner-attendance-filter-header p {
  max-width: 720px !important;
  margin: 6px 0 0 !important;
  color: #5f6575 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.owner-attendance-filter-body {
  padding: 16px 18px 18px !important;
  background: #fbfbfc !important;
}

.owner-attendance-filter-body .owner-attendance-month-picker {
  margin: 0 !important;
}

.owner-attendance-filter-body .schedule-period-trigger.owner-attendance-period-filter {
  min-height: 86px !important;
}

@media (max-width: 760px) {
  .owner-attendance-filter-section {
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }

  .owner-attendance-filter-header {
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .owner-attendance-filter-icon {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .owner-attendance-filter-icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  .owner-attendance-filter-header .surface-label {
    font-size: 11px !important;
  }

  .owner-attendance-filter-header h2 {
    margin-top: 3px !important;
    font-size: 20px !important;
  }

  .owner-attendance-filter-header p {
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .owner-attendance-filter-body {
    padding: 12px !important;
  }

  .owner-attendance-filter-body .schedule-period-trigger.owner-attendance-period-filter {
    min-height: 76px !important;
    padding: 12px 40px 12px 14px !important;
  }

  .owner-attendance-filter-body .schedule-period-trigger-copy strong {
    font-size: 20px !important;
  }

  .owner-attendance-filter-body .schedule-period-branch,
  .owner-attendance-filter-body .schedule-period-trigger-meta em {
    font-size: 11px !important;
  }
}

/* Owner attendance final alignment: keep the schedule color language and compact cells. */
.owner-attendance-overview .owner-attendance-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-summary-card,
.owner-attendance-overview .owner-attendance-summary-card.tone-success,
.owner-attendance-overview .owner-attendance-summary-card.tone-warning,
.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  min-height: 86px !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid #dfe2e8 !important;
  border-left: 3px solid #c6a052 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-success {
  border-left-color: #438663 !important;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-warning {
  border-left-color: #c58b25 !important;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  border-left-color: #667ee8 !important;
}

.owner-attendance-overview .owner-attendance-summary-card > span {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-summary-card b {
  position: static !important;
  align-self: end !important;
  justify-self: end !important;
  color: #070910 !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-filter-section {
  margin: 0 0 16px !important;
  border: 1px solid #dfe2e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-filter-header {
  min-height: 0 !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid #e6e8ed !important;
}

.owner-attendance-overview .owner-attendance-filter-icon {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  background: #f1f2f5 !important;
  color: #5f6673 !important;
}

.owner-attendance-overview .owner-attendance-filter-header h2 {
  font-size: 23px !important;
}

.owner-attendance-overview .owner-attendance-filter-header p {
  font-size: 14px !important;
}

.owner-attendance-overview .owner-attendance-filter-body {
  padding: 14px 18px 18px !important;
  background: #fbfbfc !important;
}

.owner-attendance-overview .owner-attendance-month-picker {
  margin: 0 !important;
}

.owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter {
  min-height: 84px !important;
  padding: 14px 48px 14px 18px !important;
  border: 1px solid #d4d8d6 !important;
  border-left: 4px solid #438663 !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter.current {
  border-color: #a9d7c1 !important;
  border-left-color: #2f8b61 !important;
  background:
    linear-gradient(135deg, rgba(232, 246, 239, 0.98), rgba(255, 249, 232, 0.92)),
    #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(47, 139, 97, 0.08), 0 10px 26px rgba(47, 139, 97, 0.09) !important;
}

.owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter.current .schedule-period-trigger-copy strong {
  color: #123f2e !important;
}

.owner-attendance-overview .owner-attendance-calendar-scroll {
  overflow-x: auto !important;
  border: 1px solid #dfe2e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.owner-attendance-overview .owner-attendance-calendar-grid {
  display: grid !important;
  min-width: 980px !important;
  grid-template-columns: repeat(7, minmax(130px, 1fr)) !important;
  gap: 0 !important;
  border: 0 !important;
  background: #fff !important;
  padding: 0 !important;
}

.owner-attendance-overview .owner-attendance-calendar-weekday {
  display: grid !important;
  min-height: 42px !important;
  place-items: center !important;
  border-right: 1px solid #e5e7ec !important;
  border-bottom: 1px solid #e5e7ec !important;
  background: #f7f8fa !important;
  color: #5f6673 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.owner-attendance-overview .owner-attendance-day,
.owner-attendance-overview .owner-attendance-day.is-empty {
  display: block !important;
  min-height: 132px !important;
  border: 0 !important;
  border-right: 1px solid #e5e7ec !important;
  border-bottom: 1px solid #e5e7ec !important;
  border-left: 3px solid #438663 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 12px !important;
}

.owner-attendance-overview .owner-attendance-day.is-empty {
  border-left-color: transparent !important;
  background: #fbfcfd !important;
}

.owner-attendance-overview .owner-attendance-day.tone-warning {
  border-left-color: #c58b25 !important;
  background: #fffdf8 !important;
}

.owner-attendance-overview .owner-attendance-day.tone-muted {
  border-left-color: #c4c9d3 !important;
}

.owner-attendance-overview .owner-attendance-day.is-today {
  box-shadow: inset 0 0 0 2px #15161d !important;
}

.owner-attendance-overview .owner-attendance-day-body,
.owner-attendance-overview .owner-attendance-day:not(.is-expanded) .owner-attendance-day-body,
.owner-attendance-overview .owner-attendance-day.is-expanded .owner-attendance-day-body {
  display: none !important;
}

.owner-attendance-overview .owner-attendance-day-mini {
  display: flex !important;
  min-height: 22px !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 7px !important;
}

.owner-attendance-overview .owner-attendance-day-mini span,
.owner-attendance-overview .owner-attendance-day-badge {
  border-radius: 999px !important;
  padding: 4px 8px !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-day-empty {
  display: none !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card,
  .owner-attendance-overview .owner-attendance-summary-card.tone-success,
  .owner-attendance-overview .owner-attendance-summary-card.tone-warning,
  .owner-attendance-overview .owner-attendance-summary-card.tone-info {
    min-height: 86px !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 9px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card > span {
    width: 32px !important;
    height: 32px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card div strong {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card div small {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card b {
    position: absolute !important;
    right: 9px !important;
    bottom: 9px !important;
    font-size: 22px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-header {
    gap: 10px !important;
    padding: 14px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-header h2 {
    font-size: 20px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-header p {
    font-size: 13px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-body {
    padding: 12px !important;
  }

  .owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter {
    min-height: 76px !important;
    padding: 12px 40px 12px 14px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-scroll {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-grid {
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    background: transparent !important;
    padding: 14px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-weekday,
  .owner-attendance-overview .owner-attendance-day.is-empty {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-day {
    min-height: 108px !important;
    border: 1px solid #e0e4ea !important;
    border-left: 4px solid #438663 !important;
    border-radius: 8px !important;
    padding: 11px !important;
  }

  .owner-attendance-overview .owner-attendance-day.tone-warning {
    border-left-color: #c58b25 !important;
  }
}

/* Owner attendance overview: period filter and attendance data live in one clean surface. */
.owner-attendance-overview .owner-attendance-period-section {
  margin-top: 14px !important;
  overflow: hidden !important;
  border: 1px solid #dfe2e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-filter-section {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #e6e8ed !important;
  background: #fff !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-filter-body {
  background: #fbfbfc !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar,
.owner-attendance-overview .owner-attendance-period-section .owner-attendance-employee-overview {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 0 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #e6e8ed !important;
  background: #fff !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-controls .owner-attendance-calendar-actions {
  width: 100% !important;
  justify-content: flex-end !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-scroll {
  border: 0 !important;
  border-radius: 0 !important;
}

.owner-attendance-overview .owner-attendance-day-mini span,
.owner-attendance-overview .owner-attendance-day-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.owner-attendance-overview .owner-attendance-day-mini i,
.owner-attendance-overview .owner-attendance-day-mini svg,
.owner-attendance-overview .owner-attendance-day-badge i,
.owner-attendance-overview .owner-attendance-day-badge svg {
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px !important;
  stroke-width: 2.4 !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-success,
.owner-attendance-overview .owner-attendance-day-mini .tone-success {
  background: #e9f6ef !important;
  color: #2f7a55 !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-warning,
.owner-attendance-overview .owner-attendance-day-mini .tone-warning {
  background: #fff2d8 !important;
  color: #99670c !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-info,
.owner-attendance-overview .owner-attendance-day-mini .tone-info {
  background: #eef2ff !important;
  color: #5267d8 !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-rest,
.owner-attendance-overview .owner-attendance-day-mini .tone-rest {
  background: #fff0ee !important;
  color: #b74f44 !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-muted,
.owner-attendance-overview .owner-attendance-day-mini .tone-muted {
  background: #eef0f4 !important;
  color: #626977 !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-period-section {
    margin-top: 10px !important;
  }

  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-filter-section {
    border-bottom-color: #e1e4ea !important;
  }

  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-controls {
    padding: 12px !important;
  }
}

/* Owner attendance calendar: primary badge is the headline, mini badges are quiet details. */
.owner-attendance-overview .owner-attendance-day-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 28px !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

.owner-attendance-overview .owner-attendance-day-badge i,
.owner-attendance-overview .owner-attendance-day-badge svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  stroke-width: 2.6 !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-success {
  border-color: #cfe9da !important;
  background: #eaf7ef !important;
  color: #2f7651 !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-warning {
  border-color: #f0d18d !important;
  background: #fff1cf !important;
  color: #8b620c !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-info {
  border-color: #d7ddff !important;
  background: #edf2ff !important;
  color: #5067d8 !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-rest {
  border-color: #f0cfca !important;
  background: #fff0ee !important;
  color: #b55145 !important;
}

.owner-attendance-overview .owner-attendance-day-badge.tone-muted {
  border-color: #dfe3eb !important;
  background: #eef0f4 !important;
  color: #5d6472 !important;
}

.owner-attendance-overview .owner-attendance-day-mini {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-height: 20px !important;
  margin-top: 8px !important;
}

.owner-attendance-overview .owner-attendance-day-mini .owner-attendance-mini-pill,
.owner-attendance-overview .owner-attendance-day-mini > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 20px !important;
  gap: 0 !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-day-mini i,
.owner-attendance-overview .owner-attendance-day-mini svg {
  display: none !important;
}

.owner-attendance-overview .owner-attendance-day-mini .tone-success {
  background: #eff7f2 !important;
  color: #3c7454 !important;
}

.owner-attendance-overview .owner-attendance-day-mini .tone-warning {
  background: #fff5df !important;
  color: #926b18 !important;
}

.owner-attendance-overview .owner-attendance-day-mini .tone-info {
  background: #f1f4ff !important;
  color: #6472cf !important;
}

.owner-attendance-overview .owner-attendance-day-mini .tone-rest {
  background: #fff2f0 !important;
  color: #af594f !important;
}

.owner-attendance-overview .owner-attendance-day-mini .tone-muted {
  background: #f0f2f6 !important;
  color: #697181 !important;
}

/* Owner attendance calendar: keep every cell readable without cramped or sunken text. */
.owner-attendance-overview .owner-attendance-day {
  box-sizing: border-box !important;
  min-height: 146px !important;
  padding: 14px !important;
}

.owner-attendance-overview .owner-attendance-day-top {
  align-items: center !important;
  min-height: 34px !important;
  margin-bottom: 10px !important;
}

.owner-attendance-overview .owner-attendance-day-top p {
  gap: 4px !important;
}

.owner-attendance-overview .owner-attendance-day-top small {
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.owner-attendance-overview .owner-attendance-day-top strong {
  font-size: 22px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-day-actions {
  align-items: center !important;
  flex-direction: row !important;
  gap: 7px !important;
}

.owner-attendance-overview .owner-attendance-day-badge {
  box-sizing: border-box !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 34px !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.owner-attendance-overview .owner-attendance-day-badge i,
.owner-attendance-overview .owner-attendance-day-badge svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}

.owner-attendance-overview .owner-attendance-day-mini {
  align-items: center !important;
  min-height: 25px !important;
  gap: 7px !important;
  margin-top: 10px !important;
}

.owner-attendance-overview .owner-attendance-day-mini .owner-attendance-mini-pill,
.owner-attendance-overview .owner-attendance-day-mini > span {
  box-sizing: border-box !important;
  min-height: 25px !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-day {
    min-height: 126px !important;
    padding: 12px !important;
  }

  .owner-attendance-overview .owner-attendance-day-top {
    min-height: 30px !important;
    margin-bottom: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-day-top strong {
    font-size: 20px !important;
  }

  .owner-attendance-overview .owner-attendance-day-badge {
    min-height: 31px !important;
    gap: 5px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  .owner-attendance-overview .owner-attendance-day-badge i,
  .owner-attendance-overview .owner-attendance-day-badge svg {
    width: 13px !important;
    height: 13px !important;
    flex-basis: 13px !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini {
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini .owner-attendance-mini-pill,
  .owner-attendance-overview .owner-attendance-day-mini > span {
    min-height: 23px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
  }
}

/* Owner attendance calendar: compact density aligned with the schedule grid. */
.owner-attendance-overview .owner-attendance-calendar-weekday {
  min-height: 38px !important;
  padding: 8px 10px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.owner-attendance-overview .owner-attendance-day,
.owner-attendance-overview .owner-attendance-day.is-empty {
  min-height: 112px !important;
  padding: 10px 11px !important;
}

.owner-attendance-overview .owner-attendance-day-top {
  min-height: 28px !important;
  margin-bottom: 7px !important;
}

.owner-attendance-overview .owner-attendance-day-top strong {
  font-size: 18px !important;
}

.owner-attendance-overview .owner-attendance-day-detail-button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

.owner-attendance-overview .owner-attendance-day-detail-button svg {
  width: 15px !important;
  height: 15px !important;
}

.owner-attendance-overview .owner-attendance-day-badge {
  min-height: 27px !important;
  gap: 5px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-day-badge i,
.owner-attendance-overview .owner-attendance-day-badge svg {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
}

.owner-attendance-overview .owner-attendance-day-mini {
  min-height: 19px !important;
  gap: 5px !important;
  margin-top: 6px !important;
}

.owner-attendance-overview .owner-attendance-day-mini .owner-attendance-mini-pill,
.owner-attendance-overview .owner-attendance-day-mini > span {
  min-height: 19px !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-day,
  .owner-attendance-overview .owner-attendance-day.is-empty {
    min-height: 104px !important;
    padding: 9px !important;
  }

  .owner-attendance-overview .owner-attendance-day-top {
    min-height: 26px !important;
    margin-bottom: 6px !important;
  }

  .owner-attendance-overview .owner-attendance-day-top strong {
    font-size: 18px !important;
  }

  .owner-attendance-overview .owner-attendance-day-badge {
    min-height: 27px !important;
    padding: 5px 7px !important;
    font-size: 10px !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini {
    min-height: 18px !important;
    gap: 4px !important;
    margin-top: 5px !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini .owner-attendance-mini-pill,
  .owner-attendance-overview .owner-attendance-day-mini > span {
    min-height: 18px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }
}

/* Owner overview cards follow the compact "Overview Saya" metric treatment. */
.owner-attendance-overview .owner-attendance-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
}

.owner-attendance-overview .owner-attendance-summary-card,
.owner-attendance-overview .owner-attendance-summary-card.tone-success,
.owner-attendance-overview .owner-attendance-summary-card.tone-warning,
.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  --owner-overview-card-color: #5f78dc;
  --owner-overview-card-soft: #edf2ff;
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 108px !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  align-items: start !important;
  gap: 6px 14px !important;
  overflow: hidden !important;
  border: 1px solid #dde0e8 !important;
  border-left: 1px solid #dde0e8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: inherit !important;
  box-shadow: 0 10px 24px rgba(25, 28, 36, 0.035) !important;
  padding: 17px 18px 16px !important;
}

.owner-attendance-overview .owner-attendance-summary-card::before {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  width: 3px !important;
  background: var(--owner-overview-card-color) !important;
  content: "" !important;
}

.owner-attendance-overview .owner-attendance-summary-card::after {
  display: none !important;
  content: none !important;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-success {
  --owner-overview-card-color: #4f9b62;
  --owner-overview-card-soft: #edf8f1;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-warning {
  --owner-overview-card-color: #d45d4f;
  --owner-overview-card-soft: #fff1ed;
}

.owner-attendance-overview .owner-attendance-summary-card.tone-info {
  --owner-overview-card-color: #5f78dc;
  --owner-overview-card-soft: #edf2ff;
}

.owner-attendance-overview .owner-attendance-summary-card > span {
  position: absolute !important;
  right: 18px !important;
  bottom: 16px !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  align-self: auto !important;
  justify-self: auto !important;
  border-radius: 10px !important;
  background: var(--owner-overview-card-soft) !important;
  color: var(--owner-overview-card-color) !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-summary-card > span svg {
  width: 20px !important;
  height: 20px !important;
}

.owner-attendance-overview .owner-attendance-summary-card div {
  display: contents !important;
}

.owner-attendance-overview .owner-attendance-summary-card div strong {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #747482 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

.owner-attendance-overview .owner-attendance-summary-card b {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  min-width: 0 !important;
  height: auto !important;
  justify-self: start !important;
  color: #111116 !important;
  font-size: 31px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-summary-card div small {
  grid-column: 1 !important;
  grid-row: 3 !important;
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #747482 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card,
  .owner-attendance-overview .owner-attendance-summary-card.tone-success,
  .owner-attendance-overview .owner-attendance-summary-card.tone-warning,
  .owner-attendance-overview .owner-attendance-summary-card.tone-info {
    min-height: 104px !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    gap: 4px 7px !important;
    padding: 9px 8px 8px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card > span {
    right: 8px !important;
    bottom: 8px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card > span svg {
    width: 15px !important;
    height: 15px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card div strong {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card b {
    font-size: 19px !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card div small {
    display: block !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }
}

/* Owner overview calendar: match the compact operational attendance calendar rhythm. */
.owner-attendance-overview .owner-attendance-calendar-head.owner-attendance-calendar-controls {
  align-items: center !important;
  border-bottom: 1px solid var(--line) !important;
  background: #ffffff !important;
  padding: 18px 22px 12px !important;
}

.owner-attendance-overview .owner-attendance-calendar-head h3 {
  margin: 2px 0 0 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
}

.owner-attendance-overview .owner-attendance-calendar-head p {
  margin: 4px 0 0 !important;
  max-width: 620px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.owner-attendance-overview .owner-attendance-calendar-actions {
  align-items: center !important;
  gap: 12px !important;
}

.owner-attendance-overview .owner-attendance-calendar-actions > span {
  min-height: 38px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: #f6f7f9 !important;
  padding: 9px 14px !important;
  color: var(--text-soft) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.owner-attendance-overview .owner-attendance-calendar-scroll {
  overflow-x: auto !important;
  padding: 18px 22px 12px !important;
}

.owner-attendance-overview .owner-attendance-calendar-grid {
  min-width: 980px !important;
  overflow: hidden !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
}

.owner-attendance-overview .owner-attendance-calendar-weekday {
  min-height: 38px !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: #f4f6f5 !important;
  padding: 10px !important;
  color: var(--text-soft) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

.owner-attendance-overview .owner-attendance-day,
.owner-attendance-overview .owner-attendance-day.has-records,
.owner-attendance-overview .owner-attendance-day.is-weekend {
  display: flex !important;
  flex-direction: column !important;
  min-height: 116px !important;
  gap: 6px !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 10px !important;
}

.owner-attendance-overview .owner-attendance-day.is-empty {
  min-height: 116px !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: #fafbfa !important;
}

.owner-attendance-overview .owner-attendance-day.tone-success,
.owner-attendance-overview .owner-attendance-day.tone-info {
  background: #f2faf5 !important;
}

.owner-attendance-overview .owner-attendance-day.tone-warning {
  background: #fffaf0 !important;
}

.owner-attendance-overview .owner-attendance-day.tone-rest {
  background: #fffafa !important;
}

.owner-attendance-overview .owner-attendance-day.is-today {
  background: #f3f8f5 !important;
  box-shadow: inset 0 0 0 2px #111116 !important;
}

.owner-attendance-overview .owner-attendance-day-top {
  align-items: flex-start !important;
  gap: 6px !important;
}

.owner-attendance-overview .owner-attendance-day-top p {
  gap: 1px !important;
}

.owner-attendance-overview .owner-attendance-day-top small {
  color: var(--text-soft) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-day-top strong {
  color: #111116 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-today-badge {
  border-radius: 4px !important;
  background: #111116 !important;
  color: #ffffff !important;
  padding: 3px 5px !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-day-detail-button {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  flex: 0 0 auto !important;
  border-radius: 7px !important;
  background: #ffffff !important;
}

.owner-attendance-overview .owner-attendance-day-detail-button svg {
  width: 14px !important;
  height: 14px !important;
}

.owner-attendance-overview .owner-attendance-day-badge {
  width: max-content !important;
  max-width: 100% !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.owner-attendance-overview .owner-attendance-day-badge svg {
  width: 10px !important;
  height: 10px !important;
}

.owner-attendance-overview .owner-attendance-day-mini {
  display: flex !important;
  gap: 4px !important;
}

.owner-attendance-overview .owner-attendance-day-mini span {
  border-radius: 4px !important;
  padding: 3px 6px !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}

.owner-attendance-overview .owner-attendance-day-empty {
  margin: auto 0 0 !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-calendar-head.owner-attendance-calendar-controls {
    align-items: stretch !important;
    padding: 13px 12px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-actions {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-actions > span {
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-scroll {
    padding: 10px 12px 12px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-grid {
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-weekday,
  .owner-attendance-overview .owner-attendance-day.is-empty {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-day,
  .owner-attendance-overview .owner-attendance-day.has-records,
  .owner-attendance-overview .owner-attendance-day.is-weekend {
    min-height: 84px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 9px !important;
  }

  .owner-attendance-overview .owner-attendance-day-top strong {
    font-size: 20px !important;
  }

  .owner-attendance-overview .owner-attendance-day-badge {
    padding: 4px 7px !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-day-empty {
    display: none !important;
  }
}

/* resources/css/core/responsive.css */
/* Transition placeholder. Feature code is being migrated into this module. */

/* resources/css/features/workforce/owner-attendance.css */
/* Owner attendance consolidated overrides. Keep this module last in the CSS manifest. */
.owner-attendance-overview .owner-attendance-day::before,
.owner-attendance-overview .owner-attendance-day::after {
  content: none !important;
  display: none !important;
}

.owner-attendance-overview .owner-attendance-day.is-today {
  border: 1px solid #15161d !important;
  background: #fffdf7 !important;
  box-shadow: inset 0 0 0 1px #15161d !important;
}

.owner-attendance-today-badge,
.owner-attendance-overview .owner-attendance-day-actions > span {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 6px;
  background: #15161d;
  color: #fff;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

/* Owner attendance calendar view switch: compact toolbar, not oversized cards. */
.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-controls {
  min-height: 0 !important;
  padding: 12px 26px !important;
  border-bottom: 1px solid #e6e8ed !important;
  background: #fff !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-controls .owner-attendance-calendar-actions {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

.owner-attendance-overview .owner-attendance-calendar-actions > span {
  flex: 0 0 auto !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid #e5e7ec !important;
  background: #f5f6f8 !important;
  color: #5d6472 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.owner-attendance-overview .owner-attendance-view-tabs {
  flex: 0 1 auto !important;
  display: inline-grid !important;
  grid-template-columns: repeat(2, max-content) !important;
  align-items: center !important;
  gap: 4px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 4px !important;
  border: 1px solid #e7e9ef !important;
  border-radius: 10px !important;
  background: #f2f3f6 !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-view-card,
.owner-attendance-overview .owner-attendance-view-button {
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #7a818e !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-view-tabs > .owner-attendance-view-card,
.owner-attendance-overview .owner-attendance-view-tabs > .owner-attendance-view-button {
  flex: 0 0 auto !important;
  width: auto !important;
  box-sizing: border-box !important;
}

.owner-attendance-overview .owner-attendance-view-card.active,
.owner-attendance-overview .owner-attendance-view-button.active {
  background: #fff !important;
  color: #11131e !important;
  box-shadow: 0 2px 8px rgba(17, 17, 22, 0.10) !important;
}

.owner-attendance-overview .owner-attendance-view-card > span,
.owner-attendance-overview .owner-attendance-view-button > span {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
}

.owner-attendance-overview .owner-attendance-view-card svg,
.owner-attendance-overview .owner-attendance-view-button svg {
  width: 17px !important;
  height: 17px !important;
}

.owner-attendance-overview .owner-attendance-view-card > strong,
.owner-attendance-overview .owner-attendance-view-button > strong {
  min-width: 0 !important;
  color: currentColor !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-controls {
    padding: 10px 14px !important;
    overflow-x: auto !important;
  }

  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-controls .owner-attendance-calendar-actions {
    min-width: max-content !important;
    gap: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-actions > span {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .owner-attendance-overview .owner-attendance-view-tabs {
    grid-template-columns: repeat(2, minmax(118px, 1fr)) !important;
  }

  .owner-attendance-overview .owner-attendance-view-card,
  .owner-attendance-overview .owner-attendance-view-button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 11px !important;
  }

  .owner-attendance-overview .owner-attendance-view-card > strong,
  .owner-attendance-overview .owner-attendance-view-button > strong {
    font-size: 13px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 8px 10px !important;
    padding: 14px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-head > div:first-child {
    min-width: 0 !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-head h3 {
    margin: 2px 0 0 !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-head p {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-actions {
    display: contents !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-actions > span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .owner-attendance-overview .owner-attendance-view-tabs {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-scroll {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-grid {
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    background: transparent !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-weekday,
  .owner-attendance-overview .owner-attendance-day.is-empty {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-day {
    min-width: 0 !important;
    min-height: 126px !important;
    overflow: hidden !important;
    border: 1px solid #e2e5ea !important;
    border-left: 3px solid #438663 !important;
    border-radius: 8px !important;
    padding: 9px !important;
  }

  .owner-attendance-overview .owner-attendance-day.tone-warning {
    border-left-color: #c58b25 !important;
  }

  .owner-attendance-overview .owner-attendance-day.tone-muted {
    border-left-color: #c4c9d3 !important;
  }

  .owner-attendance-overview .owner-attendance-day.is-today {
    border: 1px solid #15161d !important;
    box-shadow: inset 0 0 0 1px #15161d !important;
  }

  .owner-attendance-overview .owner-attendance-day-top,
  .owner-attendance-overview .owner-attendance-day-actions {
    gap: 4px !important;
  }

  .owner-attendance-overview .owner-attendance-day-top p strong {
    font-size: 23px !important;
    line-height: 1 !important;
  }

  .owner-attendance-overview .owner-attendance-day-detail-button {
    width: 30px !important;
    height: 30px !important;
  }

  .owner-attendance-overview .owner-attendance-day-badge {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    padding: 7px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  .owner-attendance-overview .owner-attendance-day-badge span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini {
    gap: 4px !important;
    margin-top: 6px !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini span {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
  }
}

/* Owner attendance recap: compact, balanced employee rows. */
.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) {
  display: grid !important;
  grid-template-columns: minmax(220px, .85fr) minmax(420px, 1.45fr) minmax(280px, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 0 !important;
  padding: 22px 24px !important;
  overflow: hidden !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) > * {
  min-width: 0 !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is([class*="summary"], [class*="stat"], [class*="metric"])[class*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(78px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is([class*="stat"], [class*="metric"]):not([class*="grid"]) {
  min-width: 0 !important;
  padding: 12px 13px !important;
  border-radius: 8px !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is([class*="stat"], [class*="metric"]) :is(.label, [class*="label"], small) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
  font-size: 12px !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is([class*="lateness"], [class*="late-summary"], [class*="tolerance"]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is([class*="detail"], [class*="action"]) {
  max-width: 100% !important;
}

@media (max-width: 900px) {
  .owner-attendance-overview:not(.evaluation-filter-overview) :is(
    .owner-attendance-employee-card,
    .owner-employee-card,
    .attendance-employee-card,
    .employee-summary-card,
    [class*="owner-attendance"] [class*="employee"][class*="card"],
    [class*="attendance-overview"] [class*="employee"][class*="card"]
  ) {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px !important;
  }
}

@media (max-width: 560px) {
  .owner-attendance-overview:not(.evaluation-filter-overview) :is(
    .owner-attendance-employee-card,
    .owner-employee-card,
    .attendance-employee-card,
    .employee-summary-card,
    [class*="owner-attendance"] [class*="employee"][class*="card"],
    [class*="attendance-overview"] [class*="employee"][class*="card"]
  ) {
    gap: 12px !important;
    padding: 15px !important;
  }

  .owner-attendance-overview:not(.evaluation-filter-overview) :is(
    .owner-attendance-employee-card,
    .owner-employee-card,
    .attendance-employee-card,
    .employee-summary-card,
    [class*="owner-attendance"] [class*="employee"][class*="card"],
    [class*="attendance-overview"] [class*="employee"][class*="card"]
  ) :is([class*="summary"], [class*="stat"], [class*="metric"])[class*="grid"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .owner-attendance-overview:not(.evaluation-filter-overview) :is(
    .owner-attendance-employee-card,
    .owner-employee-card,
    .attendance-employee-card,
    .employee-summary-card,
    [class*="owner-attendance"] [class*="employee"][class*="card"],
    [class*="attendance-overview"] [class*="employee"][class*="card"]
  ) :is([class*="stat"], [class*="metric"]):not([class*="grid"]) {
    padding: 9px 7px !important;
  }
}

/* Owner attendance mode header: shared polish for date and employee views. */
.owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid #e6e8ed !important;
  background: #fff !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head > div:first-child {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .surface-label {
  margin: 0 !important;
  color: #6f7786 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head h3 {
  margin: 0 !important;
  color: #121522 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head p {
  max-width: 540px !important;
  margin: 0 !important;
  color: #727988 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-calendar-actions {
  width: auto !important;
  min-width: 0 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-calendar-actions > span {
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-view-tabs {
  gap: 3px !important;
  padding: 3px !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-view-button {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-view-button > strong {
  font-size: 12px !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-view-button > span {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-view-button svg {
  width: 15px !important;
  height: 15px !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head h3 {
    font-size: 20px !important;
  }

  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head p {
    display: block !important;
    font-size: 12px !important;
  }

  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-calendar-actions {
    width: 100% !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 1px !important;
  }

  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-calendar-actions > span {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center !important;
  }

  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-view-tabs {
    grid-column: auto !important;
    width: max-content !important;
    min-width: max-content !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 420px) {
  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-calendar-actions {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head .owner-attendance-view-tabs {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Owner attendance employee summary: compact, balanced, and responsive. */
.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.55fr) !important;
  grid-template-areas:
    "identity stats"
    "meta lateness"
    "meta action" !important;
  align-items: start !important;
  gap: 14px 28px !important;
  min-height: 0 !important;
  padding: 24px 28px !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is(
  .employee-card-head,
  .employee-card-identity,
  .employee-identity,
  .employee-profile,
  [class*="employee-head"],
  [class*="employee-identity"],
  [class*="employee-profile"]
) {
  grid-area: identity !important;
  min-width: 0 !important;
  align-self: center !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is(
  .employee-card-meta,
  .employee-meta,
  .employee-record-meta,
  [class*="employee-meta"],
  [class*="record-meta"]
) {
  grid-area: meta !important;
  min-width: 0 !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is(
  .employee-card-stats,
  .employee-stats,
  .attendance-stats,
  .summary-stats,
  [class*="employee-stats"],
  [class*="attendance-stats"],
  [class*="summary-stats"]
) {
  grid-area: stats !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is(
  .employee-card-stats,
  .employee-stats,
  .attendance-stats,
  .summary-stats,
  [class*="employee-stats"],
  [class*="attendance-stats"],
  [class*="summary-stats"]
) > * {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 82px !important;
  padding: 12px 14px !important;
  overflow: visible !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is(
  .employee-card-stats,
  .employee-stats,
  .attendance-stats,
  .summary-stats,
  [class*="employee-stats"],
  [class*="attendance-stats"],
  [class*="summary-stats"]
) :is(.label, .title, [class*="label"], [class*="title"]) {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is(
  .employee-card-lateness,
  .employee-lateness,
  .lateness-summary,
  [class*="lateness-summary"],
  [class*="employee-lateness"]
) {
  grid-area: lateness !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.owner-attendance-overview:not(.evaluation-filter-overview) :is(
  .owner-attendance-employee-card,
  .owner-employee-card,
  .attendance-employee-card,
  .employee-summary-card,
  [class*="owner-attendance"] [class*="employee"][class*="card"],
  [class*="attendance-overview"] [class*="employee"][class*="card"]
) :is(
  .employee-card-action,
  .employee-detail-action,
  .abnormal-detail-action,
  [class*="detail-abnormal"],
  [class*="abnormal-action"]
) {
  grid-area: action !important;
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview:not(.evaluation-filter-overview) :is(
    .owner-attendance-employee-card,
    .owner-employee-card,
    .attendance-employee-card,
    .employee-summary-card,
    [class*="owner-attendance"] [class*="employee"][class*="card"],
    [class*="attendance-overview"] [class*="employee"][class*="card"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "identity"
      "meta"
      "stats"
      "lateness"
      "action" !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  .owner-attendance-overview:not(.evaluation-filter-overview) :is(
    .owner-attendance-employee-card,
    .owner-employee-card,
    .attendance-employee-card,
    .employee-summary-card,
    [class*="owner-attendance"] [class*="employee"][class*="card"],
    [class*="attendance-overview"] [class*="employee"][class*="card"]
  ) :is(
    .employee-card-stats,
    .employee-stats,
    .attendance-stats,
    .summary-stats,
    [class*="employee-stats"],
    [class*="attendance-stats"],
    [class*="summary-stats"]
  ) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .owner-attendance-overview:not(.evaluation-filter-overview) :is(
    .owner-attendance-employee-card,
    .owner-employee-card,
    .attendance-employee-card,
    .employee-summary-card,
    [class*="owner-attendance"] [class*="employee"][class*="card"],
    [class*="attendance-overview"] [class*="employee"][class*="card"]
  ) :is(
    .employee-card-stats,
    .employee-stats,
    .attendance-stats,
    .summary-stats,
    [class*="employee-stats"],
    [class*="attendance-stats"],
    [class*="summary-stats"]
  ) > * {
    min-height: 68px !important;
    padding: 9px 7px !important;
  }
}

@media (max-width: 380px) {
  .owner-attendance-overview:not(.evaluation-filter-overview) :is(
    .owner-attendance-employee-card,
    .owner-employee-card,
    .attendance-employee-card,
    .employee-summary-card,
    [class*="owner-attendance"] [class*="employee"][class*="card"],
    [class*="attendance-overview"] [class*="employee"][class*="card"]
  ) :is(
    .employee-card-stats,
    .employee-stats,
    .attendance-stats,
    .summary-stats,
    [class*="employee-stats"],
    [class*="attendance-stats"],
    [class*="summary-stats"]
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Owner attendance final polish: modal close, summary spacing, and lateness chips. */
.owner-attendance-overview {
  gap: 0 !important;
  overflow: visible !important;
}

.owner-attendance-overview .owner-attendance-summary {
  margin-bottom: 28px !important;
}

.owner-attendance-overview .owner-attendance-period-section {
  margin-top: 0 !important;
}

.owner-attendance-overview .owner-attendance-filter-section {
  margin: 0 0 16px !important;
  overflow: visible !important;
}

.owner-attendance-overview .owner-attendance-filter-header {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: #fbfcfd !important;
}

.owner-attendance-overview .owner-attendance-filter-icon {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  border-radius: 8px !important;
}

.owner-attendance-overview .owner-attendance-filter-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.owner-attendance-overview .owner-attendance-filter-header > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

.owner-attendance-overview .owner-attendance-filter-header .surface-label {
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.owner-attendance-overview .owner-attendance-filter-header h2 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.owner-attendance-overview .owner-attendance-filter-header p {
  max-width: 720px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.owner-attendance-overview .owner-attendance-filter-body {
  padding: 12px 16px !important;
}

.owner-attendance-overview .owner-attendance-filter-tools {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px) !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.owner-attendance-overview .owner-attendance-month-picker {
  margin: 0 !important;
  padding: 0 !important;
}

.owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  min-height: 88px !important;
  overflow: visible !important;
  padding: 15px 18px !important;
}

.owner-attendance-overview .owner-attendance-month-picker .owner-attendance-period-copy {
  display: grid !important;
  justify-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

.owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger-copy strong {
  margin-top: 4px !important;
  font-size: 18px !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
}

.owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger-meta {
  margin-top: 6px !important;
}

.owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger-arrow {
  right: 16px !important;
}

.owner-attendance-overview .owner-attendance-download-menu {
  position: relative !important;
  min-width: 0 !important;
  z-index: 6 !important;
}

.owner-attendance-overview .owner-attendance-download-trigger {
  width: 100% !important;
  min-height: 88px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 18px !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  padding: 14px !important;
  border: 1px solid #dce1e8 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #11131d !important;
  list-style: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(16, 20, 30, 0.05) !important;
}

.owner-attendance-overview .owner-attendance-download-trigger::-webkit-details-marker {
  display: none !important;
}

.owner-attendance-overview .owner-attendance-download-trigger > span {
  grid-row: 1 / span 2 !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #eef4f0 !important;
  color: #3f7a5a !important;
}

.owner-attendance-overview .owner-attendance-download-trigger svg {
  width: 17px !important;
  height: 17px !important;
}

.owner-attendance-overview .owner-attendance-download-trigger strong {
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

.owner-attendance-overview .owner-attendance-download-trigger small {
  min-width: 0 !important;
  color: #697180 !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
}

.owner-attendance-overview .owner-attendance-download-trigger em {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6e7581 !important;
  font-style: normal !important;
}

.owner-attendance-overview .owner-attendance-download-menu[open] .owner-attendance-download-trigger {
  border-color: #b7cfbf !important;
  box-shadow: 0 8px 22px rgba(17, 28, 24, 0.10) !important;
}

.owner-attendance-overview .owner-attendance-download-menu[open] .owner-attendance-download-trigger em {
  transform: rotate(180deg) !important;
}

.owner-attendance-overview .owner-attendance-download-options {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: min(320px, calc(100vw - 32px)) !important;
  display: grid !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid #dce1e8 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(16, 20, 30, 0.15) !important;
}

.owner-attendance-overview .owner-attendance-download-options button {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #11131d !important;
  text-align: left !important;
  cursor: pointer !important;
}

.owner-attendance-overview .owner-attendance-download-options button:hover {
  border-color: #e1e5ec !important;
  background: #f8fafb !important;
}

.owner-attendance-overview .owner-attendance-download-options button > span {
  grid-row: 1 / span 2 !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #f1f4f6 !important;
  color: #626a76 !important;
}

.owner-attendance-overview .owner-attendance-download-options button svg {
  width: 16px !important;
  height: 16px !important;
}

.owner-attendance-overview .owner-attendance-download-options strong,
.owner-attendance-overview .owner-attendance-download-options small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.owner-attendance-overview .owner-attendance-download-options strong {
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

.owner-attendance-overview .owner-attendance-download-options small {
  color: #727987 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.owner-attendance-overview.operations-attendance-download-overview {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.operations-attendance-download-overview .owner-attendance-download-menu {
  width: 100% !important;
}

.operations-attendance-download-overview .owner-attendance-download-trigger {
  min-height: 72px !important;
  grid-template-columns: 36px minmax(0, 1fr) 18px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(16, 20, 30, 0.06) !important;
}

.operations-attendance-download-overview .owner-attendance-download-trigger > span {
  width: 36px !important;
  height: 36px !important;
}

.operations-attendance-download-overview .owner-attendance-download-options {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

.permission-page-actions.permission-page-actions-operations-download {
  width: min(100%, 360px) !important;
  align-self: flex-end !important;
}

.permission-page-actions-operations-download .operations-attendance-download-overview {
  min-width: 0 !important;
}

.overview-scope-stack.is-tabbed .overview-team-content,
.overview-team-content.operations-overview-team-content {
  gap: 22px !important;
}

@media (min-width: 761px) {
  .owner-attendance-overview .owner-attendance-month-picker,
  .owner-attendance-overview .owner-attendance-download-menu {
    height: 100% !important;
    align-self: stretch !important;
  }

  .owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter,
  .owner-attendance-overview .owner-attendance-download-trigger {
    height: 100% !important;
    box-sizing: border-box !important;
  }
}

.owner-attendance-month-dialog .schedule-period-dialog-header {
  align-items: flex-start !important;
  gap: 16px !important;
}

.owner-attendance-month-dialog .schedule-period-dialog-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: -6px -6px 0 auto !important;
  padding: 0 !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #11131d !important;
  box-shadow: 0 1px 2px rgba(16, 20, 30, 0.08) !important;
}

.owner-attendance-month-dialog .schedule-period-dialog-close:hover {
  border-color: #cfd4dc !important;
  background: #f6f7f9 !important;
}

.owner-attendance-month-dialog .schedule-period-dialog-close svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.2 !important;
}

.owner-attendance-detail-dialog.is-swapping .owner-attendance-detail-shell {
  pointer-events: none !important;
  will-change: opacity, transform !important;
}

.owner-attendance-detail-dialog.is-swapping {
  overflow: hidden !important;
  overflow-x: hidden !important;
}

.owner-attendance-detail-dialog.is-swapping-forward .owner-attendance-detail-shell.is-leaving {
  animation: owner-attendance-dialog-forward-out 90ms ease both !important;
}

.owner-attendance-detail-dialog.is-swapping-back .owner-attendance-detail-shell.is-leaving {
  animation: owner-attendance-dialog-back-out 90ms ease both !important;
}

.owner-attendance-detail-dialog.is-swapping-forward .owner-attendance-detail-shell.is-entering {
  opacity: 0 !important;
  transform: translateY(8px) scale(0.992) !important;
}

.owner-attendance-detail-dialog.is-swapping-back .owner-attendance-detail-shell.is-entering {
  opacity: 0 !important;
  transform: translateY(-8px) scale(0.992) !important;
}

.owner-attendance-detail-dialog.is-swapping .owner-attendance-detail-shell.is-entering.is-entered {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition:
    opacity 90ms ease,
    transform 90ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes owner-attendance-dialog-forward-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.992);
  }
}

@keyframes owner-attendance-dialog-back-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
}

@media (prefers-reduced-motion: reduce) {
  .owner-attendance-detail-dialog.is-swapping .owner-attendance-detail-shell,
  .owner-attendance-detail-dialog.is-swapping .owner-attendance-detail-shell.is-entering,
  .owner-attendance-detail-dialog.is-swapping .owner-attendance-detail-shell.is-entering.is-entered,
  .owner-attendance-detail-dialog.is-swapping .owner-attendance-detail-shell.is-leaving {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-row-v2 {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 50px !important;
  padding: 10px 14px !important;
  border: 1px solid #ead6d2 !important;
  border-radius: 9px !important;
  background: #fffdfc !important;
  box-shadow: none !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip::before {
  display: none !important;
  content: none !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip small {
  min-width: 0 !important;
  color: #5f6672 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip strong {
  color: #121722 !important;
  font-size: 17px !important;
  font-weight: 840 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-success {
  border-color: #ead6d2 !important;
  background: #fffdfc !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-success::before {
  display: none !important;
  content: none !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-warning {
  border-color: #ead6d2 !important;
  background: #fffdfc !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-warning::before {
  display: none !important;
  content: none !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-warning.has-value strong {
  color: #121722 !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary {
    margin-bottom: 18px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-header {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: flex-start !important;
    padding: 14px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-header .surface-label {
    font-size: 10px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-header h2 {
    font-size: 20px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-header p {
    font-size: 11px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-body {
    padding: 10px 12px !important;
  }

  .owner-attendance-overview .owner-attendance-filter-tools {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger.owner-attendance-period-filter {
    min-height: 82px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 13px 42px !important;
  }

  .owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger-copy strong {
    font-size: 18px !important;
    white-space: normal !important;
  }

  .owner-attendance-overview .owner-attendance-month-picker .schedule-period-branch,
  .owner-attendance-overview .owner-attendance-month-picker .schedule-period-status,
  .owner-attendance-overview .owner-attendance-month-picker .schedule-period-active-status {
    font-size: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-month-picker .schedule-period-trigger-arrow {
    right: 12px !important;
  }

  .owner-attendance-overview .owner-attendance-download-trigger {
    min-height: 46px !important;
    grid-template-columns: 30px minmax(0, 1fr) 18px !important;
    padding: 9px 11px !important;
  }

  .owner-attendance-overview .owner-attendance-download-trigger > span {
    width: 30px !important;
    height: 30px !important;
  }

  .owner-attendance-overview .owner-attendance-download-options {
    position: static !important;
    width: 100% !important;
    margin-top: 6px !important;
    box-shadow: 0 8px 22px rgba(16, 20, 30, 0.10) !important;
  }

  .permission-page-actions.permission-page-actions-operations-download {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .owner-attendance-overview.operations-attendance-download-overview {
    margin-top: 0 !important;
  }

  .operations-attendance-download-overview .owner-attendance-download-menu {
    width: 100% !important;
  }

  .operations-attendance-download-overview .owner-attendance-download-trigger {
    min-height: 56px !important;
    grid-template-columns: 32px minmax(0, 1fr) 18px !important;
    padding: 10px 12px !important;
  }

  .operations-attendance-download-overview .owner-attendance-download-trigger > span {
    width: 32px !important;
    height: 32px !important;
  }

  .overview-scope-stack.is-tabbed .overview-team-content,
  .overview-team-content.operations-overview-team-content {
    gap: 18px !important;
  }

  .owner-attendance-month-dialog .schedule-period-dialog-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
    margin: -4px -4px 0 auto !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 46px !important;
    padding: 9px 10px !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip small {
    font-size: 11px !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip strong {
    font-size: 14px !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "identity"
      "meta"
      "stats"
      "lateness"
      "action" !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 {
    grid-area: identity !important;
    grid-column: 1 !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-avatar {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 40px !important;
    height: 40px !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 > p {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 > p strong,
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 > p small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 > p strong {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 > p small {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-head-v2 > em {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-meta-v2 {
    grid-area: meta !important;
    grid-column: 1 !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-kpis-v2 {
    grid-area: stats !important;
    grid-column: 1 !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-row-v2 {
    grid-area: lateness !important;
    grid-column: 1 !important;
    width: 100% !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-action.owner-attendance-employee-action-v2,
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-clean.owner-attendance-employee-clean-v2 {
    grid-area: action !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-action.owner-attendance-employee-action-v2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 12px 14px !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-action.owner-attendance-employee-action-v2 > span {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-action.owner-attendance-employee-action-v2 strong,
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-action.owner-attendance-employee-action-v2 small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-row-v2 {
    grid-template-columns: 1fr !important;
  }
}

.owner-attendance-overview .owner-attendance-summary-label-mobile {
  display: none;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-employee-kpis-v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-kpi-pill {
  display: grid !important;
  grid-template-columns: 7px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  border: 1px solid #e6e9ef !important;
  border-radius: 8px !important;
  background: #fbfcfe !important;
  box-shadow: none !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-kpi-pill::after {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 7px !important;
  height: 7px !important;
  align-self: center !important;
  justify-self: start !important;
  border-radius: 999px !important;
  content: "" !important;
  opacity: 1 !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-kpi-pill small {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  color: #697180 !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-kpi-pill strong {
  grid-column: 3 !important;
  grid-row: 1 !important;
  color: #10131d !important;
  font-size: 18px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-summary-card b {
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card.has-mobile-label .owner-attendance-summary-label-full {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-summary-card.has-mobile-label .owner-attendance-summary-label-mobile {
    display: inline !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-row-v2 {
    gap: 8px !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip,
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-success,
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-warning {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 42px !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-color: #ead6d2 !important;
    border-radius: 8px !important;
    background: #fffdfc !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip::before,
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-success::before,
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-warning::before {
    display: none !important;
    content: none !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip small {
    color: #697180 !important;
    font-size: 10.5px !important;
    font-weight: 760 !important;
  }

  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip strong,
  .owner-attendance-employee-card.owner-attendance-employee-card-v2 .owner-attendance-late-chip.tone-warning.has-value strong {
    color: #202532 !important;
    font-size: 13px !important;
    font-weight: 780 !important;
  }

  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head {
    padding: 10px 12px 12px !important;
    border-bottom: 0 !important;
  }

  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head > div:first-child,
  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head .owner-attendance-calendar-actions > span {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head .owner-attendance-calendar-actions {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head .owner-attendance-view-tabs {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  .owner-attendance-overview .owner-attendance-summary-card b {
    font-size: 16px !important;
  }
}

/* Owner overview calendar: align date cards with the compact operational attendance calendar. */
.owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 18px 22px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  background: #ffffff !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head h3 {
  margin: 0 !important;
  color: #121522 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.owner-attendance-overview .owner-attendance-period-section .owner-attendance-calendar-head p {
  max-width: 560px !important;
  margin: 0 !important;
  color: #727988 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.owner-attendance-overview .owner-attendance-calendar-scroll {
  overflow-x: hidden !important;
  padding: 18px 22px 12px !important;
}

.owner-attendance-overview .owner-attendance-calendar-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
}

.owner-attendance-overview .owner-attendance-calendar-weekday {
  min-height: 38px !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: #f4f6f5 !important;
  padding: 10px !important;
  color: var(--text-soft) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

.owner-attendance-overview .owner-attendance-day,
.owner-attendance-overview .owner-attendance-day.has-records,
.owner-attendance-overview .owner-attendance-day.is-weekend {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 116px !important;
  gap: 6px !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 10px !important;
}

.owner-attendance-overview .owner-attendance-day.is-empty {
  min-height: 116px !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: #fafbfa !important;
}

.owner-attendance-overview .owner-attendance-day.tone-success,
.owner-attendance-overview .owner-attendance-day.tone-info {
  background: #f2faf5 !important;
}

.owner-attendance-overview .owner-attendance-day.tone-warning {
  background: #fffaf0 !important;
}

.owner-attendance-overview .owner-attendance-day.tone-rest {
  background: #fffafa !important;
}

.owner-attendance-overview .owner-attendance-day.is-today {
  border: 0 !important;
  background: #f3f8f5 !important;
  box-shadow: inset 0 0 0 2px #111116 !important;
}

.owner-attendance-overview .owner-attendance-day-top {
  align-items: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.owner-attendance-overview .owner-attendance-day-top p {
  gap: 1px !important;
}

.owner-attendance-overview .owner-attendance-day-top small {
  color: var(--text-soft) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-day-top strong {
  color: #111116 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-today-badge {
  border-radius: 4px !important;
  background: #111116 !important;
  color: #ffffff !important;
  padding: 3px 5px !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.owner-attendance-overview .owner-attendance-day-detail-button {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  flex: 0 0 auto !important;
  border-radius: 7px !important;
  background: #ffffff !important;
}

.owner-attendance-overview .owner-attendance-day-detail-button svg {
  width: 14px !important;
  height: 14px !important;
}

.owner-attendance-overview .owner-attendance-day-badge {
  width: max-content !important;
  max-width: 100% !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.owner-attendance-overview .owner-attendance-day-badge svg {
  width: 10px !important;
  height: 10px !important;
}

.owner-attendance-overview .owner-attendance-day-mini {
  display: flex !important;
  gap: 4px !important;
}

.owner-attendance-overview .owner-attendance-day-mini span {
  border-radius: 4px !important;
  padding: 3px 6px !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}

.owner-attendance-overview .owner-attendance-day-empty {
  margin: auto 0 0 !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
}

@media (max-width: 760px) {
  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px 12px !important;
    border-bottom: 0 !important;
  }

  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head > div:first-child,
  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head .owner-attendance-calendar-actions > span {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head .owner-attendance-calendar-actions {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .owner-attendance-overview .owner-attendance-period-section :is(.owner-attendance-calendar, .owner-attendance-employee-overview) > .owner-attendance-calendar-head .owner-attendance-view-tabs {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-scroll {
    overflow: visible !important;
    padding: 10px 12px 12px !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-grid {
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .owner-attendance-overview .owner-attendance-calendar-weekday,
  .owner-attendance-overview .owner-attendance-day.is-empty {
    display: none !important;
  }

  .owner-attendance-overview .owner-attendance-day,
  .owner-attendance-overview .owner-attendance-day.has-records,
  .owner-attendance-overview .owner-attendance-day.is-weekend {
    min-height: 88px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .owner-attendance-overview .owner-attendance-day-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 4px !important;
  }

  .owner-attendance-overview .owner-attendance-day-top p {
    min-width: 0 !important;
  }

  .owner-attendance-overview .owner-attendance-day-top small {
    font-size: 8px !important;
  }

  .owner-attendance-overview .owner-attendance-day-top strong {
    font-size: 18px !important;
  }

  .owner-attendance-overview .owner-attendance-day-actions {
    display: grid !important;
    justify-items: end !important;
    align-content: start !important;
    gap: 3px !important;
    max-width: 36px !important;
    min-width: 24px !important;
  }

  .owner-attendance-overview .owner-attendance-today-badge,
  .owner-attendance-overview .owner-attendance-day-actions > span {
    min-height: 14px !important;
    max-width: 36px !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .owner-attendance-overview .owner-attendance-day-detail-button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  .owner-attendance-overview .owner-attendance-day-detail-button svg {
    width: 13px !important;
    height: 13px !important;
  }

  .owner-attendance-overview .owner-attendance-day-badge {
    padding: 4px 7px !important;
  }

  .owner-attendance-overview .owner-attendance-day-mini,
  .owner-attendance-overview .owner-attendance-day-empty {
    display: none !important;
  }
}

/* resources/css/features/workforce/workforce-settings.css */
.workforce-settings {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.system-control-tabs {
  position: sticky;
  top: 56px;
  z-index: 24;
  margin: -12px 0 4px;
  background: var(--canvas);
  padding: 12px 0 6px;
  isolation: isolate;
}

.system-control-tabs .system-section-tabs {
  margin: 0;
}

.system-settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #dde0e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(25, 28, 36, 0.025);
  margin-bottom: 16px;
}

.system-settings-entry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.system-workforce-settings-entry {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-height: 118px;
  margin: 0;
  border: 1px solid #d9dde4;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  color: #17171d;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.system-workforce-settings-entry.branch-entry {
  border-color: #d9dde4;
}

.system-workforce-settings-entry.branch-entry .system-settings-entry-icon {
  background: #eef0fb;
  color: #5966ad;
}

.system-workforce-settings-entry.team-entry .system-settings-entry-icon {
  background: #edf5ef;
  color: #4f7c5d;
}

.system-workforce-settings-entry.user-entry {
  border-color: #d9dde4;
}

.system-workforce-settings-entry.user-entry .system-settings-entry-icon {
  background: #fbf3df;
  color: #987022;
}

.system-workforce-settings-entry:hover {
  border-color: #b9c2cf;
  box-shadow: 0 8px 20px rgba(17, 17, 24, 0.06);
}

.system-settings-entry-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  background: #edf5ef;
  color: #4f7c5d;
}

.system-settings-entry-icon svg {
  width: 17px;
  height: 17px;
}

.system-workforce-settings-entry > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.system-workforce-settings-entry small,
.system-workforce-settings-entry em {
  color: #686d78;
  font-style: normal;
}

.system-workforce-settings-entry small {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.system-workforce-settings-entry strong {
  font-size: 16px;
  line-height: 1.25;
}

.system-workforce-settings-entry em {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workforce-settings svg {
  width: 17px;
  height: 17px;
}

.workforce-settings-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.workforce-settings-summary-item {
  display: grid;
  min-width: 0;
  min-height: 108px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 18px;
}

.workforce-settings-summary-item + .workforce-settings-summary-item {
  border-left: 1px solid var(--line);
}

.workforce-settings-summary-item > span,
.workforce-settings-form-title > span,
.workforce-settings-role-icon,
.workforce-settings-empty > span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f1f3f4;
  color: #667078;
}

.workforce-settings-summary-item > span {
  background: #edf4f0;
  color: #4d7a63;
}

.workforce-settings-summary-item > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.workforce-settings-summary-item small,
.workforce-settings-summary-item em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-settings-summary-item strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.system-settings-summary-grid .workforce-settings-summary-item {
  --system-overview-card-color: #5f78dc;
  --system-overview-card-soft: #edf2ff;
  position: relative;
  min-height: 108px;
  grid-template-columns: minmax(0, 1fr) 42px;
  grid-template-rows: auto auto auto;
  align-content: start;
  align-items: start;
  gap: 6px 14px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 17px 18px 16px;
}

.system-settings-summary-grid .workforce-settings-summary-item + .workforce-settings-summary-item {
  border-left: 1px solid #dde0e8;
}

.system-settings-summary-grid .workforce-settings-summary-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--system-overview-card-color);
  content: "";
}

.system-settings-summary-grid .workforce-settings-summary-item.tone-success {
  --system-overview-card-color: #4f9b62;
  --system-overview-card-soft: #edf8f1;
}

.system-settings-summary-grid .workforce-settings-summary-item.tone-warning {
  --system-overview-card-color: #b4872f;
  --system-overview-card-soft: #fff7df;
}

.system-settings-summary-grid .workforce-settings-summary-item.tone-info {
  --system-overview-card-color: #5f78dc;
  --system-overview-card-soft: #edf2ff;
}

.system-settings-summary-grid .workforce-settings-summary-item.tone-neutral {
  --system-overview-card-color: #6b786f;
  --system-overview-card-soft: #eef2ef;
}

.system-settings-summary-grid .workforce-settings-summary-item > span {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--system-overview-card-soft);
  color: var(--system-overview-card-color);
}

.system-settings-summary-grid .workforce-settings-summary-item > span svg {
  width: 20px;
  height: 20px;
}

.system-settings-summary-grid .workforce-settings-summary-item > div {
  display: contents;
}

.system-settings-summary-grid .workforce-settings-summary-item small {
  grid-column: 1;
  grid-row: 1;
  color: #747482;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.system-settings-summary-grid .workforce-settings-summary-item strong {
  grid-column: 1;
  grid-row: 2;
  color: #111116;
  font-size: 31px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.system-settings-summary-grid .workforce-settings-summary-item em {
  grid-column: 1;
  grid-row: 3;
  display: block;
  color: #747482;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.workforce-settings-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef0f2;
  padding: 5px;
}

.branch-settings {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.branch-settings-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.branch-settings-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 20px;
}

.branch-settings-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: 14px;
}

.branch-settings-list > .workforce-settings-empty {
  grid-column: 1 / -1;
}

.branch-settings-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(17, 17, 24, 0.045);
}

.branch-settings-card-cover {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  place-items: center;
  border-bottom: 1px solid var(--line);
  background: #f1f3f3;
  color: #757d79;
}

.branch-settings-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.branch-settings-card-cover > span {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #7b8480;
}

.branch-settings-card-cover > span svg {
  width: 28px;
  height: 28px;
}

.branch-settings-card-cover > span small {
  font-size: 10px;
}

.branch-settings-card-body {
  display: grid;
  min-width: 0;
  gap: 15px;
  padding: 18px;
}

.branch-settings-card-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.branch-settings-card-heading > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.branch-settings-card-heading small {
  color: #6c7280;
  font-size: 9px;
  font-weight: 750;
}

.branch-settings-card-heading h3 {
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-settings-status {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.branch-settings-status.active {
  color: #467658;
}

.branch-settings-status svg {
  width: 13px;
  height: 13px;
}

.branch-settings-edit {
  flex: 0 0 auto;
  min-width: 84px;
  min-height: 39px;
}

.branch-settings-edit svg {
  width: 15px;
  height: 15px;
}

.branch-settings-card-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.branch-settings-card-facts > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fafbfb;
  padding: 9px;
}

.branch-settings-card-facts > div > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #eef2ef;
  color: #587363;
}

.branch-settings-card-facts svg {
  width: 15px;
  height: 15px;
}

.branch-settings-card-facts div div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.branch-settings-card-facts small,
.branch-settings-card-facts strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-settings-card-facts small {
  color: var(--muted);
  font-size: 9px;
}

.branch-settings-card-facts strong {
  font-size: 11px;
}

.branch-settings-card-detail {
  display: grid;
  gap: 7px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 13px;
}

.branch-settings-card-detail p {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.branch-settings-card-detail svg {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.branch-settings-card-detail span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.branch-settings-form {
  display: grid;
  min-width: 0;
  gap: 0;
  background: #fff;
}

.branch-settings-dialog {
  width: min(1080px, calc(100vw - 40px));
}

.branch-settings-dialog .system-master-dialog-body {
  padding: 0;
}

.branch-settings-form-section {
  display: grid;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 22px 24px;
}

.branch-settings-form-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.branch-settings-form-heading > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  background: #eef0fb;
  color: #5966ad;
}

.branch-settings-identity-section .branch-settings-form-heading > span {
  background: #edf5ef;
  color: #4f7c5d;
}

.branch-settings-photo-section .branch-settings-form-heading > span {
  background: #eef1fb;
  color: #596ccc;
}

.branch-settings-contact-section .branch-settings-form-heading > span {
  background: #fbf3dd;
  color: #98721d;
}

.branch-settings-form-heading svg {
  width: 19px;
  height: 19px;
}

.branch-settings-form-heading div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.branch-settings-form-heading small {
  color: #6c7280;
  font-size: 9px;
  font-weight: 750;
}

.branch-settings-form-heading h3,
.branch-settings-form-heading p {
  margin: 0;
}

.branch-settings-form-heading h3 {
  font-size: 16px;
  line-height: 1.25;
}

.branch-settings-form-heading p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.branch-settings-cover-field {
  position: relative;
  min-width: 0;
}

.branch-settings-cover-picker {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.branch-settings-cover-picker > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.branch-settings-cover-preview {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  place-items: center;
  background: #f1f3f3;
  color: #68716d;
}

.branch-settings-cover-preview > span {
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.branch-settings-cover-preview > span svg {
  width: 26px;
  height: 26px;
  margin-bottom: 3px;
}

.branch-settings-cover-preview > span strong {
  color: var(--text);
  font-size: 12px;
}

.branch-settings-cover-preview > span small {
  color: var(--muted);
  font-size: 10px;
}

.branch-settings-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.branch-settings-cover-action,
.branch-settings-cover-remove {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 7px;
  background: rgba(17, 17, 24, 0.88);
  color: #fff;
  padding: 0 11px;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.branch-settings-cover-action {
  right: 10px;
  bottom: 10px;
}

.branch-settings-cover-remove {
  top: 10px;
  right: 10px;
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(132, 55, 45, 0.9);
  cursor: pointer;
}

.branch-settings-cover-action svg,
.branch-settings-cover-remove svg {
  width: 14px;
  height: 14px;
}

.branch-settings-field-grid {
  display: grid;
  gap: 12px;
}

.branch-settings-field-grid.identity {
  grid-template-columns: minmax(0, 1.25fr) minmax(110px, 0.55fr) minmax(150px, 0.8fr);
}

.branch-settings-field-grid.contact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.branch-settings-contact-fields {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.branch-settings-field-grid label,
.branch-settings-address,
.branch-settings-hours label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.branch-settings-field-grid label > span,
.branch-settings-address > span,
.branch-settings-hours label > span {
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.branch-settings-field-grid input,
.branch-settings-field-grid select,
.branch-settings-address textarea,
.branch-settings-hours input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 12px;
  font: inherit;
}

.branch-settings-field-grid input[readonly] {
  color: var(--muted);
  cursor: default;
}

.branch-settings-address textarea {
  min-height: 82px;
  resize: vertical;
  padding-top: 11px;
  line-height: 1.45;
}

.branch-settings-hours {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(110px, 1fr) 18px minmax(110px, 1fr);
  align-items: end;
  gap: 8px;
}

.branch-settings-hours > span {
  display: grid;
  height: 42px;
  place-items: center;
  color: var(--muted);
}

.branch-settings-hours > span svg {
  width: 16px;
  height: 16px;
}

.branch-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
}

.branch-settings-form-feedback {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 24px;
  padding: 11px 13px;
  border: 1px solid #e7b9b1;
  border-radius: 6px;
  background: #fff7f5;
  color: #9c493d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.branch-settings-form-feedback[hidden] {
  display: none;
}

.branch-settings-form-feedback svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.branch-settings-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.branch-settings-actions > span svg {
  width: 15px;
  height: 15px;
}

.branch-settings-actions .button {
  flex: 0 0 auto;
}

.branch-settings-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.workforce-settings-tabs button {
  display: inline-flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #616875;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.workforce-settings-tabs button:hover {
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
}

.workforce-settings-tabs button.active {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 2px 7px rgba(17, 17, 22, 0.06);
  color: var(--ink);
}

.workforce-settings-content,
.workforce-settings-panel {
  min-width: 0;
}

.workforce-settings-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.workforce-settings-section-header {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 22px 28px;
}

.workforce-settings-section-header > div {
  min-width: 0;
}

.workforce-settings-section-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.workforce-settings-section-heading.has-icon {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
}

.workforce-settings-section-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.workforce-settings-section-icon svg {
  width: 21px;
  height: 21px;
}

.workforce-settings-section-icon.tone-leave {
  background: #f2edfb;
  color: #765da5;
}

.workforce-settings-section-header h2 {
  margin: 3px 0 2px;
  font-size: 24px;
  line-height: 1.24;
}

.workforce-settings-section-header p {
  max-width: 760px;
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
}

.workforce-settings-source {
  display: inline-flex;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--text-soft);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
}

.workforce-settings-form-grid,
.workforce-settings-location-list,
.workforce-settings-holiday-layout {
  display: grid;
  gap: 16px;
  padding: 20px;
}

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

.workforce-settings-form {
  display: grid;
  container-type: inline-size;
  min-width: 0;
  align-content: start;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 20px;
}

.workforce-settings-form.wide,
.workforce-settings-location-list {
  margin: 20px;
}

.workforce-settings-location-list {
  padding: 0;
}

.workforce-settings-form-title {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.workforce-settings-form-title h3,
.workforce-settings-form-title p {
  margin: 0;
}

.workforce-settings-form-title h3 {
  font-size: 16px;
  line-height: 1.3;
}

.workforce-settings-form-title p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.workforce-settings-form-title .tone-operational,
.workforce-settings-role-icon.tone-operational {
  background: #eaf4ee;
  color: #4d8564;
}

.workforce-settings-form-title .tone-managerial,
.workforce-settings-role-icon.tone-managerial {
  background: #edf1fc;
  color: #5f72ca;
}

.workforce-settings-form-title .tone-attendance {
  background: #edf2ff;
  color: #5572cf;
}

.workforce-settings-form-title .tone-payment {
  background: #fff4d9;
  color: #99721e;
}

.workforce-settings-form-title .tone-location {
  background: #edf3f4;
  color: #56737c;
}

.workforce-settings-form-title .tone-holiday {
  background: #f1eef8;
  color: #756793;
}

.workforce-settings-form-title .tone-wfa {
  background: #edf4ef;
  color: #4f765f;
}

.workforce-settings-policy-lock {
  display: grid;
  min-height: 64px;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafafa;
}

.workforce-settings-policy-lock > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: #f7ebe8;
  color: #a45b4e;
}

.workforce-settings-policy-lock svg {
  width: 17px;
  height: 17px;
}

.workforce-settings-policy-lock small,
.workforce-settings-policy-lock strong,
.workforce-settings-policy-lock p {
  display: block;
  margin: 0;
}

.workforce-settings-policy-lock small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.workforce-settings-policy-lock strong {
  margin-top: 1px;
  font-size: 12px;
}

.workforce-settings-policy-lock p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.workforce-settings-wfa-active,
.workforce-settings-wfa-picker {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.workforce-settings-wfa-active {
  border-color: #c9dbce;
  background: #f7faf8;
  box-shadow: inset 3px 0 0 #668b72;
}

.workforce-settings-wfa-picker {
  background: #fbfbfc;
}

.workforce-settings-wfa-section-heading,
.workforce-settings-wfa-picker-heading,
.workforce-settings-wfa-section-heading > div {
  display: flex;
  align-items: center;
}

.workforce-settings-wfa-section-heading {
  justify-content: space-between;
  gap: 14px;
}

.workforce-settings-wfa-section-heading > div {
  min-width: 0;
  gap: 10px;
}

.workforce-settings-wfa-section-heading > div > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 8px;
  background: #e8f1eb;
  color: #4f765f;
}

.workforce-settings-wfa-section-heading svg {
  width: 17px;
  height: 17px;
}

.workforce-settings-wfa-section-heading h4,
.workforce-settings-wfa-picker-heading h4,
.workforce-settings-wfa-section-heading p,
.workforce-settings-wfa-picker-heading p {
  margin: 0;
}

.workforce-settings-wfa-section-heading h4,
.workforce-settings-wfa-picker-heading h4 {
  font-size: 13px;
  line-height: 1.25;
}

.workforce-settings-wfa-section-heading p,
.workforce-settings-wfa-picker-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.workforce-settings-wfa-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.workforce-settings-wfa-search {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
}

.workforce-settings-wfa-search > span {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--muted);
}

.workforce-settings-wfa-search svg {
  width: 15px;
  height: 15px;
}

.workforce-settings-wfa-search input {
  min-width: 0;
  height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}

.workforce-settings-wfa-count {
  border-radius: 999px;
  padding: 7px 10px;
  background: #e5eee8;
  color: #496b57;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.workforce-settings-wfa-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.workforce-settings-wfa-option {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.workforce-settings-wfa-option[hidden],
.workforce-settings-wfa-empty[hidden] {
  display: none;
}

.workforce-settings-wfa-option:hover {
  border-color: #bbc3bf;
}

.workforce-settings-wfa-option.is-selected {
  border-color: #91b29e;
  background: #fbfdfb;
}

.workforce-settings-wfa-option.is-active {
  border-color: #91b29e;
  background: #fff;
  box-shadow: 0 5px 14px rgba(48, 77, 58, 0.055);
}

.workforce-settings-wfa-option-main {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px 36px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  cursor: pointer;
}

.workforce-settings-wfa-option.is-active .workforce-settings-wfa-option-main {
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  padding-right: 0;
  cursor: default;
  pointer-events: none;
}

.workforce-settings-wfa-option-main input {
  width: 16px;
  height: 16px;
  accent-color: #4f765f;
}

.workforce-settings-wfa-option.is-active .workforce-settings-wfa-option-main input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.workforce-settings-wfa-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: #eef2ef;
  color: #476352;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
}

.workforce-settings-wfa-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workforce-settings-wfa-identity {
  min-width: 0;
}

.workforce-settings-wfa-identity strong,
.workforce-settings-wfa-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-settings-wfa-identity strong {
  font-size: 12px;
}

.workforce-settings-wfa-identity small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.workforce-settings-wfa-option-main > i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #e6f0e9;
  color: #4f765f;
  opacity: 0;
}

.workforce-settings-wfa-option.is-active .workforce-settings-wfa-option-main > i {
  opacity: 1;
}

.workforce-settings-wfa-option.is-selected .workforce-settings-wfa-option-main > i {
  opacity: 1;
}

.workforce-settings-wfa-option-main > i svg {
  width: 13px;
  height: 13px;
}

.workforce-settings-wfa-remove {
  display: none;
  width: 30px;
  height: 30px;
  margin-right: 9px;
  place-items: center;
  border: 1px solid #d9dedd;
  border-radius: 7px;
  background: #fff;
  color: #757d79;
  cursor: pointer;
}

.workforce-settings-wfa-option.is-active .workforce-settings-wfa-remove {
  display: grid;
}

.workforce-settings-wfa-remove:hover {
  border-color: #d4aba5;
  background: #fbf3f1;
  color: #a45d52;
}

.workforce-settings-wfa-remove svg {
  width: 14px;
  height: 14px;
}

.workforce-settings-wfa-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}

.workforce-settings-wfa-note svg {
  width: 15px;
  height: 15px;
  color: #4f765f;
}

.workforce-settings-wfa-empty {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.workforce-settings-role-icon.tone-exempt {
  background: #f2f2f3;
  color: #747680;
}

.workforce-settings-fields {
  display: grid;
  gap: 12px;
}

.workforce-settings-fields.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workforce-settings-fields.three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workforce-settings-fields.four-columns,
.workforce-settings-fields.compact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workforce-settings-fields.five-columns {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.workforce-settings-field,
.workforce-settings-role-row label,
.workforce-settings-effective label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.workforce-settings-field > span:first-child,
.workforce-settings-role-row label > span,
.workforce-settings-effective label > span {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.workforce-settings-field input,
.workforce-settings-field select,
.workforce-settings-role-row input,
.workforce-settings-role-row select,
.workforce-settings-effective input,
.workforce-settings-rule-band input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: #fbfcfc;
  color: var(--ink);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 650;
}

.workforce-settings-field select[multiple] {
  min-height: 174px;
  padding: 8px;
}

.workforce-settings-field select[multiple] option {
  border-radius: 4px;
  padding: 7px 8px;
}

.workforce-settings-field input:focus,
.workforce-settings-field select:focus,
.workforce-settings-role-row input:focus,
.workforce-settings-role-row select:focus,
.workforce-settings-effective input:focus,
.workforce-settings-rule-band input:focus {
  border-color: #7f9990;
  box-shadow: 0 0 0 3px rgba(72, 121, 96, 0.1);
}

.workforce-settings-field small {
  color: var(--muted);
  font-size: 10px;
}

.workforce-settings-effective-field {
  align-content: start;
  gap: 5px;
}

.workforce-settings-field > .workforce-settings-effective-label:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5269b3;
}

.workforce-settings-effective-label svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.workforce-settings-effective-label b {
  font: inherit;
}

.workforce-settings-effective-field input {
  border-color: #d2d8e8;
  background: #f8f9fd;
  box-shadow: inset 3px 0 0 #788ac9;
  font-size: 12px;
  font-weight: 750;
  padding-left: 13px;
}

.workforce-settings-effective-field input:focus {
  border-color: #7085cc;
  box-shadow: 0 0 0 3px rgba(112, 133, 204, 0.12);
}

.input-with-suffix,
.input-money {
  display: flex;
  min-width: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfc;
}

.input-with-suffix input,
.input-money input {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.input-with-suffix em,
.input-money i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-left: 1px solid var(--line);
  color: var(--muted);
  padding: 0 10px;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.input-money i {
  order: -1;
  border-right: 1px solid var(--line);
  border-left: 0;
}

.workforce-settings-choice-group {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.workforce-settings-choice-group legend {
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

[data-workforce-operational-shift-config] {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.workforce-settings-shift-times {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.workforce-settings-schedule-section {
  display: grid;
  min-width: 0;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.workforce-settings-schedule-section-head {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.workforce-settings-schedule-section-title {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.workforce-settings-schedule-section-title.is-plain {
  grid-template-columns: minmax(0, 1fr);
}

.workforce-settings-schedule-section-title > i {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #eef5f1;
  color: #4d7f63;
  font-style: normal;
}

.workforce-settings-schedule-section-title svg {
  width: 16px;
  height: 16px;
}

.workforce-settings-schedule-section-title > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workforce-settings-schedule-section-title strong {
  color: var(--ink);
  font-size: 12px;
}

.workforce-settings-schedule-section-title small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.workforce-settings-shift-count-control {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  border-radius: 7px;
  background: #f7f8f8;
  padding: 9px 10px;
}

.workforce-settings-shift-count-field {
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center;
  gap: 12px;
}

.workforce-settings-shift-count-field > span:first-child {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.workforce-settings-shift-count-apply,
.workforce-settings-shift-time-apply {
  display: inline-flex;
  width: max-content;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-color: #d8dde5;
  border-radius: 999px;
  background: #fff;
  color: #17171d;
  padding: 0 10px;
  font-size: 9.5px;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(17, 17, 24, 0.035);
}

.workforce-settings-shift-count-apply:hover:not(:disabled),
.workforce-settings-shift-time-apply:hover:not(:disabled) {
  border-color: #b9c2cf;
  background: #fff;
  box-shadow: 0 4px 12px rgba(17, 17, 24, 0.06);
}

.workforce-settings-shift-count-apply svg,
.workforce-settings-shift-time-apply svg {
  width: 12px;
  height: 12px;
}

.workforce-settings-shift-count-apply.is-applied,
.workforce-settings-shift-time-apply.is-applied {
  border-color: #b9d8c7;
  background: #eef7f2;
  color: #356f4e;
  box-shadow: none;
}

.workforce-settings-rest-section {
  gap: 12px;
}

.workforce-settings-rest-fields {
  padding-left: 43px;
}

.workforce-settings-shift-time-list {
  display: grid;
  gap: 7px;
}

.workforce-settings-shift-time-row {
  display: grid;
  grid-template-columns: minmax(126px, 1fr) minmax(118px, 0.7fr) 18px minmax(118px, 0.7fr);
  min-width: 0;
  align-items: end;
  gap: 10px;
  border-radius: 7px;
  background: #fafbfb;
  padding: 10px 12px;
}

.workforce-settings-shift-time-row + .workforce-settings-shift-time-row {
  border-top: 0;
}

.workforce-settings-shift-time-name {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr);
  align-self: center;
  align-items: center;
  gap: 10px;
}

.workforce-settings-shift-time-name > i {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid #f0dfb5;
  border-radius: 8px;
  background: #fff5dc;
  color: #9a711b;
  font-style: normal;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.workforce-settings-rest-section .workforce-settings-schedule-section-title > i {
  background: #fbeeed;
  color: #ad5a50;
}

.workforce-settings-shift-time-name svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.25;
}

.workforce-settings-shift-time-name > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workforce-settings-shift-time-name strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-settings-shift-time-name small,
.workforce-settings-shift-time-note {
  color: var(--muted);
  font-size: 9px;
}

.workforce-settings-shift-time-separator {
  display: inline-flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.workforce-settings-shift-time-separator svg {
  width: 14px;
  height: 14px;
}

.workforce-settings-shift-time-note {
  display: block;
  margin: 0;
  line-height: 1.45;
}

.workforce-settings-shift-time-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}

.workforce-settings-shift-time-apply {
  flex: 0 0 auto;
}

.workforce-settings-check-grid,
.workforce-settings-weekdays {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.workforce-settings-check-grid label,
.workforce-settings-weekdays label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.workforce-settings-check-grid input,
.workforce-settings-weekdays input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.workforce-settings-check-grid label > span,
.workforce-settings-weekdays label > span {
  display: grid;
  min-height: 54px;
  align-content: center;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfc;
  color: var(--text-soft);
  padding: 9px 10px;
}

.workforce-settings-check-grid label > span strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-settings-check-grid label > span small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-settings-check-grid input:checked + span,
.workforce-settings-weekdays input:checked + span {
  border-color: #8bb09d;
  background: #eef7f2;
  color: #315f49;
}

.workforce-settings-weekdays {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.workforce-settings-weekdays label > span {
  min-height: 38px;
  align-items: center;
  justify-items: center;
  padding: 5px;
  font-size: 10px;
  font-weight: 700;
}

.workforce-settings-effective,
.workforce-settings-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.workforce-settings-effective label {
  width: 160px;
  flex: 0 0 160px;
  margin-right: 0;
}

.workforce-settings-effective-actions {
  display: flex;
  flex: 1 1 290px;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.workforce-settings-version-note,
.workforce-settings-form-actions > span {
  display: inline-flex;
  flex: 1 1 100px;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.workforce-settings-save-button {
  min-width: 170px;
  min-height: 42px;
  flex: 0 0 auto;
  justify-content: center;
  white-space: nowrap;
}

.workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-effective {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 144px 164px;
  align-items: end;
  gap: 10px;
}

.workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-effective > label {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-effective-actions {
  display: contents;
}

.workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-version-note {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  align-self: center;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-save-button {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@container (max-width: 500px) {
  .workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-effective {
    grid-template-columns: minmax(0, 1fr) minmax(154px, 1fr);
    row-gap: 8px;
  }

  .workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-effective > label {
    grid-column: 1;
    grid-row: 1;
  }

  .workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-save-button {
    grid-column: 2;
    grid-row: 1;
  }

  .workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-version-note {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.workforce-settings-rule-band {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5d6ad;
  border-radius: 8px;
  background: #fffbef;
  padding: 12px 14px;
}

.workforce-settings-rule-band > span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #fff0c7;
  color: #946c12;
}

.workforce-settings-rule-band label {
  display: flex;
  min-width: 118px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #ddc98f;
  border-radius: 7px;
  background: white;
}

.workforce-settings-rule-band label input {
  border: 0;
  border-radius: 0;
}

.workforce-settings-rule-band label em,
.workforce-settings-rule-band .input-prefix {
  display: inline-flex;
  align-items: center;
  color: #76591b;
  padding: 0 9px;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.workforce-settings-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.workforce-settings-note-grid span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 10px;
}

.workforce-settings-toggle {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.workforce-settings-toggle input {
  position: absolute;
  opacity: 0;
}

.workforce-settings-toggle > span {
  display: grid;
  gap: 2px;
}

.workforce-settings-toggle strong {
  font-size: 14px;
}

.workforce-settings-toggle small {
  color: var(--muted);
  font-size: 11px;
}

.workforce-settings-toggle i {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #d6dad8;
  transition: background 0.18s ease;
}

.workforce-settings-toggle i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(17, 17, 22, 0.2);
  content: "";
  transition: transform 0.18s ease;
}

.workforce-settings-toggle input:checked ~ i {
  background: #397657;
}

.workforce-settings-toggle input:checked ~ i::after {
  transform: translateX(20px);
}

.workforce-settings-toggle input:disabled ~ i {
  cursor: wait;
  opacity: 0.68;
}

.workforce-settings-role-list {
  display: grid;
  padding: 0 20px 20px;
}

.workforce-settings-role-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(180px, 1fr) minmax(150px, 220px) minmax(150px, 190px) auto;
  align-items: end;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.workforce-settings-role-row:last-child {
  border-bottom: 0;
}

.workforce-settings-role-copy {
  display: grid;
  min-width: 0;
  align-self: center;
  gap: 1px;
}

.workforce-settings-role-copy strong {
  font-size: 13px;
}

.workforce-settings-role-copy small {
  color: var(--muted);
  font-size: 9px;
}

.workforce-settings-holiday-list {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 16px;
}

.workforce-settings-holiday-recipients {
  display: grid;
  gap: 10px;
}

.workforce-settings-recipient-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f1f2f4;
  padding: 4px;
}

.workforce-settings-recipient-modes label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.workforce-settings-recipient-modes input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.workforce-settings-recipient-modes label > span {
  display: inline-flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 10px;
}

.workforce-settings-recipient-modes label > span svg {
  width: 14px;
  height: 14px;
}

.workforce-settings-recipient-modes input:checked + span {
  border-color: var(--line);
  background: white;
  box-shadow: 0 3px 10px rgba(20, 26, 23, 0.07);
  color: var(--ink);
}

.workforce-settings-holiday-target-panel {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.workforce-settings-holiday-target-panel[hidden] {
  display: none;
}

.workforce-settings-holiday-target-label {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.workforce-settings-holiday-target-panel > small {
  color: var(--muted);
  font-size: 9px;
}

.workforce-settings-holiday-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.workforce-settings-holiday-target-option,
.workforce-settings-holiday-employee-option {
  display: grid;
  min-width: 0;
  align-items: center;
  cursor: pointer;
}

.workforce-settings-holiday-target-option {
  grid-template-columns: 16px 30px minmax(0, 1fr);
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 10px;
}

.workforce-settings-holiday-target-option:has(input:checked) {
  border-color: #a9c9b6;
  background: #f3f8f5;
}

.workforce-settings-holiday-target-option input,
.workforce-settings-holiday-employee-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #4d7f63;
}

.workforce-settings-holiday-target-icon,
.workforce-settings-holiday-employee-avatar {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #f1f2f4;
  color: #67706c;
}

.workforce-settings-holiday-target-icon svg {
  width: 14px;
  height: 14px;
}

.workforce-settings-holiday-target-option > span:last-child,
.workforce-settings-holiday-employee-option > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workforce-settings-holiday-target-option strong,
.workforce-settings-holiday-employee-option strong,
.workforce-settings-holiday-target-option small,
.workforce-settings-holiday-employee-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-settings-holiday-target-option strong,
.workforce-settings-holiday-employee-option strong {
  font-size: 10px;
}

.workforce-settings-holiday-target-option small,
.workforce-settings-holiday-employee-option small {
  color: var(--muted);
  font-size: 8px;
}

.workforce-settings-holiday-search {
  position: relative;
  display: block;
}

.workforce-settings-holiday-search > span {
  position: absolute;
  top: 50%;
  left: 12px;
  display: inline-flex;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.workforce-settings-holiday-search svg {
  width: 14px;
  height: 14px;
}

.workforce-settings-holiday-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 0 12px 0 36px;
  font-size: 10px;
}

.workforce-settings-holiday-employee-list {
  display: grid;
  max-height: 252px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 0 10px;
}

.workforce-settings-holiday-employee-option {
  grid-template-columns: 16px 30px minmax(0, 1fr);
  gap: 9px;
  border-bottom: 1px solid var(--line);
  padding: 9px 2px;
}

.workforce-settings-holiday-employee-option[hidden] {
  display: none;
}

.workforce-settings-holiday-employee-option:last-child {
  border-bottom: 0;
}

.workforce-settings-holiday-employee-option:has(input:checked) .workforce-settings-holiday-employee-avatar {
  background: #eaf4ee;
  color: #3e7454;
}

.workforce-settings-holiday-employee-avatar {
  font-size: 10px;
  font-weight: 800;
}

.workforce-settings-holiday-search-empty {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  padding: 16px;
  text-align: center;
  font-size: 10px;
}

.workforce-settings-holiday-list > h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-size: 13px;
}

.workforce-settings-holiday-list > h3 span {
  display: inline-flex;
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef0f2;
  font-size: 10px;
}

.workforce-settings-holiday-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.workforce-settings-holiday-row:last-child {
  border-bottom: 0;
}

.workforce-settings-holiday-row time {
  display: grid;
  min-height: 48px;
  align-content: center;
  justify-items: center;
  border-radius: 7px;
  background: #f5f0e5;
  color: #7e651e;
}

.workforce-settings-holiday-row time strong {
  font-size: 18px;
  line-height: 1;
}

.workforce-settings-holiday-row time small {
  font-size: 8px;
}

.workforce-settings-holiday-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workforce-settings-holiday-row > div strong,
.workforce-settings-holiday-row > div small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-settings-holiday-row > div strong {
  font-size: 12px;
}

.workforce-settings-holiday-row > div small {
  color: var(--muted);
  font-size: 10px;
}

.workforce-settings-holiday-row > button {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--muted);
  cursor: pointer;
}

.workforce-settings-holiday-row > button:hover {
  border-color: #e0b8b1;
  background: #fff7f5;
  color: var(--coral);
}

.system-master-filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.system-master-filter-meta > span {
  color: #666b78;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.system-master-filter-meta > strong {
  color: var(--muted);
  font-size: 11px;
}

.system-master-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 0.42fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.system-master-filter-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.system-master-filter-field > span:first-child {
  color: #555a67;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.system-master-filter-control {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.system-master-filter-control > svg {
  position: absolute;
  left: 13px;
  z-index: 1;
  width: 16px;
  height: 16px;
  color: #6c7280;
  pointer-events: none;
}

.system-master-filter-control input,
.system-master-filter-control select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 38px;
  border: 1px solid #d9dde4;
  border-radius: 7px;
  background: #fff;
  color: #17181d;
  font: inherit;
  font-size: 12px;
}

.system-master-filter-control select {
  padding-right: 34px;
}

.system-master-filter-control input:focus,
.system-master-filter-control select:focus {
  border-color: #829a8a;
  outline: 2px solid rgba(83, 132, 100, 0.14);
  outline-offset: 1px;
}

.system-master-filter-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 24px;
  border: 1px dashed #d6dae1;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.system-master-filter-empty > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f1f3f4;
  color: #737986;
}

.system-master-filter-empty svg {
  width: 19px;
  height: 19px;
}

.system-master-filter-empty small {
  color: var(--muted);
}

.workforce-settings-empty {
  display: grid;
  min-height: 248px;
  align-content: center;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.workforce-settings-empty > span {
  margin-bottom: 6px;
  color: #868f8b;
}

.workforce-settings-empty strong {
  font-size: 14px;
}

.workforce-settings-empty small {
  color: var(--muted);
  font-size: 10px;
}

.workforce-payment-settings-form {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.workforce-settings-form.wide.workforce-payment-settings-form {
  margin: 20px;
}

.workforce-payment-policy-section {
  display: grid;
  min-width: 0;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 20px;
}

.workforce-payment-settings-form .workforce-payment-salary-section {
  margin: 0;
}

.workforce-payment-settings-form > .workforce-settings-effective {
  margin: 0;
}

.workforce-payment-salary-section {
  display: grid;
  min-width: 0;
  overflow: hidden;
  margin: 8px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.workforce-payment-salary-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.workforce-payment-salary-header h3,
.workforce-payment-salary-header p {
  margin: 0;
}

.workforce-payment-salary-header h3 {
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.25;
}

.workforce-payment-salary-header p {
  max-width: 760px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.workforce-payment-salary-scope {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7f8f8;
  padding: 0 11px;
  color: #59616b;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.workforce-payment-salary-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: #fafbfb;
}

.workforce-payment-salary-summary > span {
  display: grid;
  min-height: 72px;
  align-content: center;
  gap: 1px;
  padding: 12px 18px;
}

.workforce-payment-salary-summary > span + span {
  border-left: 1px solid var(--line);
}

.workforce-payment-salary-summary small,
.workforce-payment-salary-summary em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.workforce-payment-salary-summary strong {
  overflow: hidden;
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-payment-salary-search {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  margin: 14px 20px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fafbfb;
}

.workforce-payment-salary-search > span {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--muted);
}

.workforce-payment-salary-search input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}

.workforce-payment-salary-list {
  display: grid;
  margin: 0 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workforce-payment-salary-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(160px, 0.72fr) minmax(210px, 0.9fr) minmax(230px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
}

.workforce-payment-salary-row + .workforce-payment-salary-row {
  border-top: 1px solid #e8eaed;
}

.workforce-payment-salary-row.is-configured {
  box-shadow: inset 3px 0 0 #739d80;
}

.workforce-payment-salary-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  overflow: hidden;
  place-items: center;
  border-radius: 7px;
  background: #edf4ef;
  color: #466350;
  font-size: 12px;
  font-weight: 800;
}

.workforce-payment-salary-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workforce-payment-salary-person,
.workforce-payment-salary-rate,
.workforce-payment-salary-input {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workforce-payment-salary-person strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-payment-salary-person small,
.workforce-payment-salary-rate small,
.workforce-payment-salary-input > span:first-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.workforce-payment-salary-input .input-money {
  min-height: 40px;
}

.workforce-payment-salary-input input {
  min-height: 40px;
  font-size: 12px;
  font-weight: 700;
}

.workforce-payment-salary-rate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-left: 1px solid var(--line);
  padding-left: 12px;
}

.workforce-payment-salary-rate > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workforce-payment-salary-rate strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-payment-salary-pending {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #dfe5e1;
  border-radius: 999px;
  background: #f7faf8;
  color: #526b5a;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 780;
  white-space: nowrap;
}

.workforce-payment-salary-pending svg {
  width: 14px;
  height: 14px;
}

.workforce-payment-salary-empty {
  margin: 0 20px 20px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 20px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.workforce-rest-balance-section {
  display: grid;
  min-width: 0;
  overflow: hidden;
  margin: 0 20px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.workforce-rest-balance-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.workforce-rest-balance-header h3,
.workforce-rest-balance-header p {
  margin: 0;
}

.workforce-rest-balance-header h3 {
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.25;
}

.workforce-rest-balance-header p {
  max-width: 760px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.workforce-rest-balance-scope {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7f8f8;
  padding: 0 11px;
  color: #59616b;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.workforce-rest-balance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: #fafbfb;
}

.workforce-rest-balance-summary > span {
  display: grid;
  min-height: 74px;
  align-content: center;
  gap: 1px;
  padding: 12px 20px;
}

.workforce-rest-balance-summary > span + span {
  border-left: 1px solid var(--line);
}

.workforce-rest-balance-summary small,
.workforce-rest-balance-summary em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.workforce-rest-balance-summary strong {
  font-size: 19px;
  line-height: 1.15;
}

.workforce-rest-balance-search {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  margin: 14px 20px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fafbfb;
}

.workforce-rest-balance-search > span {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--muted);
}

.workforce-rest-balance-search input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}

.workforce-rest-balance-list {
  display: grid;
  margin: 0 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workforce-rest-balance-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(190px, 0.8fr) minmax(350px, 1.45fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
}

.workforce-rest-balance-row + .workforce-rest-balance-row {
  border-top: 1px solid #e8eaed;
}

.workforce-rest-balance-row.is-configured {
  box-shadow: inset 3px 0 0 #739d80;
}

.workforce-rest-balance-avatar,
.workforce-rest-balance-dialog-person > span {
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: 7px;
  background: #edf4ef;
  color: #466350;
  font-weight: 800;
}

.workforce-rest-balance-avatar {
  width: 42px;
  height: 42px;
  font-size: 12px;
}

.workforce-rest-balance-avatar img,
.workforce-rest-balance-dialog-person > span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workforce-rest-balance-person {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workforce-rest-balance-person strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-rest-balance-person small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-rest-balance-facts {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}

.workforce-rest-balance-facts > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 3px 12px;
}

.workforce-rest-balance-facts small,
.workforce-rest-balance-pending small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.workforce-rest-balance-facts strong,
.workforce-rest-balance-pending strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-rest-balance-pending {
  display: grid;
  width: max-content;
  grid-template-columns: 30px auto;
  align-items: center;
  gap: 8px;
  color: #6e7480;
}

.workforce-rest-balance-pending > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: #f1f2f4;
}

.workforce-rest-balance-pending > div {
  display: grid;
  gap: 1px;
}

.workforce-rest-balance-action {
  min-width: 128px;
  min-height: 38px;
  padding: 0 13px;
  font-size: 10px;
}

.workforce-rest-balance-empty {
  margin: 0 20px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 20px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.workforce-rest-balance-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  background: #fafbfb;
  padding: 12px 20px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.workforce-rest-balance-note svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #5c7e67;
}

.workforce-rest-balance-dialog {
  width: min(760px, calc(100vw - 40px));
}

.workforce-rest-balance-dialog .system-master-dialog-body {
  padding: 0;
}

.workforce-rest-balance-form {
  display: grid;
  gap: 0;
}

.workforce-rest-balance-dialog-person {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.workforce-rest-balance-dialog-person > span {
  width: 48px;
  height: 48px;
}

.workforce-rest-balance-dialog-person > div {
  display: grid;
  gap: 2px;
}

.workforce-rest-balance-dialog-person small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
}

.workforce-rest-balance-dialog-person strong {
  font-size: 15px;
}

.workforce-rest-balance-dialog-person p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.workforce-rest-balance-dialog-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px 0;
}

.workforce-rest-balance-reason {
  padding: 16px 20px 20px;
}

.workforce-rest-balance-reason textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: 0;
  background: #fbfcfc;
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-size: 11px;
}

.workforce-rest-balance-reason textarea:focus {
  border-color: #7f9990;
  box-shadow: 0 0 0 3px rgba(72, 121, 96, 0.1);
}

.workforce-rest-balance-cutover-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 20px 0;
  border: 1px solid #d8e3db;
  border-radius: 7px;
  background: #f4f8f5;
  padding: 10px 12px;
  color: #53645a;
  font-size: 10px;
}

.workforce-rest-balance-cutover-preview svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #4d7c5d;
}

.workforce-rest-balance-current {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: #fafbfb;
}

.workforce-rest-balance-current > span {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
}

.workforce-rest-balance-current > span + span {
  border-left: 1px solid var(--line);
}

.workforce-rest-balance-current small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.workforce-rest-balance-current strong {
  font-size: 11px;
}

.workforce-rest-balance-history {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 16px 20px;
}

.workforce-rest-balance-history h3 {
  margin: 0;
  font-size: 12px;
}

.workforce-rest-balance-history > div {
  display: grid;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.workforce-rest-balance-history article {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 11px;
  padding: 10px 12px;
}

.workforce-rest-balance-history article + article {
  border-top: 1px solid var(--line);
}

.workforce-rest-balance-history article > span {
  align-self: start;
  border-radius: 999px;
  background: #eaf4ed;
  padding: 5px 7px;
  color: #457057;
  font-size: 9px;
  font-weight: 750;
  text-align: center;
}

.workforce-rest-balance-history article > span.is-negative {
  background: #f8ece9;
  color: #a25549;
}

.workforce-rest-balance-history article div {
  display: grid;
  gap: 2px;
}

.workforce-rest-balance-history strong,
.workforce-rest-balance-history p,
.workforce-rest-balance-history small {
  margin: 0;
  font-size: 9px;
}

.workforce-rest-balance-history p,
.workforce-rest-balance-history small {
  color: var(--muted);
}

.workforce-rest-balance-dialog-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 14px 20px;
}

.workforce-rest-balance-dialog-actions .button {
  width: 100%;
}

@media (max-width: 1180px) {
  .system-settings-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .branch-settings-list {
    grid-template-columns: 1fr;
  }

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

  .workforce-settings-summary-item:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .workforce-settings-summary-item:nth-child(4) {
    border-top: 1px solid var(--line);
  }

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

  .system-settings-summary-grid .workforce-settings-summary-item {
    border-left: 0;
  }

  .system-settings-summary-grid .workforce-settings-summary-item:nth-child(even) {
    border-left: 1px solid #dde0e8;
  }

  .system-settings-summary-grid .workforce-settings-summary-item:nth-child(n+3) {
    border-top: 1px solid #dde0e8;
  }

  .workforce-settings-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .workforce-settings-form-grid.two-columns,
  .workforce-settings-holiday-layout {
    grid-template-columns: 1fr;
  }

  .workforce-settings-fields.four-columns,
  .workforce-settings-fields.five-columns,
  .workforce-settings-fields.compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workforce-settings-role-row {
    grid-template-columns: 42px minmax(160px, 1fr) minmax(130px, 180px) minmax(130px, 170px) auto;
  }

  .workforce-payment-salary-row {
    grid-template-columns: 42px minmax(150px, 0.62fr) minmax(210px, 0.86fr) minmax(210px, 1fr) auto;
  }

  .workforce-rest-balance-row {
    grid-template-columns: 42px minmax(150px, 0.65fr) minmax(300px, 1.35fr) auto;
  }

}

@media (max-width: 760px) {
  .workforce-payment-salary-section {
    margin-top: 4px;
    border-color: #dfe4e8;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03), 0 8px 18px rgba(16, 24, 40, 0.035);
  }

  .workforce-payment-salary-header {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px 14px;
  }

  .workforce-payment-salary-header h3 {
    font-size: 16px;
  }

  .workforce-payment-salary-header p {
    font-size: 9px;
  }

  .workforce-payment-salary-scope {
    width: max-content;
    min-height: 30px;
    font-size: 8px;
  }

  .workforce-payment-salary-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workforce-payment-salary-summary > span {
    min-height: 62px;
    padding: 9px 10px;
  }

  .workforce-payment-salary-summary > span:nth-child(odd) {
    border-left: 0;
  }

  .workforce-payment-salary-summary > span:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }

  .workforce-payment-salary-summary strong {
    font-size: 15px;
  }

  .workforce-payment-salary-search {
    margin: 10px 12px 8px;
  }

  .workforce-payment-salary-list {
    margin: 0 12px 12px;
  }

  .workforce-payment-salary-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 11px;
  }

  .workforce-payment-salary-avatar {
    width: 38px;
    height: 38px;
  }

  .workforce-payment-salary-input,
  .workforce-payment-salary-rate,
  .workforce-payment-salary-pending {
    grid-column: 1 / -1;
  }

  .workforce-payment-salary-rate {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-top: 8px;
    padding-left: 0;
  }

  .workforce-payment-salary-pending {
    width: 100%;
    min-height: 28px;
    justify-content: flex-start;
    padding: 0 9px;
    white-space: normal;
  }

  .workforce-payment-salary-empty {
    margin: 0 12px 12px;
  }

  .workforce-rest-balance-section {
    margin: 0 10px 10px;
    border-color: #dfe4e8;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03), 0 8px 18px rgba(16, 24, 40, 0.035);
  }

  .workforce-rest-balance-header {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px 14px;
  }

  .workforce-rest-balance-header h3 {
    font-size: 16px;
  }

  .workforce-rest-balance-header p {
    font-size: 9px;
  }

  .workforce-rest-balance-scope {
    width: max-content;
    min-height: 30px;
    font-size: 8px;
  }

  .workforce-rest-balance-summary > span {
    min-height: 62px;
    padding: 9px 10px;
  }

  .workforce-rest-balance-summary strong {
    font-size: 16px;
  }

  .workforce-rest-balance-search {
    margin: 10px 12px 8px;
  }

  .workforce-rest-balance-list {
    margin: 0 12px 12px;
  }

  .workforce-rest-balance-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 11px;
  }

  .workforce-rest-balance-avatar {
    width: 38px;
    height: 38px;
  }

  .workforce-rest-balance-facts,
  .workforce-rest-balance-pending {
    grid-column: 1 / -1;
  }

  .workforce-rest-balance-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-top: 8px;
  }

  .workforce-rest-balance-facts > span {
    padding: 2px 8px 2px 0;
  }

  .workforce-rest-balance-facts > span:last-child {
    grid-column: 1 / -1;
  }

  .workforce-rest-balance-action {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 0 10px;
  }

  .workforce-rest-balance-action svg {
    width: 14px;
    height: 14px;
  }

  .workforce-rest-balance-note {
    padding: 10px 12px;
    font-size: 8px;
  }

  .workforce-rest-balance-empty {
    margin: 0 12px;
  }

  .workforce-rest-balance-dialog {
    width: calc(100vw - 20px);
  }

  .workforce-rest-balance-dialog-person {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 14px;
  }

  .workforce-rest-balance-dialog-person > span {
    width: 40px;
    height: 40px;
  }

  .workforce-rest-balance-dialog-fields {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 14px 0;
  }

  .workforce-rest-balance-cutover-preview {
    margin: 10px 14px 0;
  }

  .workforce-rest-balance-reason,
  .workforce-rest-balance-history {
    padding: 14px;
  }

  .workforce-rest-balance-current {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workforce-rest-balance-current > span:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .workforce-rest-balance-current > span:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .workforce-rest-balance-dialog-actions {
    grid-template-columns: 1fr;
    padding: 12px 14px;
  }

  .system-master-filter-toolbar {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .system-settings-entry-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .system-control-tabs {
    margin-bottom: 0;
  }

  .system-settings-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
  }

  .system-settings-summary-grid .workforce-settings-summary-item {
    min-height: 98px;
    grid-template-columns: minmax(0, 1fr) 30px;
    grid-template-rows: auto auto auto;
    gap: 4px 8px;
    padding: 10px 10px 10px 12px;
  }

  .system-settings-summary-grid .workforce-settings-summary-item > span {
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .system-settings-summary-grid .workforce-settings-summary-item > span svg {
    width: 14px;
    height: 14px;
  }

  .system-settings-summary-grid .workforce-settings-summary-item strong {
    font-size: 21px;
  }

  .system-settings-summary-grid .workforce-settings-summary-item small,
  .system-settings-summary-grid .workforce-settings-summary-item em {
    font-size: 9px;
    line-height: 1.2;
  }

  .system-workforce-settings-entry {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 94px;
    gap: 9px;
    padding: 12px;
  }

  .system-settings-entry-icon {
    width: 34px;
    height: 34px;
  }

  .system-settings-entry-icon svg {
    width: 15px;
    height: 15px;
  }

  .system-workforce-settings-entry strong {
    font-size: 15px;
  }

  .system-workforce-settings-entry em {
    font-size: 10px;
  }

  .branch-settings {
    gap: 10px;
    margin-top: 10px;
  }

  .branch-settings-content {
    gap: 10px;
    padding: 10px;
  }

  .branch-settings-panel .workforce-settings-section-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .branch-settings-panel .workforce-settings-section-header > .button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    border-radius: 9px;
    padding: 0 14px;
    font-size: 11px;
  }

  .branch-settings-card-body {
    gap: 13px;
    padding: 14px;
  }

  .branch-settings-card-heading h3 {
    font-size: 18px;
  }

  .branch-settings-card-facts {
    gap: 6px;
  }

  .branch-settings-card-facts > div {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }

  .branch-settings-card-facts > div > span {
    width: 30px;
    height: 30px;
  }

  .branch-settings-dialog {
    width: calc(100vw - 20px);
  }

  .branch-settings-form-section {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 16px;
  }

  .branch-settings-form-heading {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
  }

  .branch-settings-form-heading > span {
    width: 38px;
    height: 38px;
  }

  .branch-settings-form-heading h3 {
    font-size: 16px;
  }

  .branch-settings-field-grid.identity,
  .branch-settings-field-grid.contact {
    grid-template-columns: 1fr;
  }

  .branch-settings-hours {
    min-width: 0;
  }

  .branch-settings-actions {
    display: grid;
    padding: 16px;
  }

  .branch-settings-form-feedback {
    margin: 0 16px;
  }

  .branch-settings-actions .button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    border-radius: 9px;
    font-size: 11px;
  }

  .branch-settings-action-buttons {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .branch-settings-action-buttons:has(.button-danger) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }

  .workforce-settings {
    gap: 10px;
    margin-top: 10px;
  }

  .workforce-settings-content {
    display: grid;
    gap: 10px;
  }

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

  .workforce-settings-summary-item {
    min-height: 82px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 11px;
  }

  .workforce-settings-summary-item > span {
    width: 32px;
    height: 32px;
  }

  .workforce-settings-summary-item > span svg {
    width: 15px;
    height: 15px;
  }

  .workforce-settings-summary-item strong {
    font-size: 15px;
  }

  .workforce-settings-summary-item small,
  .workforce-settings-summary-item em {
    font-size: 8px;
  }

  .workforce-settings-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .workforce-settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .workforce-settings-tabs button {
    min-height: 36px;
    flex: 0 0 auto;
    gap: 6px;
    padding: 0 11px;
    font-size: 10px;
  }

  .workforce-settings-panel {
    display: grid;
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .workforce-settings-section-header {
    min-height: 0;
    align-items: flex-start;
    gap: 10px;
    margin: 0 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03), 0 8px 18px rgba(16, 24, 40, 0.04);
  }

  .workforce-settings-section-header h2 {
    font-size: 19px;
  }

  .workforce-settings-section-header p {
    font-size: 10px;
  }

  .workforce-settings-source {
    min-height: 30px;
    padding: 0 8px;
    font-size: 9px;
  }

  .workforce-settings-source svg {
    display: none;
  }

  .workforce-settings-form-grid,
  .workforce-settings-holiday-layout {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 10px;
    background: transparent;
  }

  .workforce-settings-form,
  .workforce-settings-form.wide {
    gap: 14px;
    margin: 0 10px;
    border-color: #dfe4e8;
    border-radius: 10px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03), 0 8px 18px rgba(16, 24, 40, 0.04);
  }

  .workforce-settings-location-list {
    gap: 14px;
    margin: 0;
    padding: 0 10px;
    background: transparent;
  }

  .workforce-settings-form-grid .workforce-settings-form,
  .workforce-settings-holiday-layout .workforce-settings-form,
  .workforce-settings-location-list .workforce-settings-form {
    margin: 0;
  }

  .workforce-settings-form-grid .workforce-settings-form + .workforce-settings-form::before,
  .workforce-settings-holiday-layout .workforce-settings-form + .workforce-settings-form::before {
    content: none;
  }

  .workforce-settings-form.wide.workforce-payment-settings-form {
    gap: 14px;
    margin: 0 10px;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .workforce-payment-policy-section {
    gap: 14px;
    border-color: #dfe4e8;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03), 0 8px 18px rgba(16, 24, 40, 0.04);
  }

  .workforce-payment-settings-form .workforce-payment-salary-section,
  .workforce-payment-settings-form > .workforce-settings-effective {
    margin: 0;
  }

  .workforce-settings-form-title {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    border-bottom: 1px solid #edf0f2;
    padding-bottom: 12px;
  }

  .workforce-settings-form-title > span {
    width: 36px;
    height: 36px;
  }

  .workforce-settings-form-title h3 {
    font-size: 13px;
  }

  .workforce-settings-form-title p {
    font-size: 9px;
  }

  .workforce-settings-wfa-toolbar,
  .workforce-settings-wfa-list {
    grid-template-columns: 1fr;
  }

  .workforce-settings-wfa-active,
  .workforce-settings-wfa-picker {
    gap: 10px;
    border-color: #e1e7eb;
    background: #fbfcfd;
    padding: 12px;
  }

  .workforce-settings-wfa-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .workforce-settings-wfa-section-heading > div > span {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .workforce-settings-wfa-count {
    justify-self: start;
    padding: 6px 9px;
  }

  .workforce-settings-wfa-option {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
  }

  .workforce-settings-wfa-option-main {
    grid-template-columns: 16px 32px minmax(0, 1fr) 22px;
    gap: 7px;
    padding: 8px;
  }

  .workforce-settings-wfa-option.is-active .workforce-settings-wfa-option-main {
    grid-template-columns: 32px minmax(0, 1fr) 22px;
    padding-right: 0;
  }

  .workforce-settings-wfa-avatar {
    width: 32px;
    height: 32px;
  }

  .workforce-settings-wfa-remove {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }

  .workforce-settings-fields.two-columns,
  .workforce-settings-fields.three-columns,
  .workforce-settings-fields.four-columns,
  .workforce-settings-fields.five-columns,
  .workforce-settings-fields.compact-grid {
    grid-template-columns: 1fr;
  }

  .workforce-settings-check-grid {
    grid-template-columns: 1fr 1fr;
  }

  .workforce-settings-shift-time-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid #e8ecef;
    background: #fff;
    padding: 10px;
  }

  .workforce-settings-shift-time-name {
    grid-column: 1 / -1;
  }

  .workforce-settings-shift-time-row .workforce-settings-field:first-of-type {
    grid-column: 1 / 2;
  }

  .workforce-settings-shift-time-row .workforce-settings-field:last-of-type {
    grid-column: 2 / 3;
  }

  .workforce-settings-shift-time-separator {
    display: none;
  }

  .workforce-settings-shift-time-actions {
    flex-wrap: wrap;
    align-items: center;
  }

  .workforce-settings-shift-time-apply {
    width: max-content;
    margin-left: auto;
  }

  .workforce-settings-schedule-section {
    border: 1px solid #e3e8ed;
    border-radius: 10px;
    background: #fbfcfd;
    gap: 12px;
    padding: 12px;
  }

  [data-workforce-operational-shift-config] {
    gap: 14px;
  }

  .workforce-settings-shift-times {
    padding-bottom: 14px;
  }

  .workforce-settings-schedule-section-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }

  .workforce-settings-shift-count-control {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    padding: 11px;
  }

  .workforce-settings-shift-count-field {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
  }

  .workforce-settings-shift-count-apply {
    width: max-content;
    justify-self: end;
  }

  .workforce-settings-rest-fields {
    padding-left: 0;
  }

  .workforce-settings-weekdays {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .workforce-settings-effective,
  .workforce-settings-form-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    border: 1px solid #e3e8ed;
    border-radius: 10px;
    background: #fbfcfd;
    padding: 12px;
  }

  .workforce-settings-effective label {
    width: 100%;
  }

  .workforce-settings-field input[type="date"],
  .workforce-settings-effective input[type="date"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    height: 46px;
    min-height: 46px;
    overflow: hidden;
    padding: 0 11px;
    line-height: 46px;
    text-align: left;
  }

  .workforce-settings-field input[type="date"]::-webkit-date-and-time-value,
  .workforce-settings-effective input[type="date"]::-webkit-date-and-time-value {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 46px;
    align-items: center;
    overflow: hidden;
    padding: 0;
    line-height: 46px;
    text-align: left;
  }

  .workforce-settings-field input[type="date"]::-webkit-calendar-picker-indicator,
  .workforce-settings-effective input[type="date"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0 0 0 8px;
    padding: 0;
  }

  .workforce-settings-effective-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .workforce-settings-version-note,
  .workforce-settings-form-actions > span {
    order: 2;
    justify-content: flex-start;
    font-size: 9px;
    line-height: 1.45;
  }

  .workforce-settings-effective .button,
  .workforce-settings-form-actions .button {
    width: 100%;
    min-width: 0;
  }

  .workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-effective {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-effective > label {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-effective-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 9px;
  }

  .workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-version-note,
  .workforce-settings-form[data-family="SCHEDULE"] .workforce-settings-save-button {
    grid-column: 1;
    grid-row: auto;
  }

  .workforce-settings-rule-band {
    display: grid;
    grid-template-columns: 38px auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }

  .workforce-settings-rule-band > strong:nth-of-type(2) {
    grid-column: 1 / -1;
  }

  .workforce-settings-rule-band label {
    min-width: 0;
  }

  .workforce-settings-rule-band label:nth-of-type(2) {
    grid-column: 1 / -1;
    width: 100%;
  }

  .workforce-settings-rule-band label:nth-of-type(2) input {
    min-width: 0;
  }

  .workforce-settings-note-grid {
    grid-template-columns: 1fr;
  }

  .workforce-settings-note-grid span {
    min-height: 0;
    padding: 11px 12px;
  }

  .workforce-settings-role-list {
    gap: 10px;
    padding: 0 10px;
  }

  .workforce-settings-role-row {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03), 0 8px 18px rgba(16, 24, 40, 0.04);
  }

  .workforce-settings-role-row:last-child {
    border-bottom: 1px solid #dfe4e8;
  }

  .workforce-settings-role-icon {
    width: 36px;
    height: 36px;
  }

  .workforce-settings-role-row label,
  .workforce-settings-role-row .button {
    grid-column: 1 / -1;
  }

  .workforce-settings-role-row .button {
    width: 100%;
  }

  .workforce-settings-holiday-list {
    border-radius: 10px;
    padding: 6px 12px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03), 0 8px 18px rgba(16, 24, 40, 0.04);
  }

  .workforce-settings-holiday-group-grid {
    grid-template-columns: 1fr;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    .workforce-settings-field,
    .workforce-settings-effective-field,
    .workforce-settings-effective,
    .workforce-settings-effective-actions {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    .workforce-settings-field input[type="date"],
    .workforce-settings-effective input[type="date"] {
      -webkit-appearance: none;
      appearance: none;
      display: block;
      box-sizing: border-box;
      inline-size: 100% !important;
      width: 100% !important;
      min-inline-size: 0 !important;
      min-width: 0 !important;
      max-inline-size: 100% !important;
      max-width: 100% !important;
      overflow: hidden;
      padding: 0 12px;
    }

    .workforce-settings-field input[type="date"]::-webkit-date-and-time-value,
    .workforce-settings-effective input[type="date"]::-webkit-date-and-time-value,
    .workforce-settings-field input[type="date"]::-webkit-datetime-edit,
    .workforce-settings-effective input[type="date"]::-webkit-datetime-edit,
    .workforce-settings-field input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    .workforce-settings-effective input[type="date"]::-webkit-datetime-edit-fields-wrapper {
      display: block;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      padding: 0;
      line-height: 46px;
      text-align: left;
    }

    .workforce-settings-field input[type="date"]::-webkit-calendar-picker-indicator,
    .workforce-settings-effective input[type="date"]::-webkit-calendar-picker-indicator {
      display: none;
    }
  }
}

@media (max-width: 390px) {
  .branch-settings-hours {
    grid-template-columns: 1fr;
  }

  .branch-settings-hours > span {
    display: none;
  }

  .system-workforce-settings-entry {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    min-height: 76px;
    padding: 12px;
  }

  .system-settings-entry-icon {
    width: 40px;
    height: 40px;
  }

  .system-workforce-settings-entry strong {
    font-size: 15px;
  }

  .system-workforce-settings-entry em {
    font-size: 11px;
  }

  .workforce-settings-summary-item em {
    display: none;
  }

  .workforce-settings-section-header {
    display: grid;
  }

  .workforce-settings-source {
    justify-self: start;
  }
}

/* resources/css/features/system/team-structure.css */
.team-structure {
  display: grid;
  gap: 16px;
}

.team-structure-summary {
  margin: 0;
}

.team-structure-summary .workforce-settings-summary-item {
  min-height: 88px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px;
}

.team-structure-summary .workforce-settings-summary-item > span {
  width: 36px;
  height: 36px;
}

.team-structure-summary .workforce-settings-summary-item strong {
  font-size: 18px;
}

.team-structure-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border: 1px solid #dde0e6;
  background: #f0f1f4;
  border-radius: 8px;
}

.team-structure-tabs button {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #656978;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.team-structure-tabs button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.team-structure-tabs button.active {
  background: #fff;
  color: #111218;
  box-shadow: 0 4px 14px rgba(25, 28, 35, .08);
}

.team-structure-panel {
  overflow: hidden;
  border: 1px solid #dfe2e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(28, 31, 38, .04);
}

.team-structure-panel-header {
  margin: 0;
  min-height: 92px;
  gap: 16px;
  padding: 18px 22px;
}

.team-structure-panel-header h2 {
  font-size: 21px;
}

.team-structure-list {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  background: #f7f8fa;
}

.team-structure-row {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid #dde1e7;
  border-left: 4px solid #c7cbd3;
  border-radius: 7px;
  background: #fff;
}

.team-structure-row:hover {
  border-color: #c8cdd5;
  border-left-color: #69937a;
}

.role-row {
  grid-template-columns: 48px minmax(250px, 1.05fr) minmax(560px, 1.95fr) auto;
}

.type-row {
  grid-template-columns: 48px minmax(240px, 1.4fr) minmax(290px, 1fr) auto;
}

.assignment-row {
  grid-template-columns: 50px minmax(210px, 1fr) minmax(330px, 1.5fr) auto;
}

.profile-row {
  grid-template-columns: 48px minmax(220px, 1.15fr) minmax(360px, 1.35fr) auto;
}

.team-structure-row-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eff2f1;
  color: #5c6b64;
}

.team-structure-row-icon svg {
  width: 21px;
  height: 21px;
}

.team-structure-row-icon.tone-operational {
  background: #edf6f0;
  color: #4d8462;
}

.team-structure-row-icon.tone-central {
  background: #eef0ff;
  color: #646ed7;
}

.team-structure-row-icon.tone-system {
  background: #f2f2f4;
  color: #666a75;
}

.team-structure-row-icon.tone-profile {
  background: #edf4ef;
  color: #4e795d;
}

.team-structure-row-main {
  min-width: 0;
}

.team-structure-row-main > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-structure-row-main h3,
.team-structure-scope-card h3,
.team-assignment-person h3 {
  margin: 0;
  color: #111218;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
}

.team-structure-row-main p {
  margin: 3px 0 0;
  color: #6d7180;
  font-size: 13px;
  line-height: 1.45;
}

.team-structure-lock,
.team-structure-managed-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #696d78;
  font-size: 12px;
  font-weight: 700;
}

.team-structure-lock svg,
.team-structure-managed-note svg {
  width: 14px;
  height: 14px;
}

.team-structure-row-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, .8fr) minmax(210px, 1.45fr) minmax(52px, .35fr);
  gap: 10px;
}

.team-profile-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(100px, .65fr);
  gap: 10px;
}

.team-profile-summary > span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  padding-left: 12px;
  border-left: 1px solid #e3e5e9;
}

.team-profile-summary small {
  color: #737786;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.team-profile-summary strong {
  overflow: hidden;
  color: #292c35;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-structure-row-meta > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-left: 12px;
  border-left: 1px solid #e3e5e9;
}

.team-structure-row-meta small,
.team-structure-type-contract small,
.team-assignment-person small {
  color: #737786;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.team-structure-row-meta strong {
  color: #292c35;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

.team-structure-edit {
  min-width: 100px;
  min-height: 40px;
  justify-content: center;
}

.team-structure-type-contract {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-left: 1px solid #e2e5e9;
}

.team-structure-type-contract > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #333741;
}

.team-structure-type-contract svg {
  width: 18px;
  height: 18px;
  color: #6d7280;
}

.team-structure-scope-note,
.team-structure-assignment-guide,
.team-structure-access-guide {
  margin: 14px 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  font-size: 13px;
  border: 1px solid #dfe4e1;
  border-radius: 7px;
  background: #f5f8f6;
  color: #59635e;
}

.team-structure-access-guide {
  margin: 14px 16px 0;
  border: 1px solid #d9e3dc;
  border-radius: 7px;
  background: #f7faf8;
  color: #56635b;
}

.team-structure-access-guide svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #557a62;
}

.team-structure-access-guide > div {
  display: grid;
  gap: 2px;
}

.team-structure-access-guide small {
  color: #707780;
}

.team-structure-scope-note svg,
.team-structure-assignment-guide > span svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.team-structure-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px 16px;
}

.team-structure-scope-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #dfe2e7;
  border-radius: 7px;
  background: #fff;
}

.team-structure-scope-card > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf5f0;
  color: #4f8062;
}

.team-structure-scope-card > span svg {
  width: 21px;
  height: 21px;
}

.team-structure-scope-card small {
  color: #727684;
  font-size: 12px;
  font-weight: 800;
}

.team-structure-scope-card p {
  margin: 5px 0 0;
  color: #6e7280;
}

.team-structure-scope-card > a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #dfe2e7;
  border-radius: 7px;
  color: #555a66;
}

.team-structure-assignment-guide {
  align-items: flex-start;
}

.team-structure-assignment-guide > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #e8f2ec;
  color: #4d7f60;
}

.team-structure-assignment-guide > div {
  display: grid;
  gap: 3px;
}

.team-structure-assignment-guide small {
  color: #6e7280;
}

.team-structure-assignment-filters {
  display: grid;
  gap: 8px;
  margin: 12px 16px 0;
}

.team-structure-assignment-filters + .assignment-list {
  margin-top: 12px;
}

.team-structure-avatar {
  width: 50px;
  height: 50px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf5f0;
  color: #345944;
  font-size: 17px;
  font-weight: 800;
}

.team-structure-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-structure-role-chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-structure-role-chips > span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #dfe3e8;
  border-radius: 999px;
  background: #f6f7f8;
  color: #555a66;
  font-size: 12px;
  font-weight: 700;
}

.team-structure-role-chips > span svg {
  width: 16px;
  height: 16px;
}

.team-structure-role-chips .tone-operational {
  border-color: #cfe2d6;
  background: #eef7f1;
  color: #48775a;
}

.team-structure-role-chips .tone-central {
  border-color: #d8dbf5;
  background: #f1f2fc;
  color: #5e65ad;
}

.team-structure-empty {
  grid-column: 1 / -1;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px dashed #d8dce2;
  border-radius: 7px;
  background: #fff;
  color: #737784;
  text-align: center;
}

.team-structure-empty > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f0f2f3;
  color: #7c8189;
}

.team-structure-empty strong {
  color: #20232a;
  font-size: 16px;
}

.team-structure-dialog {
  width: min(920px, calc(100vw - 40px));
}

.team-structure-dialog.compact {
  width: min(680px, calc(100vw - 40px));
}

.team-structure-dialog.assignment-dialog {
  width: min(880px, calc(100vw - 40px));
}

.team-structure-dialog.access-profile-dialog {
  width: min(980px, calc(100vw - 40px));
}

.team-structure-dialog .system-master-dialog-body {
  padding: 0;
}

.team-structure-form {
  display: grid;
}

.team-structure-form-section {
  display: grid;
  gap: 15px;
  padding: 20px 22px;
  border-bottom: 1px solid #e1e4e8;
}

.team-structure-form-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.team-structure-form-heading > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf5f0;
  color: #4d7f60;
}

.team-structure-form-heading > span svg {
  width: 20px;
  height: 20px;
}

.team-structure-form-heading small,
.team-assignment-person small {
  display: block;
  margin-bottom: 3px;
  color: #6e7280;
  font-size: 11px;
  font-weight: 800;
}

.team-structure-form-heading h3 {
  margin: 0;
  color: #111218;
  font-size: 18px;
}

.team-structure-form-heading p {
  margin: 4px 0 0;
  color: #707482;
  font-size: 13px;
  line-height: 1.45;
}

.team-structure-form-heading.compact {
  grid-template-columns: 40px minmax(0, 1fr);
}

.team-structure-form-heading.compact > span {
  width: 40px;
  height: 40px;
}

.team-structure-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-structure-form-grid label,
.team-structure-access-field,
.team-assignment-editor-row > label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #424650;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.team-structure-form-grid .full {
  grid-column: 1 / -1;
}

.team-structure-form input,
.team-structure-form select,
.team-structure-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #d9dde4;
  border-radius: 7px;
  background: #fafbfc;
  color: #17191f;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.team-structure-form textarea {
  resize: vertical;
}

.team-structure-form input:focus,
.team-structure-form select:focus,
.team-structure-form textarea:focus {
  outline: 2px solid rgba(74, 126, 94, .16);
  border-color: #6f9a7d;
  background: #fff;
}

.team-structure-branch-picker,
.team-assignment-editor-row fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.team-structure-branch-picker legend,
.team-assignment-editor-row legend {
  margin-bottom: 8px;
  color: #41454f;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.team-structure-branch-picker > div,
.team-assignment-branch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.team-structure-branch-picker label,
.team-assignment-branch-grid label {
  min-width: 0;
  cursor: pointer;
}

.team-structure-branch-picker input,
.team-assignment-branch-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.team-structure-branch-picker label > span,
.team-assignment-branch-grid label > span {
  min-height: 56px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 9px 10px;
  border: 1px solid #dce0e5;
  border-radius: 7px;
  background: #fff;
}

.team-structure-branch-picker label > span > svg,
.team-assignment-branch-grid label > span > svg {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 7px;
  background: #f0f2f3;
  color: #697078;
}

.team-structure-branch-picker label small,
.team-assignment-branch-grid label small {
  color: #797d88;
  font-size: 11px;
}

.team-structure-branch-picker input:checked + span,
.team-assignment-branch-grid input:checked + span {
  border-color: #83aa91;
  background: #f0f7f2;
  box-shadow: inset 3px 0 #5b8f6e;
}

.team-structure-branch-picker input:focus-visible + span,
.team-assignment-branch-grid input:focus-visible + span {
  outline: 2px solid rgba(83, 132, 100, .25);
  outline-offset: 2px;
}

.team-structure-branch-picker > small,
.team-assignment-editor-row fieldset > small {
  display: block;
  margin-top: 10px;
  color: #747986;
  text-transform: none;
}

.team-structure-branch-picker:disabled {
  opacity: .65;
}

.team-role-profile-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.team-role-profile-picker legend {
  margin-bottom: 8px;
  color: #41454f;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.team-role-profile-picker > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.team-role-profile-picker label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.team-role-profile-picker input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}

.team-role-profile-picker label > span {
  min-height: 60px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 9px;
  padding: 10px;
  border: 1px solid #dce0e5;
  border-radius: 7px;
  background: #fff;
}

.team-role-profile-picker label svg {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 7px;
  background: #eff3f0;
  color: #587664;
}

.team-role-profile-picker label small,
.team-role-profile-picker > small {
  color: #767b86;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
}

.team-role-profile-picker input:checked + span {
  border-color: #83aa91;
  background: #f1f7f3;
  box-shadow: inset 3px 0 #5b8f6e;
}

.team-role-profile-picker input:focus-visible + span {
  outline: 2px solid rgba(83, 132, 100, .25);
  outline-offset: 2px;
}

.team-role-profile-picker > small {
  display: block;
  margin-top: 8px;
}

.team-access-capability-groups {
  display: block;
}

.team-access-capability-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid #dfe2e7;
  border-radius: 8px;
  background: #f0f1f4;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.team-access-capability-tabs::-webkit-scrollbar {
  display: none;
}

.team-access-capability-tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #666b77;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: center;
}

.team-access-capability-tabs button svg {
  width: 16px;
  height: 16px;
}

.team-access-capability-tabs button small {
  min-width: 31px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #e4e6ea;
  color: #5e636e;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.team-access-capability-tabs button.active {
  background: #fff;
  color: #17191f;
  box-shadow: 0 3px 10px rgba(25, 28, 35, .08);
}

.team-access-capability-tabs button.active small {
  background: #e8f1eb;
  color: #4d785b;
}

.team-access-capability-tabs button:focus-visible {
  outline: 2px solid rgba(83, 132, 100, .28);
  outline-offset: 1px;
}

.team-access-capability-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe2e7;
  border-radius: 7px;
  background: #fff;
}

.team-access-capability-group[hidden] {
  display: none;
}

.team-access-capability-group legend {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e3e6ea;
  background: #f7f8fa;
}

.team-access-capability-group legend > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 8px;
}

.team-access-capability-group legend > span svg {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 7px;
  background: #eaf2ed;
  color: #537961;
}

.team-access-capability-group legend small {
  color: #777c87;
  font-size: 10px;
  font-weight: 600;
}

.team-access-capability-group legend label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5e6470;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.team-access-capability-group legend input,
.team-access-capability-item input {
  width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 0;
  padding: 0;
  accent-color: #507b5f;
}

.team-access-capability-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-access-capability-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 10px 12px;
  border-top: 1px solid #edf0f2;
  cursor: pointer;
}

.team-access-capability-item:first-child {
  border-top: 0;
}

.team-access-capability-item:nth-child(2) {
  border-top: 0;
}

.team-access-capability-item:nth-child(even) {
  border-left: 1px solid #edf0f2;
}

.team-access-capability-item:only-child {
  grid-column: 1 / -1;
}

.team-access-capability-item:hover {
  background: #fafcfb;
}

.team-access-capability-item > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.team-access-capability-item strong {
  color: #24272e;
  font-size: 12px;
}

.team-access-capability-item small {
  color: #737985;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
}

.team-structure-behavior-note,
.team-assignment-no-scope {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #dfe4e1;
  border-radius: 7px;
  background: #f4f7f5;
  color: #59635e;
}

.team-structure-behavior-note > span {
  display: grid;
  gap: 3px;
}

.team-structure-behavior-note small {
  color: #71767f;
}

.team-structure-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 22px;
  background: #f7f8fa;
}

.team-structure-form-actions > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #727682;
  font-size: 12px;
}

.team-structure-form-actions > span svg {
  width: 18px;
  height: 18px;
}

.team-structure-form-actions > div {
  display: flex;
  gap: 10px;
}

.team-assignment-person {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid #e1e4e8;
  background: #f7faf8;
}

.team-assignment-person p {
  margin: 3px 0 0;
  color: #6f7380;
}

.team-assignment-rows {
  display: grid;
  gap: 10px;
}

.team-assignment-editor-row {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(340px, 1.2fr);
  gap: 12px;
  padding: 13px;
  border: 1px solid #dce0e5;
  border-radius: 7px;
  background: #fafbfc;
}

.team-assignment-row-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e3e6ea;
}

.team-assignment-row-head > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9f2ec;
  color: #4c7b5d;
  font-size: 12px;
  font-weight: 800;
}

.team-assignment-row-head button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #e0e3e8;
  border-radius: 7px;
  background: #fff;
  color: #9a5549;
  cursor: pointer;
}

.team-assignment-row-head button svg {
  width: 17px;
  height: 17px;
}

.team-assignment-add {
  justify-self: start;
}

@media (max-width: 1320px) {
  .role-row,
  .type-row,
  .assignment-row,
  .profile-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .team-structure-row-meta,
  .team-structure-type-contract,
  .team-structure-role-chips,
  .team-profile-summary {
    grid-column: 2 / -1;
  }

  .team-structure-edit,
  .team-structure-managed-note {
    grid-column: 3;
    grid-row: 1;
  }

  .team-structure-row-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .team-structure-type-contract {
    border-left: 0;
    border-top: 1px solid #e2e5e9;
  }
}

@media (max-width: 760px) {
  .team-structure {
    gap: 10px;
  }

  .team-structure-summary .workforce-settings-summary-item {
    min-height: 72px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
    padding: 9px;
  }

  .team-structure-summary .workforce-settings-summary-item > span {
    width: 30px;
    height: 30px;
  }

  .team-structure-summary .workforce-settings-summary-item strong {
    font-size: 14px;
  }

  .team-structure-tabs {
    display: flex;
    gap: 4px;
    padding: 5px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }

  .team-structure-tabs::-webkit-scrollbar {
    display: none;
  }

  .team-structure-tabs button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 7px 10px;
    font-size: 11px;
    white-space: nowrap;
    scroll-snap-align: center;
  }

  .team-structure-tabs button svg {
    width: 15px;
    height: 15px;
  }

  .team-structure-panel-header {
    align-items: flex-start;
  }

  .team-structure-panel-header .button {
    width: 100%;
  }

  .team-structure-panel-header {
    min-height: 0;
    padding: 14px;
  }

  .team-structure-panel-header h2 {
    font-size: 19px;
  }

  .team-structure-list,
  .team-structure-scope-grid {
    gap: 8px;
    padding: 10px;
  }

  .team-structure-row,
  .role-row,
  .type-row,
  .assignment-row,
  .profile-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
  }

  .team-structure-row-icon {
    width: 42px;
    height: 42px;
  }

  .team-structure-row-icon svg {
    width: 21px;
    height: 21px;
  }

  .team-structure-row-main h3 {
    font-size: 16px;
  }

  .team-structure-row-main p {
    font-size: 12px;
  }

  .team-structure-row-meta,
  .team-structure-type-contract,
  .team-structure-role-chips,
  .team-profile-summary,
  .team-structure-edit,
  .team-structure-managed-note {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .team-structure-row-meta {
    grid-template-columns: 1fr 1fr;
  }

  .team-profile-summary {
    grid-template-columns: 1fr 1fr;
  }

  .team-structure-edit {
    width: 100%;
  }

  .team-structure-scope-note,
  .team-structure-assignment-guide,
  .team-structure-access-guide {
    margin: 10px 10px 0;
    font-size: 12px;
  }

  .team-structure-assignment-filters {
    margin: 10px 10px 0;
  }

  .team-structure-assignment-filters + .assignment-list {
    margin-top: 8px;
  }

  .team-structure-scope-grid {
    grid-template-columns: 1fr;
  }

  .team-structure-scope-card {
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    gap: 10px;
    padding: 11px;
  }

  .team-structure-scope-card > span {
    width: 40px;
    height: 40px;
  }

  .team-structure-avatar {
    width: 42px;
    height: 42px;
  }

  .team-structure-dialog,
  .team-structure-dialog.compact,
  .team-structure-dialog.assignment-dialog,
  .team-structure-dialog.access-profile-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .team-structure-form-section,
  .team-assignment-person {
    padding: 14px;
  }

  .team-structure-form-heading {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .team-structure-form-heading > span {
    width: 38px;
    height: 38px;
  }

  .team-structure-form-heading h3 {
    font-size: 16px;
  }

  .team-structure-form-heading p {
    font-size: 13px;
  }

  .team-structure-form-grid,
  .team-structure-branch-picker > div,
  .team-role-profile-picker > div,
  .team-assignment-editor-row,
  .team-assignment-branch-grid {
    grid-template-columns: 1fr;
  }

  .team-access-capability-tabs {
    margin-inline: -2px;
  }

  .team-access-capability-group > div {
    grid-template-columns: 1fr;
  }

  .team-access-capability-item:nth-child(2) {
    border-top: 1px solid #edf0f2;
  }

  .team-access-capability-item:nth-child(even) {
    border-left: 0;
  }

  .team-structure-form-actions {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px;
  }

  .team-structure-form-actions > div {
    display: grid;
  }

  .team-structure-form-actions .button {
    width: 100%;
  }

  .team-assignment-row-head {
    grid-column: 1;
  }
}

/* resources/css/features/system/system-users.css */
.user-settings {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.user-settings-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.user-settings-content {
  display: grid;
  gap: 22px;
  padding: 20px;
}

.user-settings-form {
  display: grid;
  min-width: 0;
  gap: 0;
  background: #fff;
}

.user-settings-dialog {
  width: min(1080px, calc(100vw - 40px));
}

.user-settings-dialog .system-master-dialog-body {
  padding: 0;
}

.user-settings-form-section {
  display: grid;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 22px 24px;
}

.user-settings-form-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.user-settings-assignment,
.user-settings-contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.user-settings-form-heading > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  background: #edf5ef;
  color: #4f7c5d;
}

.user-settings-account-section .user-settings-form-heading > span {
  background: #eef1fb;
  color: #596ccc;
}

.user-settings-profile-section .user-settings-form-heading > span {
  background: #f1f3f4;
  color: #626a73;
}

.user-settings-salary-section .user-settings-form-heading > span {
  background: #fbf3dd;
  color: #98721d;
}

.user-settings-form-heading svg {
  width: 19px;
  height: 19px;
}

.user-settings-form-heading div,
.user-settings-assignment div,
.user-settings-contact div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.user-settings-form-heading small,
.user-settings-form-heading h3,
.user-settings-form-heading p,
.user-settings-assignment strong,
.user-settings-assignment small,
.user-settings-contact strong,
.user-settings-contact small {
  margin: 0;
}

.user-settings-form-heading small {
  color: #6c7280;
  font-size: 9px;
  font-weight: 750;
}

.user-settings-form-heading h3 {
  font-size: 16px;
  line-height: 1.25;
}

.user-settings-form-heading p,
.user-settings-assignment small,
.user-settings-contact small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.user-settings-current-role-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.user-settings-current-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.user-settings-current-role {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.user-settings-current-role > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: #edf5ef;
  color: #4f7c5d;
}

.user-settings-current-role > span svg {
  width: 16px;
  height: 16px;
}

.user-settings-current-role > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.user-settings-current-role strong,
.user-settings-current-role small {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-settings-current-role small {
  color: var(--muted);
  font-size: 10px;
}

.user-settings-current-role.empty {
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--muted);
}

.user-settings-manage-role {
  justify-self: start;
  min-height: 40px;
}

.user-settings-form-grid {
  display: grid;
  gap: 12px;
}

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

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

.user-settings-address {
  grid-column: 1 / -1;
}

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

.user-settings-field {
  display: grid;
  align-content: start;
  align-self: start;
  min-width: 0;
  gap: 6px;
}

.user-settings-field[hidden] {
  display: none !important;
}

.user-settings-field > span:first-child,
.user-settings-branch-scope legend {
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.user-settings-field > span:first-child em {
  margin-left: 5px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  text-transform: none;
}

.user-settings-field input,
.user-settings-field select,
.user-settings-field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.user-settings-field input,
.user-settings-field select {
  height: 46px;
  padding: 0 12px;
}

.user-settings-field textarea {
  min-height: 86px;
  resize: vertical;
  padding: 11px 12px;
  line-height: 1.45;
}

.user-settings-password {
  position: relative;
  display: block;
}

.user-settings-password input {
  padding-right: 44px;
}

.user-settings-password button {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.user-settings-password button svg {
  width: 17px;
  height: 17px;
}

.user-settings-field-note {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.user-settings-onboarding-state {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #ead9a5;
  border-radius: 8px;
  background: #fffaf0;
  padding: 9px 11px;
  color: #785f1b;
}

.user-settings-onboarding-state.complete {
  border-color: #bfd8c8;
  background: #f2f8f4;
  color: #397254;
}

.user-settings-onboarding-state > svg {
  width: 18px;
  height: 18px;
  justify-self: center;
}

.user-settings-onboarding-state strong,
.user-settings-onboarding-state small {
  display: block;
}

.user-settings-onboarding-state strong {
  font-size: 11px;
}

.user-settings-onboarding-state small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.user-settings-branch-scope {
  display: grid;
  min-width: 0;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
}

.user-settings-branch-scope:disabled {
  opacity: 0.68;
}

.user-settings-branch-scope legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.user-settings-branch-copy {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f9f8;
  padding: 10px 12px;
}

.user-settings-branch-copy > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #edf5ef;
  color: #4f7c5d;
}

.user-settings-branch-copy > span svg {
  width: 17px;
  height: 17px;
}

.user-settings-branch-copy > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.user-settings-branch-copy strong,
.user-settings-branch-copy small {
  margin: 0;
}

.user-settings-branch-copy strong {
  font-size: 11px;
}

.user-settings-branch-copy small {
  color: var(--muted);
  font-size: 9px;
}

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

.user-settings-branch-grid label {
  min-width: 0;
  cursor: pointer;
}

.user-settings-branch-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.user-settings-branch-grid label > span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.user-settings-branch-grid label > span > svg {
  grid-row: 1 / 3;
  width: 18px;
  height: 18px;
  color: #727883;
}

.user-settings-branch-grid strong,
.user-settings-branch-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-settings-branch-grid strong {
  font-size: 12px;
}

.user-settings-branch-grid small {
  color: var(--muted);
  font-size: 9px;
}

.user-settings-branch-grid input:checked + span {
  border-color: #8fb09a;
  background: #f1f7f3;
  box-shadow: inset 3px 0 #4f8061;
}

.user-settings-branch-grid input:checked + span > svg {
  color: #4f8061;
}

.user-settings-profile-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.35fr);
  align-items: stretch;
  gap: 12px;
}

.user-settings-photo-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.user-settings-photo-stack {
  display: grid;
  gap: 12px;
}

.user-settings-photo-picker {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  cursor: pointer;
}

.user-settings-photo-picker > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.user-settings-photo-picker > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.user-settings-photo-picker small {
  color: var(--muted);
  font-size: 9px;
}

.user-settings-photo-picker .button {
  grid-column: 1 / -1;
  width: 100%;
  pointer-events: none;
  white-space: nowrap;
}

.user-settings-photo-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid #eccdc6;
  border-radius: 8px;
  background: #fff8f6;
  color: #9a493c;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.user-settings-photo-remove svg {
  width: 15px;
  height: 15px;
}

.user-settings-photo-preview {
  display: grid;
  width: 58px;
  height: 58px;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: #eff3f0;
  color: #5f7767;
}

.user-settings-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-settings-identity-preview {
  display: grid;
  width: 58px;
  height: 44px;
  overflow: hidden;
  place-items: center;
  border-radius: 6px;
  background: #f0f1f3;
  color: var(--muted);
}

.user-settings-identity-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-settings-identity-preview > span {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.user-settings-identity-preview svg {
  width: 18px;
  height: 18px;
}

.user-settings-identity-preview small {
  font-size: 7px;
}

.user-settings-custom-bank {
  grid-column: 1 / -1;
}

.user-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: sticky;
  bottom: 0;
  z-index: 2;
  min-width: 0;
  background: rgba(248, 249, 248, 0.98);
  padding: 14px 24px;
  box-shadow: 0 -10px 24px rgba(17, 17, 24, 0.04);
}

.user-settings-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.user-settings-actions > span svg {
  width: 15px;
  height: 15px;
}

.user-settings-actions.editing {
  justify-content: flex-end;
}

.user-settings-actions.editing .button-danger {
  margin-right: auto;
}

.user-settings-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-settings-action-buttons .button-primary {
  min-width: 160px;
}

.user-settings-action-buttons .button-danger {
  min-width: 140px;
}

.user-settings-list-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

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

.user-settings-row {
  display: grid;
  grid-template-columns: 46px minmax(150px, 0.75fr) minmax(230px, 1.25fr) minmax(170px, 0.75fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid #7f8a85;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(17, 17, 24, 0.035);
}

.user-settings-edit {
  min-width: 86px;
  min-height: 40px;
}

.user-settings-edit svg {
  width: 15px;
  height: 15px;
}

.user-settings-avatar,
.user-settings-avatar img,
.user-settings-avatar > span {
  width: 46px;
  height: 46px;
}

.user-settings-avatar {
  overflow: hidden;
  border-radius: 8px;
  background: #edf5ef;
}

.user-settings-avatar img {
  display: block;
  object-fit: cover;
}

.user-settings-avatar > span {
  display: grid;
  place-items: center;
  color: #365843;
  font-weight: 800;
}

.user-settings-person {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.user-settings-person strong,
.user-settings-person small,
.user-settings-assignment strong,
.user-settings-assignment small,
.user-settings-contact strong,
.user-settings-contact small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-settings-person small {
  color: var(--muted);
  font-size: 10px;
}

.user-settings-assignment > span,
.user-settings-contact > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: #f1f3f4;
  color: #666e77;
}

.user-settings-assignment svg,
.user-settings-contact svg {
  width: 16px;
  height: 16px;
}

.user-settings-assignment.multi {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 6px;
}

.user-settings-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.user-settings-role-chips > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid #dce5df;
  border-radius: 999px;
  background: #f5f8f6;
  color: #3f5f4a;
  font-size: 10px;
  font-weight: 700;
}

.user-settings-role-chips > span svg {
  width: 13px;
  height: 13px;
}

.user-settings-role-chips > span.empty {
  border-color: var(--line);
  background: #f4f5f6;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .user-settings-profile-layout {
    grid-template-columns: 1fr;
  }

  .user-settings-row {
    grid-template-columns: 46px minmax(140px, 0.7fr) minmax(210px, 1.3fr) auto;
  }

  .user-settings-contact {
    grid-column: 2 / -1;
  }
}

@media (max-width: 900px) {
  .user-settings-form-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .user-settings-profile-layout {
    grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
  }
}

@media (max-width: 760px) {
  .user-settings-list {
    gap: 10px;
  }

  .user-settings {
    gap: 10px;
    margin-top: 10px;
  }

  .user-settings-content {
    gap: 16px;
    padding: 10px;
  }

  .user-settings-panel .workforce-settings-section-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .user-settings-panel .workforce-settings-section-header > .button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    border-radius: 9px;
    padding: 0 14px;
    font-size: 11px;
  }

  .user-settings-form {
    gap: 0;
    padding: 0;
  }

  .user-settings-form-section {
    gap: 14px;
    padding: 16px 14px;
  }

  .user-settings-form-heading {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .user-settings-form-heading > span {
    width: 40px;
    height: 40px;
  }

  .user-settings-form-heading h3 {
    font-size: 15px;
  }

  .user-settings-form-grid.identity,
  .user-settings-form-grid.contact,
  .user-settings-form-grid.salary,
  .user-settings-branch-grid {
    grid-template-columns: 1fr;
  }

  .user-settings-current-roles {
    grid-template-columns: 1fr;
  }

  .user-settings-manage-role {
    width: 100%;
  }

  .user-settings-custom-bank {
    grid-column: auto;
  }

  .user-settings-profile-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .user-settings-photo-picker {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .user-settings-photo-preview {
    width: 48px;
    height: 48px;
  }

  .user-settings-identity-preview {
    width: 48px;
    height: 38px;
  }

  .user-settings-photo-picker .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .user-settings-actions {
    display: grid;
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .user-settings-actions.editing .button-danger {
    margin-right: 0;
  }

  .user-settings-actions > span {
    display: none;
  }

  .user-settings-actions .button {
    width: 100%;
  }

  .user-settings-action-buttons {
    display: grid;
    width: 100%;
  }

  .user-settings-actions.editing .user-settings-action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-settings-action-buttons .button-primary,
  .user-settings-action-buttons .button-danger {
    min-height: 42px;
    min-width: 0;
    justify-content: center;
    border-radius: 9px;
    padding-right: 9px;
    padding-left: 9px;
    font-size: 11px;
  }

  .user-settings-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .user-settings-avatar,
  .user-settings-avatar img,
  .user-settings-avatar > span {
    width: 42px;
    height: 42px;
  }

  .user-settings-assignment,
  .user-settings-contact {
    grid-column: 1 / -1;
  }

  .user-settings-edit {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* resources/css/features/profile/profile.css */
.profile-edit-button {
  flex: 0 0 auto;
  min-height: 38px;
}

.profile-edit-button svg,
.profile-edit-photo-actions svg,
.profile-edit-footer svg {
  width: 16px;
  height: 16px;
}

.profile-edit-dialog {
  width: min(920px, calc(100vw - 40px));
}

.profile-edit-dialog .system-master-dialog-body {
  padding: 0;
}

.profile-edit-form {
  display: grid;
}

.profile-edit-section {
  display: grid;
  border-top: 1px solid var(--line);
}

.profile-edit-section:first-child {
  border-top: 0;
}

.profile-edit-section-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 20px 0;
}

.profile-edit-section-heading > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #eef5f1;
  color: #386f53;
}

.profile-edit-section-heading svg {
  width: 19px;
  height: 19px;
}

.profile-edit-section-heading small,
.profile-edit-section-heading h2,
.profile-edit-section-heading p {
  display: block;
  margin: 0;
}

.profile-edit-section-heading small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.profile-edit-section-heading h2 {
  margin-top: 2px;
  font-size: 16px;
}

.profile-edit-section-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.profile-edit-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 20px 20px;
}

.profile-edit-media-picker {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  cursor: pointer;
}

.profile-edit-media-picker:hover {
  border-color: #9bb8a7;
  background: #fbfdfc;
}

.profile-edit-media-picker > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.profile-edit-media-picker .profile-edit-photo-preview {
  width: 68px;
  height: 68px;
}

.profile-edit-media-picker > span:nth-child(2) {
  min-width: 0;
}

.profile-edit-media-picker strong,
.profile-edit-media-picker small {
  display: block;
}

.profile-edit-media-picker strong {
  font-size: 13px;
}

.profile-edit-media-picker small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.profile-edit-media-picker .button {
  min-height: 34px;
  font-size: 10px;
  font-style: normal;
}

.profile-edit-identity-preview {
  display: grid;
  overflow: hidden;
  width: 68px;
  height: 50px;
  place-items: center;
  border-radius: 6px;
  background: #f1f2f4;
  color: var(--muted);
}

.profile-edit-identity-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-edit-identity-preview > span {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.profile-edit-identity-preview svg {
  width: 20px;
  height: 20px;
}

.profile-edit-identity-preview small {
  font-size: 7px;
}

.profile-edit-photo-section {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.profile-edit-photo-preview {
  display: grid;
  overflow: hidden;
  width: 84px;
  height: 84px;
  place-items: center;
  border-radius: 8px;
  background: #eef5f1;
  color: var(--accent-strong);
  font-size: 24px;
  font-weight: 800;
}

.profile-edit-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-edit-photo-copy strong,
.profile-edit-photo-copy p {
  display: block;
  margin: 0;
}

.profile-edit-photo-copy strong {
  font-size: 15px;
}

.profile-edit-photo-copy p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.profile-edit-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-edit-photo-actions .button {
  min-height: 36px;
}

.profile-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px 20px 20px;
}

.profile-edit-fields select {
  width: 100%;
}

.profile-bank-select-control {
  position: relative;
  display: block;
}

.profile-bank-select-control select {
  min-height: 48px;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 0 44px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.profile-bank-select-control select:hover {
  border-color: #b7bdc8;
  background: #fff;
}

.profile-bank-select-control select:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(80, 124, 94, 0.12);
}

.profile-bank-select-icon,
.profile-bank-select-chevron {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.profile-bank-select-icon {
  left: 14px;
  color: #397457;
}

.profile-bank-select-chevron {
  right: 13px;
}

.profile-bank-select-icon svg,
.profile-bank-select-chevron svg {
  width: 16px;
  height: 16px;
}

.profile-custom-bank {
  grid-column: 1 / -1;
}

.profile-custom-bank[hidden] {
  display: none !important;
}

.profile-password-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-password-fields .password-wrap input {
  width: 100%;
  padding-right: 42px;
}

.profile-edit-address {
  grid-column: 1 / -1;
}

.profile-edit-fields input,
.profile-edit-fields textarea {
  width: 100%;
}

.profile-instagram-input {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.profile-instagram-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(80, 124, 94, 0.12);
}

.profile-instagram-input b {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 14px;
}

.profile-instagram-input input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.profile-instagram-input input:focus {
  box-shadow: none;
}

.profile-edit-error {
  margin: 0 20px 14px;
  border: 1px solid #efc1b6;
  border-radius: 8px;
  background: #fff7f5;
  padding: 10px 12px;
  color: #9d4434;
  font-size: 12px;
}

.profile-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 16px 20px;
}

.profile-edit-footer > p {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.profile-edit-footer > div {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.profile-onboarding-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: #f4f5f7;
  color: var(--ink);
}

body.profile-onboarding-active {
  height: auto !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body.profile-onboarding-active #app,
body.profile-onboarding-active .profile-onboarding-page {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

.profile-onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0 max(24px, calc((100vw - 1040px) / 2));
}

.profile-onboarding-header .brand-mark {
  color: var(--ink);
}

.profile-onboarding-shell {
  width: min(960px, calc(100vw - 36px));
  margin: 34px auto 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(26, 29, 37, 0.07);
}

.profile-onboarding-intro {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 24px;
}

.profile-onboarding-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 8px;
  background: #e7f4ec;
  color: #2f7850;
}

.profile-onboarding-mark svg {
  width: 24px;
  height: 24px;
}

.profile-onboarding-intro small,
.profile-onboarding-intro h1,
.profile-onboarding-intro p {
  margin: 0;
}

.profile-onboarding-intro small {
  color: #397457;
  font-size: 10px;
  font-weight: 800;
}

.profile-onboarding-intro h1 {
  margin-top: 3px;
  font-size: 27px;
}

.profile-onboarding-intro p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.profile-onboarding-count {
  border: 1px solid #ead9a5;
  border-radius: 999px;
  background: #fff9e8;
  padding: 8px 11px;
  color: #795f18;
  font-size: 10px;
  font-weight: 700;
}

.profile-edit-form.onboarding .profile-edit-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.97);
}

.profile-onboarding-saving[hidden] {
  display: none;
}

.profile-onboarding-saving {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(19, 22, 27, 0.48);
  padding: 20px;
  backdrop-filter: blur(5px);
}

.profile-onboarding-saving-panel {
  display: grid;
  justify-items: center;
  width: min(390px, calc(100vw - 32px));
  border: 1px solid #dce3df;
  border-radius: 8px;
  background: #fff;
  padding: 30px 28px 26px;
  box-shadow: 0 24px 70px rgba(20, 24, 29, 0.2);
  text-align: center;
}

.profile-onboarding-saving-visual {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 50%;
  background: #e7f4ec;
  color: #2f7850;
}

.profile-onboarding-saving-visual::after {
  position: absolute;
  inset: -6px;
  border: 2px solid #cfe3d6;
  border-top-color: #397457;
  border-radius: 50%;
  content: "";
  animation: profile-saving-spin 900ms linear infinite;
}

.profile-onboarding-saving-visual svg {
  width: 27px;
  height: 27px;
}

.profile-onboarding-saving-panel small {
  margin-top: 20px;
  color: #397457;
  font-size: 10px;
  font-weight: 800;
}

.profile-onboarding-saving-panel h2 {
  margin: 5px 0 0;
  font-size: 23px;
}

.profile-onboarding-saving-panel p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.profile-onboarding-saving-progress {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 5px;
  margin-top: 22px;
  border-radius: 3px;
  background: #edf0ee;
}

.profile-onboarding-saving-progress i {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 42%;
  border-radius: inherit;
  background: #397457;
  animation: profile-saving-progress 1.25s ease-in-out infinite;
}

.profile-onboarding-saving-panel em {
  margin-top: 10px;
  color: #777d87;
  font-size: 10px;
  font-style: normal;
}

body.profile-onboarding-busy {
  overflow: hidden;
}

@keyframes profile-saving-spin {
  to { transform: rotate(360deg); }
}

@keyframes profile-saving-progress {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(85%); }
  100% { transform: translateX(240%); }
}

@media (max-width: 620px) {
  .profile-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .profile-edit-button {
    min-width: 40px;
    padding-inline: 11px;
  }

  .profile-edit-button.profile-identity-edit {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }

  .profile-edit-dialog {
    width: calc(100vw - 20px);
  }

  .profile-edit-section-heading {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 15px 15px 0;
  }

  .profile-edit-section-heading > span {
    width: 38px;
    height: 38px;
  }

  .profile-edit-media-grid {
    grid-template-columns: 1fr;
    padding: 13px 15px 15px;
  }

  .profile-edit-media-picker {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .profile-edit-media-picker .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .profile-edit-identity-preview {
    width: 58px;
    height: 44px;
  }

  .profile-edit-media-picker .profile-edit-photo-preview {
    width: 58px;
    height: 58px;
  }

  .profile-edit-photo-section {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
  }

  .profile-edit-photo-preview {
    width: 66px;
    height: 66px;
    font-size: 20px;
  }

  .profile-edit-photo-actions {
    margin-top: 9px;
  }

  .profile-edit-fields {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 15px;
  }

  .profile-custom-bank {
    grid-column: auto;
  }

  .profile-edit-address {
    grid-column: auto;
  }

  .profile-edit-error {
    margin: 0 15px 12px;
  }

  .profile-edit-footer {
    display: grid;
    gap: 12px;
    padding: 13px 15px 15px;
  }

  .profile-edit-footer > div {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .profile-edit-footer .button {
    width: 100%;
  }

  .profile-onboarding-header {
    min-height: 62px;
    padding: 0 14px;
  }

  .profile-onboarding-header .button {
    min-height: 36px;
  }

  .profile-onboarding-shell {
    width: calc(100vw - 20px);
    margin: 10px auto 26px;
  }

  .profile-edit-form.onboarding .profile-edit-footer {
    position: static;
    display: grid;
    gap: 10px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .profile-edit-form.onboarding .profile-edit-footer > p {
    max-width: none;
  }

  .profile-edit-form.onboarding .profile-edit-footer > div {
    display: block;
    width: 100%;
  }

  .profile-edit-form.onboarding .profile-edit-footer .button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding-inline: 18px;
    font-size: 12px;
    white-space: nowrap;
  }

  .profile-onboarding-intro {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px 15px;
  }

  .profile-onboarding-mark {
    width: 44px;
    height: 44px;
  }

  .profile-onboarding-count {
    grid-column: 1 / -1;
    width: max-content;
  }
}

/* resources/css/features/home/home.css */
/* Simplified Home */
.home-simple {
  display: grid;
  gap: 14px;
  max-width: 1120px;
  margin: 0 auto;
}

.home-loading-scaffold {
  min-height: clamp(360px, calc(100vh - 190px), 620px);
}

.home-welcome {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 20px 22px;
  box-shadow: 0 12px 30px rgba(17, 17, 22, 0.055);
}

.home-welcome-kicker {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.home-welcome h1 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}

.home-welcome p {
  max-width: 660px;
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.45;
}

.home-simple #homeAlert:empty {
  display: none;
}

.home-focus-panel .daily-activity,
.home-focus-panel .control-focus {
  margin: 0;
  border: 1px solid #17171c;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(17, 17, 22, 0.085);
}

.home-focus-panel .daily-activity {
  padding: 16px 18px;
}

.home-focus-panel .daily-activity-loading {
  min-height: 124px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-soft);
  font-weight: 750;
}

.home-focus-panel .daily-activity-head {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.home-focus-panel .daily-activity-row,
.home-focus-panel .daily-activity .daily-activity-state {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  border-radius: 10px;
  background: #f7f8f7;
  padding: 14px 16px;
}

.home-focus-panel .daily-activity-icon,
.home-focus-panel .daily-activity-state .daily-activity-icon,
.home-focus-panel .control-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #17171c;
  color: #ffffff;
}

.home-focus-panel .daily-activity h2,
.home-focus-panel .control-focus h2 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0;
}

.home-focus-panel .daily-activity p,
.home-focus-panel .control-focus p {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

.home-focus-panel .daily-activity-detail,
.home-focus-panel .daily-activity small {
  font-size: 11px;
}

.home-focus-panel .attendance-state-actions {
  margin-top: 12px;
}

.home-focus-panel .attendance-state-actions .button {
  min-height: 42px;
  font-weight: 850;
}

.home-focus-panel .control-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}

.home-focus-panel .control-focus > div:first-child {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.home-focus-panel .control-focus-action {
  min-width: 136px;
  border-radius: 10px;
  padding: 11px 14px;
}

.home-simple .portal-section {
  margin-top: 2px;
}

.home-simple .section-heading {
  margin: 0 0 8px;
}

.home-simple .section-heading h2,
.home-simple .section-heading > div h2 {
  font-size: 13px;
}

.home-simple .section-heading > div p {
  font-size: 11px;
}

.home-simple .task-preview-list,
.home-simple .inline-loading,
.home-simple .compact-empty {
  border-radius: 8px;
  box-shadow: none;
}

.home-simple .task-preview-row {
  min-height: 54px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 12px;
}

.home-simple .task-domain-mark {
  width: 30px;
  height: 30px;
}

.home-simple .task-preview-row strong {
  font-size: 12px;
}

.home-simple .task-preview-row small {
  font-size: 10px;
}

.home-operations {
  display: grid;
  gap: 9px;
}

.home-operations-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 2px;
}

.home-operations-head h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}

.home-operations-head p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.45;
}

.home-operations-period {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
}

.home-operations-head-actions {
  display: flex;
  align-items: center;
}

.home-operations-head-actions .icon-button {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #ffffff;
}

.home-operations-refresh.is-refreshing svg {
  animation: home-operations-spin 0.7s linear infinite;
}

@keyframes home-operations-spin {
  to {
    transform: rotate(360deg);
  }
}

.home-operations-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.home-operations-summary-item {
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 9px 13px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.home-operations-summary-item + .home-operations-summary-item {
  border-left: 1px solid var(--line);
}

.home-operations-summary-item:hover {
  background: #f7f8f8;
}

.home-operations-summary-item:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #111116;
  outline-offset: -2px;
}

.home-operations-summary-item.is-active {
  background: #f7f8f8;
  box-shadow: inset 0 -3px 0 #858c92;
}

.home-operations-summary-item.tone-working.is-active {
  background: #f0f8f3;
  box-shadow: inset 0 -3px 0 #4f946a;
}

.home-operations-summary-item.tone-attention.is-active {
  background: #fff7f1;
  box-shadow: inset 0 -3px 0 #c56d43;
}

.home-operations-summary-item.tone-complete.is-active {
  background: #f0f6fc;
  box-shadow: inset 0 -3px 0 #4387bd;
}

.home-operations-summary-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #eef0f2;
  color: #6d7280;
}

.home-operations-summary-item i svg {
  width: 15px;
  height: 15px;
}

.home-operations-summary-item strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.home-operations-summary-item small {
  overflow: hidden;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-operations-summary-item.tone-working i {
  background: #e2f1e7;
  color: #347655;
}

.home-operations-summary-item.tone-attention i {
  background: #fff2e9;
  color: #b45d38;
}

.home-operations-summary-item.tone-complete i {
  background: #e3eef9;
  color: #3476ad;
}

.home-operations-branches {
  display: grid;
  gap: 0;
  margin-top: -4px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #e7eaeb;
  box-shadow: 0 3px 10px rgba(17, 17, 22, 0.025);
}

.home-operations-branch {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.home-operations-branch + .home-operations-branch {
  border-top: 2px solid #e4e7e8;
}

.home-operations-branch-toggle {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  list-style: none;
  background: #ffffff;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.home-operations-branch-toggle::-webkit-details-marker {
  display: none;
}

.home-operations-branch-toggle:hover {
  background: #fafbfa;
}

.home-operations-branch-toggle:focus-visible {
  outline: 2px solid #111116;
  outline-offset: -2px;
}

.home-operations-branch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #f0f3f1;
  color: #58705f;
}

.home-operations-branch-toggle svg {
  width: 16px;
  height: 16px;
}

.home-operations-branch-title {
  min-width: 0;
}

.home-operations-branch-title h3,
.home-operations-branch-title p {
  margin: 0;
}

.home-operations-branch-title h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.home-operations-branch-title p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.home-operations-branch-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #7b8288;
  transition: transform 180ms ease;
}

.home-operations-branch[open] .home-operations-branch-chevron {
  transform: rotate(180deg);
}

.home-operations-branch-meta {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-content: end;
  column-gap: 4px;
  min-width: 92px;
}

.home-operations-branch-meta span {
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.1;
}

.home-operations-branch-meta strong {
  grid-row: 1 / 3;
  align-self: center;
  color: #5e666d;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.home-operations-branch-unit {
  align-self: end;
}

.home-operations-branch-status {
  align-self: start;
  white-space: nowrap;
}

.home-operations-branch-meta.tone-working strong {
  color: #3f7d59;
}

.home-operations-branch-meta.tone-attention strong {
  color: #ad5948;
}

.home-operations-branch-meta.tone-complete strong {
  color: #3977aa;
}

.home-operations-list {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border-top: 1px solid var(--line);
  background: #f8f9f9;
  animation: home-operations-list-reveal 160ms ease-out;
}

.home-operations-branch:not([open]) > .home-operations-list {
  display: none;
}

@keyframes home-operations-list-reveal {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-operations-row {
  display: grid;
  grid-template-columns: 40px minmax(155px, 0.8fr) minmax(270px, 1.6fr) 116px;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 11px 18px;
  border: 1px solid #e8ebec;
  border-left: 4px solid #aeb4b9;
  border-radius: 4px;
  background: #f3f4f4;
}

.home-operations-row.tone-waiting {
  border-left-color: #d0d4d7;
  background: #ffffff;
}

.home-operations-row.tone-working {
  border-left-color: #4f946a;
  background: #eef8f1;
}

.home-operations-row.tone-pending {
  border-left-color: #d59b29;
  background: #fff9e9;
}

.home-operations-row.tone-abnormal {
  border-left-color: #c95c50;
  background: #fff2f0;
}

.home-operations-row.tone-normal {
  border-left-color: #4387bd;
  background: #eef6fc;
}

.home-operations-filter-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 26px;
  color: var(--text-soft);
  font-size: 9px;
}

.home-operations-filter-state[hidden] {
  display: none;
}

.home-operations-filter-state button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 0;
  border-radius: 5px;
  background: #ffffff;
  color: #4f5961;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.home-operations-filter-state button:hover {
  background: #f3f5f5;
}

.home-operations-filter-state button:focus-visible {
  outline: 2px solid #111116;
  outline-offset: 1px;
}

.home-operations-filter-state svg {
  width: 12px;
  height: 12px;
}

.home-operations-avatar,
.home-operations-avatar .user-avatar-media {
  width: 38px;
  height: 38px;
}

.home-operations-avatar .user-avatar-media {
  border: 1px solid #e2e5e7;
  border-radius: 50%;
  background: #f1f3f2;
}

.home-operations-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.home-operations-person,
.home-operations-status > div {
  min-width: 0;
}

.home-operations-person strong,
.home-operations-person span,
.home-operations-status strong,
.home-operations-status p {
  display: block;
}

.home-operations-person strong,
.home-operations-status strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-operations-person span,
.home-operations-status p {
  margin: 2px 0 0;
  color: var(--text-soft);
  font-size: 9px;
  line-height: 1.4;
}

.home-operations-status {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.home-operations-status > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #f0f2f3;
  color: #707985;
}

.home-operations-status svg {
  width: 15px;
  height: 15px;
}

.home-operations-row.tone-waiting .home-operations-status > span {
  background: #f0f2f3;
  color: #707985;
}

.home-operations-row.tone-neutral .home-operations-status > span {
  background: #e6e8e9;
  color: #737b82;
}

.home-operations-row.tone-neutral .home-operations-person span,
.home-operations-row.tone-neutral .home-operations-person strong,
.home-operations-row.tone-neutral .home-operations-status strong,
.home-operations-row.tone-neutral .home-operations-status p,
.home-operations-row.tone-neutral .home-operations-clock small,
.home-operations-row.tone-neutral .home-operations-clock strong {
  color: #7d8389;
}

.home-operations-row.tone-neutral .home-operations-avatar {
  filter: grayscale(1);
  opacity: 0.52;
}

.home-operations-row.tone-abnormal .home-operations-status > span {
  background: #f8e5e2;
  color: #b45349;
}

.home-operations-row.tone-working .home-operations-status > span {
  background: #dceee2;
  color: #347655;
}

.home-operations-row.tone-pending .home-operations-status > span {
  background: #f9edc9;
  color: #a87617;
}

.home-operations-row.tone-normal .home-operations-status > span {
  background: #dcecf8;
  color: #3476ad;
}

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

.home-operations-clock span {
  min-width: 0;
}

.home-operations-clock small,
.home-operations-clock strong {
  display: block;
  text-align: right;
}

.home-operations-clock small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
}

.home-operations-clock strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
}

.home-operations-error,
.home-operations-empty {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 14px;
  border: 1px solid #e4e7e8;
  border-radius: 8px;
  background: #fafbfa;
}

.home-operations-error {
  border-color: #ebc8bd;
  background: #fff8f5;
}

.home-operations-error > span,
.home-operations-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef1ef;
  color: #647168;
}

.home-operations-error > span {
  background: #f9e9e4;
  color: #ad5a44;
}

.home-operations-error strong,
.home-operations-empty strong {
  color: var(--ink);
  font-size: 11px;
}

.home-operations-error p,
.home-operations-empty p {
  margin: 2px 0 0;
  color: var(--text-soft);
  font-size: 9px;
  line-height: 1.4;
}

.home-operations > .inline-loading {
  margin: 0;
}

.my-work-preview-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.my-work-preview-pagination > div {
  display: inline-flex;
  gap: 6px;
}

.my-work-preview-pagination .icon-button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.my-work-preview-pagination .icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

@media (max-width: 760px) {
  .home-simple {
    gap: 12px;
    max-width: none;
  }

  .home-welcome {
    padding: 18px 16px;
  }

  .home-welcome h1 {
    font-size: 24px;
  }

  .home-welcome p {
    font-size: 13px;
  }

  .home-focus-panel .daily-activity,
  .home-focus-panel .control-focus {
    padding: 15px;
  }

  .home-focus-panel .daily-activity-loading {
    min-height: 118px;
  }

  .home-focus-panel .daily-activity-row,
  .home-focus-panel .daily-activity .daily-activity-state {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
  }

  .home-focus-panel .daily-activity-icon,
  .home-focus-panel .daily-activity-state .daily-activity-icon,
  .home-focus-panel .control-icon {
    width: 36px;
    height: 36px;
  }

  .home-focus-panel .daily-activity h2,
  .home-focus-panel .control-focus h2 {
    font-size: 17px;
  }

  .home-focus-panel .control-focus,
  .home-focus-panel .control-focus > div:first-child {
    grid-template-columns: 1fr;
  }

  .home-focus-panel .control-focus {
    display: grid;
  }

  .home-focus-panel .control-focus-action {
    width: 100%;
  }

  .home-simple .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  .home-simple .section-heading .text-link {
    justify-self: end;
    text-align: right;
    white-space: normal;
  }

  .home-simple .my-work-preview-pagination {
    padding: 0 2px;
  }

  .home-operations-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 0 2px;
  }

  .home-operations-head h2 {
    font-size: 16px;
  }

  .home-operations-period {
    display: grid;
    gap: 1px;
  }

  .home-operations-period-separator {
    display: none;
  }

  .home-operations-period-description {
    display: none;
  }

  .home-operations-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-operations-summary-item {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px 7px;
    min-height: 56px;
    padding: 8px;
  }

  .home-operations-summary-item i {
    grid-row: 1 / 3;
    width: 24px;
    height: 24px;
  }

  .home-operations-summary-item strong {
    align-self: end;
    font-size: 16px;
  }

  .home-operations-summary-item small {
    align-self: start;
    font-size: 8px;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
  }

  .home-operations-branch-toggle {
    grid-template-columns: 28px minmax(0, 1fr) auto 20px;
    padding: 10px 12px;
  }

  .home-operations-branch-meta {
    min-width: 78px;
  }

  .home-operations-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px 11px;
    padding: 12px 14px;
  }

  .home-operations-person strong,
  .home-operations-status strong {
    white-space: normal;
  }

  .home-operations-status,
  .home-operations-clock {
    grid-column: 1 / -1;
  }

  .home-operations-status {
    padding-top: 9px;
    border-top: 1px solid #eceef0;
  }

  .home-operations-clock {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 41px;
  }

  .home-operations-clock small,
  .home-operations-clock strong {
    text-align: left;
  }

  .home-operations-error,
  .home-operations-empty,
  .home-operations > .inline-loading {
    margin: 0;
  }
}