/* Layout Stability (CLS Optimization) */
.material-symbols-outlined,
.app-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
  box-sizing: content-box;
  font-feature-settings: 'liga';
}

.fa, .fa-solid, .fa-regular, .fa-brands {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.125em;
  text-align: center;
}

/* Shared surfaces: page classes keep layout, this bridge owns visual contract. */
#app-content :where(
  .journal-card,
  .journal-summary-card,
  .manager-card,
  .metric-card,
  .analytics-card,
  .approval-stat-card,
  .approval-toolbar,
  .approval-filter-panel,
  .approval-month-card,
  .approval-detail-card,
  .auto-card,
  .auto-topbar,
  .create-hero-card,
  .create-manual-card,
  .overdue-panel,
  #tour-admin-filters,
  #tour-admin-log-table,
  .admin-log-detail-shell,
  .admin-list-footer,
  .bg-surface-container-lowest
) {
  color: var(--ds-text) !important;
  background: var(--ds-surface) !important;
  background-color: var(--ds-surface) !important;
  border-color: var(--ds-border) !important;
  box-shadow: var(--ds-shadow) !important;
  -webkit-backdrop-filter: var(--ds-backdrop) !important;
  backdrop-filter: var(--ds-backdrop) !important;
}



/* Shared controls: native inputs/selects and custom liquid selects use the same surface. */
#app-content :where(.journal-input, .toolbar-control, .manager-export-field, .overdue-select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-control-bg) !important;
  background-color: var(--ds-control-bg) !important;
  border-color: var(--ds-border-strong) !important;
  box-shadow: var(--ds-shadow-soft) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app-content :where(input, textarea)::placeholder {
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
  opacity: 1 !important;
}

#app-content :where(.journal-input, .toolbar-control, input:not(.fluent-select-search-input), select, textarea):focus,
#app-content :where(.journal-input, .toolbar-control, input:not(.fluent-select-search-input), select, textarea):focus-visible {
  border-color: var(--app-border-focus, var(--app-primary)) !important;
  outline: 2px solid var(--app-focus-ring, rgba(15,108,189,.22)) !important;
  outline-offset: 1px !important;
}

#app-content :where(.filter-control-wrap, .overdue-control, .filter-field) {
  position: relative !important;
  overflow: visible !important;
}
/* Shared tables/data grids. Column sizing remains page-owned. */
#app-content :where(.journal-table, .soft-table, .admin-log-list-table, .overdue-table, table) {
  color: var(--ds-text) !important;
  border-color: var(--ds-border) !important;
}

#app-content :where(.journal-table, .soft-table, .admin-log-list-table, .overdue-table, table) thead,
#app-content :where(.journal-table, .soft-table, .admin-log-list-table, .overdue-table, table) th {
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
  background: var(--ds-table-head) !important;
  background-color: var(--ds-table-head) !important;
  border-color: var(--ds-border) !important;
}

#app-content :where(.journal-table, .soft-table, .admin-log-list-table, .overdue-table, table) td {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-table-row) !important;
  background-color: var(--ds-table-row) !important;
  border-color: var(--ds-border) !important;
}

#app-content :where(.journal-table, .soft-table, .admin-log-list-table, .overdue-table, table) tbody tr:nth-child(even) td {
  background: var(--ds-table-row-alt) !important;
  background-color: var(--ds-table-row-alt) !important;
}

#app-content :where(.journal-table, .soft-table, .admin-log-list-table, .overdue-table, table) tbody tr:hover td {
  background: var(--ds-table-row-hover) !important;
  background-color: var(--ds-table-row-hover) !important;
}

/* Text utility classes from Tailwind/material templates should inherit theme tokens. */
#app-content :where(.ds-on-surface, .text-slate-950, .text-slate-900, .text-gray-900) {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
}

#app-content :where(.ds-on-surface-variant, .ds-outline, .text-slate-500, .text-slate-600, .text-gray-500, .text-gray-600) {
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
}

/* Buttons and links keep semantics; visuals come from shared action tokens. */
#app-content :where(.action-icon, .approval-soft-control, .manager-export-cancel, button:not([class*="unstyled"]), a[class*="bg-surface"]) {
  border-color: var(--ds-border-strong) !important;
}

#app-content :where(button, a, input, select, textarea):disabled,
#app-content :where([aria-disabled="true"]) {
  opacity: var(--opacity-disabled) !important;
  cursor: not-allowed !important;
}






#app-content :where(
  .journal-card,
  .manager-card,
  .approval-stat-card,
  .metric-card,
  .analytics-card,
  .auto-card,
  .create-hero-card,
  .create-manual-card,
  .overdue-panel,
  #tour-admin-filters,
  #tour-admin-log-table,
  .bg-surface-container-lowest
) {
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--ds-card-radius) !important;
}

#app-content :where(.journal-input, .toolbar-control, .manager-export-field, .overdue-select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select) {
  min-height: var(--ds-control-height) !important;
  height: var(--ds-control-height) !important;
  border-radius: var(--ds-button-radius) !important;
  padding-inline: var(--ds-control-padding-x) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

#app-content textarea {
  min-height: 72px !important;
  border-radius: var(--ds-button-radius) !important;
  padding: 8px var(--ds-control-padding-x) !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

#app-content :where(button:not([class*="unstyled"]):not(.toast-close):not(.fluent-select-search-clear):not(.auto-master-toggle):not(.auto-email-toggle):not(.create-primary-btn):not(.admin-system-btn):not(.sync-segment-btn):not(.sync-btn-block):not(.sync-chip-btn):not(.sync-btn-cancel):not(.sync-btn-confirm):not(.admin-users-primary-btn):not(.admin-users-secondary-btn):not(.admin-users-cancel-btn):not(.admin-users-danger-btn):not(.admin-users-filter-btn):not(.admin-users-icon-btn):not(.admin-users-page-btn):not(.previous-log-ai-btn):not(.btn-help-guide):not(.btn-filter-primary):not(.admin-table-tool-btn):not(.bulk-approve-btn):not(.bulk-reject-btn):not(.bulk-clear-btn):not(.fluent-select-trigger):not(.nkcv-date-picker-nav):not(.nkcv-date-picker-day), a[class*="bg-surface"], .toolbar-control, .approval-soft-control, .manager-export-cancel) {
  min-height: var(--ds-control-height) !important;
  border-radius: var(--ds-button-radius) !important;
  padding-inline: var(--ds-button-padding-x) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-secondary-bg) !important;
  background-color: var(--ds-secondary-bg) !important;
  border: 1px solid var(--ds-border-strong) !important;
  box-shadow: var(--ds-shadow-soft) !important;
}

#app-content :where(button:not([class*="unstyled"]):not(.toast-close):not(.fluent-select-search-clear):not(.auto-master-toggle):not(.auto-email-toggle):not(.create-primary-btn):not(.admin-system-btn):not(.sync-segment-btn):not(.sync-btn-block):not(.sync-chip-btn):not(.sync-btn-cancel):not(.sync-btn-confirm):not(.admin-users-primary-btn):not(.admin-users-secondary-btn):not(.admin-users-cancel-btn):not(.admin-users-danger-btn):not(.admin-users-filter-btn):not(.admin-users-icon-btn):not(.admin-users-page-btn):not(.previous-log-ai-btn):not(.btn-help-guide):not(.btn-filter-primary):not(.admin-table-tool-btn):not(.bulk-approve-btn):not(.bulk-reject-btn):not(.bulk-clear-btn):not(.fluent-select-trigger):not(.nkcv-date-picker-nav):not(.nkcv-date-picker-day), a[class*="bg-surface"], .toolbar-control, .approval-soft-control, .manager-export-cancel):hover {
  background: var(--ds-secondary-hover) !important;
  background-color: var(--ds-secondary-hover) !important;
}

#app-content :where(button:not([class*="unstyled"]):not(.toast-close):not(.fluent-select-search-clear):not(.auto-master-toggle):not(.auto-email-toggle):not(.create-primary-btn):not(.admin-system-btn):not(.sync-segment-btn):not(.sync-btn-block):not(.sync-chip-btn):not(.sync-btn-cancel):not(.sync-btn-confirm):not(.admin-users-primary-btn):not(.admin-users-secondary-btn):not(.admin-users-cancel-btn):not(.admin-users-danger-btn):not(.admin-users-filter-btn):not(.admin-users-icon-btn):not(.admin-users-page-btn):not(.previous-log-ai-btn):not(.btn-help-guide):not(.btn-filter-primary):not(.admin-table-tool-btn):not(.bulk-approve-btn):not(.bulk-reject-btn):not(.bulk-clear-btn):not(.fluent-select-trigger):not(.nkcv-date-picker-nav):not(.nkcv-date-picker-day), a[class*="bg-surface"], .toolbar-control, .approval-soft-control, .manager-export-cancel):active {
  background: var(--ds-secondary-pressed) !important;
  background-color: var(--ds-secondary-pressed) !important;
  transform: none !important;
}

#app-content :where(button[type="submit"], .fluent-btn-primary, .btn-primary, .manager-export-btn, .manager-export-submit, .overdue-export, .bg-primary, .bg-blue-600) {
  color: var(--ds-primary-fg) !important;
  -webkit-text-fill-color: var(--ds-primary-fg) !important;
  background: var(--ds-primary-bg) !important;
  background-color: var(--ds-primary-bg) !important;
  border-color: color-mix(in srgb, var(--ds-primary-bg) 72%, #000) !important;
  box-shadow: 0 4px 16px rgba(0, 120, 212, .18) !important;
}

#app-content :where(button[type="submit"], .fluent-btn-primary, .btn-primary, .manager-export-btn, .manager-export-submit, .overdue-export, .bg-primary, .bg-blue-600):hover {
  background: var(--ds-primary-hover) !important;
  background-color: var(--ds-primary-hover) !important;
}

#app-content :where(button[type="submit"], .fluent-btn-primary, .btn-primary, .manager-export-btn, .manager-export-submit, .overdue-export, .bg-primary, .bg-blue-600):active {
  background: var(--ds-primary-pressed) !important;
  background-color: var(--ds-primary-pressed) !important;
}

#app-content :where(.text-error, .text-red-600, .danger, .btn-danger, .fluent-btn-danger) {
  color: var(--app-danger, #d13438) !important;
  -webkit-text-fill-color: var(--app-danger, #d13438) !important;
}

#app-content :where(.btn-danger, .fluent-btn-danger, .bg-error, .bg-red-600) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--ds-danger-bg) !important;
  background-color: var(--ds-danger-bg) !important;
  border-color: var(--ds-danger-bg) !important;
}

#app-content :where(.btn-danger, .fluent-btn-danger, .bg-error, .bg-red-600):hover {
  background: var(--ds-danger-hover) !important;
  background-color: var(--ds-danger-hover) !important;
}
#app-content :where(input[type="checkbox"]) {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 4px !important;
  accent-color: var(--ds-primary-bg) !important;
}

