:root {
      --ink: #242a27;
      --muted: #66716b;
      --line: #d9dfdc;
      --panel: #ffffff;
      --bg: #f3f5f4;
      --primary: #087d78;
      --primary-dark: #05645f;
      --accent: #c98218;
      --danger: #b42318;
      --warn: #b54708;
      --ok: #067647;
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
    body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
    body.impersonation-active { padding-top: 52px; }
    .impersonation-banner { position: fixed; inset: 0 0 auto 0; z-index: 1000; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 18px; border-bottom: 2px solid #fdb022; background: #fffaeb; color: #7a2e0e; box-shadow: 0 2px 9px rgba(52, 37, 11, .18); }
    .impersonation-banner > div { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
    .impersonation-banner strong { white-space: nowrap; }
    .impersonation-banner span { color: #93370d; font-size: 12px; }
    .impersonation-banner form { flex: 0 0 auto; margin: 0; }
    .impersonation-banner button { min-height: 34px; padding: 7px 12px; border-color: #b54708; background: #b54708; white-space: nowrap; }
    .impersonation-return-short { display: none; }
    body.impersonation-active .side { top: 52px; height: calc(100dvh - 52px); }
    body.impersonation-active .module-switcher-group,
    body.impersonation-active .module-switcher-tabs,
    body.impersonation-active .app-page-chrome { top: 52px; }
    .app { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); transition: grid-template-columns .18s ease; }
    .side { position: sticky; top: 0; height: 100dvh; min-width: 0; overflow-y: auto; overflow-x: visible; background: #232825; color: #fff; padding: 20px 14px; display: flex; flex-direction: column; gap: 20px; z-index: 60; }
    .brand-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .brand strong { display: block; font-size: 20px; }
    .brand span { color: #b8c0bb; font-size: 12px; }
    .brand-mark, .nav-mark, .user-mark, .logout-icon { display: none; }
    .side-close { display: none; width: 36px; height: 36px; padding: 0; background: transparent; font-size: 24px; }
    .side-collapse { display: none; }
    .side-nav { display: grid; gap: 16px; }
    .nav-group { display: grid; gap: 4px; }
    .nav-label { padding: 0 12px 3px; color: #8f9b94; font-size: 11px; font-weight: 750; text-transform: uppercase; }
    .side-nav a { display: flex; align-items: center; gap: 8px; color: #dbe1dd; text-decoration: none; padding: 10px 12px; border-radius: 6px; font-weight: 650; }
    .side-nav a.on, .side-nav a:hover { background: #38413c; color: #fff; }
    .nav-module-main { border: 1px solid transparent; font-size: 14px; }
    .nav-module-main.on { border-color: #4d5a53; }
    .nav-module-caret { margin-left: auto; color: #9aa59f; font-size: 18px; transition: transform .16s ease; }
    .nav-module-group.open .nav-module-caret { transform: rotate(90deg); }
    .nav-module-children { display: none; gap: 2px; margin-left: 11px; padding-left: 9px; border-left: 1px solid #4a534e; }
    .nav-module-group.open .nav-module-children { display: grid; }
    .side-nav .nav-child-link { min-height: 34px; padding: 7px 9px; font-size: 12px; font-weight: 600; }
    .nav-field-branches { display: grid; gap: 2px; padding-block: 3px; }
    .nav-field-label { padding: 3px 9px 1px; color: #9da8a2; font-size: 10px; font-weight: 750; text-transform: uppercase; }
    .nav-data-branch { color: #c6ded9 !important; }
    .attendance-month-navigation { display: grid; gap: 2px; padding-block: 3px; }
    .attendance-month-picker { display: grid; gap: 5px; margin: 5px 4px 2px; padding: 8px 5px 2px; border-top: 1px solid #46504a; }
    .attendance-month-picker > label { color: #aeb8b2; font-size: 10px; text-transform: uppercase; }
    .attendance-month-picker > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
    .attendance-month-picker input { min-width: 0; min-height: 32px; padding: 6px 7px; border-color: #56615b; background: #303733; color: #fff; font-size: 11px; color-scheme: dark; }
    .attendance-month-picker button { min-height: 32px; padding: 6px 8px; font-size: 11px; }
    .attendance-month-picker small { color: #8edbd4; font-size: 10px; line-height: 1.35; }
    .nav-empty { padding: 6px 12px; color: #8f9b94; font-size: 11px; font-style: italic; }
    .user { margin-top: auto; border-top: 1px solid #444c47; padding-top: 16px; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
    .user a { color: #8edbd4; }
    .presentation-options { display: grid; gap: 5px; margin-top: -12px; }
    .presentation-options a { min-height: 34px; display: flex; align-items: center; justify-content: center; padding: 6px 9px; border: 1px solid #4d5a53; border-radius: 6px; color: #dbe1dd; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; }
    .presentation-options a:hover { background: #38413c; color: #fff; }
    .presentation-options .presentation-auto { border-color: transparent; color: #9fb0a7; font-size: 11px; }
    @media (min-width: 901px) {
      .side-collapse { position: fixed; top: 72px; left: 211px; z-index: 65; width: 28px; height: 34px; display: inline-flex; padding: 0; border: 1px solid #4c5650; border-radius: 0 6px 6px 0; background: #232825; color: #dbe1dd; font-size: 24px; box-shadow: 4px 0 10px rgba(18, 25, 21, .14); transition: left .18s ease; }
      .side-collapse:hover { background: #38413c; }
      html.nav-collapsed .app { grid-template-columns: 68px minmax(0, 1fr); }
      html.nav-collapsed .side { padding-inline: 8px; }
      html.nav-collapsed .side-collapse { left: 55px; }
      html.nav-collapsed .brand-row { justify-content: center; }
      html.nav-collapsed .brand-full, html.nav-collapsed .brand span, html.nav-collapsed .nav-label,
      html.nav-collapsed .nav-text, html.nav-collapsed .user-details, html.nav-collapsed .logout-text { display: none; }
      html.nav-collapsed .brand-mark, html.nav-collapsed .nav-mark, html.nav-collapsed .user-mark,
      html.nav-collapsed .logout-icon { display: inline-flex; align-items: center; justify-content: center; }
      html.nav-collapsed .brand-mark { width: 36px; height: 36px; font-size: 19px; }
      html.nav-collapsed .side-nav a { justify-content: center; min-height: 42px; padding-inline: 6px; }
      html.nav-collapsed .nav-module-children, html.nav-collapsed .nav-module-caret { display: none; }
      html.nav-collapsed .nav-mark { width: 34px; font-size: 11px; font-weight: 800; }
      html.nav-collapsed .nav-empty { display: none; }
      html.nav-collapsed .user { align-items: center; flex-direction: column; }
      html.nav-collapsed .user-mark { width: 34px; height: 34px; border: 1px solid #59635d; border-radius: 50%; color: #fff; font-weight: 800; }
      html.nav-collapsed .logout-link { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
      html.nav-collapsed .logout-icon { font-size: 20px; }
    }
    main { min-width: 0; padding: 24px 28px; transition: margin-right .18s ease; }
    .module-switcher-tabs { position: sticky; top: 0; z-index: 30; display: flex; gap: 2px; min-width: 0; margin: -24px -28px 12px; padding: 0 16px; overflow-x: auto; border-bottom: 1px solid var(--line); background: rgba(247, 250, 249, .98); scrollbar-width: thin; }
    .module-switcher-group { position: sticky; top: 0; z-index: 30; display: flex; align-items: stretch; min-width: 0; margin: -24px -28px 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(247, 250, 249, .98); }
    /* Month context occupies its own space, outside the horizontal scroller. */
    .module-switcher-group > .module-switcher-tabs { position: static; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border-bottom: 0; background: transparent; }
    .module-switcher-tabs a { flex: 0 0 auto; min-height: 46px; display: inline-flex; align-items: center; padding: 10px 13px 8px; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 750; white-space: nowrap; }
    .module-switcher-context { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 46px; padding: 8px 12px; border-right: 1px solid var(--line); background: #e8f5f3; color: var(--primary-dark); font-size: 12px; font-weight: 800; white-space: nowrap; }
    .module-switcher-tabs a:hover, .module-switcher-tabs a.active { color: var(--primary-dark); background: #edf8f6; border-bottom-color: var(--primary); }
    .module-switcher-tabs a:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
    .app-page-chrome {
      position: sticky;
      top: 0;
      z-index: 30;
      min-height: 47px;
      display: flex;
      align-items: stretch;
      justify-content: flex-end;
      margin: -24px -28px 12px;
      border-bottom: 1px solid var(--line);
      background: rgba(247, 250, 249, .98);
    }
    .app-page-chrome > .module-switcher-group,
    .app-page-chrome > .module-switcher-tabs {
      position: static;
      flex: 1 1 auto;
      margin: 0;
      padding-inline: 16px 8px;
      border-bottom: 0;
      background: transparent;
    }
    .app-notification-dock,
    .public-page-notification-dock {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .app-notification-dock {
      flex: 0 0 auto;
      padding: 5px 14px 5px 8px;
      border-left: 1px solid var(--line);
      background: rgba(247, 250, 249, .98);
    }
    .public-page-notification-dock { padding: 12px 16px 0; }
    .public-page-notification-dock + .login { min-height: calc(100vh - 60px); }
    .navigation-admin { min-height: 560px; display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); padding: 0; overflow: hidden; }
    .nav-config-sidebar { min-width: 0; border-right: 1px solid var(--line); background: #f8faf9; }
    .nav-config-editor { min-width: 0; padding: 16px; }
    .nav-config-head, .nav-config-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .nav-config-sidebar > .nav-config-head { padding: 16px 14px 0; }
    .nav-config-head > div, .nav-config-section-head > div { display: grid; gap: 3px; }
    .nav-config-head h2, .nav-config-section-head h2 { margin: 0; font-size: 16px; }
    .nav-config-head span, .nav-config-section-head span { color: var(--muted); font-size: 12px; }
    .nav-config-groups { display: grid; gap: 2px; padding: 0 8px 12px; }
    .nav-config-group { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 10px; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; }
    .nav-config-group:hover, .nav-config-group.active { border-left-color: var(--primary); background: #e8f5f3; }
    .nav-config-group > span:first-child { min-width: 0; display: grid; gap: 2px; }
    .nav-config-group strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
    .nav-config-group small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
    .nav-config-count, .status-mini { min-width: 23px; padding: 2px 5px; border-radius: 999px; background: #e3e9e6; color: var(--ink); font-size: 10px; font-weight: 750; text-align: center; }
    .status-mini { background: #fff0ed; color: var(--danger); }
    .nav-group-form { grid-template-columns: minmax(220px, 1fr) 130px minmax(220px, 1fr); }
    .nav-config-check { align-self: end; min-height: 42px; }
    .nav-lifecycle-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
    .nav-lifecycle-actions form { margin: 0; }
    .nav-config-section-head { align-items: end; }
    .nav-attach-form { display: grid; grid-template-columns: minmax(220px, 340px) auto; align-items: end; gap: 8px; }
    .nav-item-table-wrap { max-height: min(54vh, 620px); overflow: auto; }
    .nav-item-table { min-width: 940px; }
    .nav-item-table th { position: sticky; top: 0; z-index: 2; }
    .nav-item-table th:nth-child(1) { min-width: 210px; }
    .nav-item-table th:nth-child(2) { min-width: 170px; }
    .nav-item-table th:nth-child(3) { width: 100px; }
    .nav-item-table th:nth-child(4), .nav-item-table th:nth-child(5) { width: 100px; text-align: center; }
    .nav-item-table th:nth-child(6) { min-width: 230px; }
    .nav-item-table td { vertical-align: middle; }
    .nav-item-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
    .nav-item-table td.center { text-align: center; }
    .nav-item-table code { font-size: 11px; overflow-wrap: anywhere; }
    .nav-items-save { justify-content: flex-end; margin-top: 12px; }
    .navigation-shortcut-head { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
    .navigation-shortcut-table th:nth-child(2) { min-width: 260px; }
    .navigation-shortcut-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
    .shortcut-form-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
    .inactive-row { opacity: .68; }
    body.side-panel-open { --record-panel-width: clamp(440px, 38vw, 720px); }
    body.side-panel-open.side-panel-wide { --record-panel-width: clamp(720px, 70vw, 1180px); }
    body.side-panel-open main { margin-right: var(--record-panel-width); }
    body.navigation-preview-open { --navigation-preview-width: clamp(440px, 42vw, 820px); }
    body.navigation-preview-open main { margin-right: var(--navigation-preview-width); }
    .navigation-preview { position: fixed; inset: 0 0 0 auto; z-index: 75; width: var(--navigation-preview-width, clamp(440px, 42vw, 820px)); min-width: 0; border-left: 1px solid var(--line); background: #fff; box-shadow: -12px 0 30px rgba(18, 25, 21, .16); }
    .navigation-preview-head { height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); }
    .navigation-preview iframe { width: 100%; height: calc(100dvh - 54px); border: 0; background: var(--bg); }
    .navigation-preview .icon-button { width: 34px; height: 34px; padding: 0; background: #edf1ef; color: var(--ink); font-size: 20px; }
    html.embedded-view .side, html.embedded-view .mobile-bar, html.embedded-view .module-switcher-group, html.embedded-view .module-switcher-tabs, html.embedded-view .navigation-preview { display: none !important; }
    html.embedded-view .app { grid-template-columns: minmax(0, 1fr); }
    html.embedded-view main, html.embedded-view body.side-panel-open main, html.embedded-view body.navigation-preview-open main { margin-right: 0 !important; padding: 12px; }
    .mobile-bar,
    .mobile-context-action-dock { display: none; }
    .mobile-bottom-nav { display: none; }
    .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    h1 { margin: 0; font-size: 25px; letter-spacing: 0; }
    h2 { margin: 0 0 12px; font-size: 18px; }
    p { line-height: 1.5; }
    .muted { color: var(--muted); }
    .grid { display: grid; gap: 16px; }
    .grid.cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .panel { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
    .metric strong { display: block; font-size: 28px; margin-top: 4px; }
    .metric span { color: var(--muted); font-size: 13px; }
    .metric small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
    .metric-warning { border-color: #e7c77e; background: #fffaf0; }
    .metric-warning strong { color: var(--warn); }
    .dashboard-overview-grid { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(520px, 1.15fr); gap: 16px; margin-top: 16px; }
    .dashboard-panel { min-width: 0; }
    .dashboard-panel .section-head { margin-bottom: 10px; }
    .dashboard-table { min-width: 600px; }
    .dashboard-table.recent-table { min-width: 820px; }
    .dashboard-orders-panel { margin-top: 16px; }
    .compact-empty { height: 92px; }
    .dashboard-stock-panel { margin-top: 16px; }
    .dashboard-section-head { padding: 16px 16px 4px; }
    .dashboard-section-head h2 { margin-bottom: 3px; }
    .dashboard-section-head p { margin: 0; }
    table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 14px; }
    th { background: #e7f6f4; font-weight: 700; }
    tr:last-child td { border-bottom: 0; }
    .right { text-align: right; }
    .status-low { color: var(--warn); font-weight: 700; }
    .status-ok { color: var(--ok); font-weight: 700; }
    form.stack { display: grid; gap: 12px; }
    .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .readonly-field { min-height: 42px; display: flex; align-items: center; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; background: #f6f8f7; color: var(--ink); font-weight: 600; }
    label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
    input, select, textarea { width: 100%; border: 1px solid #cfd7e3; border-radius: 6px; padding: 10px 11px; font: inherit; background: #fff; color: var(--ink); }
    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      min-width: 16px;
      min-height: 16px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 3px;
      background: transparent;
      box-shadow: none;
      accent-color: var(--primary);
      flex: 0 0 auto;
      cursor: pointer;
    }
    input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .55; }
    textarea { min-height: 72px; resize: vertical; }
    button, .button { border: 0; border-radius: 6px; background: var(--primary); color: #fff; padding: 10px 14px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    button:hover, .button:hover { background: var(--primary-dark); }
    button.secondary, .button.secondary { background: #eef1ef; color: var(--ink); border: 1px solid #cfd7d2; }
    button.secondary:hover, .button.secondary:hover { background: #e1e6e3; }
    button.danger { background: var(--danger); }
    button.danger:hover { background: #8f1c13; }
    button:disabled { opacity: .55; cursor: not-allowed; }
    .msg { padding: 10px 12px; border-radius: 6px; margin-bottom: 14px; border: 1px solid #b7e4df; background: #edfdfa; color: #075f63; }
    .msg strong { display: block; margin-bottom: 4px; }
    .msg-detail { display: block; font-size: 13px; line-height: 1.45; opacity: .9; }
    .msg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .msg-action { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 10px; border: 1px solid currentColor; border-radius: 6px; color: inherit; background: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 700; text-decoration: none; }
    .msg-action:hover { background: #fff; text-decoration: underline; }
    .msg-action span { font-weight: 600; opacity: .78; }
    .error { border-color: #f3b8b3; background: #fff4f2; color: var(--danger); }
    .msg.warning { border-color: #eed29d; background: #fff8e8; color: var(--warn); }
    .preserve-form-message { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
    .app-notification-launcher {
      position: static;
      z-index: auto;
      min-height: 36px;
      padding: 7px 10px;
      border: 1px solid #b8c8c3;
      border-radius: 999px;
      background: #fff;
      color: var(--primary-dark);
      box-shadow: none;
      font-size: 12px;
      white-space: nowrap;
    }
    .app-notification-launcher:hover { background: #edf8f6; }
    .notification-bell-icon { width: 20px; height: 20px; flex-shrink: 0; }
    .notification-options-bar { display: flex; justify-content: flex-end; }
    .notification-options-bar:has(> [hidden]) { display: none; }
    .notification-options { position: relative; }
    .notification-options > summary {
      display: grid; place-items: center; width: 44px; height: 44px;
      box-sizing: border-box; cursor: pointer; list-style: none;
      border: 1px solid var(--line); border-radius: 9px;
      color: var(--primary-dark); background: #fff; font-size: 24px;
    }
    .notification-options > summary::-webkit-details-marker { display: none; }
    .notification-options > summary:hover { background: #edf8f6; }
    .notification-options-menu {
      position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
      display: grid; gap: 4px; width: max-content; max-width: calc(100vw - 40px);
      box-sizing: border-box; padding: 6px; border: 1px solid var(--line);
      border-radius: 9px; background: #fff; box-shadow: 0 6px 20px #1225151f;
    }
    .notification-options-menu > :is(a, button) {
      display: flex; align-items: center; min-height: 44px; width: 100%;
      box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 5px;
      color: var(--primary-dark); background: #fff; font-size: 14px;
      font-weight: 600; text-decoration: none; text-align: left;
    }
    .notification-options-menu > :is(a, button):hover { background: #edf8f6; }
    .app-notification-card {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 4px 10px;
      padding: 11px 12px;
      border: 1px solid #b7e4df;
      border-left-width: 4px;
      border-radius: 7px;
      background: #f4fffd;
      color: #075f63;
      box-shadow: 0 5px 18px rgba(18, 25, 21, .1);
    }
    .app-notification-card[data-notification-level="success"] {
      border-color: #8ed3b1;
      color: var(--ok);
    }
    .app-notification-card[data-notification-level="warning"] {
      border-color: #e5bd70;
      background: #fff9ec;
      color: var(--warn);
    }
    .app-notification-card[data-notification-level="error"] {
      border-color: #efaaa3;
      background: #fff5f3;
      color: var(--danger);
    }
    .app-notification-card-body { min-width: 0; display: grid; gap: 4px; }
    .app-notification-card-title { overflow-wrap: anywhere; }
    .app-notification-card-detail {
      color: inherit;
      font-size: 12px;
      line-height: 1.45;
      opacity: .9;
      overflow-wrap: anywhere;
      white-space: pre-line;
    }
    .app-notification-dismiss {
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      background: transparent;
      color: currentColor;
      font-size: 18px;
    }
    .app-notification-dismiss:hover { background: rgba(255, 255, 255, .75); }
    .app-notification-card .msg-actions { grid-column: 1 / -1; }
    .app-toast-stack {
      position: fixed;
      top: 104px;
      right: 18px;
      z-index: 107;
      width: min(390px, calc(100vw - 32px));
      display: grid;
      gap: 9px;
      pointer-events: none;
    }
    .app-toast-stack .app-notification-card {
      pointer-events: auto;
      animation: app-toast-enter .16s ease-out;
    }
    body.impersonation-active .app-toast-stack { top: 156px; }
    @keyframes app-toast-enter {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .field-note { color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 400; }
    .dependent-field[hidden] { display: none !important; }
    .scope-help { margin-top: 10px; padding: 10px 12px; border: 1px dashed #b7c3d4; border-radius: 6px; background: #f8fafc; color: var(--muted); font-size: 13px; line-height: 1.45; }
    .action-cell { min-width: 210px; }
    .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
    details.edit-panel { width: 100%; }
    details.edit-panel > summary { cursor: pointer; display: inline-flex; min-height: 38px; align-items: center; padding: 9px 12px; border-radius: 6px; background: #e7eef7; color: var(--ink); font-weight: 700; }
    details.edit-panel[open] > summary { margin-bottom: 10px; }
    .edit-box { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #f8fafc; min-width: min(760px, 72vw); }
    .inline-delete { margin-top: 8px; }
    .login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
    .login .panel { width: min(420px, 100%); }
    .permission-matrix th, .permission-matrix td { text-align: center; }
    .permission-matrix th:first-child, .permission-matrix td:first-child { text-align: left; }
    .perm-cell { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; border: 1px solid #cfd7e3; background: #fff; }
    .perm-cell input { margin: 0; }
    .perm-cell.na { color: #98a2b3; background: #f2f4f7; }
    .badge-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .badge { background: #eef8f7; color: #056f73; border: 1px solid #b7e4df; border-radius: 999px; padding: 3px 8px; font-size: 12px; }
    .role-builder { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
    .permission-tree details { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 10px; overflow: hidden; }
    .permission-tree summary { cursor: pointer; padding: 11px 12px; font-weight: 700; background: #f8fafc; }
    .permission-tree .branch { padding: 10px 12px 12px 18px; display: grid; gap: 8px; }
    .permission-tree .resource-title { font-weight: 700; color: var(--ink); margin-top: 4px; }
    .perm-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #b7e4df; background: #eef8f7; color: #056f73; border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 700; cursor: grab; margin: 3px 4px 3px 0; }
    .perm-chip:active { cursor: grabbing; }
    .role-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 14px; margin-bottom: 12px; }
    .role-card.drop-active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 140, 140, .12); }
    .role-card h3 { margin: 0 0 4px; font-size: 18px; }
    .role-meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
    .assigned-perms { min-height: 46px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding: 8px; background: #f8fafc; border-radius: 6px; border: 1px dashed #cfd7e3; }
    .assigned-perm { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: #232825; color: #fff; padding: 5px 8px; font-size: 12px; }
    .assigned-perm button { padding: 0 4px; background: transparent; color: #fff; border: 0; font-size: 14px; line-height: 1; }
    .role-permission-layout { display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); gap: 16px; align-items: start; }
    .tree-list { display: grid; gap: 4px; }
    .tree-node { margin-left: calc(var(--depth) * 16px); }
    .tree-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; color: var(--ink); text-decoration: none; font-weight: 700; }
    .tree-link:hover, .tree-link.active { background: #eef8f7; border-color: #b7e4df; color: #056f73; }
    .tree-link.planned { color: #667085; font-weight: 600; }
    .tree-badge { color: #667085; font-size: 11px; font-weight: 700; border: 1px solid #d0d5dd; border-radius: 999px; padding: 2px 6px; }
    .detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .detail-head h2 { margin-bottom: 4px; }
    .detail-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; }
    .permission-block { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-top: 12px; background: #fff; }
    .permission-block h3 { margin: 0 0 10px; font-size: 16px; }
    .check-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; }
    .check-option { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 10px; border: 1px solid #d8dee9; border-radius: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
    .check-option input { width: auto; }
    .record-dialog .reviewer-choice-grid {
      grid-template-columns: minmax(0, 1fr);
      min-width: 0;
    }
    .record-dialog .reviewer-choice-grid .check-option {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 0;
      min-width: 0;
      padding: 0;
      overflow: hidden;
    }
    .record-dialog .reviewer-choice-grid .check-option > label {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      min-width: 0;
      padding: 9px 10px;
    }
    .record-dialog .reviewer-choice-grid .check-option > label > span {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .record-dialog .reviewer-choice-grid .reviewer-direct-choice {
      align-items: center;
      border-top: 1px solid var(--line);
      background: #f8faf9;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
    }
    .field-table th, .field-table td { text-align: center; }
    .field-table th:first-child, .field-table td:first-child { text-align: left; }
    .permission-field-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; scrollbar-width: thin; }
    .permission-field-table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    .permission-field-table-wrap .field-table { min-width: 620px; border: 0; border-radius: 0; }
    .field-check { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px; border: 0; border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; }
    .field-check input { margin: 0; }
    .field-check span { line-height: 1.2; white-space: nowrap; }
    .field-check:has(input:disabled) { cursor: not-allowed; }
    .permission-bulk-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid #b7e4df; border-radius: 8px; background: #f3fbfa; }
    .permission-bulk-title { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
    .permission-bulk-title span, .permission-bulk-status { color: var(--muted); font-size: 12px; }
    .permission-bulk-options { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .profile-module-bulk-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); flex: 1 1 560px; gap: 4px 10px; }
    .profile-module-bulk-options .permission-bulk-check { justify-content: flex-start; }
    .permission-bulk-check { min-width: 32px; }
    .permission-bulk-check input:indeterminate { accent-color: #d68b00; }
    .permission-bulk-status { flex: 1 1 220px; text-align: right; }
    .permission-field-name { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 190px; }
    .permission-field-name > span { min-width: 0; }
    .permission-state-input { display: none !important; }
    .child-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
    .child-card { display: block; border: 1px solid #d8dee9; border-radius: 6px; padding: 10px; color: var(--ink); text-decoration: none; background: #fff; }
    .child-card:hover { border-color: #b7e4df; background: #eef8f7; }
    .role-select { min-width: 260px; }
    .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
    .admin-tabs a { color: var(--ink); text-decoration: none; font-weight: 700; border: 1px solid #cfd7e3; border-radius: 6px; padding: 8px 10px; background: #fff; }
    .admin-tabs a:hover { border-color: #b7e4df; background: #eef8f7; color: #056f73; }
    .summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
    .summary-item { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fff; }
    .summary-item strong { display: block; font-size: 24px; margin-top: 4px; }
    .role-hierarchy { display: grid; gap: 8px; }
    .role-hierarchy-row { margin-left: calc(var(--depth) * 18px); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; background: #fff; }
    .role-hierarchy-row strong { display: block; }
    .vtiger-console { display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); gap: 16px; align-items: start; }
    .vtiger-tree { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px; }
    .vtiger-root { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 9px 10px; border-radius: 6px; background: #232825; color: #fff; font-weight: 700; }
    .vtiger-role-row { margin-left: calc(var(--depth) * 20px); position: relative; }
    .vtiger-role-row::before { content: ""; position: absolute; left: -10px; top: -7px; width: 10px; height: 26px; border-left: 1px solid #cfd7e3; border-bottom: 1px solid #cfd7e3; display: block; }
    .vtiger-role-link { display: grid; gap: 3px; min-height: 46px; padding: 9px 10px; margin-top: 8px; border: 1px solid #d8dee9; border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; }
    .vtiger-role-link:hover, .vtiger-role-link.active { border-color: #64c9c4; background: #eef8f7; color: #056f73; }
    .vtiger-role-link strong { font-size: 14px; }
    .vtiger-role-link span { color: var(--muted); font-size: 12px; }
    .role-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
    .role-detail-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fff; }
    .role-detail-card span { color: var(--muted); font-size: 12px; }
    .role-detail-card strong { display: block; margin-top: 4px; }
    .user-console { display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); gap: 16px; align-items: start; }
    .user-list { display: grid; gap: 8px; }
    .user-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 12px; border: 1px solid #d8dee9; border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; }
    .user-link:hover, .user-link.active { border-color: #64c9c4; background: #eef8f7; color: #056f73; }
    .user-link strong { display: block; font-size: 14px; }
    .user-link span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
    .user-status { flex: 0 0 auto; border-radius: 999px; border: 1px solid #d0d5dd; padding: 3px 8px; color: #667085; font-size: 12px; font-weight: 700; }
    .user-link.active .user-status { border-color: #64c9c4; color: #056f73; }
    .user-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
    details.setting-section { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 12px; overflow: hidden; }
    details.setting-section > summary { cursor: pointer; padding: 13px 14px; font-weight: 700; background: #f8fafc; }
    details.setting-section[open] > summary { border-bottom: 1px solid var(--line); }
    .setting-body { padding: 14px; }
    .permission-grid-table th, .permission-grid-table td { text-align: center; }
    .permission-grid-table th:first-child, .permission-grid-table td:first-child { text-align: left; }
    .compact-check { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 4px; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
    .compact-check input { margin: 0; }
    .compact-check:has(input:disabled) { cursor: not-allowed; }
    .section-lead { margin: -4px 0 12px; color: var(--muted); }
    .checkbox-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .checkbox-list label { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 10px; border: 1px solid #d8dee9; border-radius: 6px; color: var(--ink); font-weight: 700; }
    .checkbox-list input { width: auto; }
    .mini-table td, .mini-table th { font-size: 13px; }
    .table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
    .table-wrap table { min-width: 760px; border: 0; border-radius: 0; }
    .mobile-table-scroll-hint { display: none; }
    .filter-table th { min-width: 155px; vertical-align: bottom; }
    .filter-table th > span { display: block; min-height: 20px; }
    .column-filter { margin-top: 7px; padding: 7px 8px; border-color: #b9d9d6; background: #fff; font-size: 12px; font-weight: 400; }
    .column-filter-range { display: grid; grid-template-columns: minmax(128px, 1fr); gap: 5px; margin-top: 7px; }
    .column-filter-range .column-filter { width: 100%; margin-top: 0; }
    .quick-date-filter { position: relative; display: block; min-width: 150px; }
    .quick-date-filter > input { min-width: 0; width: 100%; }
    /*
     * Keep the shared calendar outside scrolling/clipping filter toolbars.
     * JavaScript anchors this fixed layer to the input and flips it above the
     * control when the viewport has no room below.
     */
    .quick-date-popover { position: fixed; z-index: 95; top: auto; left: auto; display: grid; grid-template-columns: 158px 252px; width: max-content; max-width: min(440px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(16, 24, 40, .16); }
    .quick-date-popover[hidden] { display: none !important; }
    .quick-date-presets { display: grid; align-content: start; gap: 1px; padding: 6px; border-right: 1px solid var(--line); background: #f8faf9; }
    .quick-date-presets button { width: 100%; min-height: 32px; padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); text-align: left; font-size: 13px; font-weight: 600; }
    .quick-date-presets button:hover, .quick-date-presets button:focus-visible { background: #e2f3f1; color: var(--primary-dark); }
    .quick-date-calendar { display: grid; gap: 7px; padding: 8px; background: #fff; }
    .quick-date-range-status { display: block; padding: 6px 8px; border-radius: 5px; background: #e8f6f4; color: var(--primary-dark); text-align: center; font-size: 12px; font-weight: 700; }
    .quick-date-range-status[hidden] { display: none !important; }
    .quick-date-calendar-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 5px; }
    .quick-date-calendar-head button { width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 20px; }
    .quick-date-calendar-head button:hover, .quick-date-calendar-head button:focus-visible { background: #eef8f7; color: var(--primary-dark); }
    .quick-date-calendar-head strong { text-align: center; text-transform: capitalize; font-size: 13px; }
    .quick-date-weekdays, .quick-date-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
    .quick-date-weekdays span { padding: 3px 0; color: var(--muted); text-align: center; font-size: 10px; font-weight: 700; }
    .quick-date-calendar-grid button { min-width: 30px; min-height: 30px; padding: 3px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 600; }
    .quick-date-calendar-grid button:hover, .quick-date-calendar-grid button:focus-visible { background: #e2f3f1; color: var(--primary-dark); }
    .quick-date-calendar-grid button[data-outside-month="1"] { color: #98a2a0; font-weight: 400; }
    .quick-date-calendar-grid button[aria-current="date"] { box-shadow: inset 0 0 0 1px #71bcb6; }
    .quick-date-calendar-grid button[aria-selected="true"] { background: var(--primary); color: #fff; }
    .quick-date-calendar-grid button[data-range-start="1"] { box-shadow: inset 0 0 0 2px var(--primary-dark); }
    .filter-value-wrap .quick-date-filter { display: inline-block; width: min(100%, 310px); vertical-align: middle; }
    .quick-date-filter input[type="date"]::-webkit-calendar-picker-indicator,
    .quick-date-filter input[type="datetime-local"]::-webkit-calendar-picker-indicator { pointer-events: none; }
    form[id$="-filter-form"] select,
    form[id$="-filter-form"] input[type="date"],
    form[id$="-filter-form"] input[type="datetime-local"],
    form[id$="-filter-form"] input[type="month"],
    form[id$="-filter-form"] input[type="time"],
    select[form$="-filter-form"],
    input[form$="-filter-form"][type="date"],
    input[form$="-filter-form"][type="datetime-local"],
    input[form$="-filter-form"][type="month"],
    input[form$="-filter-form"][type="time"] { cursor: pointer; }
    form[id$="-filter-form"] input[type="date"],
    form[id$="-filter-form"] input[type="datetime-local"],
    form[id$="-filter-form"] input[type="month"],
    form[id$="-filter-form"] input[type="time"],
    input[form$="-filter-form"][type="date"],
    input[form$="-filter-form"][type="datetime-local"],
    input[form$="-filter-form"][type="month"],
    input[form$="-filter-form"][type="time"] { position: relative; padding-right: 36px; background-repeat: no-repeat; background-position: right 11px center; background-size: 16px 16px; }
    form[id$="-filter-form"] input[type="date"],
    form[id$="-filter-form"] input[type="datetime-local"],
    form[id$="-filter-form"] input[type="month"],
    input[form$="-filter-form"][type="date"],
    input[form$="-filter-form"][type="datetime-local"],
    input[form$="-filter-form"][type="month"] {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235d6761' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3C/svg%3E");
    }
    form[id$="-filter-form"] input[type="time"],
    input[form$="-filter-form"][type="time"] {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235d6761' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    }
    form[id$="-filter-form"] input[type="date"]::-webkit-calendar-picker-indicator,
    form[id$="-filter-form"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    form[id$="-filter-form"] input[type="month"]::-webkit-calendar-picker-indicator,
    form[id$="-filter-form"] input[type="time"]::-webkit-calendar-picker-indicator,
    input[form$="-filter-form"][type="date"]::-webkit-calendar-picker-indicator,
    input[form$="-filter-form"][type="datetime-local"]::-webkit-calendar-picker-indicator,
    input[form$="-filter-form"][type="month"]::-webkit-calendar-picker-indicator,
    input[form$="-filter-form"][type="time"]::-webkit-calendar-picker-indicator {
      position: absolute;
      inset: 0;
      width: auto;
      height: auto;
      opacity: 0;
      cursor: pointer;
    }
    .data-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .data-toolbar > .actions { flex: 1; }
    .import-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
    .import-form label { min-width: 240px; }
    .import-form input[type="file"] { padding: 7px 8px; }
    .import-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--line); }
    .import-steps span { min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; color: var(--muted); font-size: 13px; font-weight: 700; }
    .import-steps span.done { color: var(--primary-dark); background: #edf8f6; }
    .import-steps strong { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #e8ecea; color: var(--ink); }
    .import-steps .done strong { background: var(--primary); color: #fff; }
    .import-upload-panel, .import-mapping-panel { margin-bottom: 16px; }
    .import-upload-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 10px; align-items: end; }
    .import-upload-form input[type="file"] { min-height: 42px; padding: 7px 9px; }
    .import-review-form { display: grid; gap: 0; }
    .import-mapping-table { min-width: 900px; }
    .import-mapping-table th:nth-child(1) { width: 30%; }
    .import-mapping-table th:nth-child(2) { width: 36%; }
    .import-mapping-table th:nth-child(3) { width: 15%; }
    .import-mapping-table td { vertical-align: middle; }
    .import-mapping-table td:first-child strong, .import-mapping-table td:first-child span { display: block; }
    .order-import-template-mapping-table { min-width: 1180px; table-layout: fixed; }
    .order-import-template-mapping-table th:nth-child(1) { width: 20%; }
    .order-import-template-mapping-table th:nth-child(2) { width: 28%; }
    .order-import-template-mapping-table th:nth-child(3) { width: 18%; }
    .order-import-template-mapping-table th:nth-child(4) { width: 25%; }
    .order-import-template-mapping-table th:nth-child(5) { width: 9%; }
    .generic-import-mapping-table { min-width: 1180px; table-layout: fixed; }
    .generic-import-mapping-table th:nth-child(1) { width: 22%; }
    .generic-import-mapping-table th:nth-child(2) { width: 28%; }
    .generic-import-mapping-table th:nth-child(3) { width: 20%; }
    .generic-import-mapping-table th:nth-child(4) { width: 23%; }
    .generic-import-mapping-table th:nth-child(5) { width: 7%; }
    .transfer-source-samples { display: grid; gap: 3px; max-height: 108px; overflow: auto; }
    .transfer-source-samples span { display: block; padding: 3px 6px; border-radius: 4px; background: #f3f7f6; overflow-wrap: anywhere; }
    .transfer-mapping-action { display: grid; justify-items: start; gap: 6px; }
    .import-default-input { min-width: 0; width: 100%; }
    .import-currency-pair { display: grid; grid-template-columns: minmax(82px, .45fr) minmax(105px, .55fr); align-items: center; gap: 5px 8px; margin-top: 7px; padding-top: 7px; border-top: 1px dashed #bdd8d4; }
    .import-currency-pair[hidden] { display: none !important; }
    .import-currency-pair-label { color: var(--ink); font-size: 12px; font-weight: 750; }
    .import-pair-currency-select { width: 100%; min-width: 0; min-height: 38px; }
    .import-currency-pair .field-note { grid-column: 1 / -1; margin: 0; }
    .import-currency-badge { margin-left: 6px; }
    .import-default-badge { display: block; width: max-content; margin-top: 3px; color: var(--primary-dark); font-size: 10px; font-weight: 700; }
    .import-mapping-table input,
    .import-mapping-table select,
    .import-mapping-table textarea,
    .import-mapping-table button,
    .import-mapping-table .searchable-select-trigger { min-height: 42px; }
    .import-mapping-table > tbody > tr,
    .import-line-mapping-grid > tbody > tr,
    .order-import-line-table > tbody > tr { min-height: 42px; height: 42px; }
    .import-fixed-inline-rows > tr > td { min-height: 42px; height: 42px; vertical-align: middle; }
    .import-fixed-row { background: #f7faf9; }
    .import-fixed-row > td:first-child strong,
    .import-fixed-row > td:first-child span { display: block; }
    .import-fixed-inline-table { margin-top: 10px; }
    .import-fixed-value { width: 100%; min-width: 0; }
    .import-fixed-add-row td { min-height: 42px; padding: 10px; background: #f7f9f8; text-align: left; }
    .import-fixed-add-row .import-fixed-empty { margin-right: 10px; color: var(--muted); }
    .import-fixed-remove { min-height: 42px; margin-top: 0; white-space: nowrap; }
    .mapping-status { display: inline-flex; min-height: 28px; align-items: center; padding: 4px 8px; border-radius: 999px; border: 1px solid #ead29d; background: #fff8e8; color: var(--warn); font-size: 12px; font-weight: 700; white-space: nowrap; }
    .mapping-status.ok { border-color: #b7e4df; background: #edfdfa; color: var(--primary-dark); }
    .import-preview-table { min-width: 620px; }
    .import-preview-panel .msg { margin: 14px 0 0; }
    .import-skip-confirm { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--ink); }
    .import-review-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
    .workflow-command-row { display: flex; justify-content: flex-end; margin: 0 0 10px; }
    .order-import-upload-panel { margin-bottom: 16px; }
    .order-import-intake-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9f8; font-size: 13px; }
    .order-import-intake-status span { color: var(--muted); }
    .order-document-review { display: grid; gap: 16px; }
    .order-import-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
    .order-import-summary-grid > div { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--line); background: #fff; }
    .order-import-summary-grid > div:last-child { border-right: 0; }
    .order-import-summary-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
    .order-import-summary-grid strong { display: block; overflow-wrap: anywhere; }
    .order-import-warnings { margin: 12px 0 0; padding: 10px 12px 10px 30px; border: 1px solid #ead29d; border-radius: 6px; background: #fff8e8; color: #7a4b08; }
    .order-import-line-table { width: max(100%, var(--order-line-table-width, 980px)); min-width: 980px; table-layout: fixed; }
    .order-import-line-table thead th:first-child,
    .order-import-line-table tbody tr[data-order-import-line] > td:first-child { min-width: 52px; width: 52px; background: #fff; text-align: center; }
    .order-import-line-table thead th:first-child { background: #e4f5f3; }
    .order-import-line-table th[data-review-line-table-header],
    .order-import-line-table td[data-review-line-cell] { width: 300px; min-width: 300px; max-width: 300px; }
    .order-import-line-table th[data-review-line-table-header] { vertical-align: top; }
    .order-import-line-table .review-structure-edge { min-width: 132px; width: 132px; background: #f5fbfa; text-align: center; }
    .order-import-line-table thead .review-structure-edge { background: #dff3f1; }
    .order-import-line-table td { vertical-align: middle; }
    .order-import-line-table input,
    .order-import-line-table select,
    .order-import-line-table .searchable-select-trigger { width: 100%; min-height: 42px; }
    .order-import-line-table textarea.source-correction-input { height: 42px; min-height: 42px; resize: vertical; }
    .review-row-number-column { vertical-align: middle !important; font-weight: 700; }
    .review-line-field-card { min-width: 0; display: grid; grid-template-rows: 42px 42px 42px 68px 42px; align-content: start; gap: 8px; padding: 0; background: transparent; }
    .review-line-field-card > small { min-height: 42px; display: flex; align-items: center; color: var(--muted); overflow-wrap: anywhere; }
    .review-line-field-card > * { min-height: 42px; }
    .review-line-card-name, .review-line-card-target, .review-line-card-default, .review-line-card-action { min-width: 0; }
    .review-line-card-name { position: relative; display: flex; align-items: center; gap: 5px; }
    .review-line-card-name .required-mark { flex: 0 0 auto; }
    .review-line-card-default { display: grid; grid-template-rows: 42px auto; align-content: start; gap: 3px; }
    .review-line-card-action { display: flex; align-items: center; }
    .review-line-field-card .review-source-label,
    .review-line-field-card select,
    .review-line-field-card .searchable-select-trigger,
    .review-line-field-card [data-review-default] { width: 100%; height: 42px; min-height: 42px; max-height: 42px; }
    .review-line-field-card textarea[data-review-default] { height: 42px; min-height: 42px; resize: vertical; }
    .review-line-field-card .import-column-remove { min-height: 42px; justify-self: start; margin-top: 0; }
    .review-line-add-column { display: grid; align-content: center; gap: 6px; min-height: 42px; }
    .review-row-actions-column .icon-button { margin: 0 auto; }
    .review-row-actions-column > span { display: block; margin-bottom: 4px; font-size: 11px; }
    .order-import-review-actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); background: var(--page); }
    .order-import-template-save { display: flex; align-items: end; gap: 8px; min-width: min(520px, 50vw); }
    .order-import-template-save label { display: grid; flex: 1 1 240px; gap: 4px; margin: 0; }
    .order-import-template-save label > span { color: var(--muted); font-size: 11px; font-weight: 700; }
    .order-import-template-save input { min-width: 180px; }
    .order-import-submit-status { min-width: 0; flex: 1 1 auto; color: var(--muted); font-size: 13px; }
    .source-correction-status { margin: 0 0 10px; color: var(--primary-dark); font-size: 12px; font-weight: 700; }
    .source-correction-input { width: 100%; min-width: 150px; background: #fff; }
    .source-correction-input.is-corrected { border-color: var(--primary); background: #f0fbf9; box-shadow: inset 3px 0 0 var(--primary); }
    .source-correction-cell { min-width: 180px; }
    .source-default-cell { background: #fffaf0; }
    .source-default-cell .source-correction-input { border-color: #d7b96e; }
    .source-default-note { margin-top: 4px; color: #7a4b08; }
    .review-source-label { width: 100%; min-width: 0; }
    .review-source-origin {
      display: block;
      min-width: 0;
      margin-top: 6px;
      padding: 7px 9px;
      border: 1px solid #cfe3e0;
      border-radius: 5px;
      background: #f5fbfa;
    }
    .review-source-origin > small {
      display: block;
      margin-bottom: 3px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .02em;
      text-transform: uppercase;
    }
    .review-source-origin > output {
      display: block;
      max-width: 100%;
      color: var(--text);
      font-size: 12px;
      line-height: 1.4;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }
    .review-source-reference { display: block; margin-top: 6px; }
    .review-target-cell, .review-value-cell { vertical-align: top; }
    .import-column-remove { margin-top: 6px; padding: 5px 8px; font-size: 11px; white-space: nowrap; }
    .import-row-remove { margin: 0; }
    .review-add-header-row td, .review-add-row td { padding: 10px; text-align: left; background: #f7f9f8; }
    .review-header-table { min-width: 1180px; table-layout: fixed; }
    .review-header-table th:nth-child(1) { width: 20%; }
    .review-header-table th:nth-child(2) { width: 29%; }
    .review-header-table th:nth-child(3) { width: 28%; }
    .review-header-table th:nth-child(4) { width: 18%; }
    .review-header-table th:last-child, .review-header-table td:last-child { width: 64px; text-align: center; }
    .review-header-table td { vertical-align: top; }
    .review-header-table input,
    .review-header-table select,
    .review-header-table .searchable-select-trigger { width: 100%; min-height: 42px; }
    .review-header-table textarea.source-correction-input { height: 42px; min-height: 42px; resize: vertical; }
    .order-import-source { margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9f8; }
    .order-import-source h3 { margin: 0 0 10px; font-size: 14px; }
    .order-import-source > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
    .order-import-source span { min-width: 0; }
    .order-import-source small, .order-import-source strong { display: block; overflow-wrap: anywhere; }
    .order-import-source small { margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
    .order-import-source-values { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
    .order-import-source-values > summary { cursor: pointer; color: var(--primary-dark); font-weight: 750; }
    .order-import-source-values .table-wrap { max-height: min(42vh, 460px); margin-top: 10px; overflow: auto; }
    .order-import-template-upload { grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.3fr) auto; }
    .import-template-designer .compact-form-grid { grid-template-columns: minmax(260px, 1fr) minmax(220px, .7fr) minmax(170px, auto); align-items: end; }
    .table-wrap table.import-line-mapping-grid { min-width: 980px; table-layout: fixed; }
    .import-line-mapping-grid th[data-source-field], .import-line-mapping-grid td[data-source-field] { width: 300px; min-width: 300px; max-width: 300px; vertical-align: top; }
    .import-line-mapping-grid th:first-child, .import-line-mapping-grid td:first-child { min-width: 64px; width: 64px; background: #fff; text-align: center; }
    .import-line-mapping-grid thead th:first-child { background: #e4f5f3; }
    .import-line-mapping-grid thead th { padding: 10px; }
    .import-line-mapping-grid tbody tr:nth-child(even) td:first-child { background: #fbfcfb; }
    .import-line-map-heading { min-height: 52px; display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
    .import-line-map-heading strong, .import-line-map-heading small { display: block; overflow-wrap: anywhere; }
    .import-line-map-heading small { color: var(--muted); font-size: 10px; font-weight: 500; text-transform: none; }
    .import-line-map-control { min-width: 0; }
    .import-line-map-default { min-width: 0; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, .08); }
    .import-line-mapping-grid input,
    .import-line-mapping-grid select,
    .import-line-mapping-grid textarea,
    .import-line-mapping-grid button,
    .import-line-mapping-grid .searchable-select-trigger { min-height: 42px; }
    .import-line-mapping-grid td[data-source-field] { white-space: normal; overflow-wrap: anywhere; }
    .import-line-mapping-grid .source-empty { color: var(--muted); font-style: italic; }
    .searchable-select-host { min-width: 0; width: 100%; }
    .searchable-select-trigger { position: relative; width: 100%; min-width: 0; min-height: 42px; display: block; overflow: hidden; padding: 9px 36px 9px 12px; border: 1px solid #cfd7d2; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: none; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
    .searchable-select-trigger::after { content: "⌄"; position: absolute; top: 50%; right: 12px; color: var(--muted); transform: translateY(-54%); }
    .searchable-select-trigger:hover { border-color: #80bdb7; background: #fff; color: var(--ink); }
    .searchable-select-trigger.mapping-needs-attention,
    .searchable-select-trigger.mapping-needs-attention:hover { color: #b42318; font-weight: 750; }
    .searchable-select-trigger[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 143, 136, .12); }
    .searchable-select-popup { position: fixed; z-index: 140; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid #aab8b2; border-radius: 7px; background: #fff; box-shadow: 0 16px 38px rgba(22, 34, 28, .22); }
    .searchable-select-popup[hidden] { display: none; }
    .searchable-select-search-area { display: grid; gap: 5px; padding: 9px; border-bottom: 1px solid var(--line); background: #f7f9f8; }
    .searchable-select-search { width: 100%; min-height: 40px; }
    .searchable-select-count { min-height: 16px; color: var(--muted); font-size: 11px; }
    .searchable-select-options { min-height: 0; overflow: auto; padding: 5px; overscroll-behavior: contain; }
    .searchable-select-option { width: 100%; min-height: 38px; display: block; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); box-shadow: none; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    .searchable-select-option:hover, .searchable-select-option:focus-visible { background: #edf8f6; color: var(--primary-dark); }
    .searchable-select-option[aria-selected="true"] { background: #dff4f1; color: var(--primary-dark); font-weight: 750; }
    .searchable-select-option.is-clear-option { color: var(--muted); font-style: italic; }
    .searchable-select-empty { padding: 10px; color: var(--muted); font-size: 12px; text-align: center; }
    .checkbox-line { min-height: 42px; display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; padding-bottom: 2px; }
    .checkbox-line input[type="checkbox"] { flex: 0 0 auto; }
    .action-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
    .action-group form { margin: 0; }
    .link-button { min-height: 30px; padding: 3px 0; border: 0; background: transparent; color: var(--primary-dark); box-shadow: none; font-size: 12px; text-decoration: underline; }
    .link-button:hover { background: transparent; color: var(--primary); }
    .link-button.danger-link { color: var(--danger); }
    .sticky-form-actions { position: sticky; bottom: 0; z-index: 6; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); background: var(--page); }
    .import-source-grid { width: max-content; min-width: 100%; }
    .import-source-grid th:first-child { min-width: 58px; width: 58px; }
    .import-source-grid th:not(:first-child) { min-width: 160px; }
    .import-source-grid th span, .import-source-grid th small { display: block; }
    .import-source-grid th small { max-width: 220px; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.35; text-transform: none; white-space: normal; }
    .import-source-grid td .mapping-status { display: flex; width: max-content; max-width: 300px; margin-top: 6px; white-space: normal; }
    details.column-settings { min-width: min(360px, 100%); border: 1px solid var(--line); border-radius: 6px; background: #fff; }
    details.column-settings > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; }
    details.column-settings form { padding: 0 12px 12px; }
    .table-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
    .custom-fields { border-top: 1px solid var(--line); padding-top: 12px; }
    .custom-field-row {
      grid-column: 1 / -1;
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }
    .custom-field-row > label { min-width: 0; align-content: start; }
    .custom-field-row > label :is(input, select, textarea) { min-width: 0; }
    .custom-field-single-row > label { grid-column: 1 / -1; }
    .custom-currency-field-row {
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fbfcfb;
    }
    .list-panel { padding: 0; overflow: visible; }
    .list-toolbar { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); }
    .list-context { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--surface-muted, #f7faf9); }
    .list-context strong { flex: 0 0 auto; }
    .list-context span { color: var(--muted); font-size: 12px; line-height: 1.4; }
    .quick-search { flex: 1; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, auto) minmax(105px, auto) auto; gap: 8px; align-items: center; }
    .quick-search input, .quick-search select { min-height: 40px; }
    .attendance-work-date-range {
      min-width: min(360px, 100%);
      display: grid;
      grid-template-columns: repeat(2, minmax(150px, 1fr));
      gap: 8px;
      align-items: end;
    }
    .attendance-work-date-filter {
      min-width: 0;
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
    }
    .attendance-work-date-filter input {
      min-width: 0;
      width: 100%;
      color: var(--ink);
      font-size: 14px;
      font-weight: 500;
    }
    .command-actions { min-width: 0; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; align-items: center; }
    .command-actions > :is(a.button, button, .quick-view-user-control) { flex: 0 0 auto; white-space: nowrap; }
    .attendance-salary-advance-create-disabled,
    .attendance-salary-advance-create-disabled:hover {
      max-width: min(290px, 100%);
      flex-direction: column;
      align-items: flex-start;
      border: 1px solid #c8d0cb;
      background: #e7ebe8;
      color: #56605a;
      cursor: not-allowed;
      white-space: normal;
      text-align: left;
      box-shadow: none;
    }
    .attendance-salary-advance-create-disabled:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
    .attendance-salary-advance-create-disabled-reason {
      font-size: 11px;
      font-weight: 600;
      line-height: 1.35;
    }
    .quick-view-user-control { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
    .quick-view-user-control select { width: min(270px, 28vw); min-width: 210px; min-height: 40px; }
    .quick-view-user-control button { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
    details.action-menu { position: relative; }
    details.action-menu > summary { list-style: none; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #cfd7d2; border-radius: 6px; background: #fff; padding: 9px 13px; font-weight: 700; }
    details.action-menu > summary::-webkit-details-marker { display: none; }
    details.action-menu[open] > summary { border-color: #70bdb7; background: #edf8f6; color: var(--primary-dark); }
    .action-menu-popover { position: absolute; z-index: 35; right: 0; top: calc(100% + 6px); width: min(520px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(25, 36, 30, .18); padding: 8px; }
    .workspace-config-dialog { width: min(720px, calc(100vw - 32px)); max-width: 720px; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 20px 56px rgba(25, 36, 30, .28); }
    .workspace-config-dialog::backdrop { background: rgba(25, 36, 30, .42); }
    .workspace-config-dialog-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
    .workspace-config-dialog-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fff; }
    .workspace-config-dialog-header > div { display: grid; gap: 2px; min-width: 0; }
    .workspace-config-dialog-header strong { font-size: 17px; }
    .workspace-config-dialog-header small { color: var(--muted); }
    .workspace-config-dialog-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 6px 10px; }
    .workspace-config-dialog-body > .menu-link:first-child { margin-top: 8px; }
    .workspace-config-close { flex: 0 0 auto; min-width: 38px; min-height: 38px; padding: 5px 10px; border-radius: 6px; font-size: 22px; line-height: 1; }
    .menu-link { display: block; width: 100%; padding: 10px; border-radius: 5px; color: var(--ink); text-decoration: none; font-weight: 650; }
    .menu-link:hover { background: #edf8f6; color: var(--primary-dark); }
    .menu-form, .menu-section { display: grid; gap: 9px; padding: 11px 10px; border-top: 1px solid var(--line); }
    .menu-form button, .menu-section button { justify-self: start; }
    .saved-view-manager-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .saved-view-manager-heading span { color: var(--muted); font-size: 12px; }
    .saved-view-menu-item { border: 1px solid var(--line); border-radius: 6px; background: #fff; }
    .saved-view-menu-item.is-active { border-color: #70bdb7; background: #f3fbfa; }
    .saved-view-menu-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; cursor: pointer; font-weight: 700; }
    .saved-view-menu-item > summary span { min-width: 0; overflow-wrap: anywhere; }
    .saved-view-menu-item > summary small { flex: 0 0 auto; color: var(--muted); font-weight: 550; }
    .saved-view-menu-detail { display: grid; gap: 8px; padding: 0 10px 10px; border-top: 1px solid var(--line); }
    .saved-view-menu-detail ul { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 12px; }
    .saved-view-menu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
    .saved-view-menu-actions form { margin: 0; }
    .saved-view-menu-actions :is(a.button, button) { min-height: 34px; padding: 7px 10px; font-size: 12px; }
    .saved-view-rename-form { display: flex; flex: 1 1 240px; flex-wrap: wrap; align-items: center; gap: 7px; }
    .saved-view-rename-form input[name="name"] { flex: 1 1 130px; min-width: 0; min-height: 34px; padding: 7px 9px; font-size: 12px; }
    .workspace-view-settings > .saved-views { padding: 0; border: 0; background: transparent; }
    .workspace-view-settings .saved-view-selector { flex-wrap: wrap; overflow-x: visible; }
    .workspace-view-settings .view-chips { flex-wrap: wrap; }
    .column-picker-heading { display: grid; grid-template-columns: minmax(140px, 1fr) 66px 66px 66px; align-items: end; gap: 5px; padding: 0 5px 5px 27px; color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.2; text-align: center; }
    .column-picker-heading span:first-child { text-align: left; }
    .column-picker { display: grid; grid-template-columns: 1fr; gap: 5px; max-height: 290px; overflow: auto; }
    .column-option { display: grid; grid-template-columns: 22px minmax(140px, 1fr) 66px 66px 66px; align-items: center; gap: 5px; min-height: 38px; padding: 4px 5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
    .column-option.dragging { opacity: .45; }
    .column-drag { color: var(--muted); cursor: grab; text-align: center; }
    .column-picker label { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink); font-weight: 550; }
    .column-picker label span { min-width: 0; overflow-wrap: anywhere; }
    .column-pin-check { justify-content: center; }
    .column-pin-check input { margin: 0; }
    .column-order-actions { display: inline-flex; gap: 2px; }
    .column-order-actions button { width: 30px; min-height: 30px; padding: 0; border: 0; background: transparent; color: var(--primary-dark); font-size: 16px; }
    .column-order-actions button:hover { background: #edf8f6; }
    .saved-views { display: grid; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fafbfa; }
    .saved-view-selector { min-width: 0; display: flex; align-items: center; gap: 10px; overflow-x: auto; }
    .saved-view-selector > span { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
    .view-chips { display: flex; gap: 6px; align-items: center; }
    .view-chip { flex: 0 0 auto; color: var(--ink); text-decoration: none; border: 1px solid #d4dad6; background: #fff; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 650; }
    .view-chip:hover, .view-chip.active { color: var(--primary-dark); border-color: #70bdb7; background: #edf8f6; }
    .view-chip.active { box-shadow: inset 0 0 0 1px rgba(0, 128, 119, .12); }
    .status-filter-chips { flex-wrap: wrap; justify-content: flex-end; }
    .saved-view-current { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; padding: 7px 10px; border: 1px solid #cfe4df; border-radius: 6px; background: #f3fbfa; color: var(--primary-dark); font-size: 12px; }
    .saved-view-current span { flex: 0 0 auto; }
    .saved-view-current small { min-width: 0; color: #48615b; overflow-wrap: anywhere; }
    .saved-view-current.is-modified { border-color: #dfc889; background: #fff9e8; color: #785a0b; }
    .saved-view-current.is-empty { border-color: #e5bd8c; background: #fff7ed; color: #8b4b14; }
    .saved-view-current.is-custom { border-color: #bdd7e7; background: #f1f8fc; color: #285f7d; }
    .text-danger { border: 0; padding: 5px 8px; background: transparent; color: var(--danger); font-size: 12px; }
    .text-danger:hover { background: #fff1ef; }
    details.advanced-filters { border-bottom: 1px solid var(--line); background: #fff; }
    details.advanced-filters > summary { cursor: pointer; padding: 11px 14px; color: var(--primary-dark); font-size: 13px; font-weight: 700; }
    .advanced-filter-body { display: grid; gap: 8px; padding: 0 14px 14px; }
    .filter-match { display: flex; align-items: center; gap: 8px; max-width: 360px; color: var(--muted); font-size: 13px; font-weight: 700; }
    .filter-rule { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(210px, 2fr); gap: 8px; }
    .filter-value-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; min-width: 0; }
    .filter-value-wrap[hidden] { display: none; }
    .record-list-form { margin: 0; }
    .record-list-form .table-wrap { border: 0; border-radius: 0; }
    .list-panel.scroll-workspace { height: var(--list-workspace-height, calc(100dvh - 32px)); max-height: calc(100dvh - 16px); display: flex; flex-direction: column; overflow: hidden; }
    .scroll-workspace .record-list-form { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
    .scroll-workspace .list-data-scroll { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    .scroll-workspace > .list-data-scroll { min-height: 0; flex: 1 1 auto; }
    .scroll-workspace .table-footer, .scroll-workspace .bulk-toolbar { flex: 0 0 auto; }
    .list-data-scroll .record-table { overflow: visible; border-radius: 0; }
    .record-table { table-layout: auto; }
    .record-table th { min-width: 155px; padding: 9px 10px; background: #edf5f2; vertical-align: bottom; }
    .list-data-scroll .record-table thead th { position: sticky; top: 0; z-index: 6; box-shadow: 0 1px 0 var(--line); }
    .record-table th.select-cell, .record-table td.select-cell { min-width: 44px; width: 44px; text-align: center; background: #fff; }
    .record-table th.select-cell { background: #edf5f2; }
    .record-table th.issue-select-heading, .record-table td.issue-select-cell { min-width: 112px; width: 112px; padding: 0; text-align: center; box-shadow: -1px 0 0 var(--line); }
    .record-table th.issue-select-heading { padding: 9px 6px; background: #dcefeb; }
    .record-table td.issue-select-cell { background: #fff; vertical-align: middle; }
    .record-table tr:hover td.issue-select-cell { background: #f5fbf9; }
    .record-table thead th[data-column-pin="left"], .record-table thead th[data-column-pin="right"] { position: sticky; z-index: 7; background: #edf5f2; }
    .record-table thead th[data-column-pin="left"], .record-table tbody td[data-column-pin="left"] { left: var(--column-pin-offset, 0px); }
    .record-table thead th[data-column-pin="right"], .record-table tbody td[data-column-pin="right"] { right: var(--column-pin-offset, 0px); }
    .record-table tbody td[data-column-pin="left"], .record-table tbody td[data-column-pin="right"] { position: sticky; z-index: 3; background: #fff; box-shadow: none; }
    .record-table tbody td[data-column-pin] .pinned-cell-value { display: inline; padding: 2px 4px; margin: -2px -4px; border-radius: 2px; background: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    .record-table tr:hover td[data-column-pin], .record-table tr:focus td[data-column-pin] { background: #f2faf8; }
    .record-table tr:hover td[data-column-pin] .pinned-cell-value, .record-table tr:focus td[data-column-pin] .pinned-cell-value { background: #f2faf8; }
    .record-table .action-heading,
    .record-table th[data-fixed-column="actions"],
    .record-table .row-actions { min-width: 190px; }
    .sort-link { display: block; min-height: 20px; color: var(--ink); text-decoration: none; white-space: nowrap; }
    .sort-link:hover { color: var(--primary-dark); }
    .column-filter { min-height: 34px; }
    .row-actions { white-space: normal; vertical-align: middle; }
    .row-actions > * + * { margin-left: 0; }
    .row-actions form { display: inline-flex; margin-block: 0; vertical-align: middle; }
    .row-action-group { display: inline-flex; max-width: 100%; align-items: center; flex-wrap: wrap; gap: 8px; }
    .row-action-group > * { margin: 0 !important; }
    .compact-command-cell { min-width: 270px; vertical-align: middle; }
    .compact-command-form { display: grid; grid-template-columns: minmax(110px, 1fr) auto; align-items: center; gap: 8px; margin: 0; }
    .compact-command-form input { min-width: 0; min-height: 38px; padding: 8px 9px; }
    .compact-command-form button { min-height: 38px; padding: 8px 12px; white-space: nowrap; }
    .compact-command-status { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.35; }
    .record-identity { display: grid; align-content: center; gap: 4px; min-width: 0; }
    .record-identity > a, .record-identity > strong { display: block; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
    .record-identity > small { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
    .row-action { display: inline-flex; width: auto; min-height: 32px; align-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--primary-dark); padding: 6px 7px; text-decoration: none; font-size: 12px; font-weight: 700; }
    .row-action:hover { background: #edf8f6; }
    .row-action.danger-link { color: var(--danger); }
    .row-action.danger-link:hover { background: #fff1ef; }
    .record-data-row { cursor: pointer; }
    .record-data-row:hover td, .record-data-row:focus td { background: #f2faf8; }
    .record-data-row:focus { outline: 2px solid #70bdb7; outline-offset: -2px; }
    .inline-edit-cell { position: relative; min-width: 170px; cursor: default; }
    .inline-cell-display { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 7px; }
    .inline-cell-display > [data-inline-display] { min-width: 0; overflow-wrap: anywhere; }
    .inline-empty-value { color: #8a948e; font-size: 12px; font-style: italic; }
    .inline-edit-trigger { flex: 0 0 30px; width: 30px; min-height: 30px; padding: 0; border: 1px solid transparent; background: transparent; color: var(--primary-dark); font-size: 17px; opacity: 0; }
    .inline-edit-cell:hover .inline-edit-trigger, .inline-edit-cell:focus-within .inline-edit-trigger { opacity: 1; }
    .inline-edit-trigger:hover, .inline-edit-trigger:focus-visible { border-color: #9bcfc9; background: #e8f7f4; }
    .inline-cell-editor { position: relative; min-width: 210px; display: grid; grid-template-columns: minmax(130px, 1fr) auto; align-items: start; gap: 6px; padding: 3px 0; }
    .inline-cell-editor[hidden], .inline-cell-display[hidden] { display: none !important; }
    .inline-edit-input { width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px; font-size: 13px; }
    .inline-currency-edit-cell { min-width: 320px; }
    .inline-currency-edit-cell .inline-cell-editor { min-width: 300px; grid-template-columns: minmax(220px, 1fr) auto; }
    .inline-currency-pair-editor { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(86px, .55fr); gap: 5px; min-width: 220px; }
    .inline-edit-currency-code { width: 100%; min-width: 0; min-height: 34px; padding: 6px 7px; font-size: 13px; }
    .inline-currency-code-readonly { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; border: 1px solid #d6ddd9; border-radius: 5px; background: #f3f6f4; padding: 6px 8px; color: var(--muted); font-size: 12px; font-weight: 750; }
    textarea.inline-edit-input { min-height: 72px; resize: vertical; }
    select.inline-edit-input[multiple] { min-height: 82px; }
    .inline-edit-actions { display: inline-flex; gap: 3px; }
    .inline-edit-actions button { width: 32px; min-height: 32px; padding: 0; border-radius: 5px; font-size: 16px; }
    .inline-edit-save { background: var(--primary); color: #fff; }
    .inline-edit-cancel { border: 1px solid #cfd7d2; background: #fff; color: var(--ink); }
    .inline-edit-error { grid-column: 1 / -1; max-width: 330px; color: var(--danger); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
    .inline-suggestion-menu { position: absolute; z-index: 58; top: calc(100% + 3px); left: 0; width: max(100%, 270px); max-width: min(380px, calc(100vw - 36px)); max-height: min(240px, 38vh); overflow: auto; border: 1px solid #b7d8d4; border-radius: 6px; background: #fff; box-shadow: 0 12px 30px rgba(25, 36, 30, .2); padding: 5px; text-align: left; }
    .inline-suggestion-menu.open-above { top: auto; bottom: calc(100% + 3px); }
    .inline-suggestion-menu[hidden] { display: none !important; }
    .inline-suggestion-title { display: block; padding: 5px 7px 6px; border-bottom: 1px solid #e3e9e6; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
    [data-inline-suggestion-options] { display: grid; gap: 2px; padding-top: 3px; }
    [data-inline-suggestion-value] { display: block; width: 100%; min-height: 32px; overflow: hidden; border: 0; border-radius: 4px; background: #fff; padding: 6px 8px; color: var(--ink); text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
    [data-inline-suggestion-value]:hover, [data-inline-suggestion-value].active { background: #e9f7f4; color: var(--primary-dark); }
    .inline-edit-cell.inline-editing { background: #fffaf0 !important; box-shadow: inset 0 0 0 2px #e2b85c; }
    .inline-edit-cell.inline-editing[data-column-pin] { z-index: 2; background: transparent !important; box-shadow: none; }
    .inline-edit-cell.inline-editing[data-column-pin] .inline-cell-editor { border-radius: 4px; background: #fffaf0; box-shadow: 0 0 0 2px #e2b85c; }
    .inline-edit-cell.inline-saving { opacity: .65; }
    .inline-edit-cell.right .inline-edit-input { text-align: right; }
    .quick-entry-control { min-width: 135px; min-height: 34px; padding: 7px 9px; font-size: 13px; }
    .workspace-entry-toggle, .workspace-entry-commit-actions button { white-space: nowrap; }
    .workspace-entry-commit-actions { display: inline-flex; align-items: center; gap: 6px; }
    .workspace-mode-status { align-self: center; color: var(--primary-dark); font-size: 12px; font-weight: 700; white-space: nowrap; }
    .workspace-entry-static { min-height: 34px; display: flex; align-items: center; margin-top: 7px; padding: 7px 8px; border: 1px dashed #d2b470; border-radius: 6px; background: #fffaf0; color: var(--muted); font-size: 12px; font-weight: 650; }
    .list-panel.entry-mode .column-filter { border-color: #d4a445; background: #fffdf7; }
    .list-panel.entry-mode .sort-link { color: var(--muted); pointer-events: none; }
    .list-panel.entry-mode .saved-views, .list-panel.entry-mode .advanced-filters { opacity: .55; pointer-events: none; }
    .list-panel.entry-mode .quick-search { opacity: .55; }
    .bulk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #eed29d; background: #fff8e8; }
    .bulk-toolbar select { width: auto; min-width: 190px; }
    .bulk-scope-label { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
    .bulk-edit-controls { display: flex; flex: 1 1 420px; align-items: flex-start; gap: 8px; min-width: min(100%, 380px); }
    .bulk-edit-controls[hidden], .bulk-value-editor[hidden] { display: none !important; }
    .bulk-edit-controls > select { flex: 0 1 260px; }
    .bulk-value-editor { flex: 1 1 280px; min-width: 220px; }
    .bulk-value-editor label { display: grid; gap: 4px; margin: 0; color: var(--ink); font-size: 12px; font-weight: 700; }
    .bulk-value-editor :is(input, select, textarea) { width: 100%; min-height: 38px; }
    .bulk-value-editor select[multiple] { min-height: 88px; }
    .bulk-value-editor .field-note { display: block; margin-top: 3px; }
    .bulk-currency-controls { display: grid; grid-template-columns: minmax(210px, 1.5fr) minmax(120px, .7fr); gap: 8px; margin-top: 7px; }
    .bulk-currency-controls label { min-width: 0; }
    .bulk-currency-controls [hidden] { display: none !important; }
    .bulk-action-form { margin: 0; }
    .bulk-error { color: var(--danger); font-weight: 700; }
    .bulk-undo-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; border-bottom: 1px solid #a9dacf; background: #effaf7; color: var(--primary-dark); font-size: 13px; font-weight: 650; }
    .bulk-undo-banner button { flex: 0 0 auto; }
    .status-badge { display: inline-flex; align-items: center; min-height: 24px; border: 1px solid #d3d9d5; border-radius: 999px; padding: 3px 8px; background: #f5f6f5; color: #56605a; font-size: 12px; font-weight: 700; white-space: nowrap; }
    .status-badge.positive { border-color: #a6d8c2; background: #ecf9f2; color: var(--ok); }
    .status-badge.warning { border-color: #efcf95; background: #fff8e8; color: var(--warn); }
    .status-badge.neutral { border-color: #d3d9d5; background: #f1f3f2; color: #59635d; }
    .attendance-time { display: inline-flex; flex-direction: column; gap: 2px; white-space: nowrap; }
    .attendance-time small { color: var(--muted); font-size: 11px; }
    .attendance-punch-evidence-link { display: inline-flex; border-radius: 6px; padding: 2px 5px; color: var(--primary-dark); text-decoration: none; outline-offset: 2px; }
    .attendance-punch-evidence-link:hover { background: #eaf7f4; box-shadow: inset 0 0 0 1px #b8ddd5; }
    .attendance-punch-evidence-link .attendance-time small { color: var(--primary-dark); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
    .attendance-punch-evidence-popover { position: fixed; z-index: 92; top: 76px; right: 16px; width: min(220px, calc(100vw - 32px)); max-height: min(62vh, 440px); overflow: auto; border: 1px solid #a9ccc6; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(18, 39, 34, .2); }
    .attendance-punch-evidence-popover-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--line); background: #fff; }
    .attendance-punch-evidence-popover-head strong { color: var(--ink); font-size: 13px; }
    .attendance-punch-evidence-popover-body { padding: 5px 0 7px; }
    .attendance-punch-evidence { min-width: 0; }
    .attendance-punch-evidence-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
    .attendance-punch-evidence-item { min-width: 0; padding: 4px 12px; background: #fff; }
    .attendance-punch-evidence-clock { display: block; color: var(--ink); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; }
    .attendance-punch-evidence-item.is-selected-for-calculation .attendance-punch-evidence-clock { color: var(--danger); font-weight: 800; }
    .attendance-punch-evidence-empty { padding: 10px 12px; color: var(--muted); font-size: 12px; }
    .attendance-punch-evidence-progress { display: flex; justify-content: flex-end; padding: 6px 8px 0; }
    .attendance-punch-evidence-progress:empty { display: none; }
    .attendance-punch-evidence-progress .button { flex: 0 0 auto; min-height: 30px; padding: 5px 8px; font-size: 12px; }
    .attendance-code { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    .attendance-code > small { color: var(--muted); font-size: 11px; }
    .attendance-mapping-table { min-width: 1180px; }
    .attendance-mapping-actions { display: grid; min-width: 330px; gap: 7px; }
    .attendance-mapping-form { display: flex; align-items: center; gap: 7px; margin: 0; }
    .attendance-mapping-form input[name="system_username"] { min-width: 190px; }
    .attendance-mapping-form button { white-space: nowrap; }
    .empty-state { height: 150px; text-align: center; vertical-align: middle; color: var(--muted); }
    .list-panel .table-footer { margin: 0; padding: 11px 14px; border-top: 1px solid var(--line); }
    .record-dialog { position: fixed; z-index: 71; top: 0; right: 0; width: var(--record-panel-width, clamp(440px, 38vw, 720px)); height: 100vh; overflow: auto; border-left: 1px solid var(--line); background: #fff; box-shadow: -10px 0 28px rgba(20, 28, 24, .13); }
    .record-dialog.wide-dialog { width: var(--record-panel-width, clamp(720px, 70vw, 1180px)); }
    .record-dialog-resizer { position: fixed; z-index: 74; top: 0; bottom: 0; left: calc(100vw - var(--record-panel-width)); width: 14px; transform: translateX(-50%); cursor: col-resize; touch-action: none; outline: 0; }
    .record-dialog-resizer::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: 52px; transform: translate(-50%, -50%); border-radius: 3px; background: #8b9992; box-shadow: 0 0 0 1px #fff; opacity: .7; }
    .record-dialog-resizer:hover::after, .record-dialog-resizer:focus-visible::after, body.record-panel-resizing .record-dialog-resizer::after { width: 5px; background: var(--primary); opacity: 1; }
    .record-dialog-resizer:focus-visible { box-shadow: inset 3px 0 0 var(--primary); }
    body.record-panel-resizing, body.record-panel-resizing * { cursor: col-resize !important; user-select: none !important; }
    body.record-panel-resizing main { transition: none; }
    .dialog-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fff; }
    .dialog-head h2 { margin: 0; font-size: 20px; }
    .dialog-description { margin: 5px 0 0; font-size: 13px; }
    .dialog-body { container: action-host / inline-size; padding: 20px; }
    .record-dialog .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dialog-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 0 2px; background: #fff; }
    .record-dialog .form-grid > :is(.span-2, .dialog-form-actions) { grid-column: 1 / -1; }
    .dialog-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; padding: 14px 0 2px; border-top: 1px solid var(--line); background: #fff; }
    :is(.form-grid, .compact-form, .compact-form-grid) > .dialog-form-actions { grid-column: 1 / -1; }
    .dialog-form-actions > form { margin: 0; }
    .form-field-section { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
    .form-field-section .custom-fields { border-top: 0; padding-top: 0; }
    .form-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .form-section-title h3, .form-field-section h3 { margin: 0; font-size: 15px; }
    .form-section-title span { color: var(--muted); font-size: 12px; font-weight: 700; }
    .empty-form-fields .msg { margin: 0; }
    .record-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
    .record-detail-field { min-width: 0; padding: 11px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
    .record-detail-field:nth-child(even) { border-right: 0; }
    .record-detail-field dt { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
    .record-detail-field dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; }
    [data-shared-raw-payload-detail] { min-width: 0; max-width: 100%; overflow: hidden; }
    [data-shared-raw-payload-detail] .raw-payload-content { min-width: 0; max-width: 100%; }
    [data-shared-raw-payload-detail] pre[data-raw-payload] { box-sizing: border-box; max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
    .panel-actions { flex-wrap: wrap; }
    .panel-actions form { margin: 0; }
    :is(.dialog-actions, .dialog-form-actions, .panel-actions, .workflow-bar, .import-review-actions) > :is(a.button, button),
    :is(.dialog-actions, .dialog-form-actions, .panel-actions, .workflow-bar) > form > button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; margin: 0; white-space: normal; text-align: center; line-height: 1.2; }
    :is(.dialog-actions, .dialog-form-actions, .panel-actions, .workflow-bar, .import-review-actions) > .muted { min-width: 0; flex: 1 1 240px; overflow-wrap: anywhere; line-height: 1.4; }
    .dependency-note { margin: 12px 0 0; padding: 10px 12px; border: 1px solid #eed29d; border-radius: 6px; background: #fff8e8; color: #7a4b08; font-size: 13px; }
    .module-tabs { display: flex; gap: 22px; margin: -7px 0 16px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
    .module-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 700; white-space: nowrap; }
    .module-tabs a:hover, .module-tabs a.active { border-bottom-color: var(--primary); color: var(--primary-dark); }
    .workspace-context-actions { justify-content: flex-end; margin-bottom: 14px; }
    .payroll-payslip { max-width: 1280px; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 12px 32px rgba(24, 39, 31, .08); }
    .payroll-payslip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #edf8f6 0%, #fff 72%); }
    .payroll-payslip-eyebrow { display: block; margin-bottom: 5px; color: var(--primary-dark); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .payroll-payslip-title { margin: 0; color: var(--ink); font-size: clamp(24px, 3vw, 34px); font-weight: 850; letter-spacing: -.02em; }
    .payroll-payslip-subtitle { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
    .payroll-payslip-period { flex: 0 0 auto; min-width: 210px; display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #b7d9d5; border-radius: 9px; background: #fff; text-align: right; }
    .payroll-payslip-period span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
    .payroll-payslip-period strong { color: var(--primary-dark); font-size: 17px; }
    .payroll-payslip-period small { color: var(--muted); font-size: 11px; }
    .payroll-payslip-identity { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border-bottom: 1px solid var(--line); background: #fff; }
    .payroll-identity-item { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line); }
    .payroll-identity-item:last-child { border-right: 0; }
    .payroll-identity-item span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
    .payroll-identity-item strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
    .user-period-confirmation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin: 0 auto 14px; padding: 14px 16px; border: 1px solid #b7d9d5; border-radius: 10px; background: #f3faf8; box-shadow: 0 4px 16px rgba(24, 87, 73, .05); }
    .payroll-payslip > .user-period-confirmation { margin: 0; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
    .user-period-confirmation.is-unavailable { border-color: var(--line); background: #f8faf9; }
    .user-period-confirmation-copy { min-width: 220px; flex: 1 1 360px; display: grid; grid-template-columns: minmax(0, auto) auto; align-items: center; justify-content: start; gap: 5px 10px; }
    .user-period-confirmation-copy > span { color: var(--primary-dark); font-size: 12px; font-weight: 800; }
    .user-period-confirmation-copy > strong:not(.status-badge) { font-size: 14px; }
    .user-period-confirmation-copy > small { grid-column: 1 / -1; color: var(--muted); line-height: 1.4; }
    .user-period-confirmation-form { flex: 0 0 auto; margin: 0; }
    .user-period-confirmation-return { flex: 1 1 420px; display: flex; align-items: end; justify-content: flex-end; gap: 8px; margin: 0; }
    .user-period-confirmation-return label { flex: 1 1 260px; margin: 0; }
    .user-period-confirmation-return :is(input, textarea) { min-width: 220px; min-height: 40px; }
    .user-period-subordinate-confirmations { flex: 1 0 100%; padding-top: 10px; border-top: 1px solid #cfe3df; }
    .user-period-subordinate-confirmations summary { min-height: 44px; display: flex; align-items: center; padding: 8px 2px; cursor: pointer; color: var(--primary-dark); font-size: 13px; font-weight: 800; }
    .user-period-subordinate-confirmations ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
    .user-period-subordinate-confirmations li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .user-period-subordinate-confirmations li > div { flex: 1 1 220px; display: grid; gap: 3px; }
    .user-period-subordinate-confirmations li small { color: var(--muted); }
    .payroll-attendance-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 4px; background: #f8faf9; }
    .payroll-attendance-item { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .payroll-attendance-item.empty { grid-column: 1 / -1; }
    .payroll-attendance-item span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
    .payroll-attendance-item strong { display: block; margin-top: 4px; font-size: 20px; font-variant-numeric: tabular-nums; }
    .payroll-attendance-item.empty strong { font-size: 13px; font-weight: 650; }
    .payroll-payslip-body { display: grid; gap: 14px; padding: 16px 20px 22px; background: #f8faf9; }
    .payroll-group { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
    .payroll-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #f3f8f6; }
    .payroll-group-head h3 { margin: 0; font-size: 16px; }
    .payroll-group-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
    .payroll-group-source { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px; border: 1px solid #b7d9d5; border-radius: 999px; background: #edf8f6; color: var(--primary-dark); font-size: 11px; font-weight: 750; }
    .payroll-mapping-flow { display: grid; grid-template-columns: minmax(0, 1.35fr) 34px minmax(0, .9fr) 34px minmax(0, 1fr); align-items: stretch; gap: 8px; padding: 16px; }
    .payroll-mapping-stage { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .payroll-mapping-stage.result { border-color: #9dd1c6; background: #effaf7; }
    .payroll-mapping-stage h4 { margin: 0 0 10px; font-size: 14px; }
    .payroll-mapping-arrow { align-self: center; color: var(--primary); text-align: center; font-size: 24px; font-weight: 850; }
    .payroll-map-list { display: grid; gap: 7px; margin: 0; }
    .payroll-map-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding-top: 7px; border-top: 1px dashed #dfe5e2; }
    .payroll-map-list > div:first-child { padding-top: 0; border-top: 0; }
    .payroll-map-list dt { min-width: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
    .payroll-map-list dd { margin: 0; text-align: right; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
    .payroll-map-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 2px solid #b7d9d5; }
    .payroll-map-total span { min-width: 0; color: var(--ink); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
    .payroll-map-total strong { color: var(--primary-dark); text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .payroll-map-separate { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
    .payroll-map-separate dt small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.35; }
    .payroll-meal-calculation { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 3px 5px; }
    .payroll-meal-equation { color: var(--muted); font-size: 11px; font-weight: 650; }
    .payroll-meal-calculation strong { color: var(--ink); font: inherit; }
    .payroll-mapping-result-value { display: block; margin-top: 16px; color: var(--primary-dark); text-align: right; font-size: clamp(22px, 3vw, 30px); font-weight: 850; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .payroll-detail-table-wrap { width: 100%; overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: thin; }
    .payroll-detail-table { min-width: 900px; table-layout: fixed; border: 0; border-radius: 0; }
    .payroll-detail-table th { background: #f7faf9; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
    .payroll-detail-table thead th:nth-child(1) { width: 25%; }
    .payroll-detail-table thead th:nth-child(2) { width: 35%; }
    .payroll-detail-table thead th:nth-child(3) { width: 16%; text-align: right; }
    .payroll-detail-table thead th:nth-child(4) { width: 24%; text-align: right; }
    .payroll-detail-table tbody + tbody tr:first-child > * { border-top: 1px solid var(--line); }
    .payroll-detail-table tbody tr:not(:last-child) > td { border-bottom-style: dashed; }
    .payroll-deduction-table { min-width: 680px; }
    .payroll-deduction-table thead th:nth-child(1) { width: 44%; text-align: left; }
    .payroll-deduction-table thead th:nth-child(2) { width: 32%; text-align: right; }
    .payroll-deduction-table thead th:nth-child(3) { width: 24%; text-align: right; }
    .payroll-deduction-table .payroll-detail-parameter { background: #fbfcfb; color: var(--ink); font-weight: 650; }
    .payroll-deduction-table .payroll-detail-amount:empty { background: #fff; }
    .payroll-deduction-summary .payroll-detail-parameter { color: var(--ink); font-weight: 800; }
    .payroll-deduction-summary .payroll-detail-value { color: var(--muted); text-align: left; font-weight: 650; }
    .payroll-deduction-basis { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .payroll-deduction-basis strong { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .payroll-detail-item-name { vertical-align: middle; background: #fbfcfb; color: var(--ink) !important; overflow-wrap: anywhere; }
    .payroll-detail-parameter { vertical-align: middle; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
    .payroll-detail-value { vertical-align: middle; text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .payroll-detail-amount { vertical-align: middle; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .payroll-detail-table tfoot th, .payroll-detail-table tfoot td { border-top: 2px solid #b7d9d5; background: #f3f8f6; }
    .payroll-detail-table tfoot th { color: var(--ink); text-align: right; font-size: 12px; font-weight: 850; letter-spacing: 0; text-transform: none; }
    .payroll-detail-table tfoot .payroll-detail-amount { color: var(--primary-dark); font-size: 15px; }
    .payroll-group-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fbfcfb; }
    .payroll-group-total span { color: var(--muted); font-size: 12px; font-weight: 750; }
    .payroll-group-total strong { color: var(--ink); font-size: 19px; font-variant-numeric: tabular-nums; }
    .payroll-net-pay-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: 1px solid #9dd1c6; border-radius: 9px; background: linear-gradient(135deg, #eaf8f4, #f8fcfb); }
    .payroll-net-pay-card span { display: block; color: var(--primary-dark); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
    .payroll-net-pay-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
    .payroll-net-pay-card strong { color: var(--primary-dark); text-align: right; font-size: clamp(24px, 4vw, 36px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .payroll-empty-group { margin: 0; padding: 18px 16px; color: var(--muted); font-size: 13px; }
    .payroll-foundation-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
    .mobile-payroll-payslip { width: min(100%, 720px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 auto; }
    .mobile-payroll-hero { display: grid; gap: 12px; padding: 16px; border: 1px solid #9dd1c6; border-radius: 14px; background: linear-gradient(145deg, #eaf8f4, #fff); }
    .mobile-payroll-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .mobile-payroll-hero h2 { margin: 0; font-size: 21px; }
    .mobile-payroll-hero p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
    .mobile-payroll-period { flex: 0 0 auto; display: grid; gap: 2px; padding: 8px 10px; border-radius: 9px; background: #fff; color: var(--primary-dark); text-align: right; }
    .mobile-payroll-period span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
    .mobile-payroll-person { display: grid; gap: 8px; margin: 0; }
    .mobile-payroll-person > div { min-width: 0; display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); gap: 8px 12px; padding-top: 8px; border-top: 1px solid #cfe3df; }
    .mobile-payroll-person dt { color: var(--muted); font-size: 12px; }
    .mobile-payroll-person dd { min-width: 0; margin: 0; font-size: 14px; font-weight: 750; overflow-wrap: break-word; }
    .mobile-payroll-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .mobile-payroll-kpi { min-width: 0; padding: 11px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
    .mobile-payroll-kpi span { display: block; min-height: 31px; color: var(--muted); font-size: 12px; line-height: 1.3; }
    .mobile-payroll-kpi strong { display: block; margin-top: 5px; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .mobile-payroll-section { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
    .mobile-payroll-section-head { display: grid; gap: 4px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: #f3f8f6; }
    .mobile-payroll-section-head h3 { margin: 0; font-size: 16px; }
    .mobile-payroll-section-head p { margin: 0; color: var(--muted); font-size: 12px; }
    .mobile-payroll-steps { display: grid; gap: 8px; padding: 12px; }
    .mobile-payroll-step { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
    .mobile-payroll-step.result { border-color: #9dd1c6; background: #effaf7; }
    .mobile-payroll-step h4 { margin: 0 0 10px; font-size: 14px; }
    .mobile-payroll-step-arrow { color: var(--primary); text-align: center; font-size: 22px; font-weight: 850; line-height: 1; }
    .mobile-payroll-result-value { display: block; max-width: 100%; color: var(--primary-dark); font-size: clamp(16px, 6vw, 25px); font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
    .mobile-payroll-items { display: grid; gap: 10px; padding: 12px; }
    .mobile-payroll-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
    .mobile-payroll-item-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 12px; padding: 11px 12px; background: #f7faf9; }
    .mobile-payroll-item-head h4 { min-width: 0; margin: 0; font-size: 14px; overflow-wrap: break-word; }
    .mobile-payroll-item-amount { max-width: 100%; color: var(--primary-dark); font-size: clamp(13px, 4vw, 15px); font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
    .mobile-payroll-item dl { display: grid; gap: 0; margin: 0; }
    .mobile-payroll-item dl > div { min-width: 0; display: grid; gap: 4px; padding: 10px 12px; border-top: 1px dashed #dfe5e2; }
    .mobile-payroll-item dt { color: var(--muted); font-size: 12px; }
    .mobile-payroll-item dd { min-width: 0; margin: 0; font-size: 14px; font-weight: 700; overflow-wrap: break-word; }
    .mobile-payroll-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 2px solid #b7d9d5; background: #f3f8f6; }
    .mobile-payroll-total span { font-size: 13px; font-weight: 800; }
    .mobile-payroll-total strong { max-width: 100%; color: var(--primary-dark); font-size: clamp(13px, 4.5vw, 17px); font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
    .mobile-payroll-net { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px; border: 1px solid #9dd1c6; border-radius: 12px; background: linear-gradient(135deg, #eaf8f4, #f8fcfb); }
    .mobile-payroll-net span { color: var(--primary-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .mobile-payroll-net strong { min-width: 0; max-width: 100%; overflow-x: auto; color: var(--primary-dark); font-size: clamp(16px, 6vw, 28px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
    .mobile-payroll-payslip .payroll-map-list dd,
    .mobile-payroll-payslip .payroll-map-total strong { max-width: 100%; font-size: clamp(12px, 3.8vw, 14px); white-space: nowrap; overflow-wrap: normal; word-break: normal; }
    .attendance-payroll-table { min-width: 1120px; }
    .attendance-payroll-table th { min-width: 145px; }
    .attendance-payroll-table .payroll-index { min-width: 58px; width: 58px; text-align: center; }
    .attendance-payroll-table .payroll-user { min-width: 220px; }
    .attendance-payroll-table td.payroll-number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .attendance-payroll-table [data-payroll-formula-cell] { cursor: pointer; }
    .attendance-payroll-table td.payroll-formula-active {
      background: #fff7ed !important;
      box-shadow: inset 0 0 0 2px #f97316;
    }
    .attendance-payroll-table td.payroll-reference-active {
      background: #fff1f2 !important;
      box-shadow: inset 0 0 0 2px #dc2626;
      color: #991b1b;
      font-weight: 800;
    }
    .attendance-payroll-table tfoot td { position: sticky; bottom: 0; z-index: 4; border-top: 2px solid #d59b65; background: #fff0e3; font-weight: 800; }
    .payroll-calculation-tooltip {
      position: fixed;
      z-index: 220;
      width: min(520px, calc(100vw - 16px));
      padding: 9px 11px;
      border: 1px solid #3e4843;
      border-radius: 7px;
      background: #242a27;
      color: #fff;
      box-shadow: 0 10px 24px rgba(20, 27, 23, .24);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.45;
      white-space: pre-line;
      pointer-events: none;
    }
    .payroll-parameter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
    .payroll-parameter-chips code { padding: 4px 7px; border: 1px solid #b8d8d3; border-radius: 999px; background: #eff9f7; color: #075f5b; font-size: 12px; }
    .payroll-formula-grid { display: grid; gap: 10px; }
    .payroll-formula-row { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(150px, .55fr) minmax(110px, .4fr) minmax(260px, 1.5fr) repeat(2, minmax(100px, .45fr)); gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 7px; }
    .payroll-formula-row > * { min-width: 0; }
    .payroll-formula-source { align-self: center; overflow-wrap: anywhere; }
    .payroll-formula-source strong, .payroll-formula-source code { display: block; }
    .payroll-formula-source code { margin-top: 3px; color: #075f5b; }
    .order-status-tabs { display: flex; gap: 7px; align-items: center; overflow-x: auto; padding: 0 0 12px; }
    .order-status-tabs a { flex: 0 0 auto; display: inline-flex; gap: 7px; align-items: center; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 650; }
    .order-status-tabs a:hover { border-color: #70bdb7; background: #edf8f6; color: var(--primary-dark); }
    .order-status-tabs strong { min-width: 21px; padding: 2px 6px; border-radius: 999px; background: #eef1ef; text-align: center; font-size: 11px; }
    .order-lines-head { align-items: center; margin-top: 8px; }
    .order-line-wrap table { min-width: 1080px; }
    .order-line-table th:nth-child(1) { min-width: 210px; }
    .order-line-table th:nth-child(2) { min-width: 180px; }
    .order-line-table th:nth-child(3), .order-line-table th:nth-child(4), .order-line-table th:nth-child(5) { min-width: 115px; }
    .order-line-table th:nth-child(6) { min-width: 170px; }
    .order-line-table th:last-child { min-width: 52px; width: 52px; }
    .order-line-table input, .order-line-table select { min-width: 0; }
    .stock-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
    .order-detail-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
    .order-meta-grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .order-meta-grid div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; }
    .order-meta-grid span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }
    .order-meta-grid strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
    .order-summary-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
    .order-summary-strip span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); }
    .order-summary-strip strong { margin-left: 5px; color: var(--ink); }
    .order-customer-note { padding: 12px; border-left: 3px solid #70bdb7; background: #f7fbfa; }
    .order-customer-note p { margin: 3px 0; }
    .order-custom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .order-custom-grid div { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
    .order-custom-grid span { display: block; color: var(--muted); font-size: 11px; }
    .order-custom-grid strong { display: block; margin-top: 3px; overflow-wrap: anywhere; }
    .order-detail-table { min-width: 980px; }
    .workflow-bar { position: sticky; bottom: -20px; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 18px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fff; }
    .workflow-bar form { display: inline-flex; }
    .icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 25px; line-height: 1; }
    .icon-button:hover { background: #eef1ef; }
    .required-mark { color: var(--danger); }
    .back-link { display: inline-block; margin-bottom: 8px; color: var(--primary-dark); text-decoration: none; font-size: 13px; font-weight: 700; }
    .field-manager { display: grid; grid-template-columns: minmax(330px, 430px) minmax(0, 1fr); gap: 16px; align-items: start; }
    .field-form-panel { position: sticky; top: 18px; }
    .field-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lookup-config { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #f8fbfa; }
    .lookup-config legend { padding: 0 6px; font-weight: 800; }
    .lookup-mapping-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 12px 0 8px; }
    .lookup-mapping-head > div { display: grid; gap: 3px; min-width: 0; }
    .lookup-mapping-list { display: grid; gap: 8px; }
    .lookup-mapping-row { display: grid; grid-template-columns: minmax(150px, 1fr) 24px minmax(150px, 1fr) 38px; gap: 8px; align-items: end; }
    .lookup-mapping-arrow { align-self: center; color: var(--muted); text-align: center; font-weight: 800; }
    .lookup-mapping-row .icon-button { align-self: end; }
    .setting-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    label.inline-check, .inline-check { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; }
    .section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .section-head p { margin: -6px 0 10px; font-size: 13px; }
    .field-list-table { min-width: 980px; }
    .field-code { display: block; margin-top: 3px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
    .admin-summary-inline { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
    .admin-summary-inline span { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-size: 12px; }
    .admin-summary-inline strong { color: var(--ink); font-size: 14px; }
    .admin-user-filter { grid-template-columns: minmax(220px, 1fr) minmax(150px, auto) minmax(150px, auto) minmax(150px, auto) minmax(120px, auto) auto auto; }
    .admin-record-table { min-width: 980px; }
    .admin-record-table th { min-width: 140px; }
    .admin-record-table th:first-child { min-width: 170px; }
    .admin-record-table th:nth-child(3) { min-width: 260px; }
    .form-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 4px; }
    .form-section-head > div { display: grid; gap: 3px; }
    .form-section-head span { color: var(--muted); font-size: 12px; }
    .form-section-head input { width: min(240px, 100%); }
    .user-data-scope-section { display: grid; gap: 10px; }
    .user-scope-list { display: grid; gap: 10px; }
    .user-scope-row {
      min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line);
      border-radius: 8px; background: #f8faf9;
    }
    .user-scope-row legend { padding: 0 6px; font-weight: 800; }
    .user-scope-row-head {
      display: flex; justify-content: flex-end; margin: -4px 0 8px;
    }
    .user-scope-row-head button[hidden] { display: none; }
    .choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 2px; }
    .choice-tile { display: flex; align-items: flex-start; gap: 9px; min-height: 54px; padding: 10px; border: 1px solid #d5dcd8; border-radius: 6px; background: #fff; color: var(--ink); font-weight: 500; cursor: pointer; }
    .choice-tile:hover { border-color: #70bdb7; background: #f2faf8; }
    .choice-tile:has(input:checked) { border-color: #54aaa4; background: #eaf7f5; }
    .choice-tile input { margin-top: 2px; }
    .choice-tile span { display: grid; gap: 3px; min-width: 0; }
    .choice-tile strong { font-size: 13px; }
    .choice-tile small { color: var(--muted); font-size: 11px; }
    .attendance-identities { border: 0; margin: 0; padding: 0; min-width: 0; }
    .attendance-identities > legend { font-weight: 800; margin-bottom: 4px; }
    .attendance-device-choice-list { display: grid; gap: 10px; }
    .attendance-device-card { min-width: 0; border: 1px solid #d5dcd8; border-radius: 8px; padding: 12px; background: #fbfcfc; }
    .attendance-device-card > legend { padding: 0 6px; }
    .attendance-device-card > legend span { display: grid; gap: 2px; }
    .attendance-device-card > legend small { color: var(--muted); font-size: 11px; font-weight: 500; }
    .attendance-device-card .checkbox-list { margin-top: 4px; }
    .attendance-manual-codes { margin-top: 10px; display: grid; gap: 5px; }
    .attendance-manual-codes textarea { min-height: 64px; resize: vertical; }
    .scope-children { align-self: end; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #f8faf9; }
    .admin-workspace-tabs { display: flex; gap: 2px; margin-bottom: 14px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
    .admin-workspace-tab { flex: 0 0 auto; min-height: 43px; display: inline-flex; align-items: center; padding: 10px 13px; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; }
    .admin-workspace-tab:hover { color: var(--primary-dark); background: #f4f8f6; }
    .admin-workspace-tab.active { border-bottom-color: var(--primary); color: var(--primary-dark); background: #edf8f6; }
    .admin-tab-content { display: grid; gap: 14px; min-width: 0; }
    .admin-role-console { grid-template-columns: minmax(310px, 390px) minmax(0, 1fr); }
    .role-tree-panel { align-self: start; }
    .tree-search { margin: 4px 0 10px; }
    .role-create-button { white-space: nowrap; }
    .role-create-button span { font-size: 18px; line-height: 1; }
    .role-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .permission-workspace { padding: 0; overflow: hidden; }
    .permission-workspace .role-permission-layout { gap: 0; }
    .permission-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border-left: 3px solid #70bdb7; background: #f2faf8; color: var(--ink); }
    .permission-context > span:first-child { display: grid; gap: 3px; min-width: 0; }
    .permission-context small { color: var(--muted); }
    .permission-context.warning { border-left-color: #d79a2b; background: #fff8e8; }
    .permission-profile-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
    .permission-profile-links a { color: var(--primary-dark); font-size: 12px; font-weight: 700; }
    .permission-tree-column { min-width: 0; padding: 16px; border-right: 1px solid var(--line); background: #fafcfa; }
    .permission-detail-column { min-width: 0; padding: 16px; }
    .permission-detail-column .detail-head { align-items: flex-start; }
    .admin-config-grid {
      grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
      align-items: start;
    }
    .compact-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compact-config { margin-top: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; overflow: hidden; }
    .compact-config > summary { min-height: 42px; padding: 11px 13px; background: #f7faf8; color: var(--ink); cursor: pointer; font-weight: 800; }
    .compact-config[open] > summary { border-bottom: 1px solid var(--line); background: #edf8f6; color: var(--primary-dark); }
    .compact-config > form, .compact-config > .detail-grid, .compact-config > .attendance-rule-columns, .compact-config > .attendance-config-grid, .compact-config > .inline-form { margin: 12px; }
    .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .section-heading > div { min-width: 0; }
    .section-heading h2 { margin: 0 0 4px; }
    .section-heading p { margin: 0; color: var(--muted); }
    .detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .detail-grid > div { display: grid; gap: 4px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
    .detail-grid span { color: var(--muted); overflow-wrap: anywhere; }
    .attendance-detail-link { display: grid; gap: 2px; color: var(--primary-dark); text-decoration: none; }
    .attendance-detail-link small { color: var(--muted); font-size: 11px; font-weight: 700; }
    .attendance-detail-link:hover small { color: var(--primary-dark); text-decoration: underline; }
    .attendance-day-type-label {
      display: inline-flex;
      width: fit-content;
      padding: 2px 6px;
      border: 1px solid #f4b4ae;
      border-radius: 999px;
      background: #fff1f0;
      color: #b42318;
      font-size: 10px;
      font-weight: 850;
      line-height: 1.3;
    }
    .attendance-period-identity { display: grid; gap: 2px; min-width: 0; }
    .attendance-period-identity strong,
    .attendance-period-identity small { display: block; overflow-wrap: anywhere; }
    .attendance-period-identity small { color: var(--muted); font-size: 11px; font-weight: 700; }
    .attendance-period-run { display: grid; gap: 2px; min-width: 88px; }
    .attendance-period-run strong { color: var(--ink); }
    .attendance-period-run small,
    .attendance-missing-punch { color: var(--muted); font-size: 11px; font-weight: 700; }
    .attendance-missing-punch { display: inline-block; max-width: 150px; line-height: 1.35; }
    .attendance-cell-with-anomaly {
      display: grid;
      align-content: start;
      gap: 7px;
      min-width: 220px;
      max-width: 320px;
      overflow: visible;
    }
    .attendance-anomaly-flag {
      display: grid;
      gap: 4px;
      width: 100%;
      min-width: 0;
      max-width: 320px;
      box-sizing: border-box;
      padding: 8px 9px;
      border: 1px solid #fecaca;
      border-radius: 8px;
      background: #fff1f2;
      color: #b42318;
      font-size: 11px;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }
    .attendance-anomaly-flag.is-reviewed {
      border-color: var(--border);
      background: var(--surface-soft);
      color: var(--muted);
    }
    .attendance-anomaly-flag.is-approved {
      border-color: #a6d8c2;
      background: #ecf9f2;
      color: var(--ok);
    }
    .attendance-anomaly-flag small {
      color: inherit;
      font-weight: 700;
    }
    .attendance-anomaly-stage {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
    }
    .attendance-anomaly-review-comparison {
      display: grid;
      gap: 4px;
      margin: 2px 0 0;
    }
    .attendance-anomaly-review-comparison > div {
      display: grid;
      grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
      align-items: baseline;
      gap: 7px;
      padding: 5px 7px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--surface);
      color: var(--ink);
    }
    .attendance-anomaly-review-comparison
      > [data-review-value-provenance="effective_reviewed_value"] {
      border-color: #a6d8c2;
      background: #ecf9f2;
      color: var(--ok);
    }
    .attendance-anomaly-review-comparison
      > [data-review-value-provenance="effective_reviewed_value"] dt {
      color: var(--ok);
    }
    .attendance-anomaly-review-comparison dt {
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }
    .attendance-anomaly-review-comparison dd {
      min-width: 0;
      margin: 0;
      font-size: 11px;
      font-weight: 850;
      overflow-wrap: anywhere;
    }
    td.is-reviewed-approved {
      background: #f3fbf7;
      box-shadow: inset 3px 0 0 #2f9e6f;
    }
    .attendance-reviewed-approved-value {
      display: grid;
      gap: 3px;
      color: var(--ok);
      font-weight: 800;
    }
    .attendance-reviewed-approved-label {
      width: fit-content;
      padding: 1px 5px;
      border: 1px solid #a6d8c2;
      border-radius: 999px;
      background: #ecf9f2;
      color: var(--ok);
      font-size: 9px;
      font-weight: 850;
      line-height: 1.4;
    }
    .attendance-rest-work-pending {
      display: grid;
      gap: 3px;
      margin-top: 4px;
      color: #a15c00;
      font-size: 10px;
      font-weight: 800;
    }
    .attendance-rest-work-pending a {
      width: fit-content;
      color: inherit;
      text-decoration: underline;
    }
    .attendance-anomaly-review-disclosure {
      margin: 1px 0 0;
      color: var(--muted);
      font-size: 10px;
    }
    .attendance-anomaly-review-disclosure > summary {
      width: fit-content;
      color: var(--primary-dark);
      cursor: pointer;
      font-weight: 800;
      list-style-position: inside;
    }
    .attendance-anomaly-review-disclosure > div {
      display: grid;
      gap: 3px;
      margin-top: 5px;
      padding: 7px 8px;
      border-left: 3px solid var(--border);
      border-radius: 4px;
      background: var(--surface);
      color: var(--ink);
      font-weight: 600;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }
    .attendance-anomaly-actions {
      display: grid;
      gap: 7px;
      min-width: 0;
      max-width: 100%;
    }
    .attendance-strong-anomaly-fallback {
      display: grid;
      gap: 7px;
      width: min(320px, 100%);
      min-width: 0;
      margin-bottom: 8px;
      white-space: normal;
    }
    .attendance-strong-anomaly-fallback-label {
      color: #b42318;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.35;
    }
    .attendance-anomaly-actions .inline-form { margin: 0; }
    .attendance-anomaly-waiting-action {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.4;
    }
    .attendance-anomaly-actions button.row-action {
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--accent);
      box-shadow: none;
      font-size: 11px;
    }
    .attendance-anomaly-editor {
      display: grid;
      gap: 7px;
      width: 100%;
      min-width: 0;
    }
    .attendance-anomaly-editor-toggle {
      width: fit-content;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      box-shadow: none;
      font-size: 11px;
      font-weight: 800;
    }
    .attendance-anomaly-editor-toggle:hover,
    .attendance-anomaly-editor-toggle:focus-visible,
    .attendance-anomaly-editor-toggle[aria-expanded="true"] {
      color: var(--primary-dark);
      text-decoration: underline;
    }
    .attendance-anomaly-editor-panel:not([hidden]) {
      display: grid;
    }
    .attendance-anomaly-editor-panel {
      display: none;
      position: static;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      gap: 9px;
      padding: 9px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      color: var(--ink);
    }
    .attendance-anomaly-editor-panel > form.stack {
      display: grid;
      width: 100%;
      min-width: 0;
    }
    .record-table .row-actions
    .attendance-anomaly-editor-panel:not([hidden]) {
      width: 320px;
      max-width: calc(100vw - 64px);
    }
    .attendance-anomaly-editor-panel label {
      display: grid;
      gap: 4px;
      min-width: 0;
      font-size: 11px;
      font-weight: 750;
    }
    .attendance-anomaly-editor-panel input:not([type="checkbox"]),
    .attendance-anomaly-editor-panel textarea {
      width: 100%;
      min-width: 0;
    }
    .attendance-anomaly-editor-panel input[type="checkbox"] {
      width: 16px;
      min-width: 16px;
      height: 16px;
      flex: 0 0 16px;
    }
    .attendance-anomaly-editor-panel .checkbox-line {
      align-items: flex-start;
      line-height: 1.4;
    }
    .attendance-anomaly-editor-panel textarea {
      min-height: 58px;
      resize: vertical;
    }
    .attendance-anomaly-review-summary {
      display: grid;
      gap: 2px;
      color: var(--muted);
      font-size: 10px;
    }
    .attendance-anomaly-editor-hint {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.4;
    }
    .attendance-anomaly-editor-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }
    .attendance-anomaly-editor-actions > button {
      width: 100%;
      min-width: 0;
    }
    .attendance-anomaly-editor-actions.is-single {
      grid-template-columns: minmax(0, 1fr);
    }
    @media (max-width: 720px) {
      .attendance-cell-with-anomaly {
        min-width: 180px;
        max-width: 240px;
      }
      .attendance-anomaly-editor-actions {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .attendance-leave-balance {
      position: sticky;
      top: 72px;
      z-index: 12;
      display: grid;
      width: fit-content;
      max-width: min(360px, calc(100vw - 32px));
      margin: 0 0 12px auto;
      padding: 10px 14px;
      border: 1px solid #9fd6cf;
      border-radius: 10px;
      background: #effaf8;
      box-shadow: 0 8px 22px rgba(25, 93, 84, .10);
      color: var(--primary-dark);
      text-align: right;
    }
    .attendance-leave-balance span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
      text-transform: uppercase;
    }
    .attendance-leave-balance strong { font-size: 21px; }
    .attendance-leave-balance small {
      max-width: 320px;
      color: var(--muted);
      line-height: 1.35;
    }
    .attendance-timesheet-table tr.is-detail-open td { background: #f1faf8; }
    .attendance-timesheet-table tr.attendance-unscheduled-punch-row > td {
      background: var(--attendance-day-bg);
      color: var(--attendance-day-ink);
      border-color: var(--attendance-day-border);
    }
    .attendance-unscheduled-shift,
    .attendance-unscheduled-work-date { display: grid; gap: 2px; }
    .attendance-unscheduled-evidence { font-weight: 750; }
    .attendance-timesheet-detail { scroll-margin-top: 16px; }
    .attendance-timesheet-detail .section-heading { margin-bottom: 12px; }
    .attendance-detail-summary { margin-bottom: 12px; }
    .attendance-detail-sections { display: grid; gap: 10px; }
    .attendance-detail-sections > details { margin-top: 0; }
    .attendance-detail-sections .table-wrap { margin: 0; border: 0; border-radius: 0; }
    .attendance-detail-sections table { min-width: 720px; }
    .attendance-detail-meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
    .attendance-rule-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .attendance-rule-columns > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #f8fbfa; }
    .attendance-rule-columns ul { margin: 7px 0 0; padding-left: 18px; color: var(--muted); }
    .attendance-rate-workspace { display: grid; gap: 9px; margin-top: 8px; }
    .attendance-rate-list { display: grid; gap: 7px; }
    .attendance-rate-rule { margin: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
    .attendance-rate-rule > summary { display: grid; grid-template-columns: minmax(160px, 1.25fr) minmax(150px, 1fr) minmax(110px, .7fr) auto; gap: 8px; align-items: center; min-height: 42px; padding: 9px 11px; cursor: pointer; list-style-position: inside; }
    .attendance-rate-rule > summary:hover { background: #f7fbfa; }
    .attendance-rate-rule[open] > summary { border-bottom: 1px solid var(--line); background: #edf8f6; }
    .attendance-rate-rule > summary span { min-width: 0; overflow-wrap: anywhere; }
    .attendance-rate-rule-body { display: grid; gap: 9px; padding: 10px 11px; }
    .attendance-rate-rule-body > p { margin: 0; color: var(--muted); }
    .attendance-rate-rule-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
    .attendance-rate-rule-actions .inline-form { margin: 0; }
    .attendance-rate-history { margin-top: 0; }
    .attendance-rate-history > .attendance-rate-list { margin: 10px; }
    .attendance-rule-usage { display: inline-flex; align-items: center; width: fit-content; padding: 3px 7px; border-radius: 999px; background: #eef2ef; color: var(--muted); font-size: 11px; font-weight: 800; }
    .attendance-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
    .attendance-shift-manager { display: grid; gap: 12px; }
    .attendance-shift-manager > .compact-config { margin-top: 0; }
    .attendance-shift-primary-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #f8fbfa; }
    .attendance-shift-primary-actions > .compact-config { flex: 1 1 100%; margin-top: 0; }
    .attendance-shift-primary-actions > .inline-form { margin: 0; }
    .attendance-shift-draft-editor { display: grid; gap: 12px; margin: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: #f8fbfa; }
    .attendance-shift-draft-editor .section-heading { margin: 0; }
    .attendance-shift-editor-form { display: grid; gap: 10px; min-width: 0; }
    .attendance-shift-field-group { min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
    .attendance-shift-field-group > legend { padding: 0 5px; color: var(--ink); font-weight: 800; }
    .attendance-shift-field-group > p { margin: 0 0 9px; color: var(--muted); font-size: 12px; }
    .attendance-shift-field-group .form-grid { margin: 0; }
    @media (max-width: 980px) {
      .attendance-rate-rule > summary { grid-template-columns: 1fr 1fr; }
    }
    .attendance-calendar-manager { display: grid; gap: 10px; }
    .attendance-calendar-manager > .compact-config { margin-top: 0; }
    .attendance-weekly-pattern { min-width: 0; }
    .attendance-weekly-grid { display: grid; gap: 8px; margin-top: 5px; }
    .attendance-weekday-row { display: grid; grid-template-columns: minmax(160px, .85fr) repeat(2, minmax(140px, 1fr)); gap: 9px; align-items: end; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #f8fbfa; }
    .attendance-weekday-row > label { min-width: 0; }
    .attendance-weekday-toggle { min-height: 40px; align-items: center; }
    .attendance-weekday-toggle > span { display: grid; gap: 1px; min-width: 0; }
    .attendance-weekday-toggle small { color: var(--muted); font-size: 11px; font-weight: 650; }
    .attendance-roster-workspace { min-width: 0; overflow: hidden; }
    .attendance-roster-toolbar { align-items: center; padding-block: 10px; }
    .attendance-roster-filter { min-width: 0; align-items: center; }
    .attendance-roster-period-control { display: inline-flex; flex: 0 0 auto; align-items: stretch; min-width: 0; }
    .attendance-roster-period-arrow { width: 36px; min-width: 36px !important; padding-inline: 7px !important; font-size: 20px; line-height: 1; }
    .attendance-roster-period-control > .attendance-roster-period-arrow:first-child { border-radius: 6px 0 0 6px; }
    .attendance-roster-period-control > .attendance-roster-period-arrow:last-child { margin-left: -1px; border-radius: 0 6px 6px 0; }
    .attendance-roster-period-picker { min-width: 0; margin-left: -1px; }
    .attendance-roster-period-picker > summary { min-width: 185px; height: 100%; border-radius: 0; padding-inline: 10px; white-space: nowrap; }
    .attendance-roster-period-picker > summary span { overflow: hidden; text-overflow: ellipsis; }
    .attendance-roster-period-picker .attendance-roster-period-popover { left: 50%; right: auto; width: min(530px, calc(100vw - 32px)); max-height: none; overflow: visible; transform: translateX(-50%); padding: 10px; }
    .attendance-roster-period-group { display: grid; gap: 7px; padding: 8px; border-bottom: 1px solid var(--line); }
    .attendance-roster-period-group > p { margin: -3px 0 0; font-size: 11px; line-height: 1.4; }
    .attendance-roster-period-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .attendance-roster-period-shortcuts .button { min-width: 0; min-height: 36px; padding: 7px 8px; justify-content: center; font-size: 12px; white-space: nowrap; }
    .attendance-roster-period-date { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 7px; align-items: end; padding: 10px 8px 8px; }
    .attendance-roster-period-date > strong { grid-column: 1 / 2; align-self: center; }
    .attendance-roster-period-date > .muted { grid-column: 2 / -1; align-self: center; font-size: 11px; text-align: right; }
    .attendance-roster-period-date > label { min-width: 0; margin: 0; font-size: 11px; }
    .attendance-roster-period-date > label input { width: 100%; min-width: 0; }
    .attendance-roster-period-date > button { min-height: 38px; white-space: nowrap; }
    .attendance-roster-workspace > form > .bulk-toolbar { position: sticky; z-index: 12; top: 46px; }
    .attendance-roster-bulk-shift { margin: 0; }
    .attendance-roster-bulk-shift select { min-width: 260px; }
    .attendance-roster-day-menu > summary { gap: 4px; white-space: nowrap; }
    .attendance-roster-day-menu .action-menu-popover {
      left: 0;
      right: auto;
      width: min(520px, calc(100vw - 32px));
    }
    .attendance-roster-advanced-options .action-menu-popover { width: min(560px, calc(100vw - 32px)); }
    .attendance-roster-advanced-options .form-grid { margin: 0; }
    .attendance-roster-workspace .bulk-error { flex: 1 0 100%; }
    .attendance-roster-workspace > .muted { display: block; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #fafcfb; }
    .attendance-roster-scroll { margin: 0; border: 0; border-radius: 0; }
    .attendance-roster-table { min-width: var(--attendance-roster-table-width, 960px) !important; table-layout: fixed; }
    .attendance-roster-table th, .attendance-roster-table td { padding: 7px 8px; }
    .attendance-roster-table th.select-cell,
    .attendance-roster-table td.select-cell { width: 44px; min-width: 44px; }
    .attendance-roster-table th[data-fixed-column="person"],
    .attendance-roster-table td[data-fixed-column="person"] {
      position: sticky;
      left: 44px;
      z-index: 4;
      width: 230px;
      min-width: 230px;
      background: #fff;
      box-shadow: 1px 0 0 var(--line);
    }
    .attendance-roster-table thead th[data-fixed-column="person"] { z-index: 8; background: #edf5f2; }
    .attendance-roster-table tr:hover td[data-fixed-column="person"] { background: #f2faf8; }
    .attendance-roster-person { line-height: 1.3; }
    .attendance-roster-person-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
    .attendance-roster-person-heading strong { min-width: 0; }
    .attendance-roster-person strong, .attendance-roster-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .attendance-roster-person small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 550; }
    .attendance-roster-status { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 20px; padding: 2px 6px; border-radius: 999px; background: #eef2ef; color: var(--muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
    .attendance-roster-status.is-assigned { background: #e7f6ef; color: var(--ok); }
    .attendance-roster-status.is-partial { background: #fff4dd; color: var(--warn); }
    .attendance-roster-status.is-unassigned { background: #f1f3f2; color: #59635e; }
    .attendance-roster-status.is-conflict { background: #fff0ee; color: var(--danger); }
    .attendance-roster-date-heading { width: 96px; min-width: 96px !important; text-align: center; }
    .attendance-roster-date-heading span, .attendance-roster-date-heading strong { display: block; }
    .attendance-roster-date-heading span { color: var(--muted); font-size: 11px; }
    .attendance-roster-date-heading strong { margin-top: 1px; color: var(--ink); font-size: 12px; }
    .attendance-roster-date-cell { width: 96px; min-width: 96px; height: 54px; text-align: center; vertical-align: middle; }
    .attendance-roster-date-cell.is-rest { background: #fafbfa; }
    .attendance-roster-date-cell.is-conflict { background: #fff8f6; }
    .attendance-roster-date-cell > :is(strong, small) { display: block; min-width: 0; line-height: 1.2; }
    .attendance-roster-date-cell > strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--primary-dark); font-size: 12px; white-space: nowrap; }
    .attendance-roster-date-cell > small { margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 10px; white-space: nowrap; }
    .attendance-roster-date-cell.is-rest > strong { color: #59635e; font-weight: 700; }
    .attendance-roster-date-cell.is-conflict > strong { color: var(--danger); }
    .attendance-roster-empty { color: #87918c; font-size: 11px; }
    .attendance-roster-update-grid { align-items: start; }
    .attendance-roster-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
    .attendance-roster-presets > span { margin-right: 3px; font-size: 12px; font-weight: 700; }
    .attendance-roster-presets button { min-height: 34px; padding: 6px 9px; }
    .attendance-roster-weekday-actions { display: flex; justify-content: flex-end; gap: 10px; margin: -4px 0 7px; }
    .attendance-roster-weekday-grid { display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr)); gap: 6px; }
    .attendance-roster-weekday { justify-content: flex-start; min-width: 0; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
    .attendance-roster-weekday span { min-width: 0; overflow: visible; font-size: 11px; white-space: nowrap; }
    .attendance-roster-update-note { margin: 0; line-height: 1.45; }
    .attendance-calendar-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .attendance-day-policy { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: #f8fbfa; }
    .attendance-calendar-day-groups { display: grid; gap: 10px; }
    .attendance-calendar-day-group { margin-top: 0; }
    .attendance-calendar-day-group .table-wrap { margin: 0; border: 0; border-radius: 0; }
    .attendance-calendar-day-group table { min-width: 760px; }
    .attendance-calendar-day-editor > form { margin: 12px; }
    .attendance-calendar-day-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
    .compact-empty-state { min-height: 0; margin: 0; padding: 16px; }
    .compact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; min-width: 0; }
    .compact-form > strong { grid-column: 1 / -1; }
    .compact-form > label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
    .compact-form > button, .compact-form > .button { justify-self: start; }
    .compact-choice-list { max-height: 280px; overflow: auto; }
    .configuration-choice-workspace { display: grid; gap: 7px; min-width: 0; }
    .configuration-filter-bar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, auto) auto; gap: 7px; align-items: center; min-width: 0; }
    .configuration-filter-bar > input,
    .configuration-filter-bar > select { min-width: 0; min-height: 38px; }
    .configuration-filter-count { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
    .configuration-filter-empty { margin: 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 6px; background: #fafcfb; }
    .compact-section { margin-top: 0; }
    .admin-table-section { min-width: 0; }
    .role-profile-choices .choice-tile { min-height: 50px; }
    .profile-console { display: grid; grid-template-columns: minmax(360px, .8fr) minmax(520px, 1.2fr); gap: 14px; align-items: start; }
    .profile-list-panel, .profile-permission-panel { min-width: 0; }
    .profile-list { display: grid; gap: 7px; }
    .profile-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
    .profile-list-item:hover, .profile-list-item.active { border-color: #70bdb7; background: #f1faf8; }
    .profile-list-item > a:first-child { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px; color: var(--ink); text-decoration: none; }
    .profile-list-item > a:first-child > span:first-child { min-width: 0; display: grid; gap: 2px; }
    .profile-list-item small { color: var(--muted); overflow-wrap: anywhere; }
    .profile-list-item > .row-action { margin-right: 5px; }
    .profile-permission-grid { max-height: 62vh; overflow: auto; }
    .profile-permission-grid table { min-width: 780px; border: 0; }
    .configuration-row-filter { display: grid; gap: 8px; min-width: 0; }
    .configuration-row-filter > .configuration-filter-bar { position: sticky; top: 0; z-index: 3; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
    .audit-filter { grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr)); flex: 1 1 100%; }
    .audit-filter .compact-filter-label { display: grid; grid-template-columns: auto minmax(135px, 1fr); align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
    .audit-filter .compact-filter-label input { min-height: 40px; }
    .audit-filter > .audit-date-range { grid-column: 1 / span 2; }
    .audit-filter > .audit-filter-actions { grid-column: 3 / -1; }
    .audit-date-range {
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: center;
    }
    .audit-date-range .compact-filter-label { min-width: 0; }
    .audit-filter-actions {
      min-width: 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .audit-filter-actions > select { width: auto; min-width: 112px; }
    .audit-filter-actions > :is(button, .button) { flex: 0 0 auto; white-space: nowrap; }
    .audit-table { min-width: 1260px; }
    .audit-table th:nth-child(1) { min-width: 175px; }
    .audit-table th:nth-child(3), .audit-table th:nth-child(4) { min-width: 180px; }
    .audit-table th:nth-child(6) { min-width: 260px; }
    .audit-time { white-space: nowrap; }
    .datetime-value { display: inline-flex; align-items: center; min-height: 24px; color: inherit; white-space: nowrap; cursor: help; border-bottom: 1px dotted #819089; }
    .datetime-value:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-bottom-color: transparent; }
    .datetime-tooltip { position: fixed; z-index: 200; max-width: min(320px, calc(100vw - 16px)); padding: 7px 9px; border: 1px solid #3e4843; border-radius: 5px; background: #242a27; color: #fff; box-shadow: 0 8px 20px rgba(20, 27, 23, .22); font-size: 12px; font-weight: 650; line-height: 1.35; white-space: nowrap; pointer-events: none; }
    .audit-action { display: inline-flex; min-height: 25px; align-items: center; padding: 3px 8px; border: 1px solid #b8d7d1; border-radius: 999px; background: #edf8f6; color: var(--primary-dark); font-size: 12px; font-weight: 700; white-space: nowrap; }
    .audit-detail { max-width: 420px; overflow-wrap: anywhere; }
    .pagination { min-width: 0; max-width: 100%; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
    .pagination-links { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
    .pagination-control { flex: 0 0 auto; min-height: 36px; padding: 7px 10px; white-space: nowrap; }
    .pagination-control.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
    .pagination-numbers { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
    .pagination-number { width: 36px; height: 36px; display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; border: 1px solid #cfd7d2; border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 750; }
    .pagination-number:hover { border-color: #70bdb7; background: #edf8f6; color: var(--primary-dark); }
    .pagination-number.is-current { border-color: var(--primary); background: var(--primary); color: #fff; }
    .pagination-ellipsis { width: 24px; display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; font-weight: 750; }
    .pagination-jump { display: grid; grid-template-columns: auto 68px auto auto; align-items: center; gap: 6px; margin: 0; }
    .pagination-jump-label, .pagination-total { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
    .pagination-jump input { width: 68px; min-height: 36px; padding: 7px 8px; text-align: center; }
    .pagination-jump button { min-height: 36px; padding: 7px 10px; }
    .issue-tabs { display: flex; gap: 3px; overflow-x: auto; border-bottom: 1px solid var(--line); }
    .issue-tabs a { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 13px; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-weight: 750; white-space: nowrap; }
    .issue-tabs a:hover, .issue-tabs a.active { color: var(--primary-dark); background: #edf8f6; border-bottom-color: var(--primary); }
    .issue-tabs a span { min-width: 21px; padding: 2px 6px; border-radius: 999px; background: #e3e9e6; color: var(--ink); font-size: 11px; text-align: center; }
    .issue-slip-panel { container: action-host / inline-size; padding: 0; overflow: visible; }
    .issue-form-band { padding: 16px; border-bottom: 1px solid var(--line); }
    .issue-form-heading, .issue-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .issue-form-heading > div, .issue-section-head > div { display: grid; gap: 3px; }
    .issue-form-heading > div > strong { font-size: 18px; }
    .issue-form-heading span, .issue-section-head span { color: var(--muted); font-size: 12px; }
    .issue-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .issue-form-band .form-field-section { margin-top: 14px; }
    .issue-line-workspace { display: grid; grid-template-columns: minmax(320px, .78fr) minmax(520px, 1.22fr); min-height: 440px; }
    .issue-picker, .issue-selected { min-width: 0; padding: 16px; }
    .issue-picker { border-right: 1px solid var(--line); background: #fafcfa; }
    .issue-section-head h2 { margin: 0; font-size: 16px; }
    .issue-item-list { display: grid; gap: 6px; max-height: 50vh; margin-top: 10px; overflow-y: auto; padding-right: 3px; }
    .issue-item-option { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-align: left; }
    .issue-item-option:hover { border-color: #70bdb7; background: #edf8f6; color: var(--ink); }
    .issue-item-option > span:first-child { min-width: 0; display: grid; gap: 3px; }
    .issue-item-option strong { overflow-wrap: anywhere; font-size: 13px; }
    .issue-item-option small, .issue-lines-table small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
    .issue-add-mark { flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #dff4f1; color: var(--primary-dark); font-size: 19px; }
    .issue-list-add-wrap { min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: stretch; white-space: nowrap; }
    .issue-list-stock { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 5px 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
    .issue-list-add { width: 38px; min-height: 44px; padding: 0; border: 0; border-left: 1px solid #9bcfc9; border-radius: 0; background: #e8f7f4; color: var(--primary-dark); font-size: 21px; line-height: 1; }
    .issue-list-add:hover, .issue-list-add.selected { background: var(--primary); color: #fff; }
    .issue-list-add:disabled { cursor: not-allowed; border-left-color: var(--line); background: #f1f3f2; color: #9aa5a0; }
    .issue-list-unavailable { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
    .quick-issue-form { display: grid; gap: 12px; min-height: calc(100vh - 150px); }
    .quick-issue-template-bar { min-width: 0; display: grid; grid-template-columns: minmax(240px, 420px) minmax(0, 1fr); align-items: end; gap: 10px 14px; padding: 11px 12px; border: 1px solid #b8d7d1; border-radius: 6px; background: #edf8f6; }
    .quick-issue-template-bar > span { min-width: 0; display: grid; gap: 3px; overflow-wrap: anywhere; }
    .quick-issue-template-bar > span > strong { color: var(--primary-dark); font-size: 11px; text-transform: uppercase; }
    .template-editing-bar { grid-template-columns: minmax(260px, 1fr); }
    .quick-issue-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    .quick-issue-workspace { min-height: 390px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
    .quick-issue-selected-pane { min-width: 0; padding: 12px; }
    .quick-issue-selected-scroll { max-height: calc(100vh - 385px); overflow: auto; }
    .quick-issue-lines { min-width: 640px; }
    .quick-issue-lines th:first-child { min-width: 240px; }
    .quick-issue-lines th:nth-child(2) { min-width: 125px; }
    .quick-issue-lines th:nth-child(3) { min-width: 105px; }
    .quick-issue-lines th:last-child { width: 48px; min-width: 48px; }
    .quick-issue-lines td { vertical-align: middle; }
    .quick-issue-lines td > strong, .quick-issue-lines td > small { display: block; overflow-wrap: anywhere; }
    .quick-issue-lines td > small { margin-top: 3px; color: var(--muted); font-size: 11px; }
    .quick-issue-lines input[name="quantity"] { min-width: 105px; }
    .quick-issue-config { border: 1px solid var(--line); border-radius: 6px; background: #fafcfa; }
    .quick-issue-config > summary { padding: 10px 12px; cursor: pointer; color: var(--primary-dark); font-weight: 750; }
    .quick-issue-config > summary > span { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 600; }
    .quick-issue-config-body { display: grid; gap: 12px; padding: 0 12px 12px; }
    .quick-issue-config-body h3 { margin: 0; font-size: 14px; }
    .ui-action-bar { min-width: 0; display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 10px 16px; }
    .action-bar-note { min-width: 0; margin: 0; overflow-wrap: anywhere; line-height: 1.4; }
    .action-bar-buttons { min-width: 0; display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-end; gap: 8px; }
    .action-bar-buttons > :is(a.button, button) { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; margin: 0; white-space: normal; text-align: center; line-height: 1.2; }
    .quick-issue-actions { position: sticky; bottom: 0; z-index: 9; margin: 0 -20px -20px; padding: 10px 20px 12px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .98); box-shadow: 0 -5px 14px rgba(24, 35, 29, .05); }
    .issue-lines-table { min-width: 620px !important; }
    .issue-lines-table th:nth-child(1) { min-width: 240px; }
    .issue-lines-table th:nth-child(2) { width: 150px; }
    .issue-lines-table th:nth-child(3) { width: 150px; }
    .issue-lines-table td { vertical-align: middle; }
    .issue-lines-table input { min-width: 120px; }
    .issue-form-actions { position: sticky; bottom: 0; z-index: 8; padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .98); box-shadow: 0 -5px 14px rgba(24, 35, 29, .04); }
    .issue-form-actions .action-bar-leading { min-width: 0; display: flex; align-items: center; gap: 10px; }
    .issue-form-actions .action-bar-leading > :is(a.button, button) { flex: 0 0 auto; min-height: 40px; }
    .compact-search { display: grid; grid-template-columns: minmax(240px, 520px) auto; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
    .issue-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
    .issue-detail-value { min-width: 0; display: grid; gap: 4px; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .issue-detail-value span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
    .issue-detail-value strong { overflow-wrap: anywhere; font-size: 13px; }
    .issue-section-title { margin: 16px 0 9px; font-size: 15px; }
    .status-pill { display: inline-flex; padding: 3px 8px; border: 1px solid #b7e4df; border-radius: 999px; background: #edf8f6; color: var(--primary-dark); font-size: 12px; font-weight: 750; }
    .status-pill.cancelled { border-color: #efc0bb; background: #fff3f1; color: var(--danger); }
    .issue-builder-step { min-height: min(720px, calc(100vh - 150px)); }
    .issue-step-heading { position: sticky; top: 0; z-index: 12; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .98); }
    .issue-step-heading > div { display: grid; gap: 2px; }
    .issue-step-heading > div span { color: var(--muted); font-size: 12px; }
    .issue-step-number { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; }
    .issue-selected-count { min-width: 94px; padding: 7px 9px; border: 1px solid #b7dcd6; border-radius: 5px; background: #edf8f6; text-align: center; color: var(--primary-dark); font-size: 12px; font-weight: 700; }
    .issue-picker-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(220px, .55fr); gap: 10px; padding: 14px 16px 10px; }
    .issue-picker-toolbar label { display: grid; grid-template-columns: auto minmax(150px, 1fr); align-items: center; gap: 8px; margin: 0; }
    .issue-picker-table { max-height: calc(100vh - 330px); margin: 0 16px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
    .issue-picker-table .issue-item-option { position: relative; min-height: 58px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 9px 48px 9px 11px; }
    .issue-picker-table .issue-item-option:last-child { border-bottom: 0; }
    .issue-item-option.selected { background: #e8f7f4; box-shadow: inset 3px 0 var(--primary); }
    .issue-add-mark { position: absolute; top: 0; right: 0; bottom: 0; width: 40px; height: auto; border-left: 1px solid var(--line); border-radius: 0; background: #eff7f5; font-size: 22px; }
    .issue-item-option.selected .issue-add-mark { background: var(--primary); color: #fff; }
    .issue-settings { margin: 14px 16px 0; }
    .issue-warehouse-mirror { min-height: 40px; display: flex; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; background: #f5f7f6; color: var(--ink) !important; font-size: 13px !important; }
    .issue-builder-step > .field-note, .issue-builder-step > .form-field-section { margin-inline: 16px; }
    .issue-field-config { margin: 14px 16px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fafcfa; }
    .issue-field-toggles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-height: 190px; overflow: auto; }
    .issue-field-toggles .choice-tile { min-height: 48px; }
    .issue-document-column-help { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
    .issue-document-column-heading { grid-template-columns: minmax(180px, 1fr) 120px 66px; padding-left: 27px; }
    .issue-document-column-picker { max-height: 360px; }
    .issue-document-column-picker .issue-document-column-option { grid-template-columns: 22px minmax(180px, 1fr) 120px 66px; }
    .issue-document-column-option:has(input[name="display_field_key"]:checked) { border-color: #54aaa4; background: #eaf7f5; }
    .issue-document-column-option label span { display: grid; gap: 2px; }
    .issue-document-column-option label small, .issue-document-column-type { color: var(--muted); font-size: 11px; }
    .issue-selected { padding: 0 16px 16px; }
    .issue-lines-table { min-width: max(720px, 100%) !important; }
    .issue-lines-table th, .issue-lines-table td { min-width: 128px; }
    .issue-lines-table th:first-child, .issue-lines-table td:first-child { min-width: 45px; width: 45px; text-align: center; }
    .issue-lines-table th:last-child, .issue-lines-table td:last-child { min-width: 48px; width: 48px; }
    .issue-line-marker span { display: inline-flex; min-width: 24px; min-height: 24px; align-items: center; justify-content: center; border-radius: 4px; background: #edf2ef; font-weight: 750; }
    .issue-detail-actions { position: sticky; top: -16px; z-index: 10; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin: -16px -16px 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .98); }
    .issue-history-panel { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
    .issue-history-panel .section-head { margin-bottom: 10px; }
    .issue-history-table { min-width: 920px; }
    .issue-history-table td small { display: block; margin-top: 4px; color: var(--muted); }
    .issue-document { min-width: 720px; border: 1px solid #9fb2bd; background: #fff; color: #172832; }
    .issue-document-preview-banner { padding: 7px 12px; border-bottom: 1px solid #d7b56d; background: #fff6df; color: #7a4b08; text-align: center; font-size: 11px; font-weight: 800; }
    .issue-document-head { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(250px, 1.5fr) minmax(160px, .7fr); align-items: center; min-height: 104px; border-bottom: 1px solid #9fb2bd; }
    .issue-document-head > div { padding: 14px; }
    .issue-document-brand, .issue-document-title, .issue-document-number { display: grid; gap: 4px; }
    .issue-document-brand strong { font-size: 19px; color: #073b5c; }
    .issue-document-brand span, .issue-document-title span, .issue-document-number span { color: var(--muted); font-size: 11px; }
    .issue-company-details { display: grid; gap: 2px; margin-top: 5px; color: #536873; font-size: 9px; }
    .issue-company-details span { color: inherit; font-size: inherit; overflow-wrap: anywhere; }
    .issue-document-title { text-align: center; }
    .issue-document-title h2 { margin: 0; color: #073b5c; font-size: 25px; letter-spacing: 0; }
    .issue-document-number { align-self: stretch; justify-content: center; background: #073b5c; color: #fff; }
    .issue-document-number span { color: #d7e8f1; text-transform: uppercase; }
    .issue-document-number strong { overflow-wrap: anywhere; font-size: 18px; }
    .issue-document-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .issue-document-meta > div { min-height: 54px; display: grid; gap: 3px; padding: 9px 12px; border-right: 1px solid #cbd6dc; border-bottom: 1px solid #cbd6dc; }
    .issue-document-meta span { color: #62747f; font-size: 10px; font-weight: 750; text-transform: uppercase; }
    .issue-recipient-section { border-bottom: 1px solid #9fb2bd; }
    .issue-recipient-section h3 { margin: 0; padding: 8px 12px; background: #dceff4; color: #073b5c; font-size: 12px; }
    .issue-recipient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .issue-recipient-grid > div { min-height: 46px; display: grid; grid-template-columns: minmax(120px, .38fr) minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 12px; border-right: 1px solid #cbd6dc; border-bottom: 1px solid #cbd6dc; }
    .issue-recipient-grid span { color: #62747f; font-size: 10px; font-weight: 750; text-transform: uppercase; }
    .issue-recipient-grid strong { overflow-wrap: anywhere; font-size: 12px; }
    .issue-document-lines { border-block: 1px solid #668392; }
    .issue-document-lines table { min-width: 100%; border: 0; }
    .issue-document-lines th { background: #0b5278; color: #fff; }
    .issue-document-total td { background: #dceff4; font-weight: 800; text-transform: uppercase; }
    .issue-document-note { min-height: 68px; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 12px; border-bottom: 1px solid #9fb2bd; }
    .issue-document-note span { white-space: pre-wrap; }
    .issue-document-signatures { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); min-height: 130px; }
    .issue-document-signatures > div { display: grid; align-content: start; gap: 4px; padding: 14px 8px; border-right: 1px solid #cbd6dc; text-align: center; }
    .issue-document-signatures span { color: var(--muted); font-size: 11px; }
    .issue-document-signatures > div:last-child { border-right: 0; }
    .issue-live-preview { position: absolute; z-index: 5; inset: 0; min-height: 100%; padding: 16px; overflow: auto; background: #eef2f3; }
    .issue-live-preview-head { position: sticky; z-index: 3; top: -16px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin: -16px -16px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fff; }
    .issue-live-preview-head h3 { margin: 0; font-size: 18px; }
    .issue-live-preview-head p { margin: 4px 0 0; }
    .issue-live-preview-body { overflow: auto; }
    .document-template-manager { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
    .document-template-list { min-width: 0; padding: 14px; }
    .document-template-list .section-head { align-items: flex-start; }
    .document-template-items { display: grid; gap: 6px; margin-top: 10px; max-height: 640px; overflow: auto; }
    .document-template-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); text-decoration: none; }
    .document-template-item:hover, .document-template-item.active { border-color: #70bdb7; background: #edf8f6; }
    .document-template-item > span:first-child { min-width: 0; display: grid; gap: 3px; }
    .document-template-item strong, .document-template-item small { overflow-wrap: anywhere; }
    .document-template-item small, .document-template-item > span:last-child { color: var(--muted); font-size: 11px; }
    .document-template-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
    .document-config-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
    .document-config-form, .document-parameter-panel, .document-config-preview { padding: 16px; }
    .document-parameter-panel code { white-space: nowrap; color: #075f5b; }
    .document-config-preview { margin-top: 14px; overflow: hidden; }
    @container action-host (max-width: 720px) {
      .record-dialog :is(
        .form-grid,
        .compact-form,
        .compact-form-grid,
        .attendance-config-grid,
        .attendance-calendar-policy-grid,
        .attendance-rule-columns
      ) {
        grid-template-columns: minmax(0, 1fr);
      }
      .record-dialog .attendance-weekday-row {
        grid-template-columns: minmax(0, 1fr);
      }
      .record-dialog .custom-field-row {
        grid-template-columns: minmax(0, 1fr);
      }
      .record-dialog .attendance-weekday-toggle { grid-column: auto; }
      .record-dialog :is(
        .form-grid,
        .compact-form,
        .compact-form-grid,
        .attendance-config-grid,
        .attendance-calendar-policy-grid,
        .attendance-rule-columns,
        .attendance-weekday-row
      ) > * {
        min-width: 0;
      }
      .record-dialog .dialog-form-actions { grid-column: 1 / -1; }
    }
    @container action-host (max-width: 960px) {
      .ui-action-bar { grid-template-columns: minmax(0, 1fr); }
      .action-bar-buttons { flex-wrap: wrap; width: 100%; }
      .action-bar-buttons > :is(a.button, button) { flex: 0 1 calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); min-width: 0; }
    }
    @container action-host (max-width: 640px) {
      .action-bar-buttons > :is(a.button, button) { flex-basis: calc((100% - 8px) / 2); max-width: calc((100% - 8px) / 2); }
      .issue-form-actions .action-bar-leading { align-items: stretch; flex-direction: column; }
      .issue-form-actions .action-bar-leading > :is(a.button, button) { width: 100%; justify-content: center; }
      :is(.dialog-actions, .dialog-form-actions, .panel-actions, .workflow-bar) > :is(a.button, button, form) { flex: 1 1 calc((100% - 8px) / 2); min-width: 0; }
      :is(.dialog-actions, .dialog-form-actions, .panel-actions, .workflow-bar) > form > button { width: 100%; }
      :is(.dialog-actions, .dialog-form-actions, .panel-actions, .workflow-bar) > .muted { flex-basis: 100%; }
    }
    @container action-host (max-width: 400px) {
      .action-bar-buttons > :is(a.button, button) { flex-basis: 100%; max-width: 100%; }
      :is(.dialog-actions, .dialog-form-actions, .panel-actions, .workflow-bar) > :is(a.button, button, form) { flex-basis: 100%; }
    }
    @media (max-width: 1500px) {
      .dashboard-overview-grid { grid-template-columns: 1fr; }
      .admin-user-filter { grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(135px, 1fr)); }
    }
    @media (max-width: 1400px) {
      .list-toolbar { align-items: stretch; flex-direction: column; }
      .command-actions { justify-content: flex-end; }
    }
    @media (min-width: 901px) and (max-width: 1300px) {
      .attendance-roster-toolbar > .attendance-roster-filter > input[type="search"] {
        min-width: 120px !important;
        flex-basis: 120px !important;
      }
      .attendance-roster-toolbar > .attendance-roster-filter > select[name="department_id"],
      .attendance-roster-toolbar > .attendance-roster-filter > select[name="org_unit_id"] {
        min-width: 100px !important;
        max-width: 100px !important;
      }
      .attendance-roster-period-picker > summary { min-width: 145px; max-width: 145px; }
      .attendance-roster-toolbar > .attendance-roster-filter > select[name="page_size"] {
        min-width: 90px !important;
        max-width: 90px !important;
      }
      .attendance-roster-toolbar > .attendance-roster-filter > :is(button, a.button) {
        padding-inline: 8px;
      }
    }
    @media (min-width: 901px) and (max-width: 1199px) {
      .attendance-roster-toolbar {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
      }
      .attendance-roster-toolbar > .attendance-roster-filter {
        width: 875px !important;
        flex: 0 0 875px !important;
      }
      .attendance-roster-period-picker .attendance-roster-period-popover {
        transform: none;
      }
    }
    @media (max-width: 1100px) { .role-builder { grid-template-columns: 1fr; } }
    @media (max-width: 1100px) { .role-permission-layout, .child-list, .two-col, .three-col, .summary-strip, .vtiger-console, .role-detail-grid, .user-console, .user-detail-grid, .field-manager, .dashboard-overview-grid, .profile-console, .order-meta-grid, .order-custom-grid, .issue-line-workspace, .navigation-admin, .detail-grid, .attendance-config-grid, .attendance-rule-columns, .admin-config-grid { grid-template-columns: 1fr; } .field-form-panel { position: static; } .permission-tree-column, .nav-config-sidebar { border-right: 0; border-bottom: 1px solid var(--line); } .issue-picker { border-right: 0; border-bottom: 1px solid var(--line); } .quick-issue-selected-scroll { max-height: 36vh; } .nav-config-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 900px) {
      .app { grid-template-columns: minmax(0, 1fr); }
      .side { position: fixed; inset: 0 auto 0 0; width: min(310px, 88vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 12px 0 32px rgba(18, 25, 21, .24); }
      body.nav-open .side { transform: translateX(0); }
      body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 50; background: rgba(20, 27, 23, .4); }
      .side-close { display: inline-flex; }
      .side-collapse { display: none; }
      .mobile-bar { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: -16px -16px 16px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fff; }
      body[data-presentation="mobile"] main { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
      body[data-presentation="mobile"] .mobile-bottom-nav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 64;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 2px;
        padding: 6px 6px max(6px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -8px 24px rgba(18, 25, 21, .1);
      }
      body[data-presentation="mobile"] .mobile-bottom-nav :is(a, button) {
        min-width: 0;
        min-height: 54px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 2px;
        padding: 5px 2px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--muted);
        text-decoration: none;
      }
      body[data-presentation="mobile"] .mobile-bottom-nav :is(a, button):hover,
      body[data-presentation="mobile"] .mobile-bottom-nav a.active {
        background: #edf8f6;
        color: var(--primary-dark);
      }
      body[data-presentation="mobile"] .mobile-bottom-nav span { font-size: 20px; line-height: 1; }
      body[data-presentation="mobile"] .mobile-bottom-nav strong { min-width: 0; font-size: 11px; font-weight: 750; white-space: nowrap; }
      .app-page-chrome {
        position: static;
        min-height: 0;
        display: block;
        margin: 0;
        border-bottom: 0;
        background: transparent;
      }
      .app-page-chrome > .module-switcher-group,
      .app-page-chrome > .module-switcher-tabs {
        margin: -16px -16px 12px;
        padding-inline: 8px;
        border-bottom: 1px solid var(--line);
        background: rgba(247, 250, 249, .98);
      }
      .app-notification-dock { display: none; }
      .module-switcher-group,
      .module-switcher-tabs { position: static; margin: -16px -16px 12px; padding-inline: 8px; }
      .mobile-nav-toggle { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; background: #eef1ef; color: var(--ink); font-size: 20px; }
      .grid.cols, .form-grid, .check-grid, .checkbox-list { grid-template-columns: 1fr; }
      main { padding: 16px; }
      body.side-panel-open main, body.side-panel-open.side-panel-wide main { margin-right: 0; }
      body.navigation-preview-open main { margin-right: 0; }
      .navigation-preview { left: 0; width: auto; }
      .data-toolbar, .table-footer { align-items: stretch; flex-direction: column; }
      .pagination { width: 100%; justify-content: flex-start; }
      .pagination-links { width: 100%; }
      .list-toolbar { align-items: stretch; flex-direction: column; }
      .list-panel.scroll-workspace { height: auto; max-height: none; overflow: visible; }
      .scroll-workspace .record-list-form { min-height: 0; flex: none; display: block; }
      .scroll-workspace .list-data-scroll { height: clamp(260px, 52dvh, 520px); min-height: 260px; flex: none; overflow: auto; }
      .attendance-timesheet-table:not(.mobile-card-table) {
        border-collapse: separate;
        border-spacing: 0;
      }
      .quick-search { grid-template-columns: 1fr 1fr; }
      .attendance-timesheet-search .attendance-work-date-range {
        grid-column: 1 / -1;
        width: 100%;
      }
      .payroll-payslip-head { align-items: stretch; flex-direction: column; }
      .payroll-payslip-period { width: 100%; min-width: 0; text-align: left; }
      .payroll-payslip-identity { grid-template-columns: 1fr; }
      .payroll-identity-item { border-right: 0; border-bottom: 1px solid var(--line); }
      .payroll-identity-item:last-child { border-bottom: 0; }
      .payroll-mapping-flow { grid-template-columns: minmax(0, 1fr); }
      .payroll-mapping-arrow { transform: rotate(90deg); }
      .payroll-formula-row { grid-template-columns: 1fr; }
      .import-upload-form { grid-template-columns: 1fr; }
      .admin-user-filter { grid-template-columns: 1fr 1fr; }
      .audit-filter { grid-template-columns: 1fr 1fr; }
      .audit-filter > :is(.audit-date-range, .audit-filter-actions) { grid-column: 1 / -1; }
      .audit-filter-actions > select { flex: 1 1 140px; }
      .quick-search input[type="search"] { grid-column: 1 / -1; }
      .command-actions { width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
      .command-actions > .button { flex: 0 0 auto; }
      .list-toolbar > .command-actions { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
      .workspace-config-dialog { width: 100vw; max-width: none; max-height: 100dvh; border: 0; border-radius: 0; }
      .workspace-config-dialog-shell { max-height: 100dvh; }
      .workspace-config-dialog .column-picker {
        max-height: none;
        overflow: visible;
      }
      .filter-rule { grid-template-columns: 1fr; }
      .record-dialog, .record-dialog.wide-dialog { left: 0; right: 0; width: auto; min-width: 0; }
      .record-dialog-resizer { display: none; }
      .record-dialog .form-grid { grid-template-columns: 1fr; }
      .attendance-punch-evidence-popover { left: 8px !important; right: 8px !important; top: auto !important; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: min(72dvh, 640px); border-radius: 12px; }
      .custom-field-row { grid-template-columns: 1fr; }
      .document-config-layout, .document-template-manager { grid-template-columns: 1fr; }
      .quick-issue-template-bar, .document-template-rule-grid { grid-template-columns: 1fr; }
      .record-detail-grid { grid-template-columns: 1fr; }
      .record-detail-field { border-right: 0; }
      .field-config-grid, .setting-checks { grid-template-columns: 1fr; }
      .lookup-mapping-head { align-items: stretch; flex-direction: column; }
      .lookup-mapping-row { grid-template-columns: minmax(0, 1fr) 32px; }
      .lookup-mapping-row label { grid-column: 1; }
      .lookup-mapping-arrow { grid-column: 1; transform: rotate(90deg); }
      .lookup-mapping-row .icon-button { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
      .choice-list { grid-template-columns: 1fr; }
      .compact-form-grid { grid-template-columns: 1fr; }
      .import-template-designer .compact-form-grid { grid-template-columns: 1fr; }
      .form-section-head { align-items: stretch; flex-direction: column; }
      .form-section-head input { width: 100%; }
      details.column-settings { width: 100%; }
      .issue-settings, .issue-detail-grid, .quick-issue-settings { grid-template-columns: 1fr; }
      .issue-live-preview { padding: 12px; }
      .issue-live-preview-head { top: -12px; margin: -12px -12px 12px; padding: 12px; }
      .issue-document { width: 100%; min-width: 0; }
      .issue-document-head { grid-template-columns: 1fr; }
      .issue-document-title { order: -1; border-bottom: 1px solid #cbd6dc; }
      .issue-document-number { min-height: 68px; }
      .issue-document-meta, .issue-recipient-grid { grid-template-columns: 1fr; }
      .issue-recipient-grid > div { grid-template-columns: minmax(105px, .4fr) minmax(0, 1fr); border-right: 0; }
      .issue-document-signatures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .order-import-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .order-import-summary-grid > div:nth-child(3n) { border-right: 0; }
      .order-import-summary-grid > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
      .order-import-source > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .nav-admin-title, .nav-config-section-head { align-items: stretch; flex-direction: column; }
      .nav-group-form, .nav-attach-form, .shortcut-form-grid { grid-template-columns: 1fr; }
      .attendance-weekday-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .attendance-weekday-toggle { grid-column: 1 / -1; }
      .attendance-roster-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .attendance-roster-filter input[type="search"] { grid-column: 1 / -1; }
      .attendance-roster-period-control { grid-column: 1 / -1; width: 100%; }
      .attendance-roster-period-picker { flex: 1 1 auto; }
      .attendance-roster-period-picker > summary { width: 100%; min-width: 0; }
      .attendance-roster-period-picker .attendance-roster-period-popover {
        transform: none;
        overflow: auto;
        overscroll-behavior: contain;
      }
      .attendance-roster-workspace > form > .bulk-toolbar { top: 48px; }
      /* Let the fixed table expand to its declared columns, without desktop surplus width. */
      .attendance-roster-table { width: 1px; min-width: 0 !important; }
      .attendance-roster-table th[data-fixed-column="person"],
      .attendance-roster-table td[data-fixed-column="person"] {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
      }
      .attendance-roster-person-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .attendance-roster-person strong,
      .attendance-roster-person small {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      .attendance-roster-status {
        max-width: 100%;
        white-space: normal;
        font-size: 12px;
        line-height: 1.3;
      }
      .attendance-roster-weekday-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      body { overflow-x: clip; }
      main, .panel, fieldset, form, .table-wrap { min-width: 0; max-width: 100%; }
      .mobile-bar {
        position: sticky;
        top: 0;
        z-index: 40;
        padding-top: max(8px, env(safe-area-inset-top));
      }
      body.impersonation-active .mobile-bar { top: 52px; }
      .mobile-bar > strong {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      body[data-presentation="mobile"] .mobile-context-action-dock,
      body.mobile-context-actions-mounted .mobile-context-action-dock {
        min-width: 0;
        max-width: min(132px, 40vw);
        flex: 0 1 auto;
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      body[data-presentation="mobile"]
      .mobile-context-action-dock::-webkit-scrollbar,
      body.mobile-context-actions-mounted
      .mobile-context-action-dock::-webkit-scrollbar { display: none; }
      .mobile-context-action-button {
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        flex: 0 0 44px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid #cfd7d2;
        border-radius: 9px;
        background: #f7faf8;
        color: var(--primary-dark);
      }
      .mobile-bar .app-notification-launcher {
        position: static;
        inset: auto;
        z-index: auto;
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 44px;
        margin-left: auto;
        box-shadow: none;
      }
      body.mobile-context-actions-mounted
      .mobile-bar .app-notification-launcher {
        width: 44px;
        padding-inline: 0;
        justify-content: center;
        margin-left: 0;
      }
      body.mobile-context-actions-mounted
      .mobile-bar .app-notification-launcher > span:nth-child(2) {
        display: none;
      }
      body.impersonation-active .mobile-bar .app-notification-launcher {
        position: static;
        inset: auto;
      }
      .module-switcher-tabs {
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
      }
      .module-switcher-tabs a { min-height: 44px; scroll-snap-align: start; }
      :is(input, select, textarea) { min-width: 0; font-size: 16px; }
      :is(input:not([type="checkbox"]):not([type="radio"]), select, button, .button) { min-height: 44px; }
      :is(input[type="checkbox"], input[type="radio"]) {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
      }
      :is(.side-close, .icon-button, .workspace-config-close,
          .app-notification-dismiss, .navigation-preview .icon-button) {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
      }
      .perm-cell { width: 44px; height: 44px; }
      .attendance-work-date-filter input { font-size: 16px; }
      .mini-table :is(th, td) { font-size: 14px; }
      .column-filter { min-height: 44px; font-size: 16px; }
      :is(.searchable-select-trigger, details.action-menu > summary,
          [data-inline-suggestion-value], .row-action) { min-height: 44px; }
      [data-inline-suggestion-value] { font-size: 14px; }
      .record-dialog, .record-dialog.wide-dialog {
        height: 100dvh;
        max-height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .dialog-body { min-width: 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
      /* Keep the shared form header outside the only vertical scroll area. */
      .record-dialog > .dialog-head {
        position: static;
        flex: 0 0 auto;
      }
      .record-dialog > .dialog-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-padding-block: 16px;
        -webkit-overflow-scrolling: touch;
      }
      .record-dialog .dialog-actions {
        position: static;
        bottom: auto;
        margin-bottom: 0;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
      }
      .record-dialog :is(.choice-list, .compact-choice-list) {
        max-height: none;
        overflow: visible;
      }
      .permission-tree-column[data-mobile-compacted-secondary-surface="1"] {
        padding: 0;
        border: 0;
        background: transparent;
      }
      .permission-tree-column .tree-link { min-height: 44px; }
      .permission-tree-column .tree-link > span:first-child {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .permission-tree-column .tree-badge { flex: 0 0 auto; }
      .permission-context > .mobile-inline-secondary-disclosure {
        width: 100%;
        min-width: 0;
        margin: 0;
      }
      .mobile-inline-secondary-disclosure > summary {
        min-height: 44px;
        padding-block: 10px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        overflow-wrap: anywhere;
      }
      .mobile-inline-secondary-content {
        display: grid;
        gap: 8px;
        padding-bottom: 4px;
      }
      .permission-detail-column :is(.detail-head, .detail-actions),
      .permission-context {
        flex-direction: column;
        align-items: stretch;
      }
      .permission-detail-column :is(.detail-head, .detail-actions) > *,
      .permission-context > * {
        min-width: 0;
        max-width: 100%;
      }
      .permission-detail-column .detail-actions > :is(button, .button, form) {
        width: 100%;
        min-height: 44px;
      }
      .permission-detail-column .detail-actions > form > button {
        width: 100%;
      }
      .permission-profile-links {
        justify-content: flex-start;
        gap: 8px;
      }
      .permission-profile-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 14px;
      }
      .attendance-timesheet-detail {
        scroll-margin-top: calc(77px + env(safe-area-inset-top));
      }
      body.impersonation-active .attendance-timesheet-detail {
        scroll-margin-top: calc(129px + env(safe-area-inset-top));
      }
      body.impersonation-active :is(.record-dialog, .record-dialog.wide-dialog) {
        top: 52px;
        height: calc(100dvh - 52px);
        max-height: calc(100dvh - 52px);
      }
      body.impersonation-active .navigation-preview { top: 52px; bottom: 0; }
      body.impersonation-active .navigation-preview iframe {
        height: calc(100dvh - 106px);
      }
      body.impersonation-active .mobile-workspace-sheet[open]
      > .mobile-workspace-sheet-body {
        top: 52px;
        bottom: 0;
        height: calc(100dvh - 52px);
      }
      body[data-presentation="mobile"] .mobile-semantic-workspace {
        display: grid;
        gap: 12px;
        min-width: 0;
      }
      body.mobile-sheet-open { overflow: hidden; }
      body[data-presentation="mobile"] .list-panel:has(.mobile-semantic-workspace) {
        border: 0;
        background: transparent;
      }
      .mobile-workspace-filter {
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
      }
      .mobile-search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
      }
      .mobile-workspace-commands {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .mobile-workspace-sheet > summary,
      .mobile-toolbar-more > summary,
      .mobile-record-more > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 9px 11px;
        border: 1px solid #cfd7d2;
        border-radius: 7px;
        background: #f7faf8;
        color: var(--ink);
        cursor: pointer;
        font-size: 14px;
        font-weight: 750;
        list-style: none;
        text-align: center;
      }
      .mobile-workspace-sheet > summary::-webkit-details-marker,
      .mobile-toolbar-more > summary::-webkit-details-marker,
      .mobile-record-more > summary::-webkit-details-marker { display: none; }
      .mobile-workspace-filter.mobile-compact-toolbar {
        display: flex;
        align-items: stretch;
        gap: 8px;
        padding: 0;
        border: 0;
        background: transparent;
      }
      body[data-presentation="mobile"] .admin-summary-inline {
        flex-wrap: nowrap;
        gap: 6px;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      body[data-presentation="mobile"] .admin-summary-inline::-webkit-scrollbar {
        display: none;
      }
      body[data-presentation="mobile"] .admin-summary-inline > * {
        flex: 0 0 auto;
      }
      body[data-presentation="mobile"] .admin-summary-inline > a.button {
        min-height: 44px;
      }
      .mobile-compact-disclosure {
        width: 44px;
        min-width: 44px;
        flex: 0 0 44px;
      }
      .mobile-legacy-primary-actions {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 55%;
        display: flex;
        gap: 8px;
        overflow: hidden;
      }
      .mobile-legacy-primary-actions > * {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mobile-compact-disclosure > summary {
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        display: grid;
        place-items: center;
        overflow: hidden;
        padding: 0;
        border-radius: 9px;
        text-align: center;
      }
      .mobile-compact-launcher-icon {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        color: var(--primary-dark);
        font-size: 20px;
        font-weight: 800;
        line-height: 1;
      }
      .mobile-compact-summary-chevron { display: none; }
      .mobile-compact-origin-hidden {
        position: absolute !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
      }
      .mobile-compact-origin-hidden > summary { display: none !important; }
      .mobile-compact-home-empty {
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
      }
      .mobile-workspace-sheet[open] > .mobile-workspace-sheet-body {
        position: fixed;
        inset: 0;
        z-index: 110;
        display: grid;
        align-content: start;
        gap: 14px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: max(14px, env(safe-area-inset-top)) 14px
          max(18px, env(safe-area-inset-bottom));
        background: #fff;
      }
      .mobile-compact-sheet-content {
        min-width: 0;
        display: grid;
        align-content: start;
        gap: 14px;
      }
      .mobile-compact-filter-form {
        min-width: 0;
        display: grid;
        gap: 12px;
        margin: 0;
      }
      .mobile-compact-sort-fields {
        min-width: 0;
        display: grid;
        gap: 10px;
        margin: 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 9px;
      }
      .mobile-compact-sort-fields > legend {
        padding: 0 5px;
        color: var(--primary-dark);
        font-size: 13px;
        font-weight: 800;
      }
      .mobile-compact-sort-fields > label {
        min-width: 0;
        display: grid;
        gap: 5px;
      }
      .mobile-compact-search-field { display: grid; gap: 5px; }
      .mobile-compact-secondary-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
      }
      .mobile-compact-secondary-actions > :is(a, button, form),
      .mobile-compact-secondary-actions > form > button { width: 100%; }
      .mobile-workspace-sheet-body > header {
        position: sticky;
        top: calc(-1 * max(14px, env(safe-area-inset-top)));
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: calc(-1 * max(14px, env(safe-area-inset-top))) -14px 0;
        padding: max(14px, env(safe-area-inset-top)) 14px 12px;
        border-bottom: 1px solid var(--line);
        background: #fff;
      }
      .mobile-workspace-sheet-body > header > div {
        min-width: 0;
        display: grid;
        gap: 3px;
      }
      .mobile-workspace-sheet-body > header strong { font-size: 19px; }
      .mobile-workspace-sheet-body > header span {
        color: var(--muted);
        font-size: 12px;
      }
      .mobile-filter-fields { display: grid; gap: 12px; }
      .mobile-filter-field {
        min-width: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fafcfb;
      }
      .mobile-workspace-sheet .advanced-filters {
        border: 1px solid var(--line);
        border-radius: 8px;
      }
      .mobile-sheet-actions {
        position: sticky;
        bottom: calc(-1 * max(18px, env(safe-area-inset-bottom)));
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0 -14px calc(-1 * max(18px, env(safe-area-inset-bottom)));
        padding: 12px 14px max(18px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: #fff;
      }
      .mobile-active-filters {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 2px 1px 4px;
        scrollbar-width: thin;
      }
      .mobile-filter-chip {
        flex: 0 0 auto;
        max-width: min(82vw, 320px);
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 10px;
        border: 1px solid #9fd3cd;
        border-radius: 999px;
        background: #edf8f6;
        color: var(--primary-dark);
        text-decoration: none;
        font-size: 12px;
        font-weight: 750;
        overflow-wrap: break-word;
      }
      .mobile-toolbar-more > div,
      .mobile-record-more > div {
        display: grid;
        gap: 8px;
        margin-top: 7px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: #fff;
      }
      .mobile-toolbar-more > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mobile-toolbar-more > div > :is(a, button, form),
      .mobile-toolbar-more > div > form > button { width: 100%; }
      .mobile-record-workspace { display: grid; gap: 10px; min-width: 0; }
      .mobile-record-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        min-width: 0;
        overflow: visible;
      }
      .mobile-record-card {
        min-width: 0;
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(18, 25, 21, .07);
        word-break: normal;
        overflow-wrap: break-word;
      }
      .mobile-record-head {
        min-width: 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .mobile-record-head > div:first-child { min-width: 0; display: grid; gap: 5px; }
      .mobile-record-head h2 {
        min-width: 0;
        margin: 0;
        color: var(--ink);
        font-size: 18px;
        line-height: 1.32;
        overflow-wrap: break-word;
      }
      .mobile-record-subtitle { display: grid; gap: 3px; color: var(--muted); font-size: 12px; }
      .mobile-record-subtitle span { min-width: 0; }
      .mobile-record-status {
        flex: 0 1 auto;
        min-width: 0;
        display: grid;
        justify-items: end;
        gap: 4px;
        text-align: right;
      }
      .mobile-record-status > span:first-child {
        color: var(--muted);
        font-size: 11px;
        font-weight: 750;
      }
      .mobile-record-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .mobile-record-metric {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 10px;
        border-radius: 8px;
        background: #edf8f6;
      }
      .mobile-record-metric span { color: var(--muted); font-size: 11px; font-weight: 750; }
      .mobile-record-metric strong {
        min-width: 0;
        font-size: 16px;
        line-height: 1.35;
        white-space: nowrap;
      }
      .mobile-record-summary { display: grid; gap: 0; margin: 0; }
      .mobile-record-field {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 9px 0;
        border-bottom: 1px solid #e8ecea;
      }
      .mobile-record-field:last-child { border-bottom: 0; }
      .mobile-record-field dt { color: var(--muted); font-size: 12px; font-weight: 750; }
      .mobile-record-field dd {
        min-width: 0;
        margin: 0;
        color: var(--ink);
        font-size: 14px;
        font-weight: 650;
        line-height: 1.45;
        overflow-wrap: break-word;
      }
      .mobile-record-field dd :is(.currency-value, .decimal-value),
      .mobile-record-metric :is(.currency-value, .decimal-value) { white-space: nowrap; }
      .mobile-record-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
      }
      .mobile-record-actions > :only-child { grid-column: 1 / -1; }
      .mobile-record-selector {
        min-height: 44px;
        display: flex;
        grid-template-columns: none;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 7px;
        color: var(--ink);
      }
      .mobile-record-command { display: grid; gap: 8px; }
      .mobile-record-empty {
        min-height: 0;
        display: grid;
        gap: 8px;
        justify-items: start;
        padding: 18px;
        border: 1px dashed #bfcac5;
        border-radius: 10px;
        background: #fff;
      }
      .mobile-record-empty span { color: var(--muted); line-height: 1.45; }
      .mobile-record-footer { display: grid; gap: 10px; color: var(--muted); font-size: 12px; }
      .mobile-record-footer .pagination-numbers,
      .mobile-record-footer .pagination-jump { display: none; }
      .mobile-record-footer .pagination-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .mobile-record-footer .pagination-links > :is(:first-child, :last-child),
      .mobile-record-footer .pagination-ellipsis { display: none; }
      .mobile-timesheet-workspace { gap: 10px; }
      .mobile-timesheet-workspace * { min-width: 0; }
      .mobile-timesheet-toolbar { gap: 8px; padding: 10px; }
      .mobile-timesheet-period {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }
      .mobile-timesheet-period > div { display: grid; gap: 2px; }
      .mobile-timesheet-period span:first-child {
        color: var(--muted);
        font-size: 11px;
        font-weight: 750;
        text-transform: uppercase;
      }
      .mobile-timesheet-period strong { font-size: 17px; line-height: 1.3; }
      .mobile-timesheet-period small { color: var(--muted); font-size: 11px; }
      .mobile-timesheet-toolbar .mobile-search-row :is(input, button) {
        min-height: 44px;
      }
      .mobile-timesheet-toolbar .mobile-workspace-commands {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      }
      .mobile-timesheet-toolbar .mobile-workspace-sheet > summary {
        min-height: 44px;
        padding: 8px;
        font-size: 13px;
      }
      .mobile-timesheet-date-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .mobile-timesheet-extra-filters {
        border: 1px solid var(--line);
        border-radius: 9px;
        background: #fafcfb;
      }
      .mobile-timesheet-extra-filters > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        cursor: pointer;
        font-weight: 750;
      }
      .mobile-timesheet-extra-filters > .mobile-filter-fields {
        padding: 0 10px 10px;
      }
      .mobile-timesheet-more-actions { display: grid; gap: 10px; }
      .mobile-timesheet-more-actions > :is(a, button),
      .mobile-timesheet-more-actions > .workspace-config-trigger { width: 100%; }
      .mobile-timesheet-card {
        gap: 9px;
        padding: 12px;
        border-color: #cddbd7;
      }
      .mobile-timesheet-card .mobile-record-head { gap: 8px; }
      .mobile-timesheet-card .mobile-record-head h2 {
        color: var(--primary-dark);
        font-size: 18px;
      }
      .mobile-timesheet-card .mobile-record-head > .status-badge {
        flex: 0 0 auto;
        max-width: 46%;
        text-align: center;
      }
      .mobile-timesheet-card .mobile-record-subtitle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px;
        color: var(--ink);
        font-size: 13px;
        font-weight: 700;
      }
      .mobile-timesheet-card .attendance-day-type-label {
        width: fit-content;
        margin-top: 2px;
        font-size: 11px;
      }
      .mobile-timesheet-times {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }
      .mobile-timesheet-time {
        display: grid;
        gap: 3px;
        padding: 8px 9px;
        border: 1px solid #e0e7e4;
        border-radius: 8px;
        background: #fafcfb;
      }
      .mobile-timesheet-time > span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 750;
        text-transform: uppercase;
      }
      .mobile-timesheet-time > strong {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        font-size: 14px;
      }
      .mobile-timesheet-time > strong span {
        display: inline-flex;
        gap: 4px;
        white-space: nowrap;
      }
      .mobile-timesheet-time > strong b { color: var(--muted); font-size: 12px; }
      .mobile-timesheet-time > strong i { color: var(--primary); font-style: normal; }
      .mobile-timesheet-card .mobile-record-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }
      .mobile-timesheet-card .mobile-record-metrics.has-2-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mobile-timesheet-card .mobile-record-metrics.has-1-metrics {
        grid-template-columns: minmax(0, 1fr);
      }
      .mobile-timesheet-card .mobile-record-metric {
        gap: 2px;
        padding: 8px 7px;
        background: #eaf7f5;
        text-align: left;
      }
      .mobile-timesheet-card .mobile-record-metric span { font-size: 12px; }
      .mobile-timesheet-card .mobile-record-metric strong {
        font-size: 14px;
        white-space: normal;
      }
      .mobile-timesheet-exception {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid #f3c7c2;
        border-radius: 8px;
        background: #fff5f3;
        color: #9b241a;
      }
      .mobile-timesheet-exception strong { font-size: 12px; }
      .mobile-timesheet-exception span { color: #7d453f; font-size: 12px; }
      .mobile-timesheet-attention {
        border: 1px solid #efd59c;
        border-radius: 8px;
        background: #fffaf0;
      }
      .mobile-timesheet-attention > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px 10px;
        color: #8a5a00;
        cursor: pointer;
        font-size: 12px;
        font-weight: 800;
      }
      .mobile-timesheet-attention > div { display: grid; gap: 8px; padding: 0 9px 9px; }
      .mobile-timesheet-card .mobile-record-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 1px;
      }
      .mobile-timesheet-unscheduled {
        display: grid;
        gap: 3px;
        padding: 10px;
        border: 1px solid #f0b7b1;
        border-radius: 8px;
        background: #fff4f2;
        color: #9b241a;
      }
      .mobile-timesheet-unscheduled span {
        color: #7d453f;
        font-size: 12px;
        line-height: 1.4;
      }
      body[data-presentation="mobile"] .mobile-timesheet-detail {
        padding: 12px;
        border-radius: 12px;
      }
      body[data-presentation="mobile"] .mobile-timesheet-detail .detail-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      body[data-presentation="mobile"] .mobile-timesheet-detail
      .mobile-timesheet-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mobile-timesheet-detail .section-heading {
        position: static;
        gap: 10px;
        margin: -12px -12px 12px;
        padding: 12px;
        border-bottom: 1px solid var(--line);
        background: #fff;
      }
      .mobile-timesheet-detail .section-heading h2 { font-size: 19px; }
      .mobile-timesheet-detail .section-heading p {
        margin-top: 3px;
        font-size: 12px;
      }
      .mobile-timesheet-detail .attendance-detail-summary { gap: 8px; }
      .mobile-timesheet-detail .attendance-detail-summary > div {
        min-width: 0;
        padding: 10px;
      }
      .mobile-timesheet-detail .mobile-timesheet-detail-summary > div {
        display: grid;
        gap: 4px;
        align-content: start;
      }
      .mobile-timesheet-detail .mobile-timesheet-detail-summary strong {
        color: var(--muted);
        font-size: 12px;
      }
      .mobile-timesheet-detail .mobile-timesheet-detail-summary span {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 14px;
        font-weight: 750;
      }
      .mobile-timesheet-detail-group { overflow: clip; }
      .mobile-timesheet-detail-group > summary {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 11px 12px;
        font-size: 14px;
      }
      .mobile-timesheet-detail-list {
        display: grid;
        gap: 8px;
        padding: 0 8px 8px;
      }
      .mobile-timesheet-detail-card {
        min-width: 0;
        overflow: hidden;
        border: 1px solid #d9e2de;
        border-radius: 9px;
        background: #fff;
      }
      .mobile-timesheet-detail-card.is-warning {
        border-color: #efd59c;
        background: #fffaf0;
      }
      .mobile-timesheet-detail-card dl { margin: 0; }
      .mobile-timesheet-detail-card dl > div {
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 9px 10px;
        border-bottom: 1px solid #edf1ef;
      }
      .mobile-timesheet-detail-card dl > div:last-child { border-bottom: 0; }
      .mobile-timesheet-detail-card :is(dt, dd) {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
        line-height: 1.4;
      }
      .mobile-timesheet-detail-card dt {
        color: var(--muted);
        font-size: 12px;
        font-weight: 750;
      }
      .mobile-timesheet-detail-card dd { font-size: 13px; }
      .mobile-timesheet-detail-card dd :is(form, button, select, input) {
        max-width: 100%;
      }
      .mobile-timesheet-detail-empty {
        margin: 0;
        padding: 12px;
        color: var(--muted);
        font-size: 13px;
      }
      .mobile-timesheet-detail-group > .compact-form {
        grid-template-columns: minmax(0, 1fr);
        margin: 0 8px 8px;
      }
      .mobile-timesheet-detail-group > .compact-form .span-2 { grid-column: auto; }
      body[data-presentation="mobile"] .mobile-period-confirmation {
        display: block;
        margin: 0 0 8px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      body[data-presentation="mobile"]
      .mobile-period-confirmation > summary {
        border-color: #9fd3cd;
        background: #f3faf8;
      }
      body[data-presentation="mobile"]
      .mobile-period-confirmation .mobile-compact-sheet-content {
        gap: 16px;
      }
      body[data-presentation="mobile"] .record-dialog .dialog-head {
        position: static;
        z-index: 3;
        padding-top: max(14px, env(safe-area-inset-top));
        background: #fff;
      }
      body[data-presentation="mobile"] .record-dialog .dialog-actions {
        bottom: auto;
        margin-bottom: 0;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
      }
      @media (min-width: 768px) {
        .mobile-record-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      @media (max-width: 360px) {
        .mobile-timesheet-period > .status-badge { width: fit-content; }
        .mobile-timesheet-date-fields,
        .mobile-timesheet-times { grid-template-columns: minmax(0, 1fr); }
        .mobile-timesheet-card .mobile-record-metric strong { font-size: 13px; }
        .mobile-timesheet-time > strong { font-size: 13px; }
      }
      .pagination-control, .pagination-number,
      .pagination-jump :is(input, button) { min-height: 44px; }
      .pagination-number {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
      }
    }
    @media (max-width: 720px) {
      /*
       * Phone lists use a shared card renderer. Dense matrices, import grids
       * and document tables deliberately keep an inner horizontal scroller;
       * JavaScript marks those wrappers with mobile-scroll-table-wrap.
       */
      .mobile-card-wrap { overflow: visible; border: 0; background: transparent; }
      table.mobile-card-table {
        display: block;
        min-width: 0 !important;
        width: 100%;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        table-layout: auto;
      }
      .mobile-card-table caption { display: block; }
      .mobile-card-table > thead {
        display: block;
        margin: 0 0 10px;
        padding: 0 0 4px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #edf5f2;
      }
      .mobile-card-table > thead.mobile-date-menu-open {
        position: relative;
        z-index: 96;
        overflow: visible;
      }
      .mobile-card-table > thead.mobile-date-menu-open > tr { overflow: visible; }
      .mobile-card-table.mobile-card-table-no-controls > thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
      }
      .mobile-card-table > thead > tr {
        display: flex;
        gap: 8px;
        width: 100%;
        padding: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
      }
      .mobile-card-table > thead > tr > th {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        flex: 0 0 min(78vw, 280px);
        min-width: min(78vw, 280px) !important;
        width: auto !important;
        padding: 9px;
        border: 1px solid #c9ded9;
        border-radius: 7px;
        background: #fff;
        box-shadow: none !important;
        scroll-snap-align: start;
      }
      .mobile-card-table > thead > tr > th.select-cell {
        flex: 0 0 54px;
        min-width: 54px !important;
        width: 54px !important;
        display: grid;
        place-items: center;
      }
      .mobile-card-table > thead > tr > th[data-mobile-header-useful="0"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
      }
      .mobile-card-table > :is(tbody, tfoot) {
        display: grid;
        gap: 10px;
        width: 100%;
        padding: 0;
        background: transparent;
      }
      .mobile-card-table > tbody + tbody { margin-top: 10px; }
      .mobile-card-table > :is(tbody, tfoot) > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 2px 7px rgba(18, 25, 21, .06);
      }
      .mobile-card-table > :is(tbody, tfoot) > tr > :is(th, td) {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100%;
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
        align-items: start;
        gap: 8px 12px;
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid #e5e9e7;
        background: #fff !important;
        box-shadow: none !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: normal;
        overflow-wrap: break-word;
        font-size: 14px !important;
        line-height: 1.45;
      }
      .mobile-card-table > :is(tbody, tfoot) > tr > :is(th, td):last-child { border-bottom: 0; }
      .mobile-card-table > :is(tbody, tfoot) > tr > :is(th, td)::before {
        content: attr(data-mobile-label);
        min-width: 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.35;
        letter-spacing: .01em;
      }
      .mobile-card-table > :is(tbody, tfoot) > tr > :is(th, td) > * {
        grid-column: 2;
        min-width: 0;
        max-width: 100%;
      }
      .mobile-card-table > :is(tbody, tfoot) > tr > .empty-state { display: block; text-align: center !important; }
      .mobile-card-table > :is(tbody, tfoot) > tr > .empty-state::before { content: none; }
      .mobile-card-table .select-cell,
      .mobile-card-table .issue-select-cell,
      .mobile-card-table [data-column-pin],
      .mobile-card-table [data-fixed-column] {
        position: static !important;
        inset: auto !important;
        min-width: 0 !important;
        width: auto !important;
      }
      .mobile-card-table .row-actions,
      .mobile-card-table .actions {
        min-width: 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .mobile-card-table .row-actions > :is(a, button),
      .mobile-card-table .actions > :is(a, button) { min-height: 44px; flex: 1 1 120px; }
      .mobile-card-table :is(.inline-cell-editor, .inline-currency-pair-editor) {
        min-width: 0;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
      }
      .mobile-card-table :is(.inline-edit-input, .inline-edit-currency-code) {
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
      }
      .mobile-card-table .inline-edit-trigger {
        flex-basis: 44px;
        width: 44px;
        min-height: 44px;
        opacity: 1;
      }
      .mobile-card-table .inline-edit-actions button {
        width: 44px;
        min-height: 44px;
      }
      .mobile-card-table .inline-suggestion-menu {
        left: auto;
        right: 0;
        width: min(270px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
      }
      .mobile-card-table [data-inline-suggestion-value] { min-height: 44px; }
      .mobile-card-table > :is(tbody, tfoot) > tr:has(.inline-editing) {
        position: relative;
        z-index: 58;
        overflow: visible;
      }
      .scroll-workspace .list-data-scroll.mobile-card-wrap {
        height: clamp(320px, 60dvh, 620px);
        min-height: 320px;
        padding: 10px;
        overflow-y: auto;
        overflow-x: hidden;
      }
      .mobile-table-scroll-hint {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 7px;
        padding: 7px 9px;
        border: 1px solid #c9ded9;
        border-radius: 6px;
        background: #edf8f6;
        color: var(--primary-dark);
        font-size: 11px;
        font-weight: 750;
      }
      .mobile-table-scroll-hint::before { content: "↔"; font-size: 16px; }
      .mobile-scroll-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
      .mobile-scroll-table-wrap > table { width: max-content; max-width: none; }

      /* Payslip rows keep their semantic table on desktop/print and become
       * complete item cards on phones, including rowspan dependencies. */
      .payroll-detail-table-wrap.mobile-card-wrap { border-top: 0; }
      .payroll-detail-table.mobile-card-table > tbody.payroll-detail-item {
        display: grid;
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 2px 7px rgba(18, 25, 21, .06);
      }
      .payroll-detail-table.mobile-card-table > tbody.payroll-detail-item > tr {
        display: contents;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }
      .payroll-detail-table.mobile-card-table > tbody.payroll-detail-item > tr > :is(th, td) {
        border-bottom: 1px dashed #dfe5e2;
      }
      .payroll-detail-table.mobile-card-table .payroll-detail-item-name {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 12px;
        background: #f3f8f6 !important;
        color: var(--ink) !important;
        font-size: 14px;
        font-weight: 850;
      }
      .payroll-detail-table.mobile-card-table .payroll-detail-item-name > * { grid-column: 1; }
      .payroll-detail-table.mobile-card-table .payroll-detail-item-name::before { content: none; }
      .payroll-detail-table.mobile-card-table .payroll-detail-amount {
        color: var(--primary-dark);
        font-weight: 850;
        font-variant-numeric: tabular-nums;
      }
      .payroll-detail-table.mobile-card-table:not(.payroll-deduction-table)
      > tbody.payroll-detail-item .payroll-detail-amount { order: 2; }
      .payroll-detail-table.mobile-card-table > tfoot { margin-top: 10px; }
      .payroll-detail-table.mobile-card-table > tfoot > tr > :is(th, td) { background: #f3f8f6 !important; }
      .payroll-map-list > div,
      .payroll-map-total { grid-template-columns: minmax(0, 1fr); gap: 5px; }
      .payroll-map-list dt,
      .payroll-map-list dd,
      .payroll-map-total :is(span, strong),
      .payroll-detail-table :is(th, td),
      .payroll-net-pay-card strong {
        min-width: 0;
        max-width: 100%;
        word-break: normal;
        overflow-wrap: break-word;
      }
      .payroll-map-list dd,
      .payroll-map-total strong { text-align: left; }
      .payroll-meal-calculation { min-width: 0; justify-content: flex-start; }
      .payroll-group-total {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
      }
      .payroll-group-total strong { min-width: 0; overflow-wrap: break-word; }
      .mobile-card-table .attendance-cell-with-anomaly {
        min-width: 0;
        max-width: none;
      }
      .mobile-card-table .attendance-strong-anomaly-fallback {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
      }
      .mobile-card-table :is(
        .attendance-anomaly-actions button.row-action,
        .attendance-anomaly-editor-toggle
      ) {
        width: 100%;
        min-height: 44px;
        padding: 8px 10px;
        border: 1px solid #d7b570;
        border-radius: 6px;
        background: #fffaf0;
        font-size: 13px;
        text-align: center;
      }

      .pagination { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
      .pagination-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
      }
      .pagination-links > .pagination-control { width: 100%; }
      .pagination-numbers {
        grid-column: 1 / -1;
        justify-content: center;
        max-width: 100%;
        overflow-x: auto;
        padding: 2px;
      }
      .pagination-jump {
        grid-template-columns: auto minmax(64px, 1fr) auto auto;
        width: 100%;
      }
      .pagination-jump input { width: 100%; }
    }
    @media print {
      body[data-print-payroll="1"] .side,
      body[data-print-payroll="1"] .mobile-bar,
      body[data-print-payroll="1"] .mobile-bottom-nav,
      body[data-print-payroll="1"] .module-switcher-group,
      body[data-print-payroll="1"] .module-switcher-tabs,
      body[data-print-payroll="1"] .app-page-chrome,
      body[data-print-payroll="1"] .module-tabs,
      body[data-print-payroll="1"] .app-notification-chrome,
      body[data-print-payroll="1"] .public-page-notification-dock,
      body[data-print-payroll="1"] .workspace-context-actions,
      body[data-print-payroll="1"] .user-period-confirmation-form,
      body[data-print-payroll="1"] .user-period-confirmation-return,
      body[data-print-payroll="1"] .payroll-foundation-note { display: none !important; }
      body[data-print-payroll="1"] .app { display: block; }
      body[data-print-payroll="1"] main { padding: 0; }
      body[data-print-payroll="1"] .payroll-payslip { width: 100%; max-width: none; overflow: visible; border-radius: 0; box-shadow: none; }
      body[data-print-payroll="1"] .payroll-payslip-body { padding: 10px 0; background: #fff; }
      body[data-print-payroll="1"] .payroll-group,
      body[data-print-payroll="1"] .payroll-detail-table-wrap { overflow: visible; }
      body[data-print-payroll="1"] .payroll-group { break-inside: auto; }
      body[data-print-payroll="1"] :is(.payroll-group-head, .payroll-mapping-stage, .payroll-map-total, .payroll-map-separate, .payroll-detail-item, .payroll-detail-table tfoot, .payroll-group-total, .payroll-net-pay-card) { break-inside: avoid; }
      body[data-print-payroll="1"] .payroll-detail-table { min-width: 0; table-layout: fixed; }
      body[data-print-payroll="1"] .payroll-detail-table thead { display: table-header-group; }
      body[data-print-payroll="1"] .mobile-payroll-payslip { width: 100%; max-width: none; gap: 8px; }
      body[data-print-payroll="1"] .mobile-payroll-net strong { overflow: visible; }
      body[data-print-payroll="1"] :is(.mobile-payroll-hero, .mobile-payroll-section, .mobile-payroll-step, .mobile-payroll-item, .mobile-payroll-net) { break-inside: avoid; box-shadow: none; }
      body[data-print-payroll="1"] .mobile-payroll-items { padding: 8px; }
    }
    @media (max-width: 520px) {
      .mobile-payroll-hero-head { display: grid; }
      .mobile-payroll-period { width: 100%; text-align: left; }
      .mobile-payroll-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .mobile-payroll-kpi { padding-inline: 8px; }
      .mobile-payroll-kpi strong { font-size: 17px; }
      .mobile-payroll-section-head { padding-inline: 12px; }
      .mobile-payroll-items, .mobile-payroll-steps { padding: 10px; }
      .mobile-payroll-item-head { grid-template-columns: minmax(0, 1fr); }
      .mobile-payroll-total { display: grid; grid-template-columns: minmax(0, 1fr); }
      .payroll-payslip-head { padding: 18px 16px; }
      .user-period-confirmation { align-items: stretch; flex-direction: column; }
      .user-period-confirmation-copy,
      .user-period-confirmation-return {
        flex: none;
        width: 100%;
        min-width: 0;
      }
      .user-period-confirmation-copy { grid-template-columns: 1fr; }
      .user-period-confirmation-copy > small { grid-column: 1; }
      .user-period-confirmation-return { align-items: stretch; flex-direction: column; }
      .user-period-confirmation-return :is(input, textarea) { width: 100%; min-width: 0; }
      .user-period-confirmation-form { width: 100%; }
      .user-period-confirmation-form button { width: 100%; min-height: 44px; }
      .impersonation-banner {
        height: 52px;
        min-height: 52px;
        gap: 6px;
        padding: 4px 8px;
      }
      .impersonation-banner > div { min-width: 0; flex: 1 1 auto; display: block; }
      .impersonation-banner strong {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .impersonation-banner > div > span { display: none; }
      .impersonation-banner form { min-width: 0; }
      .impersonation-banner button { min-height: 44px; padding: 6px 9px; }
      .impersonation-banner .impersonation-return-full { display: none; }
      .impersonation-banner .impersonation-return-short { display: inline; }
      .payroll-attendance-strip { grid-template-columns: 1fr; padding: 12px 12px 0; }
      .payroll-payslip-body { padding: 12px; }
      .payroll-group-head { align-items: stretch; flex-direction: column; }
      .payroll-group-source { width: fit-content; }
      .payroll-mapping-flow { padding: 12px; }
      .payroll-net-pay-card { align-items: flex-start; flex-direction: column; }
      .payroll-net-pay-card strong { width: 100%; text-align: left; }
      .quick-date-popover {
        grid-template-columns: minmax(0, 1fr);
        position: fixed;
        top: calc(60px + env(safe-area-inset-top)) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 72px - env(safe-area-inset-top));
        overflow: auto;
      }
      body.impersonation-active .quick-date-popover {
        top: calc(112px + env(safe-area-inset-top)) !important;
        max-height: calc(100dvh - 124px - env(safe-area-inset-top));
      }
      .quick-date-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .quick-date-presets button { min-height: 44px; }
      .quick-date-calendar-head {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
      }
      .quick-date-calendar-head button { width: 44px; min-height: 44px; }
      .quick-date-calendar-grid button {
        min-width: 0;
        min-height: 44px;
        padding-inline: 1px;
      }
      .app-toast-stack {
        top: 56px;
        right: 8px;
        width: calc(100vw - 16px);
      }
      body.impersonation-active .app-toast-stack {
        top: 108px;
      }
      .top { margin-bottom: 14px; }
      .top { flex-direction: column; align-items: stretch; }
      .section-head { align-items: stretch; flex-direction: column; }
      .top > .command-actions { justify-content: flex-start; flex-wrap: wrap; }
      h1 { font-size: 22px; }
      .quick-search { grid-template-columns: 1fr; }
      .attendance-timesheet-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .quick-search.attendance-timesheet-search > input[type="search"],
      .attendance-timesheet-search > .attendance-work-date-range { grid-column: 1 / -1; }
      .attendance-timesheet-search .attendance-work-date-range {
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .admin-user-filter { grid-template-columns: 1fr; }
      .audit-filter { grid-template-columns: 1fr; }
      .audit-filter > :is(.audit-date-range, .audit-filter-actions) { grid-column: 1 / -1; }
      .audit-date-range { grid-template-columns: minmax(0, 1fr); }
      .audit-filter .compact-filter-label { grid-template-columns: 72px 1fr; }
      .quick-search input[type="search"] { grid-column: auto; }
      .command-actions { align-items: stretch; }
      .list-toolbar > .command-actions > :is(.button, button) {
        flex: 1 1 160px;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
      }
      details.action-menu > summary { height: 100%; }
      .column-picker { grid-template-columns: 1fr; }
      .column-picker-heading { display: none; }
      .column-option {
        grid-template-columns: 28px repeat(2, minmax(0, 1fr));
        gap: 8px;
        min-width: 0;
        padding: 9px;
      }
      .column-option > .column-drag { grid-column: 1; grid-row: 1; }
      .column-option > label:first-of-type { grid-column: 2 / -1; grid-row: 1; }
      .column-option > .column-pin-check {
        min-width: 0;
        min-height: 44px;
        justify-content: flex-start;
        padding: 7px 8px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: #f8faf9;
      }
      .column-option > .column-pin-check:nth-of-type(2) { grid-column: 1 / 3; grid-row: 2; }
      .column-option > .column-pin-check:nth-of-type(3) { grid-column: 3; grid-row: 2; }
      .column-pin-check .sr-only {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
      }
      .column-option > .column-order-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .column-order-actions button { width: 100%; min-height: 44px; }
      .issue-document-column-picker .issue-document-column-option {
        grid-template-columns: 28px minmax(0, 1fr);
      }
      .issue-document-column-option > label:first-of-type { grid-column: 2; }
      .issue-document-column-option > .issue-document-column-type {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        padding: 7px 8px;
        border-radius: 5px;
        background: #f3f6f4;
        overflow-wrap: break-word;
      }
      .issue-document-column-option > .issue-document-column-type::before {
        content: "Loại dữ liệu: ";
        font-weight: 750;
      }
      .issue-document-column-option > .column-order-actions { grid-row: 3; }
      .saved-view-menu-actions :is(a.button, button),
      .saved-view-rename-form input[name="name"] { min-height: 44px; font-size: 16px; }
      .role-select { min-width: 0; width: 100%; }
      .bulk-toolbar { align-items: stretch; flex-direction: column; }
      .bulk-toolbar select { width: 100%; }
      .bulk-scope-label { align-items: stretch; flex-direction: column; }
      .bulk-edit-controls { flex: none; flex-direction: column; min-width: 0; width: 100%; }
      .bulk-edit-controls > select, .bulk-value-editor { flex: none; min-width: 0; width: 100%; }
      .bulk-currency-controls,
      .configuration-filter-bar,
      .compact-search,
      .issue-picker-toolbar { grid-template-columns: minmax(0, 1fr); }
      .configuration-filter-count { white-space: normal; }
      .issue-picker-toolbar label { grid-template-columns: minmax(0, 1fr); }
      .bulk-undo-banner { align-items: stretch; flex-direction: column; }
      .import-steps { grid-template-columns: 1fr; }
      .import-review-actions { align-items: stretch; flex-direction: column-reverse; }
      .import-upload-form { grid-template-columns: 1fr; }
      .order-import-summary-grid { grid-template-columns: 1fr; }
      .order-import-summary-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
      .order-import-summary-grid > div:last-child { border-bottom: 0; }
      .order-import-source > div { grid-template-columns: 1fr; }
      .order-import-review-actions { align-items: stretch; flex-direction: column-reverse; }
      .order-import-template-save { align-items: stretch; flex-direction: column; min-width: 0; width: 100%; }
      .order-import-template-save label { flex: none; }
      .attendance-weekday-row { grid-template-columns: minmax(0, 1fr); }
      .attendance-weekday-toggle { grid-column: auto; }
      .attendance-roster-filter { grid-template-columns: minmax(0, 1fr); }
      .attendance-roster-filter input[type="search"] { grid-column: auto; }
      .attendance-roster-period-control { grid-column: auto; }
      .attendance-roster-period-shortcuts { grid-template-columns: minmax(0, 1fr); }
      .attendance-roster-period-date { grid-template-columns: minmax(0, 1fr); }
      .attendance-roster-period-date > :is(strong, .muted) { grid-column: auto; text-align: left; }
      .attendance-roster-period-date > button { width: 100%; }
      .attendance-roster-weekday-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .attendance-roster-presets { align-items: stretch; flex-direction: column; }
      .attendance-roster-presets button { width: 100%; }
      .sticky-form-actions { align-items: stretch; flex-direction: column-reverse; }
      .sticky-form-actions > :is(a.button, button) { width: 100%; }
      .permission-bulk-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
      .permission-bulk-options { align-items: flex-start; flex-direction: column; gap: 2px; }
      .profile-module-bulk-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; gap: 2px 8px; width: 100%; }
      .permission-bulk-status { text-align: left; flex-basis: auto; }
      .dialog-head, .dialog-body { padding: 15px; }
      .nav-config-groups { grid-template-columns: 1fr; }
      .issue-document-head > div { padding: 12px; }
      .issue-document-title h2 { font-size: 21px; }
      .issue-recipient-grid > div { grid-template-columns: 1fr; gap: 4px; }
      .issue-document-signatures { grid-template-columns: 1fr; min-height: 0; }
      .issue-document-signatures > div { min-height: 96px; border-right: 0; border-bottom: 1px solid #cbd6dc; }
    }
    @media (max-width: 350px) {
      .mobile-payroll-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mobile-payroll-person > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
      .mobile-payroll-item-head { grid-template-columns: minmax(0, 1fr); }
      .mobile-payroll-item-amount { white-space: nowrap; }
      .mobile-bar .app-notification-launcher > span:nth-child(2) { display: none; }
      .attendance-timesheet-search .attendance-work-date-range { grid-template-columns: minmax(0, 1fr); }
      .pagination-jump { grid-template-columns: auto minmax(56px, 1fr) auto; }
      .pagination-jump .pagination-total { grid-column: 1 / -1; }
      .mobile-card-table > :is(tbody, tfoot) > tr > :is(th, td) {
        grid-template-columns: minmax(82px, 36%) minmax(0, 1fr);
        padding-inline: 10px;
      }
    }
    @media (min-width: 901px) {
      /*
       * One desktop command bar for every module.  The former 1400px rule
       * stacked generic toolbars while Attendance kept a single row, so
       * otherwise identical workspaces changed layout by module.  Keep the
       * shell horizontal and let its two inner regions scroll when the
       * available main-column width is narrow.
       */
      .list-toolbar {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
      }
      .list-toolbar > .quick-search {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        scrollbar-width: thin;
      }
      .list-toolbar > .quick-search > input[type="search"] {
        min-width: 220px;
        width: auto;
        flex: 1 1 220px;
      }
      .list-toolbar > .quick-search > select,
      .list-toolbar > .quick-search > :is(button, a.button) {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .list-toolbar > .attendance-timesheet-search >
      .attendance-work-date-range {
        flex: 0 0 auto;
      }
      .list-toolbar > .command-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
      }
      .attendance-roster-toolbar > .attendance-roster-filter {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow: visible;
      }
      .attendance-roster-toolbar > .attendance-roster-filter > input[type="search"] { min-width: 160px; }
      .attendance-roster-toolbar > .attendance-roster-filter > select[name="department_id"],
      .attendance-roster-toolbar > .attendance-roster-filter > select[name="org_unit_id"] { min-width: 110px; max-width: 120px; }
      .attendance-roster-toolbar > .attendance-roster-filter > select[name="page_size"] { min-width: 95px; max-width: 100px; }
    }
    @media (min-width: 901px) {
      /* Keep audit filters and commands on one compact desktop row. */
      .audit-list-toolbar {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px;
      }
      .audit-list-toolbar > .audit-filter {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        width: auto;
        min-width: 0;
        gap: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        scrollbar-width: thin;
      }
      .audit-list-toolbar > .audit-filter > input[type="search"] {
        flex: 1 1 150px;
        width: auto;
        min-width: 120px;
      }
      .audit-list-toolbar > .audit-filter > select {
        flex: 1 1 112px;
        width: 112px;
        min-width: 104px;
        max-width: 160px;
      }
      .audit-list-toolbar .audit-date-range {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
      }
      .audit-list-toolbar .compact-filter-label {
        display: flex;
        flex: 0 0 auto;
        gap: 4px;
      }
      .audit-list-toolbar .audit-date-range .quick-date-filter {
        width: 112px;
        min-width: 112px;
      }
      .audit-list-toolbar .audit-filter-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
      }
      .audit-list-toolbar .audit-filter-actions > select {
        flex: 0 0 78px;
        width: 78px;
        min-width: 78px;
      }
      .audit-list-toolbar > .command-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        width: auto;
        overflow: visible;
        padding-bottom: 0;
      }
      .audit-list-toolbar > .audit-filter > :is(input, select),
      .audit-list-toolbar .audit-date-range .quick-date-filter > input,
      .audit-list-toolbar .audit-filter-actions > :is(select, button),
      .audit-list-toolbar > .command-actions > :is(button, .button) {
        min-height: 36px;
        height: 36px;
        font-size: 12px;
      }
      .audit-list-toolbar > .audit-filter > select,
      .audit-list-toolbar .audit-filter-actions > :is(select, button),
      .audit-list-toolbar > .command-actions > :is(button, .button) {
        padding-inline: 8px;
        white-space: nowrap;
      }
    }

/* Shared full-text field presentation: no clipping or line limit. */
.field-prose {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-weight: 400;
  line-height: 1.55;
}

/* Shared reading surface for immutable record feeds. */
.readonly-record-list { width: 100%; max-width: 1040px; margin: 0 auto; min-width: 0; display: grid; gap: 12px; }
.readonly-record-list > .panel { margin: 0; }
.readonly-record-list h1 { font-size: 23px; line-height: 1.35; margin: 0 0 8px; }
.readonly-record-card { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.readonly-record-card h2 { font-size: 18px; line-height: 1.45; margin: 0 0 6px; }
.readonly-record-card > .muted { font-size: 12px; margin: 0 0 16px; }
.readonly-record-content { line-height: 1.65; }
.readonly-record-card > .button { margin-top: 16px; }
@media (max-width: 900px) { .readonly-record-list h1 { font-size: 20px; } }

/* Notification sender workspace */
.notification-manager { max-width: 1050px; margin-inline: auto; display: grid; gap: 16px; min-width: 0; }
.notification-manager > header h1 { margin-bottom: 6px; }
.notification-manager-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.notification-manager-tabs a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; color: var(--muted); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.notification-manager-tabs a[aria-current="page"] { color: var(--primary-dark); border-bottom-color: var(--primary); background: #edf8f6; }
.notification-compose { max-width: 820px; width: 100%; box-sizing: border-box; }
.notification-compose form > label, .notification-audience label:not(.notification-recipient-choice) { display: grid; gap: 6px; }
.notification-compose :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select) { width: 100%; box-sizing: border-box; }
.notification-compose fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 14px; min-width: 0; margin: 0; }
.notification-compose legend { padding: 0 6px; font-weight: 700; }
.notification-recipient-results { max-height: 300px; overflow-y: auto; margin-block: 8px; border-radius: 6px; }
.notification-recipient-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px; cursor: pointer; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.notification-recipient-choice:hover { background: #edf8f6; }
.notification-recipient-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.notification-recipient-chip { white-space: normal; overflow-wrap: anywhere; text-align: left; max-width: 100%; }
.notification-send-time > label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.notification-send-time > label[data-send-at-wrap] { display: grid; gap: 6px; margin-top: 8px; }
.notification-send-time input[type="radio"] { width: 20px; height: 20px; min-width: 20px; }
.notification-reader-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.notification-reader-actions:not(:has(> a)):has(> [hidden]) { display: none; }
@media (max-width: 600px) {
 .notification-manager-tabs { gap: 0; }
 .notification-manager-tabs a { padding-inline: 9px; font-size: 14px; }
 .notification-compose fieldset { padding: 10px; }
 .notification-reader-actions .button { padding-inline: 10px; }
}

/* Bảng công: two views over the same employee/day ledger. */
.timesheet-view-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.timesheet-view-tabs a { min-height:44px; }
.timesheet-confirmation-cell { display:grid; gap:6px; min-width:160px; max-width:280px; }
.timesheet-confirmation-cell .status-badge { white-space:normal; width:fit-content; }
.timesheet-confirmation-return > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--primary-dark); font-weight:700; }
.timesheet-confirmation-return form { display:grid; gap:8px; padding:8px 0; }
.timesheet-confirmation-return label { display:grid; gap:4px; }
.timesheet-confirmation-return textarea { width:100%; min-height:44px; }
.timesheet-summary-workspace { min-width:0; }
.timesheet-summary-workspace .table-wrap { position:relative; }
.timesheet-summary-search { flex-wrap:wrap; align-items:end; }
.timesheet-summary-search label { display:grid; gap:4px; min-width:140px; }
.timesheet-summary-search input[type=search] { flex:1 1 220px; }
.timesheet-summary-table { width:max-content; min-width:100%; }
.timesheet-summary-table th, .timesheet-summary-table td { padding:10px 12px; }
.timesheet-summary-table thead th { text-align:center; min-width:108px; }
.timesheet-summary-table thead th small { display:block; color:var(--muted); margin-top:3px; }
.timesheet-summary-person { min-width:190px; max-width:260px; text-align:left; white-space:normal; font-weight:700; }
.timesheet-summary-confirmation { min-width:220px; }
.timesheet-summary-table .timesheet-summary-day { text-align:center; white-space:nowrap; font-weight:700; font-variant-numeric:tabular-nums; }
.timesheet-summary-day.is-empty { color:var(--muted); }
.mobile-timesheet-confirmation { display:grid; gap:4px; margin:8px 0; }
.mobile-timesheet-confirmation > span { color:var(--muted); font-size:12px; }
.timesheet-summary-card h2 { font-size:16px; margin:0; }
.timesheet-summary-days { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; }
.timesheet-summary-days .timesheet-summary-day { display:grid; gap:4px; padding:8px; border:1px solid var(--line); border-radius:6px; min-width:0; }
.timesheet-summary-days .timesheet-summary-day > span:first-child { color:var(--ink); font-size:12px; }
.timesheet-summary-days .timesheet-summary-day small { font-size:11px; overflow-wrap:break-word; }
@media (max-width:900px) {
  .timesheet-summary-workspace { overflow:visible; }
  .timesheet-summary-search { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .timesheet-summary-search input[type=search] { grid-column:1 / -1; }
  .timesheet-summary-search label { min-width:0; }
  .timesheet-summary-search input, .timesheet-summary-search select { min-width:0; width:100%; min-height:44px; }
  .timesheet-summary-workspace .list-toolbar { display:block; }
  .timesheet-summary-workspace .table-footer { flex-wrap:wrap; }
  .timesheet-summary-workspace .mobile-record-card { margin:10px 0; }
}

/* Compact personal confirmation in the page chrome. */
.app-notification-dock:has(> .timesheet-confirmation-launcher) { gap:6px; }
.app-notification-dock:has(> .timesheet-confirmation-launcher) > [data-notification-module-link] { order:1; }
.timesheet-confirmation-launcher {
  position:static; flex:0 0 auto; min-height:30px; padding:5px 8px;
  gap:5px; border:1px solid #b8c8c3; border-radius:999px;
  background:#fff; color:var(--primary-dark); box-shadow:none;
  font-size:11px; line-height:1.3; white-space:nowrap;
}
.timesheet-confirmation-launcher:hover { background:#edf8f6; }
.timesheet-confirmation-dialog { width:min(520px, calc(100vw - 32px)); }
.timesheet-confirmation-dialog .workspace-config-dialog-body { display:grid; gap:14px; padding:16px; }
.timesheet-confirmation-dialog .user-period-confirmation-copy { min-width:0; grid-template-columns:minmax(0,1fr); justify-items:start; }
.timesheet-confirmation-dialog .user-period-confirmation-copy > small { grid-column:1; }
@media (max-width:900px) {
  /* A desktop response resized to phone width retains its compact action. */
  .app-notification-dock:has(> .timesheet-confirmation-launcher) {
    display:flex; padding:0 0 8px; border:0; background:transparent;
  }
}

/* Timesheet and payroll confirmations keep their full resource-specific labels. */
@media (max-width: 900px) {
  body[data-resource-key="attendance.timesheets"] .mobile-context-action-dock:has(> [data-mobile-context-launcher^="attendance-timesheet-confirmation"]),
  body[data-resource-key="attendance.payroll"] .mobile-context-action-dock:has(> [data-mobile-context-launcher^="attendance-payroll-confirmation"]) {
    max-width:none;
    flex:0 0 auto;
    overflow:visible;
  }
  body[data-resource-key="attendance.timesheets"] [data-mobile-disclosure-key^="attendance-timesheet-confirmation"],
  body[data-resource-key="attendance.payroll"] [data-mobile-disclosure-key^="attendance-payroll-confirmation"] {
    width:auto;
  }
  body[data-resource-key="attendance.timesheets"] [data-mobile-context-launcher^="attendance-timesheet-confirmation"],
  body[data-resource-key="attendance.payroll"] [data-mobile-context-launcher^="attendance-payroll-confirmation"],
  body[data-resource-key="attendance.timesheets"] [data-mobile-disclosure-key^="attendance-timesheet-confirmation"] > summary,
  body[data-resource-key="attendance.payroll"] [data-mobile-disclosure-key^="attendance-payroll-confirmation"] > summary {
    width:96px;
    min-width:96px;
    height:44px;
    min-height:44px;
    flex:0 0 96px;
    padding:4px 6px;
  }
  body[data-resource-key="attendance.timesheets"] [data-mobile-context-launcher^="attendance-timesheet-confirmation"] .mobile-compact-launcher-icon,
  body[data-resource-key="attendance.payroll"] [data-mobile-context-launcher^="attendance-payroll-confirmation"] .mobile-compact-launcher-icon,
  body[data-resource-key="attendance.timesheets"] [data-mobile-disclosure-key^="attendance-timesheet-confirmation"] > summary .mobile-compact-launcher-icon,
  body[data-resource-key="attendance.payroll"] [data-mobile-disclosure-key^="attendance-payroll-confirmation"] > summary .mobile-compact-launcher-icon {
    width:auto;
    max-width:100%;
    height:auto;
    font-size:11px;
    line-height:1.25;
    white-space:normal;
    text-align:center;
  }
}

@media (max-width: 389px) {
  body[data-resource-key="attendance.timesheets"] .mobile-bar:has([data-mobile-context-launcher^="attendance-timesheet-confirmation"]) > strong,
  body[data-resource-key="attendance.payroll"] .mobile-bar:has([data-mobile-context-launcher^="attendance-payroll-confirmation"]) > strong {
    font-size:12px;
    line-height:1.25;
    white-space:normal;
    text-overflow:clip;
    overflow:visible;
  }
}

/* Per-user notification read state, shared by desktop and mobile. */
.app-notification-launcher { position: relative; }
.notification-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #b42318; color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.notification-unread-badge[hidden] { display: none; }
.notification-read-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.notification-read-actions form { margin: 0; }
.notification-read-actions button { min-height: 44px; }
.notification-read-state { color: #526661; font-size: 13px; }
[data-notification-is-read="false"] { border-left: 3px solid var(--primary); }
[data-notification-is-read="false"] .notification-read-state { color: #086961; font-weight: 700; }
[data-notification-read-status] { flex-basis: 100%; font-size: 13px; color: #526661; }
[data-notification-read-status]:empty { display: none; }

.mobile-bar .app-notification-launcher { position: relative; }
.mobile-bar .notification-unread-badge { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding-inline: 4px; font-size: 10px; border: 1px solid #fff; }

/* Shared attendance day labels: design contract section 56 (2026-09-08). */
:root {
  --attendance-workday-ink: #05645f;
  --attendance-workday-bg: #edf8f6;
  --attendance-workday-border: #b8dcd7;
  --attendance-weekly-rest-ink: #59635e;
  --attendance-weekly-rest-bg: #f3f5f4;
  --attendance-weekly-rest-border: #d9dfdc;
  --attendance-holiday-ink: #b42318;
  --attendance-holiday-bg: #fff1f0;
  --attendance-holiday-border: #f4b4ae;
  --attendance-compensatory-ink: #946200;
  --attendance-compensatory-bg: #fff8df;
  --attendance-compensatory-border: #e9cf88;
  --attendance-paid-leave-ink: #067647;
  --attendance-paid-leave-bg: #ecf9f2;
  --attendance-paid-leave-border: #a6d8c2;
  --attendance-unpaid-leave-ink: #b54708;
  --attendance-unpaid-leave-bg: #fff8e8;
  --attendance-unpaid-leave-border: #efcf95;
  --attendance-mixed-leave-ink: #b54708;
  --attendance-mixed-leave-bg: #fff8e8;
  --attendance-mixed-leave-border: #efcf95;
  --attendance-absence-ink: #245baf;
  --attendance-absence-bg: #eff5ff;
  --attendance-absence-border: #bfd3f2;
  --attendance-conflict-ink: #b42318;
  --attendance-conflict-bg: #fff1f0;
  --attendance-conflict-border: #f4b4ae;
}
.attendance-working-day {
  --attendance-day-ink: var(--attendance-workday-ink);
  --attendance-day-bg: var(--attendance-workday-bg);
  --attendance-day-border: var(--attendance-workday-border);
}
:is(.attendance-non-working-day, .attendance-authorized-absence, .timesheet-summary-day, .attendance-day-type-label).is-weekly-rest {
  --attendance-day-ink: var(--attendance-weekly-rest-ink);
  --attendance-day-bg: var(--attendance-weekly-rest-bg);
  --attendance-day-border: var(--attendance-weekly-rest-border);
}
:is(.attendance-non-working-day, .attendance-authorized-absence, .timesheet-summary-day, .attendance-day-type-label).is-holiday {
  --attendance-day-ink: var(--attendance-holiday-ink);
  --attendance-day-bg: var(--attendance-holiday-bg);
  --attendance-day-border: var(--attendance-holiday-border);
}
:is(.attendance-non-working-day, .attendance-authorized-absence, .timesheet-summary-day, .attendance-day-type-label).is-compensatory {
  --attendance-day-ink: var(--attendance-compensatory-ink);
  --attendance-day-bg: var(--attendance-compensatory-bg);
  --attendance-day-border: var(--attendance-compensatory-border);
}
:is(.attendance-non-working-day, .attendance-authorized-absence, .timesheet-summary-day, .attendance-day-type-label).is-paid-leave {
  --attendance-day-ink: var(--attendance-paid-leave-ink);
  --attendance-day-bg: var(--attendance-paid-leave-bg);
  --attendance-day-border: var(--attendance-paid-leave-border);
}
:is(.attendance-non-working-day, .attendance-authorized-absence, .timesheet-summary-day, .attendance-day-type-label).is-unpaid-leave {
  --attendance-day-ink: var(--attendance-unpaid-leave-ink);
  --attendance-day-bg: var(--attendance-unpaid-leave-bg);
  --attendance-day-border: var(--attendance-unpaid-leave-border);
}
:is(.attendance-non-working-day, .attendance-authorized-absence, .timesheet-summary-day, .attendance-day-type-label).is-mixed-leave {
  --attendance-day-ink: var(--attendance-mixed-leave-ink);
  --attendance-day-bg: var(--attendance-mixed-leave-bg);
  --attendance-day-border: var(--attendance-mixed-leave-border);
}
:is(.attendance-non-working-day, .attendance-authorized-absence, .timesheet-summary-day, .attendance-day-type-label).is-absence {
  --attendance-day-ink: var(--attendance-absence-ink);
  --attendance-day-bg: var(--attendance-absence-bg);
  --attendance-day-border: var(--attendance-absence-border);
}
.attendance-unscheduled-punch-row, .timesheet-summary-day.is-conflict {
  --attendance-day-ink: var(--attendance-conflict-ink);
  --attendance-day-bg: var(--attendance-conflict-bg);
  --attendance-day-border: var(--attendance-conflict-border);
}

.attendance-day-type-label {
  max-width: 100%;
  padding: 3px 7px;
  border-color: var(--attendance-day-border, var(--line));
  background: var(--attendance-day-bg, var(--panel));
  color: var(--attendance-day-ink, var(--ink));
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}
.attendance-timesheet-table tr:is(.attendance-working-day, .attendance-non-working-day, .attendance-authorized-absence) > td {
  color: var(--attendance-day-ink);
}
.attendance-timesheet-table tr:is(.attendance-non-working-day, .attendance-authorized-absence) > td {
  background: var(--attendance-day-bg);
}
.attendance-timesheet-table tr:is(.attendance-working-day, .attendance-non-working-day, .attendance-authorized-absence) :is(.attendance-detail-link, .attendance-duration) {
  color: var(--attendance-day-ink);
}
/* Pinned cells and hover keep the same semantic day color as the row. */
.attendance-timesheet-table.record-table tr:is(.attendance-non-working-day, .attendance-authorized-absence, .attendance-unscheduled-punch-row) > td[data-column-pin],
.attendance-timesheet-table.record-table tr:is(.attendance-non-working-day, .attendance-authorized-absence, .attendance-unscheduled-punch-row) > td[data-column-pin] .pinned-cell-value,
.attendance-timesheet-table.record-table tr:is(.attendance-non-working-day, .attendance-authorized-absence, .attendance-unscheduled-punch-row):is(:hover, :focus, :focus-within) > td[data-column-pin],
.attendance-timesheet-table.record-table tr:is(.attendance-non-working-day, .attendance-authorized-absence, .attendance-unscheduled-punch-row):is(:hover, :focus, :focus-within) > td[data-column-pin] .pinned-cell-value {
  background: var(--attendance-day-bg);
}
.timesheet-summary-day:is(.attendance-working-day, .attendance-non-working-day, .attendance-authorized-absence, .attendance-unscheduled-punch-row) {
  color: var(--attendance-day-ink);
  background: var(--attendance-day-bg);
  border-color: var(--attendance-day-border);
}
.timesheet-summary-day .attendance-day-type-label {
  display: flex;
  margin: 4px auto 0;
  max-width: 152px;
  width: fit-content;
}
.mobile-timesheet-card:is(.attendance-working-day, .attendance-non-working-day, .attendance-authorized-absence, .attendance-unscheduled-punch-row) {
  border-color: var(--attendance-day-border);
}
.mobile-timesheet-card:is(.attendance-non-working-day, .attendance-authorized-absence, .attendance-unscheduled-punch-row) {
  background: var(--attendance-day-bg);
}
.mobile-timesheet-card:is(.attendance-working-day, .attendance-non-working-day, .attendance-authorized-absence, .attendance-unscheduled-punch-row) .mobile-record-head h2 {
  color: var(--attendance-day-ink);
}
.mobile-timesheet-card .mobile-record-head > .attendance-day-type-label {
  flex: 0 1 auto;
  max-width: 52%;
  margin: 0;
  font-size: 12px;
  align-self: flex-start;
}
.mobile-timesheet-card .mobile-record-head > div { min-width: 0; }
.mobile-timesheet-card .mobile-record-head .attendance-day-type-label { font-size: 12px; }

/* Full-width mobile explanation uses the same day tokens as desktop. */
.mobile-timesheet-card .mobile-timesheet-day-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--attendance-day-border);
  border-radius: 8px;
  background: var(--attendance-day-bg);
  color: var(--attendance-day-ink);
  font-size: 14px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: break-word;
}

.attendance-day-work-credit {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
}