#toast-container,
body #toast-container,
html[data-theme] body #toast-container {
  position: fixed !important;
  top: 76px !important;
  right: 24px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: var(--ds-toast-z) !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

#toast-container .toast-item,
body #toast-container .toast-item,
html[data-theme] body #toast-container .toast-item {
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 32px !important;
  gap: 12px !important;
  min-height: 56px !important;
  padding: 12px !important;
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-toast-bg) !important;
  background-color: var(--ds-toast-bg) !important;
  border: 1px solid var(--ds-toast-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10), 0 12px 34px rgba(15, 23, 42, .12) !important;
  -webkit-backdrop-filter: var(--ds-backdrop) !important;
  backdrop-filter: var(--ds-backdrop) !important;
  pointer-events: auto !important;
}

#toast-container .toast-icon-wrapper {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
}

#toast-container .toast-title {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

#toast-container .toast-message {
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

#toast-container .toast-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#toast-container .toast-close:hover {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-table-row-hover) !important;
}

@media (max-width: 640px) {
  #toast-container,
  body #toast-container,
  html[data-theme] body #toast-container {
    top: 72px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}
/* 2026-07-15: Theme-safe text and soft color normalization. */
:root,
html[data-theme="default"],
html[data-theme=""],
html:not([data-theme]) {
  --ds-surface: var(--app-surface-raised, #ffffff);
  --ds-surface-soft: var(--app-surface-soft, #f6f9fd);
  --ds-control-bg: var(--app-control-bg, #ffffff);
  --ds-control-hover: var(--app-control-hover, #fbfdff);
  --ds-table-head: var(--app-surface-soft, #f6f9fd);
  --ds-table-row: var(--app-surface-raised, #ffffff);
  --ds-table-row-alt: color-mix(in srgb, var(--app-surface-soft, #f6f9fd) 42%, transparent);
  --ds-table-row-hover: var(--app-surface-hover, rgba(15,108,189,.08));
  --ds-text: var(--app-text, #1f2937);
  --ds-muted: var(--app-text-secondary, #6b7280);
  --ds-border: var(--app-border-soft, #e6eaf2);
  --ds-border-strong: var(--app-border, #dbe4f0);
  --ds-shadow: var(--app-shadow-md, 0 4px 14px rgba(15,23,42,.07));
  --ds-shadow-soft: var(--app-shadow-sm, 0 1px 2px rgba(15,23,42,.04));
  --ds-radius-card: var(--app-radius-xl, 10px);
  --ds-radius-control: var(--app-radius-lg, 8px);
  --ds-backdrop: var(--app-backdrop-filter, none);
  --ds-control-height: 36px;
  --ds-control-padding-x: 12px;
  --ds-button-padding-x: 16px;
  --ds-button-radius: 8px;
  --ds-card-radius: 12px;
  --ds-primary-bg: #0078d4;
  --ds-primary-hover: #106ebe;
  --ds-primary-pressed: #005a9e;
  --ds-primary-fg: #ffffff;
  --ds-secondary-bg: #ffffff;
  --ds-secondary-hover: #f5f5f5;
  --ds-secondary-pressed: #ededed;
  --ds-danger-bg: #d13438;
  --ds-danger-hover: #b92b2f;
  --ds-danger-pressed: #a4262c;
  --ds-toast-z: 2147483600;
  --ds-toast-bg: #ffffff;
  --ds-toast-border: #d2d3d8;
  --ds-link: #0067b8;
  --ds-link-hover: #005a9e;
  --ds-success-text: #0f7b3a;
  --ds-success-bg: #e7f6e9;
  --ds-warning-text: #8a6100;
  --ds-warning-bg: #fff4ce;
  --ds-danger-text: #a4262c;
  --ds-danger-bg-soft: #fde7e9;
  --ds-info-text: #005a9e;
  --ds-info-bg: #e5f1fb;
  --ds-neutral-chip-bg: #f3f4f6;
}



html[data-theme="glass"] {
  --ds-surface: rgba(255, 255, 255, .62);
  --ds-surface-soft: rgba(234, 243, 255, .82);
  --ds-control-bg: rgba(255, 255, 255, .96);
  --ds-control-hover: #ffffff;
  --ds-table-head: rgba(234, 243, 255, .88);
  --ds-table-row: rgba(255, 255, 255, .50);
  --ds-table-row-alt: rgba(248, 251, 255, .62);
  --ds-table-row-hover: rgba(226, 241, 255, .78);
  --ds-text: #07142f;
  --ds-muted: #4b617f;
  --ds-border: rgba(83, 112, 151, .20);
  --ds-border-strong: rgba(83, 112, 151, .30);
  --ds-shadow: 0 22px 54px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255,255,255,.82);
  --ds-shadow-soft: 0 10px 24px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255,255,255,.90);
  --ds-backdrop: blur(24px) saturate(170%);
  --ds-secondary-bg: rgba(255, 255, 255, .96);
  --ds-secondary-hover: #ffffff;
  --ds-secondary-pressed: #eef6ff;
  --ds-toast-bg: rgba(255, 255, 255, .96);
  --ds-toast-border: rgba(83, 112, 151, .26);
  --ds-link: #0b5cad;
  --ds-link-hover: #084f98;
  --ds-success-text: #0f7a45;
  --ds-success-bg: rgba(224, 247, 232, .86);
  --ds-warning-text: #8a5a00;
  --ds-warning-bg: rgba(255, 244, 206, .88);
  --ds-danger-text: #b4232d;
  --ds-danger-bg-soft: rgba(253, 231, 233, .88);
  --ds-info-text: #0b5cad;
  --ds-info-bg: rgba(229, 241, 251, .88);
  --ds-neutral-chip-bg: rgba(243, 246, 250, .82);
}

#app-content :where(
  .text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700,
  .text-gray-950, .text-gray-900, .text-gray-800, .text-gray-700,
  .text-zinc-950, .text-zinc-900, .text-neutral-900,
  .ds-on-surface
),
#app-content :where([class~="text-[#071b4d]"], [class~="text-[#0f172a]"]) {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
}

#app-content :where(
  .text-slate-600, .text-slate-500, .text-slate-400,
  .text-gray-600, .text-gray-500, .text-gray-400,
  .text-zinc-600, .text-zinc-500, .text-neutral-600,
  .ds-on-surface-variant, .ds-outline
) {
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
}

#app-content :where(
  a.text-primary, .text-primary,
  .text-blue-900, .text-blue-800, .text-blue-700, .text-blue-600,
  .text-sky-900, .text-sky-800, .text-sky-700, .text-sky-600,
  .text-cyan-800, .text-cyan-700
),
#app-content :where([class~="text-[#0b5bd3]"], [class~="text-[#0B5FFF]"]) {
  color: var(--ds-link) !important;
  -webkit-text-fill-color: var(--ds-link) !important;
}

#app-content :where(a.text-primary, .text-primary, .text-blue-700, .text-blue-600):hover {
  color: var(--ds-link-hover) !important;
  -webkit-text-fill-color: var(--ds-link-hover) !important;
}

#app-content :where(.text-emerald-900, .text-emerald-800, .text-emerald-700, .text-emerald-600, .text-green-800, .text-green-700, .text-green-600) {
  color: var(--ds-success-text) !important;
  -webkit-text-fill-color: var(--ds-success-text) !important;
}

#app-content :where(.text-orange-900, .text-orange-800, .text-orange-700, .text-orange-600, .text-amber-900, .text-amber-800, .text-amber-700, .text-amber-600) {
  color: var(--ds-warning-text) !important;
  -webkit-text-fill-color: var(--ds-warning-text) !important;
}

#app-content :where(.text-red-900, .text-red-800, .text-red-700, .text-red-600, .text-rose-900, .text-rose-800, .text-rose-700, .text-rose-600, .text-error) {
  color: var(--ds-danger-text) !important;
  -webkit-text-fill-color: var(--ds-danger-text) !important;
}

#app-content :where(.bg-blue-50, .bg-blue-100, .bg-sky-50, .bg-sky-100, .bg-cyan-50, .bg-cyan-100) {
  background: var(--ds-info-bg) !important;
  background-color: var(--ds-info-bg) !important;
}

#app-content :where(.bg-emerald-50, .bg-emerald-100, .bg-green-50, .bg-green-100) {
  background: var(--ds-success-bg) !important;
  background-color: var(--ds-success-bg) !important;
}

#app-content :where(.bg-orange-50, .bg-orange-100, .bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100) {
  background: var(--ds-warning-bg) !important;
  background-color: var(--ds-warning-bg) !important;
}

#app-content :where(.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100) {
  background: var(--ds-danger-bg-soft) !important;
  background-color: var(--ds-danger-bg-soft) !important;
}

#app-content :where(.bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100, .bg-surface-container, .bg-surface-container-low, .bg-surface-container-high) {
  background: var(--ds-neutral-chip-bg) !important;
  background-color: var(--ds-neutral-chip-bg) !important;
}

#app-content :where(.status-pill, .overdue-pill, .missing-stat-chip, .missing-date-chip, .employee-count-pill, [class*="status-"]) {
  -webkit-text-fill-color: currentColor !important;
}
/* 2026-07-15: Employee dashboard component repair. */
#app-content .employee-dashboard-shell .employee-card {
  color: var(--ds-text) !important;
  background: var(--ds-surface) !important;
  background-color: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-card-radius) !important;
  box-shadow: var(--ds-shadow) !important;
  -webkit-backdrop-filter: var(--ds-backdrop) !important;
  backdrop-filter: var(--ds-backdrop) !important;
}

#app-content .employee-dashboard-shell .employee-card-title {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#app-content .employee-dashboard-shell .employee-range-select,
#app-content .employee-dashboard-shell #daily-range-select {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  flex: 0 0 112px !important;
}

#app-content .employee-dashboard-shell .employee-range-select,
#app-content .employee-dashboard-shell #daily-range-select {
  padding-inline: 12px 30px !important;
}
#app-content .employee-dashboard-shell .employee-chart-wrap {
  position: relative !important;
  min-height: 220px !important;
  border-radius: 12px !important;
  background: var(--ds-surface-soft) !important;
  background-color: var(--ds-surface-soft) !important;
  border: 1px solid var(--ds-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}

#app-content .employee-dashboard-shell .employee-chart-wrap.is-tall {
  min-height: 260px !important;
}

#app-content .employee-dashboard-shell .employee-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--ds-text) !important;
  background: transparent !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

#app-content .employee-dashboard-shell .employee-table thead,
#app-content .employee-dashboard-shell .employee-table tbody,
#app-content .employee-dashboard-shell .employee-table tr {
  background: transparent !important;
}

#app-content .employee-dashboard-shell .employee-table th {
  height: 36px !important;
  padding: 8px 12px !important;
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
  background: var(--ds-table-head) !important;
  background-color: var(--ds-table-head) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
  text-align: left !important;
}

#app-content .employee-dashboard-shell .employee-table th:first-child {
  border-top-left-radius: 8px !important;
}

#app-content .employee-dashboard-shell .employee-table th:last-child {
  border-top-right-radius: 8px !important;
}

#app-content .employee-dashboard-shell .employee-table td {
  height: 40px !important;
  padding: 8px 12px !important;
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-table-row) !important;
  background-color: var(--ds-table-row) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  vertical-align: middle !important;
}

#app-content .employee-dashboard-shell .employee-table tbody tr:nth-child(even) td {
  background: var(--ds-table-row-alt) !important;
  background-color: var(--ds-table-row-alt) !important;
}

#app-content .employee-dashboard-shell .employee-table tbody tr:hover td {
  background: var(--ds-table-row-hover) !important;
  background-color: var(--ds-table-row-hover) !important;
}

#app-content .employee-dashboard-shell .employee-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  color: var(--ds-info-text) !important;
  -webkit-text-fill-color: var(--ds-info-text) !important;
  background: var(--ds-info-bg) !important;
  background-color: var(--ds-info-bg) !important;
  border: 1px solid color-mix(in srgb, var(--ds-info-text) 16%, transparent) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#app-content .employee-dashboard-shell .employee-progress-track {
  display: block !important;
  height: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: var(--ds-surface-soft) !important;
  background-color: var(--ds-surface-soft) !important;
  border: 1px solid var(--ds-border) !important;
}

#app-content .employee-dashboard-shell .employee-progress-bar {
  height: 100% !important;
  min-width: 4px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}

#app-content .employee-dashboard-shell .employee-calendar-day {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

#app-content .employee-dashboard-shell .employee-calendar-day.has-log {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--app-success, #107c10) !important;
  background-color: var(--app-success, #107c10) !important;
  border-color: color-mix(in srgb, var(--app-success, #107c10) 70%, #000) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--app-success, #107c10) 24%, transparent) !important;
  font-weight: 700 !important;
}

#app-content .employee-dashboard-shell .employee-calendar-day.is-today {
  color: var(--ds-link) !important;
  -webkit-text-fill-color: var(--ds-link) !important;
  background: var(--ds-info-bg) !important;
  background-color: var(--ds-info-bg) !important;
  border-color: var(--ds-link) !important;
  font-weight: 700 !important;
}

#app-content .employee-dashboard-shell .employee-calendar-day.is-outside-month {
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
  opacity: .46 !important;
}

#app-content .employee-dashboard-shell .employee-link {
  color: var(--ds-link) !important;
  -webkit-text-fill-color: var(--ds-link) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#app-content .employee-dashboard-shell .employee-link:hover {
  color: var(--ds-link-hover) !important;
  -webkit-text-fill-color: var(--ds-link-hover) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* 2026-07-15: Employee dashboard charts are unframed inside cards. */
#app-content .employee-dashboard-shell .employee-chart-wrap,
#app-content .employee-dashboard-shell .employee-chart-wrap.is-tall {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

html[data-theme="glass"] #app-content .employee-dashboard-shell .employee-chart-wrap,
html[data-theme="glass"] #app-content .employee-dashboard-shell .employee-chart-wrap.is-tall {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* 2026-07-15: Employee log list toolbar single-border Fluent controls. */
#app-content .journal-page #tour-log-filters .journal-input {
  min-height: 36px !important;
  height: 36px !important;
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-control-bg) !important;
  background-color: var(--ds-control-bg) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app-content .journal-page #tour-log-filters .journal-input:focus-within {
  border-color: var(--ds-primary-bg, #0078d4) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary-bg, #0078d4) 18%, transparent) !important;
  outline: 0 !important;
}

#app-content .journal-page #tour-log-filters .journal-input input,
#app-content .journal-page #tour-log-filters .journal-input input[type="search"],
#app-content .journal-page #tour-log-filters .journal-input input[type="text"] {
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  padding: 0 !important;
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#app-content .journal-page #tour-log-filters .journal-input input:focus,
#app-content .journal-page #tour-log-filters .journal-input input:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#app-content .journal-page #tour-log-filters button[type="submit"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--ds-primary-bg, #0078d4) !important;
  background-color: var(--ds-primary-bg, #0078d4) !important;
  border-color: var(--ds-primary-bg, #0078d4) !important;
}

#app-content .journal-page #tour-log-filters a[href] {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-secondary-bg) !important;
  background-color: var(--ds-secondary-bg) !important;
  border: 1px solid var(--ds-border-strong) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
}
/* 2026-08-17: Microsoft Fluent 2 Dark Mode bridge for system shared components. */
html[data-theme="dark"],
.dark {
  --ds-surface: var(--colorNeutralBackground1, #242424);
  --ds-surface-soft: var(--colorNeutralBackground3, #1f1f1f);
  --ds-control-bg: var(--colorNeutralBackground3, #1f1f1f);
  --ds-control-hover: var(--colorNeutralBackground3Hover, #282828);
  --ds-table-head: var(--colorNeutralBackground3, #1f1f1f);
  --ds-table-row: var(--colorNeutralBackground1, #242424);
  --ds-table-row-alt: var(--colorNeutralBackground3, #1f1f1f);
  --ds-table-row-hover: var(--colorNeutralBackground1Hover, #2f2f2f);
  --ds-text: var(--colorNeutralForeground1, #f3f3f3);
  --ds-muted: var(--colorNeutralForeground2, #c7c7c7);
  --ds-border: var(--colorNeutralStroke1, rgba(255, 255, 255, 0.12));
  --ds-border-strong: var(--colorNeutralStroke1Hover, rgba(255, 255, 255, 0.20));
  --ds-shadow: var(--shadow4);
  --ds-shadow-soft: var(--shadow2);
  --ds-backdrop: none;
  --ds-secondary-bg: var(--colorNeutralBackground3, #1f1f1f);
  --ds-secondary-hover: var(--colorNeutralBackground3Hover, #282828);
  --ds-secondary-pressed: var(--colorNeutralBackground3Pressed, #303030);
  --ds-toast-bg: var(--colorNeutralBackground4, #2d2d2d);
  --ds-toast-border: var(--colorNeutralStroke1, rgba(255, 255, 255, 0.12));
  --ds-link: var(--colorBrandForeground1, #479ef5);
  --ds-link-hover: var(--colorBrandForeground2, #5ca9f6);
  --ds-success-text: var(--colorStatusSuccessForeground1, #54b054);
  --ds-success-bg: var(--colorStatusSuccessBackground1, rgba(16, 124, 16, 0.20));
  --ds-warning-text: var(--colorStatusWarningForeground1, #f3d37a);
  --ds-warning-bg: var(--colorStatusWarningBackground1, rgba(255, 185, 0, 0.18));
  --ds-danger-text: var(--colorStatusDangerForeground1, #f1707b);
  --ds-danger-bg-soft: var(--colorStatusDangerBackground1, rgba(216, 59, 1, 0.20));
  --ds-info-text: var(--colorStatusInfoForeground1, #479ef5);
  --ds-info-bg: var(--colorStatusInfoBackground1, rgba(71, 158, 245, 0.18));
  --ds-neutral-chip-bg: rgba(255, 255, 255, 0.08);
  --ds-subtle: var(--colorNeutralForeground3, #9e9e9e);
  --ds-primary-bg: var(--colorBrandBackground, #0f6cbd);
  --ds-primary-hover: var(--colorBrandBackgroundHover, #115ea3);
  --ds-primary-pressed: var(--colorBrandBackgroundPressed, #0f548c);
  --ds-primary-fg: #ffffff;
  --app-bg: var(--colorNeutralBackground2, #181818);
  --app-surface: var(--colorNeutralBackground1, #242424);
  --app-surface-raised: var(--colorNeutralBackground1, #242424);
  --app-surface-soft: var(--colorNeutralBackground3, #1f1f1f);
  --app-control-bg: var(--colorNeutralBackground3, #1f1f1f);
  --app-control-hover: var(--colorNeutralBackground3Hover, #282828);
  --app-border: var(--colorNeutralStroke1, rgba(255, 255, 255, 0.12));
  --app-border-soft: var(--colorNeutralStrokeSubtle, rgba(255, 255, 255, 0.08));
  --app-border-light: var(--colorNeutralStrokeSubtle, rgba(255, 255, 255, 0.08));
  --app-text: var(--colorNeutralForeground1, #f3f3f3);
  --app-text-secondary: var(--colorNeutralForeground2, #c7c7c7);
  --app-text-tertiary: var(--colorNeutralForeground3, #9e9e9e);
  --app-focus-ring: var(--focusRing);
}

html[data-theme="dark"] body,
html[data-theme="dark"] #app-main,
html[data-theme="dark"] #app-content {
  color: var(--ds-text) !important;
  background: var(--app-bg) !important;
  background-image: none !important;
}

html[data-theme="dark"] #app-content :where(
  .journal-card, .journal-summary-card, .manager-card, .employee-card,
  .director-card, .metric-card, .analytics-card, .approval-stat-card,
  .approval-toolbar, .approval-filter-panel, .approval-month-card,
  .approval-detail-card, .auto-card, .auto-topbar, .create-hero-card,
  .create-manual-card, .overdue-panel, #tour-admin-filters,
  #tour-admin-log-table, .admin-log-detail-shell, .admin-list-footer,
  .bg-white, .bg-surface, .bg-surface-container-lowest,
  .bg-surface-container-low, .bg-surface-container,
  .bg-surface-container-high, section[class*="bg-white"],
  div[class*="bg-white"]
) {
  color: var(--ds-text) !important;
  background: var(--ds-surface) !important;
  background-color: var(--ds-surface) !important;
  background-image: none !important;
  border-color: var(--ds-border) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme="dark"] #app-content :where(
  .bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100,
  .bg-zinc-50, .bg-neutral-50, thead, .soft-table thead,
  .journal-table thead, .admin-log-list-table thead
) {
  color: var(--ds-muted) !important;
  background: var(--ds-surface-soft) !important;
  background-color: var(--ds-surface-soft) !important;
  border-color: var(--ds-border) !important;
}

html[data-theme="dark"] #app-content :where(.journal-input, .toolbar-control, .manager-export-field, .overdue-select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  caret-color: var(--ds-primary-bg) !important;
  background: var(--ds-control-bg) !important;
  background-color: var(--ds-control-bg) !important;
  background-image: none !important;
  border: 1px solid var(--ds-border-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #app-content :where(input, textarea)::placeholder {
  color: var(--ds-subtle) !important;
  -webkit-text-fill-color: var(--ds-subtle) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #app-content :where(.journal-input, .toolbar-control, .manager-export-field, .overdue-select, input:not(.fluent-select-search-input), select, textarea):focus,
html[data-theme="dark"] #app-content :where(.journal-input, .toolbar-control, .manager-export-field, .overdue-select, input:not(.fluent-select-search-input), select, textarea):focus-visible,
html[data-theme="dark"] #app-content :where(.journal-input):focus-within {
  border-color: var(--ds-primary-bg) !important;
  outline: 2px solid var(--app-focus-ring) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}
html[data-theme="dark"] #app-content :where(
  button:not([class*="unstyled"]):not(.toast-close):not(.fluent-select-search-clear):not(.auto-master-toggle):not(.auto-email-toggle):not(.create-primary-btn):not(.admin-system-btn):not(.sync-segment-btn):not(.sync-btn-block):not(.sync-chip-btn):not(.sync-btn-cancel):not(.sync-btn-confirm):not(.admin-users-primary-btn):not(.admin-users-secondary-btn):not(.admin-users-cancel-btn):not(.admin-users-danger-btn):not(.admin-users-filter-btn):not(.admin-users-icon-btn):not(.admin-users-page-btn):not(.previous-log-ai-btn):not(.btn-help-guide):not(.btn-filter-primary):not(.admin-table-tool-btn):not(.bulk-approve-btn):not(.bulk-reject-btn):not(.bulk-clear-btn):not(.fluent-select-trigger):not(.nkcv-date-picker-nav):not(.nkcv-date-picker-day),
  a[class*="bg-surface"], .toolbar-control, .approval-soft-control,
  .manager-export-cancel, .journal-action-btn, .journal-info-btn,
  .journal-suggestion-btn, .journal-back-btn
) {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-secondary-bg) !important;
  background-color: var(--ds-secondary-bg) !important;
  border-color: var(--ds-border-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #app-content :where(
  button[type="submit"], .fluent-btn-primary, .btn-primary,
  .manager-export-btn, .manager-export-submit, .overdue-export,
  .bg-primary, .bg-blue-600, .bg-blue-700, #entry-submit-btn,
  .journal-action-btn.is-primary
) {
  color: var(--ds-primary-fg) !important;
  -webkit-text-fill-color: var(--ds-primary-fg) !important;
  background: var(--ds-primary-bg) !important;
  background-color: var(--ds-primary-bg) !important;
  border-color: var(--ds-primary-bg) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #app-content :where(
  button[type="submit"], .fluent-btn-primary, .btn-primary,
  .manager-export-btn, .manager-export-submit, .overdue-export,
  .bg-primary, .bg-blue-600, .bg-blue-700, #entry-submit-btn,
  .journal-action-btn.is-primary
):hover {
  background: var(--ds-primary-hover) !important;
  background-color: var(--ds-primary-hover) !important;
}

html[data-theme="dark"] #app-content :where(
  .text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700,
  .text-gray-950, .text-gray-900, .text-gray-800, .text-gray-700,
  .text-zinc-950, .text-zinc-900, .text-neutral-900,
  .text-blue-950, .text-blue-900, .ds-on-surface
) {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
}

html[data-theme="dark"] #app-content :where(
  .text-slate-600, .text-slate-500, .text-slate-400,
  .text-gray-600, .text-gray-500, .text-gray-400,
  .text-zinc-600, .text-zinc-500, .text-neutral-600,
  .ds-on-surface-variant, .ds-outline, .muted
) {
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
}

html[data-theme="dark"] #app-content :where(
  .soft-table, .journal-table, .admin-log-list-table, .overdue-table, table
) :where(th, td) {
  border-color: var(--ds-border) !important;
}

html[data-theme="dark"] #toast-container .toast-item {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-toast-bg) !important;
  background-color: var(--ds-toast-bg) !important;
  border-color: var(--ds-toast-border) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .34) !important;
}
/* 2026-07-15: Dark page-specific contrast repairs for employee dashboard/create pages. */
html[data-theme="dark"] #app-content :where(
  [class~="text-[#061734]"],
  [class~="text-[#07142f]"],
  [class~="text-[#071b4d]"],
  [class~="text-[#0f172a]"]
) {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
}

html[data-theme="dark"] #app-content .employee-dashboard-shell > section:first-child h1,
html[data-theme="dark"] #app-content .employee-dashboard-shell .employee-card p,
html[data-theme="dark"] #app-content .employee-dashboard-shell .employee-card span,
html[data-theme="dark"] #app-content .employee-dashboard-shell .employee-card div {
  border-color: var(--ds-border) !important;
}

html[data-theme="dark"] #app-content .employee-dashboard-shell > section:first-child h1,
html[data-theme="dark"] #app-content .employee-dashboard-shell .employee-card :where(.text-3xl, .font-black[class*="text-"]) {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
}

html[data-theme="dark"] #app-content .employee-dashboard-shell .employee-card :where(.text-sm, .text-xs, .text-slate-600, .text-slate-500) {
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
}

html[data-theme="dark"] #app-content .employee-dashboard-shell .employee-stat-icon {
  box-shadow: none !important;
}

html[data-theme="dark"] #app-content .employee-dashboard-shell .border-amber-200.bg-amber-50\/90,
html[data-theme="dark"] #app-content .employee-dashboard-shell section.employee-card[class*="bg-amber"] {
  background: rgba(245, 197, 66, .12) !important;
  background-color: rgba(245, 197, 66, .12) !important;
  border-color: rgba(245, 197, 66, .42) !important;
}

html[data-theme="dark"] #app-content .employee-dashboard-shell .text-amber-900,
html[data-theme="dark"] #app-content .employee-dashboard-shell .text-amber-800,
html[data-theme="dark"] #app-content .employee-dashboard-shell .text-amber-600 {
  color: #f8d872 !important;
  -webkit-text-fill-color: #f8d872 !important;
}

html[data-theme="dark"] #app-content :where(
  .create-log-shell .create-hero-card,
  .create-log-shell .create-manual-card,
  .create-log-shell .create-stat-card,
  .create-log-shell .create-tip-box,
  .create-log-shell .create-benefit-box,
  .create-log-shell .create-date-picker
) {
  color: var(--ds-text) !important;
  background: var(--ds-surface) !important;
  background-color: var(--ds-surface) !important;
  background-image: none !important;
  border-color: var(--ds-border-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #app-content .create-log-shell :where(
  h1, h2, h3, label,
  [class~="text-[#061734]"], .text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700
) {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
}

html[data-theme="dark"] #app-content .create-log-shell :where(
  p, small, .text-slate-600, .text-slate-500, .text-slate-400
) {
  color: var(--ds-muted) !important;
  -webkit-text-fill-color: var(--ds-muted) !important;
}

html[data-theme="dark"] #app-content .create-log-shell :where(
  .text-orange-600, .text-orange-500, .text-orange-300
) {
  color: #fdba74 !important;
  -webkit-text-fill-color: #fdba74 !important;
}

html[data-theme="dark"] #app-content .create-log-shell :where(
  .text-green-700, .text-green-600, .text-green-500
) {
  color: #86efac !important;
  -webkit-text-fill-color: #86efac !important;
}

html[data-theme="dark"] #app-content .create-log-shell .create-soft-icon,
html[data-theme="dark"] #app-content .create-log-shell .create-stat-icon,
html[data-theme="dark"] #app-content .create-log-shell .create-tip-box > span,
html[data-theme="dark"] #app-content .create-log-shell .create-benefit-box .inline-flex {
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: var(--ds-border-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #app-content .create-log-shell .create-date-field,
html[data-theme="dark"] #app-content .create-log-shell #log-date-display {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-control-bg) !important;
  background-color: var(--ds-control-bg) !important;
  border-color: var(--ds-border-strong) !important;
}

html[data-theme="dark"] #app-content .create-log-shell .create-secondary-btn,
html[data-theme="dark"] #app-content .create-log-shell button[data-href] {
  color: var(--ds-text) !important;
  -webkit-text-fill-color: var(--ds-text) !important;
  background: var(--ds-secondary-bg) !important;
  background-color: var(--ds-secondary-bg) !important;
  border-color: var(--ds-border-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #app-content .create-log-shell .create-primary-btn,
html[data-theme="dark"] #app-content .create-log-shell button[type="submit"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--ds-primary-bg) !important;
  background-color: var(--ds-primary-bg) !important;
  border-color: var(--ds-primary-bg) !important;
}

html[data-theme="dark"] #app-content .create-log-shell .my-9.h-px {
  background: var(--ds-border-strong) !important;
  background-color: var(--ds-border-strong) !important;
}
/* 2026-07-15: Manager dashboard dark analytics readability. */
html[data-theme="dark"] #app-content .manager-shell {
  --manager-dark-text: #f8fafc;
  --manager-dark-muted: #dbeafe;
  --manager-dark-subtle: #cbd5e1;
  --manager-dark-soft: #94a3b8;
}

html[data-theme="dark"] #app-content .manager-shell :where(
  .manager-card,
  .metric-card,
  .analytics-card,
  .analytics-stat-strip,
  #manager-missing-section
) {
  color: var(--manager-dark-text) !important;
  -webkit-text-fill-color: var(--manager-dark-text) !important;
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] #app-content .manager-shell :where(
  .panel-title,
  .analytics-card__title,
  .metric-value,
  .analytics-donut__center strong,
  .analytics-hours-meter strong,
  .analytics-user strong,
  .analytics-mini-stat strong,
  .analytics-legend__item strong,
  .metric-card strong
) {
  color: var(--manager-dark-text) !important;
  -webkit-text-fill-color: var(--manager-dark-text) !important;
}

html[data-theme="dark"] #app-content .manager-shell :where(
  .analytics-card__period,
  .analytics-hours-head,
  .analytics-hours-head span,
  .analytics-hours-avg,
  .analytics-donut__center span,
  .analytics-mini-stat > span:not([class]),
  .analytics-mini-stat span:not(.material-symbols-outlined),
  .analytics-legend__label,
  .analytics-legend__item,
  .analytics-empty,
  .metric-caption,
  .muted
) {
  color: var(--manager-dark-subtle) !important;
  -webkit-text-fill-color: var(--manager-dark-subtle) !important;
}

html[data-theme="dark"] #app-content .manager-shell :where(
  .analytics-card__period .material-symbols-outlined,
  .analytics-card__icon .material-symbols-outlined,
  .analytics-mini-stat__icon .material-symbols-outlined,
  .analytics-status-icon .material-symbols-outlined
) {
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-legend__item {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-stat-strip {
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-mini-stat {
  color: var(--manager-dark-subtle) !important;
  -webkit-text-fill-color: var(--manager-dark-subtle) !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-hours-meter .analytics-meter {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-hours-meter .analytics-meter > span {
  background: #3b82f6 !important;
  background-color: #3b82f6 !important;
}

html[data-theme="dark"] #app-content .manager-shell .metric-title {
  color: var(--metric-accent, #93c5fd) !important;
  -webkit-text-fill-color: var(--metric-accent, #93c5fd) !important;
}

html[data-theme="dark"] #app-content .manager-shell .metric-card--blue {
  --metric-accent: #60a5fa;
}

html[data-theme="dark"] #app-content .manager-shell .metric-card--green {
  --metric-accent: #34d399;
}

html[data-theme="dark"] #app-content .manager-shell .metric-card--amber,
html[data-theme="dark"] #app-content .manager-shell .metric-card--orange {
  --metric-accent: #fb923c;
}

html[data-theme="dark"] #app-content .manager-shell .metric-card--rose {
  --metric-accent: #fb7185;
}
/* 2026-07-15: Dark approval title and manager year input repair. */
html[data-theme="dark"] #app-content .manager-shell .manager-filter-form input[name="year"],
html[data-theme="dark"] #app-content .manager-shell .manager-filter-form input.toolbar-control[name="year"],
html[data-theme="dark"] #app-content .manager-shell .manager-period-control input[name="year"] {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #60a5fa !important;
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: #475569 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #app-content .manager-shell .manager-filter-form input[name="year"]:focus,
html[data-theme="dark"] #app-content .manager-shell .manager-period-control input[name="year"]:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #60a5fa !important;
  outline: 2px solid rgba(96, 165, 250, .32) !important;
  outline-offset: 1px !important;
}

html[data-theme="dark"] #app-content .manager-shell .manager-filter-form input[name="year"]::-webkit-inner-spin-button,
html[data-theme="dark"] #app-content .manager-shell .manager-filter-form input[name="year"]::-webkit-outer-spin-button {
  opacity: .85 !important;
  filter: invert(1) brightness(1.25) !important;
}

html[data-theme="dark"] #app-content .approval-page,
html[data-theme="dark"] #app-content .approval-page .approval-hero {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-title,
html[data-theme="dark"] #app-content .approval-page h1.approval-title {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-subtitle {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-title-icon {
  color: #fb923c !important;
  -webkit-text-fill-color: #fb923c !important;
  background: rgba(251, 146, 60, .14) !important;
  background-color: rgba(251, 146, 60, .14) !important;
  border: 1px solid rgba(251, 146, 60, .36) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-stat-label,
html[data-theme="dark"] #app-content .approval-page .approval-stat-value span,
html[data-theme="dark"] #app-content .approval-page .manager-export-label,
html[data-theme="dark"] #app-content .approval-page summary {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-stat-value {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
/* 2026-07-15: Manager performance hours modal. */
#app-content .manager-shell .analytics-card--clickable {
  cursor: pointer !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

#app-content .manager-shell .analytics-card--clickable:hover,
#app-content .manager-shell .analytics-card--clickable:focus-visible {
  border-color: var(--ds-primary-bg, #0078d4) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary-bg, #0078d4) 18%, transparent) !important;
  outline: 0 !important;
}

#app-content .manager-shell .analytics-card--clickable:active {
  transform: translateY(1px) !important;
}

body.performance-hours-modal-open {
  overflow: hidden !important;
}

.performance-hours-modal.hidden {
  display: none !important;
}

.performance-hours-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: calc(var(--ds-toast-z, 2147483600) - 20) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  isolation: isolate !important;
}

.performance-hours-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, .56) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

.performance-hours-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(980px, calc(100vw - 32px)) !important;
  max-height: min(760px, calc(100vh - 48px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  color: var(--ds-text, #1f2937) !important;
  background: var(--ds-surface, #ffffff) !important;
  background-color: var(--ds-surface, #ffffff) !important;
  border: 1px solid var(--ds-border-strong, #dbe4f0) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .24) !important;
}

.performance-hours-head {
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--ds-border, #e6eaf2) !important;
  background: var(--ds-surface, #ffffff) !important;
}

.performance-hours-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.performance-hours-title-wrap h2 {
  margin: 0 !important;
  color: var(--ds-text, #1f2937) !important;
  -webkit-text-fill-color: var(--ds-text, #1f2937) !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
}

.performance-hours-title-wrap p {
  margin: 2px 0 0 !important;
  color: var(--ds-muted, #6b7280) !important;
  -webkit-text-fill-color: var(--ds-muted, #6b7280) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
}

.performance-hours-icon,
.performance-hours-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

.performance-hours-icon {
  color: var(--ds-primary-bg, #0078d4) !important;
  background: var(--ds-info-bg, rgba(0, 120, 212, .10)) !important;
}

.performance-hours-close {
  color: var(--ds-muted, #6b7280) !important;
  background: var(--ds-secondary-bg, #ffffff) !important;
  border: 1px solid var(--ds-border-strong, #dbe4f0) !important;
}

.performance-hours-close:hover,
.performance-hours-close:focus-visible {
  color: var(--ds-text, #1f2937) !important;
  background: var(--ds-secondary-hover, #f5f5f5) !important;
  outline: 2px solid var(--app-focus-ring, rgba(0,120,212,.24)) !important;
  outline-offset: 1px !important;
}

.performance-hours-table-wrap {
  overflow: auto !important;
  background: var(--ds-surface, #ffffff) !important;
}





.performance-hours-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  color: var(--ds-muted, #6b7280) !important;
  -webkit-text-fill-color: var(--ds-muted, #6b7280) !important;
  background: var(--ds-table-head, #f6f9fd) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
}

.performance-hours-table td {
  color: var(--ds-text, #1f2937) !important;
  -webkit-text-fill-color: var(--ds-text, #1f2937) !important;
  background: var(--ds-table-row, #ffffff) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
}

.performance-hours-table tbody tr:nth-child(even) td {
  background: var(--ds-table-row-alt, #f8fafc) !important;
}

.performance-hours-table tbody tr:hover td {
  background: var(--ds-table-row-hover, rgba(0, 120, 212, .08)) !important;
}



.performance-hours-user strong,
.performance-hours-table td strong {
  color: var(--ds-text, #1f2937) !important;
  -webkit-text-fill-color: var(--ds-text, #1f2937) !important;
  font-weight: 700 !important;
}

.performance-hours-user span {
  display: block !important;
  margin-top: 1px !important;
  color: var(--ds-muted, #6b7280) !important;
  -webkit-text-fill-color: var(--ds-muted, #6b7280) !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.performance-hours-empty {
  height: 96px !important;
  text-align: center !important;
  color: var(--ds-muted, #6b7280) !important;
  -webkit-text-fill-color: var(--ds-muted, #6b7280) !important;
}

html[data-theme="dark"] .performance-hours-dialog,
html[data-theme="dark"] .performance-hours-head,
html[data-theme="dark"] .performance-hours-table-wrap {
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .performance-hours-table th {
  background: #0f172a !important;
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

html[data-theme="dark"] .performance-hours-table td {
  background: #111827 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  border-color: #26354a !important;
}

html[data-theme="dark"] .performance-hours-table tbody tr:nth-child(even) td {
  background: #0f172a !important;
}

html[data-theme="dark"] .performance-hours-table tbody tr:hover td {
  background: #1e293b !important;
}

@media (max-width: 640px) {
  .performance-hours-modal { padding: 12px !important; }
  .performance-hours-dialog { width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px) !important; }
  .performance-hours-head { align-items: flex-start !important; padding: 14px !important; }
  .performance-hours-title-wrap h2 { font-size: 18px !important; line-height: 24px !important; }
}
/* 2026-07-15: System-wide mobile reflow contract for Fluent templates. */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#app-main,
#app-content,
#app-content > *,
.ds-app-header,
.ds-header-title,
.ds-header-right,
#sidebar,
#app-sidebar-nav {
  min-width: 0 !important;
}

#app-content :where(img, video, canvas, svg, iframe) {
  max-width: 100% !important;
}

#app-content :where(h1, h2, h3, h4, p, label, span, a, button, th, td, strong, small) {
  overflow-wrap: anywhere;
}

#app-content :where(.material-symbols-outlined, .app-icon, .lucide-icon, svg) {
  overflow-wrap: normal !important;
}

#app-content :where(
  .overflow-x-auto,
  .journal-scroll,
  .journal-table-wrap,
  .overdue-table-wrap,
  .approval-table-wrap,
  .manager-detail-scroll,
  .admin-table-wrap,
  .auto-schedule-table,
  .performance-hours-table-wrap
) {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
}

#app-content :where(table, .journal-table, .soft-table, .admin-log-list-table, .overdue-table, .performance-hours-table) {
  max-width: none !important;
}

#app-content :where(.filter-field, .filter-control-wrap, .overdue-control) {
  min-width: 0 !important;
}

#app-content :where(.toolbar-control, .journal-input, input, select, textarea) {
  min-width: 0 !important;
}
@media (max-width: 1023.98px) {
  body:not(.sidebar-open) #sidebar {
    transform: translateX(-100%) !important;
  }

  #sidebar.sidebar-open {
    transform: translateX(0) !important;
  }

  #app-main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .ds-app-header {
    min-height: 56px !important;
    padding-inline: 12px !important;
    gap: 10px !important;
  }

  .ds-header-title h1,
  .ds-header-title h2,
  #app-page-title {
    max-width: 100% !important;
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .ds-header-user {
    max-width: 168px !important;
  }

  .ds-header-user-meta {
    min-width: 0 !important;
  }

  #app-content {
    padding: 16px !important;
  }
}

@media (max-width: 767.98px) {
  #app-content {
    padding: 12px !important;
  }

  footer {
    padding-inline: 12px !important;
  }

  .ds-app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
  }

  .ds-header-spacer {
    display: none !important;
  }

  .ds-header-right {
    gap: 6px !important;
    margin-left: auto !important;
  }

  .ds-header-user {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    padding: 3px !important;
    justify-content: center !important;
  }

  .ds-header-user-meta,
  .ds-header-logout-label {
    display: none !important;
  }

  .ds-notification-btn,
  .sidebar-header-toggle,
  .ds-header-logout {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  #app-content :where(
    .manager-summary-grid,
    .manager-analytics-grid,
    .approval-summary-grid,
    .approval-stat-grid,
    .auto-system-metrics,
    .auto-settings-grid,
    .create-summary-grid,
    .employee-summary-grid,
    .dashboard-summary-grid,
    .admin-summary-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app-content :where(
    .journal-toolbar,
    .journal-filter-form,
    .approval-toolbar,
    .approval-filter-panel,
    .approval-filter-grid,
    .approval-period-actions,
    .manager-filter-form,
    .manager-actions,
    .missing-filter-form,
    .overdue-filter-form,
    .create-manual-actions,
    .admin-filter-form,
    .department-filter-form,
    #tour-admin-filters form,
    #tour-log-filters form
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #app-content :where(
    .journal-toolbar,
    .approval-toolbar,
    .manager-actions,
    .missing-filter-form
  ) > * {
    min-width: 0 !important;
  }

  #app-content :where(.journal-input, .toolbar-control, .manager-export-field, .overdue-select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea, button:not([class*="unstyled"]):not(.toast-close):not(.fluent-select-search-clear):not(.auto-master-toggle):not(.auto-email-toggle):not(.create-primary-btn):not(.admin-system-btn):not(.sync-segment-btn):not(.sync-btn-block):not(.sync-chip-btn):not(.sync-btn-cancel):not(.sync-btn-confirm):not(.admin-users-primary-btn):not(.admin-users-secondary-btn):not(.admin-users-cancel-btn):not(.admin-users-danger-btn):not(.admin-users-filter-btn):not(.admin-users-icon-btn):not(.admin-users-page-btn):not(.previous-log-ai-btn):not(.btn-help-guide):not(.btn-filter-primary):not(.admin-table-tool-btn):not(.bulk-approve-btn):not(.bulk-reject-btn):not(.bulk-clear-btn):not(.fluent-select-trigger):not(.nkcv-date-picker-nav):not(.nkcv-date-picker-day), .fluent-btn, .btn, a[class*="bg-surface"]) {
    width: 100% !important;
    max-width: 100% !important;
  }

  #app-content :where(.journal-input, .toolbar-control, .manager-export-field, .overdue-select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, button:not([class*="unstyled"]):not(.toast-close):not(.fluent-select-search-clear):not(.auto-master-toggle):not(.auto-email-toggle):not(.create-primary-btn):not(.admin-system-btn):not(.sync-segment-btn):not(.sync-btn-block):not(.sync-chip-btn):not(.sync-btn-cancel):not(.sync-btn-confirm):not(.admin-users-primary-btn):not(.admin-users-secondary-btn):not(.admin-users-cancel-btn):not(.admin-users-danger-btn):not(.admin-users-filter-btn):not(.admin-users-icon-btn):not(.admin-users-page-btn):not(.previous-log-ai-btn):not(.btn-help-guide):not(.btn-filter-primary):not(.admin-table-tool-btn):not(.bulk-approve-btn):not(.bulk-reject-btn):not(.bulk-clear-btn):not(.fluent-select-trigger):not(.nkcv-date-picker-nav):not(.nkcv-date-picker-day), .fluent-btn, .btn, a[class*="bg-surface"]) {
    min-height: 44px !important;
    height: auto !important;
  }

  #app-content :where(button:not([class*="unstyled"]):not(.toast-close):not(.fluent-select-search-clear):not(.auto-master-toggle):not(.auto-email-toggle):not(.create-primary-btn):not(.admin-system-btn):not(.sync-segment-btn):not(.sync-btn-block):not(.sync-chip-btn):not(.sync-btn-cancel):not(.sync-btn-confirm):not(.admin-users-primary-btn):not(.admin-users-secondary-btn):not(.admin-users-cancel-btn):not(.admin-users-danger-btn):not(.admin-users-filter-btn):not(.admin-users-icon-btn):not(.admin-users-page-btn):not(.previous-log-ai-btn):not(.btn-help-guide):not(.btn-filter-primary):not(.admin-table-tool-btn):not(.bulk-approve-btn):not(.bulk-reject-btn):not(.bulk-clear-btn):not(.fluent-select-trigger):not(.nkcv-date-picker-nav):not(.nkcv-date-picker-day), .fluent-btn, .btn, a[class*="bg-surface"]) {
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }
  #app-content :where(.manager-card, .journal-card, .approval-stat-card, .metric-card, .analytics-card, .auto-card, .create-hero-card, .create-manual-card, .overdue-panel, #tour-admin-filters, #tour-admin-log-table) {
    border-radius: 10px !important;
  }

  #app-content :where(.employee-dashboard-shell .employee-range-select, .employee-dashboard-shell #daily-range-select) {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    flex: 0 0 112px !important;
  }

  #app-content :where(
    .fixed.inset-0[role="dialog"],
    [id^="modal-"],
    .performance-hours-modal,
    .previous-log-modal
  ) {
    padding: 12px !important;
  }

  #app-content :where(
    [role="dialog"] .relative.bg-white,
    [id^="modal-"] .relative.bg-white,
    .required-result-dialog,
    .performance-hours-dialog,
    .previous-log-modal-shell
  ) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
  }
}

@media (max-width: 479.98px) {
  #sidebar {
    width: min(280px, 88vw) !important;
  }

  #app-content {
    padding: 10px !important;
  }

  .ds-app-header {
    padding-inline: 8px !important;
    gap: 8px !important;
  }

  .ds-header-title h1,
  .ds-header-title h2,
  #app-page-title {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  #app-content :where(.manager-card, .journal-card, .approval-stat-card, .metric-card, .analytics-card, .auto-card, .create-hero-card, .create-manual-card, .overdue-panel) {
    padding: 14px !important;
  }

  #toast-container,
  body #toast-container,
  html[data-theme] body #toast-container {
    top: 72px !important;
    right: 8px !important;
    left: 8px !important;
  }
}
/* 2026-07-15: Mobile refinements for action icons and body-level dialogs. */
@media (max-width: 767.98px) {
  #app-content :where(
    .action-icon,
    .btn-icon,
    .fluent-btn-icon,
    .journal-action-btn,
    .approval-row-action,
    .department-delete-btn,
    .performance-hours-close,
    button[aria-label]:not(.toast-close)
  ) {
    width: 44px !important;
    max-width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    flex: 0 0 44px !important;
  }

  body > :where(
    [id^="modal-"],
    .performance-hours-modal,
    .previous-log-modal,
    [role="dialog"].fixed
  ) {
    padding: 12px !important;
  }

  body > :where([id^="modal-"], .performance-hours-modal, .previous-log-modal) :where(
    .relative.bg-white,
    .required-result-dialog,
    .performance-hours-dialog,
    .previous-log-modal-shell
  ) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
  }
}
/* 2026-07-16: Mobile shell repair - header pinned to viewport and sidebar opens reliably. */
@media (max-width: 1023.98px) {
  html,
  body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #app-main {
    margin-left: 0 !important;
    padding-top: 56px !important;
    width: 100% !important;
  }

  .ds-app-header,
  html[data-theme="glass"] .ds-app-header,
  html[data-theme="dark"] .ds-app-header,
  html:not([data-theme="dark"]):not([data-theme="glass"]) .ds-app-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    z-index: 1300 !important;
    margin: 0 !important;
    transform: none !important;
  }

  #sidebar,
  html[data-theme="glass"] #sidebar,
  html[data-theme="dark"] #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 1400 !important;
    transform: translateX(-100%) !important;
    transition: transform var(--app-transition-base, .2s) var(--app-ease, ease) !important;
  }

  #sidebar.sidebar-open,
  body #sidebar.sidebar-open,
  html[data-theme="glass"] #sidebar.sidebar-open,
  html[data-theme="dark"] #sidebar.sidebar-open {
    transform: translateX(0) !important;
  }

  #sidebar-overlay,
  body #sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1350 !important;
  }

  #sidebar > .p-5 {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
/* 2026-07-16: Light theme manager period controls should stay white. */
html:not([data-theme="dark"]):not([data-theme="glass"]) #app-content .manager-shell .manager-filter-form :where(select.toolbar-control[name="month"], input.toolbar-control[name="year"]),
html[data-theme="default"] #app-content .manager-shell .manager-filter-form :where(select.toolbar-control[name="month"], input.toolbar-control[name="year"]),
html[data-theme=""] #app-content .manager-shell .manager-filter-form :where(select.toolbar-control[name="month"], input.toolbar-control[name="year"]) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]):not([data-theme="glass"]) #app-content .manager-shell .manager-filter-form :where(select.toolbar-control[name="month"], input.toolbar-control[name="year"]):hover,
html[data-theme="default"] #app-content .manager-shell .manager-filter-form :where(select.toolbar-control[name="month"], input.toolbar-control[name="year"]):hover,
html[data-theme=""] #app-content .manager-shell .manager-filter-form :where(select.toolbar-control[name="month"], input.toolbar-control[name="year"]):hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #c7d2e3 !important;
}
/* 2026-07-16: Approval mobile month cards keep text actions readable. */
@media (max-width: 767.98px) {
  #app-content .approval-page {
    gap: 14px !important;
  }

  #app-content .approval-page .approval-month-card {
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  #app-content .approval-page .approval-month-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  #app-content .approval-page .approval-month-chip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #app-content .approval-page .approval-month-chip span:not(.material-symbols-outlined) {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #app-content .approval-page .approval-month-head > div {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #app-content .approval-page .approval-month-select-btn,
  #app-content .approval-page .approval-month-head button:not(.action-icon) {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 132px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 14px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #app-content .approval-page .approval-month-head .action-icon {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex: 0 0 44px !important;
  }

  #app-content .approval-page .journal-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #app-content .approval-page .journal-table {
    min-width: 760px !important;
    table-layout: fixed !important;
  }

  #app-content .approval-page .journal-table th,
  #app-content .approval-page .journal-table td {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #app-content .approval-page .approval-employee-row td {
    padding: 12px !important;
  }
}
/* 2026-07-16: Approval detail table must be horizontally scrollable on mobile. */
@media (max-width: 767.98px) {
  #app-content .approval-page .approval-detail-cell {
    padding: 8px !important;
    overflow: visible !important;
  }

  #app-content .approval-page .approval-detail-card,
  #app-content .approval-page .manager-work-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
  }

  #app-content .approval-page .manager-log-detail-ajax,
  #app-content .approval-page .manager-work-card__header {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #app-content .approval-page .manager-detail-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
    padding-bottom: 10px !important;
  }

  #app-content .approval-page .log-detail-table-fixed {
    width: 1180px !important;
    min-width: 1180px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  #app-content .approval-page .log-detail-table-fixed .log-col-7 { width: 240px !important; }
  #app-content .approval-page .log-detail-table-fixed .log-col-8 { width: 170px !important; }

  #app-content .approval-page .manager-note-input,
  #app-content .approval-page .review-eval-box:not(.bulk-review-eval),
  #app-content .approval-page .review-eval-input {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #app-content .approval-page .manager-detail-scroll::-webkit-scrollbar,
  #app-content .approval-page .approval-detail-card::-webkit-scrollbar,
  #app-content .approval-page .manager-work-card::-webkit-scrollbar {
    height: 8px !important;
  }

  #app-content .approval-page .manager-detail-scroll::-webkit-scrollbar-thumb,
  #app-content .approval-page .approval-detail-card::-webkit-scrollbar-thumb,
  #app-content .approval-page .manager-work-card::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35) !important;
    border-radius: 999px !important;
  }
}
/* 2026-07-16: Light theme manager period custom select surface. */
html:not([data-theme="dark"]):not([data-theme="glass"]) #app-content .manager-shell .manager-period-control :where(input.toolbar-control[name="year"]),
html[data-theme="default"] #app-content .manager-shell .manager-period-control :where(input.toolbar-control[name="year"]),
html[data-theme=""] #app-content .manager-shell .manager-period-control :where(input.toolbar-control[name="year"]) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]):not([data-theme="glass"]) #app-content .manager-shell .manager-period-control :where(input.toolbar-control[name="year"]):hover,
html[data-theme="default"] #app-content .manager-shell .manager-period-control :where(input.toolbar-control[name="year"]):hover,
html[data-theme=""] #app-content .manager-shell .manager-period-control :where(input.toolbar-control[name="year"]):hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #c7d2e3 !important;
}/* 2026-07-16: Force manager year input white in Light theme, including mobile cascade. */
html[data-theme="light"] #app-content .manager-shell .manager-filter-form input.toolbar-control[name="year"],
html[data-theme="default"] #app-content .manager-shell .manager-filter-form input.toolbar-control[name="year"],
html[data-theme=""] #app-content .manager-shell .manager-filter-form input.toolbar-control[name="year"],
html:not([data-theme="dark"]):not([data-theme="glass"]) #app-content .manager-shell .manager-filter-form input.toolbar-control[name="year"],
html[data-theme="light"] #app-content .manager-shell .manager-period-control input[name="year"],
html[data-theme="default"] #app-content .manager-shell .manager-period-control input[name="year"],
html[data-theme=""] #app-content .manager-shell .manager-period-control input[name="year"],
html:not([data-theme="dark"]):not([data-theme="glass"]) #app-content .manager-shell .manager-period-control input[name="year"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
}

html[data-theme="light"] #app-content .manager-shell .manager-filter-form input.toolbar-control[name="year"]:is(:hover, :focus, :focus-visible),
html[data-theme="default"] #app-content .manager-shell .manager-filter-form input.toolbar-control[name="year"]:is(:hover, :focus, :focus-visible),
html[data-theme=""] #app-content .manager-shell .manager-filter-form input.toolbar-control[name="year"]:is(:hover, :focus, :focus-visible),
html:not([data-theme="dark"]):not([data-theme="glass"]) #app-content .manager-shell .manager-filter-form input.toolbar-control[name="year"]:is(:hover, :focus, :focus-visible),
html[data-theme="light"] #app-content .manager-shell .manager-period-control input[name="year"]:is(:hover, :focus, :focus-visible),
html[data-theme="default"] #app-content .manager-shell .manager-period-control input[name="year"]:is(:hover, :focus, :focus-visible),
html[data-theme=""] #app-content .manager-shell .manager-period-control input[name="year"]:is(:hover, :focus, :focus-visible),
html:not([data-theme="dark"]):not([data-theme="glass"]) #app-content .manager-shell .manager-period-control input[name="year"]:is(:hover, :focus, :focus-visible) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #c7d2e3 !important;
}
/* 2026-07-16: Acrylic toggle and Dark contrast repairs. */
#app-content .manager-shell #manager-missing-section .missing-period-toggle,
#app-content .manager-shell #manager-missing-section .missing-period-toggle *,
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle,
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle * {
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

#app-content .manager-shell #manager-missing-section .missing-period-toggle span::selection,
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle span::selection {
  background: transparent !important;
  color: inherit !important;
}

#app-content .manager-shell .manager-filter-form input[name="year"]::-webkit-outer-spin-button,
#app-content .manager-shell .manager-filter-form input[name="year"]::-webkit-inner-spin-button,
#app-content .manager-shell .manager-period-control input[name="year"]::-webkit-outer-spin-button,
#app-content .manager-shell .manager-period-control input[name="year"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

#app-content .manager-shell .manager-filter-form input[name="year"],
#app-content .manager-shell .manager-period-control input[name="year"] {
  -moz-appearance: textfield !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-donut__center,
html[data-theme="dark"] #app-content .manager-shell .donut::after {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: #111827 !important;
  background-color: #111827 !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-donut__center strong,
html[data-theme="dark"] #app-content .manager-shell .analytics-donut__center span,
html[data-theme="dark"] #app-content .manager-shell .donut strong,
html[data-theme="dark"] #app-content .manager-shell .donut span,
html[data-theme="dark"] #app-content .manager-shell .analytics-legend__label,
html[data-theme="dark"] #app-content .manager-shell .analytics-legend strong,
html[data-theme="dark"] #app-content .manager-shell .analytics-card__title,
html[data-theme="dark"] #app-content .manager-shell .analytics-card__period,
html[data-theme="dark"] #app-content .manager-shell .analytics-hours-row,
html[data-theme="dark"] #app-content .manager-shell .analytics-hours-row *,
html[data-theme="dark"] #app-content .manager-shell .analytics-mini-stat,
html[data-theme="dark"] #app-content .manager-shell .analytics-mini-stat * {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-card__period,
html[data-theme="dark"] #app-content .manager-shell .analytics-mini-stat span,
html[data-theme="dark"] #app-content .manager-shell .analytics-hours-head,
html[data-theme="dark"] #app-content .manager-shell .analytics-hours-head * {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-tabs {
  background: transparent !important;
  border-color: transparent !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-tab {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-tab:hover,
html[data-theme="dark"] #app-content .approval-page .approval-tab:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(96, 165, 250, .14) !important;
  border-color: rgba(96, 165, 250, .28) !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-tab.is-active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #1d4ed8 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .20), 0 8px 18px rgba(37, 99, 235, .22) !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-tab.is-active::after {
  background: #93c5fd !important;
}
/* 2026-07-16: Dark dashboard chart and approval detail readability final pass. */
html[data-theme="dark"] #app-content .manager-shell .analytics-donut__center {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-donut__center strong,
html[data-theme="dark"] #app-content .manager-shell .analytics-donut__center span {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: transparent !important;
  background-color: transparent !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-donut__center strong {
  font-weight: 900 !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-donut__center span {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-mini-stat,
html[data-theme="dark"] #app-content .manager-shell .analytics-mini-stat * {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-mini-stat > span:not(.analytics-mini-stat__icon):not(.material-symbols-outlined) {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

html[data-theme="dark"] #app-content .manager-shell .analytics-mini-stat__icon,
html[data-theme="dark"] #app-content .manager-shell .analytics-mini-stat__icon * {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-detail-cell {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
}

html[data-theme="dark"] #app-content .approval-page .approval-detail-card,
html[data-theme="dark"] #app-content .approval-page .manager-work-card {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] #app-content .approval-page .manager-work-card__header,
html[data-theme="dark"] #app-content .approval-page .log-detail-table-fixed th {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] #app-content .approval-page .manager-work-card__header p,
html[data-theme="dark"] #app-content .approval-page .log-detail-table-fixed th,
html[data-theme="dark"] #app-content .approval-page .log-detail-table-fixed td,
html[data-theme="dark"] #app-content .approval-page .rich-text-content,
html[data-theme="dark"] #app-content .approval-page .manager-category-text,
html[data-theme="dark"] #app-content .approval-page .manager-note-text {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] #app-content .approval-page .log-detail-table-fixed td {
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: #26354a !important;
}

html[data-theme="dark"] #app-content .approval-page .log-detail-table-fixed tbody tr:nth-child(even) td {
  background: #0f172a !important;
  background-color: #0f172a !important;
}

html[data-theme="dark"] #app-content .approval-page .manager-hour-warning {
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  background: rgba(120, 53, 15, .42) !important;
  background-color: rgba(120, 53, 15, .42) !important;
  border-color: rgba(251, 191, 36, .48) !important;
}

html[data-theme="dark"] #app-content .approval-page .manager-hour-warning *,
html[data-theme="dark"] #app-content .approval-page .manager-hour-warning .material-symbols-outlined {
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
}
/* 2026-07-16: Remove residual blue underline/selection on Acrylic missing period toggle text. */
#app-content .manager-shell #manager-missing-section .missing-period-toggle :where(.toggle-week, .toggle-month),
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle :where(.toggle-week, .toggle-month) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-shadow: none !important;
  caret-color: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

#app-content .manager-shell #manager-missing-section .missing-period-toggle :where(.toggle-week, .toggle-month)::before,
#app-content .manager-shell #manager-missing-section .missing-period-toggle :where(.toggle-week, .toggle-month)::after,
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle :where(.toggle-week, .toggle-month)::before,
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle :where(.toggle-week, .toggle-month)::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app-content .manager-shell #manager-missing-section .missing-period-toggle :where(.toggle-week, .toggle-month)::selection,
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle :where(.toggle-week, .toggle-month)::selection {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background: rgba(0, 0, 0, 0) !important;
}

#app-content .manager-shell #manager-missing-section .missing-period-toggle:focus,
#app-content .manager-shell #manager-missing-section .missing-period-toggle:focus-visible,
#app-content .manager-shell #manager-missing-section .missing-period-toggle:active,
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle:focus,
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle:focus-visible,
html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle:active {
  outline: 0 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08) !important;
  text-decoration: none !important;
}
/* 2026-07-16: Mobile repairs for missing-log panel, rich editors, and entry cards. */
@media (max-width: 767.98px) {
  #app-content .manager-shell #manager-missing-section > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  #app-content .manager-shell #manager-missing-section .missing-filter-form {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }

  #app-content .manager-shell #manager-missing-section .missing-period-toggle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    flex: 0 0 auto !important;
    padding: 3px !important;
  }

  #app-content .manager-shell #manager-missing-section .missing-period-toggle :where(.toggle-week, .toggle-month) {
    min-width: 0 !important;
    width: 100% !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: 12px !important;
  }

  #app-content .manager-shell #manager-missing-section .missing-page-size-control {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    display: grid !important;
    grid-template-columns: auto minmax(72px, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }
  #app-content .manager-shell #manager-missing-section .overflow-x-auto {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #app-content .manager-shell #manager-missing-section .manager-missing-table {
    width: 760px !important;
    min-width: 760px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  #entry-form .rich-editor-shell {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #entry-form .rich-editor-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  #entry-form .rich-editor-toolbar::-webkit-scrollbar {
    display: none !important;
  }

  #entry-form .rich-editor-group {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    min-width: max-content !important;
    padding-right: 6px !important;
  }

  #entry-form .editor-toolbar-btn,
  #entry-form .entry-form-compact .editor-toolbar-btn {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 34px !important;
    min-height: 34px !important;
    flex: 0 0 38px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  #entry-form .editor-toolbar-btn .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  #tour-entry-list-table {
    overflow-x: visible !important;
  }

  #tour-entry-list-table table,
  #tour-entry-list-table .entry-list-table,
  #tour-entry-list-table tbody,
  #tour-entry-list-table tr,
  #tour-entry-list-table td {
    width: 100% !important;
    max-width: 100% !important;
  }

  #tour-entry-list-table tbody {
    display: grid !important;
    gap: 12px !important;
    padding: 12px !important;
    background: var(--ds-page-bg, #f8fafc) !important;
  }

  #tour-entry-list-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 14px !important;
    border-radius: 12px !important;
    border: 1px solid var(--ds-border, #d9e2ee) !important;
    background: var(--ds-surface, #ffffff) !important;
    box-shadow: var(--ds-shadow-1, 0 2px 8px rgba(0,0,0,.08)) !important;
  }

  #tour-entry-list-table td,
  #tour-entry-list-table td.hidden {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: stretch !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    text-align: left !important;
    border: 0 !important;
  }

  #tour-entry-list-table td::before {
    flex: none !important;
    width: auto !important;
    color: var(--ds-muted, #64748b) !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #tour-entry-list-table td:nth-child(2),
  #tour-entry-list-table td:nth-child(4),
  #tour-entry-list-table td:nth-child(5) {
    display: block !important;
  }

  #tour-entry-list-table td:nth-child(2)::before,
  #tour-entry-list-table td:nth-child(4)::before,
  #tour-entry-list-table td:nth-child(5)::before {
    display: block !important;
    margin-bottom: 6px !important;
  }

  #tour-entry-list-table .entry-table-wrap-content,
  #tour-entry-list-table .rich-text-content,
  #tour-entry-list-table .preserve-breaks,
  #tour-entry-list-table .entry-category-pill {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  #tour-entry-list-table td.text-center,
  #tour-entry-list-table td:nth-child(6),
  #tour-entry-list-table td:nth-child(7),
  #tour-entry-list-table td:nth-child(8) {
    text-align: left !important;
  }

  #tour-entry-list-table td:last-child > div {
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 8px !important;
  }
}
/* 2026-07-16: Compact mobile missing-log filter without nested oval shell. */
@media (max-width: 767.98px) {
  #app-content .manager-shell #manager-missing-section .missing-filter-form,
  html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-filter-form,
  html[data-theme="dark"] #app-content .manager-shell #manager-missing-section .missing-filter-form {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #app-content .manager-shell #manager-missing-section .missing-period-toggle {
    border-radius: 999px !important;
    border: 1px solid var(--ds-border, #d9e2ee) !important;
    background: var(--ds-surface, #ffffff) !important;
    box-shadow: var(--ds-shadow-1, 0 2px 8px rgba(0,0,0,.08)) !important;
  }

  html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-period-toggle {
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(255,255,255,.65) !important;
  }

  html[data-theme="dark"] #app-content .manager-shell #manager-missing-section .missing-period-toggle {
    background: rgba(15,23,42,.96) !important;
    border-color: rgba(148,163,184,.32) !important;
  }

  #app-content .manager-shell #manager-missing-section .missing-page-size-control,
  html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-page-size-control,
  html[data-theme="dark"] #app-content .manager-shell #manager-missing-section .missing-page-size-control {
    border-left: 0 !important;
    border: 1px solid var(--ds-border, #d9e2ee) !important;
    border-radius: 999px !important;
    background: var(--ds-surface, #ffffff) !important;
    box-shadow: var(--ds-shadow-1, 0 2px 8px rgba(0,0,0,.08)) !important;
  }

  html[data-theme="glass"] #app-content .manager-shell #manager-missing-section .missing-page-size-control {
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(255,255,255,.65) !important;
  }

  html[data-theme="dark"] #app-content .manager-shell #manager-missing-section .missing-page-size-control {
    background: rgba(15,23,42,.96) !important;
    border-color: rgba(148,163,184,.32) !important;
  }}
/* 2026-07-16: Small laptop repair for employee log detail split layout. */
@media (min-width: 1024px) and (max-width: 1360px) {
  #app-content #tour-log-detail-top-actions {
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  #app-content #tour-log-detail-top-actions .journal-action-btn,
  #app-content #tour-log-detail-top-actions button,
  #app-content #tour-log-detail-top-actions a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  #app-content #split-layout.journal-split-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  #app-content #split-left.journal-split-left {
    width: clamp(340px, 30vw, 440px) !important;
    min-width: 320px !important;
    max-width: 480px !important;
    flex: 0 0 auto !important;
  }

  #app-content #split-right.journal-split-right,
  #app-content #tour-entry-list-panel.entry-list-panel {
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 0% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #app-content #tour-entry-list-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #app-content #tour-entry-list-table table,
  #app-content #tour-entry-list-table .entry-list-table,
  #app-content #tour-entry-list-table .entry-table-readonly,
  #app-content #tour-entry-list-table .entry-table-approved {
    width: 920px !important;
    min-width: 920px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  #app-content #tour-entry-list-table .entry-col-time { width: 96px !important; }
  #app-content #tour-entry-list-table .entry-col-content { width: 190px !important; }
  #app-content #tour-entry-list-table .entry-col-category { width: 108px !important; }
  #app-content #tour-entry-list-table .entry-col-result { width: 170px !important; }
  #app-content #tour-entry-list-table .entry-col-note { width: 84px !important; }
  #app-content #tour-entry-list-table .entry-col-duration { width: 72px !important; }
  #app-content #tour-entry-list-table .entry-col-completion { width: 82px !important; }
  #app-content #tour-entry-list-table .entry-col-actions { width: 118px !important; }
  #app-content #tour-entry-list-table .entry-col-review { width: 90px !important; }

  #app-content #tour-entry-list-table th,
  #app-content #tour-entry-list-table td {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #app-content #tour-entry-list-table td:last-child > div {
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }

  #app-content #tour-entry-list-table td:last-child button {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }
}
/* 2026-07-17: Mobile drawer must ignore desktop collapsed rail state. */
@media (max-width: 1023.98px) {
  body.sidebar-collapsed #sidebar,
  html:not([data-theme="dark"]):not([data-theme="glass"]) body.sidebar-collapsed #sidebar,
  html[data-theme="dark"] body.sidebar-collapsed #sidebar,
  html[data-theme="glass"] body.sidebar-collapsed #sidebar {
    width: min(280px, 88vw) !important;
    min-width: min(280px, 88vw) !important;
    max-width: calc(100vw - 18px) !important;
  }

  body.sidebar-collapsed #sidebar > .p-5 {
    align-items: stretch !important;
    padding: 10px !important;
    overflow-x: hidden !important;
  }

  body.sidebar-collapsed #app-sidebar-nav,
  body.sidebar-collapsed .sidebar-section {
    width: 100% !important;
    align-items: stretch !important;
  }

  body.sidebar-collapsed #sidebar .sidebar-brand,
  body.sidebar-collapsed #sidebar .app-sidebar-brand,
  body.sidebar-collapsed #sidebar .nav-label,
  body.sidebar-collapsed #sidebar .sidebar-section-title,
  body.sidebar-collapsed #sidebar .sidebar-count-badge {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
  }

  body.sidebar-collapsed #sidebar .sidebar-nav-item {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  body.sidebar-collapsed #sidebar .sidebar-nav-item .material-symbols-outlined,
  body.sidebar-collapsed #sidebar .sidebar-nav-item .app-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }

  body.sidebar-collapsed #sidebar .sidebar-nav-item .nav-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}
/* 2026-07-17: Header user control follows Fluent command surface without an outer pill border. */
#app-user-menu,
#app-user-menu.ds-header-user,
.ds-header-user,
html:not([data-theme="dark"]):not([data-theme="glass"]) #app-user-menu,
html[data-theme="dark"] #app-user-menu,
html[data-theme="glass"] #app-user-menu {
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

#app-user-menu.ds-header-user:hover,
#app-user-menu.ds-header-user:focus-visible,
#app-user-menu.ds-header-user.is-open {
  border: 0 !important;
  background: rgba(15, 108, 189, 0.08) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #app-user-menu.ds-header-user:hover,
html[data-theme="dark"] #app-user-menu.ds-header-user:focus-visible,
html[data-theme="dark"] #app-user-menu.ds-header-user.is-open {
  background: rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="glass"] #app-user-menu.ds-header-user:hover,
html[data-theme="glass"] #app-user-menu.ds-header-user:focus-visible,
html[data-theme="glass"] #app-user-menu.ds-header-user.is-open {
  background: rgba(255, 255, 255, 0.28) !important;
}
/* 2026-07-17: Performance hours modal keeps avatars and table columns stable. */
.performance-hours-table {
  width: 100% !important;
  min-width: 780px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--ds-text, #1f2937) !important;
  table-layout: fixed !important;
}

.performance-hours-table th:nth-child(1),
.performance-hours-table td:nth-child(1) { width: 52px !important; }
.performance-hours-table th:nth-child(2),
.performance-hours-table td:nth-child(2) { width: 360px !important; }
.performance-hours-table th:nth-child(3),
.performance-hours-table td:nth-child(3) { width: 180px !important; }
.performance-hours-table th:nth-child(4),
.performance-hours-table td:nth-child(4) { width: 80px !important; }
.performance-hours-table th:nth-child(5),
.performance-hours-table td:nth-child(5) { width: 82px !important; }
.performance-hours-table th:nth-child(6),
.performance-hours-table td:nth-child(6) { width: 96px !important; }

.performance-hours-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.performance-hours-user .ds-avatar,
.performance-hours-user .ds-avatar-img,
.performance-hours-user img,
.performance-hours-table .ds-avatar,
.performance-hours-table .ds-avatar-img,
.performance-hours-table img.ds-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
  object-fit: cover !important;
  border-radius: 999px !important;
}

.performance-hours-user > div {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.performance-hours-user strong,
.performance-hours-user span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.performance-hours-table th,
.performance-hours-table td {
  height: 48px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--ds-border, #e6eaf2) !important;
  text-align: left !important;
  vertical-align: middle !important;
}
/* 2026-07-17: User menu logout command should hug its label, not span the menu. */
.ds-header-user-menu .ds-header-menu-logout.ds-header-logout,
html[data-theme="dark"] .ds-header-user-menu .ds-header-menu-logout.ds-header-logout,
html[data-theme="glass"] .ds-header-user-menu .ds-header-menu-logout.ds-header-logout {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}

.ds-header-user-menu form[role="none"] {
  display: flex !important;
  justify-content: flex-start !important;
}

/* Employee dashboard JS-free progress and legend presentation. */
#app-content .employee-dashboard-shell .employee-progress-native {
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  display: block;
}
#app-content .employee-dashboard-shell .employee-progress-native::-webkit-progress-bar {
  background: transparent;
}
#app-content .employee-dashboard-shell .employee-progress-native::-webkit-progress-value {
  border-radius: inherit;
}
#app-content .employee-dashboard-shell .employee-progress-native::-moz-progress-bar {
  border-radius: inherit;
}
#app-content .employee-dashboard-shell .employee-progress-native--1::-webkit-progress-value { background: #3b82f6; }
#app-content .employee-dashboard-shell .employee-progress-native--1::-moz-progress-bar { background: #3b82f6; }
#app-content .employee-dashboard-shell .employee-progress-native--2::-webkit-progress-value { background: #58c878; }
#app-content .employee-dashboard-shell .employee-progress-native--2::-moz-progress-bar { background: #58c878; }
#app-content .employee-dashboard-shell .employee-progress-native--3::-webkit-progress-value { background: #ffad3d; }
#app-content .employee-dashboard-shell .employee-progress-native--3::-moz-progress-bar { background: #ffad3d; }
#app-content .employee-dashboard-shell .employee-progress-native--4::-webkit-progress-value { background: #a56ade; }
#app-content .employee-dashboard-shell .employee-progress-native--4::-moz-progress-bar { background: #a56ade; }

.chart-legend-dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  flex-shrink: 0;
  border-radius: 999px;
}
.chart-legend-dot--professional { background: #3b82f6; }
.chart-legend-dot--regular { background: #58c878; }
.chart-legend-dot--advisory { background: #ffad3d; }
.chart-legend-dot--urgent { background: #a56ade; }
.chart-legend-dot--other { background: #94a3b8; }
.chart-legend-dot--item-0 { background: #3b82f6; }
.chart-legend-dot--item-1 { background: #58c878; }
.chart-legend-dot--item-2 { background: #ffad3d; }
.chart-legend-dot--item-3 { background: #a56ade; }
.chart-legend-dot--item-4 { background: #94a3b8; }