.payroll-rate-import-dialog{width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:20px;box-shadow:0 24px 80px rgba(15,42,67,.25)}
.payroll-rate-import-dialog::backdrop{background:rgba(15,42,67,.48)}
.payroll-rate-import-panel{display:grid;gap:18px;padding:24px;max-height:calc(100vh - 32px);overflow:auto}
.payroll-import-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.payroll-import-summary>div{display:grid;gap:4px;padding:12px;border:1px solid #d9e8f2;border-radius:12px;background:#f6fbfe}
.payroll-import-summary span{color:#587086;font-size:.82rem}.payroll-import-summary strong{font-size:1.35rem;color:#12314c}
.payroll-import-errors{max-height:220px;overflow:auto;padding:14px;border:1px solid #f2c4c4;border-radius:12px;background:#fff8f8}
.payroll-import-errors p{margin:7px 0;font-size:.86rem}.payroll-rate-import-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:10px}
@media(max-width:720px){.payroll-rate-import-panel{padding:18px}.payroll-import-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-rate-import-dialog .dialog-actions{position:sticky;bottom:-18px;padding:12px 0;background:#fff}}
/* QIDIAN v131 — SELF-OWNED INTERFACE PARITY */
/* Full-upgrade stabilization: attendance, payroll, scheduling, and import reliability. */
/* QIDIAN_CLIENT_BUILD:131 */
:root {
  color-scheme: light;
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  color: #102c4a;
  background: #f4f8fc;
  --navy: #06213f;
  --navy-2: #0a315d;
  --blue: #1677e8;
  --cyan: #2ca9e8;
  --pale-blue: #eef7ff;
  --surface: #ffffff;
  --bg: #f4f8fc;
  --line: #e2ebf4;
  --text: #102c4a;
  --muted: #7890a8;
  --good: #20b578;
  --warn: #f59b23;
  --bad: #fb5b67;
  --purple: #7367f0;
  --shadow: 0 8px 24px rgba(15, 55, 90, .055);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(22, 119, 232, .2); outline-offset: 2px; }

.auth-shell { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(760px 450px at 90% -10%, rgba(53, 170, 235, .18), transparent 61%), #f4f8fc; }
.auth-card { width: min(452px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 24px 64px rgba(23, 57, 92, .12); }
.auth-card h1 { margin: 0 0 8px; color: #17324f; font-size: 24px; letter-spacing: -.03em; }
.auth-card p { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.auth-card-logo { display: flex; width: 100%; justify-content: center; margin: 0 auto 30px; }
.auth-brand { display: grid; width: 176px; max-width: 100%; place-items: center; }
.auth-brand .brand-full-logo { display: block; width: 100%; height: auto; }
.auth-language-float { position: fixed; top: 24px; right: 24px; z-index: 30; }
.portal-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portal-choice { display: grid; min-height: 136px; place-items: center; gap: 10px; border: 1px solid #dbe8f3; border-radius: 14px; background: linear-gradient(180deg, #fff, #f6fbff); color: #254664; padding: 18px 10px; }
.portal-choice:hover { border-color: #74b5e9; background: #f1f9ff; box-shadow: 0 10px 22px rgba(22, 119, 232, .10); }
.portal-choice-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #e8f4ff; color: #197ce3; font-size: 20px; font-weight: 800; }
.portal-choice strong { font-size: 14px; }
.invite-summary { display: grid; gap: 4px; border: 1px solid #d8e9f7; border-radius: 10px; background: #f5fbff; color: #2c5576; padding: 11px 12px; }
.invite-summary strong { font-size: 13px; }
.invite-summary span { color: #7290a8; font-size: 11px; }
.invite-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }

.brand { display: flex; min-width: 0; align-items: center; text-decoration: none; }
.brand-full-logo { display: block; width: 154px; max-width: 100%; height: auto; object-fit: contain; image-rendering: auto; }

.form-grid { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #5f7791; font-size: 12px; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #dbe6ef; border-radius: 9px; background: #fff; color: #19334f; padding: 10px 11px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22, 119, 232, .11); }
textarea { min-height: 94px; resize: vertical; }
.button { min-height: 38px; border: 1px solid transparent; border-radius: 8px; background: linear-gradient(135deg, #2298ec, #1677e8); color: #fff; padding: 8px 14px; font-size: 12px; font-weight: 750; box-shadow: 0 6px 15px rgba(22, 119, 232, .17); }
.button:hover { filter: brightness(.98); }
.button.secondary { border-color: #cfe0ef; background: #fff; color: #1677d5; box-shadow: none; }
.button.secondary:hover { background: #f0f8ff; }
.button.danger { background: #ef5964; box-shadow: none; }
.button.danger:hover { background: #e84d59; filter: none; }
.button.danger:disabled { background: #f2b4bb; color: #fff; }
.mobile-logout { display: none; min-height: 34px; border: 1px solid #f1c3c8; border-radius: 8px; background: #fff4f5; color: #d94351; padding: 6px 10px; font-size: 11px; font-weight: 800; }
.mobile-logout:hover { background: #ffeaed; }
.helper { min-height: 20px; color: var(--muted); font-size: 12px; }
.helper.error { color: #e34c5a; }
.password-policy { color: #6d879f; font-size: 12px; line-height: 1.45; }
.email-verification-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.email-verification-row label { min-width: 0; }
.email-code-button { min-width: 104px; min-height: 40px; white-space: nowrap; }

.language-picker { display: inline-flex; min-height: 34px; align-items: center; gap: 4px; border: 1px solid #dce7f0; border-radius: 8px; background: #fff; color: #476987; padding: 0 7px; box-shadow: 0 3px 9px rgba(20, 63, 101, .035); }
.language-picker-icon { color: #4a8bcb; font-size: 13px; line-height: 1; }
.language-picker select { width: auto; min-width: 74px; min-height: 30px; border: 0; border-radius: 0; background: transparent; color: #476987; padding: 3px 17px 3px 1px; font-size: 11px; font-weight: 760; box-shadow: none; }
.language-picker select:focus { box-shadow: none; }
.auth-language-float .language-picker { flex: 0 0 auto; box-shadow: 0 9px 22px rgba(20, 63, 101, .12); }

.action-dialog { width: min(488px, calc(100vw - 32px)); max-height: min(690px, calc(100dvh - 32px)); overflow: auto; border: 1px solid #dce8f2; border-radius: 17px; background: #fff; color: var(--text); padding: 0; box-shadow: 0 26px 72px rgba(4, 31, 57, .28); }
.action-dialog::backdrop { background: rgba(5, 25, 46, .56); backdrop-filter: blur(3px); }
.action-dialog__body { position: relative; padding: 24px 25px 21px; }
.action-dialog__close { position: absolute; right: 13px; top: 13px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #8fa3b6; font-size: 22px; line-height: 1; }
.action-dialog__close:hover { background: #f2f7fb; color: #496b87; }
.action-dialog__heading { display: flex; align-items: flex-start; gap: 12px; padding-right: 34px; }
.action-dialog__icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; background: #eaf4ff; color: #197ce3; font-size: 19px; font-weight: 850; }
.action-dialog--danger .action-dialog__icon { background: #fff0f2; color: #e9535f; }
.action-dialog--warning .action-dialog__icon { background: #fff4e6; color: #db8420; }
.action-dialog--success .action-dialog__icon { background: #eaf9f1; color: #1a9e64; }
.action-dialog__eyebrow { display: block; margin: 1px 0 4px; color: #4d8dcb; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.action-dialog--danger .action-dialog__eyebrow { color: #e9535f; }
.action-dialog--warning .action-dialog__eyebrow { color: #cf7a19; }
.action-dialog--success .action-dialog__eyebrow { color: #188f5c; }
.action-dialog h2 { margin: 0; color: #17324e; font-size: 19px; letter-spacing: -.025em; }
.action-dialog__description { margin: 18px 0 14px; color: #667f97; font-size: 13px; line-height: 1.68; }
.action-dialog__target { display: grid; gap: 4px; margin: 0 0 16px; border: 1px solid #ddeaf4; border-radius: 10px; background: #f7fbff; padding: 11px 12px; }
.action-dialog--danger .action-dialog__target { border-color: #f3d8dc; background: #fff8f8; }
.action-dialog__target span { color: #728ba2; font-size: 10px; font-weight: 760; }
.action-dialog__target strong { overflow-wrap: anywhere; color: #284b69; font-size: 13px; }
.action-dialog--danger .action-dialog__target strong { color: #8e3945; }
.action-dialog__input-label { display: grid; gap: 7px; color: #5f7791; font-size: 12px; font-weight: 720; }
.action-dialog__input-label input { border-color: #e5c7cc; }
.action-dialog__match { min-height: 17px; color: #9c7980; font-size: 11px; font-weight: 600; }
.action-dialog__match.matched { color: #1b9963; }
.action-dialog__footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; border-top: 1px solid #edf2f7; padding-top: 16px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0, 1fr); background: var(--bg); }
.sidebar { position: sticky; top: 0; z-index: 20; display: flex; height: 100vh; flex-direction: column; overflow-y: auto; padding: 19px 10px 12px; border-right: 1px solid rgba(114, 169, 219, .18); background: linear-gradient(180deg, #082849 0%, #06213f 57%, #051b35 100%); }
.sidebar .brand { min-height: 53px; padding: 0 9px 16px; }
.sidebar .brand-full-logo { width: 166px; }
.company-switch { margin: 10px 0 16px; padding: 12px; border: 1px solid rgba(150, 204, 255, .17); border-radius: 11px; background: rgba(106, 179, 239, .09); }
.company-switch label { gap: 5px; color: #9ab9d9; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.company-switch strong { overflow: hidden; color: #f3f9ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.company-switch select { min-height: 31px; padding: 5px 6px; border: 0; background: transparent; color: #f3f9ff; font-size: 12px; font-weight: 700; }
.company-switch select:focus { box-shadow: none; }
.sidebar-section-label { margin: 1px 9px 7px; color: #7192b5; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.nav { display: grid; gap: 4px; }
.nav button { width: 100%; display: flex; min-height: 39px; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #a9c0da; padding: 8px 10px; text-align: left; font-size: 13px; font-weight: 650; transition: .16s ease; }
.nav button:hover { background: rgba(129, 197, 255, .09); color: #f5fbff; }
.nav button.active { border-color: rgba(68, 185, 255, .35); background: linear-gradient(90deg, rgba(20, 130, 220, .42), rgba(25, 134, 211, .16)); color: #fff; box-shadow: inset 3px 0 0 #4ec8ff; }
.nav-icon { display: grid; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; border-radius: 6px; color: #7cc9fb; font-size: 15px; font-weight: 700; }
.nav button.active .nav-icon { color: #fff; }
.sidebar-footer { display: grid; gap: 10px; margin-top: auto; padding: 15px 5px 0; border-top: 1px solid rgba(149, 197, 240, .13); }
.account-summary { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; color: #98b7d5; font-size: 10px; }
.account-summary strong { display: block; overflow: hidden; color: #e8f4ff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #3ec5f9, #2475e8); color: #fff; font-size: 10px; font-weight: 800; }
.sidebar .button.danger { border-color: rgba(255, 174, 184, .25); background: rgba(234, 88, 100, .18); color: #ffd6da; }
.sidebar .button.danger:hover { background: rgba(234, 88, 100, .29); }

.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 26px; border-bottom: 1px solid #e4edf5; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 17px rgba(25, 66, 105, .035); backdrop-filter: blur(13px); }
.page-context { display: grid; gap: 2px; color: var(--muted); font-size: 11px; }
.page-context strong { color: #17324e; font-size: 14px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #4a90cc; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(32, 181, 120, .12); content: ""; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-control { display: grid; min-height: 34px; min-width: 82px; place-items: center; border: 1px solid #e1eaf2; border-radius: 8px; color: #536d87; background: #f9fbfd; padding: 0 10px; font-size: 10px; font-weight: 700; }
.top-control.date { font-variant-numeric: tabular-nums; }
.icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #e1eaf2; border-radius: 8px; background: #fff; color: #4a7399; font-size: 16px; }
.icon-button:hover { background: #f3f9fe; color: var(--blue); }
.profile-mini { display: flex; align-items: center; gap: 7px; padding-left: 2px; color: #63809e; font-size: 10px; font-weight: 700; }
.profile-mini .avatar { width: 30px; height: 30px; font-size: 9px; }
.content { width: min(1310px, 100%); margin: 0 auto; padding: 22px 26px 44px; }

.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.title-row h1 { margin: 0; color: #122d4a; font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -.035em; }
.title-row p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.grid { display: grid; gap: 14px; }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); padding: 17px; }
.metric-label { color: #6d879f; font-size: 11px; font-weight: 700; }
.metric { margin-top: 7px; color: #163450; font-size: 27px; font-weight: 780; letter-spacing: -.05em; }
.metric-note { margin-top: 5px; color: #9aabbb; font-size: 10px; }
.split { grid-template-columns: minmax(0, 1.45fr) minmax(295px, .72fr); }
.employee-records-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.table-actions .button { min-height: 30px; padding: 5px 9px; white-space: nowrap; }
.hourly-rate-form { display: flex; align-items: center; gap: 7px; }
.hourly-rate-form label { display: grid; gap: 4px; color: #71889e; font-size: 10px; font-weight: 700; }
.hourly-rate-form input { min-width: 94px; padding: 7px 8px; }
.hourly-rate-form .button { min-height: 31px; padding: 5px 9px; white-space: nowrap; }
.workforce-page-stack { display: grid; gap: 16px; }
.workforce-date-card { padding-top: 12px; padding-bottom: 12px; }
.workforce-date-card .section-heading { margin-bottom: 0; }
.workforce-date-card label { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 8px; color: #70879d; font-size: 11px; font-weight: 700; }
.workforce-date-card input { min-height: 34px; }
.workforce-rule-line { margin-top: 7px; color: #71889e; font-size: 11px; }
.operations-rule-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 15px; }
.operations-rule-summary span { display: grid; gap: 3px; min-width: 0; border: 1px solid #dfeaf3; border-radius: 9px; background: #f8fbfe; color: #617b92; padding: 9px 10px; font-size: 10px; line-height: 1.45; }
.operations-rule-summary b { color: #2b6f9f; font-size: 10px; }
.operations-rule-summary--attendance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.workforce-settings-form--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.attendance-import-form textarea { min-height: 108px; }
.attendance-import-summary { display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: center; margin-top: 14px; border-top: 1px solid #e8eff5; padding-top: 12px; color: #71889e; font-size: 10px; }
.attendance-import-summary strong { color: #365e7d; }
.review-values { display: block; max-width: 240px; margin-top: 4px; color: #8195a8; font-size: 9px; overflow-wrap: anywhere; }
.attendance-review-form select, .attendance-review-form input { min-width: 130px; }
.workforce-settings-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.workforce-settings-form label, .group-work-time-form label, .schedule-group-push-form label { display: grid; gap: 5px; color: #72899f; font-size: 10px; font-weight: 700; }
.workforce-settings-form .check-field { display: flex; align-items: center; gap: 7px; align-self: end; min-height: 35px; }
.workforce-settings-form .check-field input { min-height: auto; width: 15px; }
.workforce-settings-form .actions { align-items: end; }
.group-work-time-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.group-work-time-form, .schedule-group-push-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 9px; border: 1px solid #e4edf5; border-radius: 10px; background: #fbfdff; padding: 12px; }
.group-work-time-form strong, .schedule-group-push-form strong { grid-column: 1 / -1; color: #24425e; font-size: 12px; }
.group-work-time-form .button, .schedule-group-push-form .button { justify-self: start; }
.schedule-worker-summary { display: grid; gap: 6px; padding: 10px 0; color: #536f88; font-size: 13px; }
.schedule-worker-summary strong { color: #1f7652; font-size: 16px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.section-heading h2 { margin: 0; color: #183551; font-size: 15px; }
.section-heading span { color: #869caf; font-size: 11px; }
.empty { padding: 32px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { border-bottom: 1px solid #edf2f7; padding: 11px 9px; color: #4e6b86; text-align: left; white-space: nowrap; }
th { color: #8298ab; background: #f8fbfd; font-size: 10px; font-weight: 750; }
td { color: #3c5974; }
td:first-child { color: #1e3d59; font-weight: 650; }
tr:last-child td { border-bottom: 0; }
.badge { display: inline-flex; min-height: 23px; align-items: center; border-radius: 999px; background: #edf6ff; color: #3785c5; padding: 3px 8px; font-size: 10px; font-weight: 750; }
.badge.good { background: #eaf9f1; color: #19965f; }
.badge.warn { background: #fff4e7; color: #d77b18; }
.badge.bad { background: #fff0f2; color: #e9535f; }
.panel { display: grid; gap: 11px; }
.compact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.compact-form .wide { grid-column: 1 / -1; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.message { border: 1px solid #e6eef5; border-radius: 10px; background: #fbfdff; padding: 12px; }
.message strong { display: block; color: #23425f; font-size: 12px; }
.message p { margin: 6px 0; color: #71879f; font-size: 12px; line-height: 1.5; }
.message small { color: #9aabba; font-size: 10px; }
.notice { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(400px, calc(100vw - 40px)); border: 1px solid #bfe3fa; border-radius: 10px; background: #eef9ff; box-shadow: 0 14px 36px rgba(19, 64, 103, .16); color: #276b9d; padding: 12px 14px; font-size: 12px; }
.notice.error { border-color: #ffd3d7; background: #fff1f3; color: #cc4551; }
.loading { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.loading .brand-on-light { transform: scale(1.08); }

/* Enterprise operations overview */
.overview-hero, .platform-hero { position: relative; overflow: hidden; min-height: 169px; border-radius: 15px; background: linear-gradient(110deg, #123f78 0%, #1268ae 61%, #1889cc 100%); box-shadow: 0 13px 28px rgba(18, 79, 139, .16); color: #fff; padding: 28px 25px 18px; }
.overview-hero::after, .platform-hero::after { position: absolute; width: 265px; height: 265px; border: 34px solid rgba(94, 197, 250, .12); border-radius: 50%; right: 57px; top: -131px; box-shadow: 0 0 0 34px rgba(94, 197, 250, .06); content: ""; }
.hero-main { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 22px; }
.hero-kicker { display: block; color: #8bd6ff; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.overview-hero h1, .platform-hero h1 { margin: 9px 0 5px; color: #fff; font-size: 23px; letter-spacing: -.03em; }
.overview-hero p, .platform-hero p { max-width: 580px; margin: 0; color: #c5e4fb; font-size: 12px; }
.hero-actions { display: flex; align-items: flex-start; gap: 8px; }
.sync-status { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(166, 224, 255, .22); border-radius: 7px; background: rgba(8, 75, 142, .32); color: #d8f2ff; padding: 8px 10px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.sync-status::before { width: 6px; height: 6px; border-radius: 50%; background: #4be79e; box-shadow: 0 0 0 3px rgba(75, 231, 158, .14); content: ""; }
.hero-actions .button { background: #fff; color: #1674cb; box-shadow: none; }
.hero-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 21px; border-top: 1px solid rgba(206, 236, 255, .16); padding-top: 13px; }
.hero-stats div { min-width: 0; border-right: 1px solid rgba(206, 236, 255, .16); padding: 0 15px; }
.hero-stats div:first-child { padding-left: 0; }
.hero-stats div:last-child { border: 0; }
.hero-stats span { display: block; color: #9dcbed; font-size: 9px; }
.hero-stats b { display: block; overflow: hidden; margin-top: 4px; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.overview-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.overview-metric { display: grid; min-height: 96px; grid-template-columns: 30px minmax(0, 1fr); align-content: start; gap: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); padding: 14px 12px; }
.metric-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: #eaf4ff; color: #1677e8; font-size: 12px; font-weight: 800; }
.metric-icon.orange { background: #fff3e3; color: #ef8b1b; }
.metric-icon.green { background: #e8f8ef; color: #1fa96e; }
.metric-icon.purple { background: #f0eeff; color: #7569e8; }
.metric-icon.red { background: #fff0f1; color: #ed5965; }
.overview-metric span { align-self: center; color: #6e88a1; font-size: 10px; font-weight: 700; }
.overview-metric b { grid-column: 1 / -1; margin-top: 7px; color: #163450; font-size: 25px; letter-spacing: -.05em; }
.overview-metric small { grid-column: 1 / -1; margin-top: 3px; color: #94a7b8; font-size: 10px; }
.flow-card { margin-top: 14px; padding: 18px 14px 15px; }
.flow-title { margin: 0 0 2px; color: #1b3a57; font-size: 16px; }
.flow-subtitle { margin: 0 0 12px; color: #8ba0b3; font-size: 10px; }
.flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.flow-step { position: relative; min-height: 68px; border: 1px solid #e7eef5; border-radius: 9px; background: #fbfdff; padding: 12px 33px 10px 43px; }
.flow-step:not(:last-child)::after { position: absolute; right: 13px; top: 50%; color: #65a7dc; content: "→"; transform: translateY(-50%); }
.flow-number { position: absolute; left: 11px; top: 20px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: #eaf4ff; color: #237ede; font-size: 9px; font-weight: 800; }
.flow-step span { display: block; color: #8da1b4; font-size: 9px; }
.flow-step b { display: block; margin-top: 3px; color: #23415d; font-size: 12px; }
.flow-step small { display: block; overflow: hidden; margin-top: 3px; color: #a0afbd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.overview-lower { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .72fr); gap: 14px; margin-top: 14px; }
.data-card { padding: 17px 14px; }
.data-card .section-heading { margin-bottom: 11px; }
.ring-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.ring-panel { display: grid; min-height: 180px; align-items: center; grid-template-columns: 1fr minmax(112px, .9fr); gap: 8px; padding: 5px 13px; }
.ring-panel + .ring-panel { border-left: 1px solid #edf2f6; }
.ring { --progress: 0; --ring-color: var(--good); position: relative; display: grid; width: 128px; height: 128px; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring-color) calc(var(--progress) * 1%), #e8eff5 0); }
.ring::before { position: absolute; width: 92px; height: 92px; border-radius: 50%; background: #fff; content: ""; }
.ring-content { position: relative; z-index: 1; text-align: center; }
.ring-content span { display: block; color: #879cad; font-size: 9px; }
.ring-content b { display: block; margin-top: 2px; color: #183653; font-size: 22px; letter-spacing: -.04em; }
.ring-content small { display: block; color: #94a7b8; font-size: 9px; }
.legend { display: grid; gap: 7px; align-content: center; }
.legend-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: #6f869e; font-size: 10px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.legend-dot.orange { background: var(--warn); }
.legend-dot.red { background: var(--bad); }
.legend-row b { color: #36556f; font-size: 10px; }
.risk-list { display: grid; gap: 8px; }
.risk-item { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #e9eff5; border-radius: 9px; background: #fcfdff; padding: 9px; }
.risk-item .metric-icon { width: 25px; height: 25px; border-radius: 7px; font-size: 10px; }
.risk-item strong { display: block; color: #385570; font-size: 11px; }
.risk-item small { display: block; overflow: hidden; margin-top: 2px; color: #9babb9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.risk-count { display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 999px; background: #edf4fb; color: #5c7893; font-size: 10px; font-weight: 800; }
.group-table-card { margin-top: 14px; padding: 15px 0 0; overflow: hidden; }
.group-table-card .section-heading { padding: 0 15px; }
.group-table-card th, .group-table-card td { padding-left: 15px; padding-right: 15px; }
.group-table-card .badge { min-width: 25px; justify-content: center; }

/* Platform-only overview: platform data never becomes an enterprise workspace. */
.platform-hero { background: linear-gradient(110deg, #0b315d 0%, #115a9f 61%, #1785c6 100%); }
.platform-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.platform-metrics .overview-metric { min-height: 88px; }
.platform-notice { display: flex; align-items: center; gap: 9px; margin-top: 14px; border: 1px solid #d7eafb; border-radius: 10px; background: #eff8ff; color: #5c7893; padding: 12px 14px; font-size: 11px; }
.platform-notice b { color: #2a7fc5; }

/* Enterprise plans and payment.  No browser-side plan or price changes are
   trusted: these cards only create a server-priced payment order. */
.billing-panel { margin-top: 16px; }
.billing-panel--compact { margin: 18px 0; box-shadow: none; }
.billing-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 15px; }
.billing-summary article { min-width: 0; border: 1px solid #e7eef5; border-radius: 10px; background: #fbfdff; padding: 11px; }
.billing-summary span { display: block; color: #869caf; font-size: 10px; }
.billing-summary b { display: block; overflow: hidden; margin-top: 5px; color: #1e3e5b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.billing-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.billing-plan { min-width: 0; border: 1px solid #dfebf4; border-radius: 12px; background: linear-gradient(180deg, #fff 0%, #f9fcff 100%); padding: 14px; }
.billing-plan.current { border-color: #95c9ef; box-shadow: inset 0 0 0 1px rgba(48, 142, 213, .08); }
.billing-plan__head { display: flex; min-height: 28px; align-items: flex-start; justify-content: space-between; gap: 10px; }
.billing-plan__head h3 { margin: 0; color: #1c3a57; font-size: 14px; }
.billing-plan__head > div span { display: block; margin-top: 3px; color: #8da1b3; font-size: 10px; }
.billing-price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 11px; border-top: 1px solid #eef3f7; padding-top: 9px; }
.billing-price span { color: #8097aa; font-size: 11px; }
.billing-price b { color: #1d5d9b; font-size: 14px; }
.billing-plan-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; margin-top: 13px; }
.billing-plan-form label { display: grid; gap: 5px; color: #6f879f; font-size: 10px; font-weight: 700; }
.billing-plan-form select { min-height: 35px; padding: 6px 8px; }
.billing-plan-form .button { min-height: 35px; white-space: nowrap; }
.billing-plan > .button { width: 100%; min-height: 35px; margin-top: 13px; }
.billing-readonly { display: block; margin-top: 13px; color: #8297a9; font-size: 11px; font-weight: 700; }
.billing-order-card { margin-top: 14px; border: 1px solid #d5e9f8; border-radius: 11px; background: #f5fbff; padding: 14px; }
.billing-order-card .section-heading { margin-bottom: 11px; }
.billing-order-card h3, .billing-history h3 { margin: 0; color: #23435f; font-size: 13px; }
.billing-order-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.billing-order-grid span { display: grid; gap: 3px; min-width: 0; color: #7892a9; font-size: 10px; }
.billing-order-grid strong { overflow: hidden; color: #28516f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.billing-instructions { margin: 12px 0; border-left: 3px solid #4ba7e4; background: #fff; color: #506f89; padding: 10px 11px; font-size: 12px; line-height: 1.55; }
.billing-order-note { margin-top: 12px; color: #d27b1e; font-size: 12px; font-weight: 700; }
.billing-order-card .compact-form { margin-top: 12px; }
.billing-history { margin-top: 15px; }
.billing-history .section-heading { margin-bottom: 8px; }
.billing-admin-card { overflow: hidden; }
.billing-config-form { display: grid; gap: 14px; }
.billing-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.billing-config-plan { border: 1px solid #e2ebf3; border-radius: 11px; background: #fbfdff; padding: 13px; }
.billing-enabled { display: inline-flex; align-items: center; gap: 6px; color: #617b95; font-size: 11px; font-weight: 700; white-space: nowrap; }
.billing-enabled input { width: 14px; min-height: 14px; }
.billing-config-plan .compact-form { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 11px; }
.billing-payment-settings { border-top: 1px solid #e9eff5; padding-top: 14px; }
.billing-payment-settings textarea { min-height: 76px; resize: vertical; }

/* Worker portal: deliberately independent from the enterprise administration shell. */
.worker-portal { min-height: 100vh; background: linear-gradient(145deg, #eef6fc 0%, #f8fbfe 45%, #edf5fc 100%); color: #183551; }
.worker-floating-controls { position: fixed; z-index: 30; top: 18px; right: 22px; left: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.worker-floating-controls > *, .worker-top-actions > * { pointer-events: auto; }
.worker-menu-toggle { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border: 1px solid rgba(210,226,239,.95); border-radius: 11px; background: rgba(255,255,255,.94); color: #3475aa; font-size: 18px; box-shadow: 0 10px 24px rgba(24,62,94,.12); backdrop-filter: blur(14px); }
.worker-menu-toggle:hover, .worker-avatar-button:hover { border-color: #b8dcf5; background: #f3faff; }
.worker-top-actions { display: flex; align-items: center; gap: 9px; }
.worker-top-actions .language-picker { background: rgba(255,255,255,.94); box-shadow: 0 10px 24px rgba(24,62,94,.12); backdrop-filter: blur(14px); }
.worker-avatar-button, .worker-avatar-large, .worker-avatar-small { display: grid; overflow: hidden; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(135deg, #32c0ef, #276de3); color: #fff; font-size: 12px; font-weight: 800; }
.worker-avatar-button { width: 39px; height: 39px; padding: 0; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(24,62,94,.16); }
.worker-avatar-button img, .worker-avatar-large img, .worker-avatar-small img { width: 100%; height: 100%; object-fit: cover; }
.worker-backdrop { position: fixed; z-index: 35; inset: 0; visibility: hidden; background: rgba(5,27,48,.26); opacity: 0; transition: opacity .18s ease, visibility .18s ease; }
.worker-backdrop.is-visible { visibility: visible; opacity: 1; }
.worker-drawer { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; display: flex; width: min(282px, calc(100vw - 42px)); flex-direction: column; gap: 22px; border-right: 1px solid rgba(157,205,246,.14); background: linear-gradient(180deg, #082849 0%, #06213f 58%, #051b35 100%); padding: 24px 14px; box-shadow: 18px 0 36px rgba(4,29,54,.18); transform: translateX(-104%); transition: transform .2s ease; }
.worker-drawer.is-open { transform: translateX(0); }
.worker-drawer .brand { padding: 0 9px; }
.worker-drawer .brand-full-logo { width: 166px; }
.worker-drawer nav { display: grid; gap: 5px; }
.worker-drawer nav button { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #b3cce4; padding: 9px 11px; text-align: left; font-size: 13px; font-weight: 700; }
.worker-drawer nav button:hover, .worker-drawer nav button.active { border-color: rgba(68,185,255,.34); background: linear-gradient(90deg, rgba(20,130,220,.43), rgba(25,134,211,.15)); color: #fff; }
.worker-drawer nav b { display: grid; min-width: 19px; height: 19px; place-items: center; border-radius: 99px; background: #ed5b66; color: #fff; padding: 0 5px; font-size: 9px; }
.worker-profile-backdrop { position: fixed; z-index: 29; inset: 0; visibility: hidden; border: 0; background: transparent; opacity: 0; pointer-events: none; }
.worker-profile-backdrop.is-visible { visibility: visible; opacity: 1; pointer-events: auto; }
.worker-profile-menu { position: fixed; z-index: 41; top: 66px; right: 22px; display: grid; width: 218px; gap: 3px; visibility: hidden; border: 1px solid #dce9f3; border-radius: 12px; background: #fff; box-shadow: 0 16px 34px rgba(23,63,96,.17); opacity: 0; padding: 9px; transform: translateY(-7px); transition: .18s ease; }
.worker-profile-menu.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
.worker-profile-menu button { width: 100%; border: 0; border-radius: 8px; background: transparent; color: #3f617d; padding: 9px; text-align: left; font-size: 12px; font-weight: 700; }
.worker-profile-menu button:hover { background: #f1f8fe; color: #1677d4; }
.worker-profile-menu button.is-danger { color: #c94856; }
.worker-profile-menu button.is-danger:hover { background: #fff1f3; color: #b82f40; }
.worker-profile-menu__identity { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #edf2f7; margin-bottom: 5px; padding: 4px 3px 11px; }
.worker-profile-menu__identity span { display: grid; min-width: 0; gap: 2px; }
.worker-profile-menu__identity strong { overflow: hidden; color: #1f405d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.worker-profile-menu__identity em { color: #8da0b2; font-size: 10px; font-style: normal; }
.worker-avatar-small { width: 31px; height: 31px; flex: 0 0 31px; font-size: 10px; }
.worker-content { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 88px 0 58px; }
.worker-content-brand { display: flex; justify-content: center; margin: 0 auto 28px; }
.worker-content-brand .brand { min-height: 44px; }
.worker-content-brand .brand-full-logo { width: 190px; }
.worker-card-main { display: grid; gap: 15px; border: 1px solid #deebf5; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 18px 38px rgba(29,79,120,.08); padding: 24px; }
.worker-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid #e6eef5; border-radius: 12px; background: #fbfdff; }
.worker-identity-grid div { min-width: 0; border-bottom: 1px solid #e8eff5; padding: 13px 14px; }
.worker-identity-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.worker-identity-grid div:nth-child(odd) { border-right: 1px solid #e8eff5; }
.worker-identity-grid span, .worker-deadline span, .worker-leave-summary span, .worker-assignment > span, .worker-account-line span { display: block; color: #8197aa; font-size: 10px; font-weight: 700; }
.worker-identity-grid strong { display: block; overflow: hidden; margin-top: 5px; color: #23445f; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.worker-status-card { display: grid; min-height: 87px; align-content: center; justify-items: center; border: 1px solid #cde7fa; border-radius: 14px; background: linear-gradient(135deg, #f4fbff, #e7f5ff); color: #2478ba; padding: 15px; text-align: center; }
.worker-status-card span { color: #7f9db5; font-size: 11px; }
.worker-status-card strong { margin-top: 6px; font-size: 20px; letter-spacing: -.025em; }
.worker-status-card.ready { border-color: #c4ecdc; background: linear-gradient(135deg, #f0fcf7, #e4f8ef); color: #198f62; }
.worker-status-card.waiting { border-color: #d7d4fb; background: linear-gradient(135deg, #f7f6ff, #efedff); color: #655bd0; }
.worker-status-card.leave, .worker-status-card.rest { border-color: #f4dfbd; background: linear-gradient(135deg, #fffaf0, #fff1df); color: #c77b20; }
.worker-status-card.work { border-color: #bde7d1; background: linear-gradient(135deg, #effbf5, #ddf6ea); color: #187e56; }
.worker-status-card.closed { border-color: #e2e9ef; background: #f7fafc; color: #71899e; }
.worker-assignment { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; border: 1px solid #e5edf4; border-radius: 12px; background: #fcfdff; padding: 13px 14px; }
.worker-assignment strong { justify-self: end; color: #167a52; font-size: 13px; }
.worker-assignment.is-rest strong { color: #bf791f; }
.worker-assignment small { grid-column: 1 / -1; margin-top: 5px; color: #8196aa; font-size: 11px; }
.worker-deadline, .worker-leave-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-top: 1px solid #edf2f7; padding-top: 14px; }
.worker-deadline strong, .worker-leave-summary strong { color: #345773; font-size: 12px; }
.worker-deadline small { color: #8da1b3; font-size: 10px; }
.worker-leave-summary { grid-template-columns: auto 1fr; }
.worker-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.worker-action-grid .button, .worker-wide-button { width: 100%; min-height: 42px; justify-content: center; }
.worker-leave-form { display: grid; gap: 10px; border: 1px solid #f0dfc6; border-radius: 12px; background: #fffaf3; padding: 14px; }
.worker-leave-form label { display: grid; gap: 6px; color: #88672d; font-size: 11px; font-weight: 700; }
.worker-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf2f7; padding-bottom: 14px; }
.worker-section-heading h1 { margin: 0; color: #193b58; font-size: 19px; letter-spacing: -.03em; }
.worker-message-list { display: grid; gap: 8px; }
.worker-message-item { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 10px; width: 100%; border: 1px solid #e6eef5; border-radius: 11px; background: #fff; color: inherit; padding: 12px; text-align: left; }
.worker-message-item:hover { border-color: #bfdff5; background: #f9fcff; }
.worker-message-item > span:last-child { display: grid; gap: 4px; min-width: 0; }
.worker-message-item small { color: #90a3b4; font-size: 10px; }
.worker-message-item strong { color: #264761; font-size: 12px; }
.worker-message-item em { overflow: hidden; color: #6e879e; font-size: 11px; font-style: normal; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.worker-message-dot { display: block; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: transparent; }
.worker-message-item.is-unread { border-color: #cce6f8; background: #f5fbff; }
.worker-message-item.is-unread .worker-message-dot { background: #249ee1; box-shadow: 0 0 0 3px rgba(36,158,225,.1); }
.worker-avatar-editor { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #edf2f7; padding-bottom: 14px; }
.worker-avatar-editor label { flex: 1; }
.worker-avatar-large { width: 56px; height: 56px; flex: 0 0 56px; font-size: 18px; }
.worker-profile-card input:disabled { background: #f6f9fb; color: #8195a8; }
.worker-account-card { max-width: 520px; margin: 0 auto; }
.worker-account-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf2f7; padding: 12px 0; }
.worker-account-line strong { overflow: hidden; color: #345773; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.enterprise-profile-form { margin-top: 17px; border-top: 1px solid #edf2f7; padding-top: 17px; }

@media (max-width: 1120px) {
  .overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards, .platform-metrics, .billing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-lower { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; max-height: none; padding: 12px; border-right: 0; }
  .sidebar .brand { min-height: 42px; padding: 0 4px 9px; }
  .sidebar .brand-full-logo { width: 146px; }
  .company-switch, .sidebar-footer { display: none; }
  .nav { display: flex; overflow-x: auto; padding-bottom: 2px; }
  .nav button { width: auto; min-height: 35px; flex: 0 0 auto; padding: 7px 10px; }
  .topbar { min-height: 58px; padding: 0 15px; }
  .top-control, .profile-mini span { display: none; }
  .mobile-logout { display: inline-flex; align-items: center; justify-content: center; }
  .language-picker { min-height: 32px; }
  .language-picker select { min-width: 67px; min-height: 28px; font-size: 10px; }
  .content { padding: 17px 15px 34px; }
  .hero-main { display: block; }
  .hero-actions { margin-top: 15px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 0; }
  .hero-stats div:nth-child(2) { border-right: 0; }
  .hero-stats div:nth-child(3) { padding-left: 0; }
  .overview-hero::after, .platform-hero::after { right: -110px; }
  .split { grid-template-columns: 1fr; }
  .workforce-settings-form, .workforce-settings-form--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-rule-summary, .operations-rule-summary--attendance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-work-time-grid { grid-template-columns: 1fr; }
  .billing-plan-grid, .billing-config-grid { grid-template-columns: 1fr; }
  .billing-config-plan .compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ring-panel { grid-template-columns: 128px minmax(100px, 1fr); }
}
@media (max-width: 590px) {
  .auth-shell { padding: 16px; }
  .auth-card { padding: 25px 21px; }
  .auth-card-logo { margin-bottom: 24px; }
  .auth-brand { width: min(148px, 100%); }
  .auth-language-float { top: 14px; right: 14px; }
  .portal-choice-grid { grid-template-columns: 1fr; }
  .portal-choice { min-height: 96px; grid-auto-flow: column; grid-template-columns: auto auto; justify-content: center; }
  .email-verification-row { grid-template-columns: 1fr; }
  .email-code-button { width: 100%; }
  .invite-link { grid-template-columns: 1fr; }
  .overview-metrics, .cards, .platform-metrics, .billing-summary { grid-template-columns: 1fr; }
  .title-row { display: block; }
  .title-row .button { margin-top: 12px; }
  .compact-form { grid-template-columns: 1fr; }
  .hourly-rate-form, .workforce-settings-form, .workforce-settings-form--compact, .group-work-time-form, .schedule-group-push-form { grid-template-columns: 1fr; }
  .operations-rule-summary, .operations-rule-summary--attendance { grid-template-columns: 1fr; }
  .hourly-rate-form { align-items: stretch; flex-direction: column; }
  .group-work-time-form strong, .schedule-group-push-form strong { grid-column: auto; }
  .workforce-date-card .section-heading { align-items: flex-start; flex-direction: column; }
  .billing-plan-form, .billing-order-grid, .billing-config-plan .compact-form { grid-template-columns: 1fr; }
  .billing-plan-form .button { width: 100%; }
  .overview-hero, .platform-hero { padding: 22px 17px 16px; }
  .overview-hero h1, .platform-hero h1 { font-size: 20px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-stats { margin-top: 15px; }
  .flow-grid { grid-template-columns: 1fr; }
  .flow-step:not(:last-child)::after { right: 14px; content: "↓"; }
  .ring-grid { grid-template-columns: 1fr; }
  .ring-panel + .ring-panel { border-top: 1px solid #edf2f6; border-left: 0; }
  .ring-panel { grid-template-columns: 128px minmax(100px, 1fr); }
  .topbar { gap: 8px; }
  .app-shell .topbar .icon-button, .app-shell .topbar .profile-mini { display: none; }
  .page-context strong { max-width: 126px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-logout { min-height: 32px; padding: 5px 8px; font-size: 10px; }
  .action-dialog { width: calc(100vw - 24px); border-radius: 15px; }
  .action-dialog__body { padding: 21px 18px 18px; }
  .action-dialog__footer { flex-direction: column-reverse; }
  .action-dialog__footer .button { width: 100%; min-height: 42px; }
  .worker-floating-controls { top: 12px; right: 12px; left: 12px; }
  .worker-avatar-button, .worker-menu-toggle { width: 35px; height: 35px; flex-basis: 35px; }
  .worker-content { width: min(100% - 24px, 720px); padding: 76px 0 36px; }
  .worker-content-brand { margin-bottom: 21px; }
  .worker-content-brand .brand-full-logo { width: 166px; }
  .worker-card-main { border-radius: 15px; padding: 17px; }
  .worker-profile-menu { top: 55px; right: 12px; }
  .worker-identity-grid div { padding: 11px; }
  .worker-identity-grid strong { font-size: 12px; }
  .worker-status-card { min-height: 78px; }
  .worker-status-card strong { font-size: 18px; }
}

@media (max-width: 370px) {
  .auth-brand { width: 136px; max-width: 100%; }
}

/* Dashboard data entrances: every operational number can drill into its source data. */
.dashboard-link,
.table-drill-link,
.section-count-link,
[data-dashboard-view] { cursor: pointer; }
.dashboard-link { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.dashboard-link:hover { transform: translateY(-2px); border-color: #9bc9ee; box-shadow: 0 12px 26px rgba(25, 92, 151, .13); }
.dashboard-link:focus-visible,
.table-drill-link:focus-visible,
.section-count-link:focus-visible,
[data-dashboard-view]:focus-visible { outline: 3px solid rgba(30, 137, 220, .25); outline-offset: 3px; }
.dashboard-link-hint { grid-column: 1 / -1; align-self: end; margin-top: 7px; color: #4f96d0; font-size: 9px; font-style: normal; font-weight: 700; opacity: .78; }
.trial-data-link { width: 100%; }
.trial-data-link:hover { background: #f4faff; }
.sync-status-link:hover { background: rgba(255, 255, 255, .12); box-shadow: none; transform: none; }
.overview-metric.dashboard-link:hover { background: #fbfdff; }
.hero-stat-link { margin: -7px 6px -7px -6px; border-radius: 9px; padding: 7px 6px; }
.hero-stat-link:hover { background: rgba(255, 255, 255, .10); box-shadow: none; }
.hero-stat-link:first-child { margin-left: -6px; }
.flow-step.dashboard-link:hover,
.risk-item.dashboard-link:hover { background: #f7fbff; }
.ring.dashboard-link:hover { transform: none; box-shadow: none; }
.legend-link { border-radius: 7px; margin: -3px -6px; padding: 3px 6px; }
.legend-link:hover { background: #f2f8fd; box-shadow: none; transform: translateX(2px); }
.section-count-link { border: 0; border-radius: 999px; background: #edf4fb; color: #5c7893; padding: 5px 9px; font: inherit; font-size: 10px; font-weight: 800; }
.section-count-link:hover { background: #dfeffc; color: #2578ba; }
.table-drill-link { display: inline-flex; align-items: center; min-height: 28px; border: 0; border-radius: 7px; background: transparent; color: #255b89; padding: 4px 6px; font: inherit; font-weight: 700; text-align: left; }
.table-drill-link:hover { background: #edf7ff; color: #1375bf; }
.table-drill-link.badge { min-width: 28px; justify-content: center; color: #19965f; }
.dashboard-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; border: 1px solid #cfe5f6; border-radius: 12px; background: linear-gradient(90deg, #f0f8ff 0%, #f8fcff 100%); padding: 12px 14px; }
.dashboard-filter-bar > div:first-child { display: grid; gap: 3px; min-width: 0; }
.dashboard-filter-bar span { color: #6d91ad; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.dashboard-filter-bar strong { overflow: hidden; color: #24587f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-filter-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.exception-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.exception-summary-grid .overview-metric { min-height: 94px; }

@media (max-width: 760px) {
  .dashboard-filter-bar { align-items: stretch; flex-direction: column; }
  .dashboard-filter-actions { justify-content: stretch; }
  .dashboard-filter-actions .button { flex: 1 1 auto; }
  .exception-summary-grid { grid-template-columns: 1fr; }
  .hero-stat-link { margin-right: 2px; }
}

/* Keep non-matching schedule rows in the form so a filtered save preserves every employee. */
.schedule-row-filtered-out[hidden] { display: none !important; }
.schedule-filter-empty { margin-bottom: 10px; border: 1px dashed #d5e5f1; border-radius: 9px; background: #f9fcff; color: #7f96aa; padding: 12px 14px; font-size: 10px; text-align: center; }

/* Dashboard links that lead to billing, data health, and organization structure. */
.sync-status-link { appearance: none; font: inherit; }
.trial-notice-link { width: 100%; text-align: left; }
.trial-notice-link i { margin-left: auto; color: #2a7fc5; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.trial-notice-link:hover { background: #f7fbff; }
.organization-sections > * + * { margin-top: 16px; }
.organization-sections > #organization-billing-section .billing-panel { margin-top: 0; }


/* Granular enterprise permissions and per-site data isolation. */
.sidebar-scope { display: grid; gap: 3px; margin: -4px 0 14px; border: 1px solid rgba(137, 199, 251, .16); border-radius: 9px; background: rgba(65, 147, 216, .08); padding: 9px 12px; }
.sidebar-scope span { color: #7197ba; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.sidebar-scope strong { overflow: hidden; color: #dceefe; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.permission-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 16px; padding: 0; overflow: hidden; }
.permission-summary > div { display: grid; gap: 5px; min-height: 82px; align-content: center; border-right: 1px solid var(--line); padding: 16px 19px; }
.permission-summary > div:last-child { border-right: 0; }
.permission-summary span { color: var(--muted); font-size: 10px; font-weight: 750; }
.permission-summary strong { color: #244965; font-size: 14px; }
.permission-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); align-items: start; gap: 16px; }
.permission-member-list { position: sticky; top: 86px; display: grid; gap: 7px; max-height: calc(100vh - 115px); overflow: auto; padding: 13px; }
.permission-member-list .section-heading { margin-bottom: 4px; padding: 2px 3px 9px; }
.permission-member { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; border: 1px solid transparent; border-radius: 10px; background: #f7faff; color: #315573; padding: 10px; text-align: left; }
.permission-member:hover { border-color: #c9e1f4; background: #f0f8ff; }
.permission-member.active { border-color: #88c5ee; background: #eaf6ff; box-shadow: 0 5px 14px rgba(27, 107, 172, .08); }
.permission-member-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #2ca9e8, #1677e8); color: #fff; font-size: 11px; font-weight: 850; }
.permission-member > span:last-child { display: grid; min-width: 0; gap: 2px; }
.permission-member strong, .permission-member small, .permission-member em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permission-member strong { color: #264c69; font-size: 11px; }
.permission-member small { color: #6f899f; font-size: 9px; }
.permission-member em { color: #3882bb; font-size: 9px; font-style: normal; font-weight: 720; }
.permission-editor { display: grid; gap: 16px; min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: 19px; box-shadow: var(--shadow); }
.permission-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #edf3f8; padding-bottom: 15px; }
.permission-editor-head > div { display: grid; min-width: 0; gap: 4px; }
.permission-editor-head span:not(.badge) { color: #4e92ca; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.permission-editor-head h2 { overflow-wrap: anywhere; margin: 0; color: #183a57; font-size: 18px; }
.permission-editor-head p { overflow-wrap: anywhere; margin: 0; color: var(--muted); font-size: 10px; }
.permission-owner-protected { border: 1px solid #cae9dd; border-radius: 11px; background: #f0fbf6; padding: 16px; }
.permission-owner-protected strong { color: #19865a; font-size: 12px; }
.permission-owner-protected p { margin: 6px 0 0; color: #5e8c78; font-size: 10px; line-height: 1.6; }
.permission-template-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; border: 1px solid #dcecf8; border-radius: 11px; background: #f7fbff; padding: 10px; }
.permission-template-bar > span { margin-right: 4px; color: #5f7d96; font-size: 10px; font-weight: 800; }
.permission-template-bar .button { min-height: 31px; padding: 5px 9px; font-size: 10px; }
.permission-inline-warning, .permission-scope-note { border: 1px solid #f5dfb9; border-radius: 9px; background: #fffaf0; color: #9b6b22; padding: 10px 12px; font-size: 10px; line-height: 1.55; }
.permission-scope-note { margin-top: 12px; border-color: #d4e7f7; background: #f5faff; color: #527995; }
.permission-section { border: 1px solid #e4edf5; border-radius: 11px; background: #fbfdff; padding: 15px; }
.permission-section .section-heading { margin-bottom: 13px; }
.permission-section .section-heading h3 { margin: 0; color: #284d68; font-size: 13px; }
.permission-role-scope { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(280px, 1.25fr); align-items: end; gap: 14px; }
.permission-role-scope fieldset { display: flex; min-height: 63px; align-items: center; gap: 19px; margin: 0; border: 1px solid #dbe7f0; border-radius: 9px; background: #fff; padding: 9px 13px; }
.permission-role-scope legend { color: #6d8498; padding: 0 4px; font-size: 9px; font-weight: 750; }
.permission-role-scope fieldset label { display: flex; align-items: center; gap: 7px; color: #3c607d; font-size: 10px; }
.permission-role-scope input[type="radio"], .permission-site-option input, .permission-option input { width: 15px; height: 15px; flex: 0 0 15px; accent-color: var(--blue); }
.permission-site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.permission-site-option { display: flex; align-items: center; gap: 9px; border: 1px solid #dce8f2; border-radius: 9px; background: #fff; padding: 10px; }
.permission-site-option > span { display: grid; min-width: 0; gap: 2px; }
.permission-site-option strong { color: #335b78; font-size: 10px; }
.permission-site-option small { overflow: hidden; color: #7d93a6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.permission-option { position: relative; display: flex; min-width: 0; align-items: flex-start; gap: 10px; border: 1px solid #dfe9f2; border-radius: 10px; background: #fff; padding: 11px; transition: .15s ease; }
.permission-option:hover { border-color: #acd3ef; }
.permission-option.selected { border-color: #75bbea; background: #f0f9ff; box-shadow: 0 4px 12px rgba(31, 127, 199, .07); }
.permission-option.scope-disabled { border-style: dashed; background: #f5f7f9; opacity: .65; }
.permission-option > span { display: grid; min-width: 0; gap: 4px; }
.permission-option strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #315674; font-size: 10px; }
.permission-option strong em { border-radius: 999px; background: #eef1f5; color: #74899a; padding: 2px 6px; font-size: 8px; font-style: normal; }
.permission-option small { color: #758da1; font-size: 9px; line-height: 1.5; }
.permission-option code { overflow: hidden; color: #4386b8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.permission-save-bar { position: sticky; bottom: 13px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #cde4f5; border-radius: 11px; background: rgba(247, 252, 255, .96); padding: 11px 13px; box-shadow: 0 11px 27px rgba(15, 67, 108, .12); backdrop-filter: blur(8px); }
.permission-save-bar > div { display: grid; gap: 3px; }
.permission-save-bar strong { color: #2a5573; font-size: 11px; }
.permission-save-bar span { color: #748da1; font-size: 9px; }
.permission-unregistered { margin-top: 16px; }
.permission-unregistered > p { color: #7c93a5; font-size: 10px; }
.permission-unregistered-list { display: flex; flex-wrap: wrap; gap: 7px; }
.permission-unregistered-list span { border: 1px solid #dfebf4; border-radius: 8px; background: #f8fbfd; color: #678097; padding: 7px 9px; font-size: 9px; }
.permission-unregistered-list strong { margin-right: 5px; color: #2d5b7c; }
.is-hidden { display: none !important; }
.dashboard-link:not([data-dashboard-view]) { cursor: default; }
.dashboard-link:not([data-dashboard-view]):hover { transform: none; border-color: inherit; box-shadow: inherit; }

@media (max-width: 1120px) {
  .permission-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-summary > div:nth-child(2) { border-right: 0; }
  .permission-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .permission-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .sidebar-scope { display: none; }
  .permission-layout { grid-template-columns: 1fr; }
  .permission-member-list { position: static; display: flex; max-height: none; overflow-x: auto; }
  .permission-member-list .section-heading { display: none; }
  .permission-member { min-width: 220px; }
  .permission-role-scope { grid-template-columns: 1fr; }
}
@media (max-width: 590px) {
  .permission-summary { grid-template-columns: 1fr; }
  .permission-summary > div { min-height: 66px; border-right: 0; border-bottom: 1px solid var(--line); }
  .permission-summary > div:last-child { border-bottom: 0; }
  .permission-site-grid, .permission-grid { grid-template-columns: 1fr; }
  .permission-role-scope fieldset { align-items: flex-start; flex-direction: column; gap: 9px; }
  .permission-editor { padding: 14px; }
  .permission-editor-head, .permission-save-bar { align-items: stretch; flex-direction: column; }
  .permission-save-bar .button { width: 100%; }
}

/* v39 premium management system -------------------------------------------------
   Warehouses stay in Enterprise Settings, teams move to Employee Management,
   and the complete commercial workspace receives one polished visual system. */
:root {
  --navy: #071b31;
  --navy-2: #0b2f52;
  --blue: #0b7df0;
  --cyan: #19afe8;
  --surface: rgba(255, 255, 255, .96);
  --bg: #f3f7fb;
  --line: #dfe9f2;
  --text: #122d47;
  --muted: #71879c;
  --shadow: 0 18px 48px rgba(20, 55, 86, .075), 0 2px 8px rgba(20, 55, 86, .035);
  --shadow-hover: 0 24px 58px rgba(18, 74, 121, .14), 0 4px 12px rgba(18, 74, 121, .06);
  --premium-radius: 18px;
}

html { background: #f3f7fb; }
body {
  background:
    radial-gradient(900px 500px at 96% -6%, rgba(23, 142, 231, .10), transparent 62%),
    radial-gradient(700px 460px at 18% 0%, rgba(58, 198, 241, .055), transparent 64%),
    var(--bg);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { letter-spacing: 0; }
input, select, textarea {
  min-height: 42px;
  border-color: #d8e4ee;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
  color: #173650;
  padding: 10px 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:hover, select:hover, textarea:hover { border-color: #c2d7e7; }
input:focus, select:focus, textarea:focus {
  border-color: #3e9ee8;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(15, 126, 224, .10), 0 7px 18px rgba(15, 87, 147, .05);
}
label { color: #5e7891; font-size: 11px; font-weight: 760; }

.button {
  min-height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1499ed 0%, #0b76e7 100%);
  padding: 8px 15px;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .01em;
  box-shadow: 0 9px 22px rgba(11, 118, 231, .20);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 13px 27px rgba(11, 118, 231, .24); }
.button:active:not(:disabled) { transform: translateY(0); }
.button.secondary {
  border-color: #cfe0ed;
  background: linear-gradient(180deg, #fff 0%, #f8fbfe 100%);
  color: #1a6fb5;
  box-shadow: 0 5px 14px rgba(25, 85, 133, .055);
}
.button.secondary:hover:not(:disabled) { border-color: #9fcae9; background: #f2f9ff; box-shadow: 0 9px 20px rgba(25, 102, 161, .10); }
.button.danger { background: linear-gradient(135deg, #f06d78, #e84f5c); box-shadow: 0 8px 18px rgba(232, 79, 92, .16); }

.app-shell { grid-template-columns: 238px minmax(0, 1fr); background: transparent; }
.sidebar {
  padding: 22px 13px 14px;
  border-right: 1px solid rgba(143, 197, 239, .14);
  background:
    radial-gradient(430px 260px at 35% -5%, rgba(30, 159, 230, .19), transparent 66%),
    linear-gradient(180deg, #0a2a49 0%, #071e36 56%, #06182d 100%);
  box-shadow: 10px 0 38px rgba(5, 27, 51, .055);
}
.sidebar .brand { min-height: 62px; padding: 2px 10px 20px; }
.sidebar .brand-full-logo { width: 174px; }
.company-switch {
  margin: 7px 0 15px;
  border-color: rgba(145, 205, 249, .18);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(61, 164, 231, .13), rgba(63, 118, 185, .06));
  padding: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.sidebar-scope {
  margin-bottom: 17px;
  border-radius: 11px;
  background: rgba(77, 162, 224, .075);
  padding: 10px 12px;
}
.sidebar-section-label { margin: 2px 10px 9px; color: #6689aa; font-size: 8px; letter-spacing: .15em; }
.nav { gap: 5px; }
.nav button {
  min-height: 43px;
  gap: 11px;
  border-radius: 11px;
  color: #a9c2da;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 720;
}
.nav button:hover { background: rgba(102, 185, 241, .10); color: #fff; transform: translateX(2px); }
.nav button.active {
  border-color: rgba(89, 194, 255, .30);
  background: linear-gradient(100deg, rgba(14, 133, 224, .52), rgba(24, 112, 191, .18));
  box-shadow: inset 3px 0 0 #52c7ff, 0 10px 24px rgba(1, 18, 36, .14);
}
.nav-icon {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  border-radius: 7px;
  background: rgba(94, 180, 240, .075);
  color: #78c9f9;
  font-size: 14px;
}
.nav button.active .nav-icon { background: rgba(255,255,255,.12); }
.sidebar-footer { padding-top: 17px; }
.account-summary { grid-template-columns: 36px minmax(0,1fr); }
.account-summary .avatar { width: 36px; height: 36px; }

.topbar {
  min-height: 72px;
  padding: 0 30px;
  border-bottom: 1px solid rgba(215, 228, 239, .86);
  background: rgba(250, 252, 255, .86);
  box-shadow: 0 8px 30px rgba(23, 59, 92, .045);
  backdrop-filter: blur(18px) saturate(1.25);
}
.page-context { gap: 3px; }
.page-context strong { color: #173650; font-size: 15px; letter-spacing: -.015em; }
.eyebrow { color: #4389c1; font-size: 9px; letter-spacing: .10em; }
.top-control, .language-picker, .icon-button {
  min-height: 36px;
  border-color: #dce7ef;
  border-radius: 10px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 5px 15px rgba(24, 67, 103, .035);
}
.profile-mini { border-left: 1px solid #e3ebf2; margin-left: 2px; padding-left: 10px; }
.content { width: min(1420px, 100%); padding: 29px 31px 56px; }

.premium-title-row {
  position: relative;
  align-items: center;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(216, 229, 239, .85);
  padding: 2px 1px 19px;
}
.title-copy { display: grid; gap: 3px; min-width: 0; }
.title-kicker, .section-kicker {
  color: #2683c6;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.2;
}
.premium-title-row h1 { color: #102f4b; font-size: clamp(24px, 2.35vw, 31px); font-weight: 790; letter-spacing: -.045em; }
.premium-title-row p { max-width: 720px; margin-top: 5px; color: #768ba0; font-size: 11px; line-height: 1.55; }
.title-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.card {
  border-color: rgba(216, 228, 238, .94);
  border-radius: var(--premium-radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card:hover { border-color: rgba(199, 218, 232, .98); }
.premium-section { position: relative; overflow: hidden; }
.premium-section::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 100% 0%, rgba(24, 151, 229, .065), transparent 66%);
  pointer-events: none;
  content: "";
}
.section-heading { margin-bottom: 17px; }
.premium-section-heading { position: relative; z-index: 1; align-items: flex-start; }
.premium-section-heading > div { display: grid; gap: 4px; min-width: 0; }
.premium-section-heading h2 { color: #173650; font-size: 16px; letter-spacing: -.025em; }
.premium-section-heading p { margin: 0; color: #7c90a3; font-size: 10px; line-height: 1.5; }
.section-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid #d6e7f3;
  border-radius: 999px;
  background: #f4faff;
  color: #4a7fa8 !important;
  padding: 5px 10px;
  font-size: 9px !important;
  font-weight: 820;
  white-space: nowrap;
}

.settings-summary-grid, .people-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.settings-summary-grid article, .people-summary article {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 5px;
  overflow: hidden;
  border: 1px solid #e1ebf3;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff 0%, #f8fbfe 100%);
  padding: 14px;
}
.settings-summary-grid article::after, .people-summary article::after {
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(35, 151, 225, .055);
  content: "";
}
.settings-summary-grid span, .people-summary span { color: #8295a7; font-size: 9px; font-weight: 760; }
.settings-summary-grid strong { overflow: hidden; color: #23445f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.people-summary { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 17px; padding: 0; overflow: hidden; }
.people-summary article { min-height: 98px; align-content: center; border: 0; border-right: 1px solid #e5edf4; border-radius: 0; background: transparent; padding: 18px 21px; }
.people-summary article:last-child { border-right: 0; }
.people-summary strong { color: #163b59; font-size: 25px; font-weight: 810; letter-spacing: -.045em; }
.people-summary small { color: #8da0b1; font-size: 9px; }

.management-create-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(210px, .62fr) minmax(0, 1.38fr);
  align-items: start;
  gap: 20px;
  margin: 2px 0 18px;
  border: 1px solid #d8e9f5;
  border-radius: 15px;
  background: linear-gradient(125deg, #f1f9ff 0%, #f9fcff 56%, #fff 100%);
  padding: 17px;
}
.management-create-panel > div:first-child { display: grid; gap: 5px; padding: 2px 0; }
.management-create-panel h3 { margin: 0; color: #214865; font-size: 14px; letter-spacing: -.02em; }
.management-create-panel p { margin: 0; color: #7890a4; font-size: 10px; line-height: 1.55; }
.premium-form { position: relative; z-index: 1; }
.premium-form .actions { align-items: center; }

.site-card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.site-card {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid #e0eaf2;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff 0%, #f8fbfe 100%);
  padding: 14px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.site-card:hover { transform: translateY(-2px); border-color: #add3ed; box-shadow: 0 13px 28px rgba(25, 98, 151, .09); }
.site-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #18a9ed, #0c75e6);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 9px 20px rgba(13, 122, 223, .18);
}
.site-card > div { display: grid; min-width: 0; gap: 3px; }
.site-card strong { overflow: hidden; color: #24445e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.site-card small { color: #4386ba; font-size: 9px; font-weight: 820; }
.site-card p { overflow: hidden; margin: 1px 0 0; color: #8497a8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.employee-management-stack, .employee-directory-stack { display: grid; gap: 17px; }
.group-card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.group-card {
  display: grid;
  grid-template-columns: 39px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  border: 1px solid #e0eaf2;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff 0%, #f9fbfd 100%);
  padding: 12px;
}
.group-card.dashboard-link:hover { transform: translateY(-2px); border-color: #9ecbeb; box-shadow: 0 12px 26px rgba(21, 91, 144, .10); }
.group-shift {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 900;
}
.group-shift.day { background: #e8f6ff; color: #1683cf; }
.group-shift.night { background: #eeeefe; color: #665ecf; }
.group-card > div { display: grid; min-width: 0; gap: 3px; }
.group-card strong { overflow: hidden; color: #294b66; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.group-card small { overflow: hidden; color: #8196a8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.group-count {
  border: 1px solid #dce8f1;
  border-radius: 999px;
  background: #f6f9fc;
  color: #5f7e96;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 820;
  white-space: nowrap;
}
.employee-cell { display: flex; align-items: center; gap: 9px; }
.employee-avatar-mini {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #31b4ed, #1678e8);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
}
.employee-cell strong { color: #23445e; font-size: 11px; }

.table-wrap, .premium-table-wrap {
  overflow: auto;
  border: 1px solid #e2ebf2;
  border-radius: 13px;
  background: #fff;
}
table { border-collapse: separate; border-spacing: 0; }
th, td { border-bottom-color: #e9f0f5; padding: 12px 11px; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #f8fbfd, #f4f8fb);
  color: #748a9d;
  font-size: 9px;
  letter-spacing: .025em;
}
tbody tr { transition: background .14s ease; }
tbody tr:hover { background: #f8fbfe; }
td { color: #49667e; font-size: 11px; }
.table-actions .button { border-radius: 8px; }

.badge { border: 1px solid rgba(61, 145, 202, .08); }
.badge.good { border-color: rgba(34, 169, 109, .10); }
.badge.warn { border-color: rgba(216, 132, 32, .10); }
.badge.bad { border-color: rgba(232, 79, 92, .10); }

.overview-hero, .platform-hero {
  min-height: 184px;
  border-radius: 20px;
  background:
    radial-gradient(420px 210px at 86% 0%, rgba(84, 208, 255, .19), transparent 70%),
    linear-gradient(112deg, #0b315e 0%, #0d64a9 58%, #1188c6 100%);
  box-shadow: 0 22px 48px rgba(14, 83, 143, .18);
  padding: 30px 28px 21px;
}
.overview-metric {
  border-radius: 15px;
  background: linear-gradient(145deg, #fff 0%, #f9fbfe 100%);
  box-shadow: 0 12px 30px rgba(27, 66, 99, .055);
}
.overview-metric.dashboard-link:hover { box-shadow: var(--shadow-hover); }
.flow-step, .risk-item, .message, .billing-plan, .permission-section, .permission-member, .group-work-time-form, .schedule-group-push-form {
  border-radius: 13px;
}
.ring-grid, .overview-lower, .platform-metrics, .overview-metrics { gap: 14px; }
.dashboard-filter-bar {
  border-radius: 14px;
  background: linear-gradient(90deg, #eef8ff 0%, #f8fcff 100%);
  box-shadow: 0 8px 22px rgba(28, 100, 151, .055);
}

.billing-panel, .permission-editor, .permission-member-list { border-radius: var(--premium-radius); }
.billing-plan.current { border-color: #72b9e9; box-shadow: 0 12px 28px rgba(24, 102, 160, .08), inset 0 0 0 1px rgba(48, 142, 213, .06); }
.permission-summary { border-radius: var(--premium-radius); }
.permission-editor { padding: 22px; }
.permission-option, .permission-site-option { border-radius: 12px; }
.permission-option.selected { box-shadow: 0 8px 20px rgba(31, 127, 199, .08); }

.auth-shell {
  background:
    radial-gradient(760px 460px at 95% -5%, rgba(31, 164, 232, .18), transparent 64%),
    radial-gradient(600px 400px at 8% 105%, rgba(13, 117, 225, .08), transparent 65%),
    #f3f7fb;
}
.auth-card {
  border-color: rgba(211, 225, 237, .9);
  border-radius: 24px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 34px 90px rgba(17, 58, 95, .15), 0 3px 12px rgba(17, 58, 95, .05);
  backdrop-filter: blur(16px);
}
.portal-choice { border-radius: 16px; }
.worker-card-main {
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(18, 62, 98, .12), 0 3px 10px rgba(18, 62, 98, .04);
}
.worker-floating-controls > *, .worker-profile-menu, .worker-drawer { box-shadow: 0 18px 42px rgba(9, 38, 65, .17); }

@media (max-width: 1180px) {
  .site-card-grid, .group-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .settings-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { padding: 13px; box-shadow: none; }
  .sidebar .brand { min-height: 45px; padding-bottom: 10px; }
  .nav button:hover { transform: none; }
  .topbar { min-height: 60px; padding: 0 16px; }
  .content { padding: 21px 16px 42px; }
  .premium-title-row { margin-bottom: 18px; }
  .management-create-panel { grid-template-columns: 1fr; gap: 13px; }
  .people-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .people-summary article:nth-child(2) { border-right: 0; }
  .people-summary article:nth-child(-n+2) { border-bottom: 1px solid #e5edf4; }
  .site-card-grid, .group-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 590px) {
  .card { border-radius: 16px; padding: 16px; }
  .premium-title-row { display: flex; align-items: flex-start; }
  .premium-title-row h1 { font-size: 23px; }
  .premium-title-row p { font-size: 10px; }
  .premium-section-heading { align-items: flex-start; flex-direction: column; }
  .section-pill { align-self: flex-start; }
  .settings-summary-grid, .site-card-grid, .group-card-grid { grid-template-columns: 1fr; }
  .people-summary { grid-template-columns: 1fr; }
  .people-summary article { min-height: 76px; border-right: 0; border-bottom: 1px solid #e5edf4; padding: 14px 17px; }
  .people-summary article:last-child { border-bottom: 0; }
  .people-summary strong { font-size: 22px; }
  .management-create-panel { margin-bottom: 15px; padding: 14px; }
  .site-card, .group-card { grid-template-columns: 38px minmax(0,1fr) auto; }
  .site-card-icon { width: 38px; height: 38px; }
  .topbar { background: rgba(250,252,255,.95); }
  .content { padding: 18px 13px 36px; }
  .auth-card { border-radius: 20px; }
}

/* v40 compact management flow */
.portal-choice-grid--spacious {
  gap: 18px;
  margin-top: 8px;
}
.portal-choice-grid--spacious::before {
  grid-column: 1 / -1;
  height: 12px;
  content: "";
}
.portal-choice-grid--spacious .portal-choice {
  min-height: 142px;
}

.management-profile-wrap {
  position: relative;
  z-index: 72;
}
.management-profile-button {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  border: 1px solid #dce8f1;
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  color: #31526d;
  padding: 5px 9px 5px 6px;
  box-shadow: 0 7px 20px rgba(15, 59, 94, .07);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.management-profile-button:hover,
.management-profile-wrap:has(.management-profile-menu.is-open) .management-profile-button {
  transform: translateY(-1px);
  border-color: #9bc7e6;
  box-shadow: 0 12px 28px rgba(16, 84, 134, .12);
}
.management-profile-button .avatar {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  font-size: 9px;
}
.management-profile-copy {
  display: grid;
  max-width: 160px;
  gap: 1px;
  text-align: left;
}
.management-profile-copy strong {
  color: #294b66;
  font-size: 10px;
  line-height: 1.25;
}
.management-profile-copy small {
  overflow: hidden;
  color: #8a9daf;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.management-profile-chevron {
  color: #7f96a9;
  font-size: 11px;
  transition: transform .16s ease;
}
.management-profile-wrap:has(.management-profile-menu.is-open) .management-profile-chevron { transform: rotate(180deg); }
.management-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 75;
  display: none;
  width: min(330px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid #dce8f1;
  border-radius: 17px;
  background: rgba(255,255,255,.98);
  padding: 9px;
  box-shadow: 0 28px 70px rgba(4, 35, 63, .22), 0 4px 14px rgba(4, 35, 63, .08);
  backdrop-filter: blur(18px);
}
.management-profile-menu.is-open { display: grid; gap: 5px; animation: managementMenuIn .16s ease both; }
@keyframes managementMenuIn { from { opacity: 0; transform: translateY(-7px) scale(.985); } to { opacity: 1; transform: none; } }
.management-profile-identity {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 3px;
  border-radius: 13px;
  background: linear-gradient(135deg, #eff8ff, #f8fcff);
  padding: 12px;
}
.management-profile-identity .avatar { width: 43px; height: 43px; font-size: 11px; }
.management-profile-identity > div { display: grid; min-width: 0; gap: 2px; }
.management-profile-identity strong { overflow: hidden; color: #21445f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.management-profile-identity small { overflow: hidden; color: #7890a4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.management-profile-identity em { color: #2b85c6; font-size: 9px; font-style: normal; font-weight: 760; }
.management-profile-menu > button {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #365a75;
  padding: 10px;
  text-align: left;
}
.management-profile-menu > button:hover { background: #f1f8fd; }
.management-profile-menu > button > span:first-child {
  display: grid;
  width: 35px;
  height: 35px;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 10px;
  background: #eaf5fd;
  color: #197fd0;
  font-weight: 900;
}
.management-profile-menu > button strong { align-self: end; color: #294d69; font-size: 11px; }
.management-profile-menu > button small { align-self: start; color: #8a9dae; font-size: 9px; }
.management-profile-menu .management-profile-logout {
  margin-top: 3px;
  border-top: 1px solid #edf2f6;
  border-radius: 0 0 11px 11px;
  color: #d34a56;
}
.management-profile-menu .management-profile-logout > span:first-child { background: #fff0f2; color: #df4e5a; }
.management-profile-menu .management-profile-logout strong { color: #c94350; }
.management-profile-empty { color: #8397a9; padding: 12px; font-size: 10px; text-align: center; }
.management-profile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  border: 0;
  background: rgba(4, 27, 49, .08);
  padding: 0;
}
.management-profile-backdrop.is-open { display: block; }

.employee-editor-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(780px, calc(100dvh - 32px));
  overflow: visible;
  border: 0;
  border-radius: 22px;
  background: transparent;
  padding: 0;
}
.employee-editor-dialog::backdrop {
  background: rgba(5, 28, 51, .58);
  backdrop-filter: blur(5px);
}
.employee-dialog-card {
  overflow: hidden;
  border: 1px solid rgba(218, 232, 242, .95);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(4, 32, 57, .3);
}
.employee-dialog-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #e9f0f5;
  background: radial-gradient(360px 170px at 95% -20%, rgba(54, 182, 239, .18), transparent 72%), linear-gradient(140deg, #f4faff, #fff);
  padding: 24px 26px 20px;
}
.employee-dialog-head h2 { margin: 3px 0 5px; color: #183e5c; font-size: 21px; letter-spacing: -.035em; }
.employee-dialog-head p { margin: 0; color: #7890a5; font-size: 11px; line-height: 1.6; }
.employee-dialog-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #7890a4;
  font-size: 23px;
  line-height: 1;
  box-shadow: 0 7px 18px rgba(18, 70, 109, .08);
}
.employee-dialog-close:hover { background: #eef7fd; color: #267fbf; }
.employee-dialog-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  padding: 23px 26px 12px;
}
.employee-dialog-form label { color: #607b91; font-size: 11px; }
.employee-dialog-form input,
.employee-dialog-form select { min-height: 42px; border-radius: 11px; background: #fbfdff; }
.employee-site-permission {
  display: flex;
  align-items: flex-start;
  gap: 8px 14px;
  margin: 4px 26px 0;
  border: 1px solid #e2eaf1;
  border-radius: 12px;
  background: #f7fafc;
  color: #71879a;
  padding: 11px 13px;
  font-size: 10px;
  line-height: 1.5;
}
.employee-site-permission strong { flex: 0 0 auto; color: #536f85; font-size: 10px; }
.employee-site-permission.good { border-color: #cce9dc; background: #f1fbf6; }
.employee-site-permission.good strong { color: #1c9462; }
.employee-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid #edf2f6;
  margin-top: 19px;
  padding: 17px 26px 21px;
}
.employee-dialog-actions .button { min-width: 108px; }
.employee-list-card .premium-section-heading { align-items: center; }
.employee-list-card .table-actions { flex-wrap: nowrap; }

.combined-workspace-tabs {
  position: sticky;
  top: 72px;
  z-index: 12;
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  overflow-x: auto;
  margin: -4px 0 16px;
  border: 1px solid #dce8f2;
  border-radius: 13px;
  background: rgba(255,255,255,.94);
  padding: 5px;
  box-shadow: 0 10px 27px rgba(14, 63, 100, .08);
  backdrop-filter: blur(14px);
}
.combined-workspace-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #5d7890;
  padding: 7px 13px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.combined-workspace-tabs button:hover { background: #edf7fe; color: #167ac9; }
.combined-workspace-section { scroll-margin-top: 126px; }
.combined-workspace-section > .section-heading h2 { color: #224763; }
.operations-response-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}
.operations-response-summary span {
  display: grid;
  gap: 3px;
  border: 1px solid #e3ecf3;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f8fbfd);
  color: #8195a6;
  padding: 10px 12px;
  font-size: 9px;
}
.operations-response-summary b { color: #244963; font-size: 16px; }
.operations-rule-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 16px;
}
.operations-rule-summary span {
  display: grid;
  gap: 4px;
  border: 1px solid #e1eaf2;
  border-radius: 11px;
  background: #f8fbfd;
  color: #7c91a3;
  padding: 11px;
  font-size: 9px;
  line-height: 1.5;
}
.operations-rule-summary b { color: #2b526d; font-size: 9px; }
.permission-option.owner-only { border-color: #d9d7f4; background: linear-gradient(145deg, #fbfaff, #f5f3ff); }
.permission-option.owner-only strong em { background: #ece8ff; color: #675dc8; }
.permission-option.owner-only input { accent-color: #6b62cb; }

@media (max-width: 820px) {
  .management-profile-copy { display: none; }
  .management-profile-button { min-height: 38px; padding-right: 7px; }
  .management-profile-button .avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .management-profile-menu { position: fixed; top: 66px; right: 12px; }
  .employee-dialog-form { gap: 12px; padding: 20px 20px 10px; }
  .employee-dialog-head { padding: 21px 20px 17px; }
  .employee-site-permission { margin-right: 20px; margin-left: 20px; }
  .employee-dialog-actions { padding-right: 20px; padding-left: 20px; }
  .combined-workspace-tabs { top: 64px; }
  .operations-response-summary, .operations-rule-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 590px) {
  .portal-choice-grid--spacious { gap: 13px; margin-top: 15px; }
  .portal-choice-grid--spacious::before { height: 17px; }
  .portal-choice-grid--spacious .portal-choice { min-height: 130px; }
  .management-profile-menu { top: 61px; right: 9px; width: calc(100vw - 18px); }
  .employee-editor-dialog { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); }
  .employee-dialog-card { max-height: calc(100dvh - 18px); overflow: auto; border-radius: 18px; }
  .employee-dialog-head { position: sticky; top: 0; z-index: 2; padding: 18px 16px 15px; }
  .employee-dialog-head h2 { font-size: 19px; }
  .employee-dialog-form { grid-template-columns: 1fr; gap: 11px; padding: 17px 16px 8px; }
  .employee-site-permission { display: grid; margin-right: 16px; margin-left: 16px; }
  .employee-dialog-actions { position: sticky; bottom: 0; z-index: 2; background: #fff; padding: 13px 16px 16px; }
  .employee-dialog-actions .button { min-width: 0; flex: 1; }
  .combined-workspace-tabs { top: 59px; width: 100%; }
  .combined-workspace-tabs button { flex: 1 0 auto; }
  .operations-response-summary, .operations-rule-summary { grid-template-columns: 1fr 1fr; gap: 7px; }
}


/* v40 final interaction corrections */
.topbar { z-index: 80; }
.auth-card-logo { margin-bottom: 36px; }
.portal-choice-grid--spacious { margin-top: 12px; }
.response-status-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.response-status-summary span { display: flex; min-height: 58px; align-items: center; gap: 8px; border: 1px solid #e3ecf3; border-radius: 11px; background: linear-gradient(145deg, #fff, #f8fbfd); color: #8195a6; padding: 10px 12px; font-size: 9px; font-weight: 760; }
.response-status-summary b { color: #244963; font-size: 19px; letter-spacing: -.04em; }
.response-status-summary .good { border-color: #d4ecdf; background: #f4fbf7; color: #368261; }
.response-status-summary .good b { color: #22935f; }
.response-status-summary .warn { border-color: #f2e3c8; background: #fffaf1; color: #98703c; }
.response-status-summary .warn b { color: #dc8b24; }
.response-status-summary .bad { border-color: #f1d9dc; background: #fff7f8; color: #9b6870; }
.response-status-summary .bad b { color: #e45361; }
.employee-editor-dialog { overflow: auto; }
.permission-option.owner-only { cursor: not-allowed; }
.permission-option.owner-only input { pointer-events: none; }
@media (max-width: 820px) {
  .response-status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 590px) {
  .auth-card-logo { margin-bottom: 40px; }
  .portal-choice-grid--spacious { margin-top: 16px; }
  .response-status-summary { gap: 7px; }
  .response-status-summary span { min-height: 52px; padding: 8px 9px; }
  .response-status-summary b { font-size: 17px; }
}

/* v45 compact low-frequency settings */
.section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.compact-setting-card {
  display: grid;
  grid-template-columns: minmax(250px, 1.15fr) auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 86px;
  padding: 15px 17px;
  overflow: hidden;
}
.compact-setting-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}
.compact-setting-main > div { min-width: 0; }
.compact-setting-main h2 {
  margin: 2px 0 3px;
  color: #1e4563;
  font-size: 14px;
  letter-spacing: -.025em;
}
.compact-setting-main p {
  margin: 0;
  color: #8195a7;
  font-size: 9px;
  line-height: 1.5;
}
.compact-setting-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #e7f6ff, #d9effd);
  color: #167bc7;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(45, 142, 204, .09);
}
.compact-setting-metrics {
  display: flex;
  align-items: stretch;
  gap: 7px;
}
.compact-setting-metrics > span {
  display: grid;
  min-width: 72px;
  align-content: center;
  gap: 3px;
  border-left: 1px solid #e4edf4;
  color: #8a9cab;
  padding: 2px 11px;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}
.compact-setting-metrics strong {
  color: #31536c;
  font-size: 11px;
  font-weight: 820;
}
.compact-setting-preview {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.compact-setting-chip {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 5px;
  min-width: 0;
  max-width: 154px;
  border: 1px solid #e1ebf3;
  border-radius: 9px;
  background: #f9fcfe;
  color: #49677e;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 760;
  white-space: nowrap;
}
.compact-setting-chip b {
  grid-row: 1 / span 2;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 7px;
  background: #e9f5fd;
  color: #1680cf;
  font-size: 8px;
}
.compact-setting-chip small {
  overflow: hidden;
  color: #91a2b0;
  font-size: 7px;
  font-weight: 650;
  text-overflow: ellipsis;
}
.compact-setting-more,
.compact-setting-empty {
  flex: 0 0 auto;
  color: #8397a8;
  font-size: 9px;
  white-space: nowrap;
}
.compact-setting-more {
  display: grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #edf7fd;
  color: #287eb9;
  font-weight: 850;
}
.compact-setting-action { white-space: nowrap; }
.compact-setting-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.schedule-settings-card {
  grid-template-columns: minmax(260px, 1.2fr) minmax(330px, 1fr) auto;
}
.schedule-settings-card .compact-setting-metrics > span { min-width: 105px; }

.settings-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow: visible;
  border: 0;
  border-radius: 22px;
  background: transparent;
  padding: 0;
}
.settings-dialog--wide { width: min(920px, calc(100vw - 32px)); }
.settings-dialog::backdrop {
  background: rgba(5, 28, 51, .58);
  backdrop-filter: blur(5px);
}
.settings-dialog-card {
  max-height: min(820px, calc(100dvh - 32px));
  overflow: auto;
  border: 1px solid rgba(218, 232, 242, .96);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(4, 32, 57, .3);
}
.settings-dialog-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #e9f0f5;
  background: radial-gradient(360px 170px at 95% -20%, rgba(54, 182, 239, .18), transparent 72%), linear-gradient(140deg, #f4faff, #fff);
  padding: 23px 25px 19px;
}
.settings-dialog-head h2 {
  margin: 3px 0 5px;
  color: #183e5c;
  font-size: 20px;
  letter-spacing: -.035em;
}
.settings-dialog-head p {
  max-width: 610px;
  margin: 0;
  color: #7890a5;
  font-size: 10px;
  line-height: 1.6;
}
.settings-dialog-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #7890a4;
  font-size: 23px;
  line-height: 1;
  box-shadow: 0 7px 18px rgba(18, 70, 109, .08);
}
.settings-dialog-close:hover { background: #eef7fd; color: #267fbf; }
.settings-dialog-body { display: grid; gap: 17px; padding: 21px 25px 24px; }
.settings-dialog-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.settings-dialog-form--rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-dialog-form .wide { grid-column: 1 / -1; }
.settings-dialog-form label,
.settings-dialog-selector {
  display: grid;
  gap: 6px;
  color: #617a8f;
  font-size: 10px;
  font-weight: 760;
}
.settings-dialog-form input,
.settings-dialog-form select,
.settings-dialog-selector select {
  min-height: 41px;
  border-radius: 11px;
  background: #fbfdff;
}
.settings-dialog-form .check-field {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid #e0e9f1;
  border-radius: 11px;
  background: #f8fbfd;
  padding: 9px 12px;
}
.settings-dialog-form .check-field input { width: 16px; min-height: auto; }
.settings-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #edf2f6;
  margin-top: 5px;
  padding-top: 16px;
}
.settings-dialog-section {
  display: grid;
  gap: 12px;
  border: 1px solid #e5edf4;
  border-radius: 14px;
  background: #fbfdff;
  padding: 15px;
}
.settings-dialog-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.settings-dialog-section-head h3 { margin: 0 0 3px; color: #24465f; font-size: 13px; }
.settings-dialog-section-head p { margin: 0; color: #8194a5; font-size: 9px; line-height: 1.5; }
.settings-dialog-table { border: 1px solid #e7eef4; border-radius: 11px; background: #fff; }
.settings-dialog-table th { position: sticky; top: 0; z-index: 1; }
.settings-dialog-selector {
  grid-template-columns: auto minmax(220px, 1fr);
  align-items: center;
  border: 1px solid #e1eaf2;
  border-radius: 12px;
  background: #f8fbfd;
  padding: 11px 12px;
}
.group-work-time-form--dialog {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.group-work-time-form--dialog .wide { grid-column: 1 / -1; }
.settings-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.settings-readonly-grid article {
  display: grid;
  gap: 4px;
  border: 1px solid #e2ebf2;
  border-radius: 11px;
  background: #f9fcfe;
  padding: 12px;
}
.settings-readonly-grid span { color: #8799a8; font-size: 9px; }
.settings-readonly-grid strong { color: #294c67; font-size: 12px; }

@media (max-width: 1120px) {
  .compact-setting-card,
  .schedule-settings-card {
    grid-template-columns: minmax(240px, 1fr) auto auto;
  }
  .compact-setting-preview { display: none; }
}

@media (max-width: 820px) {
  .section-actions { justify-content: flex-start; }
  .compact-setting-card,
  .schedule-settings-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }
  .compact-setting-metrics {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    border-top: 1px solid #e7eef4;
    padding-top: 10px;
  }
  .compact-setting-metrics > span {
    flex: 1;
    min-width: 0;
    border-left: 0;
    border-right: 1px solid #e7eef4;
    padding: 0 9px;
  }
  .compact-setting-metrics > span:first-child { padding-left: 0; }
  .compact-setting-metrics > span:last-child { border-right: 0; }
  .compact-setting-actions { align-self: center; }
  .settings-dialog,
  .settings-dialog--wide { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); }
  .settings-dialog-card { max-height: calc(100dvh - 18px); border-radius: 18px; }
  .settings-dialog-head { padding: 19px 18px 16px; }
  .settings-dialog-body { padding: 17px 18px 20px; }
}

@media (max-width: 590px) {
  .compact-setting-card,
  .schedule-settings-card { grid-template-columns: 1fr; }
  .compact-setting-action,
  .compact-setting-actions { width: 100%; }
  .compact-setting-actions .button,
  .compact-setting-action { flex: 1; justify-content: center; }
  .compact-setting-metrics { overflow-x: auto; }
  .compact-setting-metrics > span { min-width: 100px; }
  .settings-dialog-head h2 { font-size: 18px; }
  .settings-dialog-form,
  .settings-dialog-form--rules,
  .group-work-time-form--dialog,
  .settings-readonly-grid { grid-template-columns: 1fr; }
  .settings-dialog-selector { grid-template-columns: 1fr; }
  .settings-dialog-actions { position: sticky; bottom: -24px; z-index: 2; background: #fff; }
  .settings-dialog-actions .button { flex: 1; }
}

/* v50 compact unified customer sign-in */
.unified-login-heading {
  margin: -2px 0 24px;
  text-align: center;
}
.unified-login-heading h1 {
  margin-bottom: 9px;
  font-size: 25px;
}
.unified-login-form { gap: 13px; }
.unified-login-submit {
  min-height: 47px;
  margin-top: 3px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}
.auth-text-action {
  justify-self: center;
  border: 0;
  background: transparent;
  color: #1677d5;
  padding: 2px 8px 5px;
  font-size: 12px;
  font-weight: 750;
}
.auth-text-action:hover { color: #075fae; text-decoration: underline; }
.auth-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 25px;
}
.auth-secondary-actions--single { margin-bottom: -1px; }
.auth-registration-panel {
  margin-top: 2px;
  padding-top: 13px;
  border-top: 1px solid #e5edf4;
}
.auth-registration-panel--visible { display: grid; }
.auth-registration-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #95a8b8;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.auth-registration-divider::before,
.auth-registration-divider::after {
  height: 1px;
  flex: 1;
  background: #e5edf4;
  content: "";
}
.auth-registration-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.auth-registration-actions .button { min-height: 43px; border-radius: 11px; }
@media (max-width: 420px) {
  .unified-login-heading { margin-bottom: 21px; }
  .unified-login-heading h1 { font-size: 23px; }
  .unified-login-heading p { font-size: 11px; }
  .auth-registration-actions { grid-template-columns: 1fr; }
}

/* v50 worker portal: vertical registration card, integrated logo and independent floating controls */
.language-picker--compact select {
  min-width: 43px;
  padding-right: 15px;
  text-align: center;
  letter-spacing: .08em;
}
.worker-menu-float,
.worker-language-float,
.worker-avatar-float {
  position: fixed;
  z-index: 30;
  top: 18px;
}
.worker-menu-float { left: 22px; }
.worker-language-float { right: 76px; }
.worker-avatar-float { right: 22px; }
.worker-language-float .language-picker {
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 24px rgba(24,62,94,.12);
  backdrop-filter: blur(14px);
}
.worker-avatar-float {
  overflow: visible;
  position: fixed;
}
.worker-avatar-float > img,
.worker-avatar-float > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
}
.worker-avatar-float > i,
.worker-avatar-large--editable > i {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #147ed8;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(10,83,145,.24);
}
.worker-content {
  width: min(580px, calc(100% - 32px));
  padding-top: 88px;
}
.worker-registration-card {
  gap: 17px;
  padding: 28px;
}
.worker-card-brand {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #edf2f7;
  padding: 4px 0 22px;
}
.worker-card-brand .brand { min-height: 46px; }
.worker-card-brand .brand-full-logo { width: 164px; }
.worker-identity-list {
  display: grid;
  overflow: hidden;
  border: 1px solid #e4edf5;
  border-radius: 13px;
  background: #fbfdff;
}
.worker-identity-list > div {
  display: grid;
  grid-template-columns: minmax(86px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 18px;
  min-height: 58px;
  border-bottom: 1px solid #e7eef5;
  padding: 13px 16px;
}
.worker-identity-list > div:last-child { border-bottom: 0; }
.worker-identity-list span {
  color: #8197aa;
  font-size: 11px;
  font-weight: 760;
}
.worker-identity-list strong {
  overflow: hidden;
  color: #23445f;
  font-size: 14px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.worker-action-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.worker-action-stack .button {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}
.worker-action-stack .button:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}
.worker-action-stack .button.is-current { opacity: .82; }
.worker-leave-entry:not(:disabled) {
  border-color: #f0d6ad;
  background: #fff8ec;
  color: #b96c13;
}
.worker-leave-entry:not(:disabled):hover { background: #fff1dc; }
.worker-leave-actions { margin-top: 2px; }
.worker-profile-form {
  grid-template-columns: 1fr;
}
.worker-avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  border: 1px solid #dce9f3;
  border-radius: 14px;
  background: linear-gradient(145deg, #fbfdff, #f3f9fe);
  padding: 17px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.worker-avatar-upload:hover {
  border-color: #a9d5f3;
  box-shadow: 0 10px 24px rgba(22,99,158,.08);
  transform: translateY(-1px);
}
.worker-avatar-large--editable {
  position: relative;
  overflow: visible;
  width: 70px;
  height: 70px;
  flex-basis: 70px;
}
.worker-avatar-large--editable > img,
.worker-avatar-large--editable > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
}
.worker-avatar-upload-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.worker-avatar-upload-copy strong { color: #24506f; font-size: 14px; }
.worker-avatar-upload-copy em { color: #628099; font-size: 11px; font-style: normal; }
.worker-avatar-upload-copy small { color: #91a4b4; font-size: 9px; line-height: 1.45; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
@media (max-width: 590px) {
  .worker-menu-float,
  .worker-language-float,
  .worker-avatar-float { top: 12px; }
  .worker-menu-float { left: 12px; }
  .worker-language-float { right: 59px; }
  .worker-avatar-float { right: 12px; }
  .worker-language-float .language-picker { min-height: 35px; }
  .worker-language-float .language-picker select { min-width: 39px; min-height: 31px; }
  .worker-content { width: min(100% - 24px, 580px); padding: 70px 0 34px; }
  .worker-registration-card { padding: 18px; }
  .worker-card-brand { min-height: 64px; padding-bottom: 18px; }
  .worker-card-brand .brand-full-logo { width: 142px; }
  .worker-identity-list > div {
    grid-template-columns: minmax(76px, .72fr) minmax(0, 1.28fr);
    min-height: 54px;
    gap: 12px;
    padding: 11px 13px;
  }
  .worker-identity-list strong { font-size: 13px; }
  .worker-action-stack .button { min-height: 46px; }
  .worker-avatar-upload { align-items: flex-start; padding: 14px; }
  .worker-avatar-large--editable { width: 62px; height: 62px; flex-basis: 62px; }
}

/* v55 complete group-name localization; existing compact worker layout retained */
.worker-status-card > strong:only-child { margin-top: 0; }
.worker-identity-list > div:last-child strong { white-space: normal; line-height: 1.45; }
.worker-drawer nav button[data-worker-enter-management] { margin-top: 10px; border-color: rgba(91,202,255,.28); background: rgba(15,111,185,.22); color: #eaf7ff; }
.worker-drawer nav button[data-worker-enter-management]:hover { background: linear-gradient(90deg, rgba(20,130,220,.55), rgba(25,134,211,.24)); }

/* v55 assigned-site summary and multilingual team settings ------------------ */
.hero-stats b.hero-site-name {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.group-localization-note {
  display: grid;
  gap: 4px;
  border: 1px solid #d8e9f6;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(20, 153, 237, .07), rgba(25, 175, 232, .025));
  padding: 11px 13px;
}
.group-localization-note strong { color: #176cae; font-size: 11px; }
.group-localization-note span { color: #6d8498; font-size: 10px; line-height: 1.55; }
@media (max-width: 720px) {
  .hero-stats b.hero-site-name { -webkit-line-clamp: 3; }
}

/* v58 unified workforce schedule table, spreadsheet import/export, and live refresh */
.schedule-workspace-card {
  overflow: hidden;
  padding: 0;
  border-color: #dbe8f3;
  box-shadow: 0 18px 46px rgba(25, 75, 116, .10);
}
.schedule-workspace-card .schedule-page-heading {
  margin: 0;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #edf3f8;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfe 100%);
}
.schedule-page-heading h2 { margin: 3px 0 4px; color: #183f61; font-size: 20px; }
.schedule-page-heading p { margin: 0; color: #7a91a5; font-size: 11px; line-height: 1.55; }
.schedule-status-summary {
  display: grid;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  grid-template-columns: repeat(6, minmax(105px, 1fr)) !important;
  gap: 10px;
  padding: 16px 24px 10px;
}
.schedule-status-summary > span {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  border: 1px solid #e3edf5;
  border-radius: 12px;
  background: #f9fbfd;
  color: #6f879b;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 760;
}
.schedule-status-summary b { color: #254f70; font-size: 18px; line-height: 1; }
.schedule-status-summary > [data-workforce-metric="registered"] { background: #ecfaff; border-color: #9cdae9; color: #08657d; }
.schedule-status-summary > [data-workforce-metric="registered"] b { color: #08657d; }
.schedule-status-summary > [data-workforce-metric="unscheduled"] { background: #fff8de; border-color: #e9cf77; color: #795800; }
.schedule-status-summary > [data-workforce-metric="unscheduled"] b { color: #795800; }
.schedule-status-summary > [data-workforce-metric="work"] { background: #edf9f1; border-color: #acd8ba; color: #176338; }
.schedule-status-summary > [data-workforce-metric="work"] b { color: #176338; }
.schedule-status-summary > [data-workforce-metric="rest"] { background: #f6f0fc; border-color: #ceb9e6; color: #6b3c91; }
.schedule-status-summary > [data-workforce-metric="rest"] b { color: #6b3c91; }
.schedule-status-summary > [data-workforce-metric="leave"] { background: #fff2e6; border-color: #edbf91; color: #914800; }
.schedule-status-summary > [data-workforce-metric="leave"] b { color: #914800; }
.schedule-status-summary > [data-workforce-metric="no_operation"] { background: #fff0f4; border-color: #eab3c5; color: #9c3157; }
.schedule-status-summary > [data-workforce-metric="no_operation"] b { color: #9c3157; }
.schedule-filter-bar {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(5, minmax(132px, .72fr)) minmax(145px, .75fr);
  gap: 10px;
  padding: 10px 24px 16px;
}
.schedule-filter-bar label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #71889c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
}
.schedule-filter-bar input,
.schedule-filter-bar select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d8e6f1;
  border-radius: 9px;
  background: #fff;
  color: #31546f;
  padding: 0 10px;
  font-size: 11px;
  outline: none;
}
.schedule-filter-bar input:focus,
.schedule-filter-bar select:focus { border-color: #79bbe8; box-shadow: 0 0 0 3px rgba(26, 145, 222, .10); }
.schedule-search-field { grid-column: span 1; }
.schedule-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #edf3f8;
  border-bottom: 1px solid #e7eff6;
  background: linear-gradient(90deg, #fbfdff, #f7fbfe);
  padding: 12px 24px;
}
.schedule-command-copy,
.schedule-command-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.schedule-command-copy > span:not(.badge) {
  color: #72899d;
  font-size: 10px;
  font-weight: 740;
}
.schedule-command-copy strong { color: #1f5f92; font-size: 11px; }
.schedule-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #edf9f3;
  color: #228458 !important;
  padding: 6px 9px;
}
.schedule-live-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25b66e;
  box-shadow: 0 0 0 4px rgba(37, 182, 110, .12);
}
.schedule-command-actions .button { min-height: 34px; padding: 0 13px; font-size: 10px; }
.schedule-command-actions .icon-button { min-width: 34px; min-height: 34px; }
.schedule-table-wrap {
  width: 100%;
  max-height: min(62vh, 690px);
  overflow: auto;
  background: #fff;
}
.schedule-table-modern {
  width: 100%;
  min-width: 1540px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.schedule-table-modern thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 46px;
  border-bottom: 1px solid #dce8f2;
  background: #f3f8fc;
  color: #5d7790;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 820;
  text-align: left;
  white-space: nowrap;
}
.schedule-table-modern tbody td {
  height: 58px;
  border-bottom: 1px solid #edf3f7;
  background: #fff;
  color: #395972;
  padding: 8px 12px;
  font-size: 10px;
  vertical-align: middle;
}
.schedule-table-modern tbody tr:hover td { background: #f8fcff; }
.schedule-table-modern tbody tr:last-child td { border-bottom: 0; }
.schedule-checkbox-cell { width: 42px; min-width: 42px; text-align: center !important; }
.schedule-checkbox-cell input {
  width: 16px;
  height: 16px;
  accent-color: #168fe0;
  cursor: pointer;
}
.schedule-checkbox-cell input:disabled { cursor: not-allowed; opacity: .35; }
.schedule-employee-cell,
.schedule-person-cell {
  display: flex;
  min-width: 175px;
  align-items: center;
  gap: 10px;
}
.schedule-avatar,
.schedule-person-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  overflow: hidden;
  border: 2px solid #d6ecfa;
  border-radius: 50%;
  background: linear-gradient(135deg, #1da8e8, #1b79df);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}
.schedule-avatar img,
.schedule-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.schedule-employee-cell > span:last-child,
.schedule-person-cell > span:last-child,
.schedule-contact-cell { display: grid; min-width: 0; gap: 3px; }
.schedule-employee-cell strong,
.schedule-person-cell strong { overflow: hidden; color: #153e61; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-employee-cell small,
.schedule-person-cell small,
.schedule-contact-cell small { color: #8aa0b2; font-size: 9px; }
.schedule-contact-cell { min-width: 210px; }
.schedule-contact-cell span { overflow: hidden; color: #355b79; text-overflow: ellipsis; white-space: nowrap; }
.schedule-row-actions { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.schedule-row-action {
  min-width: 48px;
  min-height: 31px;
  border: 1px solid #cae6f7;
  border-radius: 8px;
  background: #eff9ff;
  color: #1685cc;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.schedule-row-action.rest { border-color: #f4d9dc; background: #fff5f5; color: #e15d67; }
.schedule-row-action.work.is-active { border-color: #169ce7; background: #169ce7; color: #fff; box-shadow: 0 5px 13px rgba(22, 156, 231, .18); }
.schedule-row-action.rest.is-active { border-color: #eb5964; background: #eb5964; color: #fff; box-shadow: 0 5px 13px rgba(235, 89, 100, .16); }
.schedule-row-action:disabled { cursor: not-allowed; opacity: .35; box-shadow: none; }
.schedule-action-note { color: #99a9b7; font-size: 9px; font-weight: 720; }
.schedule-time-input {
  width: 112px;
  min-height: 34px;
  border: 1px solid #d6e5f0;
  border-radius: 8px;
  background: #fbfdff;
  color: #2b5777;
  padding: 0 8px;
  font-size: 10px;
}
.schedule-time-input:disabled { border-color: #edf1f5; background: #f6f8fa; color: #a1afba; }
.schedule-weekly-hours {
  display: grid;
  min-width: 88px;
  gap: 2px;
  border: 0;
  border-radius: 9px;
  background: #f1f9fe;
  color: #176ca8;
  padding: 7px 10px;
  text-align: left;
}
.schedule-weekly-hours strong { font-size: 13px; }
.schedule-weekly-hours small { color: #6e9bb9; font-size: 8px; }
.schedule-table-sort {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}
.schedule-filter-empty-row td {
  height: 90px !important;
  background: #fbfdff !important;
  color: #8a9dad !important;
  text-align: center;
}
.schedule-row-filtered-out[hidden],
.schedule-filter-empty-row[hidden] { display: none !important; }
#schedule-panel[aria-busy="true"] { position: relative; }
#schedule-panel[aria-busy="true"]::after {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  background: rgba(248, 252, 255, .65);
  color: #1b78b8;
  content: "Updating…";
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(1px);
}
@media (max-width: 1400px) {
  .schedule-filter-bar { grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(130px, 1fr)); }
  .schedule-filter-bar label:nth-last-child(-n+3) { grid-column: span 1; }
  .schedule-status-summary { grid-template-columns: repeat(6, minmax(105px, 1fr)) !important; }
}
@media (max-width: 900px) {
  .schedule-workspace-card .schedule-page-heading { padding: 18px; }
  .schedule-status-summary { grid-template-columns: repeat(6, minmax(105px, 1fr)) !important; padding: 14px 18px 8px; }
  .schedule-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 18px 14px; }
  .schedule-search-field { grid-column: 1 / -1; }
  .schedule-command-bar { align-items: stretch; flex-direction: column; padding: 12px 18px; }
  .schedule-command-actions { justify-content: flex-start; }
  .schedule-command-actions .button { flex: 1 1 auto; }
  .schedule-table-wrap { max-height: 66vh; }
}
@media (max-width: 560px) {
  .schedule-status-summary { grid-template-columns: repeat(6, minmax(105px, 1fr)) !important; gap: 7px; padding: 12px; }
  .schedule-status-summary > span { min-height: 43px; padding: 8px 9px; }
  .schedule-filter-bar { grid-template-columns: 1fr; gap: 8px; padding: 8px 12px 12px; }
  .schedule-search-field { grid-column: auto; }
  .schedule-command-bar { padding: 10px 12px; }
  .schedule-command-copy { align-items: flex-start; flex-direction: column; }
  .schedule-command-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .schedule-command-actions .button { width: 100%; }
  .schedule-command-actions .icon-button { width: 100%; }
}

/* v59 expanded workforce workspace, reference-table proportions, and instant-confirm controls */
.content {
  width: min(2100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 30px 66px;
}
.content.content--schedule {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 36px 28px 72px;
}
.content--schedule .premium-title-row {
  margin-bottom: 28px;
}
.content--schedule .premium-title-row h1 {
  font-size: clamp(31px, 2.25vw, 40px);
}
.content--schedule .premium-title-row p {
  max-width: 980px;
  font-size: 14px;
  line-height: 1.65;
}
.content--schedule .workforce-page-stack {
  gap: 24px;
}

.schedule-workspace-card {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(21, 67, 104, .115);
}
.schedule-workspace-card .schedule-page-heading {
  padding: 30px 34px 25px;
}
.schedule-page-heading h2 {
  margin: 5px 0 6px;
  font-size: 27px;
  letter-spacing: -.025em;
}
.schedule-page-heading p {
  max-width: 1040px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
.schedule-status-summary {
  grid-template-columns: repeat(6, minmax(105px, 1fr)) !important;
  gap: 14px;
  padding: 20px 34px 15px;
}
.schedule-status-summary > span {
  min-height: 72px;
  gap: 12px;
  border-radius: 14px;
  padding: 15px 17px;
  font-size: 13px;
}
.schedule-status-summary b {
  font-size: 27px;
}
.schedule-filter-bar {
  grid-template-columns: minmax(300px, 1.65fr) repeat(5, minmax(160px, .82fr)) minmax(176px, .88fr);
  gap: 14px;
  padding: 15px 34px 22px;
}
.schedule-filter-bar label {
  gap: 8px;
  font-size: 11px;
}
.schedule-filter-bar input,
.schedule-filter-bar select {
  min-height: 48px;
  border-radius: 11px;
  padding: 0 13px;
  font-size: 13px;
}
.schedule-command-bar {
  min-height: 76px;
  gap: 20px;
  border-top: 1px solid #e8eff6;
  background: #fff;
  padding: 14px 34px;
}
.schedule-command-copy {
  gap: 13px;
}
.schedule-command-copy > span:not(.badge) {
  font-size: 13px;
}
.schedule-command-copy strong {
  font-size: 14px;
}
.schedule-live-indicator {
  min-height: 32px;
  padding: 7px 12px;
}
.schedule-instant-confirm-note {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid #d8eaf7;
  border-radius: 999px;
  background: #f4faff;
  color: #247cad !important;
  padding: 6px 12px;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.schedule-command-actions {
  gap: 11px;
}
.schedule-command-actions .button,
.schedule-command-actions .icon-button {
  min-height: 48px;
  border-radius: 11px;
  font-size: 13px;
}
.schedule-command-actions .button {
  min-width: 118px;
  padding: 0 20px;
}
.schedule-command-actions .icon-button {
  width: 48px;
  min-width: 48px;
}
.schedule-command-actions .schedule-file-button {
  border-color: transparent !important;
  background: linear-gradient(135deg, #32b5e8, #2499d6) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(36, 157, 218, .2) !important;
}
.schedule-command-actions .schedule-file-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #28aae0, #1d8cc9) !important;
  transform: translateY(-1px);
}
.schedule-command-actions .schedule-batch-button {
  min-width: 118px;
  border-width: 1px !important;
  box-shadow: none !important;
}
.schedule-command-actions .schedule-batch-button.work {
  border-color: #d9edf6 !important;
  background: #edf8fc !important;
  color: #42a8cf !important;
}
.schedule-command-actions .schedule-batch-button.rest {
  border-color: #f6e0e4 !important;
  background: #fff1f3 !important;
  color: #ef7883 !important;
}
.schedule-command-actions .schedule-batch-button.work:hover:not(:disabled) {
  border-color: #b5ddeb !important;
  background: #def3fa !important;
  color: #208eb9 !important;
  transform: translateY(-1px);
}
.schedule-command-actions .schedule-batch-button.rest:hover:not(:disabled) {
  border-color: #efc1c7 !important;
  background: #ffe4e8 !important;
  color: #dc5965 !important;
  transform: translateY(-1px);
}
.schedule-command-actions .schedule-batch-button:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none !important;
  filter: none !important;
}
.schedule-table-wrap {
  max-height: min(73vh, 900px);
  border-top: 1px solid #e6eef5;
}
.schedule-table-modern {
  min-width: 1780px;
}
.schedule-table-modern thead th {
  height: 58px;
  border-right: 1px solid #dbe7f0;
  padding: 0 16px;
  font-size: 12.5px;
  letter-spacing: .01em;
}
.schedule-table-modern thead th:last-child {
  border-right: 0;
}
.schedule-table-modern tbody td {
  height: 78px;
  padding: 11px 16px;
  font-size: 13px;
}
.schedule-table-modern tbody tr:nth-child(odd) td {
  background: #fbfdff;
}
.schedule-table-modern tbody tr:hover td {
  background: #f1f8fd;
}
.schedule-checkbox-cell {
  width: 52px;
  min-width: 52px;
}
.schedule-checkbox-cell input {
  width: 18px;
  height: 18px;
}
.schedule-employee-cell,
.schedule-person-cell {
  min-width: 215px;
  gap: 12px;
}
.schedule-avatar,
.schedule-person-avatar {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  font-size: 12px;
}
.schedule-employee-cell strong,
.schedule-person-cell strong {
  font-size: 13.5px;
}
.schedule-employee-cell small,
.schedule-person-cell small,
.schedule-contact-cell small {
  font-size: 11px;
}
.schedule-contact-cell {
  min-width: 250px;
  gap: 5px;
}
.schedule-row-actions {
  gap: 10px;
}
.schedule-row-action {
  min-width: 66px;
  min-height: 42px;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 12.5px;
}
.schedule-row-action.work {
  border-color: #d8edf6;
  background: #edf8fc;
  color: #2e9bc7;
}
.schedule-row-action.rest {
  border-color: #f6dfe3;
  background: #fff1f3;
  color: #e86b76;
}
.schedule-row-action.work.is-active {
  border-color: #169ce7;
  background: #169ce7;
  color: #fff;
}
.schedule-row-action.rest.is-active {
  border-color: #eb5964;
  background: #eb5964;
  color: #fff;
}
.schedule-time-input {
  width: 132px;
  min-height: 42px;
  border-radius: 10px;
  padding: 0 11px;
  font-size: 12.5px;
}
.schedule-weekly-hours {
  min-width: 108px;
  border-radius: 11px;
  padding: 10px 13px;
}
.schedule-weekly-hours strong {
  font-size: 16px;
}
.schedule-weekly-hours small {
  font-size: 10px;
}
.schedule-settings-card {
  min-height: 96px;
}

/* Give non-scheduling dashboards more breathing room without changing their structure. */
.overview-hero,
.platform-hero {
  min-height: 188px;
  padding: 31px 29px 21px;
}
.overview-metrics,
.dashboard-metric-grid,
.stats-grid {
  gap: 16px;
}

@media (min-width: 1500px) {
  .app-shell {
    grid-template-columns: 246px minmax(0, 1fr);
  }
  .topbar {
    min-height: 70px;
    padding-right: 30px;
    padding-left: 30px;
  }
}
@media (max-width: 1680px) {
  .content {
    width: min(1780px, calc(100% - 28px));
    padding-right: 22px;
    padding-left: 22px;
  }
  .content.content--schedule {
    padding-right: 18px;
    padding-left: 18px;
  }
  .schedule-status-summary {
    grid-template-columns: repeat(6, minmax(105px, 1fr)) !important;
  }
  .schedule-filter-bar {
    grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, 1fr));
  }
}
@media (max-width: 1100px) {
  .schedule-command-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .schedule-command-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 900px) {
  .content,
  .content.content--schedule {
    width: 100%;
    padding: 22px 16px 44px;
  }
  .schedule-workspace-card .schedule-page-heading {
    padding: 22px 18px;
  }
  .schedule-page-heading h2 {
    font-size: 22px;
  }
  .schedule-page-heading p {
    font-size: 12px;
  }
  .schedule-status-summary {
    grid-template-columns: repeat(6, minmax(105px, 1fr)) !important;
    padding: 15px 18px 10px;
  }
  .schedule-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 11px 18px 16px;
  }
  .schedule-search-field {
    grid-column: 1 / -1;
  }
  .schedule-command-bar {
    padding: 13px 18px;
  }
  .schedule-command-actions .button {
    min-width: 0;
    flex: 1 1 140px;
  }
  .schedule-table-wrap {
    max-height: 68vh;
  }
}
@media (max-width: 560px) {
  .content,
  .content.content--schedule {
    padding: 18px 12px 36px;
  }
  .schedule-status-summary {
    gap: 8px;
    padding: 12px;
  }
  .schedule-status-summary > span {
    min-height: 50px;
    padding: 9px 10px;
    font-size: 10px;
  }
  .schedule-status-summary b {
    font-size: 20px;
  }
  .schedule-filter-bar {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 9px 12px 13px;
  }
  .schedule-search-field {
    grid-column: auto;
  }
  .schedule-command-copy {
    align-items: flex-start;
    flex-direction: column;
  }
  .schedule-instant-confirm-note {
    display: none;
  }
  .schedule-command-bar {
    padding: 11px 12px;
  }
  .schedule-command-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .schedule-command-actions .button,
  .schedule-command-actions .icon-button {
    width: 100%;
    min-width: 0;
  }
}

/* v60 unified premium layout and one-step-larger typography ------------------
   The dashboard is the visual baseline for every enterprise page: the same
   content width, page gutters, vertical rhythm, card treatment, and readable
   type scale are shared by employees, scheduling, messages, attendance,
   payroll, settings, permissions, and platform administration. */
:root {
  --workspace-max-width: 1780px;
  --workspace-page-gutter: clamp(22px, 2.35vw, 42px);
  --workspace-section-gap: 24px;
  --workspace-card-padding: 26px;
  --premium-radius: 20px;
  --shadow: 0 18px 48px rgba(18, 55, 87, .075), 0 3px 12px rgba(18, 55, 87, .035);
  --shadow-hover: 0 26px 64px rgba(18, 74, 121, .135), 0 6px 16px rgba(18, 74, 121, .055);
}

body {
  font-size: 15px;
  line-height: 1.58;
  background:
    radial-gradient(1000px 560px at 96% -8%, rgba(30, 151, 231, .105), transparent 63%),
    radial-gradient(780px 520px at 12% 3%, rgba(67, 198, 239, .06), transparent 66%),
    linear-gradient(180deg, #f7faff 0%, #f2f7fb 48%, #f4f8fc 100%);
}

/* Shared application frame */
.app-shell { grid-template-columns: 252px minmax(0, 1fr); }
.sidebar {
  padding: 25px 15px 16px;
  background:
    radial-gradient(470px 290px at 32% -7%, rgba(32, 169, 237, .22), transparent 66%),
    linear-gradient(180deg, #0a2d50 0%, #071f39 56%, #06192f 100%);
  box-shadow: 12px 0 42px rgba(5, 27, 51, .065);
}
.sidebar .brand { min-height: 66px; padding: 2px 10px 21px; }
.sidebar .brand-full-logo { width: 180px; }
.company-switch {
  margin: 8px 0 17px;
  border-radius: 14px;
  padding: 15px;
}
.company-switch label { gap: 6px; font-size: 11px; }
.company-switch strong,
.company-switch select { font-size: 13px; }
.sidebar-scope {
  margin-bottom: 19px;
  border: 1px solid rgba(145, 205, 249, .12);
  border-radius: 13px;
  padding: 12px 14px;
}
.sidebar-scope span { font-size: 10px; }
.sidebar-scope strong { margin-top: 3px; font-size: 12.5px; line-height: 1.45; }
.sidebar-section-label { margin: 3px 11px 10px; font-size: 9px; }
.nav { gap: 6px; }
.nav button {
  min-height: 48px;
  gap: 12px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 730;
}
.nav-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 8px;
  font-size: 15px;
}
.sidebar-footer { padding-top: 19px; }
.account-summary { grid-template-columns: 39px minmax(0, 1fr); gap: 10px; }
.account-summary .avatar { width: 39px; height: 39px; }
.account-summary strong { font-size: 11.5px; }
.account-summary span { font-size: 10.5px; }
.sidebar-footer > .button { min-height: 43px; font-size: 12px; }

.main {
  background:
    radial-gradient(820px 430px at 78% 0%, rgba(60, 173, 235, .045), transparent 68%),
    transparent;
}
.topbar {
  min-height: 76px;
  padding: 0 var(--workspace-page-gutter);
  border-bottom-color: rgba(211, 225, 236, .88);
  background: rgba(250, 252, 255, .91);
  box-shadow: 0 9px 30px rgba(23, 59, 92, .05);
}
.page-context { gap: 4px; font-size: 12px; }
.page-context strong { font-size: 16px; }
.eyebrow { font-size: 10px; }
.top-actions { gap: 10px; }
.top-control,
.language-picker,
.icon-button { min-height: 40px; border-radius: 11px; }
.top-control { padding: 8px 12px; font-size: 11.5px; }
.language-picker select { min-height: 36px; font-size: 12px; }
.icon-button { width: 40px; min-width: 40px; font-size: 15px; }
.management-profile-button { min-height: 44px; border-radius: 12px; padding: 5px 10px 5px 6px; }
.management-profile-button .avatar { width: 32px; height: 32px; flex-basis: 32px; }
.management-profile-copy strong { font-size: 12px; }
.management-profile-copy small { font-size: 10px; }

.content,
.content.content--schedule {
  width: min(var(--workspace-max-width), calc(100% - (var(--workspace-page-gutter) * 2)));
  max-width: var(--workspace-max-width);
  margin: 0 auto;
  padding: 38px 0 76px;
}

/* Shared page rhythm and headings */
.premium-title-row,
.content--schedule .premium-title-row {
  margin-bottom: 26px;
  border-bottom-color: rgba(210, 225, 236, .88);
  padding: 3px 2px 22px;
}
.title-copy { gap: 5px; }
.title-kicker,
.section-kicker { font-size: 9.5px; letter-spacing: .17em; }
.premium-title-row h1,
.content--schedule .premium-title-row h1 {
  font-size: clamp(31px, 2.05vw, 36px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.045em;
}
.premium-title-row p,
.content--schedule .premium-title-row p {
  max-width: 900px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
}
.title-actions { gap: 10px; }

.workforce-page-stack,
.content--schedule .workforce-page-stack,
.employee-records-layout,
.employee-management-stack,
.employee-directory-stack {
  gap: var(--workspace-section-gap);
}
.organization-sections { display: grid; gap: var(--workspace-section-gap); }
.organization-sections > * + * { margin-top: 0; }

.card {
  border-color: rgba(212, 226, 237, .96);
  border-radius: var(--premium-radius);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow);
  padding: var(--workspace-card-padding);
}
.card:hover { border-color: rgba(190, 214, 231, .98); }
.premium-section::before { width: 230px; height: 230px; }
.section-heading { gap: 16px; margin-bottom: 21px; }
.section-heading h2,
.premium-section-heading h2 { font-size: 18px; line-height: 1.35; }
.section-heading span { font-size: 12px; }
.premium-section-heading > div { gap: 6px; }
.premium-section-heading p { font-size: 12.5px; line-height: 1.62; }
.section-pill { min-height: 31px; padding: 6px 12px; font-size: 10.5px !important; }
.section-count-link { padding: 6px 11px; font-size: 11.5px; }
.empty { padding: 44px 16px; font-size: 14px; }

/* One-step-larger controls */
label,
.action-dialog__input-label,
.employee-dialog-form label,
.workforce-settings-form label,
.group-work-time-form label,
.schedule-group-push-form label {
  gap: 8px;
  font-size: 12.5px;
}
input,
select,
textarea {
  min-height: 47px;
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 14px;
}
textarea { min-height: 116px; }
.form-grid { gap: 17px; }
.compact-form { gap: 16px; }
.actions { gap: 10px; }
.button {
  min-height: 44px;
  border-radius: 11px;
  padding: 9px 18px;
  font-size: 13px;
}
.helper,
.password-policy { font-size: 12.5px; }

/* Consistent premium tables */
.table-wrap,
.premium-table-wrap {
  border-color: #dce7f0;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
table { font-size: 13.5px; }
th,
td { padding: 15px 14px; }
th {
  height: 49px;
  color: #6f879b;
  font-size: 12px;
  letter-spacing: .02em;
}
td { color: #405f79; font-size: 13.5px; }
td:first-child { font-weight: 700; }
tbody tr:hover td { background: #f5faff; }
.badge {
  min-height: 27px;
  padding: 4px 10px;
  font-size: 11.5px;
}
.table-actions { gap: 8px; }
.table-actions .button { min-height: 38px; border-radius: 9px; padding: 7px 12px; font-size: 11.5px; }
.review-values { max-width: 320px; font-size: 10.5px; }

/* Filters, date bars, messages, and low-frequency cards */
.dashboard-filter-bar {
  gap: 18px;
  margin-bottom: 22px;
  border-radius: 16px;
  padding: 15px 18px;
}
.dashboard-filter-bar span { font-size: 10.5px; }
.dashboard-filter-bar strong { font-size: 13px; }
.dashboard-filter-actions { gap: 10px; }
.workforce-date-card { padding: 18px 22px; }
.workforce-date-card .section-heading { margin-bottom: 0; }
.workforce-date-card label { gap: 10px; font-size: 12px; }
.workforce-date-card input { min-height: 42px; }
.message {
  border-radius: 14px;
  padding: 17px 18px;
}
.message strong { font-size: 14px; }
.message p { margin: 8px 0; font-size: 13px; line-height: 1.65; }
.message small { font-size: 11px; }
.compact-setting-card { min-height: 106px; border-radius: 18px; padding: 20px 22px; }
.compact-setting-main h2 { font-size: 17px; }
.compact-setting-main p { font-size: 11.5px; }
.compact-setting-metrics span { font-size: 10.5px; }
.compact-setting-metrics strong { font-size: 12px; }

/* Dashboard is the visual baseline */
.overview-hero,
.platform-hero {
  min-height: 208px;
  border-radius: 22px;
  padding: 34px 34px 25px;
  box-shadow: 0 25px 58px rgba(14, 83, 143, .19);
}
.hero-kicker { font-size: 10px; }
.overview-hero h1,
.platform-hero h1 { margin-top: 10px; font-size: 29px; }
.overview-hero p,
.platform-hero p { max-width: 760px; font-size: 13px; line-height: 1.65; }
.sync-status { min-height: 36px; border-radius: 9px; padding: 9px 12px; font-size: 11.5px; }
.hero-stats { margin-top: 26px; padding-top: 16px; }
.hero-stats div { padding: 0 19px; }
.hero-stats span { font-size: 10.5px; }
.hero-stats b { margin-top: 5px; font-size: 12.5px; }
.overview-metrics,
.platform-metrics { gap: 18px; margin-top: 18px; }
.overview-metric {
  min-height: 112px;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 0 12px;
  border-radius: 17px;
  padding: 18px 17px;
}
.metric-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.overview-metric span { font-size: 12px; }
.overview-metric b { margin-top: 9px; font-size: 30px; }
.overview-metric small { font-size: 11px; }
.flow-card { margin-top: 18px; padding: 23px 20px 20px; }
.flow-title { font-size: 18px; }
.flow-subtitle { font-size: 11px; }
.flow-grid { gap: 12px; }
.flow-step { min-height: 82px; border-radius: 12px; padding: 15px 39px 13px 48px; }
.flow-number { left: 13px; top: 24px; width: 27px; height: 27px; font-size: 10px; }
.flow-step span { font-size: 10.5px; }
.flow-step b { font-size: 13.5px; }
.flow-step small { font-size: 10px; }
.overview-lower { gap: 18px; margin-top: 18px; }
.data-card { padding: 24px 22px; }
.ring-panel { min-height: 210px; gap: 14px; padding: 8px 17px; }
.ring { width: 144px; height: 144px; }
.ring::before { width: 104px; height: 104px; }
.ring-content span { font-size: 10.5px; }
.ring-content b { font-size: 24px; }
.ring-content small { font-size: 10px; }
.legend { gap: 11px; }
.legend-row { font-size: 11.5px; }
.risk-list { gap: 10px; }
.risk-item { min-height: 54px; padding: 10px 12px; }
.risk-item strong { font-size: 12.5px; }
.risk-item small { font-size: 10px; }
.risk-count { min-width: 28px; height: 28px; font-size: 11px; }
.group-table-card { margin-top: 18px; }

/* Management pages */
.settings-summary-grid,
.people-summary { gap: 14px; }
.settings-summary-grid article { min-height: 92px; border-radius: 15px; padding: 17px; }
.settings-summary-grid span,
.people-summary span { font-size: 10.5px; }
.settings-summary-grid strong { font-size: 13.5px; }
.people-summary { margin-bottom: 22px; border-radius: 16px; }
.people-summary article { min-height: 112px; padding: 21px 24px; }
.people-summary strong { font-size: 29px; }
.people-summary small { font-size: 10.5px; }
.management-create-panel { gap: 24px; margin-bottom: 22px; border-radius: 17px; padding: 21px; }
.management-create-panel h3 { font-size: 16px; }
.management-create-panel p { font-size: 12px; }
.site-card-grid,
.group-card-grid { gap: 14px; }
.site-card,
.group-card { border-radius: 15px; padding: 16px; }
.site-card { grid-template-columns: 47px minmax(0, 1fr) auto; }
.site-card-icon { width: 47px; height: 47px; border-radius: 13px; font-size: 14px; }
.site-card strong { font-size: 13.5px; }
.site-card small,
.site-card p { font-size: 10.5px; }
.group-card { grid-template-columns: 44px minmax(0, 1fr) auto; }
.group-shift { width: 44px; height: 44px; border-radius: 12px; font-size: 13px; }
.group-card strong { font-size: 13px; }
.group-card small { font-size: 10.5px; }
.group-count { padding: 5px 9px; font-size: 10.5px; }
.employee-cell { gap: 11px; }
.employee-avatar-mini { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; font-size: 9.5px; }
.employee-cell strong { font-size: 13px; }
.permission-editor { padding: 27px; }
.permission-section,
.permission-member,
.permission-option,
.permission-site-option { border-radius: 14px; }
.permission-option,
.permission-site-option { padding: 14px; }
.permission-option strong,
.permission-site-option strong { font-size: 12.5px; }
.permission-option small,
.permission-site-option small { font-size: 10.5px; }
.billing-panel { padding: 26px; }
.billing-plan { padding: 19px; }

/* Schedule page follows the same page geometry while keeping its data density */
.schedule-workspace-card {
  padding: 0;
  border-radius: var(--premium-radius);
  box-shadow: 0 22px 58px rgba(21, 67, 104, .12);
}
.schedule-workspace-card .schedule-page-heading { padding: 29px 32px 24px; }
.schedule-page-heading h2 { font-size: 27px; }
.schedule-page-heading p { font-size: 14px; }
.schedule-status-summary { gap: 14px; padding: 19px 32px 14px; }
.schedule-status-summary > span { min-height: 72px; border-radius: 14px; padding: 14px 16px; font-size: 13.5px; }
.schedule-status-summary b { font-size: 28px; }
.schedule-filter-bar { gap: 14px; padding: 15px 32px 22px; }
.schedule-filter-bar label { font-size: 12px; }
.schedule-filter-bar input,
.schedule-filter-bar select { min-height: 48px; font-size: 14px; }
.schedule-command-bar { min-height: 78px; gap: 22px; padding: 14px 32px; }
.schedule-command-copy > span:not(.badge) { font-size: 13.5px; }
.schedule-command-copy strong { font-size: 14.5px; }
.schedule-instant-confirm-note { font-size: 12.5px !important; }
.schedule-command-actions { gap: 11px; }
.schedule-command-actions .button,
.schedule-command-actions .icon-button { min-height: 48px; font-size: 13.5px; }
.schedule-table-modern thead th { height: 60px; padding: 0 17px; font-size: 13px; }
.schedule-table-modern tbody td { height: 80px; padding: 12px 17px; font-size: 14px; }
.schedule-employee-cell strong,
.schedule-person-cell strong { font-size: 14px; }
.schedule-employee-cell small,
.schedule-person-cell small,
.schedule-contact-cell small { font-size: 11.5px; }
.schedule-row-action { min-height: 43px; font-size: 13px; }
.schedule-time-input { min-height: 43px; font-size: 13px; }
.schedule-weekly-hours strong { font-size: 16.5px; }
.schedule-weekly-hours small { font-size: 10.5px; }
.schedule-settings-card { min-height: 110px; }

/* Dialogs and authentication retain the same premium scale */
.action-dialog__body { padding: 27px 28px 24px; }
.action-dialog h2 { font-size: 21px; }
.action-dialog__description { font-size: 14px; }
.action-dialog__target span { font-size: 11px; }
.action-dialog__target strong { font-size: 14px; }
.employee-dialog-head h2 { font-size: 23px; }
.employee-dialog-head p { font-size: 12.5px; }
.employee-dialog-form { gap: 17px; padding: 25px 28px 14px; }
.employee-dialog-form input,
.employee-dialog-form select { min-height: 47px; }
.auth-card { padding: 38px; }
.auth-card h1 { font-size: 27px; }
.auth-card p { font-size: 14px; }
.auth-card label { font-size: 13px; }
.auth-card input { min-height: 48px; font-size: 14px; }
.auth-card .button { min-height: 48px; font-size: 14px; }

@media (max-width: 1680px) {
  :root { --workspace-page-gutter: 24px; }
  .app-shell { grid-template-columns: 232px minmax(0, 1fr); }
  .sidebar .brand-full-logo { width: 168px; }
  .content,
  .content.content--schedule { width: calc(100% - 36px); }
  .overview-metrics { gap: 14px; }
  .schedule-status-summary { grid-template-columns: repeat(6, minmax(105px, 1fr)) !important; }
  .schedule-filter-bar { grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, 1fr)); }
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 218px minmax(0, 1fr); }
  .nav button { font-size: 13px; }
  .overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-lower { grid-template-columns: 1fr; }
  .site-card-grid,
  .group-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body { font-size: 13.5px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { padding: 13px; }
  .topbar { min-height: 64px; padding: 0 16px; }
  .content,
  .content.content--schedule { width: 100%; padding: 25px 16px 50px; }
  .premium-title-row,
  .content--schedule .premium-title-row { margin-bottom: 21px; padding-bottom: 18px; }
  .premium-title-row h1,
  .content--schedule .premium-title-row h1 { font-size: 28px; }
  .premium-title-row p,
  .content--schedule .premium-title-row p { font-size: 12.5px; }
  .card { padding: 21px; }
  .overview-hero,
  .platform-hero { min-height: 190px; padding: 27px 23px 21px; }
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-metric { min-height: 102px; }
  .schedule-workspace-card { padding: 0; }
  .schedule-workspace-card .schedule-page-heading { padding: 23px 20px; }
  .schedule-page-heading h2 { font-size: 23px; }
  .schedule-page-heading p { font-size: 12.5px; }
  .schedule-status-summary { padding: 15px 18px 10px; }
  .schedule-filter-bar { padding: 11px 18px 16px; }
  .schedule-command-bar { padding: 13px 18px; }
}

@media (max-width: 590px) {
  :root { --workspace-section-gap: 17px; }
  body { font-size: 13px; }
  .content,
  .content.content--schedule { padding: 19px 12px 38px; }
  .premium-title-row h1,
  .content--schedule .premium-title-row h1 { font-size: 25px; }
  .premium-title-row p,
  .content--schedule .premium-title-row p { font-size: 11.5px; }
  .card { border-radius: 17px; padding: 17px; }
  .section-heading h2,
  .premium-section-heading h2 { font-size: 16.5px; }
  label { font-size: 12px; }
  input,
  select,
  textarea { min-height: 45px; font-size: 13.5px; }
  .button { min-height: 43px; font-size: 12.5px; }
  .overview-hero,
  .platform-hero { min-height: 172px; border-radius: 18px; padding: 23px 18px 18px; }
  .overview-hero h1,
  .platform-hero h1 { font-size: 24px; }
  .overview-metrics { grid-template-columns: 1fr; }
  .overview-metric { min-height: 94px; }
  .flow-grid { grid-template-columns: 1fr; }
  .flow-step:not(:last-child)::after { display: none; }
  .ring-grid { grid-template-columns: 1fr; }
  .ring-panel + .ring-panel { border-top: 1px solid #edf2f6; border-left: 0; }
  .people-summary { grid-template-columns: 1fr; }
  .site-card-grid,
  .group-card-grid { grid-template-columns: 1fr; }
  .schedule-workspace-card { padding: 0; }
  .schedule-status-summary > span { min-height: 52px; font-size: 10.5px; }
  .schedule-status-summary b { font-size: 21px; }
  .auth-card { padding: 29px 24px; }
}

/* v62 reference layout refinement and dashboard compatibility fix */
.content,
.content.content--schedule {
  width: min(1500px, calc(100% - 46px));
  padding: 30px 34px 60px;
}
.premium-title-row {
  align-items: flex-end;
  margin-bottom: 22px;
  padding-bottom: 8px;
}
.premium-title-row h1 { font-size: 40px; letter-spacing: -.035em; }
.premium-title-row p { font-size: 14px; color: #7d93a7; }
.page-toolbar-inline,
.title-actions,
.employee-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.toolbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid #d8e8f5;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  color: #57738e;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(20, 72, 115, .06);
}
.toolbar-chip input[type="date"] {
  border: 0;
  background: transparent;
  color: #223f5b;
  font: inherit;
  padding: 0;
}
.toolbar-chip--active {
  border-color: #8bd0fb;
  background: linear-gradient(135deg, #ecf9ff, #f7fcff);
  color: #1994e8;
}
.toolbar-chip--date { color: #234764; }
.dashboard-showcase-metrics,
.employee-metric-grid,
.attendance-insight-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 20px;
}
.dashboard-showcase-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.employee-metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.attendance-insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-showcase-grid,
.attendance-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}
.dashboard-analytics-card,
.employee-list-card,
.compact-setting-card,
#attendance-records-card {
  border-radius: 20px;
  border: 1px solid #dfeaf4;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(251,253,255,.98) 100%);
  box-shadow: 0 18px 40px rgba(19, 65, 103, .06);
}
.dashboard-analytics-card .section-heading,
.employee-list-card .section-heading,
#attendance-records-card .section-heading,
.compact-setting-card .section-heading {
  margin-bottom: 18px;
}
.section-kicker,
.title-kicker { letter-spacing: .14em; }
.section-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  background: #f2f8fd;
  color: #3a88c3;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
}
.employee-records-layout.employee-management-stack,
.workforce-page-stack { gap: 18px; }
.employee-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.employee-cell > div {
  display: grid;
  gap: 2px;
}
.employee-cell small {
  color: #7f95a8;
  font-size: 11px;
  font-weight: 600;
}
.table-wrap,
.premium-table-wrap {
  border: 1px solid #ebf1f7;
  border-radius: 16px;
  background: #fff;
}
table thead th {
  height: 52px;
  background: #f8fbfe;
  color: #5e7a94;
  font-size: 12.5px;
  font-weight: 800;
}
table tbody td {
  font-size: 13px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.overview-metric {
  min-height: 110px;
  border-radius: 18px;
  padding: 16px 16px 14px;
}
.overview-metric span { font-size: 12px; }
.overview-metric b { font-size: 31px; }
.overview-metric small { font-size: 11px; }
.metric-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; }
.ring-panel {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.legend-row {
  min-height: 42px;
  border-radius: 12px;
  background: #fbfdff;
  padding: 0 14px;
}
.legend-row b { font-size: 18px; }
.card {
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(18, 65, 102, .055);
}
.button,
.button.secondary,
.button.danger {
  min-height: 40px;
  border-radius: 12px;
  padding: 0 15px;
  font-size: 12.5px;
  font-weight: 800;
}
.compact-setting-card {
  padding: 22px;
}
.compact-setting-main h2,
.section-heading h2,
.settings-dialog-head h2 {
  font-size: 24px;
  letter-spacing: -.025em;
}
.compact-setting-main p,
.section-heading p { font-size: 12.5px; color: #8095a8; }
.badge { font-size: 11px; }

@media (max-width: 1320px) {
  .dashboard-showcase-metrics,
  .employee-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .dashboard-showcase-grid,
  .attendance-card-grid,
  .ring-panel { grid-template-columns: 1fr; }
  .dashboard-showcase-metrics,
  .employee-metric-grid,
  .attendance-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content,
  .content.content--schedule { width: calc(100% - 28px); padding: 24px 18px 48px; }
}
@media (max-width: 720px) {
  .premium-title-row h1 { font-size: 31px; }
  .dashboard-showcase-metrics,
  .employee-metric-grid,
  .attendance-insight-grid { grid-template-columns: 1fr; }
}
.dashboard-site-scope {
  max-width: 280px;
  gap: 10px;
}
.dashboard-site-scope > span {
  color: #7890a5;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.dashboard-site-scope .hero-site-name {
  overflow: hidden;
  color: #204563;
  font-size: 11.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v63 usability pass: concise introductions, visible data links, and stable analytics layout */
.dashboard-analytics-card .ring-grid {
  grid-template-columns: minmax(0, 1fr);
}
.dashboard-analytics-card .ring-panel {
  width: 100%;
  grid-template-columns: minmax(170px, 230px) minmax(220px, 1fr);
  gap: 28px;
  padding: 12px 20px 18px;
}
.dashboard-analytics-card .ring {
  justify-self: center;
}
.dashboard-analytics-card .legend {
  width: 100%;
  min-width: 0;
}
.dashboard-analytics-card .legend-row {
  grid-template-columns: 8px minmax(120px, 1fr) auto;
  white-space: nowrap;
}
.dashboard-analytics-card .legend-row span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-link,
.table-drill-link,
.settings-summary-link,
.permission-summary a,
.permission-summary button {
  cursor: pointer;
}
.overview-metric.dashboard-link,
.legend-link,
.table-drill-link,
.settings-summary-link,
.permission-summary a,
.permission-summary button {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.overview-metric.dashboard-link:hover,
.settings-summary-link:hover,
.permission-summary a:hover,
.permission-summary button:hover {
  border-color: #91d0f5;
  box-shadow: 0 16px 32px rgba(29, 131, 195, .11);
  transform: translateY(-2px);
}
.settings-summary-grid .settings-summary-link {
  display: grid;
  min-height: 92px;
  align-content: center;
  gap: 5px;
  border: 1px solid #e3edf5;
  border-radius: 15px;
  background: #fff;
  color: inherit;
  padding: 17px;
  text-align: left;
  text-decoration: none;
}
.settings-summary-link span {
  color: #8297aa;
  font-size: 11px;
  font-weight: 750;
}
.settings-summary-link strong {
  overflow: hidden;
  color: #20405d;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-summary-link i {
  color: #279ee7;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.permission-summary > a,
.permission-summary > button {
  display: grid;
  min-height: 82px;
  align-content: center;
  gap: 5px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: inherit;
  padding: 16px 19px;
  text-align: left;
  text-decoration: none;
}
.permission-summary > a:last-child,
.permission-summary > button:last-child { border-right: 0; }
.permission-summary i {
  color: #269de6;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
#permission-editor { min-width: 0; }
.schedule-status-summary > button,
.schedule-status-summary > span {
  display: grid;
  min-height: 72px;
  align-content: center;
  justify-items: start;
  gap: 5px;
  border: 1px solid #e2edf5;
  border-radius: 14px;
  background: #f8fbfd;
  color: #637c92;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 750;
  text-align: left;
}
.schedule-status-summary > button:hover {
  border-color: #96d0f2;
  box-shadow: 0 10px 22px rgba(30, 132, 194, .09);
  transform: translateY(-1px);
}
.schedule-status-summary > button b,
.schedule-status-summary > span b { font-size: 28px; }
.table-drill-link {
  border-radius: 8px;
  padding: 6px 8px;
}
.table-drill-link:hover {
  background: #eef9ff;
  color: #1689d2;
}
.section-heading p,
.compact-setting-main p,
.premium-title-row p {
  max-width: 760px;
  line-height: 1.65;
}

@media (max-width: 880px) {
  .dashboard-analytics-card .ring-panel {
    grid-template-columns: 1fr;
  }
  .dashboard-analytics-card .legend-row {
    grid-template-columns: 8px minmax(0, 1fr) auto;
  }
}

/* v63 — concise, linked, practical data workspace */
.dashboard-analytics-card .ring-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
.dashboard-analytics-card .ring-panel {
  grid-template-columns: minmax(170px, 220px) minmax(230px, 1fr);
  width: 100%;
  min-height: 230px;
  gap: 28px;
  padding: 12px 18px 18px;
}
.dashboard-analytics-card .legend {
  width: 100%;
  min-width: 0;
}
.legend-row {
  grid-template-columns: 9px minmax(110px, 1fr) auto;
  gap: 11px;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
}
.legend-row > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-site-scope {
  appearance: none;
  cursor: pointer;
  text-align: left;
}
.dashboard-site-scope:hover,
.toolbar-chip.dashboard-link:hover {
  border-color: #95d2f7;
  background: #f1faff;
  transform: translateY(-1px);
}
.section-actions,
.site-card-actions,
.message-head,
.message-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.section-heading > div:first-child {
  min-width: 0;
}
.section-heading p {
  margin: 5px 0 0;
  line-height: 1.55;
}
.data-entry-button,
.section-data-link {
  cursor: pointer;
}
.data-entry-button span,
.section-data-link span {
  transition: transform .18s ease;
}
.data-entry-button:hover span,
.section-data-link:hover span {
  transform: translate(2px, -2px);
}
.section-data-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #188bd5;
  padding: 3px 0;
  font-size: 11.5px;
  font-weight: 800;
}
.table-number-link,
.table-status-link,
.table-hours-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.table-number-link {
  min-width: 34px;
  min-height: 30px;
  border-radius: 9px;
  color: #187ec2;
  font-weight: 850;
}
.table-number-link:hover,
.table-status-link:hover,
.table-hours-link:hover,
.table-drill-link:hover {
  background: #edf8ff;
  color: #087ac5;
}
.table-hours-link {
  border-radius: 10px;
  padding: 4px 7px;
  color: #176fa7;
  font-weight: 800;
}
.table-status-link {
  border-radius: 999px;
}
.overview-metric.dashboard-link,
.legend-link,
.settings-summary-link,
.permission-summary a,
.permission-summary button {
  position: relative;
}
.overview-metric.dashboard-link::after,
.settings-summary-link::after {
  position: absolute;
  top: 13px;
  right: 13px;
  color: #a1bdd1;
  content: "↗";
  font-size: 13px;
  font-weight: 900;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: .18s ease;
}
.overview-metric.dashboard-link:hover::after,
.settings-summary-link:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}
.overview-metric.dashboard-link:hover,
.site-card:hover,
.message:hover,
.settings-summary-link:hover {
  border-color: #b9def5;
  box-shadow: 0 18px 38px rgba(22, 106, 165, .12);
  transform: translateY(-2px);
}
.organization-metric-grid,
.message-metric-grid,
.payroll-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.message-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-card {
  min-height: 126px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.site-card-actions {
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.button.compact {
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
}
.page-section-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  border: 1px solid #dcebf6;
  border-radius: 15px;
  background: rgba(255, 255, 255, .84);
  padding: 8px;
  box-shadow: 0 10px 26px rgba(20, 72, 108, .045);
  backdrop-filter: blur(10px);
}
.page-section-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border-radius: 10px;
  color: #55758f;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: .18s ease;
}
.page-section-link:hover {
  background: #edf8ff;
  color: #1689d4;
}
.message {
  border: 1px solid #e4edf5;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  padding: 17px 18px;
  box-shadow: 0 9px 23px rgba(18, 64, 98, .045);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.message-head {
  justify-content: space-between;
}
.message-foot {
  justify-content: space-between;
  border-top: 1px solid #edf3f7;
  margin-top: 12px;
  padding-top: 11px;
}
.message p {
  color: #526f88;
  line-height: 1.75;
}
.schedule-status-summary button {
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.schedule-status-summary button:hover {
  border-color: #9dd5f5;
  background: #f0faff;
  transform: translateY(-1px);
}
.permission-summary a,
.permission-summary button {
  transition: background .18s ease, transform .18s ease;
}
.permission-summary a:hover,
.permission-summary button:hover {
  background: #f2faff;
  transform: translateY(-1px);
}
.settings-summary-link,
.site-card,
.message,
.overview-metric.dashboard-link {
  will-change: transform;
}
.employee-list-card .section-heading,
#attendance-records-card .section-heading,
#payroll-preview-card .section-heading {
  border-bottom: 1px solid #edf3f7;
  padding-bottom: 16px;
}
.payroll-metric-grid .overview-metric b,
.organization-metric-grid .overview-metric b {
  font-size: 25px;
  word-break: break-word;
}
#attendance-review-card,
#attendance-weekly-card,
#attendance-import-card,
#payroll-rate-card,
#payroll-preview-card,
#message-compose-card,
#message-records-card {
  scroll-margin-top: 88px;
}
.dashboard-link-hint {
  opacity: .72;
}
.overview-metric.dashboard-link:hover .dashboard-link-hint {
  opacity: 1;
}

@media (max-width: 1350px) {
  .organization-metric-grid,
  .payroll-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .message-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .dashboard-analytics-card .ring-panel {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .dashboard-analytics-card .legend { width: min(100%, 520px); }
  .organization-metric-grid,
  .payroll-metric-grid,
  .message-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .organization-metric-grid,
  .payroll-metric-grid,
  .message-metric-grid { grid-template-columns: 1fr; }
  .section-actions,
  .site-card-actions { align-items: stretch; justify-content: flex-start; }
  .page-section-nav { overflow-x: auto; flex-wrap: nowrap; }
  .page-section-link { flex: 0 0 auto; }
  .legend-row { grid-template-columns: 9px minmax(90px, 1fr) auto; }
}

/* v63 final polish */
html { scroll-behavior: smooth; }
button.toolbar-chip {
  font: inherit;
  cursor: pointer;
}
.title-actions .data-entry-button,
.section-actions .data-entry-button {
  box-shadow: 0 8px 20px rgba(28, 117, 180, .07);
}
.permission-summary > a,
.permission-summary > button {
  min-width: 0;
}
.permission-summary > a strong,
.permission-summary > button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 590px) {
  .permission-summary > a,
  .permission-summary > button {
    min-height: 68px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .permission-summary > a:last-child,
  .permission-summary > button:last-child { border-bottom: 0; }
}

/* v63 related-data shortcut bar */
.page-shortcut-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -7px 0 20px;
  border: 1px solid #dcebf6;
  border-radius: 15px;
  background: rgba(255, 255, 255, .82);
  padding: 8px 10px;
  box-shadow: 0 10px 26px rgba(20, 72, 108, .045);
  backdrop-filter: blur(10px);
}
.page-shortcut-bar > span {
  color: #7d95aa;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .06em;
}
.page-shortcut-link {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #54738d;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.page-shortcut-link:hover {
  border-color: #c8e7fa;
  background: #edf8ff;
  color: #1488d4;
  transform: translateY(-1px);
}
@media (max-width: 700px) {
  .page-shortcut-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .page-shortcut-bar > span,
  .page-shortcut-link { flex: 0 0 auto; }
}

/* v65: concise employee registration form and role-scoped site display */
.auth-registration-note {
  display: grid;
  gap: 6px;
  margin: -2px 0 18px;
  border: 1px solid #cfe5f6;
  border-radius: 14px;
  background: linear-gradient(135deg, #f2f9ff 0%, #fbfdff 100%);
  padding: 14px 16px;
  color: #55738e;
  line-height: 1.65;
}
.auth-registration-note strong {
  color: #173b5b;
  font-size: 13px;
}
.auth-registration-note span {
  font-size: 11.5px;
}

.dashboard-group-row > td {
  vertical-align: middle;
}
.group-expand-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #173650;
  text-align: left;
  cursor: pointer;
}
.group-expand-button:hover .group-expand-copy strong {
  color: #1188d6;
}
.group-expand-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.group-expand-copy strong {
  color: #173650;
  font-size: 14px;
  line-height: 1.35;
}
.group-expand-copy strong span[data-no-i18n],
.group-expand-copy strong {
  font-weight: 700;
}
.group-expand-copy small {
  color: #89a0b3;
  font-size: 11px;
  line-height: 1.45;
}
.group-expand-chevron {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #edf6ff;
  color: #1188d6;
  font-size: 15px;
  transform: rotate(-90deg);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.dashboard-group-row.is-expanded .group-expand-chevron {
  transform: rotate(0deg);
  background: #dff0ff;
  color: #0d7bc5;
}
.dashboard-group-detail-row > td {
  padding: 0;
  border-top: 0;
  background: #fbfdff;
}
.group-detail-panel {
  padding: 16px 18px 18px;
  border-top: 1px solid #e6eef6;
  background: linear-gradient(180deg, rgba(243,249,255,.96) 0%, rgba(255,255,255,.98) 100%);
}
.group-detail-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.group-detail-summary,
.group-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.group-detail-table-wrap {
  border: 1px solid #e7eef6;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
}
.group-detail-table {
  min-width: 880px;
}
.group-detail-table th,
.group-detail-table td {
  white-space: nowrap;
}
.group-detail-employee {
  display: grid;
  gap: 3px;
}
.group-detail-employee strong {
  color: #173650;
  font-size: 13px;
}
.group-detail-employee small {
  color: #91a4b6;
  font-size: 11px;
}
@media (max-width: 900px) {
  .group-detail-toolbar {
    flex-direction: column;
  }
}


.dashboard-shift-panels {
  display: grid;
  gap: 16px;
}
.dashboard-shift-panel {
  border: 1px solid #e6edf5;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  overflow: hidden;
}
.shift-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf2f7;
  background: #fcfdff;
}
.shift-panel-title,
.shift-panel-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shift-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #183551;
  padding: 0;
  cursor: default;
}
.shift-panel-toggle strong {
  font-size: 14px;
}
.shift-panel-toggle small,
.shift-panel-summary span {
  color: #8397aa;
  font-size: 12px;
}
.group-shift-table-wrap {
  background: #fff;
}
.group-shift-table {
  width: 100%;
  min-width: 1080px;
}
.group-shift-table th,
.group-shift-table td {
  white-space: nowrap;
  vertical-align: middle;
}
.group-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #173650;
  padding: 0;
  cursor: pointer;
}
.group-inline-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #1ca0f2;
  box-shadow: 0 0 0 3px rgba(28,160,242,.12);
}
.group-inline-toggle strong {
  font-size: 13px;
  font-weight: 700;
}
.summary-number.good { color: #129a67; font-weight: 700; }
.summary-number.bad { color: #ef5c63; font-weight: 700; }
.summary-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff5ea;
  color: #d5832f;
  font-size: 11px;
  font-weight: 600;
}
.shift-summary-row.is-expanded {
  background: rgba(28,160,242,.03);
}
.dashboard-group-detail-row > td {
  border-top: 0;
}

/* =====================================================================
   v68 — Self-owned QIDIAN theme parity
   Source palette: primary #2BA9DE, warning #E56F16, success #0E9277,
   danger #F65555, page #F3F8FB, text #1F2B3D, border #E2EDF3.
   ===================================================================== */
:root {
  --primary-color: #2ba9de;
  --primary-hover: #199aca;
  --primary-soft: #eaf8fd;
  --danger-color: #f65555;
  --warning-color: #e56f16;
  --success-color: #0e9277;
  --background-color: #f3f8fb;
  --card-color: #ffffff;
  --text-color: #1f2b3d;
  --gray-color: #6f7d90;
  --border-color: #e2edf3;
  --card-radius: 18px;
  --control-radius: 10px;
  --card-shadow: 0 10px 32px rgba(31, 83, 111, .07);
  --navy: #1f2b3d;
  --navy-2: #334257;
  --blue: var(--primary-color);
  --cyan: #35b3e4;
  --pale-blue: var(--primary-soft);
  --surface: var(--card-color);
  --bg: var(--background-color);
  --line: var(--border-color);
  --text: var(--text-color);
  --muted: var(--gray-color);
  --good: var(--success-color);
  --warn: var(--warning-color);
  --bad: var(--danger-color);
  --purple: var(--primary-color);
  --shadow: var(--card-shadow);
  color: var(--text-color);
  background: var(--background-color);
  font-family: Inter, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

html { background: var(--background-color); }
body {
  background:
    radial-gradient(circle at 92% 0%, rgba(43, 169, 222, .08), transparent 30%),
    var(--background-color);
  color: var(--text-color);
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: rgba(43, 169, 222, .22);
}

/* Authentication and public client surfaces */
.auth-shell {
  background:
    radial-gradient(circle at 12% 12%, rgba(43, 169, 222, .16), transparent 31%),
    radial-gradient(circle at 88% 88%, rgba(43, 169, 222, .10), transparent 34%),
    linear-gradient(145deg, #f5fbfe 0%, #edf7fb 52%, #f8fbfd 100%);
}
.auth-card {
  border-color: rgba(218, 233, 241, .94);
  border-radius: 26px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 28px 72px rgba(38, 87, 113, .14), 0 3px 12px rgba(38, 87, 113, .05);
}
.auth-card h1 { color: var(--text-color); }
input,
select,
textarea {
  border-color: #d8e5ec;
  border-radius: var(--control-radius);
  background: #fff;
  color: #253044;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(43, 169, 222, .12);
}
.button {
  border-radius: 10px;
  background: linear-gradient(105deg, var(--primary-color) 0%, #34b2e2 100%);
  box-shadow: 0 9px 20px rgba(43, 169, 222, .20);
}
.button:hover { background: linear-gradient(105deg, var(--primary-hover), #2ba9de); filter: none; }
.button.secondary {
  border-color: #cceaf5;
  background: #fff;
  color: #168dbd;
}
.button.secondary:hover { border-color: #8fd2e9; background: #f0f9fd; color: #168dbd; }
.button.danger { background: var(--danger-color); color: #fff; }
.button.danger:hover { background: #e84747; }
.helper.error,
.notice.error { color: #d94343; }
.notice {
  border-color: #c7eaf7;
  background: #eef9fd;
  color: #168dbd;
}
.notice.error { border-color: #ffd4d4; background: #fff3f3; }

/* Desktop shell — exactly follows the self-owned system's white navigation. */
.app-shell {
  grid-template-columns: 228px minmax(0, 1fr);
  background:
    radial-gradient(circle at 100% 0%, rgba(43, 169, 222, .08), transparent 29%),
    var(--background-color);
}
.sidebar {
  width: 228px;
  padding: 0 14px 18px;
  border-right: 1px solid #e3edf2;
  background: #fff;
  box-shadow: 8px 0 28px rgba(35, 76, 100, .035);
  color: var(--text-color);
}
.sidebar .brand {
  min-height: 96px;
  margin: 0 -14px;
  padding: 12px 18px;
  justify-content: center;
  border-bottom: 1px solid #eef3f6;
}
.sidebar .brand-full-logo { width: 182px; }
.company-switch,
.sidebar-scope {
  margin: 14px 0 10px;
  border: 1px solid #dce9ef;
  border-radius: 12px;
  background: #f7fbfd;
  color: #334257;
  box-shadow: none;
}
.sidebar-scope { margin-top: 0; }
.company-switch label,
.sidebar-scope span {
  color: #718094;
  font-size: 10px;
  letter-spacing: .02em;
}
.company-switch strong,
.sidebar-scope strong,
.company-switch select {
  color: #263247;
  font-size: 12px;
  font-weight: 750;
}
.company-switch select { background: transparent; }
.sidebar-section-label {
  margin: 9px 9px 7px;
  color: #93a0ae;
  font-size: 10px;
  letter-spacing: .08em;
}
.nav { gap: 7px; }
.nav button {
  min-height: 47px;
  padding: 0 15px;
  gap: 13px;
  border-radius: 12px;
  color: #4f5e72;
  font-size: 15px;
  font-weight: 650;
}
.nav button:hover {
  transform: translateX(1px);
  border-color: transparent;
  background: #f0f9fd;
  color: #168dbd;
}
.nav button.active {
  border-color: transparent;
  background: linear-gradient(100deg, #2ba9de 0%, #35b3e4 100%);
  color: #fff;
  box-shadow: 0 9px 20px rgba(43, 169, 222, .23);
}
.nav-icon { color: currentColor; }
.sidebar-footer {
  margin-top: auto;
  padding: 16px 0 4px;
  border-top: 1px solid #eef3f6;
}
.account-summary {
  color: #718094;
  font-size: 10.5px;
}
.account-summary strong { color: #263247; }
.account-summary .avatar,
.avatar,
.header-avatar {
  background: var(--primary-color);
  box-shadow: 0 5px 12px rgba(43, 169, 222, .22);
  color: #fff;
}
.sidebar-footer > .button.danger {
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: #697588;
}
.sidebar-footer > .button.danger:hover {
  border-color: #ffd6d9;
  background: #fff1f1;
  color: #e44747;
}

.main { min-width: 0; }
.topbar {
  min-height: 68px;
  padding: 0 30px;
  border-bottom: 0;
  background: rgba(243, 248, 251, .88);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
.eyebrow { color: var(--primary-color); }
.eyebrow::before { background: var(--primary-color); box-shadow: 0 0 0 3px rgba(43, 169, 222, .12); }
.page-context strong { color: #263247; }
.top-control,
.language-picker,
.icon-button,
.management-profile-button,
.profile-mini {
  border-color: #dcebf1;
  background: rgba(255, 255, 255, .92);
  color: #526976;
  box-shadow: 0 6px 18px rgba(31, 83, 111, .055);
}
.icon-button:hover,
.management-profile-button:hover,
.management-profile-wrap:has(.management-profile-menu.is-open) .management-profile-button {
  border-color: #a9dceb;
  background: #f5fbfd;
  color: #168dbd;
}
.management-profile-menu,
.worker-profile-menu {
  border-color: #dcebf1;
  background: #fff;
  box-shadow: 0 18px 48px rgba(25, 59, 79, .15);
}
.management-profile-menu button:hover,
.worker-profile-menu button:hover { background: #f0f9fd; color: #168dbd; }
.management-profile-logout:hover,
.worker-profile-menu button.is-danger:hover { background: #fff1f2; color: #d94b55; }
.content,
.content.content--schedule {
  width: min(1680px, 100%);
  margin: 0 auto;
  padding: 30px 30px 48px;
}

/* Shared cards and page hierarchy */
.title-row,
.premium-title-row { margin-bottom: 20px; }
.title-row h1,
.premium-title-row h1 { color: var(--text-color); }
.title-row p,
.premium-title-row p { color: #7b879b; }
.title-kicker,
.section-kicker { color: var(--primary-color); }
.card,
.overview-metric,
.dashboard-shift-panel,
.settings-summary-link,
.site-card,
.message,
.permission-summary {
  border-color: var(--border-color);
  background: var(--card-color);
  box-shadow: var(--card-shadow);
}
.card { border-radius: var(--card-radius); }
.overview-metric {
  min-height: 98px;
  border-radius: 16px;
  padding: 17px 18px;
}
.overview-metric.dashboard-link:hover,
.settings-summary-link:hover,
.permission-summary a:hover,
.permission-summary button:hover,
.site-card:hover,
.message:hover {
  border-color: var(--primary-color);
  box-shadow: 0 12px 34px rgba(26, 73, 102, .11);
  transform: translateY(-2px);
}
.metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary-color);
  font-size: 18px;
}
.metric-icon.orange { background: #fff6ea; color: var(--warning-color); }
.metric-icon.green { background: #e7f7f2; color: var(--success-color); }
.metric-icon.red { background: #fff0f0; color: var(--danger-color); }
.metric-icon.purple { background: var(--primary-soft); color: var(--primary-color); }
.overview-metric span { color: #6c788c; }
.overview-metric b,
.metric,
.section-heading h2,
.premium-section-heading h2,
.compact-setting-main h2 { color: var(--text-color); }
.overview-metric small,
.section-heading p,
.premium-section-heading p { color: #7b879b; }
.section-pill {
  border: 1px solid #cceaf5;
  background: var(--primary-soft);
  color: #168dbd;
}
.page-shortcut-bar,
.page-section-nav,
.dashboard-filter-bar {
  border-color: #dce9ef;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(31, 83, 111, .05);
}
.page-shortcut-link:hover,
.page-section-link:hover,
.table-drill-link:hover,
.table-number-link:hover,
.table-status-link:hover,
.table-hours-link:hover {
  background: #f0f9fd;
  color: #168dbd;
}

/* Dashboard charts use the same chart geometry and colors as the self-owned system. */
.dashboard-showcase-grid { gap: 18px; }
.dashboard-analytics-card { min-height: 360px; }
.dashboard-analytics-card .ring-panel {
  min-height: 286px;
  grid-template-columns: minmax(244px, 290px) minmax(220px, 1fr);
  gap: 30px;
  padding: 12px 24px 22px;
}
.dashboard-analytics-card .ring {
  width: 224px;
  height: 224px;
  background: conic-gradient(var(--ring-color) calc(var(--progress) * 1%), #e7edf5 0);
}
.dashboard-analytics-card .ring::before {
  width: 156px;
  height: 156px;
  background: #fff;
}
.dashboard-analytics-card .ring-content span { color: #7b879b; font-size: 12px; }
.dashboard-analytics-card .ring-content b { color: var(--text-color); font-size: 34px; }
.dashboard-analytics-card .ring-content small { color: #8c9aaa; font-size: 11px; }
.legend { gap: 0; }
.legend-row {
  min-height: 48px;
  border-bottom: 1px solid #edf2f6;
  border-radius: 0;
  background: transparent;
  color: #526976;
  padding: 0 4px;
  font-size: 12.5px;
}
.legend-row:last-child { border-bottom: 0; }
.legend-row b { color: var(--text-color); font-size: 15px; }
.legend-dot { width: 8px; height: 8px; background: var(--primary-color); }
.legend-dot.orange { background: var(--warning-color); }
.legend-dot.red { background: var(--danger-color); }
.legend-dot.blue { background: #9caabc; }

/* Tables, badges, and operational states */
.table-wrap,
.premium-table-wrap,
.group-shift-table-wrap,
.group-detail-table-wrap {
  border-color: #e5edf1;
  background: #fff;
}
table { color: #20313d; }
th {
  color: #536a77;
  background: #f5fafc;
}
td { color: #3e5968; }
tbody tr:hover { background: #f8fbfd; }
.badge {
  background: var(--primary-soft);
  color: #168dbd;
}
.badge.good { background: #e7f7f2; color: var(--success-color); }
.badge.warn { background: #fff7ea; color: var(--warning-color); }
.badge.bad { background: #fff0f0; color: var(--danger-color); }
.badge.muted { background: #f1f5f8; color: #6f7d90; }
.table-number-link,
.table-hours-link,
.table-status-link { color: #168dbd; }
.summary-number.good { color: var(--success-color); }
.summary-number.bad { color: var(--danger-color); }
.summary-mini {
  background: #fff7ea;
  color: var(--warning-color);
}
.dashboard-shift-panel { border-radius: 16px; }
.shift-panel-header { border-color: #e5edf1; background: #fbfdfe; }
.group-inline-dot { background: var(--primary-color); box-shadow: 0 0 0 3px rgba(43, 169, 222, .12); }
.group-detail-panel {
  border-color: #e2edf3;
  background: linear-gradient(180deg, #f7fbfd 0%, #fff 100%);
}
.group-detail-table-wrap { border-radius: 14px; }
.schedule-row-action.work,
.schedule-bulk-work { color: #168dbd; background: var(--primary-soft); }
.schedule-row-action.rest,
.schedule-bulk-rest { color: var(--danger-color); background: #fff0f0; }

/* Secondary enterprise pages */
.overview-hero,
.platform-hero {
  border: 1px solid var(--border-color);
  background: #fff;
  box-shadow: var(--card-shadow);
  color: var(--text-color);
}
.overview-hero h1,
.platform-hero h1 { color: var(--text-color); }
.overview-hero p,
.platform-hero p { color: var(--gray-color); }
.hero-kicker { color: var(--primary-color); }
.overview-hero::after,
.platform-hero::after {
  border-color: rgba(43, 169, 222, .10);
  box-shadow: 0 0 0 34px rgba(43, 169, 222, .045);
}
.hero-stats div { border-color: var(--border-color); }
.hero-stats span { color: var(--gray-color); }
.hero-stats b { color: var(--text-color); }
.sync-status { border-color: #c7eaf7; background: #eef9fd; color: #168dbd; }
.sync-status::before { background: var(--success-color); }
.permission-option.selected,
.permission-member.active,
.schedule-status-summary > button:hover {
  border-color: var(--primary-color);
  background: #f0f9fd;
}

/* Worker portal uses the same white drawer and cyan active navigation. */
.worker-portal {
  background:
    radial-gradient(circle at 92% 0%, rgba(43, 169, 222, .08), transparent 30%),
    var(--background-color);
}
.worker-drawer {
  border-right-color: #e3edf2;
  background: #fff;
  box-shadow: 18px 0 48px rgba(25, 59, 79, .16);
}
.worker-drawer nav button {
  min-height: 47px;
  border-radius: 12px;
  color: #4f5e72;
  font-size: 14px;
}
.worker-drawer nav button:hover { border-color: transparent; background: #f0f9fd; color: #168dbd; }
.worker-drawer nav button.active,
.worker-drawer nav button[data-worker-enter-management] {
  border-color: transparent;
  background: linear-gradient(100deg, #2ba9de 0%, #35b3e4 100%);
  color: #fff;
  box-shadow: 0 9px 20px rgba(43, 169, 222, .22);
}
.worker-card-main,
.worker-profile-card,
.worker-account-card {
  border-color: var(--border-color);
  background: #fff;
  box-shadow: var(--card-shadow);
}
.worker-status-card {
  border-color: #c7eaf7;
  background: #eef9fd;
  color: #168dbd;
}
.worker-status-card.ready,
.worker-status-card.work { border-color: #c5e9df; background: #e7f7f2; color: var(--success-color); }
.worker-status-card.leave,
.worker-status-card.rest { border-color: #ffd7d7; background: #fff0f0; color: var(--danger-color); }
.worker-status-card.waiting { border-color: #c7eaf7; background: var(--primary-soft); color: #168dbd; }
.worker-menu-toggle,
.worker-avatar-button,
.worker-language-float .language-picker {
  border-color: #cceaf5;
  background: rgba(255, 255, 255, .96);
  color: #168dbd;
  box-shadow: 0 8px 22px rgba(35, 92, 119, .13);
}

@media (max-width: 1120px) {
  .dashboard-analytics-card .ring-panel {
    grid-template-columns: minmax(220px, 250px) minmax(190px, 1fr);
  }
}
@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 10px 12px 12px;
    border-right: 0;
    border-bottom: 1px solid #e3edf2;
    background: #fff;
    box-shadow: 0 8px 24px rgba(35, 76, 100, .04);
  }
  .sidebar .brand {
    min-height: 54px;
    margin: 0;
    padding: 0 4px 10px;
    justify-content: flex-start;
    border-bottom: 0;
  }
  .sidebar .brand-full-logo { width: 150px; }
  .nav { display: flex; gap: 7px; overflow-x: auto; }
  .nav button { width: auto; min-height: 40px; flex: 0 0 auto; padding: 0 13px; font-size: 13px; }
  .topbar { min-height: 62px; padding: 0 16px; background: rgba(243, 248, 251, .94); }
  .content,
  .content.content--schedule { width: 100%; padding: 22px 16px 42px; }
  .dashboard-analytics-card .ring-panel { grid-template-columns: 1fr; justify-items: center; }
  .dashboard-analytics-card .legend { width: 100%; }
}
@media (max-width: 590px) {
  .auth-card { border-radius: 22px; }
  .card { border-radius: 16px; }
  .dashboard-analytics-card { min-height: auto; }
  .dashboard-analytics-card .ring { width: 198px; height: 198px; }
  .dashboard-analytics-card .ring::before { width: 138px; height: 138px; }
  .dashboard-analytics-card .ring-panel { min-height: 0; padding: 8px 4px 16px; }
  .overview-metric { min-height: 92px; }
  .metric-icon { width: 40px; height: 40px; }
}

/* v70: remove the floating management profile menu, add deterministic avatar colors,
   and let day/night attendance blocks collapse without changing business logic. */
.sidebar-settings-label {
  margin-top: 14px;
}
.nav.nav-secondary {
  margin-bottom: 10px;
}
.nav.nav-secondary button {
  min-height: 42px;
}

.avatar-tone-0 { background: linear-gradient(135deg, #2ba9de, #168dbd) !important; color: #fff !important; }
.avatar-tone-1 { background: linear-gradient(135deg, #0e9277, #08735f) !important; color: #fff !important; }
.avatar-tone-2 { background: linear-gradient(135deg, #6e72d8, #565ab8) !important; color: #fff !important; }
.avatar-tone-3 { background: linear-gradient(135deg, #e56f16, #c75a0e) !important; color: #fff !important; }
.avatar-tone-4 { background: linear-gradient(135deg, #d65e9b, #b94780) !important; color: #fff !important; }
.avatar-tone-5 { background: linear-gradient(135deg, #2378c8, #185da1) !important; color: #fff !important; }
.avatar-tone-6 { background: linear-gradient(135deg, #29a89b, #18857a) !important; color: #fff !important; }
.avatar-tone-7 { background: linear-gradient(135deg, #7a8ca5, #596b84) !important; color: #fff !important; }
.avatar.avatar-tone-0,
.avatar.avatar-tone-1,
.avatar.avatar-tone-2,
.avatar.avatar-tone-3,
.avatar.avatar-tone-4,
.avatar.avatar-tone-5,
.avatar.avatar-tone-6,
.avatar.avatar-tone-7,
.employee-avatar-mini[class*="avatar-tone-"],
.permission-member-avatar[class*="avatar-tone-"],
.schedule-avatar[class*="avatar-tone-"] {
  border-color: rgba(255,255,255,.78) !important;
  box-shadow: 0 7px 16px rgba(31, 83, 111, .15);
}

.shift-panel-toggle {
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.shift-panel-toggle:hover strong {
  color: var(--primary-hover);
}
.shift-panel-chevron {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 900;
  transform: rotate(0deg);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.dashboard-shift-panel.is-collapsed .shift-panel-chevron {
  transform: rotate(-90deg);
}
.dashboard-shift-panel.is-collapsed .shift-panel-header {
  border-bottom-color: transparent;
}
.dashboard-shift-panel.is-collapsed .shift-panel-summary span {
  color: #6f7d90;
}
.group-shift-table-wrap[hidden] {
  display: none !important;
}


/* v70: remove only the left-top context block; keep right-side controls and account menu. */
.app-shell > .main > .topbar.topbar--actions-only {
  position: static !important;
  top: auto !important;
  z-index: 20;
}
.topbar.topbar--actions-only {
  justify-content: flex-end;
}
.topbar.topbar--actions-only .top-actions {
  margin-left: auto;
}
.worker-avatar-letter {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  color: #fff;
  font: inherit;
}
/* The sidebar footer is the only logout entry. */
.management-profile-menu .management-profile-logout {
  display: none !important;
}

/* v72: next-day registration opens only when today's shift starts. */
.worker-opening-time {
  border-top-color: rgba(43, 169, 222, .22);
  background: var(--primary-soft, #eaf8fd);
  border-radius: 12px;
  padding: 12px 14px;
}
.worker-opening-time span,
.worker-opening-time strong {
  color: var(--primary-hover, #199aca);
}

/* v74 customer plan catalog and compact enterprise profile */
.enterprise-profile-card--compact {
  min-height: 104px;
  display: flex;
  align-items: center;
}
.enterprise-profile-card--compact .premium-section-heading {
  width: 100%;
  margin-bottom: 0;
}
.billing-plan-grid--three,
.billing-config-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.billing-plan-grid--four,
.billing-config-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.billing-catalog-admin-card > .section-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid #edf3f7;
}
.billing-config-plan,
.customer-plan-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce9f3;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcfe 100%);
  box-shadow: 0 12px 32px rgba(31, 83, 111, .06);
}
.billing-config-plan::after,
.customer-plan-card::after {
  position: absolute;
  width: 150px;
  height: 150px;
  right: -82px;
  bottom: -94px;
  border-radius: 50%;
  background: rgba(43, 169, 222, .055);
  content: "";
  pointer-events: none;
}
.billing-config-plan.featured,
.customer-plan-card.featured {
  border-color: rgba(43, 169, 222, .52);
  box-shadow: 0 18px 42px rgba(43, 169, 222, .12);
}
.billing-config-plan--trial,
.customer-plan-card.trial {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
}
.billing-config-plan__top {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 72px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.billing-config-plan__top h3,
.customer-plan-card h3 {
  margin: 4px 0 0;
  color: #1f2b3d;
  font-size: 20px;
  letter-spacing: -.025em;
}
.billing-config-plan__top p {
  margin: 6px 0 0;
  color: #6f7d90;
  font-size: 12px;
}
.billing-plan-kicker {
  display: block;
  color: #2ba9de;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}
.billing-config-prices {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.billing-config-prices label,
.billing-limit-field {
  display: grid;
  gap: 7px;
  color: #6f7d90;
  font-size: 11px;
  font-weight: 800;
}
.billing-money-input {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #dce8f1;
  border-radius: 12px;
  background: #fff;
}
.billing-money-input span {
  display: grid;
  height: 100%;
  place-items: center;
  border-right: 1px solid #e5edf4;
  background: #f2f8fb;
  color: #2ba9de;
  font-weight: 900;
}
.billing-money-input input {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.billing-limit-field {
  position: relative;
  z-index: 1;
  margin-top: 11px;
}
.billing-catalog-price,
.customer-plan-price {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 18px;
}
.billing-catalog-price strong,
.customer-plan-price strong {
  color: #1f2b3d;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.045em;
}
.billing-catalog-price span,
.customer-plan-price span,
.customer-plan-annual {
  color: #6f7d90;
  font-size: 12px;
}
.customer-plan-annual {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-weight: 750;
}
.billing-plan-features,
.customer-plan-features {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin: 18px 0;
}
.billing-plan-features span,
.customer-plan-features span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #526779;
  font-size: 12px;
  font-weight: 700;
}
.billing-plan-features span::before,
.customer-plan-features span::before {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: #eaf8fd;
  color: #199aca;
  content: "✓";
  font-size: 10px;
  font-weight: 900;
}
.billing-fixed-note {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  border-radius: 11px;
  background: #f1f6f9;
  color: #718294;
  padding: 10px 11px;
  font-size: 11px;
  line-height: 1.55;
}
.customer-plan-card {
  min-height: 372px;
  display: flex;
  flex-direction: column;
  padding: 22px;
}
.customer-plan-card .billing-plan__head,
.customer-plan-card .customer-plan-price,
.customer-plan-card .customer-plan-annual,
.customer-plan-card .customer-plan-features,
.customer-plan-card .billing-plan-form,
.customer-plan-card > .button,
.customer-plan-card .billing-readonly {
  position: relative;
  z-index: 1;
}
.customer-plan-card .customer-plan-features {
  flex: 1;
}
.customer-plan-card .billing-plan-form {
  grid-template-columns: 1fr;
}
.customer-plan-card .billing-plan-form .button,
.customer-plan-card > .button {
  width: 100%;
}
.billing-payment-settings-section {
  margin-top: 22px;
  border-top: 1px solid #edf3f7;
  padding-top: 20px;
}
.billing-payment-settings-section .section-heading {
  margin-bottom: 13px;
}
@media (max-width: 1380px) {
  .billing-plan-grid--four,
  .billing-config-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .billing-plan-grid--three,
  .billing-config-grid--three { grid-template-columns: 1fr; }
  .customer-plan-card { min-height: 0; }
}
@media (max-width: 760px) {
  .billing-plan-grid--four,
  .billing-config-grid--four { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .billing-config-prices { grid-template-columns: 1fr; }
  .enterprise-profile-card--compact .premium-section-heading { align-items: stretch; }
  .enterprise-profile-card--compact .button { width: 100%; }
}

/* v75: one floating management control group — date, language and editable avatar */
.topbar.topbar--floating-controls {
  position: sticky;
  top: 0;
  z-index: 90;
  min-height: 68px;
  justify-content: flex-end;
  border-bottom: 0;
  background: transparent;
  padding: 10px 22px 4px;
  box-shadow: none;
  pointer-events: none;
  backdrop-filter: none;
}
.workspace-floating-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  border: 1px solid rgba(207, 225, 237, .92);
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  padding: 6px 7px;
  box-shadow: 0 14px 34px rgba(31, 83, 111, .12);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}
.workspace-floating-controls .top-control,
.workspace-floating-controls .language-picker,
.workspace-floating-controls .management-profile-button {
  min-height: 42px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.workspace-floating-controls .top-control {
  display: inline-flex;
  align-items: center;
  border-radius: 11px;
  color: #61798e;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.workspace-floating-controls .language-picker {
  border-radius: 11px;
}
.workspace-floating-controls .management-profile-button {
  border-left: 1px solid #e2edf3;
  border-radius: 0 11px 11px 0;
  padding-left: 12px;
}
.workspace-floating-controls .management-profile-button:hover,
.workspace-floating-controls .management-profile-wrap:has(.management-profile-menu.is-open) .management-profile-button {
  background: #eef8fd;
  border-color: transparent;
  border-left-color: #d5e8f3;
  box-shadow: none;
  transform: none;
}
.account-avatar-image {
  overflow: hidden;
  padding: 0;
  background: #eaf8fd;
}
.account-avatar-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.management-avatar-editor {
  position: relative;
  width: 43px;
  height: 43px;
  display: block;
  cursor: pointer;
}
.management-avatar-editor .avatar {
  width: 43px;
  height: 43px;
}
.management-avatar-editor > i {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #2ba9de;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  box-shadow: 0 4px 12px rgba(43, 169, 222, .28);
}
.management-profile-menu {
  top: calc(100% + 12px);
  border-color: #d8e8f1;
  background: rgba(255, 255, 255, .985);
}
.management-profile-identity {
  grid-template-columns: 43px minmax(0, 1fr);
  background: linear-gradient(135deg, #eaf8fd 0%, #f8fcfe 100%);
}
.management-profile-menu > button > span:first-child {
  background: #eaf8fd;
  color: #199aca;
}
.management-profile-menu > button:hover {
  background: #eef8fd;
}
.sidebar-footer.sidebar-footer--logout-only {
  display: block;
  padding-top: 14px;
}
.sidebar-footer.sidebar-footer--logout-only .button {
  width: 100%;
}
.sidebar-footer.sidebar-footer--logout-only .button.danger {
  border-color: rgba(246, 85, 85, .28);
  background: #fff4f4;
  color: #e64c4c;
  box-shadow: none;
}
.sidebar-footer.sidebar-footer--logout-only .button.danger:hover {
  border-color: #f65555;
  background: #f65555;
  color: #fff;
}

@media (max-width: 760px) {
  .topbar.topbar--floating-controls {
    min-height: 61px;
    padding: 7px 9px 2px;
  }
  .workspace-floating-controls {
    gap: 4px;
    border-radius: 14px;
    padding: 4px;
  }
  .workspace-floating-controls .top-control {
    min-height: 38px;
    padding: 0 7px;
    font-size: 9px;
  }
  .workspace-floating-controls .language-picker,
  .workspace-floating-controls .management-profile-button {
    min-height: 38px;
  }
  .management-profile-copy {
    display: none;
  }
  .management-profile-button .avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .management-profile-chevron {
    display: none;
  }
  .management-profile-menu {
    position: fixed;
    top: 58px;
    right: 9px;
    width: min(330px, calc(100vw - 18px));
  }
}

/* v77: separate floating language selector and avatar; no data-date chip */
.topbar.topbar--floating-controls {
  position: fixed;
  top: 12px;
  right: 18px;
  left: auto;
  z-index: 120;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.workspace-floating-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: auto;
}
.workspace-language-control,
.workspace-avatar-control {
  display: flex;
  align-items: center;
}
.workspace-language-control .language-picker {
  min-height: 44px;
  border: 1px solid rgba(207,225,237,.96);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  padding: 0 10px;
  box-shadow: 0 12px 30px rgba(31,83,111,.12);
  backdrop-filter: blur(18px);
}
.workspace-avatar-control .management-profile-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(207,225,237,.96);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  padding: 5px;
  box-shadow: 0 12px 30px rgba(31,83,111,.12);
  backdrop-filter: blur(18px);
}
.workspace-avatar-control .management-profile-button:hover,
.workspace-avatar-control .management-profile-wrap:has(.management-profile-menu.is-open) .management-profile-button {
  border-color: #9fcfe8;
  background: #fff;
  box-shadow: 0 15px 34px rgba(31,83,111,.16);
  transform: translateY(-1px);
}
.management-profile-button--avatar-only .avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}
.management-profile-button--avatar-only .management-profile-copy,
.management-profile-button--avatar-only .management-profile-chevron {
  display: none !important;
}
.management-profile-identity small { display: none; }
.management-profile-menu {
  position: fixed;
  top: 66px;
  right: 18px;
}
.main { padding-top: 68px; }
@media (max-width: 760px) {
  .topbar.topbar--floating-controls { top: 8px; right: 9px; }
  .workspace-floating-controls { gap: 7px; padding: 0; }
  .workspace-language-control .language-picker,
  .workspace-avatar-control .management-profile-button { min-height: 40px; height: 40px; border-radius: 13px; }
  .workspace-avatar-control .management-profile-button { width: 40px; }
  .management-profile-button--avatar-only .avatar { width: 30px; height: 30px; flex-basis: 30px; }
  .management-profile-menu { top: 56px; right: 9px; width: min(330px,calc(100vw - 18px)); }
  .main { padding-top: 58px; }
}

/* v77: independent floating language and avatar controls */
.topbar.topbar--floating-controls {
  position: relative;
  top: auto;
  z-index: 90;
  min-height: 66px;
  border-bottom: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  backdrop-filter: none;
}
.workspace-floating-controls {
  position: fixed;
  top: 12px;
  right: 22px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}
.workspace-language-float,
.workspace-avatar-float {
  pointer-events: auto;
}
.workspace-language-float .language-picker {
  min-height: 44px;
  border: 1px solid rgba(207, 225, 237, .96);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  padding: 0 11px;
  box-shadow: 0 12px 28px rgba(31, 83, 111, .11);
  backdrop-filter: blur(18px);
}
.workspace-language-float .language-picker:hover,
.workspace-language-float .language-picker:focus-within {
  border-color: #9fd4ed;
  background: #fff;
  box-shadow: 0 15px 32px rgba(31, 83, 111, .14);
}
.workspace-avatar-float.management-profile-wrap {
  position: relative;
  z-index: 122;
}
.workspace-avatar-float .management-profile-button--avatar-only {
  width: 46px;
  height: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  gap: 0;
  border: 1px solid rgba(207, 225, 237, .96);
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  padding: 5px;
  box-shadow: 0 12px 28px rgba(31, 83, 111, .12);
  backdrop-filter: blur(18px);
}
.workspace-avatar-float .management-profile-button--avatar-only:hover,
.workspace-avatar-float:has(.management-profile-menu.is-open) .management-profile-button--avatar-only {
  border-color: #8dcbe8;
  background: #fff;
  box-shadow: 0 15px 34px rgba(31, 83, 111, .16);
  transform: translateY(-1px);
}
.workspace-avatar-float .management-profile-button--avatar-only .avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 10px;
}
.workspace-avatar-float .management-profile-copy,
.workspace-avatar-float .management-profile-chevron {
  display: none !important;
}
.workspace-avatar-float .management-profile-menu {
  top: calc(100% + 11px);
  right: 0;
}
.workspace-avatar-float .management-profile-identity {
  grid-template-columns: 43px minmax(0, 1fr);
}
.workspace-avatar-float .management-profile-identity small {
  display: none;
}
.workspace-avatar-float .management-profile-identity em {
  margin-top: 2px;
}

@media (max-width: 760px) {
  .topbar.topbar--floating-controls {
    min-height: 60px;
    padding: 0;
  }
  .workspace-floating-controls {
    top: 9px;
    right: 10px;
    gap: 7px;
    max-width: calc(100vw - 20px);
  }
  .workspace-language-float .language-picker {
    min-height: 40px;
    border-radius: 12px;
    padding: 0 8px;
  }
  .workspace-avatar-float .management-profile-button--avatar-only {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 5px;
  }
  .workspace-avatar-float .management-profile-button--avatar-only .avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .workspace-avatar-float .management-profile-menu {
    position: fixed;
    top: 60px;
    right: 9px;
    width: min(330px, calc(100vw - 18px));
  }
}

/* v77 final floating-control override */
.topbar.topbar--floating-controls {
  position: fixed;
  top: 12px;
  right: 18px;
  left: auto;
  z-index: 120;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  backdrop-filter: none;
}
.workspace-floating-controls {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}
.workspace-language-control,
.workspace-avatar-control {
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.workspace-language-control .language-picker {
  min-height: 44px;
  border: 1px solid rgba(207, 225, 237, .96);
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  padding: 0 10px;
  box-shadow: 0 12px 30px rgba(31, 83, 111, .12);
  backdrop-filter: blur(18px);
}
.workspace-avatar-control .management-profile-button--avatar-only {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(207, 225, 237, .96);
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  padding: 5px;
  box-shadow: 0 12px 30px rgba(31, 83, 111, .12);
  backdrop-filter: blur(18px);
}
.workspace-avatar-control .management-profile-button--avatar-only:hover,
.workspace-avatar-control .management-profile-wrap:has(.management-profile-menu.is-open) .management-profile-button--avatar-only {
  border-color: #8fcce8;
  background: #fff;
  box-shadow: 0 15px 34px rgba(31, 83, 111, .16);
  transform: translateY(-1px);
}
.workspace-avatar-control .management-profile-button--avatar-only .avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
.workspace-avatar-control .management-profile-menu {
  position: fixed;
  top: 66px;
  right: 18px;
}
.main {
  padding-top: 68px;
}
@media (max-width: 760px) {
  .topbar.topbar--floating-controls {
    top: 8px;
    right: 9px;
  }
  .workspace-floating-controls {
    gap: 7px;
  }
  .workspace-language-control .language-picker,
  .workspace-avatar-control .management-profile-button--avatar-only {
    min-height: 40px;
    height: 40px;
    border-radius: 13px;
  }
  .workspace-avatar-control .management-profile-button--avatar-only {
    width: 40px;
  }
  .workspace-avatar-control .management-profile-button--avatar-only .avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .workspace-avatar-control .management-profile-menu {
    top: 56px;
    right: 9px;
    width: min(330px, calc(100vw - 18px));
  }
  .main {
    padding-top: 58px;
  }
}

/* v78: four-plan USD catalogue with per-employee formula pricing */
.billing-plan-grid--four,
.billing-config-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.billing-pricing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  border: 1px solid rgba(43, 169, 222, .24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(234, 248, 253, .96), rgba(255, 255, 255, .98));
  padding: 13px 15px;
}
.billing-pricing-banner strong {
  color: var(--primary-hover, #199aca);
  font-size: 13px;
}
.billing-pricing-banner span {
  color: var(--gray-color, #6f7d90);
  font-size: 12px;
  line-height: 1.55;
}
.billing-config-prices--formula input[readonly] {
  background: #f5f9fc;
  color: var(--text-color, #1f2b3d);
  cursor: default;
}
.billing-formula-note {
  display: grid;
  gap: 4px;
  margin-top: 13px;
  border-top: 1px solid var(--border-color, #e2edf3);
  padding-top: 12px;
}
.billing-formula-note strong,
.customer-plan-unit-price {
  color: var(--primary-hover, #199aca);
  font-size: 12px;
  font-weight: 800;
}
.billing-formula-note span {
  color: var(--gray-color, #6f7d90);
  font-size: 11px;
  line-height: 1.55;
}
.customer-plan-unit-price {
  margin-top: 8px;
  border-radius: 10px;
  background: var(--primary-soft, #eaf8fd);
  padding: 8px 10px;
  text-align: center;
}
@media (max-width: 1420px) {
  .billing-plan-grid--four,
  .billing-config-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .billing-plan-grid--four,
  .billing-config-grid--four { grid-template-columns: 1fr; }
  .billing-pricing-banner { align-items: flex-start; flex-direction: column; }
}


/* v78: four-plan catalogue with automatic USD 1.50 per-person pricing */
.billing-auto-pricing {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.billing-auto-pricing > span {
  display: grid;
  gap: 4px;
  border: 1px solid #dce9f3;
  border-radius: 12px;
  background: #fff;
  padding: 11px 12px;
}
.billing-auto-pricing small {
  color: #6f7d90;
  font-size: 10px;
  font-weight: 800;
}
.billing-auto-pricing strong {
  color: #1f2b3d;
  font-size: 18px;
  letter-spacing: -.025em;
}
.billing-formula-note {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border-radius: 12px;
  background: #eaf8fd;
  color: #526779;
  padding: 11px 12px;
}
.billing-formula-note strong {
  color: #199aca;
  font-size: 12px;
}
.billing-formula-note span {
  font-size: 11px;
  line-height: 1.55;
}
.billing-plan-grid--four .customer-plan-card { min-width: 0; }
@media (max-width: 620px) {
  .billing-auto-pricing { grid-template-columns: 1fr; }
}

/* v84 Stripe automatic billing */
.stripe-configuration-card,
.stripe-subscription-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 0 20px;
  border: 1px solid #d6e9f5;
  border-radius: 17px;
  background: linear-gradient(135deg, #f7fcff 0%, #edf8fd 100%);
  padding: 18px 20px;
  box-shadow: 0 12px 28px rgba(31, 83, 111, .055);
}
.stripe-configuration-card.good,
.stripe-subscription-card {
  border-color: #bfe7d9;
  background: linear-gradient(135deg, #f4fcf9 0%, #eaf8f3 100%);
}
.stripe-configuration-card.warn {
  border-color: #f3d9b9;
  background: linear-gradient(135deg, #fffaf4 0%, #fff4e7 100%);
}
.stripe-configuration-card.bad {
  border-color: #f2caca;
  background: linear-gradient(135deg, #fffafa 0%, #fff0f0 100%);
}
.stripe-configuration-card h3,
.stripe-subscription-card h3 {
  margin: 4px 0 5px;
  color: #183551;
  font-size: 18px;
}
.stripe-configuration-card p,
.stripe-subscription-card p {
  max-width: 660px;
  margin: 0;
  color: #71889c;
  font-size: 12px;
  line-height: 1.65;
}
.stripe-configuration-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(115px, 1fr));
  gap: 8px;
}
.stripe-configuration-meta span {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(189, 216, 233, .8);
  border-radius: 11px;
  background: rgba(255,255,255,.78);
  padding: 9px 11px;
  color: #8398aa;
  font-size: 10px;
}
.stripe-configuration-meta strong {
  overflow: hidden;
  color: #234761;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stripe-order-card {
  border-color: #cfe6f4;
  background: linear-gradient(180deg, #fafdff, #f4fbff);
}
.provider-status {
  display: block;
  margin-top: 4px;
  color: #8196a8;
  font-size: 10px;
}
.stripe-invoice-history {
  margin-top: 20px;
}
.billing-payment-settings-section {
  margin-top: 20px;
  border-top: 1px solid #e7eff5;
  padding-top: 18px;
}
@media (max-width: 1050px) {
  .stripe-configuration-card,
  .stripe-subscription-card {
    align-items: stretch;
    flex-direction: column;
  }
  .stripe-configuration-meta { width: 100%; }
}
@media (max-width: 620px) {
  .stripe-configuration-meta { grid-template-columns: 1fr; }
}


/* v84: viewport-fixed language and avatar controls that follow every page scroll. */
.app-shell > .main > .topbar.topbar--floating-controls {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
  right: calc(env(safe-area-inset-right, 0px) + 20px) !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 5000 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateZ(0);
  will-change: transform;
  contain: none !important;
  pointer-events: none !important;
  isolation: isolate;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  max-width: calc(100vw - 40px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  pointer-events: auto !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button--avatar-only {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 70px) !important;
  right: calc(env(safe-area-inset-right, 0px) + 20px) !important;
  z-index: 5002 !important;
}
@media (max-width: 760px) {
  .app-shell > .main > .topbar.topbar--floating-controls {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
    gap: 7px !important;
    max-width: calc(100vw - 24px) !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu {
    top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
    width: min(330px, calc(100vw - 20px));
  }
}

/* v84: keep authenticated users signed in when a downstream workspace request fails. */
.application-load-error {
  display: grid;
  gap: 12px;
  border: 1px solid #d5e9f5;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fdff, #ffffff);
  padding: 18px;
  color: #526779;
}
.application-load-error strong {
  color: #1f2b3d;
  font-size: 14px;
  line-height: 1.6;
}
.application-load-error span {
  font-size: 12px;
  line-height: 1.7;
}

/* v84: account dropdown behaves like a lightweight popover and retracts automatically. */
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-backdrop {
  z-index: 5001 !important;
  background: transparent !important;
  pointer-events: auto !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu {
  z-index: 5002 !important;
  transform-origin: top right;
}

/* v84: profile menu auto-collapse and reliable outside-click layer. */
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu {
  z-index: 5004 !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5001 !important;
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none !important;
  border: 0 !important;
  background: rgba(18, 48, 73, .045) !important;
  padding: 0 !important;
  transition: opacity .15s ease, visibility .15s ease;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-backdrop.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-wrap {
  position: relative;
  z-index: 5003 !important;
}

/* v84 final: animated auto-retracting account popover. */
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu {
  display: grid !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none !important;
  transform: translateY(-8px) scale(.985);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  animation: none !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto !important;
  transform: translateY(0) scale(1);
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-backdrop,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-backdrop.is-open {
  background: transparent !important;
}

/* v84 Stripe setup diagnostics and safe transition from legacy manual orders. */
.stripe-setup-required {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
  border: 1px solid rgba(246, 85, 85, .24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 247, 247, .98), rgba(255, 255, 255, .98));
  padding: 18px 20px;
  box-shadow: 0 12px 28px rgba(126, 47, 47, .055);
}
.stripe-setup-required h3 {
  margin: 5px 0 7px;
  color: #243a52;
  font-size: 18px;
}
.stripe-setup-required p {
  margin: 3px 0;
  color: #75899c;
  font-size: 12px;
  line-height: 1.65;
}
.stripe-setup-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 320px;
}
.stripe-setup-status > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 750;
}
.stripe-setup-status > span.is-ready {
  background: #e9f8f3;
  color: #0e9277;
}
.stripe-setup-status > span.is-missing {
  background: #fff0f0;
  color: #f65555;
}
.stripe-setup-status > span strong {
  font-weight: 850;
}
.billing-switch-note {
  display: block;
  margin-top: 7px;
  color: #71889b;
  font-size: 10.5px;
  line-height: 1.5;
}
@media (max-width: 880px) {
  .stripe-setup-required {
    align-items: stretch;
    flex-direction: column;
  }
  .stripe-setup-status {
    justify-content: flex-start;
    min-width: 0;
  }
}

/* v84 Stripe checkout readiness and manual-to-online conversion */
.customer-stripe-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  border: 1px solid #cfe7f4;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2fbff 0%, #fbfdff 100%);
  padding: 15px 17px;
}
.customer-stripe-status > div {
  display: grid;
  gap: 4px;
}
.customer-stripe-status strong {
  color: #173650;
  font-size: 14px;
}
.customer-stripe-status span:not(.badge) {
  color: #6f879b;
  font-size: 12px;
  line-height: 1.55;
}
.customer-stripe-status.warn {
  border-color: #f1ddbe;
  background: linear-gradient(135deg, #fffaf1 0%, #fffdf9 100%);
}
.customer-stripe-status.bad {
  border-color: #f3d1d4;
  background: linear-gradient(135deg, #fff7f7 0%, #fffdfd 100%);
}
.billing-convert-online {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 12px 0;
}
.billing-switch-note {
  display: block;
  margin-top: 7px;
  color: #7d91a5;
  font-size: 10.5px;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .customer-stripe-status {
    align-items: flex-start;
    flex-direction: column;
  }
  .billing-convert-online,
  .billing-convert-online .button {
    width: 100%;
  }
}

/* v84: explicit Stripe checkout readiness and safer manual-order conversion. */
.stripe-readiness-list {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.stripe-readiness-list > span:not(.badge) {
  display: grid;
  min-width: 118px;
  gap: 2px;
  border: 1px solid rgba(43, 169, 222, .18);
  border-radius: 11px;
  background: rgba(255, 255, 255, .86);
  padding: 8px 10px;
  color: #71869a !important;
  font-size: 10px !important;
}
.stripe-readiness-list > span strong {
  color: #1f2b3d;
  font-size: 12px;
}
.customer-stripe-status.bad .stripe-readiness-list > span:not(.badge) {
  border-color: rgba(246, 85, 85, .18);
}
.billing-mode-stack {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 760px) {
  .stripe-readiness-list {
    width: 100%;
    justify-content: flex-start;
  }
  .stripe-readiness-list > span:not(.badge) {
    flex: 1 1 118px;
  }
}

/* v90 premium Stripe subscription lifecycle */
.stripe-subscription-card--detailed {
  display: grid;
  grid-template-columns: minmax(210px, .9fr) minmax(0, 1.7fr) auto;
  align-items: center;
  gap: 18px;
  border-color: rgba(43, 169, 222, .26);
  background: linear-gradient(135deg, #f5fcff 0%, #eaf8fd 100%);
}
.stripe-subscription-heading {
  min-width: 0;
}
.stripe-subscription-heading h3 {
  margin: 4px 0 5px;
  color: #1f2b3d;
  font-size: 20px;
}
.stripe-subscription-heading p {
  margin: 0;
  color: #6f7d90;
  font-size: 12px;
  line-height: 1.6;
}
.stripe-subscription-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
}
.stripe-subscription-details > span {
  display: grid;
  gap: 5px;
  min-height: 58px;
  align-content: center;
  border: 1px solid rgba(43, 169, 222, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  padding: 9px 11px;
  color: #7a8ca0;
  font-size: 10.5px;
}
.stripe-subscription-details strong:not(.badge) {
  overflow: hidden;
  color: #203d58;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stripe-subscription-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
}
.stripe-subscription-actions .button {
  width: 100%;
  justify-content: center;
}
.customer-plan-card .button[data-stripe-portal-flow="subscription_update"] {
  border-color: rgba(43, 169, 222, .28);
  background: #eaf8fd;
  color: #168dbc;
}
.customer-plan-card .button[data-stripe-portal-flow="subscription_update"]:hover {
  border-color: #2ba9de;
  background: #daf2fb;
}
@media (max-width: 1180px) {
  .stripe-subscription-card--detailed {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .stripe-subscription-actions {
    flex-direction: row;
    min-width: 0;
  }
  .stripe-subscription-actions .button { width: auto; }
}
@media (max-width: 780px) {
  .stripe-subscription-details { grid-template-columns: 1fr 1fr; }
  .stripe-subscription-actions { flex-direction: column; }
  .stripe-subscription-actions .button { width: 100%; }
}
@media (max-width: 520px) {
  .stripe-subscription-details { grid-template-columns: 1fr; }
}

/* v90 polished Stripe catalog, subscription lifecycle, and invoices */
.stripe-status-copy {
  display: grid;
  gap: 4px;
  min-width: 250px;
}
.stripe-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.stripe-subscription-top {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.stripe-subscription-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.stripe-subscription-title h3 {
  margin: 0;
}
.stripe-renewal-state {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(14, 146, 119, .18);
  border-radius: 999px;
  background: rgba(231, 247, 242, .9);
  color: #0e9277;
  padding: 0 11px;
  font-size: 10.5px;
  font-weight: 850;
}
.stripe-renewal-state.warn {
  border-color: rgba(229, 111, 22, .2);
  background: #fff7ed;
  color: #d76a16;
}
.stripe-subscription-details > span small {
  overflow: hidden;
  color: #8a9caf;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stripe-subscription-actions a.button {
  text-decoration: none;
}
.stripe-invoice-history {
  scroll-margin-top: 96px;
}
.stripe-invoice-history .section-heading p {
  margin: 3px 0 0;
  color: #7b8fa2;
  font-size: 11.5px;
}
.customer-stripe-status {
  flex-wrap: wrap;
}
.customer-stripe-status .stripe-status-actions {
  margin-left: auto;
}
@media (max-width: 1120px) {
  .customer-stripe-status .stripe-status-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}
@media (max-width: 620px) {
  .stripe-status-copy { min-width: 0; }
  .stripe-status-actions,
  .stripe-status-actions .button { width: 100%; }
  .stripe-status-actions .button { justify-content: center; }
}

/* v90: compact billing entry, aligned payment history, and formal invoice documents */
.settings-dialog--billing {
  width: min(1180px, calc(100vw - 32px));
  max-height: min(900px, calc(100dvh - 24px));
}
.settings-dialog--billing .settings-dialog-card {
  max-height: min(900px, calc(100dvh - 24px));
}
.billing-records-entry {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  border: 1px solid #dceaf4;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fcff 0%, #ffffff 72%);
  padding: 15px 16px;
  box-shadow: 0 10px 28px rgba(26, 80, 120, .055);
}
.billing-records-entry-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-soft, #eaf8fd);
  color: var(--primary-color, #2ba9de);
  font-size: 17px;
  font-weight: 900;
}
.billing-records-entry h3 {
  margin: 2px 0 3px;
  color: #183e5c;
  font-size: 16px;
  letter-spacing: -.025em;
}
.billing-records-entry p {
  margin: 0;
  color: #7a8fa2;
  font-size: 11.5px;
  line-height: 1.55;
}
.billing-record-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dfeaf3;
  border-radius: 16px;
  background: #fff;
}
.billing-record-summary > span {
  display: grid;
  gap: 5px;
  min-height: 82px;
  align-content: center;
  border-right: 1px solid #e7eef5;
  padding: 13px 17px;
}
.billing-record-summary > span:last-child { border-right: 0; }
.billing-record-summary small {
  color: #8195a8;
  font-size: 10.5px;
  font-weight: 750;
}
.billing-record-summary strong {
  color: #173b58;
  font-size: 22px;
  letter-spacing: -.03em;
}
.billing-record-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e4edf5;
  padding: 0 2px 9px;
}
.billing-record-tabs button {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #668098;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.billing-record-tabs button span {
  display: inline-grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 999px;
  background: #edf3f8;
  color: #6d859a;
  font-size: 10px;
}
.billing-record-tabs button.active {
  border-color: #bfe2f4;
  background: #eef9fe;
  color: #168dc3;
}
.billing-record-tabs button.active span {
  background: #d9f1fb;
  color: #0f84b8;
}
.billing-record-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) auto;
  align-items: end;
  gap: 12px;
  border: 1px solid #e2ebf3;
  border-radius: 14px;
  background: #f9fcfe;
  padding: 12px;
}
.billing-record-toolbar label {
  display: grid;
  gap: 6px;
  color: #6e8599;
  font-size: 10.5px;
  font-weight: 800;
}
.billing-record-toolbar input,
.billing-record-toolbar select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d9e6f0;
  border-radius: 10px;
  background: #fff;
  color: #24445f;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
}
.billing-record-toolbar > span {
  min-width: 72px;
  color: #7890a4;
  padding: 0 4px 11px;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
}
.billing-record-panel {
  display: grid;
  gap: 12px;
}
.billing-record-panel[hidden] { display: none !important; }
.billing-record-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.billing-record-panel-heading h3 {
  margin: 0 0 4px;
  color: #183e5c;
  font-size: 16px;
}
.billing-record-panel-heading p {
  margin: 0;
  color: #7c91a4;
  font-size: 11px;
}
.billing-record-table-wrap {
  border: 1px solid #e1eaf2;
  border-radius: 15px;
  background: #fff;
}
.billing-record-table {
  width: 100%;
  table-layout: fixed;
}
.billing-record-table th,
.billing-record-table td {
  height: 62px;
  vertical-align: middle;
  white-space: normal;
}
.billing-record-table th {
  background: #f7fafc;
  color: #57728b;
  font-size: 11.5px;
}
.billing-record-table td {
  color: #31506a;
  font-size: 12px;
}
.billing-record-table td > strong {
  display: block;
  color: #183c59;
  font-size: 12.5px;
}
.billing-record-table td > small {
  display: block;
  margin-top: 4px;
  color: #8a9daf;
  font-size: 10px;
}
.billing-money-cell {
  color: #173b58 !important;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.billing-action-head,
.billing-action-cell {
  text-align: right !important;
}
.billing-action-cell .billing-row-action {
  margin-left: auto;
}
.formal-invoice-list {
  display: grid;
  gap: 16px;
}
.formal-invoice-card {
  overflow: hidden;
  border: 1px solid #dfe8f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 13px 34px rgba(24, 70, 104, .07);
  scroll-margin-top: 92px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.formal-invoice-card.is-highlighted {
  border-color: #67c1e8;
  box-shadow: 0 0 0 4px rgba(43, 169, 222, .12), 0 18px 42px rgba(24, 70, 104, .1);
  transform: translateY(-2px);
}
.formal-invoice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e7eef4;
  background: linear-gradient(135deg, #f4faff 0%, #ffffff 72%);
  padding: 18px 20px;
}
.formal-invoice-brand {
  display: flex;
  align-items: center;
  gap: 15px;
}
.formal-invoice-brand img {
  width: 154px;
  max-height: 44px;
  object-fit: contain;
  object-position: left center;
}
.formal-invoice-brand > div {
  display: grid;
  gap: 2px;
  border-left: 1px solid #dfe9f1;
  padding-left: 15px;
}
.formal-invoice-brand span {
  color: #2ba9de;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}
.formal-invoice-brand strong {
  color: #193d59;
  font-size: 16px;
}
.formal-invoice-brand small {
  color: #8397a9;
  font-size: 10px;
}
.formal-invoice-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #e9eff4;
}
.formal-invoice-meta > span {
  display: grid;
  gap: 4px;
  min-height: 88px;
  align-content: center;
  border-right: 1px solid #e9eff4;
  padding: 13px 18px;
}
.formal-invoice-meta > span:last-child { border-right: 0; }
.formal-invoice-meta small,
.formal-invoice-summary small {
  color: #879aab;
  font-size: 9.5px;
  font-weight: 800;
}
.formal-invoice-meta strong {
  overflow: hidden;
  color: #203f59;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.formal-invoice-meta em {
  overflow: hidden;
  color: #8498aa;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.formal-invoice-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 17px 20px 0;
  border: 1px solid #e1eaf2;
  border-radius: 13px;
  background: #fbfdff;
  padding: 14px 16px;
}
.formal-invoice-line > div {
  display: grid;
  gap: 4px;
}
.formal-invoice-line strong {
  color: #1d405d;
  font-size: 12.5px;
}
.formal-invoice-line small {
  color: #8296a8;
  font-size: 10.5px;
}
.formal-invoice-line > span {
  color: #183b57;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.formal-invoice-summary {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  margin: 14px 20px 0 auto;
}
.formal-invoice-summary > span {
  display: grid;
  min-width: 128px;
  gap: 4px;
  border-left: 1px solid #e1e9f0;
  padding: 8px 15px;
  text-align: right;
}
.formal-invoice-summary b {
  color: #24445f;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.formal-invoice-summary .formal-invoice-total {
  min-width: 156px;
  background: #f0f9fd;
  border-radius: 10px;
}
.formal-invoice-summary .formal-invoice-total b {
  color: #138dbf;
  font-size: 17px;
}
.formal-invoice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 15px;
  border-top: 1px solid #e9eff4;
  padding: 15px 20px 17px;
}
.formal-invoice-footer > div:first-child {
  display: grid;
  gap: 3px;
}
.formal-invoice-footer > div:first-child span {
  color: #183e5c;
  font-size: 11px;
  font-weight: 850;
}
.formal-invoice-footer > div:first-child small {
  color: #8a9dad;
  font-size: 9.5px;
}
.formal-invoice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.formal-invoice-actions a { text-decoration: none; }
.billing-document-pending {
  color: #889bad;
  font-size: 10px;
}
@media (max-width: 920px) {
  .settings-dialog--billing { width: calc(100vw - 18px); }
  .billing-record-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-record-summary > span:nth-child(2) { border-right: 0; }
  .billing-record-summary > span:nth-child(-n+2) { border-bottom: 1px solid #e7eef5; }
  .billing-record-toolbar { grid-template-columns: 1fr 180px; }
  .billing-record-toolbar > span { grid-column: 1 / -1; padding: 0; text-align: left; }
  .formal-invoice-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formal-invoice-meta > span:nth-child(2) { border-right: 0; }
  .formal-invoice-meta > span:nth-child(-n+2) { border-bottom: 1px solid #e9eff4; }
}
@media (max-width: 650px) {
  .billing-records-entry { grid-template-columns: 42px minmax(0, 1fr); }
  .billing-records-entry > .button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .billing-record-toolbar { grid-template-columns: 1fr; }
  .billing-record-toolbar > span { grid-column: auto; }
  .billing-record-summary { grid-template-columns: 1fr; }
  .billing-record-summary > span { border-right: 0; border-bottom: 1px solid #e7eef5; }
  .billing-record-summary > span:last-child { border-bottom: 0; }
  .formal-invoice-header,
  .formal-invoice-footer { align-items: stretch; flex-direction: column; }
  .formal-invoice-brand img { width: 130px; }
  .formal-invoice-brand > div { padding-left: 11px; }
  .formal-invoice-meta { grid-template-columns: 1fr; }
  .formal-invoice-meta > span { border-right: 0; border-bottom: 1px solid #e9eff4; }
  .formal-invoice-meta > span:last-child { border-bottom: 0; }
  .formal-invoice-line { align-items: flex-start; flex-direction: column; }
  .formal-invoice-summary { flex-direction: column; margin-left: 20px; }
  .formal-invoice-summary > span { border-left: 0; border-top: 1px solid #e1e9f0; text-align: left; }
  .formal-invoice-actions { justify-content: stretch; }
  .formal-invoice-actions .button { flex: 1; justify-content: center; }
}

/* v90 final alignment: keep active subscription facts and actions on a clean shared baseline. */
@media (min-width: 1181px) {
  .stripe-subscription-card--detailed {
    grid-template-columns: minmax(250px, 1.05fr) minmax(0, 2.4fr) minmax(165px, .62fr);
    align-items: stretch;
  }
  .stripe-subscription-top {
    height: 100%;
    align-content: center;
  }
  .stripe-subscription-details {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
  }
  .stripe-subscription-details > span {
    min-height: 78px;
    height: 100%;
    align-content: center;
  }
  .stripe-subscription-actions {
    align-self: stretch;
    justify-content: center;
  }
  .stripe-subscription-actions .button {
    min-height: 38px;
  }
}
.billing-summary {
  align-items: stretch;
}
.billing-summary article {
  display: grid;
  min-height: 76px;
  align-content: center;
}
.customer-plan-card {
  display: flex;
  flex-direction: column;
}
.customer-plan-card > .billing-plan-form,
.customer-plan-card > .button,
.customer-plan-card > .billing-readonly {
  margin-top: auto;
}

/* v90 formal invoice finishing details. */
.formal-invoice-card::before {
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #2ba9de 0%, #199aca 74%, #eaf8fd 100%);
  content: "";
}
.formal-invoice-header > .badge.good {
  min-width: 72px;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.formal-invoice-meta > span,
.formal-invoice-summary > span {
  font-variant-numeric: tabular-nums;
}
.formal-invoice-footer {
  background: #fbfdff;
}

/* v90 final alignment polish for subscription cards, plan cards, and formal billing documents */
@media (min-width: 1181px) {
  .stripe-subscription-card--detailed {
    grid-template-columns: minmax(220px, .95fr) minmax(0, 2.45fr) 168px;
  }
  .stripe-subscription-details {
    grid-template-columns: repeat(5, minmax(104px, 1fr));
    align-items: stretch;
  }
  .stripe-subscription-details > span {
    min-height: 72px;
  }
}
.stripe-subscription-actions {
  align-self: stretch;
  justify-content: center;
}
.stripe-subscription-actions .button {
  min-height: 40px;
}
.customer-plan-card .billing-plan__head {
  min-height: 82px;
  align-items: flex-start;
}
.customer-plan-card .customer-plan-price {
  min-height: 38px;
  align-items: flex-end;
}
.customer-plan-card .customer-plan-annual {
  min-height: 34px;
  line-height: 1.5;
}
.customer-plan-card .billing-plan-form,
.customer-plan-card > .button,
.customer-plan-card .billing-readonly {
  margin-top: auto;
}
.billing-record-table td,
.billing-record-table th {
  padding-left: 16px;
  padding-right: 16px;
}
.billing-record-table .billing-action-cell,
.billing-record-table .billing-action-head {
  padding-right: 18px;
}
.formal-invoice-card {
  color: #203d58;
}
.formal-invoice-header .badge {
  flex: 0 0 auto;
  min-width: 74px;
  justify-content: center;
}
.formal-invoice-summary {
  width: fit-content;
  min-width: 430px;
}
.formal-invoice-actions .button {
  min-width: 124px;
}
@media (max-width: 650px) {
  .formal-invoice-summary {
    width: auto;
    min-width: 0;
  }
  .formal-invoice-actions .button {
    min-width: 0;
  }
}

/* v90 attendance workspace and compact billing interaction */
.attendance-page-stack {
  gap: 18px;
}
.attendance-page-actions {
  align-items: center;
}
.attendance-page-actions .button {
  min-height: 42px;
}
.attendance-insight-grid--premium {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.attendance-insight-grid--premium .overview-metric {
  min-height: 108px;
}
.attendance-records-card {
  overflow: visible;
  border-color: #dfeaf2;
}
.attendance-records-heading {
  align-items: flex-start;
  border-bottom: 1px solid #e7eef4;
  padding-bottom: 17px;
}
.attendance-command-card {
  margin: -2px 0 16px;
  border: 1px solid #dfeaf3;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f6fafc 100%);
  padding: 13px 14px 10px;
}
.attendance-command-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(130px, .75fr)) auto;
  align-items: end;
  gap: 10px;
}
.attendance-command-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #6f8599;
  font-size: 10.5px;
  font-weight: 800;
}
.attendance-command-grid input,
.attendance-command-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d8e6f0;
  border-radius: 11px;
  background: #fff;
  color: #24445f;
  padding: 0 11px;
  font: inherit;
  font-size: 12px;
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.attendance-command-grid input:focus,
.attendance-command-grid select:focus {
  border-color: #2ba9de;
  box-shadow: 0 0 0 3px rgba(43, 169, 222, .12);
}
.attendance-search-control > div {
  position: relative;
}
.attendance-search-control b {
  position: absolute;
  top: 50%;
  left: 12px;
  color: #7d94a7;
  font-size: 15px;
  transform: translateY(-50%);
  pointer-events: none;
}
.attendance-search-control input {
  padding-left: 34px;
}
.attendance-reset-button {
  min-width: 92px;
}
.attendance-command-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  border-top: 1px solid #e8eff5;
  padding-top: 9px;
  color: #8195a7;
  font-size: 10.5px;
}
.attendance-command-foot strong {
  color: #1a7fb3;
  font-size: 12px;
}
.attendance-table-wrap {
  max-height: 58vh;
  overflow: auto;
  border-radius: 15px;
}
.attendance-table {
  min-width: 1180px;
}
.attendance-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  box-shadow: inset 0 -1px 0 #e3ebf2;
}
.attendance-table td,
.attendance-table th {
  white-space: nowrap;
}
.attendance-employee-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
}
.attendance-employee-cell > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.attendance-employee-cell strong {
  overflow: hidden;
  color: #1f3e59;
  font-size: 13px;
  text-overflow: ellipsis;
}
.attendance-employee-cell small {
  overflow: hidden;
  max-width: 250px;
  color: #8a9daf;
  font-size: 10.5px;
  text-overflow: ellipsis;
}
.attendance-hours-value {
  color: #0e9277;
  font-variant-numeric: tabular-nums;
}
.attendance-exception-pills,
.attendance-status-stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.attendance-pagination {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  border-top: 1px solid #e7eef4;
  padding-top: 12px;
  color: #768da1;
  font-size: 11px;
}
.attendance-pagination label,
.attendance-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.attendance-pagination > span {
  text-align: center;
}
.attendance-pagination select {
  min-height: 34px;
  border: 1px solid #d8e5ef;
  border-radius: 9px;
  background: #fff;
  color: #294a65;
  padding: 0 8px;
}
.attendance-collapsible-card {
  overflow: hidden;
  padding: 0;
}
.attendance-collapsible-card > summary {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  padding: 18px 20px;
  cursor: pointer;
  transition: background .18s ease;
}
.attendance-collapsible-card > summary::-webkit-details-marker {
  display: none;
}
.attendance-collapsible-card > summary:hover {
  background: #f8fcfe;
}
.attendance-collapsible-card > summary > div:first-child {
  display: grid;
  gap: 3px;
}
.attendance-collapsible-card > summary h2 {
  margin: 0;
  color: #1d3d58;
  font-size: 18px;
}
.attendance-collapsible-card > summary p {
  margin: 0;
  color: #8195a7;
  font-size: 11.5px;
}
.attendance-collapse-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #688298;
  font-size: 11px;
  font-weight: 750;
}
.attendance-collapse-meta b {
  color: #1b7eae;
  font-size: 15px;
}
.attendance-collapse-meta > span:last-child {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: #eaf8fd;
  color: #199aca;
  font-size: 15px;
  transition: transform .18s ease;
}
.attendance-collapsible-card[open] .attendance-collapse-meta > span:last-child {
  transform: rotate(180deg);
}
.attendance-collapsible-body {
  border-top: 1px solid #e7eef4;
  background: #fbfdff;
  padding: 16px 20px 20px;
}
.attendance-secondary-action {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.attendance-import-form--premium {
  margin-top: 14px;
}

/* Current order stays available without permanently occupying the billing page. */
.billing-order-disclosure {
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid #dce9f3;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f6fbfe 100%);
  box-shadow: 0 9px 26px rgba(21, 75, 111, .045);
}
.billing-order-disclosure > summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  padding: 14px 16px;
  cursor: pointer;
}
.billing-order-disclosure > summary::-webkit-details-marker {
  display: none;
}
.billing-order-disclosure > summary > div:first-child {
  display: grid;
  gap: 3px;
}
.billing-order-disclosure > summary strong {
  color: #1c405d;
  font-size: 14px;
}
.billing-order-disclosure > summary small {
  color: #8296a8;
  font-size: 11px;
}
.billing-order-summary-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.billing-order-summary-actions > i {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #eaf8fd;
  color: #199aca;
  font-style: normal;
  transition: transform .18s ease;
}
.billing-order-disclosure[open] .billing-order-summary-actions > i {
  transform: rotate(180deg);
}
.billing-order-disclosure-body {
  border-top: 1px solid #e3edf4;
  padding: 14px 16px 16px;
}

/* Keep the four subscription actions on one precise visual grid. */
.stripe-subscription-actions {
  display: grid !important;
  grid-auto-rows: 42px;
  align-content: center;
  gap: 8px;
  width: 168px;
  min-width: 168px;
}
.stripe-subscription-actions .button {
  width: 100%;
  min-height: 42px !important;
  height: 42px;
  justify-content: center;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 1380px) {
  .attendance-insight-grid--premium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .attendance-command-grid {
    grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(140px, .8fr));
  }
  .attendance-reset-button {
    width: 100%;
  }
}
@media (max-width: 1180px) {
  .stripe-subscription-actions {
    display: flex !important;
    width: auto;
    min-width: 0;
    flex-wrap: wrap;
  }
  .stripe-subscription-actions .button {
    width: auto;
    flex: 1 1 180px;
  }
}
@media (max-width: 820px) {
  .attendance-insight-grid--premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .attendance-command-grid {
    grid-template-columns: 1fr 1fr;
  }
  .attendance-search-control {
    grid-column: 1 / -1;
  }
  .attendance-pagination {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .attendance-pagination > span {
    text-align: left;
  }
}
@media (max-width: 560px) {
  .attendance-insight-grid--premium,
  .attendance-command-grid {
    grid-template-columns: 1fr;
  }
  .attendance-search-control {
    grid-column: auto;
  }
  .attendance-command-foot,
  .attendance-collapsible-card > summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .attendance-page-actions {
    width: 100%;
  }
  .attendance-page-actions .button,
  .attendance-page-actions .toolbar-chip {
    width: 100%;
    justify-content: center;
  }
}

/* v90 payment order history stays compact until the administrator opens it. */
.billing-history-collapse {
  overflow: hidden;
  border: 1px solid #e0eaf2;
  border-radius: 15px;
  background: #fff;
}
.billing-history-collapse > summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .18s ease;
}
.billing-history-collapse > summary::-webkit-details-marker { display: none; }
.billing-history-collapse > summary:hover { background: #f7fbfd; }
.billing-history-collapse > summary > div:first-child {
  display: grid;
  gap: 3px;
}
.billing-history-collapse > summary strong {
  color: #183e5c;
  font-size: 15px;
}
.billing-history-collapse > summary small {
  color: #8195a7;
  font-size: 11px;
}
.billing-history-collapse-count {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #5d7890;
  font-size: 11px;
  font-weight: 800;
}
.billing-history-collapse-count i {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #eaf8fd;
  color: #199aca;
  font-style: normal;
  transition: transform .18s ease;
}
.billing-history-collapse[open] .billing-history-collapse-count i { transform: rotate(180deg); }
.billing-history-collapse-body {
  border-top: 1px solid #e6eef4;
  padding: 12px;
}

/* v90: one clear subscription entry and a formal QIDIAN payment receipt. */
.stripe-subscription-card--detailed {
  grid-template-columns: minmax(250px, 1fr) minmax(0, 2.65fr) minmax(150px, .56fr) !important;
}
.stripe-subscription-actions {
  display: grid !important;
  align-content: center;
  grid-auto-rows: 42px;
  gap: 8px;
}
.stripe-subscription-actions .button {
  width: 100%;
  min-height: 42px;
  justify-content: center;
}
.customer-plan-card > .button[disabled] {
  border-color: #dce8f1;
  background: #f6f9fb;
  color: #7d91a3;
  opacity: 1;
}
.billing-receipt-document {
  overflow: hidden;
  border: 1px solid #dbe5ee;
  border-radius: 18px;
  background: #fff;
  color: #1f2b3d;
  box-shadow: 0 14px 36px rgba(24, 70, 104, .075);
  scroll-margin-top: 92px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.billing-receipt-document::before {
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #2ba9de 0%, #199aca 100%);
  content: "";
}
.billing-receipt-document.is-highlighted {
  border-color: #67c1e8;
  box-shadow: 0 0 0 4px rgba(43, 169, 222, .12), 0 18px 42px rgba(24, 70, 104, .1);
  transform: translateY(-2px);
}
.billing-receipt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #e4ebf1;
  padding: 23px 25px 20px;
}
.billing-receipt-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.billing-receipt-brand img {
  width: 165px;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}
.billing-receipt-brand > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-left: 1px solid #dce6ee;
  padding-left: 18px;
}
.billing-receipt-brand span {
  color: #2ba9de;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
}
.billing-receipt-brand strong {
  color: #183b57;
  font-size: 18px;
  letter-spacing: -.025em;
}
.billing-receipt-brand small {
  color: #8094a6;
  font-size: 10.5px;
}
.billing-receipt-number {
  display: grid;
  min-width: 180px;
  justify-items: end;
  gap: 5px;
  text-align: right;
}
.billing-receipt-number small,
.billing-receipt-parties span,
.billing-receipt-facts small,
.billing-receipt-totals small {
  color: #8195a7;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .025em;
}
.billing-receipt-number strong {
  color: #173b57;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.billing-receipt-parties {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #e8eef3;
  background: #fbfdff;
}
.billing-receipt-parties > div {
  min-height: 126px;
  border-right: 1px solid #e8eef3;
  padding: 18px 22px;
}
.billing-receipt-parties > div:last-child { border-right: 0; }
.billing-receipt-parties strong {
  display: block;
  margin-top: 8px;
  color: #1c3d58;
  font-size: 13px;
}
.billing-receipt-parties p {
  margin: 7px 0 0;
  color: #5f768b;
  font-size: 11px;
  line-height: 1.62;
}
.billing-receipt-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #e8eef3;
}
.billing-receipt-facts > span {
  display: grid;
  min-height: 72px;
  align-content: center;
  gap: 6px;
  border-right: 1px solid #e8eef3;
  padding: 12px 18px;
}
.billing-receipt-facts > span:last-child { border-right: 0; }
.billing-receipt-facts strong {
  overflow: hidden;
  color: #29475f;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.billing-receipt-table-wrap {
  overflow-x: auto;
  padding: 19px 22px 0;
}
.billing-receipt-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.billing-receipt-table th {
  height: 42px;
  border-top: 1px solid #dde7ef;
  border-bottom: 1px solid #dde7ef;
  background: #f7fafc;
  color: #587188;
  padding: 0 12px;
  text-align: left;
  font-size: 10.5px;
}
.billing-receipt-table th:first-child {
  border-left: 1px solid #dde7ef;
  border-radius: 11px 0 0 0;
  width: 29%;
}
.billing-receipt-table th:nth-child(2) { width: 24%; }
.billing-receipt-table th:nth-child(3) { width: 8%; }
.billing-receipt-table th:nth-child(4),
.billing-receipt-table th:nth-child(5),
.billing-receipt-table th:nth-child(6) { width: 13%; text-align: right; }
.billing-receipt-table th:last-child {
  border-right: 1px solid #dde7ef;
  border-radius: 0 11px 0 0;
}
.billing-receipt-table td {
  min-height: 72px;
  border-bottom: 1px solid #dde7ef;
  padding: 15px 12px;
  color: #345169;
  font-size: 11.5px;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.billing-receipt-table td:first-child { border-left: 1px solid #dde7ef; }
.billing-receipt-table td:last-child { border-right: 1px solid #dde7ef; }
.billing-receipt-table td:nth-child(n+3) { text-align: right; }
.billing-receipt-table td strong {
  display: block;
  color: #183b57;
  font-size: 12.5px;
}
.billing-receipt-table td small {
  display: block;
  margin-top: 5px;
  color: #8094a6;
  font-size: 10px;
  line-height: 1.45;
}
.billing-receipt-totals {
  display: grid;
  width: min(470px, calc(100% - 44px));
  margin: 15px 22px 0 auto;
  border: 1px solid #dfe8ef;
  border-radius: 13px;
  background: #fbfdff;
}
.billing-receipt-totals > span {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e6edf3;
  padding: 0 14px;
}
.billing-receipt-totals > span:last-child { border-bottom: 0; }
.billing-receipt-totals b {
  color: #24445e;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.billing-receipt-totals .billing-receipt-grand-total {
  min-height: 52px;
  background: #eef9fe;
}
.billing-receipt-totals .billing-receipt-grand-total b {
  color: #168dbd;
  font-size: 18px;
}
.billing-receipt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 18px;
  border-top: 1px solid #e8eef3;
  background: #fbfdff;
  padding: 17px 22px 19px;
}
.billing-receipt-footer > div:first-child {
  min-width: 0;
}
.billing-receipt-footer strong {
  color: #26475f;
  font-size: 11px;
}
.billing-receipt-footer p {
  max-width: 650px;
  margin: 5px 0 0;
  color: #7b8fa1;
  font-size: 9.8px;
  line-height: 1.55;
}
.billing-receipt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.billing-receipt-actions a { text-decoration: none; }
.billing-receipt-actions .button { min-width: 130px; }
@media (max-width: 980px) {
  .billing-receipt-parties { grid-template-columns: 1fr 1fr; }
  .billing-receipt-parties > div:nth-child(2) { border-right: 0; }
  .billing-receipt-parties > div:last-child { grid-column: 1 / -1; border-top: 1px solid #e8eef3; }
  .billing-receipt-facts { grid-template-columns: 1fr 1fr; }
  .billing-receipt-facts > span:nth-child(2) { border-right: 0; }
  .billing-receipt-facts > span:nth-child(-n+2) { border-bottom: 1px solid #e8eef3; }
}
@media (max-width: 650px) {
  .billing-receipt-header,
  .billing-receipt-footer { align-items: stretch; flex-direction: column; }
  .billing-receipt-number { justify-items: start; text-align: left; }
  .billing-receipt-brand img { width: 135px; }
  .billing-receipt-parties,
  .billing-receipt-facts { grid-template-columns: 1fr; }
  .billing-receipt-parties > div,
  .billing-receipt-facts > span { border-right: 0; border-bottom: 1px solid #e8eef3; }
  .billing-receipt-parties > div:last-child,
  .billing-receipt-facts > span:last-child { border-bottom: 0; }
  .billing-receipt-totals { width: calc(100% - 30px); margin-right: 15px; }
  .billing-receipt-actions { justify-content: stretch; }
  .billing-receipt-actions .button { flex: 1 1 100%; min-width: 0; justify-content: center; }
}
@media print {
  body.billing-receipt-printing * { visibility: hidden !important; }
  body.billing-receipt-printing .billing-receipt-document.is-print-target,
  body.billing-receipt-printing .billing-receipt-document.is-print-target * { visibility: visible !important; }
  body.billing-receipt-printing .billing-receipt-document.is-print-target {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  body.billing-receipt-printing .billing-receipt-actions { display: none !important; }
  body.billing-receipt-printing .billing-receipt-document::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* v90 single billing entrance */
.billing-documents-button {
  min-width: 132px;
  border-color: rgba(43, 169, 222, .28);
  background: #fff;
  color: #168dbc;
  box-shadow: 0 7px 18px rgba(28, 112, 165, .07);
}
.billing-documents-button:hover {
  border-color: #2ba9de;
  background: #eef9fd;
}
@media (max-width: 650px) {
  .billing-mode-stack { width: 100%; justify-content: flex-start; }
  .billing-documents-button { width: 100%; justify-content: center; }
}

/* v90 final billing alignment and formal document presentation */
.stripe-subscription-card--detailed {
  grid-template-columns: minmax(260px, 1.15fr) minmax(0, 2.85fr) 176px !important;
  align-items: stretch !important;
  gap: 14px !important;
}
.stripe-subscription-details {
  grid-template-columns: repeat(5, minmax(112px, 1fr)) !important;
  align-items: stretch;
}
.stripe-subscription-details > span {
  min-height: 78px;
  height: 100%;
  align-content: center;
}
.stripe-subscription-actions {
  display: flex !important;
  width: 176px;
  min-width: 176px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
.stripe-subscription-actions .button {
  width: 100%;
  min-height: 46px !important;
  height: 46px;
  border-radius: 12px;
}
.billing-mode-stack {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}
.billing-documents-button {
  min-width: 126px;
  min-height: 38px;
}

.billing-receipt-document {
  border-color: #d6e1ea;
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(14, 46, 74, .08);
}
.billing-receipt-document::before { display: none; }
.billing-receipt-header {
  min-height: 126px;
  border-bottom: 0;
  background: linear-gradient(120deg, #0c2945 0%, #123f67 100%);
  color: #fff;
  padding: 26px 28px 24px;
}
.billing-receipt-brand img {
  width: 176px;
  max-height: 52px;
  filter: none;
}
.billing-receipt-brand > div {
  border-left-color: rgba(255,255,255,.22);
}
.billing-receipt-brand span {
  color: #76cbee;
}
.billing-receipt-brand strong,
.billing-receipt-number strong {
  color: #fff;
}
.billing-receipt-brand small,
.billing-receipt-number small {
  color: rgba(255,255,255,.72);
}
.billing-receipt-number .badge.good {
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.14);
  color: #fff;
}
.billing-receipt-parties {
  background: #f8fbfd;
}
.billing-receipt-parties > div {
  min-height: 138px;
  padding: 21px 24px;
}
.billing-receipt-parties span,
.billing-receipt-facts small,
.billing-receipt-totals small {
  color: #6f8497;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.billing-receipt-parties strong {
  margin-top: 9px;
  color: #173a57;
  font-size: 14px;
}
.billing-receipt-facts > span {
  min-height: 76px;
  padding: 14px 20px;
}
.billing-receipt-table-wrap {
  padding: 24px 26px 0;
}
.billing-receipt-table th {
  height: 46px;
  background: #eef4f8;
  color: #47647c;
  font-weight: 850;
}
.billing-receipt-table td {
  padding: 18px 13px;
}
.billing-receipt-totals {
  width: min(480px, calc(100% - 52px));
  margin: 18px 26px 0 auto;
  border-color: #d6e2eb;
  background: #fff;
}
.billing-receipt-totals .billing-receipt-grand-total {
  background: #eaf8fd;
}
.billing-receipt-footer {
  margin-top: 22px;
  background: #f8fbfd;
  padding: 19px 26px 21px;
}
.billing-receipt-footer strong {
  color: #193d59;
  font-size: 12px;
}
.billing-receipt-actions .button {
  min-width: 145px;
}

@media (max-width: 1280px) {
  .stripe-subscription-card--detailed {
    grid-template-columns: 1fr !important;
  }
  .stripe-subscription-details {
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
  }
  .stripe-subscription-actions {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
  }
  .stripe-subscription-actions .button {
    width: min(260px, 100%);
  }
}
@media (max-width: 760px) {
  .stripe-subscription-details {
    grid-template-columns: 1fr 1fr !important;
  }
  .stripe-subscription-actions .button { width: 100%; }
  .billing-receipt-header { min-height: 0; }
}
@media (max-width: 520px) {
  .stripe-subscription-details { grid-template-columns: 1fr !important; }
}
@media print {
  body.billing-receipt-printing .billing-receipt-header {
    background: #0c2945 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* v94 warehouse editing and Stripe external management flows */
.site-card-actions .button.compact {
  width: 100%;
  min-width: 106px;
  justify-content: center;
}
.stripe-subscription-actions--external {
  width: 190px !important;
  min-width: 190px !important;
  display: flex !important;
  flex-direction: column;
  align-content: center;
  gap: 9px;
}
.stripe-subscription-actions--external .button {
  width: 100%;
  min-height: 42px !important;
  height: 42px;
}
.stripe-subscription-actions--external small {
  display: block;
  color: #678096;
  font-size: 10.5px;
  line-height: 1.55;
  text-align: left;
}
@media (max-width: 1280px) {
  .stripe-subscription-actions--external {
    width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 620px) {
  .stripe-subscription-actions--external { width: 100% !important; }
}

/* v94 warehouse editing and separate Stripe management pages */
.site-card-button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.site-card-button-row .button {
  min-width: 104px;
}
@media (max-width: 760px) {
  .site-card-button-row {
    width: 100%;
    justify-content: stretch;
  }
  .site-card-button-row .button { flex: 1 1 140px; }
}

/* v94 plan-change renewal policy */
.plan-change-locked {
  display: grid;
  gap: 7px;
  width: 100%;
}
.plan-change-locked .button,
.customer-plan-card .button[data-stripe-target-plan] {
  width: 100%;
}
.plan-change-locked small {
  color: #7f93a6;
  font-size: 10.5px;
  line-height: 1.45;
  text-align: center;
}

/* v94 controlled renewal selection: upgrades are immediate; reductions only
   become selectable during the final 24 hours and apply next period. */
.billing-deferred-change-form,
.plan-change-pending {
  display: grid;
  gap: 8px;
  width: 100%;
}
.billing-deferred-change-form label {
  display: grid;
  gap: 6px;
  color: #688298;
  font-size: 10.5px;
  font-weight: 800;
}
.billing-deferred-change-form select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d7e8f3;
  border-radius: 11px;
  background: #fff;
  color: #20435e;
  padding: 0 11px;
  font: inherit;
}
.billing-deferred-change-form .button,
.plan-change-pending .button {
  width: 100%;
}
.billing-deferred-change-form small,
.plan-change-pending small {
  color: #758ca0;
  font-size: 10.5px;
  line-height: 1.48;
  text-align: center;
}
.plan-change-pending {
  border: 1px solid #bfe4f6;
  border-radius: 13px;
  background: #effaff;
  padding: 9px;
}
.stripe-pending-plan-detail {
  border-color: #a8ddf3 !important;
  background: linear-gradient(180deg, #eefaff 0%, #f8fdff 100%) !important;
}
.stripe-pending-plan-detail strong {
  color: #087dbd !important;
}
.stripe-subscription-details {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1450px) {
  .stripe-subscription-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .stripe-subscription-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .stripe-subscription-details { grid-template-columns: 1fr; }
}

/* v96 plan-card alignment and billing capacity policy */
.billing-plan-grid--four {
  align-items: stretch;
}
.customer-plan-card {
  height: 100%;
}
.customer-plan-action {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 92px;
  width: 100%;
  margin-top: auto;
  flex-direction: column;
  justify-content: flex-end;
}
.customer-plan-action > .button,
.customer-plan-action > .billing-readonly,
.customer-plan-action > .billing-plan-form,
.customer-plan-action > .billing-deferred-change-form,
.customer-plan-action > .plan-change-locked,
.customer-plan-action > .plan-change-pending {
  width: 100%;
  margin-top: 0 !important;
}
.customer-plan-action > .button,
.customer-plan-action .billing-plan-form .button,
.customer-plan-action .billing-deferred-change-form .button,
.customer-plan-action .plan-change-locked .button,
.customer-plan-action .plan-change-pending .button {
  min-height: 42px;
}
.customer-plan-action .plan-change-locked {
  min-height: 68px;
  justify-content: flex-end;
}
.customer-plan-action .plan-change-locked small {
  order: -1;
  min-height: 20px;
  margin: 0 0 7px;
}
.customer-plan-action .billing-readonly {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce8f1;
  border-radius: 11px;
  background: #f7fbfd;
  color: #7b90a3;
  font-weight: 800;
}
.billing-formula-note {
  display: grid;
  gap: 4px;
}
@media (max-width: 760px) {
  .customer-plan-action {
    min-height: 0;
  }
}

/* v96 final plan-card baseline alignment */
.billing-plan-grid--four > .customer-plan-card {
  min-height: 420px;
}
.customer-plan-action .billing-deferred-change-form label,
.customer-plan-action .plan-change-pending label {
  order: 1;
}
.customer-plan-action .billing-deferred-change-form small,
.customer-plan-action .plan-change-pending small {
  order: 2;
  min-height: 18px;
  margin: 0 0 7px;
}
.customer-plan-action .billing-deferred-change-form .button,
.customer-plan-action .plan-change-pending .button {
  order: 3;
  margin-top: 0;
}

/* v96 plan capacity: retained employee records plus fixed warehouse-site limits */
.billing-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.billing-summary article small {
  display: block;
  margin-top: 4px;
  color: #8ba0b2;
  font-size: 10px;
  line-height: 1.35;
}
.billing-plan-capacity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(112px, .75fr);
  gap: 10px;
  align-items: stretch;
}
.billing-plan-capacity-grid .billing-limit-field {
  margin: 0;
}
.billing-site-limit-field {
  display: grid;
  min-height: 66px;
  align-content: center;
  border: 1px solid #dcebf3;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7fcfe 0%, #eef9fd 100%);
  padding: 10px 12px;
}
.billing-site-limit-field small {
  color: #718ba1;
  font-size: 10.5px;
  font-weight: 750;
}
.billing-site-limit-field strong {
  margin-top: 5px;
  color: #167ead;
  font-size: 17px;
  font-weight: 850;
}
.site-limit-reached {
  border-color: #f2c9c9 !important;
  background: #fff5f5 !important;
  color: #d64c4c !important;
}
.stripe-subscription-details {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1250px) {
  .billing-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stripe-subscription-details { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
  .billing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-plan-capacity-grid { grid-template-columns: 1fr; }
  .stripe-subscription-details { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  .billing-summary,
  .stripe-subscription-details { grid-template-columns: 1fr !important; }
}

/* historical payment-channel compatibility styles */
.payment-channel-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}
.payment-channel-status {
  min-width: 0;
  margin: 0;
}
.gocardless-configuration-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #cfe7f4;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2fbff 0%, #fbfdff 100%);
  padding: 15px 17px;
}
.gocardless-configuration-card > div:first-child {
  display: grid;
  gap: 4px;
}
.gocardless-configuration-card h3 {
  margin: 0;
  color: #173650;
  font-size: 14px;
}
.gocardless-configuration-card p {
  margin: 0;
  color: #6f879b;
  font-size: 12px;
  line-height: 1.55;
}
.gocardless-configuration-card.warn {
  border-color: #f1ddbe;
  background: linear-gradient(135deg, #fffaf1 0%, #fffdf9 100%);
}
.gocardless-configuration-card.bad {
  border-color: #dce8ef;
  background: #f8fbfd;
}
.billing-channel-settings {
  margin-top: 22px;
  border-top: 1px solid #edf3f7;
  padding-top: 20px;
}
.billing-channel-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.billing-channel-setting-card {
  min-width: 0;
  border: 1px solid #dfeaf2;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  padding: 16px;
  box-shadow: 0 10px 24px rgba(26, 76, 110, .045);
}
.billing-channel-setting-card--zelle {
  border-color: rgba(111, 58, 190, .18);
}
.billing-channel-setting-card--manual {
  background: #fafcfd;
}
.billing-channel-setting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.billing-channel-setting-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.billing-channel-setting-head strong,
.customer-payment-channel strong {
  display: block;
  color: #173650;
  font-size: 13px;
}
.billing-channel-setting-head small,
.customer-payment-channel small {
  display: block;
  margin-top: 2px;
  color: #8297a9;
  font-size: 10.5px;
  line-height: 1.45;
}
.billing-channel-setting-card > p {
  margin: 0;
  color: #71879a;
  font-size: 11px;
  line-height: 1.6;
}
.payment-channel-mark {
  display: inline-grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: #edf6fb;
  color: #486b84;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.payment-channel-mark--stripe {
  background: #edf3ff;
  color: #635bff;
}
.payment-channel-mark--ach {
  background: #eaf8fd;
  color: #168dbd;
}
.payment-channel-mark--zelle {
  background: #f3edff;
  color: #6d39b8;
  font-size: 15px;
}
.billing-zelle-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.billing-zelle-fields label {
  display: grid;
  gap: 5px;
  color: #6f879f;
  font-size: 10.5px;
  font-weight: 750;
}
.billing-zelle-fields label.wide {
  grid-column: 1 / -1;
}
.billing-zelle-fields input,
.billing-zelle-fields textarea {
  width: 100%;
}
.billing-zelle-fields textarea {
  min-height: 90px;
  resize: vertical;
}
.billing-channel-save {
  justify-content: flex-end;
  margin-top: 14px;
}
.customer-payment-channel-wrap {
  margin-bottom: 18px;
}
.customer-payment-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.customer-payment-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  border: 1px solid #dfeaf2;
  border-radius: 14px;
  background: #fbfdff;
  padding: 11px 12px;
}
.customer-payment-channel.good {
  border-color: rgba(43, 169, 222, .26);
  background: linear-gradient(135deg, #f1fbff 0%, #fbfeff 100%);
}
.customer-payment-channel.warn {
  border-color: #eed8b8;
  background: #fffaf2;
}
.customer-payment-channel.muted {
  opacity: .72;
}
.customer-payment-channel .payment-channel-mark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}
.customer-payment-channel .badge {
  white-space: nowrap;
}
.customer-payment-channel-wrap > .stripe-status-actions {
  margin-top: 10px;
}
.billing-plan-form--providers {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.billing-provider-grid {
  display: grid;
  gap: 7px;
}
.billing-provider-button {
  display: grid;
  width: 100%;
  min-height: 48px;
  align-content: center;
  justify-items: start;
  gap: 2px;
  border: 1px solid #dce8f1;
  border-radius: 12px;
  background: #fff;
  color: #173650;
  padding: 8px 11px;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.billing-provider-button:hover {
  border-color: #8fd3ef;
  background: #f3fbff;
  box-shadow: 0 8px 20px rgba(43, 169, 222, .11);
  transform: translateY(-1px);
}
.billing-provider-button strong {
  font-size: 12px;
  font-weight: 850;
}
.billing-provider-button small {
  color: #7d91a4;
  font-size: 9.8px;
  line-height: 1.35;
}
.billing-provider-button--stripe {
  border-color: rgba(99, 91, 255, .24);
}
.billing-provider-button--ach {
  border-color: rgba(43, 169, 222, .3);
}
.billing-provider-button--zelle {
  border-color: rgba(109, 57, 184, .24);
}
.billing-provider-button--manual {
  background: #fafcfd;
}
.gocardless-subscription-card {
  border-color: rgba(43, 169, 222, .28);
}
.gocardless-order-card {
  border-color: rgba(43, 169, 222, .28);
}
.zelle-order-card {
  border-color: rgba(109, 57, 184, .22);
}
.billing-conversion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.billing-conversion-actions .billing-plan-form {
  margin: 0;
}

@media (max-width: 1280px) {
  .billing-channel-settings-grid { grid-template-columns: 1fr 1fr; }
  .billing-channel-setting-card--manual { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .payment-channel-status-grid,
  .customer-payment-channels { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .billing-channel-settings-grid,
  .billing-zelle-fields { grid-template-columns: 1fr; }
  .billing-channel-setting-card--manual,
  .billing-zelle-fields label.wide { grid-column: auto; }
  .customer-payment-channel { grid-template-columns: auto minmax(0, 1fr); }
  .customer-payment-channel .badge { grid-column: 2; justify-self: start; }
}

/* v101: QIANYI Firebase migration plus Stripe automatic billing and Zelle manual confirmation */
.payment-channel-status-grid--stripe-only {
  grid-template-columns: minmax(0, 1fr);
}
.billing-channel-settings-grid--zelle-only {
  grid-template-columns: minmax(0, 1fr);
}
.customer-payment-channels--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .customer-payment-channels--two {
    grid-template-columns: 1fr;
  }
}

/* v106 warehouse merge-and-delete controls */
.site-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.site-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--border-color, #e2edf3);
  border-radius: 999px;
  background: var(--surface-muted, #f8fbfd);
  color: var(--gray-color, #6f7d90);
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 700;
}
.site-card-button-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-card-button-row .button.danger {
  border-color: rgba(246, 85, 85, .28);
  background: #fff4f4;
  color: #d93f47;
  box-shadow: none;
}
.site-card-button-row .button.danger:hover {
  border-color: rgba(246, 85, 85, .5);
  background: #ffe9ea;
  color: #bd2f38;
}
.site-delete-warning {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(246, 85, 85, .24);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff8f8, #fffdfd);
  padding: 15px 16px;
}
.site-delete-warning strong {
  color: #a82e37;
  font-size: 14px;
}
.site-delete-warning span {
  color: #785b60;
  font-size: 12px;
  line-height: 1.65;
}

/* v116 large-workforce responsive optimization */
:root {
  --workforce-page-max: 1720px;
  --workforce-table-height: min(68vh, 760px);
  --workforce-compact-row: 54px;
}

.content,
.content.content--schedule {
  width: min(var(--workforce-page-max), calc(100% - 38px));
  padding-left: 28px;
  padding-right: 28px;
}

.large-data-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  border: 1px solid #d9edf7;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(234, 248, 253, .92), rgba(255, 255, 255, .96));
  padding: 10px 13px;
  color: #40647e;
}
.large-data-notice-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #dff4fc;
  color: #168dbd;
  font-size: 17px;
  font-weight: 900;
}
.large-data-notice > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.large-data-notice strong { color: #183b56; font-size: 12px; }
.large-data-notice small { color: #71899c; font-size: 11px; line-height: 1.45; }

.data-command-card {
  margin-bottom: 18px;
  padding: 16px;
  border-color: #dfeaf2;
  background: rgba(255,255,255,.96);
}
.data-command-grid {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(5, minmax(130px, 1fr)) auto;
  gap: 11px;
  align-items: end;
}
.data-command-grid--message { grid-template-columns: minmax(320px, 1fr) minmax(180px, 260px) auto; }
.data-command-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #668096;
  font-size: 10.5px;
  font-weight: 800;
}
.data-command-grid input,
.data-command-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #dbe8f1;
  border-radius: 11px;
  background: #fff;
  color: #213c55;
  padding: 0 12px;
  font-size: 12px;
}
.data-search-control > div {
  position: relative;
}
.data-search-control b {
  position: absolute;
  left: 12px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: #8ca3b6;
  font-size: 17px;
}
.data-search-control input { padding-left: 36px; }
.data-reset-button { min-height: 42px; white-space: nowrap; }
.data-command-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  border-top: 1px solid #edf3f7;
  padding-top: 11px;
  color: #8297a8;
  font-size: 11px;
}
.data-command-foot strong { color: #168dbd; font-size: 13px; }

.data-pagination,
.attendance-pagination {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  border: 1px solid #e0ebf2;
  border-radius: 13px;
  background: #fbfdff;
  padding: 10px 12px;
  color: #688196;
  font-size: 11px;
}
.data-pagination label,
.attendance-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.data-pagination select,
.attendance-pagination select {
  min-width: 70px;
  height: 34px;
  border: 1px solid #d9e7f0;
  border-radius: 9px;
  background: #fff;
  color: #24445f;
  padding: 0 8px;
}
.data-pagination-summary { text-align: center; }
.data-pagination-actions,
.attendance-pagination > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  white-space: nowrap;
}

.scalable-table-wrap,
.schedule-table-wrap,
.attendance-table-wrap,
.payroll-preview-table-wrap,
.payroll-rate-table-wrap,
.employee-table-wrap {
  max-height: var(--workforce-table-height);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.scalable-table-wrap table,
.schedule-table-wrap table,
.attendance-table-wrap table {
  margin: 0;
}
.scalable-table-wrap thead th,
.schedule-table-wrap thead th,
.attendance-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 1px 0 #e2edf3;
}
.scalable-table-wrap tbody tr,
.schedule-table-wrap tbody tr,
.attendance-table-wrap tbody tr {
  min-height: var(--workforce-compact-row);
}
.scalable-table-wrap tbody td,
.schedule-table-wrap tbody td,
.attendance-table-wrap tbody td {
  padding-top: 11px;
  padding-bottom: 11px;
}
.employee-data-table { min-width: 1180px; table-layout: fixed; }
.employee-data-table th:nth-child(1) { width: 210px; }
.employee-data-table th:nth-child(2) { width: 90px; }
.employee-data-table th:nth-child(3) { width: 230px; }
.employee-data-table th:nth-child(4) { width: 145px; }
.employee-data-table th:nth-child(5) { width: 82px; }
.employee-data-table th:nth-child(6) { width: 170px; }
.employee-data-table th:nth-child(7) { width: 110px; }
.employee-data-table th:nth-child(8) { width: 264px; }
.employee-data-table td:nth-child(3),
.employee-data-table td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-data-table .table-actions { flex-wrap: nowrap; }
.employee-data-table .button { min-height: 34px; padding: 0 10px; }
.employee-command-card { scroll-margin-top: 80px; }

.schedule-workspace-card {
  padding-bottom: 16px;
}
.schedule-table-wrap {
  max-height: min(67vh, 720px);
  border-radius: 14px;
}
.schedule-pagination { margin-left: 0; margin-right: 0; }
.schedule-row-outside-page { display: none !important; }
.schedule-command-bar {
  position: sticky;
  top: 68px;
  z-index: 8;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
}

.permission-layout {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: start;
}
.permission-member-list {
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 96px);
  overflow: hidden;
}
.permission-member-toolbar {
  display: grid;
  gap: 7px;
  padding: 0 4px 12px;
}
.permission-member-toolbar label {
  display: grid;
  gap: 5px;
  color: #668096;
  font-size: 10.5px;
  font-weight: 800;
}
.permission-member-toolbar input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dce8f1;
  border-radius: 10px;
  padding: 0 11px;
}
.permission-member-toolbar small { color: #8398aa; }
.permission-member-scroll {
  max-height: calc(100vh - 275px);
  overflow-y: auto;
  padding-right: 3px;
}
.permission-member-list .data-pagination {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
.permission-member-list .data-pagination-summary { text-align: left; }
.permission-member-list .data-pagination-actions { justify-content: space-between; }
.permission-unregistered--collapsible summary,
.scalable-details summary,
.message-compose-collapsible summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.permission-unregistered--collapsible summary::-webkit-details-marker,
.scalable-details summary::-webkit-details-marker,
.message-compose-collapsible summary::-webkit-details-marker { display: none; }
.permission-unregistered--collapsible summary h2,
.scalable-details summary h2,
.message-compose-collapsible summary h2 { margin: 0; color: #193b58; }
.permission-unregistered--collapsible summary p,
.scalable-details summary p,
.message-compose-collapsible summary p { margin: 3px 0 0; color: #7b91a4; font-size: 11px; }
.permission-unregistered--collapsible[open] summary,
.scalable-details[open] summary,
.message-compose-collapsible[open] summary { padding-bottom: 14px; border-bottom: 1px solid #edf3f7; }
.scalable-details-body,
.message-compose-body { padding-top: 14px; }

.message-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.message-record-grid .message { margin: 0; min-height: 150px; }
.message-compose-collapsible { scroll-margin-top: 80px; }
.message-command-card { margin-bottom: 18px; }

.payroll-command-card { margin-bottom: 0; }
.payroll-preview-table-wrap table { min-width: 980px; }
.payroll-rate-table-wrap table { min-width: 1120px; }
.payroll-rate-card { padding: 18px; }
.hourly-rate-form {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(150px, 1fr) minmax(145px, 1fr) auto;
  gap: 9px;
  align-items: end;
}
.hourly-rate-form label { min-width: 0; }
.hourly-rate-form input,
.hourly-rate-form select { width: 100%; }

.group-detail-limit-note {
  margin-bottom: 10px;
  border-left: 3px solid #2ba9de;
  background: #f4fbfe;
  padding: 8px 11px;
  color: #668096;
  font-size: 11px;
}
.group-detail-table-wrap { max-height: 480px; overflow: auto; }
.group-detail-table-wrap thead th { position: sticky; top: 0; z-index: 4; }

.employee-metric-grid,
.dashboard-showcase-metrics,
.payroll-metric-grid,
.organization-metric-grid,
.message-metric-grid,
.attendance-insight-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (max-width: 1380px) {
  .data-command-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .data-search-control { grid-column: span 2; }
  .data-reset-button { width: 100%; }
  .permission-layout { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .content,
  .content.content--schedule { width: calc(100% - 24px); padding-left: 14px; padding-right: 14px; }
  .data-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-search-control { grid-column: 1 / -1; }
  .permission-layout { grid-template-columns: 1fr; }
  .permission-member-list { position: static; max-height: none; }
  .permission-member-scroll { max-height: 420px; }
  .message-record-grid { grid-template-columns: 1fr; }
  .data-pagination,
  .attendance-pagination { grid-template-columns: 1fr; }
  .data-pagination-summary { text-align: left; }
  .data-pagination-actions,
  .attendance-pagination > div { justify-content: space-between; }
  .schedule-command-bar { position: static; }
}
@media (max-width: 680px) {
  .data-command-grid { grid-template-columns: 1fr; }
  .data-search-control { grid-column: auto; }
  .data-command-foot { flex-direction: column; }
  .hourly-rate-form { grid-template-columns: 1fr; }
  .large-data-notice { align-items: flex-start; }
  .employee-metric-grid,
  .dashboard-showcase-metrics,
  .payroll-metric-grid,
  .organization-metric-grid,
  .message-metric-grid,
  .attendance-insight-grid { grid-template-columns: 1fr; }
}

/* v116 final alignment for large employee datasets */
.payroll-command-card .data-command-grid {
  grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(130px, 1fr)) auto;
}
.payroll-preview-table-wrap td:last-child,
.payroll-preview-table-wrap th:last-child {
  text-align: right;
}
.payroll-amount-value {
  color: #173650;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.overview-metric b,
.risk-count,
.table-number-link,
.section-pill,
table td {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1380px) {
  .payroll-command-card .data-command-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}
@media (max-width: 1080px) {
  .payroll-command-card .data-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .payroll-command-card .data-command-grid {
    grid-template-columns: 1fr;
  }
}

/* v116 exception and high-volume finishing refinements */
.exception-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.exception-page-stack { gap: 16px; }
.exception-list-card { scroll-margin-top: 84px; }
.exception-table-wrap {
  max-height: min(62vh, 650px);
  overflow: auto;
  scrollbar-gutter: stable;
}
.exception-table-wrap table { min-width: 760px; }
.exception-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fbfd;
  box-shadow: 0 1px 0 #e2edf3;
}
.exception-table-wrap .employee-cell { min-width: 210px; }
.exception-table-wrap .button.compact { white-space: nowrap; }

@media (min-width: 1081px) {
  .employee-command-card,
  .payroll-command-card,
  .message-command-card {
    position: sticky;
    top: 12px;
    z-index: 9;
    box-shadow: 0 14px 34px rgba(31, 83, 111, .09);
    backdrop-filter: blur(16px);
  }
}

/* v118 authenticated startup recovery */
.startup-recovery {
  display: grid;
  gap: 16px;
}
.startup-recovery h1 {
  margin: 0;
}
.startup-recovery p {
  margin: 0;
  color: var(--text-muted, #6f7d90);
  line-height: 1.7;
}
.startup-recovery-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.startup-recovery-code {
  overflow-wrap: anywhere;
  color: #7d91a5;
  font-size: 11px;
}
@media (max-width: 560px) {
  .startup-recovery-actions { grid-template-columns: 1fr; }
}

/* v120 large-workforce loading isolation and recovery */
.tenant-data-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid #d9eaf4;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 22px rgba(31,83,111,.055);
  color: #2f5872;
}
.tenant-data-status > div,
.tenant-data-status.is-loading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tenant-data-status strong { color: #1f2b3d; font-size: 13px; }
.tenant-data-status span { color: #6f7d90; font-size: 12px; }
.tenant-data-status.is-warning {
  border-color: #f5d8d8;
  background: #fffafa;
}
.tenant-data-spinner {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 2px solid #d9edf6;
  border-top-color: #2ba9de;
  border-radius: 999px;
  animation: tenant-data-spin .8s linear infinite;
}
@keyframes tenant-data-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .tenant-data-status,
  .tenant-data-status > div { align-items: flex-start; flex-direction: column; }
  .tenant-data-status .button { width: 100%; }
}


/* v125 self-owned interface parity release marker. */

/* =====================================================================
   QIDIAN Commercial v125 — self-owned interface alignment
   Source of truth: qidian-ios-testflight/src/styles/global.css,
   layout/layout.css, and styles/admin.css.
   Business logic, API payloads, D1 data, and permissions are unchanged.
   ===================================================================== */
:root {
  color-scheme: light;
  --primary-color: #2ba9de;
  --primary-hover: #199aca;
  --primary-soft: #eaf8fd;
  --danger-color: #f65555;
  --warning-color: #e56f16;
  --success-color: #0e9277;
  --background-color: #f3f8fb;
  --card-color: #ffffff;
  --text-color: #1f2b3d;
  --gray-color: #6f7d90;
  --border-color: #e2edf3;
  --card-radius: 18px;
  --control-radius: 10px;
  --card-shadow: 0 10px 32px rgba(31, 83, 111, .07);

  --navy: #1f2b3d;
  --navy-2: #26384b;
  --blue: #2ba9de;
  --cyan: #2ba9de;
  --pale-blue: #eaf8fd;
  --surface: #fff;
  --bg: #f3f8fb;
  --line: #e2edf3;
  --text: #1f2b3d;
  --muted: #6f7d90;
  --good: #0e9277;
  --warn: #e56f16;
  --bad: #f65555;
  --purple: #168dbd;
  --shadow: var(--card-shadow);
  --workforce-page-max: 1680px;
  --workforce-table-height: min(68vh, 760px);
  --workforce-compact-row: 52px;

  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text-color);
  background: var(--background-color);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  background: var(--background-color);
  color: var(--text-color);
}

body {
  background:
    radial-gradient(circle at 92% 0%, rgba(43, 169, 222, .075), transparent 30%),
    var(--background-color);
}

/* Crisp rendering: remove the stacked blur effects that made the UI hazy. */
.topbar,
.schedule-command-bar,
.employee-command-card,
.payroll-command-card,
.message-command-card,
.workspace-floating-controls,
.pagination,
.action-dialog::backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ------------------------------ Shell ------------------------------ */
.app-shell {
  min-height: 100vh;
  grid-template-columns: 228px minmax(0, 1fr);
  background:
    radial-gradient(circle at 100% 0%, rgba(43, 169, 222, .08), transparent 29%),
    #f3f8fb;
}

.sidebar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  width: 228px;
  height: 100vh;
  padding: 0;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid #e3edf2;
  background: #fff;
  box-shadow: 8px 0 28px rgba(35, 76, 100, .035);
}

.sidebar .brand {
  display: flex;
  min-height: 96px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eef3f6;
}

.sidebar .brand-full-logo {
  display: block;
  width: 182px;
  max-width: 100%;
  height: 68px;
  object-fit: contain;
}

.company-switch,
.sidebar-scope {
  margin: 12px 14px 8px;
  padding: 12px 14px;
  border: 1px solid #e2edf3;
  border-radius: 12px;
  background: #fbfdfe;
  box-shadow: none;
}

.sidebar-scope { margin-top: 0; }

.company-switch label,
.sidebar-scope span {
  color: #8190a2;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .03em;
}

.company-switch strong,
.sidebar-scope strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #263247;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-switch select {
  min-height: 34px;
  margin-top: 5px;
  border: 1px solid #dce8ee;
  border-radius: 9px;
  background: #fff;
  color: #263247;
  font-size: 12px;
  font-weight: 750;
}

.sidebar-section-label {
  margin: 9px 20px 7px;
  color: #8a99aa;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  padding: 0 14px;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 7px;
}

.nav button {
  display: flex;
  width: 100%;
  min-height: 47px;
  padding: 0 15px;
  align-items: center;
  gap: 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #4f5e72;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  box-shadow: none;
  transform: none;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}

.nav button:hover {
  transform: translateX(1px);
  background: #f0f9fd;
  color: #168dbd;
}

.nav button.active {
  border-color: transparent;
  background: linear-gradient(100deg, #2ba9de 0%, #35b3e4 100%);
  color: #fff;
  box-shadow: 0 9px 20px rgba(43, 169, 222, .23);
  transform: none;
}

.nav-icon {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 0;
  background: transparent !important;
  color: currentColor;
  font-size: 17px;
  font-weight: 800;
}

.sidebar-footer,
.sidebar-footer.sidebar-footer--logout-only {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 14px 12px 22px;
  border-top: 1px solid #eef3f6;
}

.sidebar-footer.sidebar-footer--logout-only .button,
.sidebar-footer.sidebar-footer--logout-only .button.danger,
.sidebar .button.danger {
  width: 100%;
  min-height: 42px;
  border: 1px solid #ffd6d9;
  border-radius: 9px;
  background: #fff5f6;
  color: #d74852;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
}

.sidebar-footer.sidebar-footer--logout-only .button:hover,
.sidebar-footer.sidebar-footer--logout-only .button.danger:hover,
.sidebar .button.danger:hover {
  border-color: #f4aeb3;
  background: #ffecee;
  color: #d74852;
}

.main { min-width: 0; }

.topbar,
.topbar.topbar--floating-controls,
.app-shell > .main > .topbar.topbar--floating-controls {
  position: sticky;
  z-index: 80;
  top: 0;
  display: flex;
  min-height: 68px;
  padding: 0 30px;
  align-items: center;
  justify-content: flex-end;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls,
.workspace-floating-controls {
  position: fixed !important;
  z-index: 1000;
  top: max(16px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  width: auto;
  padding: 0;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control {
  position: relative;
  display: flex;
  width: auto;
  min-width: 0;
  height: auto;
}

.language-picker,
.workspace-floating-controls .language-picker {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #dfeaf0;
  border-radius: 13px;
  background: #fff;
  color: #50677d;
  box-shadow: 0 8px 24px rgba(31, 83, 111, .08);
}

.language-picker select,
.workspace-floating-controls .language-picker select {
  min-width: 65px;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: #50677d;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.management-profile-button,
.management-profile-button--avatar-only,
.workspace-floating-controls .management-profile-button {
  display: grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 3px;
  place-items: center;
  border: 1px solid #dfeaf0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 83, 111, .10);
}

.management-profile-button:hover,
.management-profile-button--avatar-only:hover {
  border-color: #8fd3ee;
  background: #fff;
  transform: translateY(-1px);
}

.management-profile-menu {
  top: calc(100% + 10px);
  right: 0;
  width: 288px;
  padding: 9px;
  border: 1px solid #dfeaf0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(25, 59, 79, .17);
}

.content,
.content.content--schedule {
  width: min(1680px, 100%);
  margin: 0 auto;
  padding: 30px 30px 56px;
}

/* -------------------------- Titles and actions -------------------------- */
.premium-title-row,
.schedule-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.premium-title-row h1,
.schedule-page-heading h1,
.title-row h1 {
  margin: 0;
  color: #1f2b3d;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.premium-title-row p,
.schedule-page-heading p,
.title-row p {
  margin: 7px 0 0;
  color: #7b879b;
  font-size: 14px;
  line-height: 1.55;
}

.section-kicker,
.title-kicker,
.hero-kicker,
.billing-plan-kicker {
  color: #2ba9de;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
}

.page-toolbar-inline,
.title-actions,
.employee-header-actions,
.attendance-page-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.page-shortcut-bar,
.page-section-nav {
  min-height: 50px;
  margin-bottom: 18px;
  padding: 6px 9px;
  border: 1px solid #e4edf3;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(31, 83, 111, .045);
}

.page-shortcut-link,
.page-section-link {
  min-height: 36px;
  border-radius: 9px;
  background: transparent;
  color: #607387;
  font-size: 12px;
  font-weight: 750;
}

.page-shortcut-link:hover,
.page-section-link:hover,
.page-shortcut-link.active,
.page-section-link.active {
  background: #eaf8fd;
  color: #168dbd;
}

/* ------------------------------ Cards ------------------------------ */
.card,
.premium-section,
.dashboard-analytics-card,
.employee-list-card,
.compact-setting-card,
.attendance-records-card,
.schedule-workspace-card,
.payroll-preview-card,
.payroll-rate-card,
.message-records-card,
.enterprise-profile-card,
.billing-panel,
.billing-admin-card,
.stripe-subscription-card,
.billing-record-panel,
.site-card,
.permission-member-list,
.permission-editor,
.worker-registration-card,
.worker-messages-card,
.worker-profile-card,
.worker-account-card {
  border: 1px solid #e4edf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(31, 83, 111, .07);
}

.card,
.premium-section,
.dashboard-analytics-card,
.employee-list-card,
.compact-setting-card,
.attendance-records-card,
.schedule-workspace-card,
.payroll-preview-card,
.payroll-rate-card,
.message-records-card,
.enterprise-profile-card,
.billing-panel,
.billing-admin-card,
.stripe-subscription-card,
.billing-record-panel {
  padding: 20px;
}

.section-heading,
.premium-section-heading,
.attendance-records-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.section-heading h2,
.premium-section-heading h2,
.attendance-records-heading h2,
.compact-setting-main h2 {
  margin: 0;
  color: #183551;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.section-heading p,
.premium-section-heading p,
.attendance-records-heading p,
.compact-setting-main p {
  margin: 6px 0 0;
  color: #7b879b;
  font-size: 12px;
  line-height: 1.55;
}

.section-pill {
  display: inline-flex;
  min-height: 28px;
  padding: 0 10px;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: #eaf8fd;
  color: #168dbd;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

/* ------------------------------ Metrics ------------------------------ */
.overview-metrics,
.dashboard-showcase-metrics,
.employee-metric-grid,
.attendance-insight-grid,
.payroll-metric-grid,
.organization-metric-grid,
.message-metric-grid,
.platform-metrics {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.dashboard-showcase-metrics { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.employee-metric-grid { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.attendance-insight-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); }

.overview-metric {
  position: relative;
  display: flex;
  min-height: 98px;
  padding: 17px 18px;
  overflow: hidden;
  align-items: center;
  border: 1px solid #e4edf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(31, 83, 111, .065);
  color: inherit;
  text-align: left;
}

.overview-metric::after {
  position: absolute;
  right: -30px;
  bottom: -45px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--metric-soft, #eaf8fd);
  content: "";
  opacity: .7;
}

.overview-metric:hover,
.overview-metric.is-clickable:hover {
  transform: translateY(-2px);
  border-color: var(--metric-color, #2ba9de);
  box-shadow: 0 12px 34px rgba(26, 73, 102, .11);
}

.overview-metric .metric-icon,
.metric-icon {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-right: 13px;
  place-items: center;
  border-radius: 13px;
  background: var(--metric-soft, #eaf8fd);
  color: var(--metric-color, #2ba9de);
  font-size: 18px;
  font-weight: 850;
}

.overview-metric > div,
.overview-metric > span:not(.metric-icon) {
  position: relative;
  z-index: 1;
}

.overview-metric span { color: #6c788c; font-size: 12px; font-weight: 650; }
.overview-metric b { margin-top: 6px; color: #1f2b3d; font-size: 27px; line-height: 1; letter-spacing: -.02em; }
.overview-metric small { margin-top: 6px; color: #8795a6; font-size: 10px; line-height: 1.4; }

/* ------------------------------ Dashboard ------------------------------ */
.dashboard-showcase-grid,
.dashboard-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-analytics-card {
  min-width: 0;
  overflow: visible;
}

.dashboard-analytics-card .section-heading {
  min-height: 104px;
  margin: -20px -20px 0;
  padding: 21px 22px 17px;
  border-bottom: 1px solid #e9eff4;
  background: linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
  border-radius: 18px 18px 0 0;
}

.ring-grid,
.ring-panel {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(270px, 1.1fr);
  min-height: 350px;
  align-items: center;
  gap: 10px;
  padding: 18px 0 2px;
}

.ring {
  width: 244px;
  height: 244px;
  margin: 0 auto;
  border-width: 28px;
  box-shadow: none;
}

.ring-content strong { color: #172033; font-size: 31px; }
.ring-content span,
.ring-content small { color: #7b879b; }

.legend,
.dashboard-metric-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.legend-row {
  display: grid;
  min-height: 52px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #e8eef3;
  border-radius: 10px;
  background: #fbfdfe;
  color: #566174;
}

.legend-row:hover {
  transform: translateY(-1px);
  border-color: #d3e8f1;
  box-shadow: 0 7px 18px rgba(26, 73, 102, .07);
}

.dashboard-shift-panels {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: #f7fafc;
}

.dashboard-shift-panel {
  overflow: hidden;
  border: 1px solid #e1e9ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.shift-panel-header {
  min-height: 54px;
  padding: 10px 14px;
  border-bottom: 1px solid #e8eef3;
  background: #fff;
}

.shift-panel-title strong { color: #263247; font-size: 14px; }
.shift-panel-title small,
.shift-panel-summary span { color: #778397; font-size: 11px; }

.group-shift-table-wrap,
.group-detail-table-wrap {
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

/* ------------------------------ Controls ------------------------------ */
button,
input,
select,
textarea { font: inherit; }

input,
select,
textarea {
  border: 1px solid #d8e5ec;
  border-radius: 10px;
  background: #fff;
  color: #253044;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #2ba9de;
  box-shadow: 0 0 0 3px rgba(43, 169, 222, .12);
}

.button {
  display: inline-flex;
  min-height: 42px;
  padding: 0 17px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(105deg, #2ba9de, #33b1e1);
  color: #fff;
  box-shadow: 0 6px 16px rgba(43, 169, 222, .20);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: none;
}

.button.secondary {
  border-color: #cfdbe4;
  background: #fff;
  color: #168dbd;
  box-shadow: none;
}

.button.secondary:hover:not(:disabled) {
  border-color: #2ba9de;
  background: #f0faff;
  color: #168dbd;
}

.button.danger {
  border-color: transparent;
  background: #f65555;
  color: #fff;
  box-shadow: 0 5px 14px rgba(246, 85, 85, .16);
}

.button.compact,
.table-actions .button,
.schedule-row-action,
.billing-row-action {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
}

.data-command-card,
.employee-command-card,
.payroll-command-card,
.message-command-card,
.schedule-command-bar,
.attendance-command-card {
  padding: 18px 20px 16px;
  border: 1px solid #e4edf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(31, 83, 111, .055);
}

@media (min-width: 1081px) {
  .employee-command-card,
  .payroll-command-card,
  .message-command-card {
    position: sticky;
    top: 12px;
    z-index: 9;
    background: #fff;
    box-shadow: 0 12px 30px rgba(31, 83, 111, .08);
  }
}

.data-command-grid input,
.data-command-grid select,
.schedule-filter-bar input,
.schedule-filter-bar select,
.attendance-command-grid input,
.attendance-command-grid select {
  min-height: 42px;
  border-radius: 10px;
  font-size: 13px;
}

.data-command-grid label,
.schedule-filter-bar label,
.attendance-command-grid label {
  color: #5e6b7e;
  font-size: 11px;
  font-weight: 750;
}

/* ------------------------------ Tables ------------------------------ */
.table-wrap,
.premium-table-wrap,
.scalable-table-wrap,
.schedule-table-wrap,
.attendance-table-wrap,
.employee-table-wrap,
.payroll-preview-table-wrap,
.payroll-rate-table-wrap,
.exception-table-wrap {
  overflow: auto;
  border: 1px solid #e4edf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  scrollbar-gutter: stable;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: #3c5974;
  font-size: 12px;
}

th,
td,
table th,
table td {
  height: 50px;
  padding: 11px 12px;
  border-bottom: 1px solid #edf2f7;
  color: #4e6b86;
  text-align: left;
  white-space: nowrap;
}

th,
table th,
.scalable-table-wrap thead th,
.schedule-table-wrap thead th,
.attendance-table-wrap thead th,
.exception-table-wrap thead th {
  position: sticky;
  z-index: 5;
  top: 0;
  height: 47px;
  background: #f8fbfd;
  color: #778397;
  box-shadow: 0 1px 0 #e2edf3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

tbody tr:hover td { background: #fbfdfe; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { color: #1e3d59; font-weight: 650; }

.badge {
  display: inline-flex;
  min-height: 24px;
  padding: 3px 9px;
  align-items: center;
  border-radius: 999px;
  background: #edf6ff;
  color: #3785c5;
  font-size: 10px;
  font-weight: 750;
}
.badge.good { background: #e7f7f2; color: #0e9277; }
.badge.warn { background: #fff4e8; color: #d86c17; }
.badge.bad { background: #fff0f0; color: #e44747; }
.badge.muted { background: #eef3f6; color: #6f7d90; }

.data-pagination,
.attendance-pagination {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr auto;
  min-height: 58px;
  margin-top: 12px;
  padding: 10px 14px;
  align-items: center;
  gap: 16px;
  border: 1px solid #dfe9ef;
  border-radius: 14px;
  background: #fff;
  color: #657287;
  box-shadow: 0 8px 24px rgba(31, 66, 88, .06);
  font-size: 12px;
}

/* ------------------------------ Dialogs ------------------------------ */
.action-dialog,
.settings-dialog-card,
.employee-dialog-card,
.billing-receipt-document {
  border: 1px solid #dfeaf0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(25, 59, 79, .18);
}

.action-dialog::backdrop,
.settings-dialog::backdrop,
.employee-editor-dialog::backdrop {
  background: rgba(31, 43, 61, .38);
}

.settings-dialog-head,
.employee-dialog-head {
  border-bottom: 1px solid #edf2f5;
  background: #fbfdfe;
}

/* ------------------------------ Billing ------------------------------ */
.stripe-configuration-card,
.stripe-subscription-card,
.billing-record-summary,
.customer-plan-card,
.billing-documents-button {
  border: 1px solid #e4edf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(31, 83, 111, .055);
}

.stripe-configuration-card,
.stripe-subscription-card { background: linear-gradient(135deg, #f5fcff, #fff); }

.customer-plan-card {
  display: flex;
  min-height: 360px;
  padding: 21px 22px;
  flex-direction: column;
  border-color: #e4edf3;
  box-shadow: 0 9px 26px rgba(31, 83, 111, .055);
}

.customer-plan-card.is-current {
  border-color: #2ba9de;
  box-shadow: 0 12px 32px rgba(43, 169, 222, .13);
}

.customer-plan-card .button,
.customer-plan-action {
  width: 100%;
  margin-top: auto;
  min-height: 42px;
}

.customer-plan-price { color: #172033; }
.customer-plan-features { color: #536174; }

.billing-plan-grid--four,
.billing-plan-grid {
  gap: 14px;
}

.billing-record-panel-heading,
.billing-record-toolbar {
  border-bottom-color: #e9eff4;
  background: #fbfdfe;
}

.billing-receipt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.billing-receipt-actions .button {
  min-width: 138px;
}

/* ------------------------------ Auth and worker ------------------------------ */
.auth-shell {
  min-height: 100vh;
  padding: 28px;
  background:
    radial-gradient(circle at 92% 0%, rgba(43, 169, 222, .08), transparent 30%),
    #f3f8fb;
}

.auth-card {
  width: min(480px, 100%);
  padding: 34px;
  border: 1px solid #e2edf3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(31, 83, 111, .12);
}

.auth-card h1 { color: #1f2b3d; font-size: 26px; }
.auth-card p { color: #6f7d90; }
.auth-brand { width: 176px; }

.worker-portal {
  background:
    radial-gradient(circle at 92% 0%, rgba(43, 169, 222, .08), transparent 30%),
    #f3f8fb;
}

.worker-registration-card,
.worker-messages-card,
.worker-profile-card,
.worker-account-card {
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(31, 83, 111, .07);
}

.worker-primary-entry,
.worker-wide-button {
  border-radius: 10px;
  background: linear-gradient(105deg, #2ba9de, #33b1e1);
  box-shadow: 0 6px 16px rgba(43, 169, 222, .2);
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1380px) {
  .dashboard-showcase-metrics { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .attendance-insight-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 1080px) {
  .content,
  .content.content--schedule {
    width: 100%;
    padding: 22px 16px 48px;
  }
  .dashboard-showcase-grid,
  .dashboard-analysis-grid,
  .ring-panel,
  .ring-grid { grid-template-columns: 1fr; }
  .ring-panel,
  .ring-grid { min-height: auto; }
  .data-pagination,
  .attendance-pagination { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 10px 12px 12px;
    border-right: 0;
    border-bottom: 1px solid #e3edf2;
    background: #fff;
    box-shadow: 0 8px 24px rgba(35, 76, 100, .04);
    transform: none;
  }
  .sidebar .brand {
    min-height: 54px;
    margin: 0;
    padding: 0 4px 10px;
    justify-content: flex-start;
    border-bottom: 0;
  }
  .sidebar .brand-full-logo { width: 150px; height: auto; }
  .company-switch,
  .sidebar-scope,
  .sidebar-section-label,
  .sidebar-footer { display: none; }
  .nav {
    display: flex;
    padding: 0;
    gap: 7px;
    overflow-x: auto;
  }
  .nav button {
    width: auto;
    min-height: 40px;
    flex: 0 0 auto;
    padding: 0 13px;
    font-size: 13px;
  }
}

@media (max-width: 760px) {
  .premium-title-row,
  .schedule-page-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .premium-title-row h1,
  .schedule-page-heading h1 { font-size: 25px; }
  .dashboard-showcase-metrics,
  .employee-metric-grid,
  .attendance-insight-grid,
  .payroll-metric-grid,
  .organization-metric-grid,
  .message-metric-grid { grid-template-columns: 1fr; }
  .page-toolbar-inline,
  .title-actions,
  .employee-header-actions,
  .attendance-page-actions { justify-content: flex-start; }
  .page-toolbar-inline .button,
  .title-actions .button { flex: 1 1 auto; }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    gap: 7px;
  }
  .language-picker,
  .workspace-floating-controls .language-picker,
  .management-profile-button,
  .management-profile-button--avatar-only {
    min-height: 42px;
    height: 42px;
  }
  .customer-plan-card { min-height: auto; }
}

@media (max-width: 520px) {
  #permission-member-dialog .settings-dialog-card,
  .settings-dialog-card,
  .platform-organization-edit-dialog .settings-dialog-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  #permission-member-dialog .settings-dialog-card {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }
  #permission-member-dialog .settings-dialog-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .content,
  .content.content--schedule { padding: 18px 10px 42px; }
  .card,
  .premium-section,
  .dashboard-analytics-card,
  .employee-list-card,
  .attendance-records-card,
  .schedule-workspace-card { padding: 15px; border-radius: 15px; }
  .overview-metric { min-height: 90px; padding: 15px; }
  .ring { width: 220px; height: 220px; }
  .billing-receipt-actions { justify-content: stretch; }
  .billing-receipt-actions .button { width: 100%; }
}

/* ======================================================================
   QIDIAN v128 — SELF-OWNED INTERFACE PARITY
   Source of truth: qidian-ios-testflight/src/styles and src/layout.
   UI-only layer. Business data, API contracts, permissions, billing,
   registration, scheduling, attendance and payroll logic are unchanged.
   ====================================================================== */
:root {
  --primary-color: #2ba9de;
  --primary-hover: #199aca;
  --primary-soft: #eaf8fd;
  --danger-color: #f65555;
  --warning-color: #e56f16;
  --success-color: #0e9277;
  --background-color: #f3f8fb;
  --card-color: #ffffff;
  --text-color: #1f2b3d;
  --gray-color: #6f7d90;
  --border-color: #e2edf3;
  --card-radius: 18px;
  --control-radius: 10px;
  --card-shadow: 0 10px 32px rgba(31, 83, 111, .07);
  --card-shadow-hover: 0 14px 36px rgba(31, 83, 111, .11);
  --bg: var(--background-color);
  --surface: var(--card-color);
  --text: var(--text-color);
  --muted: var(--gray-color);
  --line: var(--border-color);
  --blue: var(--primary-color);
  --cyan: var(--primary-color);
  --good: var(--success-color);
  --warn: var(--warning-color);
  --bad: var(--danger-color);
  --shadow: var(--card-shadow);
  color: var(--text-color);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html {
  min-width: 320px;
  background: var(--background-color);
  color-scheme: light;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 92% 0%, rgba(43,169,222,.075), transparent 30%),
    var(--background-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Clear, restrained controls */
button, input, select, textarea { font: inherit; }
input, select, textarea {
  border-color: #d8e5ec;
  border-radius: var(--control-radius);
  color: #20313d;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(43,169,222,.14);
}
.button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 9px;
  background: linear-gradient(100deg, #2ba9de 0%, #35b3e4 100%);
  box-shadow: 0 7px 18px rgba(43,169,222,.18);
  font-size: 13px;
  font-weight: 750;
}
.button.secondary {
  border-color: #cfe2ec;
  background: #fff;
  color: #168dbd;
  box-shadow: none;
}
.button.secondary:hover { border-color: #9ed9ef; background: #f0f9fd; }
.button.danger { background: #f65555; box-shadow: none; }
.button.compact { min-height: 34px; padding: 0 12px; font-size: 12px; }

/* Exact self-owned desktop shell */
.app-shell {
  display: grid;
  grid-template-columns: 228px minmax(0,1fr);
  min-height: 100vh;
  background:
    radial-gradient(circle at 100% 0%, rgba(43,169,222,.075), transparent 29%),
    #f3f8fb;
}
.sidebar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  width: 228px;
  height: 100vh;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #e3edf2;
  background: #fff;
  box-shadow: 8px 0 28px rgba(35,76,100,.035);
}
.logo-box {
  display: flex;
  flex: 0 0 96px;
  height: 96px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eef3f6;
}
.logo-box .brand {
  display: flex;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
}
.logo-box .brand-full-logo {
  display: block;
  width: 182px;
  max-width: 100%;
  height: 68px;
  object-fit: contain;
}
.company-switch,
.sidebar-scope {
  margin: 12px 14px 0;
  padding: 11px 12px;
  border: 1px solid #e3edf2;
  border-radius: 11px;
  background: #f8fbfd;
  box-shadow: none;
}
.company-switch label,
.sidebar-scope span {
  gap: 5px;
  color: #8493a5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.company-switch strong,
.sidebar-scope strong {
  overflow: hidden;
  color: #263247;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-switch select {
  min-height: 31px;
  padding: 5px 22px 5px 0;
  border: 0;
  background: transparent;
  color: #263247;
  font-size: 12px;
  font-weight: 750;
  box-shadow: none;
}
.sidebar-section-label {
  margin: 16px 23px 7px;
  color: #8a99aa;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.nav {
  display: flex;
  min-height: 0;
  padding: 0 14px 18px;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
}
.nav button {
  display: flex;
  width: 100%;
  min-height: 47px;
  padding: 0 15px;
  align-items: center;
  gap: 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #4f5e72;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  box-shadow: none;
  transform: none;
  transition: background .18s ease, color .18s ease, transform .15s ease;
}
.nav button:hover {
  transform: translateX(1px);
  border-color: transparent;
  background: #f0f9fd;
  color: #168dbd;
}
.nav button.active {
  border-color: transparent;
  background: linear-gradient(100deg, #2ba9de 0%, #35b3e4 100%);
  color: #fff;
  box-shadow: 0 9px 20px rgba(43,169,222,.23);
}
.nav-icon {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  color: currentColor;
  font-size: 0;
}
.nav-svg { display: block; width: 22px; height: 22px; }
.sidebar-footer {
  flex: 0 0 auto;
  margin: 0 12px;
  padding: 14px 0 22px;
  border-top: 1px solid #eef3f6;
}
.sidebar-footer > .button.danger {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #697588;
  font-size: 14px;
  font-weight: 650;
  box-shadow: none;
}
.sidebar-footer > .button.danger:hover { background: #fff1f1; color: #e44747; }

.main { min-width: 0; }
.app-shell > .main > .topbar.topbar--floating-controls {
  top: max(18px, env(safe-area-inset-top)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  transform: none !important;
  will-change: auto !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls { gap: 12px !important; }
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker {
  width: 78px;
  min-width: 78px;
  height: 38px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid #d8e5ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(35,76,100,.05);
  color: #425168;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.language-picker select {
  min-width: 58px;
  height: 36px;
  padding: 0 20px 0 5px;
  color: #425168;
  font-size: 13px;
  font-weight: 800;
}
.management-profile-button--avatar-only {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2ba9de;
  box-shadow: 0 7px 18px rgba(35,92,119,.2);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.management-profile-button--avatar-only .avatar { width: 40px; height: 40px; }
.management-profile-menu {
  width: 270px;
  padding: 8px;
  border-color: #dfeaf0;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(25,59,79,.17);
}
.management-profile-identity { border-radius: 11px; background: #f7fbfd; }
.management-profile-menu button { min-height: 42px; border-radius: 9px; }
.management-profile-menu button:hover { background: #f1f9fc; color: #168dbd; }

.content,
.content.content--schedule {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 30px 30px 52px;
}

/* Clear hierarchy: no repeated decorative brand line on every page */
.premium-title-row,
.content--schedule .premium-title-row {
  display: flex;
  min-height: 54px;
  margin: 0 0 20px;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
}
.title-kicker { display: none; }
.premium-title-row h1,
.content--schedule .premium-title-row h1 {
  margin: 0;
  color: #1f2b3d;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -.02em;
}
.premium-title-row p,
.content--schedule .premium-title-row p {
  max-width: 760px;
  margin: 7px 0 0;
  color: #7b879b;
  font-size: 14px;
  line-height: 1.55;
}
.title-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.page-shortcut-bar {
  display: flex;
  min-height: 44px;
  margin: -6px 0 20px;
  padding: 5px 6px;
  align-items: center;
  gap: 4px;
  border: 1px solid #e1ebf1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(31,83,111,.045);
}
.page-shortcut-bar > span {
  margin: 0 6px;
  color: #8996a7;
  font-size: 11px;
  font-weight: 750;
}
.page-shortcut-link {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  color: #536176;
  font-size: 12px;
  font-weight: 700;
}
.page-shortcut-link:hover { background: #f0f9fd; color: #168dbd; }
.dashboard-filter-bar { border-radius: 12px; box-shadow: none; }

/* Cards: crisp, quiet and consistent */
.card,
.overview-metric,
.dashboard-analytics-card,
.dashboard-shift-panel,
.site-card,
.message,
.permission-summary,
.settings-summary-link,
.billing-plan,
.billing-subscription-card,
.stripe-subscription-card {
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--card-color);
  box-shadow: var(--card-shadow);
}
.card { padding: 20px; }
.card:hover { filter: none; }
.section-heading {
  display: flex;
  margin-bottom: 18px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.section-heading h2,
.premium-section-heading h2,
.compact-setting-main h2 {
  margin: 0;
  color: #1f2b3d;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.section-heading p,
.premium-section-heading p,
.compact-setting-main p {
  margin: 6px 0 0;
  color: #7b879b;
  font-size: 12px;
  line-height: 1.5;
}
.section-kicker {
  display: block;
  margin-bottom: 6px;
  color: #2ba9de;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}
.section-pill {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #eaf8fd;
  color: #168dbd;
  font-size: 11px;
  font-weight: 750;
}

/* Summary cards follow the self-owned 98px/44px geometry */
.overview-metrics,
.dashboard-showcase-metrics,
.employee-metric-grid,
.payroll-metric-grid,
.organization-metric-grid,
.message-metric-grid,
.attendance-insight-grid {
  gap: 14px;
  margin-bottom: 20px;
}
.overview-metric {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 98px;
  padding: 17px 18px;
  overflow: hidden;
  align-items: center;
  grid-template-columns: none;
  gap: 13px;
  border-radius: 16px;
}
.overview-metric::after { opacity: .45; }
.overview-metric .metric-icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  place-items: center;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 800;
}
.overview-metric > span:not(.metric-icon):not(.dashboard-link-hint) {
  position: absolute;
  top: 18px;
  left: 75px;
  color: #6c788c;
  font-size: 13px;
  font-weight: 600;
}
.overview-metric > b {
  position: absolute;
  top: 46px;
  left: 75px;
  margin: 0;
  color: #1f2b3d;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -.02em;
}
.overview-metric > small {
  position: absolute;
  top: 73px;
  left: 75px;
  right: 14px;
  margin: 0;
  overflow: hidden;
  color: #8b98a8;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-link-hint { display: none; }
.overview-metric.dashboard-link:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  box-shadow: var(--card-shadow-hover);
}

/* Dashboard analysis follows the supplied self-owned Dashboard.jsx geometry */
.dashboard-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.dashboard-analytics-card {
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.dashboard-analytics-card > .section-heading {
  min-height: 108px;
  margin: 0;
  padding: 21px 22px 17px;
  border-bottom: 1px solid #e9eff4;
  background: linear-gradient(180deg,#fff 0%,#fbfdfe 100%);
}
.dashboard-analytics-card .ring-panel {
  display: grid;
  min-height: 350px;
  padding: 18px 22px 22px;
  grid-template-columns: minmax(250px,.9fr) minmax(270px,1.1fr);
  align-items: center;
  gap: 12px;
}
.dashboard-analytics-card .ring {
  width: 224px;
  height: 224px;
  margin: 0 auto;
  box-shadow: none;
}
.dashboard-analytics-card .ring::before { width: 156px; height: 156px; }
.dashboard-analytics-card .ring-content span { font-size: 12px; }
.dashboard-analytics-card .ring-content b { font-size: 31px; }
.legend { gap: 8px; }
.legend-row {
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid #e8eef3;
  border-radius: 10px;
  background: #fbfdfe;
  font-size: 12px;
}
.legend-row:hover { transform: translateY(-1px); border-color: #d3e8f1; box-shadow: 0 7px 18px rgba(26,73,102,.07); }
.legend-row b { font-size: 16px; }
.dashboard-shift-panels { display: grid; gap: 12px; }
.dashboard-shift-panel { overflow: hidden; border-radius: 12px; box-shadow: none; }
.shift-panel-header {
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid #e8eef3;
  background: #fff;
}
.group-shift-table-wrap { border: 0; border-radius: 0; box-shadow: none; }

/* Dense data tools remain usable without looking busy */
.data-command-card,
.employee-command-card,
.payroll-command-card,
.message-command-card,
.attendance-command-card,
.schedule-command-bar {
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31,83,111,.055);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.data-command-grid label,
.filter-field label { color: #526976; font-size: 12px; font-weight: 700; }
.data-command-grid input,
.data-command-grid select,
.filter-field input,
.filter-field select { min-height: 40px; }
.large-data-notice {
  border-color: #dcebf1;
  border-radius: 10px;
  background: #f7fbfd;
  color: #657b8d;
  box-shadow: none;
}

/* Tables: clear light headers, stable row height, no visual haze */
.table-wrap,
.premium-table-wrap,
.scalable-table-wrap,
.group-shift-table-wrap,
.group-detail-table-wrap {
  border: 1px solid #e5edf1;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  scrollbar-gutter: stable;
}
table { width: 100%; color: #20313d; border-collapse: collapse; }
thead th,
table th {
  height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid #e5edf1;
  background: #f5fafc;
  color: #536a77;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .01em;
  text-align: left;
  white-space: nowrap;
}
tbody td,
table td {
  min-height: 54px;
  padding: 13px 12px;
  border-bottom: 1px solid #edf2f5;
  color: #3e5968;
  font-size: 13px;
  line-height: 1.45;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbfd; }
.badge {
  display: inline-flex;
  min-height: 26px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eaf8fd;
  color: #168dbd;
  font-size: 11px;
  font-weight: 750;
}
.badge.good { background: #e7f7f2; color: #0e9277; }
.badge.warn { background: #fff6ea; color: #e56f16; }
.badge.bad { background: #fff0f0; color: #f65555; }
.badge.muted { background: #f1f5f8; color: #6f7d90; }
.employee-avatar-mini { width: 36px; height: 36px; border-radius: 50%; font-size: 12px; }
.table-actions { gap: 7px; }
.data-pagination,
.attendance-pagination {
  min-height: 50px;
  margin-top: 12px;
  padding: 7px 10px;
  border: 0;
  border-top: 1px solid #edf2f5;
  background: #fff;
  box-shadow: none;
}

/* Low-frequency sections are quiet and collapsed until requested */
.scalable-details,
.permission-unregistered--collapsible,
.message-compose-collapsible {
  border-radius: 15px;
  box-shadow: var(--card-shadow);
}
.scalable-details summary,
.permission-unregistered--collapsible summary,
.message-compose-collapsible summary {
  min-height: 54px;
  padding: 0 4px;
}
.scalable-details summary::after,
.permission-unregistered--collapsible summary::after,
.message-compose-collapsible summary::after {
  color: #8a96a7;
}

/* Dialogs and profile editors */
.settings-dialog-card,
.employee-dialog-card,
.action-dialog {
  border: 1px solid #dfeaf0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 68px rgba(25,59,79,.2);
}
.settings-dialog::backdrop,
.employee-editor-dialog::backdrop,
.action-dialog::backdrop { background: rgba(18,33,49,.42); backdrop-filter: none; }
.settings-dialog-head,
.employee-dialog-head { border-bottom-color: #edf2f5; }

/* Enterprise, billing and permissions use the same restrained card system */
.organization-settings-stack,
.workforce-page-stack,
.employee-management-stack,
.permission-layout { gap: 18px; }
.site-card { padding: 18px; border-radius: 15px; }
.billing-plan-grid { gap: 14px; }
.billing-plan {
  display: flex;
  min-height: 330px;
  padding: 20px;
  flex-direction: column;
  border-radius: 15px;
  background: #fff;
  box-shadow: none;
}
.billing-plan.current { border-color: #2ba9de; box-shadow: 0 10px 28px rgba(43,169,222,.10); }
.billing-plan__head h3 { font-size: 18px; }
.billing-plan .billing-price b { color: #1f2b3d; font-size: 28px; }
.billing-plan > .button,
.billing-plan form:last-child,
.billing-plan .billing-readonly { margin-top: auto; }
.billing-summary article { border-radius: 11px; background: #f9fcfd; }
.permission-member-list { border-radius: 15px; }
.permission-member { border-radius: 10px; }
.permission-member.active { border-color: #2ba9de; background: #f0f9fd; }

/* Authentication and worker portal match the self-owned product */
.auth-shell {
  background:
    radial-gradient(circle at 92% 0%, rgba(43,169,222,.08), transparent 30%),
    #f3f8fb;
}
.auth-card {
  width: min(452px,100%);
  padding: 34px;
  border-color: #e2edf3;
  border-radius: 20px;
  box-shadow: 0 20px 54px rgba(31,83,111,.11);
}
.auth-brand { width: 182px; }
.worker-portal {
  background:
    radial-gradient(circle at 92% 0%, rgba(43,169,222,.08), transparent 30%),
    #f3f8fb;
}
.worker-card-main,
.worker-profile-card,
.worker-account-card { border-radius: 18px; box-shadow: var(--card-shadow); }
.worker-drawer { background: #fff; color: #4f5e72; }
.worker-drawer .brand-full-logo { filter: none; }
.worker-drawer nav button { color: #4f5e72; }
.worker-drawer nav button:hover { background: #f0f9fd; color: #168dbd; }
.worker-drawer nav button.active,
.worker-drawer nav button[data-worker-enter-management] {
  background: linear-gradient(100deg,#2ba9de 0%,#35b3e4 100%);
  color: #fff;
}

/* Mobile: use a compact top control row and keep data tables scrollable */
@media (max-width: 1180px) {
  .dashboard-showcase-grid { grid-template-columns: 1fr; }
  .dashboard-analytics-card .ring-panel { grid-template-columns: minmax(220px,260px) minmax(240px,1fr); }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #e3edf2;
    box-shadow: 0 8px 24px rgba(35,76,100,.04);
  }
  .logo-box { height: 72px; flex-basis: 72px; justify-content: flex-start; }
  .logo-box .brand-full-logo { width: 150px; height: 54px; }
  .company-switch, .sidebar-scope, .sidebar-section-label { display: none; }
  .nav { display: flex; padding: 8px 12px 12px; flex-direction: row; overflow-x: auto; }
  .nav button { width: auto; min-width: max-content; min-height: 42px; padding: 0 14px; font-size: 13px; }
  .sidebar-footer { display: none; }
  .content,
  .content.content--schedule { padding: 82px 16px 42px; }
  .dashboard-analytics-card .ring-panel { grid-template-columns: 1fr; }
  .dashboard-analytics-card .legend { width: 100%; }
}
@media (max-width: 680px) {
  .content,
  .content.content--schedule { padding: 76px 12px 32px; }
  .premium-title-row,
  .content--schedule .premium-title-row { align-items: flex-start; flex-direction: column; }
  .premium-title-row h1,
  .content--schedule .premium-title-row h1 { font-size: 24px; }
  .premium-title-row p,
  .content--schedule .premium-title-row p { font-size: 12px; }
  .title-actions { width: 100%; justify-content: flex-start; }
  .page-shortcut-bar { overflow-x: auto; }
  .page-shortcut-bar > span { display: none; }
  .overview-metrics,
  .dashboard-showcase-metrics,
  .employee-metric-grid,
  .payroll-metric-grid,
  .organization-metric-grid,
  .message-metric-grid,
  .attendance-insight-grid { grid-template-columns: 1fr; }
  .dashboard-analytics-card > .section-heading { min-height: 0; padding: 17px; }
  .dashboard-analytics-card .ring-panel { min-height: 0; padding: 14px; }
  .dashboard-analytics-card .ring { width: 198px; height: 198px; }
  .dashboard-analytics-card .ring::before { width: 138px; height: 138px; }
  .card { padding: 16px; border-radius: 16px; }
  .section-heading { align-items: flex-start; }
  .app-shell > .main > .topbar.topbar--floating-controls {
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls { gap: 8px !important; }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker { width: 72px; min-width: 72px; height: 36px; }
  .management-profile-button--avatar-only { width: 42px; height: 42px; }
}

/* Prevent legacy accumulated patches from visually softening the current UI. */
.card,
.overview-metric,
.table-wrap,
.data-command-card,
.employee-command-card,
.payroll-command-card,
.message-command-card { filter: none !important; }

/* v125 final simplification: the self-owned interface does not repeat page links below every title. */
.page-shortcut-bar {
  display: none !important;
}

/* =====================================================================
   v125 — operational polish, audit logs, compact attendance controls
   ===================================================================== */

/* Generated employee avatars follow the self-owned circular one-letter style. */
.employee-avatar-mini,
.schedule-avatar.avatar-tone-1,
.schedule-avatar.avatar-tone-2,
.schedule-avatar.avatar-tone-3,
.schedule-avatar.avatar-tone-4,
.schedule-avatar.avatar-tone-5,
.schedule-avatar.avatar-tone-6,
.schedule-avatar.avatar-tone-7,
.schedule-avatar.avatar-tone-8 {
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(43, 169, 222, .82);
  font-weight: 800;
  letter-spacing: 0;
}
.employee-avatar-mini {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  font-size: 13px;
}

/* Stable, aligned employee action column for active and former employees. */
.employee-data-table th:nth-child(8) { width: 264px; }
.employee-row-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(68px, 1fr));
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 224px;
}
.employee-row-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  white-space: nowrap;
}
.button.success {
  border: 1px solid #b9eadc;
  background: #e7f7f2;
  color: #0e9277;
}
.button.success:hover { background: #d8f2e9; color: #087d67; }

/* Clean group-summary metrics matching the self-owned table presentation. */
.attendance-inline-metric {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 4px;
  margin-right: 5px;
  padding: 3px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #415d72;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.attendance-inline-metric b { color: inherit; font-size: 11px; }
.attendance-inline-metric.is-alert {
  background: #fff5e8;
  color: #e56f16;
  font-weight: 800;
}
.attendance-inline-metric:hover { background: #eaf8fd; color: #168dbd; }
.attendance-rate-chip {
  display: inline-flex;
  min-width: 58px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.attendance-rate-chip.is-good { background: #e7f7f2; color: #0e9277; }
.attendance-rate-chip.is-warn { background: #fff5e8; color: #d86a10; }
.attendance-rate-chip.is-empty { background: #f1f5f8; color: #6f7d90; }

/* Day and night are collapsed by default and expand only on demand. */
.dashboard-shift-panel.is-collapsed .group-shift-table-wrap { display: none; }
.shift-panel-toggle { cursor: pointer; }
.shift-panel-toggle .shift-panel-chevron {
  transition: transform .18s ease;
}
.dashboard-shift-panel:not(.is-collapsed) .shift-panel-chevron { transform: rotate(180deg); }

/* Attendance settings appear once, before the daily records; import lives in a dialog. */
.attendance-rules-card {
  order: -1;
  min-height: 104px;
}
.attendance-rules-card .compact-setting-main { min-width: 290px; }
.attendance-rules-card .compact-setting-actions { justify-content: flex-end; }
#attendance-import-dialog .settings-dialog-card { width: min(920px, calc(100vw - 32px)); }
#attendance-import-dialog .operations-rule-summary { margin-bottom: 18px; }
#attendance-import-dialog .attendance-import-form--premium {
  grid-template-columns: 1fr;
  gap: 15px;
}
#attendance-import-dialog .attendance-import-form--premium textarea { min-height: 160px; }
#attendance-import-dialog .attendance-import-summary {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e2edf3;
  border-radius: 12px;
  background: #f8fbfd;
}

/* Enterprise-super-admin audit log. */
.audit-command-card { margin-bottom: 18px; }
.data-command-grid--audit {
  display: grid;
  grid-template-columns: minmax(300px, 1.8fr) minmax(190px, .7fr) auto auto;
  align-items: end;
  gap: 12px;
}
.audit-log-card { overflow: hidden; }
.audit-table-wrap {
  max-height: min(62vh, 720px);
  overflow: auto;
}
.audit-table { min-width: 1060px; table-layout: fixed; }
.audit-table th:nth-child(1) { width: 176px; }
.audit-table th:nth-child(2) { width: 210px; }
.audit-table th:nth-child(3) { width: 210px; }
.audit-table th:nth-child(4) { width: 220px; }
.audit-table th:nth-child(5) { width: auto; }
.audit-table thead th { position: sticky; top: 0; z-index: 2; }
.audit-table td { vertical-align: top; }
.audit-table time { color: #365e7d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-actor,
.audit-table td:nth-child(4) { display: grid; gap: 3px; }
.audit-actor strong,
.audit-table td:nth-child(4) strong { color: #1f2b3d; }
.audit-actor small,
.audit-table td:nth-child(4) small,
.audit-action-code { color: #8a9bab; font-size: 10px; overflow-wrap: anywhere; }
.audit-action-badge {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  width: max-content;
  padding: 0 10px;
  border-radius: 999px;
  background: #eaf8fd;
  color: #168dbd;
  font-size: 11px;
  font-weight: 800;
}
.audit-detail-text {
  display: block;
  color: #506b7c;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.audit-pagination { margin-top: 0; }
.management-profile-menu button[data-view="logs"] > span:first-child {
  background: #f2ebff;
  color: #8054d7;
}

/* Six status rows remain balanced after adding pending-attendance. */
.dashboard-analytics-card .legend { gap: 5px; }
.dashboard-analytics-card .legend-row { min-height: 42px; padding: 0 12px; }

@media (max-width: 1120px) {
  .data-command-grid--audit { grid-template-columns: 1fr 1fr; }
  .data-command-grid--audit .button { width: 100%; }
  .attendance-rules-card { align-items: flex-start; }
}
@media (max-width: 720px) {
  .employee-row-actions { grid-template-columns: 1fr; min-width: 96px; }
  .data-command-grid--audit { grid-template-columns: 1fr; }
  .attendance-rules-card .compact-setting-main { min-width: 0; }
  .attendance-rules-card .compact-setting-actions { width: 100%; }
  .attendance-rules-card .compact-setting-actions .button { flex: 1 1 100%; }
}

/* ================================================================
   QIDIAN Commercial v125 — operational polish and owner audit log
   ================================================================ */

/* One-letter roster avatars use the same double-ring treatment as the self-owned system. */
.employee-avatar-mini,
.schedule-avatar,
.permission-member-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px !important;
  box-shadow: 0 0 0 2px rgba(43,169,222,.9), 0 4px 10px rgba(31,83,111,.12);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}
.schedule-avatar {
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
.schedule-avatar > img { width: 100%; height: 100%; object-fit: cover; }

/* Every employee row keeps a stable three-action grid. */
.employee-row-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(58px, auto));
  align-items: center;
  justify-content: start;
  gap: 7px !important;
  min-width: 202px;
}
.employee-row-actions .button {
  width: 100%;
  min-width: 58px;
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}
.button.success {
  border-color: #bfe8db;
  background: #e7f7f2;
  color: #0e9277;
}
.button.success:hover {
  border-color: #0e9277;
  background: #0e9277;
  color: #fff;
}

/* Day/night groups open in a clean collapsed state and expand only on request. */
.shift-panel-toggle { cursor: pointer; }
.shift-panel-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: 999px;
  background: #eaf8fd;
  color: #168dbd;
  transition: transform .18s ease;
}
.dashboard-shift-panel:not(.is-collapsed) .shift-panel-chevron { transform: rotate(180deg); }
.dashboard-shift-panel.is-collapsed .shift-panel-header { border-bottom-color: transparent; }

/* Late/early values match the compact self-owned table instead of outlined chips. */
.attendance-inline-metric {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  margin-right: 4px;
  padding: 3px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #445d6c;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.attendance-inline-metric b { font-size: 11px; color: inherit; }
.attendance-inline-metric:hover { background: #f2f8fb; color: #168dbd; }
.attendance-inline-metric.is-alert {
  background: #fff5e9;
  color: #e56f16;
}
.attendance-inline-metric.is-alert:hover { background: #ffedd9; }
.attendance-rate-chip {
  display: inline-flex;
  min-width: 58px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.attendance-rate-chip.is-good { background: #e7f7f2; color: #087c64; }
.attendance-rate-chip.is-warn { background: #fff5e9; color: #d96710; }
.attendance-rate-chip.is-empty { background: #fff0f0; color: #f65555; }

/* Six personnel-state rows remain balanced after adding pending attendance. */
.dashboard-analytics-card .ring-panel { min-height: 380px; }
.dashboard-analytics-card .legend { gap: 6px; }
.dashboard-analytics-card .legend-row { min-height: 48px; padding: 7px 11px; }

/* Attendance: rule summary is above the single import entry; import itself is a dialog. */
.attendance-rules-card {
  display: grid;
  grid-template-columns: minmax(250px, 1.1fr) minmax(360px, 1.5fr) auto;
  align-items: center;
  gap: 22px;
  padding: 18px 20px;
}
.attendance-rules-card .compact-setting-main,
.attendance-rules-card .compact-setting-metrics,
.attendance-rules-card .compact-setting-actions { min-width: 0; }
.attendance-rules-card .compact-setting-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.attendance-rules-card .compact-setting-actions .button { min-width: 118px; }
#attendance-import-dialog .attendance-import-form { margin-top: 18px; }
#attendance-import-dialog .attendance-import-summary { margin-top: 16px; }

/* Owner-only audit log. */
.audit-command-card { margin-bottom: 16px; }
.data-command-grid--audit {
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) minmax(190px, .7fr) auto auto;
  align-items: end;
  gap: 12px;
}
.audit-log-card { padding: 20px; }
.audit-table-wrap { max-height: 640px; overflow: auto; }
.audit-table { min-width: 980px; table-layout: fixed; }
.audit-table th:nth-child(1) { width: 168px; }
.audit-table th:nth-child(2) { width: 190px; }
.audit-table th:nth-child(3) { width: 190px; }
.audit-table th:nth-child(4) { width: 170px; }
.audit-table td { vertical-align: top; }
.audit-table time { color: #536a77; font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-actor,
.audit-table td:nth-child(3),
.audit-table td:nth-child(4) { display: grid; gap: 4px; }
.audit-actor strong { color: #1f2b3d; }
.audit-actor small,
.audit-action-code,
.audit-table td:nth-child(4) small { color: #8a98a8; font-size: 10.5px; overflow-wrap: anywhere; }
.audit-action-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  align-items: center;
  border-radius: 999px;
  background: #eaf8fd;
  color: #168dbd;
  font-size: 11px;
  font-weight: 800;
}
.audit-detail-text { color: #526976; line-height: 1.55; overflow-wrap: anywhere; }
.audit-pagination { margin-bottom: 0; }
.management-profile-menu button[data-view="logs"] > span {
  background: #f0eafd;
  color: #7651c7;
}
.management-profile-logout {
  margin-top: 6px !important;
  border-top: 1px solid #f1e3e3 !important;
  background: #fff7f7 !important;
  color: #d94a4a !important;
}
.management-profile-logout > span { background: #fff0f0 !important; color: #f65555 !important; }
.management-profile-logout small { color: #b97a7a !important; }

@media (max-width: 1180px) {
  .attendance-rules-card { grid-template-columns: 1fr; gap: 14px; }
  .attendance-rules-card .compact-setting-actions { justify-content: flex-start; }
  .data-command-grid--audit { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .employee-row-actions { grid-template-columns: repeat(3, minmax(54px, 1fr)); min-width: 184px; }
  .employee-row-actions .button { padding: 0 7px; }
  .data-command-grid--audit { grid-template-columns: 1fr; }
  .attendance-rules-card { padding: 16px; }
  .attendance-rules-card .compact-setting-actions .button { width: 100%; }
  .dashboard-analytics-card .ring-panel { min-height: 0; }
}
.legend-dot.purple { background: #8b5cf6; }


/* ================================================================
   QIDIAN Commercial v128 — targeted layout refinements
   Existing self-owned theme is preserved; only requested structure changes.
   ================================================================ */
.employee-groups-disclosure { padding: 0; overflow: hidden; }
.employee-groups-disclosure > summary { display: flex; min-height: 92px; padding: 16px 20px; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; }
.employee-groups-disclosure > summary::-webkit-details-marker { display: none; }
.employee-groups-summary-main { display: flex; min-width: 0; align-items: center; gap: 13px; }
.employee-groups-summary-main > span:last-child { display: grid; gap: 3px; }
.employee-groups-summary-main strong { color: #1f2b3d; font-size: 17px; }
.employee-groups-summary-main small { color: #8193a1; font-size: 11px; }
.employee-groups-summary-metrics { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #6f7d90; font-size: 11px; white-space: nowrap; }
.employee-groups-summary-metrics span { display: inline-flex; min-height: 32px; padding: 0 10px; align-items: center; gap: 5px; border: 1px solid #e2edf3; border-radius: 9px; background: #f8fbfd; }
.employee-groups-summary-metrics b { color: #1f2b3d; font-size: 12px; }
.employee-groups-summary-metrics i { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; background: #eaf8fd; color: #168dbd; font-style: normal; transition: transform .18s ease; }
.employee-groups-disclosure[open] .employee-groups-summary-metrics i { transform: rotate(180deg); }
.employee-groups-disclosure-body { padding: 0 20px 20px; border-top: 1px solid #edf2f5; }
.employee-groups-toolbar { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; }
.employee-groups-toolbar h3 { margin: 0; color: #1f2b3d; font-size: 15px; }
.employee-groups-toolbar p { margin: 4px 0 0; color: #8193a1; font-size: 11px; }
.employee-groups-table-wrap { max-height: 460px; overflow: auto; }
.group-row-actions { flex-wrap: nowrap; gap: 8px; }
.group-row-actions .button { min-width: 64px; }
.group-row-actions .button:disabled { cursor: not-allowed; opacity: .45; }
.employee-data-table th:nth-child(8) { width: 264px; }
.employee-row-actions { grid-template-columns: repeat(3, minmax(72px, auto)) !important; gap: 10px !important; min-width: 242px; }
.employee-row-actions .button { min-width: 72px; padding: 0 12px; text-align: center; }
.employee-row-actions [data-employee-reactivate] { min-width: 92px; }
.employee-groups-card .compact-setting-preview, .employee-groups-card .compact-setting-more { display: none !important; }
@media (max-width: 760px) {
  .employee-groups-disclosure > summary, .employee-groups-toolbar { align-items: flex-start; flex-direction: column; }
  .employee-groups-summary-metrics { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .employee-groups-toolbar .button { width: 100%; }
  .employee-row-actions { grid-template-columns: 1fr !important; min-width: 104px; }
  .employee-row-actions .button, .employee-row-actions [data-employee-reactivate] { min-width: 100%; }
}


/* v128 alignment baseline — same theme, spacing only. */
.employee-data-table th:last-child,
.employee-data-table td:last-child {
  width: 264px;
  min-width: 264px;
}
.employee-row-actions {
  grid-template-columns: 76px 96px 76px !important;
  gap: 12px !important;
  min-width: 272px;
  justify-content: start;
  align-items: center;
}
.employee-row-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  justify-content: center;
  white-space: nowrap;
}
.employee-row-actions [data-employee-reactivate] {
  min-width: 0;
}
.group-row-actions {
  display: grid;
  grid-template-columns: 68px 68px;
  align-items: center;
  gap: 10px;
}
.group-row-actions .button {
  width: 100%;
  min-width: 0;
  justify-content: center;
}
@media (max-width: 760px) {
  .employee-data-table th:last-child,
  .employee-data-table td:last-child {
    width: 264px;
    min-width: 264px;
  }
  .employee-row-actions {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-width: 104px;
  }
  .group-row-actions {
    grid-template-columns: 1fr;
  }
}

/* Historical v128 focused UI update on the existing self-owned theme. */

/* Language control: compact, aligned, custom chevron. */
.language-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 80px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #d7e6ef;
  border-radius: 11px;
  background: rgba(255,255,255,.96);
  color: #35566f;
  box-shadow: 0 7px 18px rgba(31,83,111,.08);
}
.language-picker-icon {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 1.5px solid #2ba9de;
  border-radius: 999px;
  background: #eaf8fd;
}
.language-picker select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #35566f;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.language-picker-chevron {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: #5e7c94;
  pointer-events: none;
  transition: transform .16s ease, color .16s ease;
}
.language-picker-chevron svg { width: 11px; height: 7px; }
.language-picker:hover,
.language-picker:focus-within { border-color: #a8d9ed; box-shadow: 0 9px 22px rgba(43,169,222,.13); }
.language-picker:focus-within .language-picker-chevron { color: #168dbd; transform: translateY(1px); }
.workspace-language-control,
.workspace-profile-control { position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 14px) !important; z-index: 9000 !important; }
.workspace-language-control { right: 68px !important; }
.workspace-profile-control { right: 18px !important; }

/* First-letter employee avatars: no uploaded photo in data tables. */
.employee-avatar-mini,
.schedule-avatar,
.permission-avatar,
.member-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  outline: 1.5px solid #54c4e7;
  box-shadow: 0 3px 9px rgba(31,83,111,.14);
  color: #fff;
  font-size: 13px !important;
  font-weight: 850;
  line-height: 1;
  overflow: hidden;
}

/* Employee operation column: stable columns, full labels and even spacing. */
.employee-data-table th:last-child,
.employee-data-table td:last-child { width: 264px; min-width: 264px; }
.employee-row-actions {
  display: grid !important;
  grid-template-columns: 72px 82px 72px 72px !important;
  gap: 12px !important;
  min-width: 250px !important;
  align-items: center;
  justify-content: start;
}
.employee-row-actions .button {
  width: 100%;
  min-width: 0 !important;
  min-height: 36px;
  padding: 0 10px !important;
  justify-content: center;
  white-space: nowrap;
}
.employee-row-actions [data-employee-reactivate] { min-width: 0 !important; }

/* Group management: collapsed by default, two clear levels for day/night. */
.employee-groups-disclosure { overflow: hidden; }
.employee-groups-disclosure-body { padding: 18px 20px 22px; }
.group-add-entry {
  width: 100%;
  min-height: 46px;
  margin-bottom: 14px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #dce9f1;
  border-radius: 11px;
  background: #fff;
  color: #168dbd;
  font-weight: 800;
  cursor: pointer;
}
.group-add-entry:hover { background: #f4fbfe; border-color: #b9dfef; }
.group-management-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.group-management-shift {
  min-width: 0;
  padding: 10px;
  border: 1px solid #dce9f1;
  border-radius: 14px;
  background: #fbfdff;
}
.group-management-shift > header {
  min-height: 43px;
  padding: 0 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-management-shift h3 { margin: 0; color: #1f2b3d; font-size: 17px; }
.group-management-shift header span { color: #6f7d90; font-size: 12px; }
.group-management-list { display: grid; gap: 9px; }
.group-management-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(140px,1.3fr) minmax(96px,.7fr) minmax(170px,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px 9px 14px;
  border: 1px solid #e2edf3;
  border-radius: 11px;
  background: #fff;
}
.group-management-name { min-width: 0; display: grid; gap: 3px; }
.group-management-name strong { min-width: 0; color: #16334d; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-management-name small { color: #8a9aaa; font-size: 10px; }
.group-management-count { color: #587086; font-size: 12px; white-space: nowrap; }
.group-management-time { min-width: 0; display: flex; align-items: center; gap: 8px; color: #71889b; font-size: 11px; white-space: nowrap; }
.group-management-time input { width: 94px; height: 38px; padding: 0 10px; border-radius: 9px; background: #f4f8fb; color: #35566f; }
.group-management-actions { display: grid; grid-template-columns: 62px 62px; gap: 8px; }
.group-management-actions .button { width: 100%; min-width: 0; height: 36px; padding: 0 8px; justify-content: center; }
.group-management-actions .button:disabled { opacity: .34; cursor: not-allowed; }

/* Scheduling: no full-card washout while saving. */
.schedule-operations-card { position: relative; }
.schedule-operations-card.is-saving-inline::after {
  content: "正在更新…";
  position: absolute;
  top: 12px;
  right: 18px;
  z-index: 5;
  padding: 6px 10px;
  border: 1px solid #bde4f3;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #168dbd;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(31,83,111,.09);
}
.schedule-row-action:disabled { opacity: .35; cursor: not-allowed; }
.schedule-instant-confirm-note { color: #658196; }

/* Shared independent subpage navigation. */
.subpage-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid #e2edf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31,83,111,.045);
}
.subpage-tabs button {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #dce9f1;
  border-radius: 10px;
  background: #f3f9fc;
  color: #47647c;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.subpage-tabs button:hover { border-color: #acd9eb; background: #eaf8fd; color: #168dbd; }
.subpage-tabs button.active { border-color: #2ba9de; background: #2ba9de; color: #fff; box-shadow: 0 7px 16px rgba(43,169,222,.2); }
.subpage-tabs button span { margin-left: 5px; opacity: .78; }
.message-subpage-card,
.attendance-subpage-card,
.payroll-subpage-card { min-height: 220px; }
.message-work-date { display: flex; align-items: center; gap: 9px; color: #5e7488; font-size: 12px; font-weight: 700; }
.message-work-date input { min-width: 160px; }
.message-work-time-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.message-work-time-card {
  display: grid;
  grid-template-columns: minmax(180px,1fr) minmax(150px,.6fr) auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid #dfeaf1;
  border-radius: 12px;
  background: #fbfdff;
}
.message-work-time-card > div { display: grid; gap: 5px; }
.message-work-time-card strong { color: #173650; }
.message-work-time-card small { color: #7c91a3; }
.message-work-time-card label { display: grid; gap: 6px; color: #617b90; font-size: 11px; font-weight: 700; }
.permission-inline-note { margin-bottom: 14px; padding: 11px 13px; border-radius: 10px; background: #f3f9fc; color: #58758c; font-size: 12px; }

/* Attendance date/actions and tabbed content. */
.attendance-page-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.attendance-page-actions .button { min-height: 40px; }
.toolbar-chip--date { min-height: 42px; padding: 0 12px; border: 1px solid #d8e7ef; border-radius: 11px; background: #fff; }
input[type="date"], input[type="time"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .72; filter: hue-rotate(165deg) saturate(1.1); }
.attendance-subpage-tabs,
.payroll-subpage-tabs { margin: 0; }

/* Payroll: period first, no large metric strip, larger subpage labels. */
.payroll-page-stack { gap: 14px; }
.payroll-period-card { order: -3; }
.payroll-subpage-tabs { order: -2; }
.payroll-subpage-tabs button { min-width: 132px; font-size: 14px; }
.payroll-command-card { order: -1; }

/* Floating horizontal navigation and pagination. */
.table-wrap { scrollbar-width: thin; scrollbar-color: #93a4b2 transparent; }
.table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { border-radius: 999px; background: #93a4b2; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.floating-table-navigation {
  position: sticky;
  bottom: 58px;
  z-index: 32;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 36px;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  margin-top: -1px;
  padding: 4px 7px;
  border: 1px solid #dce8ef;
  border-radius: 0 0 12px 12px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 -5px 16px rgba(31,83,111,.07);
  backdrop-filter: blur(10px);
}
.floating-table-navigation.is-hidden { display: none; }
.floating-table-step {
  width: 32px;
  height: 30px;
  border: 1px solid #d7e6ef;
  border-radius: 8px;
  background: #f8fbfd;
  color: #168dbd;
  font-size: 20px;
  cursor: pointer;
}
.floating-table-scrollbar { height: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #8093a1 transparent; }
.floating-table-scrollbar::-webkit-scrollbar { height: 8px; }
.floating-table-scrollbar::-webkit-scrollbar-thumb { border-radius: 999px; background: #8093a1; }
.floating-table-scrollbar-track { height: 1px; }
.floating-pagination,
.attendance-pagination {
  position: sticky;
  bottom: 0;
  z-index: 31;
  min-height: 56px;
  margin-top: 0;
  padding: 8px 12px;
  border-top: 1px solid #e2edf3;
  background: rgba(255,255,255,.96);
  box-shadow: 0 -7px 18px rgba(31,83,111,.07);
  backdrop-filter: blur(10px);
}

/* Remove informational-only large data banners everywhere. */
.large-data-notice,
.large-workforce-notice,
[data-large-data-notice] { display: none !important; }

@media (max-width: 1100px) {
  .group-management-columns,
  .message-work-time-grid { grid-template-columns: 1fr; }
  .group-management-row { grid-template-columns: minmax(150px,1fr) 110px minmax(160px,.8fr) auto; }
}
@media (max-width: 760px) {
  .workspace-language-control { right: 64px !important; top: calc(env(safe-area-inset-top, 0px) + 10px) !important; }
  .workspace-profile-control { right: 12px !important; top: calc(env(safe-area-inset-top, 0px) + 10px) !important; }
  .language-picker { min-width: 72px; height: 36px; padding: 0 8px; }
  .employee-data-table th:last-child,
  .employee-data-table td:last-child { width: 264px; min-width: 264px; }
  .employee-row-actions { grid-template-columns: 1fr !important; min-width: 96px !important; gap: 7px !important; }
  .group-management-row { grid-template-columns: 1fr; align-items: stretch; }
  .group-management-time { justify-content: space-between; }
  .group-management-actions { grid-template-columns: 1fr 1fr; }
  .subpage-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .subpage-tabs button { white-space: nowrap; }
  .message-work-time-card { grid-template-columns: 1fr; align-items: stretch; }
  .floating-table-navigation { bottom: 64px; }
}

/* QIDIAN current-theme focused workflow v128 */
:root {
  --qidian-primary: #2ba9de;
  --qidian-primary-strong: #168fbe;
  --qidian-soft: #eef9fd;
  --qidian-border: #d7e7ef;
  --qidian-ink: #19324a;
}

/* Refined floating language selector. */
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker {
  width: 78px !important;
  min-width: 78px !important;
  height: 40px !important;
  padding: 0 11px !important;
  gap: 8px !important;
  border: 1px solid rgba(117, 171, 199, .28) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 24px rgba(30, 86, 116, .09) !important;
}
.language-picker select { font-weight: 800; letter-spacing: .04em; }
.language-picker::after { content: "⌄"; display: grid; place-items: center; width: 14px; color: #56778b; font-size: 16px; line-height: 1; transform: translateY(-1px); pointer-events: none; }
.language-picker:focus-within::after { transform: rotate(180deg) translateY(1px); }

/* Unified first-letter avatars from the self-owned product. */
.employee-avatar-mini,
.schedule-avatar,
.attendance-employee-cell .employee-avatar-mini {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  outline: 2px solid rgba(43,169,222,.55) !important;
  box-shadow: 0 4px 12px rgba(25,91,122,.14) !important;
  overflow: hidden !important;
}
.employee-name-copy,
.employee-cell strong,
.schedule-employee-cell strong,
.attendance-employee-cell strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-cell > div,
.schedule-employee-cell > span,
.attendance-employee-cell > span:last-child { min-width: 0; }
.employee-data-table th:first-child,
.employee-data-table td:first-child { width: 270px; min-width: 270px; max-width: 270px; }
.employee-data-table td:first-child .employee-cell { min-width: 0; }

/* Employee filters and group management now belong to the directory card. */
.employee-command-inline {
  margin: 0 0 14px;
  padding: 14px 0 16px;
  border-top: 1px solid #e5eef3;
  border-bottom: 1px solid #e5eef3;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.employee-command-inline .data-command-grid { padding-inline: 0; }
.employee-command-inline .data-command-foot { padding-inline: 0; }
.employee-list-card .premium-section-heading { margin-bottom: 0; }
.employee-list-card .section-actions { flex-wrap: nowrap; }
.employee-row-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 10px !important;
  align-items: center;
  min-width: 250px;
}
.employee-row-actions .button { min-width: 72px; height: 38px; padding: 0 14px; white-space: nowrap; }
.employee-data-table th:last-child,
.employee-data-table td:last-child { width: 264px; min-width: 264px; }
.group-management-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.group-management-metrics { display: flex; gap: 10px; flex-wrap: wrap; }
.group-management-metrics span { padding: 8px 12px; border: 1px solid var(--qidian-border); border-radius: 10px; background: #f8fbfd; color: #607b8c; }
.group-management-metrics b { color: var(--qidian-ink); }

/* Schedule toolbar: rules are a popup entry immediately before import. */
.schedule-command-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.schedule-settings-entry { min-width: 154px; }
.schedule-command-copy { min-height: 38px; align-items: center; }
.schedule-live-indicator,
.schedule-instant-confirm-note { display: none !important; }
.settings-dialog-linked-action { display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid #e5eef3; }
.schedule-row-action:disabled { opacity: .42; cursor: not-allowed; box-shadow: none !important; }

/* Custom date picker shared by all pages. The real ISO input is kept hidden
   for FormData and existing change handlers; users interact with a button so
   iOS cannot open its native picker on top of the QIDIAN calendar. */
.qidian-date-control {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.qidian-date-value { display: none !important; }
.qidian-date-input { cursor: pointer; caret-color: transparent; }
.qidian-date-trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #cfe1eb;
  border-radius: 12px;
  background: #fff;
  color: #274c66;
  padding: 0 11px 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 780;
  line-height: 1;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.qidian-date-trigger:hover { border-color: #9fd4e8; background: #fbfeff; }
.qidian-date-trigger:focus-visible,
.qidian-date-trigger[aria-expanded="true"] {
  border-color: #2ba9de;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(43, 169, 222, .13);
}
.qidian-date-trigger:disabled { cursor: not-allowed; opacity: .58; box-shadow: none; }
.qidian-date-trigger [data-qidian-date-display] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qidian-date-trigger.is-empty [data-qidian-date-display] { color: #91a5b2; font-weight: 680; }
.qidian-date-icon {
  display: grid;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  place-items: center;
  margin-left: auto;
  color: #2b93ba;
}
.qidian-date-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qidian-date-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(13, 39, 58, .18);
  touch-action: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.qidian-date-popover {
  position: fixed;
  z-index: 10050;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid rgba(130,180,205,.38);
  border-radius: 18px;
  background: rgba(255,255,255,.99);
  box-shadow: 0 24px 60px rgba(25,72,101,.23);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.qidian-date-popover.is-mobile { border-radius: 22px; box-shadow: 0 28px 70px rgba(17, 55, 78, .28); }
.qidian-date-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; margin-bottom: 12px; }
.qidian-date-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 16px; color: #17364e; }
.qidian-date-head button,
.qidian-date-actions button { border: 0; border-radius: 10px; background: #f0f8fc; color: #168fbe; height: 38px; cursor: pointer; font-weight: 750; touch-action: manipulation; }
.qidian-date-head button:hover,
.qidian-date-actions button:hover { background: #e3f4fb; }
.qidian-date-weekdays,
.qidian-date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.qidian-date-weekdays { margin-bottom: 5px; color: #718999; font-size: 12px; font-weight: 800; text-align: center; }
.qidian-date-weekdays span { min-width: 0; padding: 6px 0; }
.qidian-date-cell { min-width: 0; height: 38px; border: 0; border-radius: 10px; background: transparent; color: #20384b; cursor: pointer; font-weight: 650; touch-action: manipulation; }
.qidian-date-cell:hover { background: #eaf7fc; color: #0f8fc2; }
.qidian-date-cell.is-outside { color: #aab8c2; }
.qidian-date-cell.is-today { box-shadow: inset 0 0 0 1px #73c7e9; color: #138dbd; }
.qidian-date-cell.is-selected { background: linear-gradient(135deg,#2ba9de,#168fbe); color: #fff; box-shadow: 0 7px 15px rgba(43,169,222,.24); }
.qidian-date-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e7f0f4; }
.qidian-date-actions.is-required { grid-template-columns: minmax(0, 1fr); }
.toolbar-chip .qidian-date-control { width: auto; min-width: 148px; flex: 0 1 190px; }
.toolbar-chip .qidian-date-trigger {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0 2px 0 5px;
  color: #223f5b;
  box-shadow: none;
  font: inherit;
}
.toolbar-chip .qidian-date-trigger:focus-visible,
.toolbar-chip .qidian-date-trigger[aria-expanded="true"] { background: #edf8fc; box-shadow: none; }
.message-work-date .qidian-date-control,
.payroll-period-selector .qidian-date-control { width: min(190px, 100%); min-width: 0; }
#payroll-rate-card .payroll-rate-table .qidian-date-trigger { min-height: 40px; height: 40px; border-radius: 10px; padding-inline: 10px; font-size: 13px; font-weight: 650; }

/* Attendance data hierarchy modeled after the self-owned operations page. */
.attendance-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.attendance-overview-card {
  min-height: 140px;
  padding: 18px;
  border: 1px solid #dce9f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(29,78,104,.055);
}
.attendance-overview-main { display: flex; align-items: center; gap: 13px; }
.attendance-overview-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #eaf8fd; color: #1596c8; font-weight: 850; font-size: 18px; }
.attendance-overview-main span:last-child { display: grid; gap: 2px; }
.attendance-overview-main small { color: #607a8c; font-weight: 750; }
.attendance-overview-main strong { color: #153149; font-size: 27px; line-height: 1.1; }
.attendance-overview-main em { color: #8aa0ae; font-style: normal; font-size: 12px; }
.attendance-overview-cells { display: grid; grid-template-columns: repeat(auto-fit,minmax(92px,1fr)); gap: 8px; margin-top: 15px; }
.attendance-overview-cells span { min-width: 0; padding: 9px 10px; border-radius: 10px; background: #f4f9fc; }
.attendance-overview-cells span.warn { background: #fff6e9; }
.attendance-overview-cells span.bad { background: #fff0f1; }
.attendance-overview-cells b,.attendance-overview-cells small { display: block; }
.attendance-overview-cells b { color: #17354a; font-size: 16px; }
.attendance-overview-cells small { margin-top: 2px; color: #718899; font-size: 11px; }
.attendance-page-actions { gap: 10px; }
.attendance-subpage-tabs,
.payroll-subpage-tabs,
.message-subpage-tabs { padding: 5px; border: 1px solid #dce9f0; border-radius: 13px; background: #f3f9fc; }
.attendance-subpage-tabs button,
.payroll-subpage-tabs button,
.message-subpage-tabs button { min-height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 800; }
.attendance-subpage-tabs button.active,
.payroll-subpage-tabs button.active,
.message-subpage-tabs button.active { background: var(--qidian-primary); color: #fff; box-shadow: 0 6px 15px rgba(43,169,222,.18); }

/* Payroll is one compact module with a single selectable period. */
.payroll-main-card { padding: 0; overflow: hidden; }
.payroll-main-heading { padding: 18px 20px 14px; margin: 0; border-bottom: 1px solid #e3edf2; }
.payroll-period-selector { min-width: 220px; }
.payroll-subpage-tabs { margin: 12px 20px 0; width: fit-content; }
.payroll-command-inline { margin: 12px 20px 0; padding: 14px 0; border-top: 1px solid #e8f0f4; border-bottom: 1px solid #e8f0f4; background: transparent; box-shadow: none; }
.payroll-subpage-content { padding: 0 20px 18px; }
.payroll-preview-card,
.payroll-rate-card { padding-top: 16px; }
.payroll-preview-card .section-heading,
.payroll-rate-card .section-heading { margin-bottom: 12px; }

/* Floating controls on every large table. */
.table-wrap,
.schedule-table-wrap,
.scalable-table-wrap,
.premium-table-wrap { cursor: auto; scrollbar-width: thin; scrollbar-color: rgba(102,126,140,.72) transparent; }
.table-wrap td,
.schedule-table-wrap td,
.scalable-table-wrap td,
.premium-table-wrap td { cursor: text; user-select: text; }
.floating-table-navigation {
  position: sticky;
  bottom: 60px;
  z-index: 40;
  border-radius: 12px;
  margin: -44px 10px 6px;
  width: calc(100% - 20px);
  opacity: .78;
  transition: opacity .18s ease;
}
.floating-table-navigation:hover { opacity: 1; }
.floating-pagination,
.attendance-pagination { position: sticky !important; bottom: 0 !important; z-index: 39 !important; border-radius: 12px; margin-inline: 0; }

@media (max-width: 1200px) {
  .attendance-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employee-data-table th:first-child,
  .employee-data-table td:first-child { min-width: 240px; width: 240px; }
}
@media (max-width: 760px) {
  .attendance-overview-grid { grid-template-columns: 1fr; }
  .employee-row-actions { grid-template-columns: 1fr !important; min-width: 96px; }
  .employee-data-table th:last-child,
  .employee-data-table td:last-child { min-width: 264px; width: 264px; }
  .group-management-dialog-head { align-items: stretch; flex-direction: column; }
  .payroll-subpage-tabs { width: auto; }
}

/* v128 targeted hotfix: employee shift labels + aligned floating controls. */
.app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control {
  display: flex !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker {
  width: 80px !important;
  min-width: 80px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  align-items: center !important;
  gap: 7px !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker select {
  height: 42px !important;
  min-height: 42px !important;
  line-height: 42px !important;
}
/* Use the SVG chevron from the markup only; the legacy pseudo-chevron caused a duplicate/misaligned arrow. */
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker::after {
  content: none !important;
  display: none !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker-chevron {
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button--avatar-only {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu {
  max-height: calc(100vh - 86px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu .management-profile-logout {
  display: grid !important;
  visibility: inherit !important;
  opacity: 1 !important;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 7px !important;
  background: #fff7f7 !important;
}
@media (max-width: 760px) {
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control {
    height: 42px !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker,
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button--avatar-only {
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* v128 targeted realtime/mobile hotfix ------------------------------------- */
/* The phone registration surface uses the device width instead of a scaled
   desktop card.  Keep the existing theme while reducing padding and control
   height so the entire action area remains visible without zooming. */
@media (max-width: 590px) {
  .worker-content {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    padding: calc(env(safe-area-inset-top, 0px) + 56px) 0 18px !important;
  }
  .worker-card-main.worker-registration-card {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(31,83,111,.07) !important;
  }
  .worker-card-brand {
    min-height: 46px !important;
    padding: 0 0 10px !important;
  }
  .worker-card-brand .brand { min-height: 36px !important; }
  .worker-card-brand .brand-full-logo { width: 118px !important; }
  .worker-identity-list { border-radius: 11px !important; }
  .worker-identity-list > div {
    grid-template-columns: 72px minmax(0,1fr) !important;
    min-height: 44px !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .worker-identity-list span { font-size: 10px !important; }
  .worker-identity-list strong { font-size: 12px !important; }
  .worker-status-card {
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 11px !important;
  }
  .worker-status-card strong { font-size: 16px !important; }
  .worker-deadline,
  .worker-leave-summary {
    grid-template-columns: auto minmax(0,1fr) !important;
    gap: 6px 9px !important;
    padding-top: 9px !important;
  }
  .worker-deadline small { grid-column: 1 / -1; }
  .worker-action-stack { gap: 7px !important; }
  .worker-action-stack .button {
    min-height: 42px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }
  .worker-menu-toggle,
  .worker-avatar-button { width: 34px !important; height: 34px !important; }
  .worker-language-float .language-picker { height: 34px !important; min-height: 34px !important; }
  .worker-menu-float,
  .worker-language-float,
  .worker-avatar-float { top: calc(env(safe-area-inset-top, 0px) + 8px) !important; }
  .worker-menu-float { left: 8px !important; }
  .worker-language-float { right: 50px !important; }
  .worker-avatar-float { right: 8px !important; }
}

@media (max-width: 390px) {
  .worker-content { width: calc(100% - 8px) !important; }
  .worker-card-main.worker-registration-card { padding: 10px !important; }
  .worker-identity-list > div {
    grid-template-columns: 66px minmax(0,1fr) !important;
    min-height: 41px !important;
    padding: 7px 9px !important;
  }
}

/* QIDIAN v128 PATCH003: navigation persistence, payroll tools, mobile fit. */
.language-picker-icon { display: none !important; }
.language-picker::after,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker::after {
  content: none !important;
  display: none !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls::before,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls::after,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control::before,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control::after {
  content: none !important;
  display: none !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker {
  overflow: visible !important;
  isolation: isolate;
}

/* The horizontal control remains sticky but no longer overlays the last row. */
.table-wrap,
.schedule-table-wrap,
.scalable-table-wrap,
.premium-table-wrap {
  scroll-padding-bottom: 64px;
}
.floating-table-navigation {
  bottom: 68px !important;
  margin: 10px 10px 12px !important;
  width: calc(100% - 20px) !important;
}
.floating-pagination,
.attendance-pagination {
  bottom: 0 !important;
  margin-top: 8px !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}
.workforce-page-stack,
.employee-list-card,
.schedule-panel,
.attendance-page-stack,
.payroll-page-stack {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

/* Payroll bulk editing and export controls. */
.payroll-rate-batch {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  margin: 0 0 14px;
  padding: 13px;
  border: 1px solid #dce9f0;
  border-radius: 13px;
  background: #f6fbfd;
}
.payroll-rate-batch > span {
  align-self: center;
  color: #597588;
  font-weight: 750;
  white-space: nowrap;
}
.payroll-rate-batch label { display: grid; gap: 5px; color: #557286; font-size: 12px; font-weight: 750; }
.payroll-rate-batch input,
.payroll-rate-batch select { min-width: 0; width: 100%; }
.payroll-rate-check { width: 44px; min-width: 44px; text-align: center; }
.payroll-rate-table-wrap td:first-child,
.payroll-rate-table-wrap th:first-child { text-align: center; }

/* Worker portal must fit the physical phone viewport without desktop overflow. */
html,
body,
#app,
.worker-portal {
  max-width: 100%;
}
.worker-portal {
  width: 100%;
  min-width: 0 !important;
  overflow-x: clip;
}
.worker-content,
.worker-card-main,
.worker-registration-card,
.worker-identity-list,
.worker-status-card,
.worker-action-stack {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.worker-identity-list > div > *,
.worker-identity-list strong,
.worker-identity-list span,
.worker-status-card > * {
  min-width: 0;
}
.worker-identity-list strong,
.worker-identity-list span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .payroll-rate-batch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-rate-batch > span,
  .payroll-rate-batch button { grid-column: 1 / -1; }
}

@media (max-width: 590px) {
  html, body, #app { width: 100% !important; overflow-x: hidden !important; }
  .worker-portal { width: 100vw !important; max-width: 100vw !important; }
  .worker-content {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 54px) 5px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  }
  .worker-card-main.worker-registration-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
  }
  .worker-content-brand { margin: 0 auto 12px !important; }
  .worker-content-brand .brand-full-logo,
  .worker-card-brand .brand-full-logo { width: 112px !important; max-width: 42vw !important; }
  .worker-identity-list > div {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    min-height: 39px !important;
    padding: 6px 8px !important;
  }
  .worker-identity-list span { font-size: 10px !important; }
  .worker-identity-list strong { font-size: 12px !important; text-align: right; }
  .worker-status-card { min-height: 52px !important; padding: 8px !important; }
  .worker-status-card strong { font-size: 15px !important; }
  .worker-action-stack .button { min-height: 40px !important; font-size: 13px !important; }
  .worker-language-float { right: 48px !important; }
  .worker-avatar-float { right: 6px !important; }
  .worker-menu-float { left: 6px !important; }
  .worker-language-float .language-picker {
    width: 76px !important;
    min-width: 76px !important;
    padding: 0 8px !important;
  }
  .worker-language-float .language-picker select { min-width: 34px !important; }
  .worker-profile-menu,
  .worker-side-menu { max-width: calc(100vw - 12px) !important; }
  .floating-table-navigation { bottom: 72px !important; }
  .payroll-rate-batch { grid-template-columns: 1fr; }
  .payroll-rate-batch > span,
  .payroll-rate-batch button { grid-column: auto; }
}

/* QIDIAN v128 PATCH004: silent hydration, phone viewport fit, attendance import. */
.tenant-data-status.is-loading { display: none !important; }

#attendance-import-dialog .attendance-file-picker {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px dashed #bcddec;
  border-radius: 12px;
  background: #f7fcfe;
}
#attendance-import-dialog .attendance-file-picker > span {
  color: #315870;
  font-size: 12px;
  font-weight: 800;
}
#attendance-import-dialog .attendance-file-picker input[type="file"] {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d5e6ef;
  border-radius: 10px;
  background: #fff;
  padding: 7px 9px;
  color: #365a70;
}
#attendance-import-dialog .attendance-file-picker small {
  overflow: hidden;
  color: #7892a4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#attendance-import-dialog .attendance-import-actions {
  position: sticky;
  bottom: -24px;
  z-index: 3;
  margin: 2px -2px -2px;
  border-top: 1px solid #e5eef3;
  background: rgba(255,255,255,.98);
  padding: 14px 2px 2px;
}

@media (max-width: 590px) {
  html, body, #app { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  .worker-portal {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
  }
  .worker-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 52px) 8px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
  .worker-card-main.worker-registration-card {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 13px !important;
  }
  .worker-card-brand {
    min-height: 40px !important;
    padding: 2px 0 10px !important;
  }
  .worker-card-brand .brand,
  .worker-content-brand .brand { min-height: 32px !important; }
  .worker-card-brand .brand-full-logo,
  .worker-content-brand .brand-full-logo {
    width: 104px !important;
    max-width: 36vw !important;
  }
  .worker-identity-list { width: 100% !important; border-radius: 10px !important; }
  .worker-identity-list > div {
    grid-template-columns: 78px minmax(0,1fr) !important;
    min-height: 38px !important;
    gap: 7px !important;
    padding: 6px 8px !important;
  }
  .worker-identity-list > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
  .worker-identity-list > div:last-child strong { text-align: left !important; }
  .worker-identity-list span { font-size: 9.5px !important; }
  .worker-identity-list strong { font-size: 11.5px !important; line-height: 1.35 !important; }
  .worker-status-card {
    min-height: 48px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
  }
  .worker-status-card strong { font-size: 14px !important; }
  .worker-deadline,
  .worker-leave-summary {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 3px !important;
    padding: 7px 8px !important;
  }
  .worker-deadline span,
  .worker-deadline strong,
  .worker-deadline small,
  .worker-leave-summary span,
  .worker-leave-summary strong { min-width: 0 !important; overflow-wrap: anywhere; }
  .worker-action-stack { gap: 6px !important; }
  .worker-action-stack .button { min-height: 38px !important; font-size: 12px !important; }
  .worker-menu-toggle,
  .worker-avatar-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
  }
  .worker-menu-float { left: max(8px, env(safe-area-inset-left, 0px)) !important; }
  .worker-avatar-float { right: max(8px, env(safe-area-inset-right, 0px)) !important; }
  .worker-language-float {
    right: calc(max(8px, env(safe-area-inset-right, 0px)) + 44px) !important;
  }
  .worker-menu-float,
  .worker-language-float,
  .worker-avatar-float { top: calc(env(safe-area-inset-top, 0px) + 7px) !important; }
  .worker-language-float .language-picker {
    width: 70px !important;
    min-width: 70px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 7px !important;
  }
  .worker-language-float .language-picker select {
    min-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 12px !important;
  }
  .worker-profile-menu,
  .worker-side-menu,
  .worker-drawer { max-width: calc(100vw - 16px) !important; }
  #attendance-import-dialog .settings-dialog-card {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
  }
  #attendance-import-dialog .settings-dialog-body { padding: 13px 12px 15px !important; }
  #attendance-import-dialog .operations-rule-summary { display: none !important; }
  #attendance-import-dialog .attendance-import-form--premium textarea { min-height: 120px !important; }
  #attendance-import-dialog .attendance-import-actions { bottom: -15px; }
}

@media (max-width: 390px) {
  .worker-content { padding-right: 5px !important; padding-left: 5px !important; }
  .worker-card-main.worker-registration-card { padding: 7px !important; }
  .worker-identity-list > div { grid-template-columns: 70px minmax(0,1fr) !important; padding: 5px 7px !important; }
  .worker-card-brand .brand-full-logo,
  .worker-content-brand .brand-full-logo { width: 96px !important; }
}

/* QIDIAN v128 PATCH005: larger payroll-rate typography and direct numeric input. */
#payroll-rate-card .hourly-rate-form,
#payroll-rate-card .payroll-rate-batch {
  font-size: 14px;
}
#payroll-rate-card .hourly-rate-form {
  gap: 10px;
}
#payroll-rate-card .hourly-rate-form label,
#payroll-rate-card .payroll-rate-batch label {
  color: #365a70;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
#payroll-rate-card .hourly-rate-form input,
#payroll-rate-card .hourly-rate-form select,
#payroll-rate-card .payroll-rate-batch input,
#payroll-rate-card .payroll-rate-batch select {
  min-height: 46px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  padding: 10px 12px;
}
#payroll-rate-card .hourly-rate-form .button,
#payroll-rate-card .payroll-rate-batch .button {
  min-height: 42px;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 15px;
}
#payroll-rate-card .payroll-rate-table-wrap th {
  font-size: 12.5px;
}
#payroll-rate-card .payroll-rate-table-wrap td {
  font-size: 13px;
}
#payroll-rate-card input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
#payroll-rate-card input[type="number"]::-webkit-inner-spin-button,
#payroll-rate-card input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* QIDIAN v128 PATCH006: reliable attendance import and premium payroll-rate cards. */
#attendance-file-selection[data-state="loading"] { color: #1c86bd; }
#attendance-file-selection[data-state="ready"] { color: #0b8e70; font-weight: 750; }
#attendance-file-selection[data-state="error"] { color: #ef535b; font-weight: 750; white-space: normal; }

#payroll-rate-card {
  border: 1px solid #d7e8f1;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  padding: 20px;
}
#payroll-rate-card .payroll-rate-heading {
  margin-bottom: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8f0f4;
}
#payroll-rate-card .payroll-rate-heading h2 { letter-spacing: -.02em; }
#payroll-rate-card .payroll-rate-heading p { max-width: 620px; }

#payroll-rate-card .payroll-rate-batch {
  grid-template-columns: minmax(160px, .7fr) minmax(165px, 1fr) minmax(190px, 1.2fr) minmax(175px, 1fr) auto;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #cfe5ef;
  border-radius: 16px;
  background: linear-gradient(135deg, #effaff 0%, #f8fcfe 58%, #ffffff 100%);
  box-shadow: 0 10px 28px rgba(36, 123, 163, .07);
}
#payroll-rate-card .payroll-rate-batch-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: center;
  gap: 4px;
}
#payroll-rate-card .payroll-rate-batch-heading strong {
  color: #143e5b;
  font-size: 16px;
  line-height: 1.2;
}
#payroll-rate-card .payroll-rate-batch-heading span {
  color: #6f899a;
  font-size: 12px;
}
#payroll-rate-card .payroll-rate-batch-heading b { color: #159dce; font-size: 14px; }

#payroll-rate-card .payroll-rate-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 12px;
  color: #6d8798;
  font-size: 12px;
}
#payroll-rate-card .payroll-rate-list-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #315c73;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
#payroll-rate-card .payroll-rate-list-toolbar input { width: 17px; height: 17px; accent-color: #2ba9de; }

#payroll-rate-card .payroll-rate-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
#payroll-rate-card .payroll-rate-employee-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(430px, 1.6fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  border: 1px solid #dce9f0;
  border-radius: 16px;
  background: #fff;
  padding: 16px 16px 16px 52px;
  box-shadow: 0 6px 20px rgba(24, 77, 106, .055);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#payroll-rate-card .payroll-rate-employee-card:hover {
  border-color: #b9dce9;
  box-shadow: 0 12px 30px rgba(24, 104, 143, .09);
  transform: translateY(-1px);
}
#payroll-rate-card .payroll-rate-select-control {
  position: absolute;
  top: 18px;
  left: 17px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  cursor: pointer;
}
#payroll-rate-card .payroll-rate-select-control input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2ba9de;
}
#payroll-rate-card .payroll-rate-person {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
}
#payroll-rate-card .payroll-rate-person .employee-avatar-mini {
  width: 42px;
  min-width: 42px;
  height: 42px;
  font-size: 14px;
}
#payroll-rate-card .payroll-rate-person-copy { min-width: 0; }
#payroll-rate-card .payroll-rate-person-copy > strong {
  display: block;
  overflow: hidden;
  color: #153a55;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#payroll-rate-card .payroll-rate-person-copy > small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #7890a0;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#payroll-rate-card .payroll-rate-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
#payroll-rate-card .payroll-rate-meta > span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #deebf1;
  border-radius: 999px;
  background: #f5f9fb;
  padding: 3px 9px;
  color: #5f7a8c;
  font-size: 10.5px;
  font-weight: 700;
}
#payroll-rate-card .payroll-rate-meta .group-name-localized { color: inherit; }

#payroll-rate-card .hourly-rate-form {
  display: grid;
  grid-template-columns: minmax(115px, .75fr) minmax(170px, 1.15fr) minmax(155px, 1fr) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
}
#payroll-rate-card .hourly-rate-form label,
#payroll-rate-card .payroll-rate-batch label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #315a72;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}
#payroll-rate-card .hourly-rate-form input,
#payroll-rate-card .hourly-rate-form select,
#payroll-rate-card .payroll-rate-batch input,
#payroll-rate-card .payroll-rate-batch select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border-color: #cfe0e9;
  border-radius: 11px;
  background: #fbfdfe;
  color: #173e59;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  padding: 10px 12px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#payroll-rate-card .hourly-rate-form input:focus,
#payroll-rate-card .hourly-rate-form select:focus,
#payroll-rate-card .payroll-rate-batch input:focus,
#payroll-rate-card .payroll-rate-batch select:focus {
  border-color: #2ba9de;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 169, 222, .12);
}
#payroll-rate-card .payroll-rate-money-input {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid #cfe0e9;
  border-radius: 11px;
  background: #fbfdfe;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#payroll-rate-card .payroll-rate-money-input:focus-within {
  border-color: #2ba9de;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 169, 222, .12);
}
#payroll-rate-card .payroll-rate-money-input b {
  display: grid;
  height: 100%;
  place-items: center;
  border-right: 1px solid #deebf1;
  color: #1d96c8;
  font-size: 14px;
}
#payroll-rate-card .payroll-rate-money-input input {
  min-height: 44px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 10px;
}
#payroll-rate-card .payroll-rate-save,
#payroll-rate-card .payroll-rate-batch .button {
  min-height: 46px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 850;
  padding: 10px 18px;
  box-shadow: 0 8px 18px rgba(27, 151, 201, .16);
}
#payroll-rate-card .floating-pagination { margin-top: 15px !important; }

@media (max-width: 1540px) {
  #payroll-rate-card .payroll-rate-card-grid { grid-template-columns: 1fr; }
  #payroll-rate-card .payroll-rate-employee-card { grid-template-columns: minmax(210px, .75fr) minmax(480px, 1.55fr); }
}
@media (max-width: 1120px) {
  #payroll-rate-card .payroll-rate-batch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #payroll-rate-card .payroll-rate-batch-heading { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
  #payroll-rate-card .payroll-rate-batch .button { grid-column: 1 / -1; }
  #payroll-rate-card .payroll-rate-employee-card { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  #payroll-rate-card { padding: 13px; border-radius: 14px; }
  #payroll-rate-card .payroll-rate-batch { grid-template-columns: 1fr; padding: 13px; }
  #payroll-rate-card .payroll-rate-batch-heading,
  #payroll-rate-card .payroll-rate-batch .button { grid-column: auto; }
  #payroll-rate-card .payroll-rate-list-toolbar { align-items: flex-start; flex-direction: column; }
  #payroll-rate-card .payroll-rate-employee-card { padding: 14px 12px 14px 46px; gap: 14px; }
  #payroll-rate-card .hourly-rate-form { grid-template-columns: 1fr; }
  #payroll-rate-card .payroll-rate-save { width: 100%; }
}

/* ========================================================================== 
   QIDIAN v131 — audited component layer
   Keeps the self-owned theme while tightening hierarchy, accessibility and
   the attendance-import workflow.  Scoped rules intentionally sit last so
   they replace accumulated historical patch overrides without recoloring the
   full product.
   ========================================================================== */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.card,
.settings-dialog-card,
.employee-dialog-card {
  border-color: rgba(210, 227, 238, .92);
  box-shadow: 0 14px 34px rgba(31, 83, 111, .07);
}

.button,
.toolbar-chip,
.subpage-tabs button,
input,
select,
textarea {
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(43, 169, 222, .18);
  outline-offset: 2px;
}

.table-wrap th,
.table-wrap td,
.table-wrap .employee-name-copy {
  user-select: text;
}
.table-wrap th:not(:has(button)),
.table-wrap td:not(:has(button, a, input, select)) {
  cursor: text;
}

#attendance-import-dialog .settings-dialog-card {
  width: min(880px, calc(100vw - 32px));
  max-height: min(880px, calc(100dvh - 30px));
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

#attendance-import-dialog .settings-dialog-head {
  padding: 24px 26px 18px;
  border-bottom: 1px solid #e8f0f5;
  background: linear-gradient(135deg, rgba(234, 248, 253, .7), rgba(255, 255, 255, .94));
}

#attendance-import-dialog .settings-dialog-head h2 {
  font-size: 25px;
  letter-spacing: -.035em;
}

#attendance-import-dialog .settings-dialog-head p {
  margin-top: 6px;
  color: #73889b;
  font-size: 13px;
}

#attendance-import-dialog .settings-dialog-body {
  overflow-y: auto;
  padding: 22px 26px 26px;
  scrollbar-gutter: stable;
}

.attendance-import-workspace {
  display: grid;
  gap: 16px;
}

.attendance-import-rules,
.attendance-manual-entry {
  border: 1px solid #e0ebf2;
  border-radius: 16px;
  background: #f9fcfe;
  overflow: hidden;
}

.attendance-import-rules > summary,
.attendance-manual-entry > summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  cursor: pointer;
  list-style: none;
  color: #294963;
}
.attendance-import-rules > summary::-webkit-details-marker,
.attendance-manual-entry > summary::-webkit-details-marker { display: none; }
.attendance-import-rules > summary span,
.attendance-manual-entry > summary span { display: grid; gap: 2px; }
.attendance-import-rules > summary b,
.attendance-manual-entry > summary b { font-size: 14px; }
.attendance-import-rules > summary small,
.attendance-manual-entry > summary small { color: #8599aa; font-size: 11px; }
.attendance-import-rules > summary i,
.attendance-manual-entry > summary i {
  color: #178ec7;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.attendance-import-rules[open] > summary,
.attendance-manual-entry[open] > summary { background: #f1f9fd; }
.attendance-import-rules .operations-rule-summary {
  margin: 0 !important;
  padding: 0 16px 16px;
  border: 0;
  background: transparent;
}

.attendance-import-main {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: 16px;
  align-items: stretch;
}

.attendance-file-dropzone {
  position: relative;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1.5px dashed #9ccfe8;
  border-radius: 20px;
  background: linear-gradient(145deg, #f5fbfe, #ffffff);
  color: #31536d;
  padding: 26px 22px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.attendance-file-dropzone::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 15%, rgba(43, 169, 222, .12), transparent 44%);
  content: "";
  pointer-events: none;
}
.attendance-file-dropzone:hover,
.attendance-file-dropzone[data-dragging="true"] {
  border-color: #2ba9de;
  background: #f0faff;
  box-shadow: inset 0 0 0 3px rgba(43, 169, 222, .08);
}
.attendance-file-dropzone[data-state="ready"] {
  border-style: solid;
  border-color: #70c5a9;
  background: linear-gradient(145deg, #f0fbf7, #ffffff);
}
.attendance-file-dropzone[data-state="error"] { border-color: #f09a9a; background: #fff8f8; }
.attendance-file-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.attendance-file-icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #e8f7fd;
  color: #199aca;
  box-shadow: 0 9px 22px rgba(43, 169, 222, .14);
}
.attendance-file-icon svg { width: 29px; height: 29px; }
.attendance-file-dropzone strong { position: relative; font-size: 17px; letter-spacing: -.015em; }
.attendance-file-dropzone > span:not(.attendance-file-icon) { position: relative; color: #7b91a3; font-size: 12px; }
.attendance-file-dropzone small {
  position: relative;
  max-width: 100%;
  color: #168dbd;
  font-size: 12px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attendance-file-dropzone small[data-state="error"] { color: #e24e56; white-space: normal; }

.attendance-import-preview {
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid #e0ebf2;
  border-radius: 20px;
  background: #fff;
  padding: 20px;
}
.attendance-import-preview[data-state="ready"] {
  border-color: #b8e2d3;
  box-shadow: 0 12px 28px rgba(14, 146, 119, .07);
}
.attendance-import-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.attendance-import-preview-head > div { display: grid; gap: 3px; }
.attendance-import-preview-head span { color: #8397a9; font-size: 11px; font-weight: 700; }
.attendance-import-preview-head strong { color: #183c56; font-size: 17px; }
.attendance-import-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.attendance-import-preview-grid > span {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 2px;
  border-radius: 14px;
  background: #f5fafe;
  padding: 12px 14px;
}
.attendance-import-preview-grid b { color: #183c56; font-size: 23px; }
.attendance-import-preview-grid small { color: #8297a8; font-size: 11px; }
.attendance-import-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #edf3f7;
  padding-top: 14px;
}
.attendance-import-range span { color: #8498aa; font-size: 11px; }
.attendance-import-range strong { color: #31536d; font-size: 12px; text-align: right; }

.attendance-manual-entry label {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
  color: #405f77;
  font-size: 12px;
  font-weight: 750;
}
.attendance-manual-entry textarea {
  min-height: 140px;
  resize: vertical;
  border-radius: 14px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.65;
}

.attendance-import-feedback {
  min-height: 22px;
  border-radius: 10px;
  color: #70869a;
  padding: 3px 4px;
  font-size: 12px;
}
.attendance-import-feedback[data-state="loading"] { color: #168dbd; }
.attendance-import-feedback[data-state="ready"] { color: #0e9277; }
.attendance-import-feedback[data-state="error"] { color: #e24e56; }

#attendance-import-dialog .attendance-import-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(4, auto);
  align-items: center;
  gap: 10px;
  margin: 16px 0 0 !important;
  border: 1px solid #e3edf3;
  border-radius: 14px;
  background: #fafcfe;
  padding: 12px 14px;
  color: #70869a;
  font-size: 11px;
}
#attendance-import-dialog .attendance-import-summary strong {
  min-width: 0;
  color: #31536d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#attendance-import-dialog .attendance-import-actions {
  position: sticky;
  z-index: 3;
  bottom: -26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 -26px -26px;
  border-top: 1px solid #e7eff4;
  background: rgba(255, 255, 255, .94);
  padding: 14px 26px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 28px rgba(31, 83, 111, .06);
  backdrop-filter: blur(14px);
}
#attendance-import-dialog .attendance-import-actions .button { min-width: 116px; }
#attendance-import-dialog .attendance-import-actions .button:disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
}

/* General clarity pass: retain the current palette but remove the soft/blurred
   feel from high-density admin pages. */
.content .section-heading h2,
.content .premium-section-heading h2 { color: #183c56; font-weight: 780; }
.content .section-heading p,
.content .premium-section-heading p { color: #758b9d; }
.content .table-wrap {
  border-color: #e0eaf1;
  background: #fff;
}
.content table thead th {
  color: #526f86;
  font-weight: 780;
  letter-spacing: .01em;
}
.content table tbody tr:hover { background: #f7fbfe; }
.content .subpage-tabs {
  border-color: #dceaf2;
  background: #f7fbfd;
}
.content .subpage-tabs button.active {
  box-shadow: 0 7px 18px rgba(43, 169, 222, .16);
}

@media (max-width: 760px) {
  #attendance-import-dialog .settings-dialog-card {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  #attendance-import-dialog .settings-dialog-head { padding: calc(17px + env(safe-area-inset-top, 0px)) 16px 14px; }
  #attendance-import-dialog .settings-dialog-body { padding: 14px 14px 18px !important; }
  #attendance-import-dialog .settings-dialog-head h2 { font-size: 21px; }
  .attendance-import-main { grid-template-columns: 1fr; }
  .attendance-file-dropzone,
  .attendance-import-preview { min-height: 210px; }
  #attendance-import-dialog .attendance-import-summary { grid-template-columns: 1fr 1fr; }
  #attendance-import-dialog .attendance-import-summary strong { grid-column: 1 / -1; }
  #attendance-import-dialog .attendance-import-actions {
    bottom: -18px;
    margin: 0 -14px -18px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  #attendance-import-dialog .attendance-import-actions .button { flex: 1; min-width: 0; }
}

/* ========================================================================== 
   QIDIAN v131 — full-upgrade stabilization
   Attendance drill-down, payroll list containment and schedule clarity.
   ========================================================================== */

/* Attendance overview cards are genuine data entrances, not decorative cards. */
.attendance-overview-card.dashboard-link {
  position: relative;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 34px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.attendance-overview-card.dashboard-link:hover,
.attendance-overview-card.dashboard-link:focus-visible {
  border-color: rgba(43, 169, 222, .58);
  background: linear-gradient(180deg, #fff 0%, #f8fcff 100%);
  box-shadow: 0 14px 32px rgba(32, 120, 163, .11);
  transform: translateY(-1px);
}
.attendance-overview-card.dashboard-link:focus-visible {
  outline: 3px solid rgba(43, 169, 222, .18);
  outline-offset: 2px;
}
.attendance-overview-entry {
  position: absolute;
  right: 17px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #159aca;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  pointer-events: none;
}

/* Payroll: one stable employee row per record.  Previous two-card grid could
   exceed its cell width because the internal form needs several controls. */
#payroll-rate-card .payroll-rate-card-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100%;
  min-width: 0;
}
#payroll-rate-card .payroll-rate-employee-card {
  grid-template-columns: minmax(240px, .78fr) minmax(0, 1.65fr) !important;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  overflow: hidden;
  contain: layout paint;
}
#payroll-rate-card .payroll-rate-person,
#payroll-rate-card .payroll-rate-person-copy,
#payroll-rate-card .hourly-rate-form,
#payroll-rate-card .hourly-rate-form label {
  min-width: 0 !important;
  max-width: 100%;
}
#payroll-rate-card .hourly-rate-form {
  grid-template-columns: minmax(120px, .7fr) minmax(180px, 1.05fr) minmax(170px, .9fr) minmax(86px, auto) !important;
}
#payroll-rate-card .payroll-rate-person-copy > strong,
#payroll-rate-card .payroll-rate-person-copy > small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#payroll-rate-card .payroll-rate-batch {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 1320px) {
  #payroll-rate-card .payroll-rate-employee-card {
    grid-template-columns: minmax(210px, .68fr) minmax(0, 1.4fr) !important;
  }
  #payroll-rate-card .hourly-rate-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #payroll-rate-card .payroll-rate-save {
    width: 100%;
  }
}
@media (max-width: 860px) {
  #payroll-rate-card .payroll-rate-employee-card {
    grid-template-columns: 1fr !important;
    padding: 15px 13px 15px 48px !important;
  }
  #payroll-rate-card .hourly-rate-form {
    grid-template-columns: 1fr !important;
  }
}

/* Schedule page: never obscure the entire table while a single row saves. */
#schedule-panel[aria-busy="true"]::after,
#schedule-panel[aria-busy="true"]::before {
  content: none !important;
  display: none !important;
}
#schedule-panel[aria-busy="true"] {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.schedule-workspace-card {
  overflow: visible;
}
.schedule-filter-bar {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.35fr) repeat(5, minmax(145px, .78fr)) minmax(165px, .88fr) !important;
  align-items: end;
  gap: 11px !important;
  min-width: 0;
}
.schedule-filter-bar label,
.schedule-filter-bar input,
.schedule-filter-bar select {
  min-width: 0;
  width: 100%;
}
.schedule-command-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px 18px !important;
}
.schedule-command-copy,
.schedule-command-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}
.schedule-command-actions {
  justify-content: flex-end;
  margin-left: auto;
}
.schedule-table-wrap {
  position: relative;
  max-width: 100%;
  min-height: 180px;
  padding-bottom: 18px;
}
.schedule-operations-table {
  min-width: 1420px;
  table-layout: fixed;
}
.schedule-operations-table th:nth-child(2),
.schedule-operations-table td:nth-child(2) { width: 220px; }
.schedule-operations-table th:nth-child(3),
.schedule-operations-table td:nth-child(3) { width: 235px; }
.schedule-employee-cell > span,
.schedule-contact-cell {
  min-width: 0;
}
.schedule-employee-cell strong,
.schedule-contact-cell > span,
.schedule-contact-cell > small {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule-row-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(64px, 1fr));
  gap: 8px !important;
  min-width: 142px;
}
.schedule-row-action {
  min-width: 0 !important;
  white-space: nowrap;
}
.schedule-pagination,
.data-pagination.schedule-pagination {
  position: sticky;
  z-index: 7;
  bottom: 0;
  margin-top: 12px;
  border: 1px solid #e0eaf1;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 24px rgba(31, 83, 111, .06);
  backdrop-filter: blur(12px);
}
@media (max-width: 1380px) {
  .schedule-filter-bar {
    grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
  }
  .schedule-search-field { grid-column: span 2; }
}
@media (max-width: 820px) {
  .schedule-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .schedule-search-field { grid-column: 1 / -1; }
  .schedule-command-bar { align-items: stretch !important; }
  .schedule-command-copy,
  .schedule-command-actions { width: 100%; }
  .schedule-command-actions { justify-content: flex-start; margin-left: 0; }
  .schedule-command-actions .button { flex: 1 1 132px; }
}

/* An opened attendance dialog remains usable even on shorter screens. */
#attendance-import-dialog .settings-dialog-body {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* ========================================================================== 
   QIDIAN v131 — simplified payroll-rate table
   Keeps the current self-owned theme while removing the dense employee-card
   layout that could overlap at medium desktop widths.
   ========================================================================== */
#payroll-rate-card .payroll-rate-table-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: 1px solid #e2edf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 83, 111, .055);
}
#payroll-rate-card .payroll-rate-table {
  width: 100%;
  min-width: 1050px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
#payroll-rate-card .payroll-rate-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 48px;
  border-bottom: 1px solid #e2edf3;
  background: #f7fbfd;
  color: #526b80;
  font-size: 12.5px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}
#payroll-rate-card .payroll-rate-table th:nth-child(1) { width: 64px; text-align: center; }
#payroll-rate-card .payroll-rate-table th:nth-child(2) { width: 240px; }
#payroll-rate-card .payroll-rate-table th:nth-child(3) { width: 105px; }
#payroll-rate-card .payroll-rate-table th:nth-child(4) { width: 170px; }
#payroll-rate-card .payroll-rate-table th:nth-child(5) { width: 145px; }
#payroll-rate-card .payroll-rate-table th:nth-child(6) { width: 170px; }
#payroll-rate-card .payroll-rate-table th:nth-child(7) { width: 170px; }
#payroll-rate-card .payroll-rate-table th:nth-child(8) { width: 100px; text-align: center; }
#payroll-rate-card .payroll-rate-row td {
  height: 70px;
  border-bottom: 1px solid #edf3f7;
  background: #fff;
  padding: 10px 12px;
  vertical-align: middle;
}
#payroll-rate-card .payroll-rate-row:last-child td { border-bottom: 0; }
#payroll-rate-card .payroll-rate-row:hover td { background: #fbfdff; }
#payroll-rate-card .payroll-rate-check { text-align: center; }
#payroll-rate-card .payroll-rate-check input {
  width: 18px;
  height: 18px;
  accent-color: #2ba9de;
  cursor: pointer;
}
#payroll-rate-card .payroll-rate-employee-cell {
  min-width: 0;
  gap: 11px;
}
#payroll-rate-card .payroll-rate-employee-cell > div {
  min-width: 0;
  max-width: 175px;
}
#payroll-rate-card .payroll-rate-employee-cell strong,
#payroll-rate-card .payroll-rate-employee-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#payroll-rate-card .payroll-rate-employee-cell strong {
  color: #1f2b3d;
  font-size: 13.5px;
  font-weight: 800;
}
#payroll-rate-card .payroll-rate-employee-cell small {
  margin-top: 3px;
  color: #7d90a3;
  font-size: 11.5px;
}
#payroll-rate-card .hourly-rate-form--table {
  display: none;
}
#payroll-rate-card .payroll-rate-table input[type="text"],
#payroll-rate-card .payroll-rate-table input[type="date"],
#payroll-rate-card .payroll-rate-table select {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid #d8e6ef;
  border-radius: 10px;
  background: #fff;
  color: #1f2b3d;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 650;
  box-sizing: border-box;
}
#payroll-rate-card .payroll-rate-table input:focus,
#payroll-rate-card .payroll-rate-table select:focus {
  border-color: #2ba9de;
  outline: 3px solid rgba(43, 169, 222, .12);
}
#payroll-rate-card .payroll-rate-money-input--table {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid #d8e6ef;
  border-radius: 10px;
  background: #fff;
}
#payroll-rate-card .payroll-rate-money-input--table:focus-within {
  border-color: #2ba9de;
  box-shadow: 0 0 0 3px rgba(43, 169, 222, .12);
}
#payroll-rate-card .payroll-rate-money-input--table input {
  height: 38px;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding-left: 2px;
}
#payroll-rate-card .payroll-rate-table td:last-child { text-align: center; }
#payroll-rate-card .payroll-rate-table .payroll-rate-save {
  min-width: 72px;
  height: 40px;
  padding: 0 15px;
  border-radius: 10px;
}
#payroll-rate-card .payroll-rate-batch {
  margin-bottom: 14px;
}
#payroll-rate-card .payroll-rate-list-toolbar {
  margin-bottom: 10px;
}
@media (max-width: 720px) {
  #payroll-rate-card .payroll-rate-table { min-width: 980px; }
  #payroll-rate-card .payroll-rate-table-wrap {
    max-height: calc(100dvh - 290px);
    border-radius: 12px;
  }
}

/* QIDIAN v131 PATCH002 — attendance subpage tab spacing.
   Keep each entry visually independent; prevent the active tab border/shadow
   from covering its neighbor on narrow and high-density layouts. */
.content .attendance-subpage-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 6px;
  overflow: visible;
  isolation: isolate;
  border: 1px solid #dceaf2;
  border-radius: 14px;
  background: #f6fbfd;
  box-shadow: none;
}
.content .attendance-subpage-tabs button,
.content .attendance-subpage-tabs button + button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 126px;
  min-height: 40px;
  margin: 0 !important;
  padding: 0 18px;
  border: 1px solid #cfe3ed;
  border-radius: 10px;
  background: #fff;
  color: #47647c;
  box-shadow: none;
  transform: none;
}
.content .attendance-subpage-tabs button:hover {
  border-color: #9ed4e8;
  background: #edf9fd;
  color: #168dbd;
}
.content .attendance-subpage-tabs button.active {
  z-index: 2;
  border-color: var(--qidian-primary);
  background: var(--qidian-primary);
  color: #fff;
  box-shadow: 0 5px 12px rgba(43, 169, 222, .18);
  transform: none;
}
.content .attendance-subpage-tabs button:focus-visible {
  z-index: 3;
}

@media (max-width: 760px) {
  .content .attendance-subpage-tabs {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .content .attendance-subpage-tabs button {
    min-width: max-content;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

/* v131 PATCH003 — hierarchical permission presets and clean scope controls */
.permission-fixed-scope {
  display: grid;
  min-height: 62px;
  align-content: center;
  gap: 4px;
  border: 1px solid #dbe7f0;
  border-radius: 12px;
  background: linear-gradient(135deg, #f7fbfe 0%, #ffffff 100%);
  padding: 10px 14px;
}
.permission-fixed-scope strong { color: #1d567c; font-size: 12.5px; }
.permission-fixed-scope span { color: #7b92a6; font-size: 10.5px; line-height: 1.45; }
.permission-scope-subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 13px 0 8px;
}
.permission-scope-subtitle strong { color: #244f70; font-size: 12.5px; }
.permission-scope-subtitle span { color: #8196a8; font-size: 10.5px; text-align: right; }
.permission-group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.permission-group-option {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  border: 1px solid #dce8f2;
  border-radius: 12px;
  background: #fff;
  padding: 11px 12px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.permission-group-option:hover { border-color: #9ed2ef; background: #fbfeff; }
.permission-group-option:has(input:checked) { border-color: #73c3e8; background: #effaff; box-shadow: 0 6px 16px rgba(35, 145, 196, .08); }
.permission-group-option > span { display: grid; min-width: 0; gap: 2px; }
.permission-group-option strong { overflow: hidden; color: #284f6c; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.permission-group-option small { color: #8195a6; font-size: 9.5px; }
.permission-group-grid.is-empty::after {
  content: "所选仓库尚未建立可用组别";
  grid-column: 1 / -1;
  border: 1px dashed #d8e7f1;
  border-radius: 12px;
  color: #8398a9;
  padding: 16px;
  text-align: center;
}
.permission-template-bar {
  align-items: center;
  background: linear-gradient(135deg, #f5fbff 0%, #ffffff 100%);
}
.permission-template-bar > span { min-width: 210px; color: #315e7d; font-size: 11px; }
.permission-form-dirty .permission-save-bar { border-color: #79c8e9; box-shadow: 0 0 0 3px rgba(43, 169, 222, .09); }
.permission-role-employee #permission-page-section,
.permission-role-employee #permission-operation-section { opacity: .62; }
.permission-option.role-disabled { background: #f7f9fb; }

/* Replace native checkbox/radio chrome so no secondary hidden square is visible. */
.permission-option input[type="checkbox"],
.permission-site-option input[type="checkbox"],
.permission-group-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  border: 1.5px solid #9fb8ca;
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
  outline: none;
}
.permission-option input[type="checkbox"]:checked,
.permission-site-option input[type="checkbox"]:checked,
.permission-group-option input[type="checkbox"]:checked {
  border-color: #2ba9de;
  background: #2ba9de;
}
.permission-option input[type="checkbox"]:checked::after,
.permission-site-option input[type="checkbox"]:checked::after,
.permission-group-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.permission-option input[type="checkbox"]:disabled,
.permission-site-option input[type="checkbox"]:disabled,
.permission-group-option input[type="checkbox"]:disabled {
  cursor: default;
  opacity: .55;
}
.permission-option input[type="checkbox"]:focus-visible,
.permission-site-option input[type="checkbox"]:focus-visible,
.permission-group-option input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(43, 169, 222, .18);
}
@media (max-width: 1050px) {
  .permission-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .permission-group-grid { grid-template-columns: 1fr; }
  .permission-scope-subtitle { align-items: flex-start; flex-direction: column; gap: 3px; }
  .permission-scope-subtitle span { text-align: left; }
  .permission-template-bar > span { width: 100%; min-width: 0; }
}

/* PATCH005 — permission presets, hierarchy, and simple email registration */
.permission-layout {
  align-items: start;
  gap: 20px;
}
.permission-member-list {
  padding: 16px;
}
.permission-member-toolbar {
  gap: 10px;
  margin-bottom: 12px;
}
.permission-member-scroll {
  display: grid;
  gap: 9px;
}
.permission-member {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  min-height: 74px;
  border-color: #e1ebf2;
  border-radius: 14px;
  background: #fff;
  padding: 12px 13px;
  box-shadow: 0 4px 14px rgba(31, 83, 111, .035);
}
.permission-member:hover {
  border-color: #a9d7ec;
  background: #f8fcff;
}
.permission-member.active {
  border-color: #58b9e1;
  background: linear-gradient(135deg, #eefaff 0%, #fff 100%);
  box-shadow: 0 8px 22px rgba(43, 169, 222, .10);
}
.permission-member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 15px;
}
.permission-member strong {
  color: #1f405b;
  font-size: 14px;
  line-height: 1.35;
}
.permission-member small {
  color: #6f879a;
  font-size: 11px;
  line-height: 1.4;
}
.permission-member em {
  color: #267cae;
  font-size: 11px;
  line-height: 1.4;
}
.permission-editor {
  overflow: hidden;
  border: 1px solid #dce9f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(31, 83, 111, .065);
}
.permission-editor-head {
  border-bottom: 1px solid #eaf1f6;
  background: linear-gradient(135deg, #f7fcff 0%, #fff 70%);
  padding: 20px 22px;
}
.permission-editor-head h2 {
  margin-top: 4px;
  color: #1c3d58;
  font-size: 22px;
}
.permission-editor-head p {
  font-size: 12px;
}
.permission-section {
  margin: 16px 18px;
  border-color: #e1ecf3;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
}
.permission-scope-card {
  background: linear-gradient(180deg, #fbfeff 0%, #fff 100%);
}
.permission-role-scope label,
.permission-member-toolbar label {
  color: #365b75;
  font-size: 12px;
  font-weight: 800;
}
.permission-role-scope select,
.permission-member-toolbar input {
  min-height: 44px;
  border-color: #d6e6f0;
  border-radius: 11px;
  background: #fff;
  color: #234863;
  font-size: 13px;
}
.permission-site-grid,
.permission-group-grid,
.permission-grid {
  gap: 11px;
}
.permission-site-option,
.permission-group-option,
.permission-option,
.permission-template-option {
  position: relative;
  min-height: 64px;
  border: 1px solid #dce8f1;
  border-radius: 13px;
  background: #fff;
  padding: 13px 14px;
  box-shadow: 0 4px 13px rgba(31, 83, 111, .025);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.permission-site-option:hover,
.permission-group-option:hover,
.permission-option:hover,
.permission-template-option:hover {
  border-color: #9dd4eb;
  background: #fbfeff;
  box-shadow: 0 8px 18px rgba(43, 169, 222, .07);
}
.permission-site-option:has(input:checked),
.permission-group-option:has(input:checked),
.permission-option.selected,
.permission-template-option.selected {
  border-color: #54bae2;
  background: #effaff;
  box-shadow: 0 0 0 3px rgba(43, 169, 222, .08);
}
.permission-option strong,
.permission-site-option strong,
.permission-group-option strong,
.permission-template-option strong {
  color: #274d69;
  font-size: 13px;
}
.permission-option small,
.permission-site-option small,
.permission-group-option small,
.permission-template-option small {
  color: #778fa2;
  font-size: 11px;
  line-height: 1.5;
}
.permission-template-form {
  display: grid;
  gap: 16px;
}
.permission-template-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 5px;
  border: 1px solid #d9e8f2;
  border-radius: 13px;
  background: #f4f9fc;
  padding: 5px;
}
.permission-template-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #54728a;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.permission-template-tabs button.active {
  background: #2ba9de;
  color: #fff;
  box-shadow: 0 7px 16px rgba(43, 169, 222, .22);
}
.permission-template-summary {
  display: grid;
  gap: 5px;
  border: 1px solid #dfeaf2;
  border-radius: 13px;
  background: #f8fcff;
  padding: 14px 16px;
}
.permission-template-summary strong {
  color: #204c6a;
  font-size: 15px;
}
.permission-template-summary span {
  color: #6f899c;
  font-size: 12px;
  line-height: 1.55;
}
.permission-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  max-height: min(58vh, 620px);
  overflow: auto;
  padding: 2px 4px 8px 2px;
}
.permission-template-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.permission-template-option > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.permission-template-option.is-locked {
  background: #f7f9fb;
  opacity: .62;
}
.permission-save-bar {
  margin: 18px;
  border-radius: 14px;
}
.permission-summary > *:last-child strong {
  white-space: normal;
}

/* One clean checkbox treatment for permissions; native duplicate chrome is removed. */
.permission-option input[type="checkbox"],
.permission-site-option input[type="checkbox"],
.permission-group-option input[type="checkbox"],
.permission-template-option input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: relative;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  margin: 1px 0 0 !important;
  border: 1.5px solid #9cb5c7 !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}
.permission-option input[type="checkbox"]:checked,
.permission-site-option input[type="checkbox"]:checked,
.permission-group-option input[type="checkbox"]:checked,
.permission-template-option input[type="checkbox"]:checked {
  border-color: #2ba9de !important;
  background: #2ba9de !important;
}
.permission-option input[type="checkbox"]:checked::after,
.permission-site-option input[type="checkbox"]:checked::after,
.permission-group-option input[type="checkbox"]:checked::after,
.permission-template-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.employee-status-stack {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.worker-registration-simple {
  gap: 15px;
}
.worker-registration-match-note {
  display: grid;
  gap: 4px;
  border: 1px solid #dcebf4;
  border-radius: 12px;
  background: #f5fbfe;
  padding: 13px 15px;
}
.worker-registration-match-note strong {
  color: #27546f;
  font-size: 13px;
}
.worker-registration-match-note span {
  color: #738b9d;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .permission-template-grid { grid-template-columns: 1fr; }
  .permission-editor-head { padding: 17px; }
  .permission-section { margin: 12px; padding: 14px; }
}
@media (max-width: 620px) {
  .permission-template-tabs { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .permission-template-tabs button { padding: 0 8px; }
  .permission-member { min-width: 250px; }
}

/* v131 PATCH005 — permission presets, unregistered employee flow, fixed schedule time, and compact data entrances */

/* One floating footer per wide table: horizontal navigation and pagination live together. */
.table-wrap,
.schedule-table-wrap,
.scalable-table-wrap,
.premium-table-wrap {
  scrollbar-width: none;
  padding-bottom: 16px;
}
.table-wrap::-webkit-scrollbar,
.schedule-table-wrap::-webkit-scrollbar,
.scalable-table-wrap::-webkit-scrollbar,
.premium-table-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.floating-table-footer {
  position: sticky !important;
  z-index: 42;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  display: flex !important;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 12px 0 4px !important;
  border: 1px solid rgba(205, 222, 234, .96) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .96) !important;
  padding: 9px 11px !important;
  box-shadow: 0 12px 30px rgba(31, 83, 111, .13) !important;
  backdrop-filter: blur(15px);
}
.floating-table-footer > .floating-table-navigation {
  position: static !important;
  inset: auto !important;
  display: flex;
  min-width: 260px;
  flex: 1 1 340px;
  align-items: center;
  gap: 8px;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.floating-table-footer > .floating-table-navigation.is-hidden {
  display: none !important;
}
.floating-table-footer .floating-table-scrollbar {
  min-width: 120px;
  height: 12px;
  flex: 1 1 auto;
  border-radius: 999px;
  background: #edf3f7;
  scrollbar-width: thin;
  scrollbar-color: #7d94a7 transparent;
}
.floating-table-footer .floating-table-scrollbar::-webkit-scrollbar { height: 8px; }
.floating-table-footer .floating-table-scrollbar::-webkit-scrollbar-track { border-radius: 999px; background: #edf3f7; }
.floating-table-footer .floating-table-scrollbar::-webkit-scrollbar-thumb { border-radius: 999px; background: #7d94a7; }
.floating-table-footer .floating-table-step {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #d8e6ef;
  border-radius: 10px;
  background: #fff;
  color: #315d7a;
  font-size: 22px;
  line-height: 1;
}
.floating-table-footer .floating-table-step:hover { border-color: #82c6e6; background: #effaff; color: #168fc6; }
.floating-table-footer > label,
.floating-table-footer > span,
.floating-table-footer > div:not(.floating-table-navigation) {
  flex: 0 0 auto;
}
.floating-table-footer .data-pagination-actions,
.floating-table-footer > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Work time is informational on the schedule page. It changes only through the push-time workflow. */
.schedule-fixed-time {
  display: inline-flex;
  min-width: 72px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9e7f0;
  border-radius: 10px;
  background: #f7fbfd;
  color: #244e6a;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  user-select: text;
}
.schedule-fixed-time.is-empty { border-style: dashed; color: #899cab; font-weight: 700; }

/* Message center work-date field: clear hierarchy without adding another large panel. */
.message-work-date {
  display: flex !important;
  min-width: 260px;
  align-items: center !important;
  gap: 14px !important;
  border: 1px solid #dbe9f2;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4fbff 0%, #fff 72%);
  padding: 9px 11px 9px 14px;
  box-shadow: 0 8px 22px rgba(43, 169, 222, .07);
}
.message-work-date > span { display: grid; min-width: 80px; gap: 2px; }
.message-work-date > span small { color: #75a4c0; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.message-work-date > span strong { color: #315a76; font-size: 12px; }
.message-work-date input {
  min-width: 150px !important;
  min-height: 42px;
  border-color: #cfe1ed;
  border-radius: 11px;
  background: #fff;
  color: #1f465f;
  font-size: 13px;
  font-weight: 750;
}

/* Attendance dashboard: the numbers themselves are the entrances; no duplicate detail links. */
.attendance-overview-card { overflow: hidden; }
.attendance-overview-main,
.attendance-overview-cell {
  border: 0;
  font: inherit;
  text-align: left;
}
.attendance-overview-main {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 13px;
  background: transparent;
  padding: 0;
}
.attendance-overview-main.dashboard-link,
.attendance-overview-cell-link { cursor: pointer; }
.attendance-overview-main.dashboard-link:hover strong,
.attendance-overview-main.dashboard-link:focus-visible strong { color: #168fc6; }
.attendance-overview-main:disabled,
.attendance-overview-cell:disabled { opacity: 1; cursor: default; }
.attendance-overview-cells { align-items: stretch; }
.attendance-overview-cell {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
  border-radius: 10px;
  background: transparent;
  padding: 7px 8px;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.attendance-overview-cell-link:hover,
.attendance-overview-cell-link:focus-visible {
  background: #effaff;
  box-shadow: inset 0 0 0 1px #b9def0;
  transform: translateY(-1px);
  outline: none;
}
.attendance-overview-cell b { color: #244c67; font-size: 16px; }
.attendance-overview-cell small { color: #748b9d; font-size: 10px; }
.attendance-overview-cell.bad b { color: #f65555; }
.attendance-overview-cell.warn b { color: #e56f16; }
.attendance-overview-entry { display: none !important; }

/* Employee registration state and optional email editor. */
.employee-status-stack { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
.employee-dialog-form label:has(input[name="email"])::after {
  content: "邮箱用于同一站点内唯一匹配员工注册账号。";
  display: block;
  margin-top: 5px;
  color: #7b91a3;
  font-size: 10px;
  font-weight: 600;
}

/* Permission page visual hierarchy. */
.permission-layout { grid-template-columns: minmax(285px, 360px) minmax(0, 1fr); }
.permission-member-list .section-heading h2 { font-size: 18px; }
.permission-member-toolbar label > span { font-size: 12.5px; }
.permission-summary { overflow: hidden; }
.permission-template-option input[type="checkbox"] { cursor: pointer; }
.permission-template-option.is-locked input[type="checkbox"] { cursor: default; }
.permission-editor .section-heading h3 { font-size: 15px; }
.permission-scope-subtitle strong { font-size: 13px; }
.permission-scope-subtitle span { max-width: 520px; }
.permission-site-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.permission-grid { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }

@media (max-width: 900px) {
  .floating-table-footer { bottom: max(8px, env(safe-area-inset-bottom, 0px)); gap: 9px; }
  .floating-table-footer > .floating-table-navigation { order: 3; width: 100%; min-width: 0; flex-basis: 100%; }
  .message-work-date { width: 100%; min-width: 0; justify-content: space-between; }
  .permission-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .floating-table-footer { border-radius: 13px !important; padding: 8px !important; }
  .floating-table-footer > label,
  .floating-table-footer > span,
  .floating-table-footer > div:not(.floating-table-navigation) { font-size: 10.5px; }
  .message-work-date { align-items: stretch !important; flex-direction: column; gap: 8px !important; }
  .message-work-date input { width: 100%; min-width: 0 !important; }
}


/* v131 PATCH006 — compact permission cards and checkboxes */
.permission-option input[type="checkbox"],
.permission-site-option input[type="checkbox"],
.permission-group-option input[type="checkbox"],
.permission-template-option input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin-top: 0 !important;
  border-radius: 4px !important;
}
.permission-option input[type="checkbox"]:checked::after,
.permission-site-option input[type="checkbox"]:checked::after,
.permission-group-option input[type="checkbox"]:checked::after,
.permission-template-option input[type="checkbox"]:checked::after {
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-width: 0 2px 2px 0;
}
.permission-option,
.permission-group-option,
.permission-template-option {
  min-height: 50px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
}
.permission-site-option {
  min-height: 56px;
  gap: 9px;
  padding: 10px 12px;
}
.permission-option > span,
.permission-group-option > span,
.permission-template-option > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0;
}
.permission-option strong,
.permission-group-option strong,
.permission-template-option strong {
  min-width: 0;
  line-height: 1.35;
}
.permission-option small,
.permission-group-option small,
.permission-template-option small {
  display: none !important;
}
.permission-grid,
.permission-group-grid,
.permission-template-grid {
  gap: 9px;
}
@media (max-width: 620px) {
  .permission-option,
  .permission-group-option,
  .permission-template-option {
    min-height: 46px;
    padding: 9px 10px;
  }
}

/* v131 PATCH009 — final requested workforce and dashboard refinements */
.dashboard-analytics-card .ring-panel { min-height: 0 !important; align-items: start; padding-block: 12px !important; }
.dashboard-analytics-card .ring-grid { align-items: start; }
.dashboard-analytics-card .legend-row { cursor: default; transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease; }
.dashboard-analytics-card .legend-row.is-ring-active { background: #edf8ff !important; box-shadow: inset 0 0 0 1px #8dccec, 0 7px 18px rgba(32,132,190,.10); transform: translateX(3px); opacity: 1; }
.dashboard-analytics-card .ring.is-segment-preview { transform: none; filter: none; box-shadow: none; }
.dashboard-analytics-card .ring,
.dashboard-analytics-card .ring-content b { transition: background .2s ease, transform .2s ease, filter .2s ease, box-shadow .2s ease, color .2s ease; }

.schedule-operations-table td:not(:last-child),
.schedule-employee-cell,
.schedule-contact-cell,
.schedule-fixed-time,
.employee-data-table td:not(:last-child) { cursor: text !important; user-select: text !important; -webkit-user-select: text !important; }
.schedule-operations-table button,
.schedule-operations-table input,
.schedule-operations-table select,
.employee-data-table button,
.employee-data-table input,
.employee-data-table select { cursor: pointer !important; }

.app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control::before,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control::after,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker::before,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker::after { content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; }

.employee-dialog-form { align-items: start !important; grid-auto-rows: minmax(78px, auto); }
.employee-dialog-form > label { display: grid !important; grid-template-rows: 20px 44px auto; align-content: start; gap: 6px !important; margin: 0 !important; }
.employee-dialog-form > label > input,
.employee-dialog-form > label > select { width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; box-sizing: border-box; }
.employee-dialog-actions { align-items: center; justify-content: flex-end; }

.permission-option input[type="checkbox"],
.permission-site-option input[type="checkbox"],
.permission-group-option input[type="checkbox"],
.permission-template-option input[type="checkbox"] { width: 14px !important; height: 14px !important; flex-basis: 14px !important; }
.permission-option input[type="checkbox"]:checked::after,
.permission-site-option input[type="checkbox"]:checked::after,
.permission-group-option input[type="checkbox"]:checked::after,
.permission-template-option input[type="checkbox"]:checked::after { left: 3px !important; top: 0 !important; width: 4px !important; height: 8px !important; }
.permission-option,
.permission-group-option,
.permission-template-option { min-height: 44px !important; padding: 8px 10px !important; }
.permission-site-option { min-height: 48px !important; padding: 8px 10px !important; }
.permission-grid,
.permission-group-grid,
.permission-template-grid,
.permission-site-grid { gap: 7px !important; }

@media (max-width: 620px) {
  .employee-dialog-form { grid-template-columns: 1fr !important; grid-auto-rows: auto; }
  .employee-dialog-form > label { grid-template-rows: 20px 44px auto; }
}

/* PATCH010: remove the remaining language overlay frame and dashboard whitespace. */
.workspace-language-control .language-picker,
.worker-language-float .language-picker,
.auth-language-float .language-picker {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.dashboard-group-card { overflow: hidden; padding: 0 !important; }
.dashboard-group-card > .section-heading { margin: 0 !important; padding: 18px 20px 14px !important; }
.dashboard-group-card > .dashboard-shift-panels { margin: 0 !important; padding: 0 !important; background: transparent !important; }
.dashboard-group-card .dashboard-shift-panel { margin: 0 !important; border-right: 0; border-left: 0; border-radius: 0; }
.legend-dot.green { background: var(--good) !important; }

/* Data fields remain clickable where applicable, but use a selectable text cursor. */
.schedule-operations-table .table-drill-link,
.schedule-operations-table .table-status-link,
.schedule-operations-table .table-hours-link,
.schedule-operations-table .schedule-fixed-time {
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}
.schedule-operations-table .schedule-row-action,
.schedule-operations-table [data-schedule-select-row],
.schedule-operations-table [data-schedule-select-all] { cursor: pointer !important; user-select: none !important; }
.fixed-sort-indicator { display: flex; min-height: 40px; align-items: center; border: 1px solid #dce8ef; border-radius: 10px; background: #f7fbfd; color: #315d78; padding: 0 11px; font-size: 12px; font-weight: 750; }

/* Multiple employment relationships in the worker registration portal. */
.worker-relationship-switcher {
  display: grid;
  min-width: 0;
  gap: 9px;
  border: 1px solid #d9e9f2;
  border-radius: 14px;
  background: linear-gradient(145deg, #f2fbff 0%, #fff 72%);
  padding: 12px 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(28,98,137,.07);
  transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.worker-relationship-switcher:focus-within {
  border-color: #85c9e8;
  box-shadow: 0 0 0 3px rgba(43,169,222,.10), 0 10px 24px rgba(28,98,137,.09);
}
.worker-relationship-switcher.is-switching { opacity: .68; }
.worker-relationship-heading {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.worker-relationship-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #2ba9de, #168fbe);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 6px 14px rgba(31,145,195,.20);
}
.worker-relationship-heading > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.worker-relationship-heading strong { color: #204a67; font-size: 12px; line-height: 1.3; }
.worker-relationship-heading small { overflow: hidden; color: #7892a5; font-size: 9.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.worker-relationship-heading em {
  border: 1px solid #cce8f5;
  border-radius: 999px;
  background: #eaf8fd;
  color: #187fae;
  padding: 4px 7px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.worker-relationship-control { position: relative; display: block; min-width: 0; }
.worker-relationship-control select {
  width: 100%;
  min-width: 0;
  height: 42px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cfe1eb;
  border-radius: 11px;
  background: #fff;
  color: #244c67;
  padding: 0 36px 0 11px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(39,94,124,.05);
}
.worker-relationship-control select:focus { border-color: #63bce2; outline: 0; box-shadow: 0 0 0 3px rgba(43,169,222,.12); }
.worker-relationship-control select:disabled { cursor: wait; }
.worker-relationship-control option:disabled { color: #9aa9b5; }
.worker-relationship-control > i {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #4e7992;
  font-size: 15px;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-56%);
}

@media (max-width: 590px) {
  .worker-relationship-switcher { gap: 7px; border-radius: 11px; padding: 9px; }
  .worker-relationship-heading { grid-template-columns: 27px minmax(0,1fr) auto; gap: 7px; }
  .worker-relationship-icon { width: 27px; height: 27px; border-radius: 8px; font-size: 11px; }
  .worker-relationship-heading strong { font-size: 11px; }
  .worker-relationship-heading small { font-size: 8.8px; }
  .worker-relationship-heading em { padding: 3px 6px; font-size: 8.5px; }
  .worker-relationship-control select { height: 38px; padding-right: 32px; font-size: 10.5px; }
  .worker-relationship-control > i { right: 10px; }
}

/* v131 PATCH011 — nine-item UI acceptance pass.  This block is intentionally
   last so the production versioned stylesheet cannot fall back to an older
   oversized control treatment. */

/* Permission management: visibly smaller checks and denser premium cards. */
.permission-editor-head h2 { font-size: 22px !important; line-height: 1.2; }
.permission-section { margin: 10px 12px !important; padding: 12px !important; border-radius: 13px !important; }
.permission-section > .section-heading { min-height: 30px !important; margin-bottom: 8px !important; }
.permission-grid,
.permission-site-grid,
.permission-group-grid,
.permission-template-grid { gap: 5px !important; }
.permission-option,
.permission-site-option,
.permission-group-option,
.permission-template-option {
  min-height: 36px !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 9px !important;
  padding: 6px 8px !important;
  box-shadow: none !important;
}
.permission-site-option { min-height: 40px !important; }
.permission-option strong,
.permission-site-option strong,
.permission-group-option strong,
.permission-template-option strong { font-size: 12px !important; line-height: 1.25 !important; }
.permission-option input[type="checkbox"],
.permission-site-option input[type="checkbox"],
.permission-group-option input[type="checkbox"],
.permission-template-option input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 !important;
  border-width: 1.25px !important;
  border-radius: 4px !important;
}
.permission-option input[type="checkbox"]:checked::after,
.permission-site-option input[type="checkbox"]:checked::after,
.permission-group-option input[type="checkbox"]:checked::after,
.permission-template-option input[type="checkbox"]:checked::after {
  left: 3px !important;
  top: 0 !important;
  width: 3px !important;
  height: 7px !important;
  border-width: 0 1.5px 1.5px 0 !important;
}
.permission-scope-subtitle { min-height: 22px; margin: 8px 0 4px !important; }
.permission-save-bar { min-height: 58px; align-items: center; gap: 14px; margin: 10px 12px 12px !important; padding: 9px 11px !important; }
.permission-save-bar > strong { color: #315b76; font-size: 12px; }
.permission-template-summary { padding: 10px 12px !important; }
.permission-member { min-height: 67px !important; padding: 9px 10px !important; }
.permission-member > span:nth-child(2) > strong { font-size: 15px !important; }

/* Schedule and registration data is selectable/copyable.  Only genuine edit
   controls keep the pointer cursor. */
.schedule-operations-table td:not(.schedule-checkbox-cell):not(:last-child),
.schedule-operations-table .schedule-employee-cell,
.schedule-operations-table .schedule-contact-cell,
.schedule-operations-table .table-drill-link,
.schedule-operations-table .table-status-link,
.schedule-operations-table .table-hours-link,
.schedule-operations-table .schedule-fixed-time,
.schedule-status-summary button {
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}
.schedule-operations-table .schedule-row-action,
.schedule-operations-table input[type="checkbox"],
.schedule-command-bar button,
.schedule-filter-bar input,
.schedule-filter-bar select { cursor: pointer !important; user-select: none !important; }

/* One native-hidden table scrollbar, one merged floating scrollbar/pager. */
.table-wrap,
.schedule-table-wrap,
.scalable-table-wrap,
.premium-table-wrap { scrollbar-width: none !important; }
.table-wrap::-webkit-scrollbar,
.schedule-table-wrap::-webkit-scrollbar,
.scalable-table-wrap::-webkit-scrollbar,
.premium-table-wrap::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
.floating-table-footer { position: sticky !important; bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; }

/* Message work date and aligned employee editor are visibly distinct. */
.message-work-date {
  border-color: #9fd4ea !important;
  background: linear-gradient(135deg, #eaf8ff 0%, #f7fcff 45%, #fff 100%) !important;
  box-shadow: 0 10px 26px rgba(32, 139, 192, .13) !important;
}
.message-work-date input { border-color: #a8d4e7 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
.employee-dialog-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start !important; gap: 12px 16px !important; }
.employee-dialog-form > label { grid-template-rows: 18px 44px auto !important; align-content: start !important; margin: 0 !important; }
.employee-dialog-form > label > input,
.employee-dialog-form > label > select { width: 100% !important; height: 44px !important; margin: 0 !important; box-sizing: border-box !important; }

/* Remove the language/profile phantom frame and all leftover group-card space. */
.workspace-floating-controls,
.workspace-language-control,
.workspace-language-control .language-picker,
.worker-language-float,
.worker-language-float .language-picker,
.auth-language-float,
.auth-language-float .language-picker {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.dashboard-group-card,
.dashboard-group-card .dashboard-shift-panels,
.dashboard-group-card .dashboard-shift-panel,
.dashboard-group-card .group-shift-table-wrap { min-height: 0 !important; }
.dashboard-group-card { padding: 0 !important; }
.dashboard-group-card .dashboard-shift-panels { margin: 0 !important; padding: 0 !important; }
.dashboard-group-card .dashboard-shift-panel { margin: 0 !important; border-radius: 0 !important; }

/* Ring hover is prominent and always shows the hovered segment percentage. */
.dashboard-analytics-card .legend-row.is-ring-active {
  border-color: #59bce7 !important;
  background: #e9f8ff !important;
  box-shadow: inset 4px 0 0 #2ba9de, 0 8px 20px rgba(32,132,190,.14) !important;
  transform: translateX(4px) !important;
}
.dashboard-analytics-card .ring.is-segment-preview { transform: none !important; filter: none !important; }
.attendance-overview-entry,
.dashboard-link-hint { display: none !important; }

@media (max-width: 620px) {
  .employee-dialog-form { grid-template-columns: 1fr !important; }
  .permission-option,
  .permission-site-option,
  .permission-group-option,
  .permission-template-option { min-height: 36px !important; }
}

/* v131 PATCH012 — direct segment hover, compact dashboard tables and
   warehouse-scoped schedule settings. */
.dashboard-analytics-card .ring.dashboard-link:hover,
.dashboard-analytics-card .ring.is-segment-preview {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.dashboard-analytics-card .ring { position: relative; isolation: isolate; }
.dashboard-analytics-card .ring.has-independent-segments { background: transparent !important; }
.dashboard-analytics-card .ring.has-independent-segments::before { z-index: 1; }
.ring-segment-overlay {
  position: absolute;
  inset: -6px;
  z-index: 0;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  overflow: visible;
  pointer-events: auto;
}
.ring-segment-path {
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 1;
  transition: opacity .16s ease, filter .16s ease, stroke-width .16s ease;
}
.dashboard-analytics-card .ring.is-segment-preview .ring-segment-path:not(.is-active) { opacity: .5; }
.ring-segment-path.is-active {
  stroke-width: 2;
  filter: brightness(1.025) drop-shadow(0 6px 9px rgba(23,32,51,.18));
}
.dashboard-analytics-card .ring-content { position: relative; z-index: 2; }
.dashboard-analytics-card .ring-content small { margin-top: 3px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
  .ring-segment-path { transition: none; }
}

/* Compact summary tables never receive a floating footer and hidden detail
   rows cannot reserve table height in any browser. */
.dashboard-group-card { height: auto !important; align-self: start !important; }
.dashboard-group-card .dashboard-shift-panels {
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 0 !important;
}
.dashboard-group-card .dashboard-shift-panel,
.dashboard-group-card .group-shift-table-wrap { height: auto !important; flex: none !important; }
.dashboard-group-card .group-shift-table-wrap + .floating-table-footer { display: none !important; }
.dashboard-group-detail-row[hidden] { display: none !important; }

/* Group settings use one full-width lane so names, counts and actions cannot
   collide in the management dialog. */
.group-management-columns { grid-template-columns: 1fr !important; gap: 13px !important; }
.group-management-column,
.group-management-shift {
  min-width: 0 !important;
  border: 1px solid #d9e8f2 !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #fbfdff, #f4f9fc) !important;
  box-shadow: 0 10px 28px rgba(39,89,119,.08) !important;
  padding: 13px !important;
}
.group-management-row {
  min-width: 0 !important;
  grid-template-columns: minmax(0,1fr) 90px minmax(150px,.72fr) auto !important;
  gap: 10px !important;
  border-radius: 11px !important;
  padding: 9px 10px !important;
}
.group-management-row > * { min-width: 0; }

/* Work date has one label, aligned with its date field. */
.message-work-date {
  display: grid !important;
  grid-template-columns: auto minmax(150px, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px 8px 13px !important;
}
.message-work-date > strong {
  color: #315a76;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.message-work-date input { min-width: 150px !important; margin: 0 !important; }

/* Warehouse rule and bulk group-time dialogs. */
.work-settings-site-selector {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #cfe3ef;
  border-radius: 13px;
  background: linear-gradient(135deg, #eef9ff, #fbfdff);
  padding: 11px 13px;
  color: #315c76;
  font-size: 11px;
  font-weight: 850;
}
.work-settings-site-selector select { min-width: 0; height: 42px; }
.work-settings-site-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  color: #668093;
  font-size: 10px;
}
.work-settings-site-badge strong { color: #214f6d; font-size: 13px; }
.work-settings-site-badge small { border-radius: 999px; background: #e5f4fb; padding: 3px 7px; color: #36718f; }
.settings-dialog-section {
  display: grid;
  gap: 11px;
  margin-top: 14px;
  border: 1px solid #e0ebf2;
  border-radius: 14px;
  background: #fff;
  padding: 13px;
}
.settings-dialog-section-head { display: grid; gap: 3px; }
.settings-dialog-section-head strong { color: #214a67; font-size: 14px; }
.settings-dialog-section-head small { color: #7890a2; font-size: 10px; }
.site-attendance-rules-form { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px 12px !important; }
.site-attendance-rules-form > label { min-width: 0; }
.site-group-work-times-form { display: grid; gap: 12px; margin-top: 13px; }
.site-group-time-effective {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border-radius: 12px;
  background: #f0f8fc;
  padding: 10px 12px;
  color: #668094;
  font-size: 10px;
}
.site-group-time-effective label { display: grid; gap: 5px; color: #315d77; font-weight: 800; }
.site-group-time-list { display: grid; gap: 8px; max-height: min(52vh, 520px); overflow: auto; padding-right: 3px; }
.site-group-time-row {
  display: grid;
  grid-template-columns: minmax(180px,1fr) minmax(150px,220px);
  align-items: center;
  gap: 10px;
  border: 1px solid #dce9f1;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f8fbfd);
  padding: 10px 11px;
}
.site-group-time-row > * { min-width: 0; }
.site-group-time-row label { display: grid; gap: 5px; color: #6d8597; font-size: 10px; font-weight: 750; }
.site-group-time-name { display: grid; gap: 3px; color: #244c67; font-size: 13px; font-weight: 850; }
.site-group-time-name small { color: #7990a0; font-size: 9px; }

@media (max-width: 760px) {
  .group-management-row { grid-template-columns: 1fr !important; }
  .site-attendance-rules-form { grid-template-columns: 1fr !important; }
  .site-group-time-row { grid-template-columns: minmax(0,1fr) minmax(130px,180px); }
  .site-group-time-effective { align-items: stretch; flex-direction: column; }
  .work-settings-site-selector { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .message-work-date { grid-template-columns: 1fr !important; }
  .message-work-date input { width: 100% !important; }
  .site-group-time-row { grid-template-columns: 1fr; }
  .site-group-time-name { grid-column: auto; }
}

/* Latest warehouse/employee/permission corrections. */
.employee-dialog-form > label:has(input[name="phone"])::after {
  content: "可在后台填写，也可由员工注册时补充。";
  display: block;
  margin-top: 5px;
  color: #7b91a3;
  font-size: 10px;
  font-weight: 600;
}
.site-group-time-effective { align-items: center; }
.site-group-time-effective strong { color: #24536f; font-size: 13px; }
.site-group-time-row input[type="time"] { width: 100%; min-height: 42px; }
.permission-load-failure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  border-color: #f0cf9a;
  background: linear-gradient(135deg, #fffaf1, #fff);
}
.permission-load-failure > div { display: grid; gap: 4px; min-width: 0; }
.permission-load-failure strong { color: #8a5714; font-size: 15px; }
.permission-load-failure span { color: #7d6b52; font-size: 11px; line-height: 1.55; }
.permission-load-failure .button { flex: 0 0 auto; }

@media (max-width: 620px) {
  .permission-load-failure { align-items: stretch; flex-direction: column; }
  .permission-load-failure .button { width: 100%; }
}

/* v131 localization, scheduling entry, and cumulative registration metrics. */
.employee-dialog-form label:has(input[name="email"])::after,
.employee-dialog-form > label:has(input[name="phone"])::after {
  content: none !important;
  display: none !important;
}
.employee-field-helper {
  display: block;
  min-width: 0;
  color: #7b91a3;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.schedule-page-heading { align-items: flex-start !important; gap: 18px; }
.schedule-heading-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; }
.schedule-heading-actions .schedule-settings-entry,
.schedule-command-actions .schedule-file-button {
  min-width: 142px;
  min-height: 48px;
  border-color: transparent !important;
  border-radius: 11px;
  background: linear-gradient(135deg, #32b5e8, #2499d6) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(36, 157, 218, .2) !important;
  padding: 0 20px;
  font-size: 13px;
}
.schedule-heading-actions .schedule-settings-entry:hover:not(:disabled),
.schedule-command-actions .schedule-file-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #28aae0, #1d8cc9) !important;
  transform: translateY(-1px);
}
.schedule-filter-bar {
  grid-template-columns: minmax(240px, 1.35fr) repeat(7, minmax(140px, .78fr)) !important;
}
.schedule-operations-table { min-width: 1660px !important; }
.cumulative-count-cell { text-align: center; font-variant-numeric: tabular-nums; }
.cumulative-count-cell strong {
  display: inline-grid;
  min-width: 34px;
  min-height: 30px;
  place-items: center;
  border: 1px solid #d9eaf2;
  border-radius: 9px;
  background: #f4faff;
  color: #1d739e;
  font-size: 13px;
}
.cumulative-summary-pills {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.schedule-workspace-card > .cumulative-summary-pills { padding: 0 34px 6px; }
.cumulative-summary-pills .section-pill { white-space: normal; line-height: 1.35; }
.cumulative-summary-pills .section-pill strong { margin-left: 4px; color: #147fab; font-size: 13px; }
.cumulative-range-pill { color: #657f91 !important; }
.attendance-registration-heading { align-items: flex-start !important; gap: 18px; }
.attendance-registration-actions {
  display: grid;
  min-width: min(100%, 580px);
  justify-items: end;
  gap: 10px;
}
.cumulative-sort-control {
  display: grid;
  min-width: min(100%, 290px);
  gap: 5px;
  color: #667f91;
  font-size: 10px;
  font-weight: 800;
}
.cumulative-sort-control select { width: 100%; min-height: 40px; border-radius: 10px; }
.attendance-registration-table-wrap table { min-width: 1050px; }
.attendance-file-action {
  min-width: 132px;
  min-height: 40px !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #32b5e8, #2499d6) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(36, 157, 218, .18) !important;
}
.attendance-file-action:hover:not(:disabled) { background: linear-gradient(135deg, #28aae0, #1d8cc9) !important; }
.attendance-file-action:disabled { opacity: .48; }

html[lang="en-US"] .section-heading > div,
html[lang="es-US"] .section-heading > div,
html[lang="en-US"] .title-copy,
html[lang="es-US"] .title-copy,
html[lang="en-US"] .schedule-command-copy,
html[lang="es-US"] .schedule-command-copy { min-width: 0; }
html[lang="en-US"] .section-heading h2,
html[lang="es-US"] .section-heading h2,
html[lang="en-US"] .section-heading p,
html[lang="es-US"] .section-heading p,
html[lang="en-US"] .attendance-overview-card small,
html[lang="es-US"] .attendance-overview-card small,
html[lang="en-US"] .data-command-foot,
html[lang="es-US"] .data-command-foot { overflow-wrap: anywhere; }
html[lang="en-US"] .employee-dialog-form > label,
html[lang="es-US"] .employee-dialog-form > label {
  grid-template-rows: minmax(18px, auto) 44px auto !important;
  min-width: 0;
}
html[lang="en-US"] .button,
html[lang="es-US"] .button,
html[lang="en-US"] .subpage-tabs button,
html[lang="es-US"] .subpage-tabs button {
  height: auto;
  white-space: normal;
  line-height: 1.25;
  text-wrap: balance;
}

@media (max-width: 1180px) {
  .schedule-filter-bar { grid-template-columns: repeat(4, minmax(150px, 1fr)) !important; }
  .schedule-filter-bar .schedule-search-field { grid-column: span 2; }
  .attendance-registration-heading { flex-direction: column; }
  .attendance-registration-actions { width: 100%; min-width: 0; justify-items: stretch; }
  .cumulative-sort-control { min-width: 0; }
}
@media (max-width: 720px) {
  .schedule-page-heading { flex-direction: column; }
  .schedule-heading-actions,
  .schedule-heading-actions .schedule-settings-entry { width: 100%; }
  .schedule-workspace-card > .cumulative-summary-pills { padding: 0 18px 6px; }
  .schedule-filter-bar { grid-template-columns: 1fr 1fr !important; }
  .schedule-filter-bar .schedule-search-field { grid-column: 1 / -1; }
  .attendance-page-actions .attendance-file-action { flex: 1 1 140px; }
}
@media (max-width: 470px) {
  .schedule-filter-bar { grid-template-columns: 1fr !important; }
  .schedule-filter-bar .schedule-search-field { grid-column: auto; }
  .cumulative-summary-pills { align-items: stretch; flex-direction: column; }
}

/* v131 permission directory — authoritative warehouse/team tree + compact
   account table.  Kept in its own namespace so legacy permission-card styles
   cannot make the directory dense or reintroduce oversized controls. */
.permission-directory-layout {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.permission-scope-tree {
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 98px);
  overflow: hidden;
  padding: 15px;
}
.permission-tree-head { margin-bottom: 12px; padding: 2px 3px 11px; border-bottom: 1px solid #e7eff4; }
.permission-tree-head h2 { margin: 3px 0 0; color: #1c405b; font-size: 18px; line-height: 1.3; }
.permission-tree-head p { margin: 4px 0 0; color: #778da0; font-size: 11px; line-height: 1.45; }
.permission-tree-scroll { display: grid; gap: 7px; max-height: calc(100vh - 245px); overflow-y: auto; padding: 4px 3px 4px 0; }
.permission-tree-site { display: grid; gap: 3px; }
.permission-tree-node {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #355c75;
  padding: 7px 9px;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.permission-tree-node:hover { border-color: #cce3ef; background: #f7fbfd; }
.permission-tree-node.active { border-color: #8bcce8; background: #ebf8fe; color: #116f9c; box-shadow: 0 5px 14px rgba(43,169,222,.08); }
.permission-tree-node > span { min-width: 0; overflow-wrap: anywhere; }
.permission-tree-node > small,
.permission-tree-node > em {
  display: inline-grid;
  min-width: 24px;
  min-height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: #edf4f8;
  color: #5d788c;
  padding: 0 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.permission-tree-node.active > small,
.permission-tree-node.active > em { background: #fff; color: #147ead; }
.permission-tree-warehouse { min-height: 46px; }
.permission-tree-warehouse > span { display: grid; gap: 2px; }
.permission-tree-warehouse strong { overflow-wrap: anywhere; font-size: 12px; }
.permission-tree-warehouse span small { color: #8296a6; font-size: 9px; }
.permission-tree-groups { display: grid; gap: 2px; margin-left: 15px; border-left: 1px solid #dce9f1; padding: 2px 0 4px 8px; }
.permission-tree-group { min-height: 34px; padding-block: 5px; font-size: 11px; }
.permission-tree-empty { color: #92a3af; padding: 7px 9px; font-size: 10px; }
.permission-account-card { min-width: 0; overflow: hidden; padding: 17px; }
.permission-account-heading { margin-bottom: 11px; }
.permission-account-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #f7fafc;
  padding: 10px 12px;
}
.permission-account-toolbar label { display: grid; width: min(100%, 420px); gap: 5px; color: #526f84; font-size: 10.5px; font-weight: 800; }
.permission-account-toolbar input { width: 100%; min-height: 39px; border: 1px solid #d6e5ee; border-radius: 9px; background: #fff; padding: 0 11px; color: #244861; }
.permission-account-toolbar small { flex: 0 0 auto; color: #7890a2; font-size: 10.5px; }
.permission-account-table-wrap { width: 100%; max-width: 100%; border: 1px solid #e0eaf1; border-radius: 13px; overflow: auto; }
.permission-account-table { width: 100%; min-width: 960px; table-layout: auto; border-collapse: separate; border-spacing: 0; }
.permission-account-table th {
  height: 43px;
  border-bottom: 1px solid #dfe9f0;
  background: #f5f9fc;
  color: #567086;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 850;
  text-align: left;
  white-space: nowrap;
}
.permission-account-table td { height: 61px; border-bottom: 1px solid #edf2f6; background: #fff; padding: 8px 12px; color: #36566e; font-size: 11.5px; vertical-align: middle; white-space: nowrap; }
.permission-account-table tbody tr:last-child td { border-bottom: 0; }
.permission-account-table tbody tr:hover td { background: #fbfdff; }
.permission-account-table th:nth-child(1) { min-width: 245px; }
.permission-account-table th:nth-child(2) { min-width: 105px; }
.permission-account-table th:nth-child(3) { min-width: 190px; }
.permission-account-table th:nth-child(4) { min-width: 150px; }
.permission-account-table th:nth-child(5) { min-width: 95px; }
.permission-account-table th:nth-child(6) { min-width: 120px; text-align: right; }
.permission-account-cell { display: flex; min-width: 0; align-items: center; gap: 10px; }
.permission-account-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: linear-gradient(135deg,#2ba9de,#257bd8); color: #fff; font-size: 10px; font-weight: 850; }
.permission-account-cell > span:last-child { display: grid; min-width: 0; gap: 2px; }
.permission-account-cell strong { color: #1f4059; font-size: 12px; }
.permission-account-cell small { color: #7b90a0; font-size: 10px; }
.permission-access-summary { display: grid; gap: 3px; }
.permission-access-summary > strong { color: #244b66; font-size: 11.5px; }
.permission-access-summary > small { display: flex; gap: 7px; color: #71899a; font-size: 9.5px; }
.permission-access-summary > small span + span { border-left: 1px solid #d8e4ec; padding-left: 7px; }
.permission-group-label,
.permission-account-status,
.permission-owner-action { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 800; }
.permission-group-label { background: #edf6fb; color: #307ca5; }
.permission-group-label.management { background: #f2f0fb; color: #6858a3; }
.permission-account-status.active { background: #eaf8f1; color: #207f55; }
.permission-account-status.inactive { background: #f5f0f0; color: #8d6262; }
.permission-owner-action { background: #fff5dd; color: #8c6817; }
.permission-row-action { text-align: right; }
.permission-adjust-button { min-width: 96px; min-height: 33px !important; padding: 0 11px !important; white-space: nowrap !important; }
.permission-editor--dialog { border: 0; border-radius: 0; box-shadow: none; }
.permission-editor--dialog .permission-editor-head { margin: -2px -2px 0; border-radius: 13px 13px 0 0; }
.permission-editor--dialog .permission-save-bar > div { display: flex; align-items: center; gap: 9px; }
.permission-editor--dialog .permission-option input[type="checkbox"],
.permission-editor--dialog .permission-site-option input[type="checkbox"],
.permission-editor--dialog .permission-group-option input[type="checkbox"] { width: 13px !important; height: 13px !important; flex-basis: 13px !important; }
.permission-editor--dialog.permission-role-employee #permission-page-section,
.permission-editor--dialog.permission-role-employee #permission-operation-section { opacity: 1; }

/* English and Spanish labels are materially longer than Chinese labels.
   Let each operational table grow to its content, then use the existing one
   floating horizontal rail instead of allowing text to cross cell borders. */
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table,
html:is([lang="en-US"], [lang="es-US"]) .attendance-table,
html:is([lang="en-US"], [lang="es-US"]) .attendance-registration-table-wrap table,
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table,
html:is([lang="en-US"], [lang="es-US"]) .payroll-preview-table-wrap table,
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table,
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table,
html:is([lang="en-US"], [lang="es-US"]) .response-only-table-wrap table,
html:is([lang="en-US"], [lang="es-US"]) .exception-table-wrap table,
html:is([lang="en-US"], [lang="es-US"]) .attendance-review-table-wrap table {
  width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
}
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table { min-width: 2320px !important; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th,
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table td { max-width: none !important; white-space: nowrap !important; text-overflow: clip !important; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(13) { min-width: 225px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(12) { min-width: 235px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(11) { min-width: 105px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(10) { min-width: 185px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(9) { min-width: 190px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(8) { min-width: 185px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(7) { min-width: 190px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(6) { min-width: 155px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(5) { min-width: 195px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(4) { min-width: 175px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(3),
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(2) { min-width: 195px; }
html:is([lang="en-US"], [lang="es-US"]) .schedule-operations-table th:nth-last-child(1) { min-width: 115px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table { min-width: 1580px !important; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th,
html:is([lang="en-US"], [lang="es-US"]) .attendance-table td,
html:is([lang="en-US"], [lang="es-US"]) .attendance-registration-table-wrap th,
html:is([lang="en-US"], [lang="es-US"]) .attendance-registration-table-wrap td,
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table th,
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table td,
html:is([lang="en-US"], [lang="es-US"]) .payroll-preview-table-wrap th,
html:is([lang="en-US"], [lang="es-US"]) .payroll-preview-table-wrap td,
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table th,
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table td,
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table th,
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table td,
html:is([lang="en-US"], [lang="es-US"]) .response-only-table-wrap th,
html:is([lang="en-US"], [lang="es-US"]) .response-only-table-wrap td,
html:is([lang="en-US"], [lang="es-US"]) .exception-table-wrap th,
html:is([lang="en-US"], [lang="es-US"]) .exception-table-wrap td,
html:is([lang="en-US"], [lang="es-US"]) .attendance-review-table-wrap th,
html:is([lang="en-US"], [lang="es-US"]) .attendance-review-table-wrap td { max-width: none !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(1) { min-width: 225px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(2) { min-width: 115px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(3) { min-width: 175px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(4) { min-width: 170px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(5),
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(6) { min-width: 145px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(7) { min-width: 135px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(8) { min-width: 170px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(9) { min-width: 175px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-table th:nth-child(10) { min-width: 145px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-registration-table-wrap table { min-width: 1460px !important; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-registration-table-wrap th:nth-child(1) { min-width: 225px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-registration-table-wrap th:nth-child(2) { min-width: 115px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-registration-table-wrap th:nth-child(3) { min-width: 175px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-registration-table-wrap th:nth-child(n+4) { min-width: 185px; }
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table { min-width: 1340px !important; }
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table th:nth-child(2) { min-width: 260px; }
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table th:nth-child(3) { min-width: 145px; }
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table th:nth-child(4) { min-width: 190px; }
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table th:nth-child(5),
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table th:nth-child(6),
html:is([lang="en-US"], [lang="es-US"]) .payroll-rate-table th:nth-child(7) { min-width: 185px; }
html:is([lang="en-US"], [lang="es-US"]) .payroll-preview-table-wrap table { min-width: 1220px !important; }
html:is([lang="en-US"], [lang="es-US"]) .payroll-preview-table-wrap th:nth-child(1) { min-width: 245px; }
html:is([lang="en-US"], [lang="es-US"]) .payroll-preview-table-wrap th:nth-child(n+2) { min-width: 155px; }
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table { min-width: 1110px !important; }
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table th:nth-child(1) { min-width: 270px; }
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table th:nth-child(2) { min-width: 145px; }
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table th:nth-child(3) { min-width: 230px; }
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table th:nth-child(4) { min-width: 185px; }
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table th:nth-child(5) { min-width: 120px; }
html:is([lang="en-US"], [lang="es-US"]) .permission-account-table th:nth-child(6) { min-width: 150px; }
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table { min-width: 1590px !important; }
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table th:nth-child(1) { width: auto !important; min-width: 270px; max-width: none; }
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table th:nth-child(2) { width: auto !important; min-width: 130px; }
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table th:nth-child(3) { width: auto !important; min-width: 260px; }
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table th:nth-child(4) { width: auto !important; min-width: 170px; }
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table th:nth-child(5) { width: auto !important; min-width: 120px; }
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table th:nth-child(6) { width: auto !important; min-width: 190px; }
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table th:nth-child(7) { width: auto !important; min-width: 110px; }
html:is([lang="en-US"], [lang="es-US"]) .employee-data-table th:nth-child(8) { width: auto !important; min-width: 264px; }
html:is([lang="en-US"], [lang="es-US"]) .response-only-table-wrap table { min-width: 1510px !important; }
html:is([lang="en-US"], [lang="es-US"]) .response-only-table-wrap th:nth-child(1) { min-width: 230px; }
html:is([lang="en-US"], [lang="es-US"]) .response-only-table-wrap th:nth-child(2) { min-width: 140px; }
html:is([lang="en-US"], [lang="es-US"]) .response-only-table-wrap th:nth-child(3) { min-width: 190px; }
html:is([lang="en-US"], [lang="es-US"]) .response-only-table-wrap th:nth-child(4) { min-width: 120px; }
html:is([lang="en-US"], [lang="es-US"]) .response-only-table-wrap th:nth-child(n+5) { min-width: 190px; }
html:is([lang="en-US"], [lang="es-US"]) .exception-table-wrap table { min-width: 1120px !important; }
html:is([lang="en-US"], [lang="es-US"]) .exception-table-wrap th { min-width: 155px; }
html:is([lang="en-US"], [lang="es-US"]) .exception-table-wrap th:first-child { min-width: 235px; }
html:is([lang="en-US"], [lang="es-US"]) .exception-table-wrap th:last-child { min-width: 185px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-review-table-wrap table { min-width: 1120px !important; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-review-table-wrap th { min-width: 185px; }
html:is([lang="en-US"], [lang="es-US"]) .attendance-review-table-wrap th:nth-child(4) { min-width: 260px; }
html:is([lang="en-US"], [lang="es-US"]) .message-record-grid .message { min-width: 0; }
html:is([lang="en-US"], [lang="es-US"]) .message-record-grid .message strong,
html:is([lang="en-US"], [lang="es-US"]) .message-record-grid .message p,
html:is([lang="en-US"], [lang="es-US"]) .message-record-grid .message span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .permission-directory-layout { grid-template-columns: 1fr; }
  .permission-scope-tree { position: static; max-height: none; }
  .permission-tree-scroll { display: grid; max-height: 300px; grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px) {
  .permission-account-card,
  .permission-scope-tree { padding: 13px; }
  .permission-account-toolbar { align-items: stretch; flex-direction: column; }
  .permission-account-toolbar label { width: 100%; }
  .permission-tree-scroll { grid-template-columns: 1fr; }
  .permission-editor--dialog .permission-save-bar { align-items: stretch; flex-direction: column; }
  .permission-editor--dialog .permission-save-bar > div { width: 100%; }
  .permission-editor--dialog .permission-save-bar button { flex: 1; }
}

/* PATCH015 — employee viewport footer, frameless locale control, and a
   collapsible/compact permission directory.  These rules are intentionally
   authoritative over the accumulated legacy theme blocks above. */

/* The employee table scrolls inside a capped panel, so a merely sticky sibling
   never reaches the viewport.  The enhancer fixes the one merged rail/pager
   while the employee card crosses the viewport bottom and leaves an anchor in
   normal flow to prevent layout jumps. */
.employee-list-card { overflow: visible !important; }
.employee-floating-footer-anchor {
  width: 100%;
  height: 0;
  pointer-events: none;
}
.employee-list-card .floating-table-footer.employee-floating-footer--viewport {
  position: fixed !important;
  right: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 4200 !important;
  max-width: calc(100vw - 24px);
  margin: 0 !important;
  box-sizing: border-box;
}
/* Progressive fallback: keep the employee table's native horizontal bar until
   JavaScript has successfully attached the single merged footer rail. */
.employee-table-wrap:not([data-floating-scroll-ready="true"]) {
  scrollbar-width: auto !important;
}
.employee-table-wrap:not([data-floating-scroll-ready="true"])::-webkit-scrollbar {
  width: auto !important;
  height: 10px !important;
}
.employee-table-wrap[data-floating-scroll-ready="true"] {
  scrollbar-width: none !important;
}
.employee-table-wrap[data-floating-scroll-ready="true"]::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* Language is a lightweight text control.  Remove every old white plate,
   outline and focus box; keyboard focus remains visible through text colour. */
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker,
.worker-language-float,
.worker-language-float .language-picker,
.auth-language-float,
.auth-language-float .language-picker {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker select,
.worker-language-float .language-picker select,
.auth-language-float .language-picker select,
.language-picker select:focus,
.language-picker select:focus-visible,
.language-picker select:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.language-picker:hover select,
.language-picker:focus-within select,
.language-picker:hover .language-picker-chevron,
.language-picker:focus-within .language-picker-chevron { color: #168dbd !important; }
.language-picker-chevron svg path {
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Warehouse node filtering remains on the wide label; the adjacent chevron
   independently folds its team branch and exposes accurate ARIA state. */
.permission-tree-warehouse-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 31px;
  align-items: center;
  gap: 4px;
}
.permission-tree-warehouse-row .permission-tree-warehouse { min-width: 0; }
.permission-tree-toggle {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #648196;
  padding: 0;
  cursor: pointer;
}
.permission-tree-toggle:hover,
.permission-tree-toggle:focus-visible {
  outline: 0;
  background: #edf8fd;
  color: #168dbd;
  box-shadow: none;
}
.permission-tree-toggle > span {
  display: block;
  font-size: 17px;
  line-height: 1;
  transition: transform .16s ease;
}
.permission-tree-site.collapsed .permission-tree-toggle > span { transform: rotate(-90deg); }
.permission-tree-site.collapsed .permission-tree-groups,
.permission-tree-groups[hidden] { display: none !important; }

/* Permission names read as a natural dense list instead of dozens of cards.
   Warehouse/team scope choices remain distinct because they are data scope,
   not permission-name rows. */
#permission-member-dialog .permission-grid,
#permission-template-dialog .permission-template-grid {
  gap: 0 !important;
  border-top: 1px solid #e9f0f4;
  padding: 0 !important;
}
#permission-member-dialog .permission-grid .permission-option,
#permission-template-dialog .permission-template-grid .permission-template-option {
  min-height: 34px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf2f5 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 6px 4px !important;
  box-shadow: none !important;
  transform: none !important;
}
#permission-member-dialog .permission-grid .permission-option:hover,
#permission-template-dialog .permission-template-grid .permission-template-option:hover {
  background: #f7fbfd !important;
}
#permission-member-dialog .permission-grid .permission-option.selected strong,
#permission-template-dialog .permission-template-grid .permission-template-option.selected strong {
  color: #137fac !important;
}
#permission-member-dialog input[type="checkbox"],
#permission-template-dialog input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  height: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  flex: 0 0 12px !important;
  margin: 0 !important;
  border-width: 1px !important;
  border-color: #767676 !important;
  border-radius: 2px !important;
  box-sizing: border-box;
  box-shadow: none !important;
}
#permission-member-dialog input[type="checkbox"]:checked,
#permission-template-dialog input[type="checkbox"]:checked {
  border-color: #168dbd !important;
  background: #168dbd !important;
}
#permission-member-dialog input[type="checkbox"]:checked::after,
#permission-template-dialog input[type="checkbox"]:checked::after {
  left: 2.5px !important;
  top: -1px !important;
  width: 3px !important;
  height: 7px !important;
  border-width: 0 1.5px 1.5px 0 !important;
}

@media (max-width: 620px) {
  .employee-list-card .floating-table-footer.employee-floating-footer--viewport {
    max-width: calc(100vw - 16px);
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (max-width: 420px) {
  #permission-template-dialog .permission-template-tabs button {
    min-width: 0;
    padding: 6px 4px;
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
  }
}

/* PATCH016 — reference-sized permission checks and arrow-free controls. */

/* The language selector is text-only.  Remove both the custom chevron and the
   browser's native arrow so nothing can overlap the adjacent profile avatar. */
.language-picker-chevron,
.workspace-language-control .language-picker-chevron,
.worker-language-float .language-picker-chevron,
.auth-language-float .language-picker-chevron {
  display: none !important;
}
.language-picker {
  justify-content: center !important;
  gap: 0 !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker select,
.worker-language-float .language-picker select,
.auth-language-float .language-picker select,
.language-picker select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
}
.language-picker::before,
.language-picker::after {
  content: none !important;
  display: none !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
  flex-wrap: nowrap !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control,
.worker-language-float,
.worker-avatar-float {
  flex: 0 0 auto !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button,
.worker-avatar-float {
  min-width: 40px;
}

/* The warehouse label is the only fold/filter control.  There is no adjacent
   chevron button; clicking the warehouse name toggles its own team branch. */
.permission-tree-warehouse-row {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}
.permission-tree-warehouse-row .permission-tree-warehouse { width: 100% !important; }
.permission-tree-toggle { display: none !important; }

/* Match the reference control: a clear 17px check, while keeping its larger
   label hit area.  Flex alignment keeps the check and permission name centred
   on the same visual baseline in both the member and preset dialogs. */
#permission-member-dialog .permission-grid .permission-option,
#permission-template-dialog .permission-template-grid .permission-template-option {
  align-items: center !important;
  gap: 10px !important;
}
#permission-member-dialog .permission-grid .permission-option > span,
#permission-template-dialog .permission-template-grid .permission-template-option > span,
#permission-member-dialog .permission-grid .permission-option > span > strong,
#permission-template-dialog .permission-template-grid .permission-template-option > span > strong {
  display: flex !important;
  align-items: center !important;
  min-height: 20px;
  line-height: 1.35;
}
#permission-member-dialog input[type="checkbox"],
#permission-template-dialog input[type="checkbox"] {
  width: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  flex: 0 0 17px !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 1px !important;
  border-color: #767676 !important;
  border-radius: 2px !important;
  box-sizing: border-box;
  box-shadow: none !important;
}
#permission-member-dialog input[type="checkbox"]:checked,
#permission-template-dialog input[type="checkbox"]:checked {
  border-color: #168dbd !important;
  background: #168dbd !important;
}
#permission-member-dialog input[type="checkbox"]:checked::after,
#permission-template-dialog input[type="checkbox"]:checked::after {
  left: 5px !important;
  top: 2px !important;
  width: 4px !important;
  height: 8px !important;
  border-width: 0 2px 2px 0 !important;
}

/* Permission grants are limited to the current caller's server-provided scope. */
.permission-grant-context {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  border: 1px solid #cfe5f2;
  border-radius: 12px;
  background: linear-gradient(135deg, #f1f9fd 0%, #fbfdff 100%);
  padding: 11px 13px;
}
.permission-grant-context strong { color: #245d7f; font-size: 12px; }
.permission-grant-context span {
  color: #607b8f;
  font-size: 10.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.permission-adjust-unavailable {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  color: #8a9aa7;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
#permission-member-dialog .permission-option strong {
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
}
#permission-member-dialog .permission-option [data-required-label][hidden] { display: none !important; }
#permission-member-dialog .permission-option.is-required {
  border-color: #add9ec !important;
  background: #f3faff !important;
}
#permission-member-dialog .permission-option.is-required [data-required-label] {
  background: #dff2fb;
  color: #19749c;
}
.permission-zero-state {
  display: none;
  border: 1px dashed #cbdde8;
  border-radius: 10px;
  background: #f8fbfd;
  padding: 13px;
  color: #6e8392;
  font-size: 10.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.permission-editor--dialog.permission-role-employee .permission-zero-state { display: block; }
html:is([lang="en-US"], [lang="es-US"]) #permission-member-dialog .permission-section .section-heading {
  align-items: flex-start;
  gap: 10px;
}
html:is([lang="en-US"], [lang="es-US"]) #permission-member-dialog .permission-scope-subtitle,
html:is([lang="en-US"], [lang="es-US"]) #permission-member-dialog .permission-save-bar {
  min-width: 0;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .permission-grant-context { padding: 10px 11px; }
  #permission-member-dialog .permission-grid,
  #permission-member-dialog .permission-site-grid,
  #permission-member-dialog .permission-group-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #permission-member-dialog .permission-save-bar,
  #permission-member-dialog .permission-save-bar > div { width: 100%; }
  #permission-member-dialog .permission-save-bar > div { justify-content: stretch; }
  #permission-member-dialog .permission-save-bar button { min-width: 0; flex: 1 1 0; }
}

/* Worker registration keeps email-code progress and errors beside the send button. */
.email-code-action {
  display: grid;
  min-width: 148px;
  align-self: end;
  gap: 5px;
}
.email-code-action .email-code-button { width: 100%; min-width: 0; }
.email-code-status {
  display: block;
  min-height: 16px;
  max-width: 220px;
  color: #6d879f;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.email-code-status.sending { color: #2678a7; }
.email-code-status.success { color: #21805a; }
.email-code-status.error { color: #d74455; }
html:is([lang="en-US"], [lang="es-US"]) .email-code-action { min-width: 176px; }
@media (max-width: 590px) {
  .email-code-action,
  html:is([lang="en-US"], [lang="es-US"]) .email-code-action {
    width: 100%;
    min-width: 0;
  }
  .email-code-status { max-width: none; }
}

/* PATCH016 — phone-proportioned authentication and worker portal.
   These overrides are intentionally scoped to authentication and worker
   surfaces, leaving the enterprise administration desktop layout untouched. */
@media (max-width: 768px) {
  .auth-shell {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: auto;
    box-sizing: border-box;
    place-items: center;
    padding:
      calc(env(safe-area-inset-top, 0px) + 64px)
      max(18px, env(safe-area-inset-right, 0px))
      calc(env(safe-area-inset-bottom, 0px) + 24px)
      max(18px, env(safe-area-inset-left, 0px));
  }
  .auth-card {
    width: min(440px, 100%) !important;
    max-width: 100% !important;
    min-width: 0;
    margin: auto;
    box-sizing: border-box;
    padding: clamp(24px, 4.5vw, 32px) !important;
  }
  .auth-card-logo { margin-bottom: 24px !important; }
  .auth-brand { width: clamp(136px, 34vw, 168px) !important; }
  .auth-card h1 {
    font-size: clamp(23px, 4.2vw, 27px) !important;
    line-height: 1.2;
  }
  .auth-card p,
  .auth-card label,
  .auth-card .password-policy,
  .auth-card .helper { overflow-wrap: anywhere; }
  .auth-card label { font-size: 13px !important; }
  .auth-card input,
  .auth-card select,
  .auth-card textarea {
    min-width: 0;
    min-height: 44px !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }
  .auth-card .button {
    min-height: 44px !important;
    box-sizing: border-box;
    font-size: 14px !important;
    line-height: 1.3;
    white-space: normal;
  }
  .auth-card .actions > .button { flex: 1 1 150px; }
  .auth-language-float {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
  .auth-language-float .language-picker,
  .auth-language-float .language-picker select {
    min-height: 44px !important;
    box-sizing: border-box;
  }
  .auth-language-float .language-picker {
    min-width: 68px;
    justify-content: center;
  }
  .auth-language-float .language-picker select {
    max-width: 88px;
    padding: 0 6px !important;
    font-size: 13px !important;
  }
  .email-verification-row > *,
  .auth-card .form-grid > * { min-width: 0; }

  .worker-portal {
    width: 100%;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: clip !important;
    box-sizing: border-box;
  }
  .worker-content {
    width: min(620px, calc(100% - 28px)) !important;
    max-width: 620px !important;
    min-width: 0;
    margin: 0 auto !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 72px)
      0
      calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
    box-sizing: border-box;
  }
  .worker-card-main,
  .worker-card-main.worker-registration-card,
  .worker-messages-card,
  .worker-profile-card,
  .worker-account-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    gap: 14px !important;
    padding: clamp(18px, 3.5vw, 24px) !important;
  }
  .worker-menu-toggle,
  .worker-avatar-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  .worker-menu-float,
  .worker-language-float,
  .worker-avatar-float {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  }
  .worker-menu-float { left: max(12px, env(safe-area-inset-left, 0px)) !important; }
  .worker-avatar-float { right: max(12px, env(safe-area-inset-right, 0px)) !important; }
  .worker-language-float {
    right: calc(max(12px, env(safe-area-inset-right, 0px)) + 54px) !important;
    width: auto !important;
    min-width: 68px !important;
  }
  .worker-language-float .language-picker,
  .worker-language-float .language-picker select {
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  .worker-language-float .language-picker {
    width: auto !important;
    min-width: 68px !important;
    justify-content: center;
    padding: 0 7px !important;
  }
  .worker-language-float .language-picker select {
    width: auto !important;
    min-width: 42px !important;
    max-width: 80px;
    padding: 0 4px !important;
    font-size: 13px !important;
  }
  .worker-profile-menu {
    top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: min(238px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box;
  }
  .worker-drawer {
    width: min(282px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 24px)
      14px
      calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    box-sizing: border-box;
  }
  .worker-card-brand { min-height: 56px !important; padding: 2px 0 16px !important; }
  .worker-card-brand .brand-full-logo,
  .worker-content-brand .brand-full-logo {
    width: clamp(128px, 30vw, 156px) !important;
    max-width: 46vw !important;
  }
  .worker-identity-list { min-width: 0; width: 100%; }
  .worker-identity-list > div {
    grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr) !important;
    min-width: 0;
    min-height: 48px !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
  }
  .worker-identity-list > div:last-child {
    grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr) !important;
    gap: 12px !important;
  }
  .worker-identity-list span { font-size: 11px !important; }
  .worker-identity-list strong {
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
  .worker-status-card {
    min-height: 62px !important;
    padding: 11px 12px !important;
  }
  .worker-status-card strong { font-size: 17px !important; }
  .worker-action-stack .button,
  .worker-wide-button,
  .worker-section-heading .button,
  .worker-leave-form input,
  .worker-leave-form select,
  .worker-profile-form input,
  .worker-profile-form select {
    min-height: 44px !important;
    box-sizing: border-box;
  }
  .worker-action-stack .button,
  .worker-wide-button,
  .worker-section-heading .button { font-size: 14px !important; }
  .worker-leave-form input,
  .worker-leave-form select,
  .worker-profile-form input,
  .worker-profile-form select { font-size: 16px !important; }
  .worker-relationship-switcher {
    min-width: 0;
    gap: 9px !important;
    padding: 12px !important;
  }
  .worker-relationship-heading { min-width: 0; }
  .worker-relationship-heading > span:nth-child(2) { min-width: 0; }
  .worker-relationship-heading small {
    font-size: 10px !important;
    line-height: 1.4;
    white-space: normal;
  }
  .worker-relationship-control select {
    width: 100%;
    min-width: 0;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box;
    font-size: 12px !important;
  }
  .worker-message-item,
  .worker-message-item > span:last-child,
  .worker-account-line,
  .worker-avatar-upload-copy { min-width: 0; }
  .worker-message-item strong,
  .worker-message-item em,
  .worker-account-line strong {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .auth-shell {
    padding:
      calc(env(safe-area-inset-top, 0px) + 58px)
      max(12px, env(safe-area-inset-right, 0px))
      calc(env(safe-area-inset-bottom, 0px) + 16px)
      max(12px, env(safe-area-inset-left, 0px));
  }
  .auth-card {
    width: 100% !important;
    padding: clamp(18px, 5vw, 24px) !important;
    border-radius: 18px !important;
  }
  .auth-card-logo { margin-bottom: 20px !important; }
  .auth-brand { width: clamp(126px, 39vw, 150px) !important; }
  .auth-card .form-grid { gap: 12px !important; }
  .auth-card .actions,
  .auth-registration-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .auth-card .actions > .button { width: 100%; }
  .email-verification-row { grid-template-columns: minmax(0, 1fr) !important; }
  .email-code-button { width: 100%; }

  .worker-content {
    width: 100% !important;
    max-width: 100% !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 64px)
      max(12px, env(safe-area-inset-right, 0px))
      calc(env(safe-area-inset-bottom, 0px) + 20px)
      max(12px, env(safe-area-inset-left, 0px)) !important;
  }
  .worker-card-main,
  .worker-card-main.worker-registration-card,
  .worker-messages-card,
  .worker-profile-card,
  .worker-account-card {
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }
  .worker-card-brand { min-height: 50px !important; padding: 0 0 13px !important; }
  .worker-card-brand .brand-full-logo,
  .worker-content-brand .brand-full-logo {
    width: clamp(116px, 35vw, 140px) !important;
    max-width: 45vw !important;
  }
  .worker-identity-list > div,
  .worker-identity-list > div:last-child {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    min-height: 48px !important;
    gap: 9px !important;
    padding: 9px 10px !important;
  }
  .worker-identity-list span { font-size: 11px !important; }
  .worker-identity-list strong { font-size: 13px !important; text-align: right !important; }
  .worker-status-card { min-height: 58px !important; padding: 10px !important; }
  .worker-status-card strong { font-size: 16px !important; }
  .worker-deadline,
  .worker-leave-summary {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 10px !important;
  }
  .worker-deadline span,
  .worker-deadline strong,
  .worker-deadline small,
  .worker-leave-summary span,
  .worker-leave-summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .worker-relationship-heading {
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }
  .worker-relationship-heading strong { font-size: 12px !important; }
  .worker-relationship-heading em { font-size: 9px !important; }
  .worker-avatar-upload { gap: 12px; padding: 13px !important; }
  .worker-avatar-large--editable {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }
  .worker-section-heading { align-items: center; gap: 8px; }
  .worker-section-heading h1 { font-size: 18px !important; }
}

@media (max-width: 360px) {
  .auth-shell {
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
  }
  .auth-card { padding: 17px 15px !important; }
  .auth-card h1 { font-size: 22px !important; }
  .auth-card-logo { margin-bottom: 17px !important; }
  .auth-brand { width: 124px !important; }

  .worker-content {
    padding-right: max(9px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(9px, env(safe-area-inset-left, 0px)) !important;
  }
  .worker-card-main,
  .worker-card-main.worker-registration-card,
  .worker-messages-card,
  .worker-profile-card,
  .worker-account-card { padding: 14px !important; }
  .worker-identity-list > div,
  .worker-identity-list > div:last-child {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 9px !important;
  }
  .worker-identity-list span { font-size: 10.5px !important; }
  .worker-identity-list strong { font-size: 12.5px !important; }
  .worker-relationship-switcher { padding: 10px !important; }
  .worker-relationship-heading {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }
  .worker-relationship-heading em { grid-column: 2; justify-self: start; }
  .worker-avatar-upload { align-items: flex-start; }
  .worker-avatar-upload-copy small { overflow-wrap: anywhere; }
}

@media (max-width: 320px) {
  .auth-shell {
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
  }
  .auth-card { padding: 16px 13px !important; }
  .worker-content {
    padding-right: max(7px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(7px, env(safe-area-inset-left, 0px)) !important;
  }
  .worker-card-main,
  .worker-card-main.worker-registration-card,
  .worker-messages-card,
  .worker-profile-card,
  .worker-account-card { padding: 12px !important; }
  .worker-identity-list > div,
  .worker-identity-list > div:last-child { grid-template-columns: 66px minmax(0, 1fr) !important; }
}

/* PATCH017 — permission checks match the 12px permission type scale. */
#permission-member-dialog .permission-grid .permission-option,
#permission-template-dialog .permission-template-grid .permission-template-option {
  align-items: center !important;
  gap: 8px !important;
}
#permission-member-dialog input[type="checkbox"],
#permission-template-dialog input[type="checkbox"] {
  width: 13px !important;
  min-width: 13px !important;
  max-width: 13px !important;
  height: 13px !important;
  min-height: 13px !important;
  max-height: 13px !important;
  flex: 0 0 13px !important;
  align-self: center !important;
  margin: 0 !important;
  border-width: 1px !important;
  border-radius: 2px !important;
}
#permission-member-dialog input[type="checkbox"]:checked::after,
#permission-template-dialog input[type="checkbox"]:checked::after {
  left: 3px !important;
  top: 0 !important;
  width: 3px !important;
  height: 7px !important;
  border-width: 0 1.5px 1.5px 0 !important;
}

/* PATCH019 — reference-matched permission checks.  The deployed page had
   roughly 28px controls; this 17px geometry is the requested half-size visual
   and matches the self-owned system reference.  The complete option row
   remains the hit target. */
#permission-member-dialog .permission-option,
#permission-member-dialog .permission-site-option,
#permission-member-dialog .permission-group-option,
#permission-template-dialog .permission-template-option {
  align-items: center !important;
  gap: 10px !important;
}
#permission-member-dialog .permission-grid .permission-option strong,
#permission-template-dialog .permission-template-grid .permission-template-option strong {
  color: #425167 !important;
  font-size: 12px !important;
  line-height: 20px !important;
}
#permission-member-dialog input[type="checkbox"],
#permission-template-dialog input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: relative !important;
  width: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  flex: 0 0 17px !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 1px !important;
  border-color: #767676 !important;
  border-radius: 2px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: 0 !important;
}
#permission-member-dialog input[type="checkbox"]:checked,
#permission-template-dialog input[type="checkbox"]:checked {
  border-color: #168dbd !important;
  background: #168dbd !important;
}
#permission-member-dialog input[type="checkbox"]:checked::after,
#permission-template-dialog input[type="checkbox"]:checked::after {
  left: 5px !important;
  top: 2px !important;
  width: 4px !important;
  height: 8px !important;
  border-width: 0 2px 2px 0 !important;
}

/* PATCH013 warehouse-scoped registration, approval, QR and cutoff controls. */
.worker-qr-login-note,
.warehouse-registration-invalid,
.warehouse-registration-success,
.warehouse-registration-loading {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  border: 1px solid #d9e8f1;
  border-radius: 14px;
  background: #f7fbfd;
  padding: 14px;
  color: #526f82;
}
.worker-qr-login-note strong,
.warehouse-registration-invalid strong,
.warehouse-registration-success strong { color: #174d6c; font-size: 15px; }
.warehouse-registration-invalid p,
.warehouse-registration-success p { margin: 0; line-height: 1.6; }
.warehouse-registration-scope {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.warehouse-registration-scope > span {
  display: grid;
  gap: 4px;
  border: 1px solid #d8e8f0;
  border-radius: 12px;
  background: linear-gradient(145deg,#f6fbfe,#fff);
  padding: 11px 12px;
}
.warehouse-registration-scope small { color: #7390a3; font-size: 10px; }
.warehouse-registration-scope strong { color: #174d6c; font-size: 14px; }
.warehouse-registration-scope em { grid-column: 1 / -1; color: #6e8696; font-size: 11px; font-style: normal; }
.warehouse-registration-form { margin-top: 4px; }
.warehouse-qr-list,
.registration-review-list { display: grid; gap: 12px; }
.warehouse-qr-row {
  display: grid;
  grid-template-columns: 104px minmax(220px,1fr) minmax(170px,auto);
  align-items: center;
  gap: 14px;
  border: 1px solid #dce9f1;
  border-radius: 16px;
  background: #fff;
  padding: 13px;
}
.warehouse-qr-preview { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 12px; background: #f2f8fb; color: #235d7e; font-size: 52px; }
.warehouse-qr-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
.warehouse-qr-copy { display: grid; gap: 7px; min-width: 0; }
.warehouse-qr-copy > div { display: flex; align-items: center; gap: 8px; }
.warehouse-qr-copy strong { color: #174d6c; font-size: 15px; }
.warehouse-qr-copy small { color: #7890a1; }
.warehouse-qr-copy input { width: 100%; font-size: 11px; }
.warehouse-qr-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.registration-review-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.registration-review-toolbar label { min-width: 240px; }
.registration-review-card { display: grid; gap: 11px; border: 1px solid #dce9f1; border-radius: 16px; background: #fff; padding: 14px; }
.registration-review-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.registration-review-card > header div { display: grid; gap: 3px; }
.registration-review-card > header strong { color: #174d6c; }
.registration-review-card > header small { color: #718a9b; }
.registration-identity-compare { display: grid; gap: 4px; border: 1px solid #e0ebf2; border-radius: 12px; overflow: hidden; }
.registration-identity-compare > div { display: grid; grid-template-columns: minmax(80px,.65fr) repeat(2,minmax(120px,1fr)); gap: 9px; padding: 9px 10px; background: #f8fbfd; }
.registration-identity-compare > div + div { border-top: 1px solid #e0ebf2; background: #fff; }
.registration-identity-compare span { color: #718a9b; }
.registration-identity-compare .is-mismatch { background: #fff7f4; color: #a33b2d; }
.registration-name-warning { border-radius: 10px; background: #fff0eb; padding: 9px 10px; color: #a33b2d; font-size: 11px; font-weight: 750; }
.registration-review-contact { display: flex; gap: 12px; color: #718a9b; }
.registration-review-contact strong { color: #244f69; }
.registration-reject-reason { display: grid; gap: 5px; }
.registration-review-actions { display: flex; justify-content: flex-end; gap: 8px; }
.registration-enabled-control { display: flex !important; align-items: center; gap: 9px; border: 1px solid #cfe4ef; border-radius: 12px; background: #f3fafc; padding: 11px 12px; }
.registration-enabled-control input { width: 18px; height: 18px; }
.registration-cutoff-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.registration-cutoff-editor > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; border: 1px solid #dce9f1; border-radius: 13px; background: #fff; padding: 11px; }
.registration-cutoff-editor > div > strong { grid-column: 1 / -1; color: #1c5472; }
.registration-cutoff-editor p { grid-column: 1 / -1; margin: 0; border-radius: 10px; background: #f5f9fc; padding: 9px 10px; color: #657f91; font-size: 10px; line-height: 1.55; }
.worker-response-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
.worker-rest-entry.is-current { border-color: #80a99b; background: #eef8f4; color: #276853; }
.worker-cutoff-locked { display: grid; gap: 4px; margin: 10px 0; border: 1px solid #efc8bd; border-radius: 12px; background: #fff5f2; padding: 10px 12px; color: #985141; }
.worker-cutoff-locked span { font-size: 11px; }

@media (max-width: 760px) {
  .warehouse-qr-row { grid-template-columns: 84px minmax(0,1fr); }
  .warehouse-qr-preview { width: 84px; height: 84px; }
  .warehouse-qr-actions { grid-column: 1 / -1; justify-content: stretch; }
  .warehouse-qr-actions .button { flex: 1 1 130px; text-align: center; }
  .registration-cutoff-editor { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .warehouse-registration-scope,
  .registration-identity-compare > div { grid-template-columns: 1fr; }
  .warehouse-registration-scope em { grid-column: auto; }
  .registration-review-toolbar { align-items: stretch; flex-direction: column; }
  .registration-review-toolbar label { min-width: 0; }
  .worker-response-actions { grid-template-columns: 1fr; }
}

/* PATCH023 — targeted attendance import and polished QR employee registration.
   This layer appends to the restored PATCH021 surface without replacing it. */
.auth-shell--worker-registration {
  align-items: start;
  padding-top: clamp(28px, 5vh, 58px);
  padding-bottom: clamp(28px, 5vh, 58px);
  background:
    radial-gradient(720px 420px at 8% -4%, rgba(43, 169, 222, .17), transparent 64%),
    radial-gradient(620px 360px at 96% 14%, rgba(95, 188, 227, .10), transparent 66%),
    #f4f8fc;
}
.auth-card--worker-registration {
  width: min(780px, 100%);
  border-color: rgba(137, 185, 209, .34);
  border-radius: 26px;
  padding: 30px 34px 32px;
  box-shadow: 0 28px 76px rgba(24, 68, 96, .14);
}
.auth-card--worker-registration .auth-card-logo { margin-bottom: 22px; }
.auth-card--worker-registration .auth-brand { width: 154px; }
.worker-registration-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
  text-align: center;
}
.worker-registration-heading > span {
  color: #1793c3;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.auth-card--worker-registration .worker-registration-heading h1 {
  margin: 0;
  color: #173b55;
  font-size: 27px;
  line-height: 1.2;
}
.auth-card--worker-registration .worker-registration-heading p {
  margin: 1px 0 0;
  color: #71899a;
  font-size: 12px;
  line-height: 1.55;
}
.auth-card--worker-registration .warehouse-registration-scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  margin: 0 0 15px;
  border: 1px solid #cfe4ee;
  border-radius: 17px;
  background: linear-gradient(135deg, #f0f9fd 0%, #fbfdff 68%, #fff 100%);
  padding: 14px 15px;
}
.warehouse-registration-scope-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.warehouse-registration-lock {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 11px;
  background: #ddf3fb;
  color: #148dbd;
}
.warehouse-registration-lock svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.warehouse-registration-scope-head > span:nth-child(2) { display: grid; min-width: 0; gap: 1px; }
.warehouse-registration-scope-head small { color: #7792a4; font-size: 9.5px; font-weight: 720; }
.warehouse-registration-scope-head strong { color: #1b506d; font-size: 13px; }
.warehouse-registration-scope-head em {
  margin-left: auto;
  border-radius: 999px;
  background: #def5eb;
  color: #25805d;
  padding: 5px 9px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
}
.warehouse-registration-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.auth-card--worker-registration .warehouse-registration-scope-grid > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  border: 1px solid rgba(190, 218, 232, .72);
  border-radius: 11px;
  background: rgba(255, 255, 255, .88);
  padding: 9px 11px;
}
.warehouse-registration-scope-grid small { color: #8197a7; font-size: 9.5px; }
.warehouse-registration-scope-grid strong {
  overflow: hidden;
  color: #214e69;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-card--worker-registration .warehouse-registration-scope > p {
  margin: 0;
  color: #72899a;
  font-size: 10.5px;
  line-height: 1.5;
}
.auth-card--worker-registration .warehouse-registration-form { gap: 12px; margin-top: 0; }
.worker-registration-section {
  display: grid;
  gap: 12px;
  border: 1px solid #dce9f0;
  border-radius: 16px;
  background: #fff;
  padding: 14px 15px 15px;
  box-shadow: 0 7px 20px rgba(30, 84, 111, .045);
}
.worker-registration-section > header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.worker-registration-step {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #2ba9de, #168fbe);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 6px 14px rgba(43, 169, 222, .18);
}
.worker-registration-section > header > span:last-child { display: grid; min-width: 0; gap: 2px; }
.worker-registration-section > header strong { color: #254b65; font-size: 13px; }
.worker-registration-section > header small { color: #8295a5; font-size: 10px; line-height: 1.45; }
.worker-registration-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.worker-registration-field-grid > * { min-width: 0; }
.auth-card--worker-registration .worker-registration-field-grid label { gap: 5px; font-size: 11px; }
.auth-card--worker-registration .worker-registration-field-grid input {
  min-height: 43px;
  border-radius: 10px;
  background: #fbfdff;
  padding: 9px 10px;
}
.worker-registration-email-row { grid-column: 1 / -1; }
.worker-registration-email-row .email-code-action { min-width: 150px; }
.worker-registration-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  border-top: 1px solid #edf3f6;
  padding-top: 10px;
  color: #748c9e;
  font-size: 10px;
  line-height: 1.5;
}
.worker-registration-policy span { min-width: 0; flex: 1 1 270px; }
.worker-registration-review-note {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d8e9f1;
  border-radius: 12px;
  background: #f7fbfd;
  padding: 10px 12px;
}
.worker-registration-review-note > span {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  background: #dff4eb;
  color: #25805d;
  font-size: 11px;
  font-weight: 900;
}
.auth-card--worker-registration .worker-registration-review-note p {
  margin: 0;
  color: #637e90;
  font-size: 10.5px;
  line-height: 1.5;
}
.worker-registration-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 10px;
}
.worker-registration-actions .button { min-height: 43px; border-radius: 10px; }
.auth-card--worker-registration #auth-helper { margin-top: -2px; text-align: center; }

.attendance-import-site-scope {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  border: 1px solid #cfe3ed;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff9fd, #fbfdff);
  padding: 13px 15px;
}
.attendance-import-site-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: #dcf2fb;
  color: #158fbe;
}
.attendance-import-site-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attendance-import-site-scope label,
.attendance-import-site-scope > div:last-of-type { display: grid; min-width: 0; gap: 5px; }
.attendance-import-site-scope label > span,
.attendance-import-site-scope > div:last-of-type > span {
  color: #315b74;
  font-size: 11px;
  font-weight: 820;
}
.attendance-import-site-scope select { min-height: 43px; border-radius: 10px; background: #fff; }
.attendance-import-site-scope small,
.attendance-import-site-scope em {
  color: #7891a2;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
}
.attendance-import-site-scope strong { color: #1f4e69; font-size: 15px; }
.attendance-import-site-scope.is-locked {
  border-color: #cce5dc;
  background: linear-gradient(135deg, #f0faf6, #fbfefd);
}
.attendance-import-site-scope.is-locked .attendance-import-site-icon { background: #dcf3e9; color: #268363; }

@media (max-width: 700px) {
  .auth-shell--worker-registration {
    align-items: start;
    padding-top: calc(env(safe-area-inset-top, 0px) + 62px);
  }
  .auth-card.auth-card--worker-registration {
    width: min(620px, 100%) !important;
    padding: 22px !important;
    border-radius: 21px !important;
  }
  .worker-registration-field-grid { grid-template-columns: minmax(0, 1fr); }
  .worker-registration-email-row { grid-column: auto; }
  .warehouse-registration-scope-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .auth-shell--worker-registration {
    padding: calc(env(safe-area-inset-top, 0px) + 58px) max(10px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 14px) max(10px, env(safe-area-inset-left, 0px));
  }
  .auth-card.auth-card--worker-registration { padding: 17px 14px !important; border-radius: 17px !important; }
  .auth-card--worker-registration .auth-card-logo { margin-bottom: 15px !important; }
  .auth-card--worker-registration .auth-brand { width: 128px !important; }
  .worker-registration-heading { margin-bottom: 13px; }
  .auth-card--worker-registration .worker-registration-heading h1 { font-size: 23px !important; }
  .auth-card--worker-registration .warehouse-registration-scope,
  .worker-registration-section { padding: 12px; border-radius: 14px; }
  .worker-registration-section { gap: 10px; }
  .worker-registration-actions { grid-template-columns: minmax(0, 1fr); }
  .attendance-import-site-scope { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
  .attendance-import-site-icon { width: 36px; height: 36px; border-radius: 11px; }
  .attendance-import-site-icon svg { width: 20px; height: 20px; }
}

/* PATCH024 — comparison-first review, link-verified registration and read/edit permissions.
   This layer only appends targeted overrides; all PATCH021–PATCH023 rules above remain intact. */
.auth-registration-panel.auth-registration-panel--visible {
  display: grid !important;
  width: min(100%, 390px);
  justify-items: center;
  gap: 10px;
  margin: 5px auto 0;
  border: 1px solid #d8e8f1;
  border-radius: 16px;
  background: linear-gradient(145deg, #f6fbfe, #fff);
  padding: 14px 16px 15px;
  text-align: center;
  box-sizing: border-box;
}
.auth-registration-copy { display: grid; gap: 3px; }
.auth-registration-copy strong { color: #315a73; font-size: 12px; }
.auth-registration-copy small { color: #8195a4; font-size: 10px; line-height: 1.45; }
.auth-enterprise-register-button {
  display: inline-flex !important;
  width: min(100%, 230px) !important;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: #a8d6ea !important;
  background: #eef9fd !important;
  color: #177da8 !important;
  font-weight: 820;
}
.auth-enterprise-register-button > span { font-size: 17px; font-weight: 500; line-height: 1; }
.auth-enterprise-register-button:hover { border-color: #65bada !important; background: #e2f5fc !important; }

.worker-registration-email-only {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(155px, auto);
  align-items: end;
  gap: 11px;
}
.worker-registration-email-only > label { min-width: 0; }
.worker-registration-email-only > .button { min-height: 43px; border-radius: 10px; }
.worker-registration-actions--email { grid-template-columns: minmax(180px, 280px); justify-content: center; }
.worker-registration-field-grid--verified { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.worker-email-verified-banner,
.worker-existing-account-note {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  border: 1px solid #cde6db;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0faf6, #fbfefd);
  padding: 11px 13px;
}
.worker-email-verified-banner > span:first-child,
.worker-existing-account-note > span:first-child {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 10px;
  background: #d9f1e6;
  color: #24815f;
  font-size: 13px;
  font-weight: 900;
}
.worker-email-verified-banner > span:last-child,
.worker-existing-account-note > span:last-child { display: grid; min-width: 0; gap: 2px; }
.worker-email-verified-banner strong,
.worker-existing-account-note strong { color: #286b55; font-size: 12.5px; }
.worker-email-verified-banner small,
.worker-existing-account-note small { color: #718d82; font-size: 10px; line-height: 1.45; }
.worker-existing-account-note { border-color: #d7e4ed; background: #f7fafc; }
.worker-existing-account-note > span:first-child { background: #e7f2f8; color: #247ca4; }
.worker-existing-account-note strong { color: #295c76; }
.worker-existing-account-note small { color: #708695; }
.worker-email-verification-pending {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #d3e6ef;
  border-radius: 17px;
  background: linear-gradient(145deg, #f3fafc, #fff);
  padding: 16px;
}
.worker-email-link-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #dcf2fb;
  color: #178bb7;
  font-size: 19px;
}
.worker-email-verification-pending > div:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.worker-email-verification-pending > div:nth-child(2) > strong { color: #24516b; font-size: 14px; }
.worker-email-verification-pending > div:nth-child(2) > p { margin: 0; color: #6f8797; font-size: 10.5px; line-height: 1.55; }
.worker-email-verification-address,
.worker-email-verification-state {
  grid-column: 1 / -1;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #e4eef3;
  padding-top: 11px;
}
.worker-email-verification-address span { color: #7890a0; font-size: 10px; }
.worker-email-verification-address strong { min-width: 0; color: #24516b; font-size: 12px; overflow-wrap: anywhere; }
.worker-email-verification-state { justify-content: flex-start; border-top: 0; padding-top: 0; color: #577589; font-size: 10.5px; font-weight: 720; }
.worker-email-verification-state i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 2px solid #bad8e7;
  border-top-color: #168dbd;
  border-radius: 50%;
  animation: qidian-email-verification-spin .9s linear infinite;
}
.worker-email-verification-state.is-verified { color: #27805e; }
.worker-email-verification-state.is-verified i { border: 0; background: #36a879; animation: none; }
.worker-email-verification-state.is-error { color: #b34b43; }
.worker-email-verification-state.is-error i { border: 0; background: #d76459; animation: none; }
@keyframes qidian-email-verification-spin { to { transform: rotate(360deg); } }

.worker-response-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.worker-leave-entry.is-current { border-color: #80a99b; background: #eef8f4; color: #276853; }

.attendance-review-punch { display: grid; min-width: 130px; gap: 3px; }
.attendance-review-punch strong { color: #284f68; font-size: 12px; }
.attendance-review-punch small { color: #758b9a; font-size: 9.5px; line-height: 1.35; }
.attendance-review-source {
  display: grid;
  min-width: 190px;
  gap: 7px;
  border: 1px solid #dce9f0;
  border-left-width: 4px;
  border-radius: 11px;
  background: #fbfdff;
  padding: 10px 11px;
}
.attendance-review-source--imported { border-left-color: #e7a54f; background: #fffaf3; }
.attendance-review-source--system { border-left-color: #39a67d; background: #f4fbf8; }
.attendance-review-source > strong { color: #274e68; font-size: 11.5px; overflow-wrap: anywhere; }
.attendance-review-source > small { display: grid; gap: 3px; }
.attendance-review-source > small > span { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 7px; color: #728897; font-size: 9.5px; }
.attendance-review-source b { color: #8294a0; font-weight: 720; }
.attendance-review-source em { min-width: 0; color: #49687b; font-style: normal; overflow-wrap: anywhere; }
.attendance-review-table-wrap table { min-width: 1240px !important; }
.exception-table-wrap .attendance-review-source { min-width: 170px; }

#permission-member-dialog .permission-site-grid,
#permission-member-dialog .permission-group-grid,
#permission-member-dialog .permission-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 14px !important;
  border-top: 1px solid #e9f0f4;
  padding: 0 !important;
}
#permission-member-dialog .permission-site-option,
#permission-member-dialog .permission-group-option,
#permission-member-dialog .permission-grid .permission-option {
  min-height: 42px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf2f5 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 7px 4px !important;
  box-shadow: none !important;
  transform: none !important;
}
#permission-member-dialog .permission-site-option:hover,
#permission-member-dialog .permission-group-option:hover,
#permission-member-dialog .permission-grid .permission-option:hover { background: #f7fbfd !important; }
#permission-member-dialog .permission-site-option:has(input:checked),
#permission-member-dialog .permission-group-option:has(input:checked),
#permission-member-dialog .permission-grid .permission-option.selected { background: #f3faff !important; }
.permission-level-heading > div { display: grid; min-width: 0; gap: 3px; }
.permission-level-heading p { margin: 0; color: #728797; font-size: 9.8px; line-height: 1.45; }
#permission-member-dialog .permission-level-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e7f3f9;
  color: #247ca4;
  padding: 2px 6px;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}
#permission-member-dialog .permission-option--edit .permission-level-badge { background: #fff0da; color: #a96516; }
.permission-section--read { border-left: 3px solid #7fc3de !important; }
.permission-section--edit { border-left: 3px solid #e8ad5f !important; }
.registration-review-readonly {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #e5edf2;
  padding-top: 10px;
}
.registration-review-readonly small { color: #748998; font-size: 10px; }

@media (max-width: 700px) {
  .worker-registration-email-only,
  .worker-registration-field-grid--verified { grid-template-columns: minmax(0, 1fr); }
  #permission-member-dialog .permission-site-grid,
  #permission-member-dialog .permission-group-grid,
  #permission-member-dialog .permission-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
}
@media (max-width: 460px) {
  .auth-registration-panel.auth-registration-panel--visible { width: 100%; padding: 12px; }
  .auth-enterprise-register-button { width: 100% !important; }
  .worker-email-verification-pending { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 13px; }
  .worker-email-link-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 17px; }
  .worker-email-verification-address { align-items: flex-start; flex-direction: column; gap: 3px; }
  .worker-response-actions { grid-template-columns: minmax(0, 1fr) !important; }
  .permission-level-heading { align-items: flex-start !important; }
  .registration-review-readonly { align-items: flex-start; flex-direction: column; }
}


/* PATCH025 — scoped administration, leader roster visibility, platform editing, and mobile management layout. */
.permission-leader-scope-note,
.leader-arrangement-scope {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #d6e8f1;
  border-radius: 14px;
  background: linear-gradient(145deg, #f4fafc, #fff);
  padding: 11px 13px;
  color: #567486;
  font-size: 10.5px;
  line-height: 1.55;
}
.permission-leader-scope-note strong,
.leader-arrangement-scope strong { color: #265b75; font-size: 11.5px; }
.permission-leader-scope-note span,
.leader-arrangement-scope span { min-width: 0; overflow-wrap: anywhere; }
.leader-arrangement-scope { margin: 0 0 13px; }

.platform-organizations-table-wrap table { min-width: 1260px; }
.platform-capacity-detail { display: inline; margin-left: 2px; color: #728896; white-space: nowrap; }
.platform-organization-actions { display: flex; min-width: 250px; flex-wrap: wrap; align-items: center; gap: 6px; }
.platform-organization-actions .button { margin: 0 !important; }
.platform-organization-edit-dialog .settings-dialog-card { width: min(720px, calc(100vw - 28px)); }
.platform-organization-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.platform-organization-edit-form > label { display: grid; min-width: 0; gap: 7px; color: #49697c; font-size: 11px; font-weight: 760; }
.platform-organization-edit-form input,
.platform-organization-edit-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.platform-organization-edit-form label small { color: #7a8f9d; font-size: 9.5px; font-weight: 560; line-height: 1.45; }
.platform-organization-edit-form .wide { grid-column: 1 / -1; }
.platform-organization-edit-note {
  display: grid;
  gap: 4px;
  border: 1px solid #d9e8ef;
  border-radius: 13px;
  background: #f6fafc;
  padding: 11px 12px;
}
.platform-organization-edit-note strong { color: #2c617b; font-size: 11px; }
.platform-organization-edit-note span { color: #718796; font-size: 10px; line-height: 1.55; }

@media (max-width: 820px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .app-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh;
  }
  .app-shell > .sidebar,
  .sidebar {
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #dbe8ee !important;
    padding: 10px 12px 9px !important;
    overflow: visible !important;
  }
  .sidebar .logo-box { min-height: 36px !important; margin: 0 !important; padding: 0 !important; }
  .sidebar .logo-box .brand,
  .sidebar .logo-box img { max-width: 126px !important; max-height: 34px !important; }
  .sidebar .company-switch,
  .sidebar .sidebar-scope { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  .sidebar .company-switch label,
  .sidebar .sidebar-scope { min-height: 0 !important; padding: 8px 10px !important; }
  .sidebar .company-switch select { width: 100% !important; min-width: 0 !important; }
  .sidebar .sidebar-section-label { display: none !important; }
  .sidebar .nav {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 1px 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .sidebar .nav button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    white-space: nowrap !important;
  }
  .app-shell > .main,
  .main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .app-shell > .main > .topbar,
  .topbar.topbar--floating-controls {
    position: relative !important;
    inset: auto !important;
    z-index: 18 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 12px !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control { position: relative !important; inset: auto !important; }
  .management-profile-menu {
    position: fixed !important;
    top: 58px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  .content,
  .content.content--schedule {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }
  .content > *,
  .card,
  .platform-hero,
  .dashboard-hero,
  .title-row,
  .premium-title-row { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  .title-row,
  .premium-title-row,
  .section-heading,
  .hero-main { align-items: flex-start !important; flex-wrap: wrap !important; gap: 10px !important; }
  .title-actions,
  .section-actions,
  .hero-actions { width: 100%; flex-wrap: wrap; }
  .platform-metrics,
  .hero-stats,
  .dashboard-metrics,
  .metric-grid,
  .overview-grid,
  .organization-grid,
  .employee-summary-grid,
  .attendance-overview-grid,
  .billing-config-grid,
  .payment-channel-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .compact-form,
  .data-command-grid,
  .attendance-command-grid,
  .schedule-filter-bar,
  .worker-registration-field-grid,
  .platform-organization-edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .table-wrap,
  .premium-table-wrap,
  .scalable-table-wrap,
  .platform-organizations-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table { width: max-content; min-width: 760px; }
  .platform-organizations-table-wrap table { min-width: 1260px !important; }
  dialog,
  dialog.settings-dialog,
  .settings-dialog {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: auto !important;
    padding: 0 !important;
  }
  .settings-dialog-card,
  .platform-organization-edit-dialog .settings-dialog-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  .settings-dialog-head,
  .settings-dialog-body { padding-left: 14px !important; padding-right: 14px !important; }
  .actions { flex-wrap: wrap !important; }
  .actions .button,
  .section-actions .button { max-width: 100%; }
  .platform-organization-actions { min-width: 220px; }
}

@media (max-width: 520px) {
  .app-shell > .sidebar,
  .sidebar { padding: 8px 9px !important; }
  .sidebar .logo-box { justify-content: flex-start !important; }
  .sidebar .company-switch label,
  .sidebar .sidebar-scope { padding: 7px 8px !important; }
  .sidebar .nav button { min-height: 35px !important; padding: 7px 9px !important; font-size: 10px !important; }
  .sidebar .nav .nav-icon { width: 18px !important; height: 18px !important; }
  .content,
  .content.content--schedule { padding: 9px !important; }
  .card,
  .platform-hero,
  .dashboard-hero { border-radius: 15px !important; padding: 12px !important; }
  .platform-metrics,
  .hero-stats,
  .dashboard-metrics,
  .metric-grid,
  .overview-grid,
  .organization-grid,
  .employee-summary-grid,
  .attendance-overview-grid,
  .billing-config-grid,
  .payment-channel-status-grid,
  .compact-form,
  .data-command-grid,
  .attendance-command-grid,
  .schedule-filter-bar,
  .worker-registration-field-grid,
  .platform-organization-edit-form { grid-template-columns: minmax(0, 1fr) !important; }
  .platform-organization-edit-form .wide { grid-column: 1; }
  .title-row h1,
  .premium-title-row h1 { font-size: clamp(21px, 7vw, 27px) !important; }
  .section-heading h2 { font-size: 17px !important; }
  .data-command-grid > label,
  .attendance-command-grid > label,
  .schedule-filter-bar > label { width: 100% !important; min-width: 0 !important; }
  .button { max-width: 100%; white-space: normal; }
  .management-profile-menu { top: 52px !important; right: 7px !important; left: 7px !important; }
  .permission-leader-scope-note,
  .leader-arrangement-scope { flex-direction: column; gap: 5px; }
}

/* PATCH025 final safety rules. */
.permission-leader-scope-note[hidden] { display: none !important; }
@media (max-width: 820px) {
  html, body, #app { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
  .settings-dialog-body { min-width: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; }
}

/* PATCH026 — registration-review truth source and mobile schedule containment. */
.schedule-operations-table .schedule-col-employee {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}
.schedule-operations-table .schedule-col-contact {
  width: 235px !important;
  min-width: 235px !important;
  max-width: 235px !important;
}
.schedule-operations-table .schedule-col-employee .schedule-employee-cell,
.schedule-operations-table .schedule-col-contact .schedule-contact-cell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.schedule-operations-table .schedule-col-employee .schedule-employee-cell > span,
.schedule-operations-table .schedule-col-contact .schedule-contact-cell > span,
.schedule-operations-table .schedule-col-contact .schedule-contact-cell > small {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@media (max-width: 820px) {
  .schedule-operations-card,
  .schedule-workspace-card,
  .combined-workspace-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .schedule-status-summary {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(105px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  .schedule-status-summary > button,
  .schedule-status-summary > span {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 68px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .schedule-status-summary b { font-size: 24px !important; }
  .schedule-filter-bar,
  .schedule-toolbar,
  .cumulative-summary-pills {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .schedule-filter-bar { grid-template-columns: minmax(0, 1fr) !important; }
  .schedule-filter-bar label,
  .schedule-filter-bar input,
  .schedule-filter-bar select { min-width: 0 !important; max-width: 100% !important; }
  .schedule-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain !important;
  }
  .schedule-operations-table {
    width: 1660px !important;
    min-width: 1660px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }
  .data-pagination.schedule-pagination {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}
@media (max-width: 520px) {
  .schedule-status-summary { gap: 7px !important; padding: 10px !important; }
  .schedule-status-summary > button,
  .schedule-status-summary > span {
    min-height: 64px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
  }
  .schedule-status-summary b { font-size: 22px !important; }
}

/* PATCH027 — dedicated team-leader assignments and work-time experience. */
.leader-schedule-page {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 16px;
}
.leader-schedule-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(760px, 100%);
  min-width: 0;
  margin: 0 auto;
  gap: 6px;
  border: 1px solid #d8e9f2;
  border-radius: 18px;
  background: #f2f9fc;
  padding: 6px;
  box-shadow: 0 10px 26px rgba(44, 102, 132, .08);
}
.leader-schedule-tabs button {
  min-width: 0;
  min-height: 50px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #5a7487;
  font: inherit;
  font-size: 16px;
  font-weight: 820;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.leader-schedule-tabs button:hover { background: #e6f5fb; color: #168dbd; }
.leader-schedule-tabs button.active {
  background: linear-gradient(135deg, #36b5e6, #279fd5);
  color: #fff;
  box-shadow: 0 9px 20px rgba(43, 169, 222, .24);
}
.leader-schedule-context,
.leader-schedule-panel,
.leader-work-time-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.leader-schedule-context { padding: 24px; }
.leader-schedule-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.leader-schedule-control {
  display: grid;
  min-width: 0;
  gap: 8px;
  border: 1px solid #dbe8ef;
  border-radius: 16px;
  background: #fbfdff;
  padding: 16px;
}
.leader-schedule-control > span {
  color: #708697;
  font-size: 13px;
  font-weight: 780;
}
.leader-schedule-control select,
.leader-schedule-control input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid #cfe1eb;
  border-radius: 12px;
  background: #fff;
  color: #274c66;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 780;
}
.leader-schedule-control select:disabled { opacity: 1; color: #274c66; background: #f7fbfd; }
.leader-schedule-control small { color: #8a9da9; font-size: 11px; line-height: 1.45; }
.leader-schedule-selection {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  border: 1px solid #bfe4f0;
  border-radius: 14px;
  background: #edf9fd;
  padding: 13px 15px;
}
.leader-schedule-selection > span { color: #6a8394; font-size: 12px; font-weight: 760; }
.leader-schedule-selection strong { min-width: 0; color: #24536e; font-size: 16px; overflow-wrap: anywhere; }
.leader-schedule-selection em {
  margin-left: auto;
  border-radius: 999px;
  background: #fff;
  color: #3280a4;
  padding: 5px 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.leader-schedule-panel { padding: 24px; }
.leader-schedule-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  gap: 12px;
}
.leader-schedule-summary-card {
  display: flex;
  min-width: 0;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #dfeaf0;
  border-radius: 17px;
  background: #f5f9fb;
  color: #6d8292;
  padding: 17px 18px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.leader-schedule-summary-card:hover { transform: translateY(-1px); border-color: #bddce9; box-shadow: 0 9px 22px rgba(48, 100, 128, .09); }
.leader-schedule-summary-card span { min-width: 0; font-size: 14px; font-weight: 780; line-height: 1.35; overflow-wrap: anywhere; }
.leader-schedule-summary-card strong { flex: 0 0 auto; color: #294f69; font-size: 34px; line-height: 1; }
.leader-schedule-summary-card.primary { border-color: #a9dfec; background: #ebfaff; }
.leader-schedule-summary-card.primary strong { color: #0f91b8; }
.leader-schedule-summary-card.good strong { color: #179768; }
.leader-schedule-summary-card.warn strong { color: #ca8315; }
.leader-schedule-summary-card.bad strong { color: #d84d57; }
.leader-schedule-summary-card.muted strong { color: #5e7a90; }
.leader-schedule-summary-card.active {
  border-color: #2ba9de;
  background: #eaf8fd;
  box-shadow: inset 0 0 0 2px rgba(43, 169, 222, .13), 0 10px 24px rgba(43, 169, 222, .11);
}
.leader-member-list-head {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
  border-top: 1px solid #e5eef3;
  padding-top: 22px;
}
.leader-member-list-head > div { min-width: 0; }
.leader-member-list-head h2 { margin: 0; color: #244b65; font-size: 19px; }
.leader-member-list-head > div > span { display: block; margin-top: 5px; color: #7d919f; font-size: 12px; }
.leader-member-list-head label { display: grid; width: min(360px, 100%); min-width: 0; gap: 6px; color: #687f90; font-size: 12px; font-weight: 760; }
.leader-member-list-head input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid #d0e1e9;
  border-radius: 12px;
  background: #fff;
  padding: 0 13px;
  color: #294f68;
  font: inherit;
}
.leader-member-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: 12px;
  margin-top: 16px;
}
.leader-member-card {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(190px, 1.15fr) minmax(180px, 1fr);
  gap: 12px 18px;
  border: 1px solid #deebf1;
  border-radius: 16px;
  background: #fbfdff;
  padding: 15px;
  box-shadow: 0 6px 15px rgba(47, 94, 119, .045);
}
.leader-member-identity { display: flex; min-width: 0; align-items: center; gap: 11px; }
.leader-member-identity .schedule-avatar { flex: 0 0 auto; }
.leader-member-identity > div { display: grid; min-width: 0; gap: 4px; }
.leader-member-identity strong { min-width: 0; color: #183f5b; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-member-identity span { display: flex; min-width: 0; gap: 5px; color: #7f94a3; font-size: 11px; }
.leader-member-identity b { font-weight: 700; }
.leader-member-identity em { min-width: 0; font-style: normal; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-member-contact { display: grid; min-width: 0; align-content: center; gap: 4px; color: #4f6e82; }
.leader-member-contact span,
.leader-member-contact small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-member-contact span { font-size: 12px; }
.leader-member-contact small { color: #8a9daa; font-size: 11px; }
.leader-member-statuses { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 7px; }
.leader-member-statuses .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-member-time { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; border-radius: 11px; background: #f0f7fa; padding: 8px 11px; }
.leader-member-time span { color: #78909f; font-size: 11px; font-weight: 720; }
.leader-member-time strong { color: #285873; font-size: 14px; }
.leader-work-time-panel { padding: 26px; }
.leader-work-time-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.leader-work-time-overview article {
  display: grid;
  min-width: 0;
  min-height: 94px;
  align-content: center;
  gap: 8px;
  border: 1px solid #dce9ef;
  border-radius: 16px;
  background: #f8fbfd;
  padding: 15px;
}
.leader-work-time-overview span { color: #718897; font-size: 12px; font-weight: 750; }
.leader-work-time-overview strong { min-width: 0; color: #254d67; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.leader-work-time-overview strong.is-confirmed { color: #188866; }
.leader-work-time-overview strong.is-pending { color: #c57a15; }
.leader-work-time-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin-top: 22px;
  border: 1px solid #bfe0ec;
  border-radius: 17px;
  background: #edf8fc;
  padding: 18px;
}
.leader-work-time-form label { display: grid; min-width: 0; gap: 7px; color: #587487; font-size: 13px; font-weight: 780; }
.leader-work-time-form input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid #bdd8e5;
  border-radius: 12px;
  background: #fff;
  padding: 0 14px;
  color: #234c67;
  font: inherit;
  font-size: 18px;
  font-weight: 850;
}
.leader-work-time-form .button { min-height: 50px; min-width: 170px; }
.leader-work-time-note {
  margin-top: 12px;
  border-radius: 12px;
  background: #fff7e9;
  color: #9a681f;
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.5;
}
.leader-work-time-note.ready { background: #edf8f4; color: #28765a; }

@media (max-width: 1100px) {
  .leader-schedule-summary,
  .leader-work-time-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leader-member-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .leader-schedule-page { gap: 12px; }
  .leader-schedule-tabs { width: 100%; }
  .leader-schedule-context,
  .leader-schedule-panel,
  .leader-work-time-panel { padding: 16px !important; }
  .leader-schedule-context-grid { gap: 10px; }
  .leader-schedule-control { padding: 12px; }
  .leader-member-list-head { align-items: stretch; flex-direction: column; }
  .leader-member-list-head label { width: 100%; }
  .leader-work-time-form { grid-template-columns: minmax(0, 1fr); }
  .leader-work-time-form .button { width: 100%; min-width: 0; }
}
@media (max-width: 520px) {
  .leader-schedule-tabs { grid-template-columns: minmax(0, 1fr); border-radius: 15px; padding: 5px; }
  .leader-schedule-tabs button { min-height: 47px; border-radius: 11px; font-size: 15px; }
  .leader-schedule-context,
  .leader-schedule-panel,
  .leader-work-time-panel { border-radius: 17px !important; padding: 13px !important; }
  .leader-schedule-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leader-schedule-control { gap: 6px; border-radius: 13px; padding: 10px; }
  .leader-schedule-control > span { font-size: 11px; }
  .leader-schedule-control select,
  .leader-schedule-control input { min-height: 44px; padding: 0 8px; font-size: 12px; }
  .leader-schedule-control small { display: none; }
  .leader-schedule-selection { margin-top: 11px; padding: 10px 11px; }
  .leader-schedule-selection > span { font-size: 10px; }
  .leader-schedule-selection strong { font-size: 13px; }
  .leader-schedule-selection em { padding: 4px 8px; font-size: 10px; }
  .leader-schedule-summary { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .leader-schedule-summary-card { min-height: 74px; border-radius: 14px; padding: 14px 16px; }
  .leader-schedule-summary-card span { font-size: 14px; }
  .leader-schedule-summary-card strong { font-size: 31px; }
  .leader-member-list-head { margin-top: 18px; padding-top: 17px; }
  .leader-member-list-head h2 { font-size: 17px; }
  .leader-member-card { grid-template-columns: minmax(0, 1fr); gap: 10px; border-radius: 14px; padding: 13px; }
  .leader-member-contact { border-top: 1px solid #edf2f5; padding-top: 9px; }
  .leader-member-time { min-height: 38px; box-sizing: border-box; }
  .leader-work-time-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .leader-work-time-overview article { min-height: 82px; border-radius: 13px; padding: 12px; }
  .leader-work-time-overview strong { font-size: 14px; }
  .leader-work-time-form { margin-top: 14px; border-radius: 14px; padding: 13px; }
  .leader-work-time-form input { min-height: 48px; }
}
@media (max-width: 370px) {
  .leader-schedule-context-grid,
  .leader-work-time-overview { grid-template-columns: minmax(0, 1fr); }
}

/* PATCH028 — mobile administration drawer and viewport containment. */
.management-menu-toggle,
.management-sidebar-close,
.management-sidebar-backdrop { display: none; }
.management-sidebar-head { min-width: 0; }

@media (max-width: 900px) {
  html, body, #app { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
  body.management-drawer-open { overflow: hidden !important; touch-action: none; }
  .app-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
  }
  .app-shell > .main,
  .main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .management-menu-toggle {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    display: grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    place-content: center !important;
    gap: 4px !important;
    border: 1px solid #cfe2eb !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .96) !important;
    padding: 0 !important;
    box-shadow: 0 6px 17px rgba(36, 88, 116, .1) !important;
    cursor: pointer;
  }
  .management-menu-toggle > span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #2187ad !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls,
  .topbar.topbar--floating-controls {
    position: fixed !important;
    top: 0 !important;
    inset-inline: 0 !important;
    z-index: 620 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: calc(60px + env(safe-area-inset-top, 0px)) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(190, 218, 231, .78) !important;
    background: rgba(239, 249, 253, .94) !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 11px 8px !important;
    box-shadow: 0 5px 16px rgba(42, 92, 118, .075) !important;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    pointer-events: auto !important;
  }
  .app-shell:not(.app-shell--leader-schedule) > .main > .content { padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important; }
  .management-menu-toggle { pointer-events: auto !important; }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 0 0 auto !important;
    pointer-events: auto !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control,
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control,
  .workspace-language-control,
  .workspace-avatar-control,
  .workspace-avatar-float {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker {
    width: 72px !important;
    min-width: 72px !important;
    height: 42px !important;
    margin: 0 !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button--avatar-only {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }
  .management-sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 690 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: rgba(9, 30, 48, .44) !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility .2s ease !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .management-sidebar-backdrop.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .app-shell > .sidebar.management-sidebar,
  .sidebar.management-sidebar,
  .app-shell > .sidebar,
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 700 !important;
    display: flex !important;
    width: min(320px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: 320px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-right: 1px solid rgba(122, 174, 211, .26) !important;
    border-radius: 0 22px 22px 0 !important;
    background: linear-gradient(180deg, #082c4d 0%, #06213e 58%, #041a32 100%) !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    box-shadow: 18px 0 42px rgba(2, 24, 42, .24) !important;
    transform: translate3d(-105%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .22s ease, visibility .22s ease !important;
  }
  .app-shell > .sidebar.management-sidebar.is-open,
  .sidebar.management-sidebar.is-open {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .management-sidebar-head {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(150, 198, 234, .14) !important;
    padding: 0 0 11px !important;
  }
  .management-sidebar-head .logo-box {
    display: flex !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .management-sidebar-head .logo-box .brand,
  .management-sidebar-head .logo-box img { width: 154px !important; max-width: 154px !important; max-height: 42px !important; }
  .management-sidebar-head .logo-box img { filter: brightness(0) invert(1) !important; }
  .management-sidebar-close {
    display: grid !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    border: 1px solid rgba(165, 209, 242, .2) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #d8efff !important;
    padding: 0 !important;
    font: inherit !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer;
  }
  .sidebar.management-sidebar .company-switch,
  .sidebar.management-sidebar .sidebar-scope {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .sidebar.management-sidebar .company-switch {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .sidebar.management-sidebar .company-switch label,
  .sidebar.management-sidebar .sidebar-scope {
    min-height: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(137, 199, 251, .16) !important;
    border-radius: 11px !important;
    background: rgba(65, 147, 216, .08) !important;
    padding: 10px 11px !important;
  }
  .sidebar.management-sidebar .company-switch label,
  .sidebar.management-sidebar .company-switch strong,
  .sidebar.management-sidebar .sidebar-scope strong { color: #dceefe !important; }
  .sidebar.management-sidebar .company-switch select {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 6px !important;
    border-color: rgba(169, 211, 243, .24) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
  }
  .sidebar.management-sidebar .sidebar-section-label {
    display: block !important;
    margin: 4px 8px 0 !important;
    color: #8fb4d2 !important;
    font-size: 10px !important;
  }
  .sidebar.management-sidebar .nav {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-content: start !important;
    grid-auto-rows: minmax(43px, auto) !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    overflow: visible !important;
  }
  .sidebar.management-sidebar .nav button {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #c7dff1 !important;
    padding: 9px 11px !important;
    font-size: 12px !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .sidebar.management-sidebar .nav button:hover {
    border-color: rgba(150, 205, 242, .16) !important;
    background: rgba(91, 176, 231, .1) !important;
    color: #fff !important;
  }
  .sidebar.management-sidebar .nav button.active {
    border-color: rgba(130, 210, 247, .28) !important;
    background: linear-gradient(135deg, rgba(45, 172, 225, .34), rgba(37, 119, 204, .25)) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #66d4fb !important;
  }
  .sidebar.management-sidebar .nav button .nav-icon { color: currentColor !important; opacity: .95 !important; }
  .sidebar.management-sidebar .nav button > span:last-child { min-width: 0 !important; overflow-wrap: anywhere !important; }
  .sidebar.management-sidebar .sidebar-footer { display: grid !important; margin-top: auto !important; }

  .content,
  .content.content--schedule {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }
  .content > *,
  .card,
  .platform-hero,
  .dashboard-hero,
  .title-row,
  .premium-title-row,
  .organization-sections,
  .permission-directory-layout,
  .permission-account-card,
  .permission-editor,
  .settings-dialog-body { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  .title-row,
  .premium-title-row,
  .section-heading,
  .hero-main,
  .permission-editor-head,
  .permission-save-bar {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .title-actions,
  .section-actions,
  .hero-actions,
  .permission-save-bar > div { width: 100% !important; min-width: 0 !important; flex-wrap: wrap !important; }
  .title-actions .button,
  .section-actions .button,
  .hero-actions .button,
  .permission-save-bar button { flex: 1 1 140px; min-width: 0 !important; }

  .permission-directory-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .permission-scope-tree {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .permission-tree-scroll { max-height: 280px !important; overflow-y: auto !important; overscroll-behavior: contain; }
  .permission-module-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .permission-site-grid,
  .permission-group-grid,
  .permission-role-scope { grid-template-columns: minmax(0, 1fr) !important; }
  .permission-account-toolbar { align-items: stretch !important; flex-direction: column !important; }
  .permission-account-toolbar label { width: 100% !important; min-width: 0 !important; }
  .permission-account-table-wrap,
  .table-wrap,
  .premium-table-wrap,
  .scalable-table-wrap,
  .platform-organizations-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .permission-account-table { min-width: 780px !important; }
  .platform-organizations-table-wrap table { min-width: 1180px !important; }
  .data-pagination,
  .floating-table-footer,
  .schedule-pagination {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .data-pagination > *,
  .floating-table-footer > * { min-width: 0 !important; max-width: 100% !important; }
  .data-pagination-actions { flex-wrap: wrap !important; }

  input,
  select,
  textarea,
  button { max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { min-width: 0 !important; font-size: 16px !important; }
  .compact-form,
  .settings-dialog-form,
  .platform-organization-edit-form,
  .data-command-grid,
  .attendance-command-grid,
  .schedule-filter-bar,
  .worker-registration-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  dialog.settings-dialog,
  dialog[data-management-dialog],
  .settings-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .settings-dialog-card,
  .platform-organization-edit-dialog .settings-dialog-card {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
    box-sizing: border-box !important;
    margin: 9px auto !important;
    overflow: hidden !important;
  }
  .settings-dialog-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    align-items: flex-start !important;
    background: rgba(255, 255, 255, .97) !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 12px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .settings-dialog-head > div { min-width: 0 !important; }
  .settings-dialog-head h2,
  .settings-dialog-head p { overflow-wrap: anywhere !important; }
  .settings-dialog-cancel { flex: 0 0 auto !important; }
  .settings-dialog-body {
    max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .management-profile-menu {
    position: fixed !important;
    top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 620px) {
  .content,
  .content.content--schedule { padding: 9px !important; }
  .card,
  .platform-hero,
  .dashboard-hero { border-radius: 15px !important; padding: 12px !important; }
  .platform-metrics,
  .hero-stats,
  .dashboard-metrics,
  .metric-grid,
  .overview-grid,
  .organization-grid,
  .employee-summary-grid,
  .attendance-overview-grid,
  .billing-config-grid,
  .payment-channel-status-grid,
  .compact-form,
  .settings-dialog-form,
  .platform-organization-edit-form,
  .data-command-grid,
  .attendance-command-grid,
  .schedule-filter-bar,
  .worker-registration-field-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .platform-organization-edit-form .wide,
  .settings-dialog-form .wide { grid-column: 1 !important; }
  .permission-module-card { gap: 11px; border-radius: 14px; padding: 13px; }
  .permission-module-card > header { align-items: flex-start; }
  .permission-module-levels { grid-template-columns: repeat(3, minmax(68px, 1fr)); overflow-x: auto; }
  .permission-module-level-option span { min-height: 40px; padding: 7px 5px; }
  .permission-module-advanced > div:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
  .permission-module-advanced > div:first-child small { text-align: left; }
  .permission-module-manage-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .permission-save-bar > div { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .permission-save-bar button { width: 100% !important; }
  .settings-dialog-card,
  .platform-organization-edit-dialog .settings-dialog-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .settings-dialog-body { max-height: calc(100dvh - 88px - env(safe-area-inset-top, 0px)) !important; }
  .settings-dialog-head { border-radius: 0 !important; }
  .title-actions,
  .section-actions,
  .hero-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .title-actions .button,
  .section-actions .button,
  .hero-actions .button { width: 100% !important; }
  .data-pagination { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .data-pagination-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .data-pagination-actions .button { width: 100% !important; min-width: 0 !important; }
}

@media (max-width: 390px) {
  .app-shell > .main > .topbar.topbar--floating-controls,
  .topbar.topbar--floating-controls { padding-inline: 8px !important; }
  .management-menu-toggle { width: 40px !important; min-width: 40px !important; height: 40px !important; }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker { width: 66px !important; min-width: 66px !important; height: 40px !important; }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button--avatar-only { width: 40px !important; min-width: 40px !important; height: 40px !important; }
  .permission-module-card > header { flex-direction: column; }
  .permission-module-current { align-self: flex-start; }
}

/* PATCH028 — canonical permission matrix and mobile administration hardening.
   This layer is intentionally last: it removes duplicate-looking permission
   cards and contains every management view inside the phone viewport. */
.permission-mobile-label { display: none; }
.permission-module-section { min-width: 0; }
.permission-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: 12px;
}
.permission-module-card {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 12px;
  border: 1px solid #dce8ef;
  border-radius: 16px;
  background: #fff;
  padding: 15px;
  box-shadow: 0 6px 18px rgba(35, 82, 110, .045);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.permission-module-card.is-active {
  border-color: #a9d9eb;
  background: linear-gradient(145deg, #fbfeff, #f5fbfe);
  box-shadow: 0 8px 20px rgba(43, 169, 222, .075);
}
.permission-module-card.is-required { border-color: #8ecfe8; box-shadow: inset 3px 0 0 #31aadb, 0 8px 20px rgba(43, 169, 222, .07); }
.permission-module-card.is-custom { border-style: dashed; }
.permission-module-card > header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.permission-module-card > header > div { min-width: 0; }
.permission-module-card h4 { margin: 0; color: #20465f; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.permission-module-card header p { margin: 5px 0 0; color: #748b9a; font-size: 10.5px; line-height: 1.55; overflow-wrap: anywhere; }
.permission-module-current {
  display: inline-flex;
  min-height: 26px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7e5ed;
  border-radius: 999px;
  background: #f5f9fb;
  color: #667f90;
  padding: 3px 9px;
  font-size: 9.5px;
  font-weight: 850;
  white-space: nowrap;
}
.permission-module-card.is-level-view .permission-module-current { border-color: #b9dfd0; background: #eef9f4; color: #247b59; }
.permission-module-card.is-level-manage .permission-module-current { border-color: #afdceb; background: #edf9fd; color: #187ba6; }
.permission-module-card.is-custom .permission-module-current { border-color: #e5d39b; background: #fff9e9; color: #8a691d; }
.permission-module-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  gap: 6px;
  border-radius: 12px;
  background: #f4f8fa;
  padding: 5px;
}
.permission-module-levels:has(.permission-module-level-option:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.permission-module-level-option {
  display: flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #617b8d;
  padding: 7px 8px;
  cursor: pointer;
}
.permission-module-level-option:hover { background: #fff; }
.permission-module-level-option.selected { border-color: #a8d7e8; background: #fff; color: #147ba6; box-shadow: 0 4px 11px rgba(42, 117, 151, .08); }
.permission-module-level-option input,
.permission-advanced-option input {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 !important;
  accent-color: #239dce;
}
.permission-module-level-option input:disabled,
.permission-advanced-option input:disabled { opacity: .55; }
.permission-module-level-option span { min-width: 0; font-size: 10.5px; font-weight: 820; text-align: center; overflow-wrap: anywhere; }
.permission-module-required-note,
.permission-module-custom-note,
.permission-module-manage-summary {
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 9.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.permission-module-required-note { border: 1px solid #c9e7f2; background: #eef9fd; color: #277795; }
.permission-module-custom-note { border: 1px solid #eadcac; background: #fffaf0; color: #846827; }
.permission-module-manage-summary { display: flex; min-width: 0; gap: 7px; background: #f7fafc; color: #718796; }
.permission-module-manage-summary strong { flex: 0 0 auto; color: #486a7e; }
.permission-module-manage-summary span { min-width: 0; overflow-wrap: anywhere; }
.permission-module-advanced {
  display: grid;
  min-width: 0;
  gap: 8px;
  border-top: 1px solid #e7eef3;
  padding-top: 10px;
}
.permission-module-advanced > div:first-child { display: grid; gap: 2px; }
.permission-module-advanced > div:first-child strong { color: #4f6d80; font-size: 10px; }
.permission-module-advanced > div:first-child small { color: #8a9ca8; font-size: 9px; line-height: 1.4; }
.permission-advanced-option {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #dce8ee;
  border-radius: 11px;
  background: #fbfdfe;
  padding: 10px;
  cursor: pointer;
}
.permission-advanced-option.selected { border-color: #a9d8e9; background: #f0fafe; }
.permission-advanced-option.is-danger { border-color: #efd6d8; background: #fffafa; }
.permission-advanced-option.is-danger.selected { border-color: #e8aeb3; background: #fff3f4; }
.permission-advanced-option > span { display: grid; min-width: 0; gap: 3px; }
.permission-advanced-option strong { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 6px; color: #345c74; font-size: 10.5px; overflow-wrap: anywhere; }
.permission-advanced-option strong em { border-radius: 999px; background: #ffe5e7; color: #b94b54; padding: 2px 6px; font-size: 8px; font-style: normal; font-weight: 850; }
.permission-advanced-option small { color: #7c909d; font-size: 9.5px; line-height: 1.45; overflow-wrap: anywhere; }
.permission-editor--dialog .permission-save-bar {
  position: sticky;
  bottom: -1px;
  z-index: 4;
  border-top: 1px solid #dce8ef;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 20px rgba(27, 72, 100, .07);
  backdrop-filter: blur(10px);
}
.permission-module-required-note[hidden] { display: none !important; }

/* Consistent containment for all administration pages. */
.app-shell,
.app-shell > .main,
.content,
.content > *,
.card,
.section-heading,
.title-row,
.premium-title-row,
.settings-dialog-card,
.settings-dialog-body,
.settings-dialog-form,
.table-wrap,
.scalable-table-wrap { min-width: 0; }
.settings-dialog-form input,
.settings-dialog-form select,
.settings-dialog-form textarea,
.compact-form input,
.compact-form select,
.compact-form textarea,
.data-command-grid input,
.data-command-grid select,
.data-command-grid textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.table-wrap,
.scalable-table-wrap,
.premium-table-wrap { max-width: 100%; overscroll-behavior-inline: contain; }

@media (max-width: 980px) {
  .permission-module-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  body { overscroll-behavior-x: none; }
  .app-shell > .main,
  .main,
  .content,
  .content.content--schedule { contain: inline-size; }
  .title-row,
  .premium-title-row,
  .section-heading,
  .permission-editor-head,
  .permission-save-bar {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .title-actions,
  .section-actions,
  .schedule-heading-actions,
  .attendance-page-actions,
  .employee-header-actions { min-width: 0; }
  .title-actions > *,
  .section-actions > *,
  .schedule-heading-actions > *,
  .attendance-page-actions > * { max-width: 100%; }
  .management-profile-menu {
    max-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .settings-dialog-card,
  .management-dialog-card {
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))) !important;
    overflow: hidden !important;
  }
  .settings-dialog-body {
    max-height: calc(100dvh - 116px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  #permission-member-dialog .settings-dialog-body {
    display: block !important;
    align-content: start !important;
  }
  #permission-member-dialog .permission-editor--dialog {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  #permission-member-dialog .permission-editor--dialog > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #permission-member-dialog .permission-editor--dialog .permission-section {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }
  .permission-editor--dialog .permission-editor-head { align-items: flex-start; flex-direction: column; }
  .permission-editor--dialog .permission-editor-head .badge { align-self: flex-start; white-space: normal; }
  .permission-module-grid { gap: 10px; }
  .permission-module-card { border-radius: 14px; padding: 13px; }
  .permission-module-card > header { gap: 9px; }
  .permission-site-grid,
  .permission-group-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #permission-member-dialog .permission-save-bar {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    margin: 10px 0 0 !important;
    overflow: hidden !important;
  }
  #permission-member-dialog .permission-save-bar > strong,
  #permission-member-dialog .permission-save-bar > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #permission-member-dialog .permission-save-bar > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #permission-member-dialog .permission-save-bar .button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .data-pagination,
  .floating-table-footer,
  .pagination-actions { max-width: 100%; flex-wrap: wrap !important; }
}

@media (max-width: 700px) {
  /* Permission accounts become native phone cards instead of a 960px table. */
  .permission-account-table-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0;
    border-radius: 0;
    overflow: visible !important;
  }
  .permission-account-card > .data-pagination {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    margin-top: 10px !important;
    box-shadow: none !important;
  }
  .permission-account-card > .data-pagination > .floating-table-navigation { display: none !important; }
  .permission-account-table,
  .permission-account-table tbody { display: grid !important; width: 100% !important; min-width: 0 !important; gap: 10px; }
  .permission-account-table thead { display: none !important; }
  .permission-account-table tr {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
    border: 1px solid #dce8ef;
    border-radius: 14px;
    background: #fff;
    padding: 13px;
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(35, 82, 110, .045);
  }
  .permission-account-table td {
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    align-content: start;
    gap: 4px;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .permission-account-table td:first-child,
  .permission-account-table td:nth-child(3),
  .permission-account-table td:last-child { grid-column: 1 / -1; }
  .permission-account-cell { align-items: flex-start; }
  .permission-account-cell > span:last-child,
  .permission-account-cell strong,
  .permission-account-cell small { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .permission-mobile-label { display: block; color: #8a9ba7; font-size: 8.5px; font-weight: 850; letter-spacing: .02em; }
  .permission-access-summary > small { flex-wrap: wrap; }
  .permission-access-summary > small span + span { border-left: 0; padding-left: 0; }
  .permission-row-action { text-align: left; }
  .permission-adjust-button { width: 100%; }
  .permission-account-status,
  .permission-group-label { width: fit-content; max-width: 100%; white-space: normal; }
}

@media (max-width: 520px) {
  .content,
  .content.content--schedule { padding: 8px !important; }
  .card,
  .platform-hero,
  .dashboard-hero { max-width: 100%; border-radius: 14px !important; padding: 11px !important; }
  .organization-metric-grid,
  .platform-metrics,
  .hero-stats,
  .dashboard-metrics,
  .dashboard-metric-grid,
  .metric-grid,
  .overview-grid,
  .employee-summary-grid,
  .attendance-overview-grid,
  .billing-config-grid,
  .payment-channel-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .permission-scope-tree { padding: 11px !important; }
  .permission-tree-scroll { max-height: 240px; }
  .permission-account-card { padding: 11px !important; }
  .permission-account-toolbar { padding: 9px; }
  .permission-module-card > header { flex-direction: column; }
  .permission-module-current { align-self: flex-start; }
  .permission-module-levels { gap: 4px; padding: 4px; }
  .permission-module-level-option { min-height: 38px; padding: 6px 4px; }
  .permission-module-level-option span { font-size: 10px; }
  .permission-module-manage-summary { flex-direction: column; gap: 3px; }
  .permission-save-bar { gap: 9px; padding: 10px !important; }
  .permission-save-bar > strong { font-size: 10px; }
  #permission-member-dialog .permission-save-bar {
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px !important;
  }
  #permission-member-dialog .permission-save-bar > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .settings-dialog-head,
  .settings-dialog-body { padding-left: 11px !important; padding-right: 11px !important; }
  .settings-dialog-actions,
  .settings-dialog-actions.wide,
  .dialog-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100%; }
  .settings-dialog-actions .button,
  .dialog-actions .button { width: 100%; min-width: 0; }
  .data-pagination { gap: 7px !important; }
  .data-pagination > * { min-width: 0; }
}

@media (max-width: 350px) {
  .organization-metric-grid,
  .platform-metrics,
  .hero-stats,
  .dashboard-metrics,
  .dashboard-metric-grid,
  .metric-grid,
  .overview-grid,
  .employee-summary-grid,
  .attendance-overview-grid,
  .billing-config-grid,
  .payment-channel-status-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .permission-account-table tr { grid-template-columns: minmax(0, 1fr); }
  .permission-account-table td { grid-column: 1 !important; }
}

@media (max-width: 300px) {
  #permission-member-dialog .permission-save-bar > div { grid-template-columns: minmax(0, 1fr) !important; }
}

/* PATCH029 — single mobile date picker, strict field containment, and a more
   compact leader work-time card. */
.leader-schedule-context-grid > *,
.leader-schedule-control,
.leader-schedule-control .qidian-date-control,
.leader-schedule-control .qidian-date-trigger { min-width: 0; max-width: 100%; }
.leader-schedule-control .qidian-date-trigger {
  min-height: 48px;
  border: 1px solid #cfe1eb;
  border-radius: 12px;
  background: #fff;
  padding: 0 11px 0 14px;
  color: #274c66;
  font-size: 15px;
  font-weight: 780;
}
.leader-work-time-overview--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.leader-work-time-overview--compact article { min-height: 86px; }

@media (max-width: 620px) {
  .qidian-date-popover { padding: 14px; }
  .qidian-date-head { margin-bottom: 9px; }
  .qidian-date-weekdays,
  .qidian-date-grid { gap: 4px; }
  .qidian-date-cell { height: 37px; border-radius: 9px; }
  .qidian-date-actions { margin-top: 9px; padding-top: 9px; }
  .leader-schedule-context { overflow: visible; }
  .leader-schedule-context-grid { width: 100%; }
  .leader-schedule-control .qidian-date-control { width: 100%; }
  .leader-schedule-control .qidian-date-trigger { width: 100%; }
}

@media (max-width: 520px) {
  .leader-schedule-page { width: 100%; max-width: 100%; overflow-x: clip; }
  .leader-schedule-context-grid { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 8px; }
  .leader-schedule-control { width: 100%; box-sizing: border-box; padding: 9px; }
  .leader-schedule-control select,
  .leader-schedule-control input,
  .leader-schedule-control .qidian-date-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 43px;
    box-sizing: border-box;
    padding: 0 7px 0 9px;
    font-size: 12px;
  }
  .leader-schedule-control .qidian-date-trigger { gap: 5px; }
  .leader-schedule-control .qidian-date-icon { flex-basis: 16px; width: 16px; height: 16px; }
  .leader-schedule-selection { min-width: 0; overflow: hidden; }
  .leader-work-time-panel { padding: 12px !important; }
  .leader-work-time-overview--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .leader-work-time-overview--compact article { min-height: 76px; padding: 11px; }
  .leader-work-time-form { margin-top: 11px; padding: 11px; }
  .leader-work-time-note { margin-top: 9px; }
  .toolbar-chip .qidian-date-control { min-width: 0; flex-basis: 154px; }
  .message-work-date { width: 100%; min-width: 0; align-items: stretch; flex-direction: column; }
  .message-work-date .qidian-date-control,
  .payroll-period-selector .qidian-date-control { width: 100%; }
}

@media (max-width: 360px) {
  .leader-schedule-context-grid { grid-template-columns: minmax(0, 1fr); }
  .leader-work-time-overview--compact { grid-template-columns: minmax(0, 1fr); }
}

/* PATCH030 — compact permission overview, contained iOS work-time field,
   and simplified team-leader member rows. */

/* Permission adjustment: show the full permission directory as a dense matrix. */
#permission-member-dialog .permission-module-section {
  min-width: 0 !important;
  padding: 9px !important;
}
#permission-member-dialog .permission-module-section > .section-heading {
  margin-bottom: 6px !important;
}
#permission-member-dialog .permission-level-heading p,
#permission-member-dialog .permission-zero-state {
  display: none !important;
}
#permission-member-dialog .permission-module-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-width: 0 !important;
  gap: 7px !important;
}
#permission-member-dialog .permission-module-card {
  display: grid !important;
  min-width: 0 !important;
  align-content: start !important;
  gap: 5px !important;
  border-radius: 10px !important;
  padding: 7px !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-module-card > header {
  display: block !important;
  min-width: 0 !important;
  min-height: 27px !important;
}
#permission-member-dialog .permission-module-card h4 {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #244c66 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#permission-member-dialog .permission-module-card header p,
#permission-member-dialog .permission-module-current,
#permission-member-dialog .permission-module-manage-summary {
  display: none !important;
}
#permission-member-dialog .permission-module-levels {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  min-width: 0 !important;
  gap: 2px !important;
  border-radius: 7px !important;
  padding: 2px !important;
}
#permission-member-dialog .permission-module-levels:has(.permission-module-level-option:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#permission-member-dialog .permission-module-level-option {
  display: flex !important;
  min-width: 0 !important;
  min-height: 26px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border-radius: 6px !important;
  padding: 3px 2px !important;
}
#permission-member-dialog .permission-module-level-option input {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  flex: 0 0 9px !important;
  margin: 0 !important;
}
#permission-member-dialog .permission-module-level-option span {
  min-width: 0 !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
#permission-member-dialog .permission-module-required-note,
#permission-member-dialog .permission-module-custom-note {
  max-height: 25px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  padding: 3px 5px !important;
  font-size: 7px !important;
  line-height: 1.25 !important;
}
#permission-member-dialog .permission-module-advanced {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}
#permission-member-dialog .permission-module-advanced > div:first-child {
  display: none !important;
}
#permission-member-dialog .permission-advanced-option {
  display: flex !important;
  min-width: 0 !important;
  min-height: 25px !important;
  align-items: center !important;
  gap: 4px !important;
  border-radius: 6px !important;
  padding: 3px 4px !important;
}
#permission-member-dialog .permission-advanced-option input {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  flex: 0 0 10px !important;
  margin: 0 !important;
}
#permission-member-dialog .permission-advanced-option > span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#permission-member-dialog .permission-advanced-option strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 7.5px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#permission-member-dialog .permission-advanced-option strong em,
#permission-member-dialog .permission-advanced-option small {
  display: none !important;
}

/* Work-time control: contain Safari's intrinsic time-input width. */
.leader-work-time-panel,
.leader-work-time-form,
.leader-work-time-form > *,
.leader-work-time-form label,
.leader-time-input-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.leader-work-time-panel,
.leader-work-time-form,
.leader-work-time-form label,
.leader-time-input-shell {
  overflow: hidden !important;
}
.leader-work-time-form {
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) !important;
  contain: inline-size;
}
.leader-time-input-shell {
  display: block !important;
  border: 1px solid #bdd8e5 !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.leader-work-time-form .leader-time-input-shell input[type="time"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  -webkit-min-logical-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 10px !important;
  overflow: hidden !important;
  text-align: center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.leader-work-time-form input[type="time"]::-webkit-date-and-time-value,
.leader-work-time-form input[type="time"]::-webkit-datetime-edit {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
.leader-work-time-form input[type="time"]::-webkit-calendar-picker-indicator {
  max-width: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Leader roster: name, employee number and the three operational states only. */
.leader-member-list-head {
  align-items: center !important;
  gap: 9px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
}
.leader-member-list-head h2 { font-size: 15px !important; }
.leader-member-list-head > div > span { margin-top: 2px !important; font-size: 9.5px !important; }
.leader-member-list-head label {
  width: min(280px, 100%) !important;
  gap: 3px !important;
  font-size: 9.5px !important;
}
.leader-member-list-head input {
  min-height: 36px !important;
  border-radius: 9px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
}
.leader-member-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 7px !important;
  margin-top: 8px !important;
}
.leader-member-card--compact {
  display: flex !important;
  min-width: 0 !important;
  min-height: 52px !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 10px !important;
  padding: 7px 8px !important;
  box-shadow: none !important;
}
.leader-member-card--compact .leader-member-contact,
.leader-member-card--compact .leader-member-time {
  display: none !important;
}
.leader-member-card--compact .leader-member-identity {
  min-width: 108px !important;
  flex: 1 1 145px !important;
  gap: 7px !important;
}
.leader-member-card--compact .schedule-avatar {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  flex: 0 0 31px !important;
  border-width: 2px !important;
  font-size: 10px !important;
}
.leader-member-card--compact .leader-member-identity > div { gap: 1px !important; }
.leader-member-card--compact .leader-member-identity strong {
  font-size: 12px !important;
  line-height: 1.2 !important;
}
.leader-member-card--compact .leader-member-identity span {
  gap: 3px !important;
  font-size: 8.5px !important;
}
.leader-member-card--compact .leader-member-statuses {
  min-width: 0 !important;
  max-width: min(260px, 48vw) !important;
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
  gap: 3px !important;
}
.leader-member-card--compact .leader-member-statuses .badge {
  min-height: 18px !important;
  max-width: 100% !important;
  padding: 1px 5px !important;
  font-size: 7.5px !important;
  line-height: 1.1 !important;
}

@media (max-width: 1180px) {
  #permission-member-dialog .permission-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) {
  #permission-member-dialog .permission-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
}
@media (max-width: 820px) {
  .leader-work-time-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .leader-work-time-form .button {
    width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 520px) {
  #permission-member-dialog .settings-dialog-body {
    padding: 7px 7px calc(11px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #permission-member-dialog .permission-module-section { padding: 6px !important; }
  #permission-member-dialog .permission-module-grid { gap: 4px !important; }
  #permission-member-dialog .permission-module-card {
    gap: 4px !important;
    border-radius: 8px !important;
    padding: 5px !important;
  }
  #permission-member-dialog .permission-module-card > header { min-height: 24px !important; }
  #permission-member-dialog .permission-module-card h4 { font-size: 9px !important; }
  #permission-member-dialog .permission-module-level-option { min-height: 24px !important; }
  #permission-member-dialog .permission-module-level-option input {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    flex-basis: 8px !important;
  }
  #permission-member-dialog .permission-module-level-option span { font-size: 7.5px !important; }
  #permission-member-dialog .permission-module-required-note,
  #permission-member-dialog .permission-module-custom-note { font-size: 6.5px !important; }
  #permission-member-dialog .permission-advanced-option { min-height: 23px !important; padding: 3px !important; }
  #permission-member-dialog .permission-advanced-option strong { font-size: 7px !important; }

  .leader-work-time-form {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 9px !important;
    overflow: hidden !important;
  }
  .leader-time-input-shell { width: 100% !important; max-width: 100% !important; }
  .leader-work-time-form .leader-time-input-shell input[type="time"] {
    min-height: 45px !important;
    padding-inline: 7px !important;
    font-size: 17px !important;
  }

  .leader-member-list-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 7px !important;
    margin-top: 11px !important;
    padding-top: 10px !important;
  }
  .leader-member-list-head h2 { font-size: 13px !important; }
  .leader-member-list-head > div > span,
  .leader-member-list-head label > span { display: none !important; }
  .leader-member-list-head label { width: 100% !important; }
  .leader-member-list-head input {
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
  .leader-member-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    margin-top: 7px !important;
  }
  .leader-member-card--compact {
    min-height: 48px !important;
    gap: 5px !important;
    border-radius: 9px !important;
    padding: 6px 7px !important;
  }
  .leader-member-card--compact .schedule-avatar {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    flex-basis: 29px !important;
  }
  .leader-member-card--compact .leader-member-identity { min-width: 100px !important; flex-basis: 126px !important; }
  .leader-member-card--compact .leader-member-identity strong { font-size: 11px !important; }
  .leader-member-card--compact .leader-member-identity span { font-size: 8px !important; }
  .leader-member-card--compact .leader-member-statuses { max-width: 49vw !important; gap: 2px !important; }
  .leader-member-card--compact .leader-member-statuses .badge {
    min-height: 17px !important;
    padding: 1px 4px !important;
    font-size: 7px !important;
  }
}
@media (max-width: 330px) {
  #permission-member-dialog .permission-module-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .leader-member-card--compact {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .leader-member-card--compact .leader-member-statuses {
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* PATCH030 density correction: remove inherited mobile padding from the
   segmented labels and use the card border/disabled controls for required
   state instead of another full text row. */
#permission-member-dialog .permission-module-level-option span {
  min-height: 0 !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-module-required-note,
#permission-member-dialog .permission-module-custom-note {
  display: none !important;
}
#permission-member-dialog .permission-module-level-option input,
#permission-member-dialog .permission-advanced-option input {
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-module-level-option input {
  height: 9px !important;
  max-height: 9px !important;
}
#permission-member-dialog .permission-advanced-option input {
  height: 10px !important;
  max-height: 10px !important;
}
@media (max-width: 520px) {
  #permission-member-dialog .permission-module-level-option input {
    height: 8px !important;
    max-height: 8px !important;
  }
}

/* PATCH030 final containment overrides. */
#permission-member-dialog .permission-module-level-option input {
  min-height: 0 !important;
  max-height: 8px !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-advanced-option input {
  min-height: 0 !important;
  max-height: 10px !important;
  padding: 0 !important;
}
@media (max-width: 330px) {
  .leader-member-card--compact {
    align-items: center !important;
    flex-direction: row !important;
  }
  .leader-member-card--compact .leader-member-identity {
    min-width: 96px !important;
    flex-basis: 112px !important;
  }
  .leader-member-card--compact .leader-member-statuses {
    max-width: 50vw !important;
    justify-content: flex-end !important;
  }
}

/* PATCH031 — compact permission cards without shrinking text, a horizontal
   personnel-status summary, readable table-style roster rows, and final
   iPhone time-field containment. */

/* Permission cards become smaller through spacing and layout only. */
#permission-member-dialog .permission-module-section {
  padding: 7px !important;
}
#permission-member-dialog .permission-module-section > .section-heading {
  margin-bottom: 5px !important;
}
#permission-member-dialog .permission-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: min-content !important;
  align-items: start !important;
  gap: 6px !important;
}
#permission-member-dialog .permission-module-card {
  min-height: 0 !important;
  align-self: start !important;
  gap: 5px !important;
  border-radius: 9px !important;
  padding: 6px 7px !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-module-card > header {
  min-height: 34px !important;
}
#permission-member-dialog .permission-module-card h4 {
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 1.24 !important;
}
#permission-member-dialog .permission-module-levels {
  gap: 2px !important;
  border-radius: 7px !important;
  padding: 2px !important;
}
#permission-member-dialog .permission-module-level-option {
  min-height: 30px !important;
  gap: 4px !important;
  border-radius: 6px !important;
  padding: 4px 3px !important;
}
#permission-member-dialog .permission-module-level-option input {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 0 !important;
  max-width: 11px !important;
  max-height: 11px !important;
  flex: 0 0 11px !important;
}
#permission-member-dialog .permission-module-level-option span {
  font-size: 10.5px !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
}
#permission-member-dialog .permission-module-advanced {
  gap: 3px !important;
}
#permission-member-dialog .permission-advanced-option {
  min-height: 28px !important;
  gap: 5px !important;
  border-radius: 7px !important;
  padding: 4px 5px !important;
}
#permission-member-dialog .permission-advanced-option input {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 0 !important;
  max-width: 11px !important;
  max-height: 11px !important;
  flex: 0 0 11px !important;
}
#permission-member-dialog .permission-advanced-option strong {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

/* Wide screens show all seven totals in one shallow row. */
.leader-schedule-summary {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 8px !important;
}
.leader-schedule-summary-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 66px !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 13px !important;
  padding: 9px 10px !important;
}
.leader-schedule-summary-card span {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}
.leader-schedule-summary-card strong {
  font-size: 24px !important;
  line-height: 1 !important;
}

/* Compact roster: employee, employee number, then a horizontally scrollable
   personnel-status lane with larger labels. */
.leader-member-column-head,
.leader-member-card--compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 72px minmax(190px, 1.15fr) !important;
  min-width: 0 !important;
  align-items: center !important;
  column-gap: 12px !important;
}
.leader-member-column-head {
  margin-top: 9px !important;
  border: 1px solid #dce8ef;
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  background: #f4f9fc;
  padding: 7px 10px;
  color: #5f788c;
  font-size: 11.5px;
  font-weight: 820;
}
.leader-member-column-head span:nth-child(2) {
  text-align: center;
}
.leader-member-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin-top: 0 !important;
  border: 1px solid #dce8ef;
  border-radius: 0 0 11px 11px;
  overflow: hidden;
  background: #fff;
}
.leader-member-card--compact {
  min-height: 58px !important;
  border: 0 !important;
  border-bottom: 1px solid #e7eef2 !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 7px 10px !important;
  box-shadow: none !important;
}
.leader-member-card--compact:last-child {
  border-bottom: 0 !important;
}
.leader-member-card--compact:nth-child(even) {
  background: #fbfdfe !important;
}
.leader-member-card--compact .leader-member-identity {
  min-width: 0 !important;
  flex: none !important;
  gap: 9px !important;
}
.leader-member-card--compact .schedule-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  font-size: 12px !important;
}
.leader-member-card--compact .leader-member-identity > div {
  min-width: 0 !important;
}
.leader-member-card--compact .leader-member-identity strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}
.leader-member-number {
  min-width: 0;
  overflow: hidden;
  color: #344f62;
  font-size: 13.5px;
  font-weight: 720;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leader-member-card--compact .leader-member-statuses {
  display: flex !important;
  min-width: 0 !important;
  max-width: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 1px !important;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.leader-member-card--compact .leader-member-statuses::-webkit-scrollbar {
  display: none;
}
.leader-member-card--compact .leader-member-statuses:focus-visible {
  outline: 2px solid rgba(43, 169, 222, .35);
  outline-offset: 1px;
  border-radius: 8px;
}
.leader-member-card--compact .leader-member-statuses .badge {
  min-height: 26px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
  scroll-snap-align: start;
}

/* Safari's intrinsic time-control width cannot participate in layout. */
.leader-work-time-form,
.leader-work-time-form label,
.leader-time-input-shell {
  overflow: clip !important;
}
.leader-time-input-shell {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
  contain: inline-size layout !important;
}
.leader-work-time-form .leader-time-input-shell input[type="time"] {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  inline-size: auto !important;
  block-size: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1200px) {
  #permission-member-dialog .permission-module-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1100px) {
  .leader-schedule-summary {
    display: flex !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 1px 6px !important;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
  .leader-schedule-summary-card {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    flex: 0 0 132px !important;
    scroll-snap-align: start;
  }
}
@media (max-width: 900px) {
  #permission-member-dialog .permission-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 620px) {
  #permission-member-dialog .permission-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  #permission-member-dialog .permission-module-card {
    padding: 5px 6px !important;
  }
  #permission-member-dialog .permission-module-card > header {
    min-height: 34px !important;
  }
  /* Phone cards keep the same readable permission type scale. */
  #permission-member-dialog .permission-module-card h4 {
    font-size: 14px !important;
  }
  #permission-member-dialog .permission-module-level-option span,
  #permission-member-dialog .permission-advanced-option strong {
    font-size: 10.5px !important;
  }

  .leader-schedule-summary-card {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    flex-basis: 118px !important;
    min-height: 58px !important;
    padding: 8px 9px !important;
  }
  .leader-schedule-summary-card span {
    font-size: 11px !important;
  }
  .leader-schedule-summary-card strong {
    font-size: 22px !important;
  }

  .leader-member-column-head,
  .leader-member-card--compact {
    grid-template-columns: minmax(0, 1fr) 48px minmax(126px, 42%) !important;
    column-gap: 7px !important;
  }
  .leader-member-column-head {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  .leader-member-card--compact {
    min-height: 56px !important;
    padding: 6px 8px !important;
  }
  .leader-member-card--compact .schedule-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }
  .leader-member-card--compact .leader-member-identity strong {
    font-size: 13.5px !important;
  }
  .leader-member-number {
    font-size: 13px !important;
  }
  .leader-member-card--compact .leader-member-statuses .badge {
    min-height: 25px !important;
    padding: 4px 7px !important;
    font-size: 12px !important;
  }
  .leader-time-input-shell {
    height: 45px !important;
    min-height: 45px !important;
  }
}
@media (max-width: 340px) {
  #permission-member-dialog .permission-module-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .leader-member-column-head,
  .leader-member-card--compact {
    grid-template-columns: minmax(0, 1fr) 42px minmax(112px, 40%) !important;
    column-gap: 5px !important;
  }
  .leader-member-card--compact .schedule-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-basis: 32px !important;
  }
  .leader-member-card--compact .leader-member-identity strong {
    font-size: 13px !important;
  }
  .leader-member-card--compact .leader-member-statuses .badge {
    font-size: 11.5px !important;
  }
}

/* PATCH032 — simple permission matrix and self-owned group-leader interface.
   The uploaded self-owned QIDIAN application is the visual source of truth for
   the leader personnel-arrangement and work-time pages. */

/* Permission editor: plain horizontal permission rows.  There is no card wall;
   text may wrap inside its own cell but can never overlap another language cell. */
#permission-member-dialog .permission-module-section {
  min-width: 0 !important;
  padding: 10px !important;
}
#permission-member-dialog .permission-module-section > .section-heading {
  margin-bottom: 8px !important;
}
#permission-member-dialog .permission-module-section > .section-heading p,
#permission-member-dialog .permission-zero-state {
  display: none !important;
}
#permission-member-dialog .permission-module-grid {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
}
#permission-member-dialog .permission-module-table-scroll {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid #dce8ef !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
#permission-member-dialog .permission-module-table-scroll:focus-visible {
  outline: 3px solid rgba(43, 169, 222, .2);
  outline-offset: 2px;
}
#permission-member-dialog .permission-module-table-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  min-width: 0 !important;
  align-items: start !important;
  column-gap: 14px !important;
  padding: 0 10px !important;
  background: #fff !important;
}
#permission-member-dialog .permission-module-table-pane {
  min-width: 0 !important;
  overflow: hidden !important;
}
#permission-member-dialog .permission-module-table {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
  background: transparent !important;
}
#permission-member-dialog .permission-module-table thead th {
  height: 38px !important;
  border: 0 !important;
  border-bottom: 1px solid #dce8ef !important;
  background: #f5f9fb !important;
  padding: 6px 7px !important;
  color: #506a7d !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
#permission-member-dialog .permission-module-table thead th:first-child {
  width: 46% !important;
  text-align: left !important;
}
#permission-member-dialog .permission-module-table thead th:not(:first-child) {
  width: 18% !important;
}
#permission-member-dialog .permission-module-card,
#permission-member-dialog .permission-module-row-group {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-module-row {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-module-row-group:nth-of-type(even) .permission-module-row {
  background: #fbfdfe !important;
}
#permission-member-dialog .permission-module-row > th,
#permission-member-dialog .permission-module-row > td {
  height: 44px !important;
  min-width: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e7eef2 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-module-name-cell {
  width: 46% !important;
  min-width: 0 !important;
  padding: 7px 8px !important;
  text-align: left !important;
}
#permission-member-dialog .permission-module-level-cell {
  width: 18% !important;
  min-width: 0 !important;
  border-left: 1px solid #edf2f5 !important;
  text-align: center !important;
}
#permission-member-dialog .permission-module-name {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
}
#permission-member-dialog .permission-module-name > strong,
#permission-member-dialog .permission-module-name-cell strong,
#permission-member-dialog .permission-module-card h4 {
  min-width: 0 !important;
  margin: 0 !important;
  color: #21445d !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
#permission-member-dialog .permission-module-current {
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 2px 5px !important;
  background: #fff5df !important;
  color: #9a6918 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
#permission-member-dialog .permission-module-current[hidden] {
  display: none !important;
}
#permission-member-dialog .permission-module-level-option,
#permission-member-dialog .permission-module-level-empty {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 43px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 5px 4px !important;
  color: #5b7182 !important;
  text-align: center !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-module-level-option:hover {
  background: #f0f9fd !important;
}
#permission-member-dialog .permission-module-level-option.selected {
  background: #eaf8fd !important;
  color: #087dab !important;
}
#permission-member-dialog .permission-module-level-option input {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex: 0 0 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #168dbd !important;
}
#permission-member-dialog .permission-module-level-option span {
  min-width: 0 !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
#permission-member-dialog .permission-module-level-empty {
  color: #acbac4 !important;
  font-size: 13px !important;
}
#permission-member-dialog .permission-module-notes-row[hidden] {
  display: none !important;
}
#permission-member-dialog .permission-module-notes-row > td {
  border: 0 !important;
  border-bottom: 1px solid #e7eef2 !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-module-row-notes {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  border: 0 !important;
  background: #fbfdfe !important;
  padding: 5px 8px !important;
}
#permission-member-dialog .permission-module-required-note,
#permission-member-dialog .permission-module-custom-note {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  background: #fff5df !important;
  color: #9a6918 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
#permission-member-dialog .permission-module-required-note[hidden] {
  display: none !important;
}
#permission-member-dialog .permission-module-advanced {
  display: flex !important;
  min-width: 0 !important;
  flex: 1 1 180px !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}
#permission-member-dialog .permission-advanced-option {
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: 28px !important;
  align-items: center !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 3px 0 !important;
  color: #496579 !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-advanced-option.is-danger {
  color: #a83f3f !important;
}
#permission-member-dialog .permission-advanced-option input {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex: 0 0 14px !important;
  margin: 0 !important;
}
#permission-member-dialog .permission-advanced-option strong {
  font-size: 11.5px !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#permission-member-dialog .permission-advanced-option em {
  margin-left: 4px !important;
  font-size: 9px !important;
  font-style: normal !important;
}
#permission-member-dialog .permission-advanced-option small,
#permission-member-dialog .permission-module-manage-summary,
#permission-member-dialog .permission-module-card > header,
#permission-member-dialog .permission-module-card > header p,
#permission-member-dialog .permission-module-levels {
  display: none !important;
}

/* Group-leader page follows the uploaded self-owned LeaderSchedule.jsx and
   leader-schedule.css structure: title, two tabs, summary, status grid and
   a seven-column roster inside its own horizontal scroller. */
.leader-schedule-page.leader-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: auto !important;
  overflow-x: clip !important;
  background: transparent !important;
  color: #253044 !important;
}
.leader-schedule-page,
.leader-schedule-page * {
  box-sizing: border-box;
}
.leader-schedule-page .leader-main {
  width: min(1180px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 0 28px !important;
}
.leader-schedule-page .leader-title-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 0 20px !important;
}
.leader-schedule-page .leader-title-row h1 {
  margin: 7px 0 5px !important;
  color: #253044 !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
}
.leader-schedule-page .leader-title-row p {
  margin: 0 !important;
  color: #748094 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.leader-schedule-page .leader-role-badge {
  display: inline-flex !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #eaf7fc !important;
  color: #1687b7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.leader-schedule-page .leader-tool-tabs,
.leader-schedule-page .leader-schedule-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
  padding: 6px !important;
  border: 1px solid #e1eaf0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(37, 66, 89, .04) !important;
}
.leader-schedule-page .leader-tool-tabs button,
.leader-schedule-page .leader-schedule-tabs button {
  min-width: 0 !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  padding: 0 14px !important;
  color: #617085 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
  white-space: normal !important;
}
.leader-schedule-page .leader-tool-tabs button:hover,
.leader-schedule-page .leader-schedule-tabs button:hover {
  background: #f1f9fc !important;
  color: #1687b7 !important;
}
.leader-schedule-page .leader-tool-tabs button.is-active,
.leader-schedule-page .leader-schedule-tabs button.is-active,
.leader-schedule-page .leader-tool-tabs button.active,
.leader-schedule-page .leader-schedule-tabs button.active {
  background: linear-gradient(100deg, #2ba9de, #35b3e4) !important;
  color: #fff !important;
  box-shadow: 0 7px 17px rgba(43, 169, 222, .2) !important;
}
.leader-schedule-page .leader-alert {
  margin-bottom: 15px !important;
  border: 1px solid #f2d89a !important;
  border-radius: 10px !important;
  background: #fff8e7 !important;
  padding: 13px 15px !important;
  color: #8c6512 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.leader-schedule-page .leader-summary-card,
.leader-schedule-page .leader-table-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border: 1px solid #e1e9ef !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgba(37, 66, 89, .06) !important;
}
.leader-schedule-page .leader-summary-card {
  padding: 22px !important;
}
.leader-schedule-page .leader-summary-fields,
.leader-schedule-page .leader-summary-fields.is-two-column {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  min-width: 0 !important;
}
.leader-schedule-page .leader-summary-fields.is-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.leader-schedule-page .leader-summary-fields label {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 76px !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid #e4ebf0 !important;
  border-radius: 12px !important;
  background: #f9fbfc !important;
  padding: 13px 15px !important;
  overflow: hidden !important;
}
.leader-schedule-page .leader-summary-fields label > span:first-child,
.leader-schedule-page .leader-count-button span {
  color: #748094 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.leader-schedule-page .leader-summary-fields strong {
  min-width: 0 !important;
  color: #253044 !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}
.leader-schedule-page .leader-summary-fields select,
.leader-schedule-page .leader-summary-fields input,
.leader-schedule-page .leader-summary-fields .date-picker-trigger,
.leader-schedule-page .leader-summary-fields .date-picker-control {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  border: 1px solid #d9e3ea !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
.leader-schedule-page .leader-time-input-shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  contain: inline-size layout !important;
}
.leader-schedule-page .leader-time-input-shell input[type="time"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  -webkit-min-logical-width: 0 !important;
  box-sizing: border-box !important;
}
.leader-schedule-page .leader-count-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin-top: 14px !important;
}
.leader-schedule-page .leader-count-button {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: #f1f7fa !important;
  padding: 12px 14px !important;
  color: inherit !important;
  text-align: left !important;
  box-shadow: none !important;
}
.leader-schedule-page .leader-count-button:hover {
  border-color: #bfe4f2 !important;
  transform: translateY(-1px) !important;
}
.leader-schedule-page .leader-count-button.is-active {
  border-color: #8ed3eb !important;
  background: #eaf7fc !important;
  box-shadow: 0 7px 18px rgba(43, 169, 222, .1) !important;
}
.leader-schedule-page .leader-count-button.is-registered.is-active {
  border-color: #9cdecd !important;
  background: #ecfaf6 !important;
}
.leader-schedule-page .leader-count-button.is-leave.is-active {
  border-color: #f0d090 !important;
  background: #fff8e9 !important;
}
.leader-schedule-page .leader-count-button.is-no_response.is-active,
.leader-schedule-page .leader-count-button.is-absent.is-active {
  border-color: #efb3b3 !important;
  background: #fff1f1 !important;
}
.leader-schedule-page .leader-count-button.is-rest.is-active {
  border-color: #d9e3ea !important;
  background: #f3f7fa !important;
}
.leader-schedule-page .leader-count-button span {
  min-width: 0 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
.leader-schedule-page .leader-count-button strong {
  flex: 0 0 auto !important;
  color: #1687b7 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
.leader-schedule-page .leader-count-button.is-registered strong,
.leader-schedule-page .leader-count-button.is-scheduled strong {
  color: #148c70 !important;
}
.leader-schedule-page .leader-count-button.is-leave strong {
  color: #bf7715 !important;
}
.leader-schedule-page .leader-count-button.is-no_response strong,
.leader-schedule-page .leader-count-button.is-rest strong,
.leader-schedule-page .leader-count-button.is-absent strong {
  color: #d34a4a !important;
}
.leader-schedule-page .leader-table-card {
  margin-top: 18px !important;
  overflow: hidden !important;
}
.leader-schedule-page .leader-table-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border-bottom: 1px solid #e8eef2 !important;
  padding: 18px 20px !important;
}
.leader-schedule-page .leader-table-heading h2 {
  margin: 0 !important;
  color: #253044 !important;
  font-size: 17px !important;
}
.leader-schedule-page .leader-table-heading small {
  display: block !important;
  margin-top: 4px !important;
  color: #8a96a6 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
.leader-schedule-page .leader-table-heading > span {
  color: #748094 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.leader-schedule-page .leader-table-scroll {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.leader-schedule-page .leader-table-scroll:focus-visible {
  outline: 3px solid rgba(43, 169, 222, .2);
  outline-offset: -3px;
}
.leader-schedule-page .leader-self-table {
  width: 100% !important;
  min-width: 1040px !important;
  border: 0 !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  background: #fff !important;
}
.leader-schedule-page .leader-self-table th,
.leader-schedule-page .leader-self-table td {
  border: 0 !important;
  border-bottom: 1px solid #e8eef2 !important;
  padding: 12px 14px !important;
  color: #35455a !important;
  font-size: 13px !important;
  text-align: left !important;
  vertical-align: middle !important;
}
.leader-schedule-page .leader-self-table th {
  background: #f4f8fa !important;
  color: #647386 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  white-space: nowrap !important;
}
.leader-schedule-page .leader-self-table th:nth-child(1) { width: 235px !important; }
.leader-schedule-page .leader-self-table th:nth-child(2) { width: 105px !important; }
.leader-schedule-page .leader-self-table th:nth-child(3) { width: 150px !important; }
.leader-schedule-page .leader-self-table th:nth-child(4) { width: 150px !important; }
.leader-schedule-page .leader-self-table th:nth-child(5) { width: 145px !important; }
.leader-schedule-page .leader-self-table th:nth-child(6) { width: 120px !important; }
.leader-schedule-page .leader-self-table th:nth-child(7) { width: 135px !important; }
.leader-schedule-page .leader-self-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
.leader-schedule-page .leader-self-table tbody tr:nth-child(even) {
  background: #fbfdfe !important;
}
.leader-schedule-page .leader-self-person {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 10px !important;
}
.leader-schedule-page .leader-self-person .schedule-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  font-size: 12px !important;
}
.leader-schedule-page .leader-self-person strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #253044 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.leader-schedule-page .leader-self-table .badge {
  display: inline-flex !important;
  min-height: 27px !important;
  max-width: 100% !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 4px 9px !important;
  font-size: 11.5px !important;
  font-weight: 780 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
.leader-schedule-page .leader-empty-row {
  padding: 34px 18px !important;
  color: #8793a3 !important;
  text-align: center !important;
  font-weight: 700 !important;
}
.leader-schedule-page .leader-time-push-panel {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin-top: 16px !important;
}
.leader-schedule-page .leader-time-push-count {
  display: flex !important;
  min-width: 0 !important;
  min-height: 58px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border: 1px solid #dceae5 !important;
  border-radius: 11px !important;
  background: #f0faf6 !important;
  padding: 12px 15px !important;
}
.leader-schedule-page .leader-time-push-count span {
  color: #668078 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.leader-schedule-page .leader-time-push-count strong {
  color: #187b62 !important;
  font-size: 18px !important;
}
.leader-schedule-page .leader-push-button {
  width: auto !important;
  min-width: 170px !important;
  min-height: 46px !important;
  margin: 0 !important;
}
.leader-schedule-page .leader-push-note {
  grid-column: 1 / -1 !important;
  margin: -4px 0 0 !important;
  color: #7a8798 !important;
  text-align: center !important;
  font-size: 12px !important;
}
.leader-schedule-page .leader-schedule-pending {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}
.leader-schedule-page .leader-schedule-pending strong,
.leader-schedule-page .leader-schedule-pending span {
  display: block !important;
}
.leader-schedule-page .leader-schedule-pending span {
  margin-top: 5px !important;
  font-weight: 500 !important;
}

@media (max-width: 760px) {
  #permission-member-dialog .permission-module-table-columns {
    grid-template-columns: minmax(540px, 1fr) !important;
    min-width: 540px !important;
    row-gap: 0 !important;
    padding: 0 !important;
  }
  #permission-member-dialog .permission-module-table-pane + .permission-module-table-pane {
    border-top: 8px solid #eef5f8 !important;
  }
  #permission-member-dialog .permission-module-table thead th:first-child,
  #permission-member-dialog .permission-module-name-cell {
    width: 43% !important;
  }
  #permission-member-dialog .permission-module-table thead th:not(:first-child),
  #permission-member-dialog .permission-module-level-cell {
    width: 19% !important;
  }
  .leader-schedule-page .leader-title-row {
    align-items: flex-start !important;
  }
  .leader-schedule-page .leader-title-row h1 {
    font-size: 24px !important;
  }
  .leader-schedule-page .leader-summary-fields,
  .leader-schedule-page .leader-summary-fields.is-two-column,
  .leader-schedule-page .leader-count-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .leader-schedule-page .leader-summary-fields:not(.is-two-column) label:first-child {
    grid-column: 1 / -1 !important;
  }
  .leader-schedule-page .leader-time-push-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .leader-schedule-page .leader-push-button {
    width: 100% !important;
    min-width: 0 !important;
  }
  .leader-schedule-page .leader-push-note {
    grid-column: auto !important;
  }
}

@media (max-width: 480px) {
  #permission-member-dialog .permission-module-section {
    padding: 7px !important;
  }
  #permission-member-dialog .permission-module-table-scroll {
    border-radius: 8px !important;
  }
  .leader-schedule-page .leader-title-row {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .leader-schedule-page .leader-title-row .button {
    align-self: flex-start !important;
  }
  .leader-schedule-page .leader-tool-tabs,
  .leader-schedule-page .leader-schedule-tabs,
  .leader-schedule-page .leader-summary-fields,
  .leader-schedule-page .leader-summary-fields.is-two-column,
  .leader-schedule-page .leader-count-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .leader-schedule-page .leader-summary-fields:not(.is-two-column) label:first-child {
    grid-column: auto !important;
  }
  .leader-schedule-page .leader-summary-card {
    padding: 18px !important;
  }
  .leader-schedule-page .leader-summary-fields label {
    min-height: 70px !important;
  }
  .leader-schedule-page .leader-count-button {
    min-height: 58px !important;
  }
  .leader-schedule-page .leader-table-heading {
    align-items: flex-start !important;
    padding: 16px 18px !important;
  }
}

/* Final multilingual permission-table readability pass.
   Keep every access label horizontal; when space is insufficient, the table
   itself scrolls instead of breaking English or Spanish into vertical letters. */
#permission-member-dialog .permission-module-table-columns {
  grid-template-columns: minmax(620px, 1fr) !important;
  min-width: 620px !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-module-table-pane {
  min-width: 620px !important;
  overflow: visible !important;
}
#permission-member-dialog .permission-module-table {
  min-width: 620px !important;
}
#permission-member-dialog .permission-module-table thead th:first-child,
#permission-member-dialog .permission-module-name-cell {
  width: 44% !important;
}
#permission-member-dialog .permission-module-table thead th:not(:first-child),
#permission-member-dialog .permission-module-level-cell {
  width: 18.6667% !important;
}
#permission-member-dialog .permission-module-table thead th:not(:first-child),
#permission-member-dialog .permission-module-level-option span {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
#permission-member-dialog .permission-module-name > strong,
#permission-member-dialog .permission-module-name-cell strong {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
#permission-member-dialog .permission-module-table-pane + .permission-module-table-pane {
  border-top: 8px solid #eef5f8 !important;
}
@media (min-width: 1180px) {
  #permission-member-dialog .permission-module-table-columns {
    grid-template-columns: repeat(2, minmax(520px, 1fr)) !important;
    min-width: 1054px !important;
    padding: 0 10px !important;
  }
  #permission-member-dialog .permission-module-table-pane,
  #permission-member-dialog .permission-module-table {
    min-width: 520px !important;
  }
  #permission-member-dialog .permission-module-table-pane + .permission-module-table-pane {
    border-top: 0 !important;
  }
}
#permission-member-dialog tbody.permission-module-card,
#permission-member-dialog tbody.permission-module-row-group {
  display: table-row-group !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  align-content: normal !important;
  gap: 0 !important;
}
#permission-member-dialog tr.permission-module-row,
#permission-member-dialog tr.permission-module-notes-row {
  display: table-row !important;
  width: auto !important;
}
#permission-member-dialog tr.permission-module-row > th,
#permission-member-dialog tr.permission-module-row > td,
#permission-member-dialog tr.permission-module-notes-row > td {
  display: table-cell !important;
}

/* PATCH033 — one-column permission list, precise date hit areas, aligned
   attendance date controls, silent read-only work-time state, and automatic
   single-warehouse registration review. */

/* The permission matrix is always one vertical list.  The table itself may
   scroll inside the dialog on narrow screens, but it never splits into a
   second column or leaves a blank pane on wide screens. */
#permission-member-dialog .permission-module-table-columns,
#permission-member-dialog .permission-module-table-columns:nth-child(n) {
  display: grid !important;
  grid-template-columns: minmax(620px, 1fr) !important;
  width: 100% !important;
  min-width: 620px !important;
  max-width: none !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-module-table-pane,
#permission-member-dialog .permission-module-table {
  width: 100% !important;
  min-width: 620px !important;
  max-width: none !important;
}
#permission-member-dialog .permission-module-table-pane + .permission-module-table-pane {
  display: none !important;
}
@media (min-width: 1180px) {
  #permission-member-dialog .permission-module-table-columns {
    grid-template-columns: minmax(620px, 1fr) !important;
    min-width: 620px !important;
    padding: 0 !important;
  }
  #permission-member-dialog .permission-module-table-pane,
  #permission-member-dialog .permission-module-table {
    min-width: 620px !important;
  }
}

/* Date fields are not implicit labels.  Only the visible date button opens
   the calendar; tapping the surrounding summary card does nothing. */
.leader-schedule-page .leader-summary-fields .leader-summary-field {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 76px !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid #e4ebf0 !important;
  border-radius: 12px !important;
  background: #f9fbfc !important;
  padding: 13px 15px !important;
  overflow: hidden !important;
  cursor: default !important;
  box-sizing: border-box !important;
}
.leader-schedule-page .leader-summary-fields .leader-summary-field > span:first-child {
  color: #748094 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  pointer-events: none !important;
}
.leader-schedule-page .leader-summary-field--date {
  pointer-events: none !important;
}
.leader-schedule-page .leader-summary-field--date .qidian-date-control {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  pointer-events: none !important;
}
.leader-schedule-page .leader-summary-field--date .qidian-date-trigger {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
@media (max-width: 480px) {
  .leader-schedule-page .leader-summary-fields .leader-summary-field {
    min-height: 70px !important;
  }
}

/* Keep the attendance work-date control on the same visual baseline as the
   import/export buttons. */
.attendance-page-actions {
  align-items: center !important;
}
.attendance-page-actions .attendance-date-control {
  display: grid !important;
  grid-template-columns: auto minmax(148px, 190px) !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px 4px 12px !important;
  box-sizing: border-box !important;
}
.attendance-page-actions .attendance-date-control > span {
  color: #234764 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.attendance-page-actions .attendance-date-control .qidian-date-control {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 190px !important;
  align-items: center !important;
  flex: none !important;
}
.attendance-page-actions .attendance-date-control .qidian-date-trigger {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  align-items: center !important;
  padding: 0 6px 0 9px !important;
  box-sizing: border-box !important;
}
.attendance-page-actions .attendance-file-action {
  min-height: 42px !important;
  height: 42px !important;
}
@media (max-width: 620px) {
  .attendance-page-actions .attendance-date-control {
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important;
  }
  .attendance-page-actions .attendance-date-control .qidian-date-control {
    max-width: none !important;
  }
}

/* A single authorized warehouse is shown as the fixed current warehouse;
   there is no redundant selector before reviewing registrations. */
.registration-review-site-lock {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  min-width: 240px !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid #dce8ef !important;
  border-radius: 10px !important;
  background: #f7fbfd !important;
  padding: 9px 11px !important;
  box-sizing: border-box !important;
}
.registration-review-site-lock > span {
  color: #71899a !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}
.registration-review-site-lock > strong {
  min-width: 0 !important;
  color: #214d68 !important;
  font-size: 13px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.registration-review-site-lock > small {
  color: #7990a0 !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
@media (max-width: 520px) {
  .registration-review-site-lock {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .registration-review-site-lock > small {
    grid-column: 2 !important;
  }
}

/* Final PATCH033 UI corrections — precise leader date buttons and single-site locks. */
.leader-schedule-page .leader-schedule-tabs.is-single {
  grid-template-columns: minmax(0, 1fr) !important;
}
.leader-schedule-page .leader-summary-field--date {
  pointer-events: none !important;
}
.leader-schedule-page .leader-summary-field--date .qidian-date-control {
  display: inline-flex !important;
  width: min(100%, 230px) !important;
  max-width: 230px !important;
  min-width: 0 !important;
  align-self: flex-start !important;
  pointer-events: auto !important;
}
.leader-schedule-page .leader-summary-field--date .qidian-date-trigger {
  width: 100% !important;
  max-width: 230px !important;
  min-width: 0 !important;
}
.leader-schedule-page .leader-summary-field--group,
.leader-schedule-page .leader-summary-field--time {
  cursor: default !important;
}
.leader-schedule-page .leader-summary-field--group select,
.leader-schedule-page .leader-summary-field--time input,
.leader-schedule-page .leader-summary-field--time .leader-time-input-shell {
  pointer-events: auto !important;
}
@media (max-width: 760px) and (min-width: 481px) {
  .leader-schedule-page .leader-summary-fields:not(.is-two-column) .leader-summary-field--group {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 480px) {
  .leader-schedule-page .leader-summary-field--date .qidian-date-control,
  .leader-schedule-page .leader-summary-field--date .qidian-date-trigger {
    width: min(100%, 220px) !important;
    max-width: 220px !important;
  }
}

.attendance-page-actions {
  justify-content: flex-end !important;
  align-items: center !important;
}
.attendance-page-actions .attendance-date-control,
.attendance-page-actions .attendance-file-action {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 620px) {
  .attendance-page-actions {
    justify-content: stretch !important;
  }
}

.work-settings-site-selector.is-locked {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  border: 1px solid #dce8ef !important;
  border-radius: 11px !important;
  background: #f7fbfd !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}
.work-settings-site-selector.is-locked > span {
  color: #71899a !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}
.work-settings-site-selector.is-locked > strong {
  min-width: 0 !important;
  color: #214d68 !important;
  font-size: 13px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.work-settings-site-selector.is-locked > small {
  color: #7890a0 !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
@media (max-width: 520px) {
  .work-settings-site-selector.is-locked {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .work-settings-site-selector.is-locked > small {
    grid-column: 2 !important;
  }
}

/* PATCH033 final mobile precision pass.  The surrounding leader summary card
   is informational only; the explicit date button is the sole calendar hit
   target.  Native iOS time text stays centered inside its fixed field. */
.leader-schedule-page .leader-summary-field--date {
  pointer-events: none !important;
  cursor: default !important;
}
.leader-schedule-page .leader-summary-field--date .qidian-date-control,
.leader-schedule-page .leader-summary-field--date .qidian-date-trigger {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
.leader-schedule-page .leader-time-input-shell {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.leader-schedule-page .leader-time-input-shell input[type="time"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-inline: 38px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  text-align-last: center !important;
  font-variant-numeric: tabular-nums !important;
}
.leader-schedule-page .leader-time-input-shell input[type="time"]::-webkit-date-and-time-value {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}
.leader-schedule-page .leader-time-input-shell input[type="time"]::-webkit-datetime-edit {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  padding: 0 !important;
}
.leader-schedule-page .leader-time-input-shell input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  display: flex !important;
  justify-content: center !important;
}
.attendance-page-actions {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
}
.attendance-page-actions .attendance-date-control,
.attendance-page-actions .attendance-file-action {
  flex: 0 0 auto !important;
  vertical-align: middle !important;
}
@media (max-width: 620px) {
  .leader-schedule-page .leader-time-input-shell input[type="time"] {
    padding-inline: 42px !important;
  }
  .attendance-page-actions .attendance-date-control,
  .attendance-page-actions .attendance-file-action {
    flex: 1 1 100% !important;
  }
}


/* PATCH033 mobile fixed-time alignment: center every visible fixed work-time
   value, including the leader page and the read-only group-management row. */
@media (max-width: 760px) {
  .group-management-time input[type="time"],
  .leader-schedule-page input[type="time"][aria-label="固定上班时间"] {
    text-align: center !important;
    text-align-last: center !important;
    font-variant-numeric: tabular-nums !important;
  }
  .group-management-time input[type="time"]::-webkit-date-and-time-value,
  .leader-schedule-page input[type="time"][aria-label="固定上班时间"]::-webkit-date-and-time-value {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .group-management-time input[type="time"]::-webkit-datetime-edit,
  .leader-schedule-page input[type="time"][aria-label="固定上班时间"]::-webkit-datetime-edit {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .group-management-time input[type="time"]::-webkit-datetime-edit-fields-wrapper,
  .leader-schedule-page input[type="time"][aria-label="固定上班时间"]::-webkit-datetime-edit-fields-wrapper {
    display: flex !important;
    justify-content: center !important;
  }
}

/* PATCH034 — complete mobile administration audit and stable permission editor. */

/* Permission editor: one semantic table, one header row, no nested option cards. */
#permission-member-dialog {
  overflow: hidden !important;
  background: rgba(7, 27, 45, .48) !important;
}
#permission-member-dialog .settings-dialog-card {
  display: grid !important;
  width: min(1040px, calc(100vw - 24px)) !important;
  max-width: min(1040px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  margin: 12px auto !important;
  overflow: hidden !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .settings-dialog-head {
  position: relative !important;
  inset: auto !important;
  z-index: 3 !important;
  display: block !important;
  min-width: 0 !important;
  border-bottom: 1px solid #e4edf2 !important;
  background: #fff !important;
  padding: 13px 16px 11px !important;
  transform: none !important;
}
#permission-member-dialog .settings-dialog-head > div {
  width: 100% !important;
  min-width: 0 !important;
}
#permission-member-dialog .settings-dialog-head h2 {
  margin: 3px 0 !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
}
#permission-member-dialog .settings-dialog-head p {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
}
#permission-member-dialog.settings-dialog--no-header-cancel .settings-dialog-cancel {
  display: none !important;
}
#permission-member-dialog .settings-dialog-body {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 11px 14px calc(15px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-editor,
#permission-member-dialog .permission-editor--dialog,
#permission-member-dialog .permission-module-section,
#permission-member-dialog .permission-module-grid,
#permission-member-dialog .permission-module-table-scroll,
#permission-member-dialog .permission-module-table-columns,
#permission-member-dialog .permission-module-table-pane {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-editor {
  display: block !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-editor-head,
#permission-member-dialog .permission-grant-context,
#permission-member-dialog .permission-section {
  margin: 0 0 9px !important;
}
#permission-member-dialog .permission-editor-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-editor-head > div {
  min-width: 0 !important;
}
#permission-member-dialog .permission-editor-head h2,
#permission-member-dialog .permission-editor-head p {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
#permission-member-dialog .permission-section {
  border: 1px solid #deebf1 !important;
  border-radius: 11px !important;
  background: #fff !important;
  padding: 10px !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-level-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 7px !important;
}
#permission-member-dialog .permission-level-heading h3 {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}
#permission-member-dialog .permission-level-heading p,
#permission-member-dialog .permission-zero-state {
  display: none !important;
}
#permission-member-dialog .permission-module-grid,
#permission-member-dialog .permission-module-table-columns,
#permission-member-dialog .permission-module-table-pane {
  display: block !important;
  grid-template-columns: none !important;
  column-gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
#permission-member-dialog .permission-module-table-scroll {
  display: block !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  border: 1px solid #dce8ee !important;
  border-radius: 9px !important;
  background: #fff !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-inline: contain !important;
}
#permission-member-dialog .permission-module-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #fff !important;
}
#permission-member-dialog .permission-module-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  height: 38px !important;
  border: 0 !important;
  border-bottom: 1px solid #d9e7ed !important;
  background: #f4f9fb !important;
  color: #365a70 !important;
  padding: 6px 4px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
#permission-member-dialog .permission-module-table thead th:first-child {
  width: 52% !important;
  padding-left: 10px !important;
  text-align: left !important;
}
#permission-member-dialog .permission-module-table thead th:not(:first-child) {
  width: 16% !important;
}
#permission-member-dialog .permission-module-card,
#permission-member-dialog .permission-module-row-group,
#permission-member-dialog .permission-module-row {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-module-row > th,
#permission-member-dialog .permission-module-row > td {
  min-width: 0 !important;
  min-height: 40px !important;
  border: 0 !important;
  border-bottom: 1px solid #e7eef2 !important;
  background: #fff !important;
  padding: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-module-row-group:nth-of-type(even) .permission-module-row > th,
#permission-member-dialog .permission-module-row-group:nth-of-type(even) .permission-module-row > td {
  background: #fbfdfe !important;
}
#permission-member-dialog .permission-module-name-cell {
  width: 52% !important;
  padding: 7px 10px !important;
  text-align: left !important;
}
#permission-member-dialog .permission-module-level-cell {
  width: 16% !important;
  border-left: 1px solid #edf2f5 !important;
  text-align: center !important;
}
#permission-member-dialog .permission-module-name {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px 6px !important;
}
#permission-member-dialog .permission-module-name > strong,
#permission-member-dialog .permission-module-name-cell strong {
  min-width: 0 !important;
  margin: 0 !important;
  color: #21445d !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
#permission-member-dialog .permission-module-current {
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff4d9 !important;
  padding: 2px 5px !important;
  color: #936214 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
#permission-member-dialog .permission-module-level-option,
#permission-member-dialog .permission-module-level-empty {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 39px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-module-level-option:hover,
#permission-member-dialog .permission-module-level-option.selected {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-module-level-option input[type="radio"] {
  display: block !important;
  width: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  flex: 0 0 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #168dbd !important;
}
#permission-member-dialog .permission-module-level-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
#permission-member-dialog .permission-module-level-empty {
  color: #aab8c2 !important;
  font-size: 13px !important;
}
#permission-member-dialog .permission-module-notes-row[hidden] {
  display: none !important;
}
#permission-member-dialog .permission-module-notes-row > td {
  border: 0 !important;
  border-bottom: 1px solid #e7eef2 !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-module-row-notes {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px 10px !important;
  border: 0 !important;
  background: #fbfdfe !important;
  padding: 5px 10px !important;
}
#permission-member-dialog .permission-module-required-note,
#permission-member-dialog .permission-module-custom-note {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff4d9 !important;
  padding: 2px 6px !important;
  color: #936214 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
#permission-member-dialog .permission-module-advanced {
  display: flex !important;
  min-width: 0 !important;
  flex: 1 1 260px !important;
  flex-wrap: wrap !important;
  gap: 5px 12px !important;
  margin: 0 !important;
}
#permission-member-dialog .permission-advanced-option {
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: 27px !important;
  align-items: center !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 2px 0 !important;
  color: #496579 !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-advanced-option input {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  margin: 0 !important;
}
#permission-member-dialog .permission-advanced-option strong {
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}
#permission-member-dialog .permission-save-bar {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 10px 0 0 !important;
  border: 1px solid #cde4f2 !important;
  border-radius: 11px !important;
  background: #f7fcff !important;
  padding: 9px 10px !important;
  box-shadow: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-save-bar > div {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
#permission-member-dialog .permission-save-bar .button {
  min-width: 0 !important;
  min-height: 38px !important;
}

/* A semantic native time input remains above a stable visual center layer. */
.leader-schedule-page .leader-time-input-shell {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 1px solid #cfe1eb !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
.leader-schedule-page .leader-time-input-shell [data-leader-time-input] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: transparent !important;
  opacity: .001 !important;
  padding: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.leader-schedule-page .leader-time-input-shell [data-leader-time-display] {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  width: 100% !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 42px !important;
  color: #173b55 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
.leader-schedule-page .leader-time-input-shell:focus-within {
  border-color: #2b9bd0 !important;
  box-shadow: 0 0 0 3px rgba(43, 155, 208, .12) !important;
}
.leader-schedule-page .leader-time-input-shell:has(input:disabled) {
  background: #f3f7f9 !important;
  opacity: .72 !important;
}

/* Unified mobile management containment. */
@media (max-width: 900px) {
  :root {
    --mobile-admin-gap: 10px;
    --mobile-admin-radius: 14px;
  }
  .app-shell,
  .app-shell *,
  dialog,
  dialog * {
    box-sizing: border-box;
  }
  html,
  body,
  #app,
  .app-shell,
  .app-shell > .main,
  .main,
  .content,
  .content.content--schedule {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html,
  body,
  #app {
    overflow-x: hidden !important;
  }
  body {
    min-height: 100dvh !important;
    overscroll-behavior-x: none !important;
  }
  .app-shell {
    min-height: 100dvh !important;
  }
  .app-shell > .main,
  .main {
    overflow-x: hidden !important;
  }
  .content,
  .content.content--schedule {
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    overflow-anchor: none !important;
  }
  .content > *,
  .content section,
  .content article,
  .content form,
  .content fieldset,
  .content .card,
  .content .title-row,
  .content .premium-title-row,
  .content .section-heading,
  .content .title-actions,
  .content .section-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls,
  .topbar.topbar--floating-controls {
    min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(7px + env(safe-area-inset-top, 0px)) 10px 7px !important;
    contain: layout paint !important;
  }
  .management-menu-toggle,
  .workspace-language-control .language-picker,
  .workspace-avatar-control .management-profile-button--avatar-only {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex: 0 0 auto !important;
  }
  .workspace-language-control .language-picker {
    width: 70px !important;
    max-width: 70px !important;
  }
  .management-sidebar {
    width: min(84vw, 310px) !important;
    max-width: min(84vw, 310px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .management-sidebar .nav button {
    min-height: 46px !important;
    height: auto !important;
    padding: 9px 11px !important;
  }
  .title-row,
  .premium-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 0 2px !important;
  }
  .title-row h1,
  .premium-title-row h1 {
    margin: 0 !important;
    font-size: clamp(21px, 6vw, 27px) !important;
    line-height: 1.16 !important;
  }
  .title-row p,
  .premium-title-row p {
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .title-actions,
  .section-actions,
  .hero-actions,
  .employee-header-actions,
  .attendance-page-actions,
  .schedule-heading-actions {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }
  .title-actions > *,
  .section-actions > *,
  .hero-actions > *,
  .employee-header-actions > *,
  .attendance-page-actions > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .card,
  .platform-hero,
  .dashboard-hero,
  .employee-command-card,
  .employee-list-card,
  .schedule-operations-card,
  .attendance-main-card,
  .payroll-main-card,
  .message-subpage-card,
  .audit-card,
  .organization-section-card {
    border-radius: var(--mobile-admin-radius) !important;
    padding: 13px !important;
  }
  .section-heading,
  .premium-section-heading {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 0 10px !important;
  }
  .section-heading h2,
  .premium-section-heading h2 {
    font-size: 16px !important;
  }
  .section-heading p,
  .premium-section-heading p {
    margin-top: 3px !important;
    line-height: 1.45 !important;
  }
  .organization-sections,
  .employee-records-layout,
  .employee-management-stack,
  .employee-directory-stack,
  .workforce-page-stack,
  .payroll-page-stack,
  .attendance-page-stack,
  .message-page-stack,
  .permission-directory-layout {
    gap: var(--mobile-admin-gap) !important;
  }
  .metric-grid,
  .employee-metric-grid,
  .platform-metrics,
  .dashboard-metrics,
  .overview-grid,
  .attendance-overview-grid,
  .billing-config-grid,
  .payment-channel-status-grid {
    gap: 8px !important;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    padding: 9px 10px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }
  button,
  .button {
    min-width: 0 !important;
    max-width: 100% !important;
    touch-action: manipulation !important;
  }
  label {
    min-width: 0 !important;
  }
  img,
  svg,
  canvas,
  video {
    max-width: 100% !important;
  }
  .table-wrap,
  .premium-table-wrap,
  .scalable-table-wrap,
  .employee-table-wrap,
  .schedule-table-wrap,
  .attendance-table-wrap,
  .payroll-table-wrap,
  .audit-table-wrap,
  .permission-account-table-wrap,
  .platform-organizations-table-wrap,
  .billing-record-table-wrap,
  .billing-receipt-table-wrap,
  .leader-table-scroll,
  .group-shift-table-wrap,
  .group-detail-table-wrap {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .data-pagination,
  .schedule-pagination,
  .attendance-pagination,
  .floating-table-footer {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 9px 0 0 !important;
    padding: 9px !important;
    transform: none !important;
  }
  .data-pagination-actions {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .compact-form,
  .settings-dialog-form,
  .platform-organization-edit-form,
  .data-command-grid,
  .attendance-command-grid,
  .schedule-filter-bar,
  .worker-registration-field-grid {
    gap: 9px !important;
  }
  .permission-scope-tree {
    position: static !important;
    top: auto !important;
    max-height: none !important;
  }
  .permission-tree-scroll {
    max-height: 230px !important;
  }
  .permission-account-toolbar {
    gap: 7px !important;
  }
  .permission-account-card {
    padding: 11px !important;
  }
  .permission-account-table-wrap {
    border-radius: 10px !important;
  }
  .permission-account-table {
    min-width: 720px !important;
  }

  dialog.settings-dialog,
  dialog[data-management-dialog],
  .settings-dialog,
  .employee-editor-dialog,
  .action-dialog,
  .platform-organization-edit-dialog {
    box-sizing: border-box !important;
    overscroll-behavior: contain !important;
  }
  dialog.settings-dialog,
  dialog[data-management-dialog],
  .settings-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(7, 27, 45, .45) !important;
  }
  .settings-dialog-card,
  .platform-organization-edit-dialog .settings-dialog-card {
    display: grid !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    margin: 8px auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
  .settings-dialog-head {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    min-width: 0 !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-bottom: 1px solid #e7eef2 !important;
    background: #fff !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 10px !important;
    transform: none !important;
  }
  .settings-dialog-head > div {
    min-width: 0 !important;
  }
  .settings-dialog-head h2 {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
  .settings-dialog-head p {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .settings-dialog-cancel {
    min-width: 64px !important;
    min-height: 38px !important;
    flex: 0 0 auto !important;
  }
  .settings-dialog-body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 11px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  .settings-dialog-actions,
  .settings-dialog-actions.wide,
  .employee-dialog-actions,
  .attendance-import-actions {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 8px 0 0 !important;
    padding: 9px 0 0 !important;
    transform: none !important;
  }
  .settings-dialog-actions .button,
  .employee-dialog-actions .button,
  .attendance-import-actions .button {
    flex: 1 1 120px !important;
  }
  .employee-editor-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .employee-dialog-card {
    display: grid !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    margin: 8px auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .employee-dialog-head {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 10px !important;
  }
  .employee-dialog-form {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 9px !important;
    padding: 11px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .action-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: auto !important;
  }
  .action-dialog__body {
    padding: 18px 16px 15px !important;
  }
  .management-profile-menu {
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  .leader-schedule-page .leader-main {
    padding-bottom: 14px !important;
  }
  .leader-schedule-page .leader-title-row {
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .leader-schedule-page .leader-title-row h1 {
    font-size: 26px !important;
  }
  .leader-schedule-page .leader-title-row .button {
    min-height: 38px !important;
  }
  .leader-schedule-page .leader-tool-tabs,
  .leader-schedule-page .leader-schedule-tabs {
    gap: 5px !important;
    margin-bottom: 10px !important;
    padding: 4px !important;
  }
  .leader-schedule-page .leader-tool-tabs button,
  .leader-schedule-page .leader-schedule-tabs button {
    min-height: 42px !important;
    padding: 0 8px !important;
  }
  .leader-schedule-page .leader-summary-card,
  .leader-schedule-page .leader-table-card {
    margin-bottom: 10px !important;
    border-radius: 14px !important;
    padding: 11px !important;
  }
  .leader-schedule-page .leader-summary-fields {
    gap: 8px !important;
  }
  .leader-schedule-page .leader-summary-field {
    min-width: 0 !important;
    min-height: 72px !important;
    border-radius: 12px !important;
    padding: 10px !important;
  }
  .leader-schedule-page .leader-summary-field--date {
    pointer-events: none !important;
  }
  .leader-schedule-page .leader-summary-field--date .qidian-date-control,
  .leader-schedule-page .leader-summary-field--date .qidian-date-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 230px !important;
    pointer-events: auto !important;
  }
  .leader-schedule-page .leader-count-grid {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    margin-top: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .leader-schedule-page .leader-count-button {
    min-width: 116px !important;
    min-height: 64px !important;
    flex: 0 0 116px !important;
    scroll-snap-align: start !important;
    border-radius: 12px !important;
    padding: 9px 10px !important;
  }
  .leader-schedule-page .leader-count-button span {
    font-size: 11px !important;
  }
  .leader-schedule-page .leader-count-button strong {
    font-size: 22px !important;
  }
  .leader-schedule-page .leader-table-heading {
    margin-bottom: 8px !important;
  }
  .leader-schedule-page .leader-self-table {
    min-width: 760px !important;
  }
  .leader-schedule-page .leader-self-table th,
  .leader-schedule-page .leader-self-table td {
    padding: 8px 9px !important;
  }
  .leader-schedule-page .leader-work-time-summary .leader-summary-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .leader-schedule-page .leader-work-time-summary .leader-summary-field--time {
    grid-column: 1 / -1 !important;
  }
  .leader-schedule-page .leader-time-push-panel {
    gap: 9px !important;
    margin-top: 9px !important;
    padding: 10px !important;
  }

  .attendance-page-actions {
    justify-content: stretch !important;
    align-items: stretch !important;
  }
  .attendance-page-actions .attendance-date-control,
  .attendance-page-actions .attendance-file-action {
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
  .attendance-page-actions .attendance-date-control {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    flex: 1 1 220px !important;
  }
  .attendance-page-actions .attendance-file-action {
    flex: 1 1 120px !important;
  }
  .attendance-page-actions .attendance-date-control .qidian-date-control,
  .attendance-page-actions .attendance-date-control .qidian-date-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 620px) {
  .content,
  .content.content--schedule {
    padding: 8px !important;
  }
  .card,
  .platform-hero,
  .dashboard-hero,
  .employee-command-card,
  .employee-list-card,
  .schedule-operations-card,
  .attendance-main-card,
  .payroll-main-card,
  .message-subpage-card,
  .audit-card,
  .organization-section-card {
    padding: 11px !important;
  }
  .compact-form,
  .settings-dialog-form,
  .platform-organization-edit-form,
  .data-command-grid,
  .attendance-command-grid,
  .schedule-filter-bar,
  .worker-registration-field-grid,
  .permission-site-grid,
  .permission-group-grid,
  .permission-role-scope {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .title-actions,
  .section-actions,
  .hero-actions,
  .employee-header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .title-actions .button,
  .section-actions .button,
  .hero-actions .button,
  .employee-header-actions .button {
    width: 100% !important;
  }
  .settings-dialog-card,
  .platform-organization-edit-dialog .settings-dialog-card,
  #permission-member-dialog .settings-dialog-card,
  .employee-dialog-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }
  #permission-member-dialog .settings-dialog-body {
    padding: 9px 9px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #permission-member-dialog .permission-section {
    padding: 8px !important;
  }
  #permission-member-dialog .permission-editor-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  #permission-member-dialog .permission-editor-head .badge {
    align-self: flex-start !important;
  }
  #permission-member-dialog .permission-save-bar {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  #permission-member-dialog .permission-save-bar > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  #permission-member-dialog .permission-save-bar .button {
    width: 100% !important;
  }
  .data-pagination {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .data-pagination-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .data-pagination-actions > span {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
  .leader-schedule-page .leader-work-time-summary .leader-summary-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .leader-schedule-page .leader-work-time-summary .leader-summary-field--time {
    grid-column: 1 !important;
  }
  .attendance-page-actions .attendance-date-control,
  .attendance-page-actions .attendance-file-action {
    flex: 1 1 100% !important;
  }
}

@media (max-width: 360px) {
  #permission-member-dialog .permission-module-table {
    width: 420px !important;
    min-width: 420px !important;
  }
  #permission-member-dialog .permission-module-table thead th:first-child,
  #permission-member-dialog .permission-module-name-cell {
    width: 210px !important;
  }
  #permission-member-dialog .permission-module-table thead th:not(:first-child),
  #permission-member-dialog .permission-module-level-cell {
    width: 70px !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls,
  .topbar.topbar--floating-controls {
    padding-inline: 7px !important;
  }
}

/* PATCH034 final release correction — remove the stale PATCH033 620px matrix
   constraint, anchor every mobile management dialog to the visual viewport,
   and keep attendance controls on one consistent 42px rhythm. */
#permission-member-dialog .permission-module-table-columns:nth-child(n),
#permission-member-dialog .permission-module-table-pane:nth-child(n),
#permission-member-dialog .permission-module-table:nth-child(n) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
#permission-member-dialog .permission-module-table-columns:nth-child(n) {
  display: block !important;
  grid-template-columns: none !important;
}
#permission-member-dialog .permission-module-table-scroll {
  overflow-x: hidden !important;
}
@media (max-width: 360px) {
  #permission-member-dialog .permission-module-table:nth-child(n) {
    width: 100% !important;
    min-width: 0 !important;
  }
  #permission-member-dialog .permission-module-table thead th:first-child,
  #permission-member-dialog .permission-module-name-cell {
    width: 52% !important;
  }
  #permission-member-dialog .permission-module-table thead th:not(:first-child),
  #permission-member-dialog .permission-module-level-cell {
    width: 16% !important;
  }
}

@media (max-width: 900px) {
  dialog.settings-dialog,
  dialog[data-management-dialog],
  dialog.action-dialog,
  dialog.employee-editor-dialog,
  dialog.platform-organization-edit-dialog {
    position: fixed !important;
    inset: 0 !important;
    translate: none !important;
  }
  .attendance-page-actions > .button,
  .attendance-page-actions > button,
  .attendance-page-actions .attendance-file-action,
  .attendance-page-actions .attendance-date-control {
    min-height: 42px !important;
    height: 42px !important;
  }
}

/* PATCH035 — permission dialog, avatar touch, personal cumulative values,
   and a static dashboard site label. */

/* The homepage site label is informational only. */
.dashboard-site-scope--static {
  cursor: default !important;
  pointer-events: none !important;
  user-select: text !important;
  touch-action: auto !important;
}
.dashboard-site-scope--static:hover,
.dashboard-site-scope--static:focus,
.dashboard-site-scope--static:active {
  border-color: inherit !important;
  background: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Cumulative values are employee-level values. No all-employee cumulative
   total is rendered above the table. */
.cumulative-summary-pills--personal {
  min-width: 0 !important;
}
.cumulative-summary-pills--personal:empty {
  display: none !important;
}

/* Permission editor: fixed header, independently scrolling content, and an
   always-visible action footer. */
#permission-member-dialog {
  overflow: hidden !important;
}
#permission-member-dialog .settings-dialog-card {
  display: grid !important;
  width: min(980px, calc(100vw - 16px)) !important;
  max-width: min(980px, calc(100vw - 16px)) !important;
  height: min(880px, calc(100dvh - 16px)) !important;
  max-height: calc(100dvh - 16px) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  margin: 8px auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .settings-dialog-head {
  position: relative !important;
  z-index: 3 !important;
  min-width: 0 !important;
  border-bottom: 1px solid #e2ebf0 !important;
  background: #fff !important;
  padding: 11px 14px 9px !important;
}
#permission-member-dialog .settings-dialog-head > div,
#permission-member-dialog .settings-dialog-head h2,
#permission-member-dialog .settings-dialog-head p {
  min-width: 0 !important;
  max-width: 100% !important;
}
#permission-member-dialog .settings-dialog-head h2 {
  margin: 2px 0 !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
}
#permission-member-dialog .settings-dialog-head p {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
#permission-member-dialog.settings-dialog--no-header-cancel .settings-dialog-cancel {
  display: none !important;
}
#permission-member-dialog .settings-dialog-body {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 10px 10px !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .settings-dialog-footer {
  position: relative !important;
  z-index: 9 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-top: 1px solid #dce8ee !important;
  background: rgba(255, 255, 255, .98) !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -7px 18px rgba(28, 74, 99, .07) !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
#permission-member-dialog .permission-save-bar--dialog-footer {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-save-bar--dialog-footer > strong {
  min-width: 0 !important;
  color: #61788a !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
#permission-member-dialog .permission-save-bar--dialog-footer > div {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
#permission-member-dialog .permission-save-bar--dialog-footer .button {
  min-width: 112px !important;
  min-height: 40px !important;
}

/* Compact the account and scope blocks without reducing their readable type. */
#permission-member-dialog .permission-editor,
#permission-member-dialog .permission-editor--dialog,
#permission-member-dialog .permission-module-section,
#permission-member-dialog .permission-module-grid,
#permission-member-dialog .permission-module-table-scroll,
#permission-member-dialog .permission-module-table-columns,
#permission-member-dialog .permission-module-table-pane {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-editor {
  display: block !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-editor-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-editor-head > div {
  min-width: 0 !important;
}
#permission-member-dialog .permission-editor-head h2 {
  margin: 1px 0 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}
#permission-member-dialog .permission-editor-head p {
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}
#permission-member-dialog .permission-editor-head > .badge {
  flex: 0 0 auto !important;
  max-width: 44% !important;
  white-space: normal !important;
  text-align: center !important;
}
#permission-member-dialog .permission-grant-context {
  display: none !important;
}
#permission-member-dialog .permission-section {
  margin: 0 0 7px !important;
  border: 1px solid #deebf1 !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 8px !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-section:last-child {
  margin-bottom: 0 !important;
}
#permission-member-dialog .permission-scope-card > .section-heading,
#permission-member-dialog .permission-level-heading {
  min-width: 0 !important;
  margin: 0 0 5px !important;
}
#permission-member-dialog .permission-level-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
#permission-member-dialog .permission-level-heading h3,
#permission-member-dialog .permission-scope-card h3 {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}
#permission-member-dialog .permission-level-heading p,
#permission-member-dialog .permission-zero-state {
  display: none !important;
}
#permission-member-dialog .permission-role-scope {
  gap: 6px !important;
}
#permission-member-dialog .permission-role-scope label {
  min-width: 0 !important;
}
#permission-member-dialog .permission-role-scope select {
  width: 100% !important;
  max-width: 100% !important;
}
#permission-member-dialog .permission-scope-subtitle {
  min-height: 20px !important;
  margin: 6px 0 3px !important;
}
#permission-member-dialog .permission-leader-scope-note {
  margin: 3px 0 5px !important;
  padding: 5px 7px !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
}
#permission-member-dialog .permission-site-grid,
#permission-member-dialog .permission-group-grid {
  display: grid !important;
  min-width: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid #e2ebf0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}
#permission-member-dialog .permission-site-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
#permission-member-dialog .permission-group-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-height: 132px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
#permission-member-dialog .permission-site-option,
#permission-member-dialog .permission-group-option {
  display: flex !important;
  min-width: 0 !important;
  min-height: 34px !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid #edf2f5 !important;
  border-bottom: 1px solid #edf2f5 !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 5px 7px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-site-option:has(input:checked),
#permission-member-dialog .permission-group-option:has(input:checked) {
  border-color: #edf2f5 !important;
  background: #eef8fc !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-site-option input,
#permission-member-dialog .permission-group-option input {
  flex: 0 0 auto !important;
}
#permission-member-dialog .permission-site-option span,
#permission-member-dialog .permission-group-option span {
  min-width: 0 !important;
}
#permission-member-dialog .permission-site-option strong,
#permission-member-dialog .permission-group-option strong {
  display: block !important;
  min-width: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#permission-member-dialog .permission-site-option small {
  display: block !important;
  font-size: 9.5px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

/* One vertical permission matrix. There are no per-module cards or selection
   boxes; the three radio columns remain visible at every supported language. */
#permission-member-dialog .permission-module-section {
  overflow: hidden !important;
}
#permission-member-dialog .permission-module-grid,
#permission-member-dialog .permission-module-table-columns,
#permission-member-dialog .permission-module-table-pane {
  display: block !important;
  grid-template-columns: none !important;
  column-gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
#permission-member-dialog .permission-module-table-scroll {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  border: 1px solid #dce8ee !important;
  border-radius: 8px !important;
  background: #fff !important;
}
#permission-member-dialog .permission-module-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #fff !important;
}
#permission-member-dialog .permission-module-name-col,
#permission-member-dialog .permission-module-table thead th:first-child,
#permission-member-dialog .permission-module-name-cell {
  width: 34% !important;
}
#permission-member-dialog .permission-module-level-col,
#permission-member-dialog .permission-module-table thead th:not(:first-child),
#permission-member-dialog .permission-module-level-cell {
  width: 22% !important;
}
#permission-member-dialog .permission-module-table thead th {
  position: static !important;
  height: 34px !important;
  border: 0 !important;
  border-bottom: 1px solid #d9e7ed !important;
  background: #f4f9fb !important;
  color: #365a70 !important;
  padding: 4px 2px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-module-table thead th:first-child {
  padding-left: 7px !important;
  text-align: left !important;
}
#permission-member-dialog .permission-module-card,
#permission-member-dialog .permission-module-row-group,
#permission-member-dialog .permission-module-row {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-module-row > th,
#permission-member-dialog .permission-module-row > td {
  min-width: 0 !important;
  min-height: 38px !important;
  border: 0 !important;
  border-bottom: 1px solid #e7eef2 !important;
  background: #fff !important;
  padding: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-module-row-group:nth-of-type(even) .permission-module-row > th,
#permission-member-dialog .permission-module-row-group:nth-of-type(even) .permission-module-row > td {
  background: #fbfdfe !important;
}
#permission-member-dialog .permission-module-name-cell {
  padding: 6px 7px !important;
  text-align: left !important;
}
#permission-member-dialog .permission-module-name {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 2px 4px !important;
}
#permission-member-dialog .permission-module-name > strong,
#permission-member-dialog .permission-module-name-cell strong {
  min-width: 0 !important;
  margin: 0 !important;
  color: #21445d !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
}
#permission-member-dialog .permission-module-current {
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff4d9 !important;
  padding: 1px 4px !important;
  color: #936214 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}
#permission-member-dialog .permission-module-level-cell {
  border-left: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
#permission-member-dialog .permission-module-level-option,
#permission-member-dialog .permission-module-level-option:hover,
#permission-member-dialog .permission-module-level-option.selected {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  place-items: center !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  box-shadow: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-module-level-option input[type="radio"] {
  display: block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 auto !important;
  flex: 0 0 18px !important;
  accent-color: #219fcf !important;
}
#permission-member-dialog .permission-module-level-text {
  display: none !important;
}
#permission-member-dialog .permission-module-level-empty {
  display: grid !important;
  min-height: 38px !important;
  place-items: center !important;
  color: #9cb0bc !important;
  font-size: 12px !important;
}
#permission-member-dialog .permission-module-notes-row > td {
  border: 0 !important;
  border-bottom: 1px solid #e7eef2 !important;
  background: #fff !important;
  padding: 0 !important;
}
#permission-member-dialog .permission-module-row-notes {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 4px 7px !important;
}
#permission-member-dialog .permission-module-advanced {
  display: flex !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
#permission-member-dialog .permission-advanced-option {
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 2px 0 !important;
  box-shadow: none !important;
}
#permission-member-dialog .permission-advanced-option input {
  flex: 0 0 auto !important;
}
#permission-member-dialog .permission-advanced-option strong {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

/* Restore a reliable touch and click layer for the management avatar. */
@media (max-width: 900px) {
  .app-shell > .main > .topbar.topbar--floating-controls,
  .topbar.topbar--floating-controls {
    contain: none !important;
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
    pointer-events: auto !important;
  }
  .app-shell > .main > .topbar.topbar--floating-controls .workspace-floating-controls,
  .workspace-language-control,
  .workspace-avatar-control,
  .workspace-avatar-control .management-profile-wrap,
  .workspace-avatar-control .management-profile-button--avatar-only,
  #management-profile-toggle {
    overflow: visible !important;
    pointer-events: auto !important;
  }
  .workspace-language-control {
    position: relative !important;
    z-index: 2 !important;
  }
  .workspace-avatar-control {
    position: relative !important;
    z-index: 4 !important;
  }
  .workspace-avatar-control .management-profile-wrap {
    position: relative !important;
    z-index: 5003 !important;
  }
  .workspace-avatar-control .management-profile-button--avatar-only,
  #management-profile-toggle {
    position: relative !important;
    z-index: 5005 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  .workspace-avatar-control .management-profile-backdrop {
    z-index: 5001 !important;
  }
  .workspace-avatar-control .management-profile-menu {
    z-index: 5006 !important;
  }
  #management-profile-backdrop:not(.is-open) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #permission-member-dialog .settings-dialog-card {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    margin: 4px auto !important;
    border-radius: 13px !important;
  }
  #permission-member-dialog .settings-dialog-head {
    padding: 9px 10px 7px !important;
  }
  #permission-member-dialog .settings-dialog-head h2 {
    font-size: 18px !important;
  }
  #permission-member-dialog .settings-dialog-body {
    padding: 7px 7px 8px !important;
  }
  #permission-member-dialog .settings-dialog-footer {
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #permission-member-dialog .permission-save-bar--dialog-footer > strong {
    display: none !important;
  }
  #permission-member-dialog .permission-save-bar--dialog-footer > div {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  #permission-member-dialog .permission-save-bar--dialog-footer .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
  }
  #permission-member-dialog .permission-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 122px !important;
  }
}

@media (max-width: 340px) {
  #permission-member-dialog .permission-editor-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  #permission-member-dialog .permission-editor-head > .badge {
    max-width: 115px !important;
    font-size: 9.5px !important;
  }
  #permission-member-dialog .permission-group-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #permission-member-dialog .permission-module-name-col,
  #permission-member-dialog .permission-module-table thead th:first-child,
  #permission-member-dialog .permission-module-name-cell {
    width: 34% !important;
  }
  #permission-member-dialog .permission-module-level-col,
  #permission-member-dialog .permission-module-table thead th:not(:first-child),
  #permission-member-dialog .permission-module-level-cell {
    width: 22% !important;
  }
  #permission-member-dialog .permission-module-table thead th {
    font-size: 10.5px !important;
  }
  #permission-member-dialog .permission-module-name > strong,
  #permission-member-dialog .permission-module-name-cell strong {
    font-size: 11.5px !important;
  }
}

/* PATCH035 final viewport geometry — the permission dialog itself owns the
   viewport at every width, so landscape phones and small tablets cannot place
   the footer below the visible screen. */
#permission-member-dialog {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#permission-member-dialog[open] {
  display: grid !important;
  place-items: center !important;
}
#permission-member-dialog .settings-dialog-card {
  width: min(980px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  height: min(880px, calc(100dvh - 16px)) !important;
  max-height: calc(100dvh - 16px) !important;
  margin: 0 !important;
}
#permission-member-dialog .permission-module-name-col,
#permission-member-dialog .permission-module-table thead th:first-child,
#permission-member-dialog .permission-module-name-cell {
  width: 34% !important;
}
#permission-member-dialog .permission-module-level-col,
#permission-member-dialog .permission-module-table thead th:not(:first-child),
#permission-member-dialog .permission-module-level-cell {
  width: 22% !important;
}

/* Make the account popover become visible in the same interaction frame. The
   transition animates opacity and position only; visibility is not delayed. */
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu.is-open,
.workspace-avatar-control .management-profile-menu.is-open,
#management-profile-menu.is-open {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity .16s ease, transform .16s ease !important;
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu:not(.is-open),
.workspace-avatar-control .management-profile-menu:not(.is-open),
#management-profile-menu:not(.is-open) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  #permission-member-dialog .settings-dialog-card {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    margin: 0 !important;
  }
}

@media (max-width: 340px) {
  #permission-member-dialog .permission-module-name-col,
  #permission-member-dialog .permission-module-table thead th:first-child,
  #permission-member-dialog .permission-module-name-cell {
    width: 34% !important;
  }
  #permission-member-dialog .permission-module-level-col,
  #permission-member-dialog .permission-module-table thead th:not(:first-child),
  #permission-member-dialog .permission-module-level-cell {
    width: 22% !important;
  }
}
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu.is-open,
.workspace-avatar-control .management-profile-menu.is-open,
#management-profile-menu.is-open {
  animation: none !important;
}
/* PATCH035 avatar reliability: opening the account menu must be immediate on
   touch devices; no transition frame may leave a clickable but transparent menu. */
.app-shell > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu.is-open,
.workspace-avatar-control .management-profile-menu.is-open,
#management-profile-menu.is-open {
  transition: none !important;
  opacity: 1 !important;
}

/* PATCH038 — audited leader workspace shell.
   Keep the three management controls floating, remove the redundant leader
   title block, and use one compact group/date context card in both tabs. */
.app-shell--leader-schedule .leader-schedule-page .leader-main {
  padding-top: 0 !important;
}
.app-shell--leader-schedule .leader-schedule-page .leader-schedule-tabs {
  margin-top: 0 !important;
}
.management-menu-toggle--settings {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 76px !important;
  padding: 0 12px !important;
}
.management-menu-toggle--settings > span {
  display: none !important;
}
.management-menu-toggle--settings strong {
  display: inline !important;
  color: #187fa7 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.management-menu-settings-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  fill: #2187ad !important;
}
.leader-schedule-page .leader-summary-card {
  padding: 14px !important;
}
.leader-schedule-page .leader-group-date-card {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1.35fr) 1px minmax(112px, .65fr) !important;
  align-items: stretch !important;
  overflow: hidden !important;
  border: 1px solid #dfe9ef !important;
  border-radius: 13px !important;
  background: #f8fbfd !important;
  box-shadow: none !important;
}
.leader-schedule-page .leader-group-date-divider {
  width: 1px !important;
  min-width: 1px !important;
  align-self: stretch !important;
  background: #e1eaf0 !important;
}
.leader-schedule-page .leader-group-date-item {
  display: flex !important;
  min-width: 0 !important;
  min-height: 66px !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 10px 13px !important;
}
.leader-schedule-page .leader-group-date-item > span,
.leader-schedule-page .leader-work-time-card > span:first-child {
  color: #778799 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}
.leader-schedule-page .leader-group-date-value {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
}
.leader-schedule-page .leader-group-date-value > strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #203d53 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.leader-schedule-page .leader-group-date-value select,
.leader-schedule-page .leader-group-date-value .qidian-date-control,
.leader-schedule-page .leader-group-date-value .qidian-date-trigger {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.leader-schedule-page .leader-group-date-value select {
  padding: 0 25px 0 0 !important;
  color: #203d53 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
}
.leader-schedule-page .leader-group-date-item--date .leader-group-date-value,
.leader-schedule-page .leader-group-date-item--date .qidian-date-trigger {
  justify-content: flex-end !important;
}
.leader-schedule-page .leader-group-date-item--date .qidian-date-trigger {
  gap: 7px !important;
  padding: 0 !important;
  color: #1687b7 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
  white-space: nowrap !important;
}
.leader-schedule-page .leader-group-date-item--date .qidian-date-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}
.leader-schedule-page .leader-work-time-card {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 240px) !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 12px !important;
  border: 1px solid #dfe9ef !important;
  border-radius: 13px !important;
  background: #f8fbfd !important;
  padding: 11px 13px !important;
}
.leader-schedule-page .leader-work-time-card > span:first-child {
  color: #50677a !important;
  font-size: 13px !important;
}
.leader-schedule-page .leader-work-time-card .leader-time-input-shell {
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid #d4e3ea !important;
  border-radius: 10px !important;
  background: #fff !important;
}

@media (max-width: 900px) {
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls {
    position: fixed !important;
    inset: calc(env(safe-area-inset-top, 0px) + 8px) 8px auto 8px !important;
    z-index: 760 !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: none !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .management-menu-toggle--settings,
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
    pointer-events: auto !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .management-menu-toggle--settings {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-width: 76px !important;
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid rgba(202, 222, 232, .95) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .96) !important;
    padding: 0 12px !important;
    box-shadow: 0 7px 20px rgba(29, 73, 99, .13) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker,
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button--avatar-only {
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid rgba(202, 222, 232, .95) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 7px 20px rgba(29, 73, 99, .13) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker {
    width: 68px !important;
    min-width: 68px !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button--avatar-only {
    width: 42px !important;
    min-width: 42px !important;
  }
  .app-shell--leader-schedule .content.content--leader-schedule {
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
  }
  .leader-schedule-page .leader-main {
    padding-bottom: 18px !important;
  }
  .leader-schedule-page .leader-schedule-tabs {
    margin-bottom: 10px !important;
  }
  .leader-schedule-page .leader-summary-card {
    padding: 10px !important;
  }
  .leader-schedule-page .leader-group-date-card {
    grid-template-columns: minmax(0, 1.2fr) 1px minmax(108px, .8fr) !important;
  }
  .leader-schedule-page .leader-group-date-item {
    min-height: 60px !important;
    padding: 8px 10px !important;
  }
  .leader-schedule-page .leader-group-date-value > strong,
  .leader-schedule-page .leader-group-date-value select,
  .leader-schedule-page .leader-group-date-item--date .qidian-date-trigger {
    font-size: 15px !important;
  }
  .leader-schedule-page .leader-work-time-card {
    grid-template-columns: minmax(0, .8fr) minmax(150px, 1.2fr) !important;
    gap: 8px !important;
    margin-top: 9px !important;
    padding: 9px 10px !important;
  }
}

@media (max-width: 360px) {
  .management-menu-toggle--settings {
    min-width: 68px !important;
    padding-inline: 10px !important;
  }
  .management-menu-toggle--settings strong {
    font-size: 12px !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker {
    width: 62px !important;
    min-width: 62px !important;
  }
  .leader-schedule-page .leader-group-date-card {
    grid-template-columns: minmax(0, 1.12fr) 1px minmax(102px, .88fr) !important;
  }
  .leader-schedule-page .leader-group-date-item {
    padding-inline: 8px !important;
  }
  .leader-schedule-page .leader-group-date-value > strong,
  .leader-schedule-page .leader-group-date-value select,
  .leader-schedule-page .leader-group-date-item--date .qidian-date-trigger {
    font-size: 14px !important;
  }
  .leader-schedule-page .leader-work-time-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* PATCH039 — mobile management controls match the worker registration portal.
   The leader workspace uses the same icon-only menu, language selector and
   circular avatar geometry as the registration page. */
.management-menu-settings-icon,
.management-menu-toggle--settings strong {
  display: none !important;
}

@media (max-width: 900px) {
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls {
    inset: calc(env(safe-area-inset-top, 0px) + 10px) 12px auto 12px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 10px !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .management-menu-toggle {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    place-items: center !important;
    border: 1px solid #cceaf5 !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .96) !important;
    padding: 0 !important;
    color: #168dbd !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 22px rgba(35, 92, 119, .13) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    pointer-events: auto !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .management-menu-toggle > span {
    display: none !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-floating-controls {
    gap: 10px !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-language-control,
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-avatar-control {
    height: 44px !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker {
    width: auto !important;
    min-width: 68px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #168dbd !important;
    padding: 0 7px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-language-control .language-picker select {
    width: auto !important;
    min-width: 42px !important;
    max-width: 80px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 4px !important;
    color: #168dbd !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-align-last: center !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button--avatar-only {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    overflow: hidden !important;
    border: 2px solid #cceaf5 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #168dbd !important;
    padding: 0 !important;
    box-shadow: 0 8px 22px rgba(35, 92, 119, .13) !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-button--avatar-only .avatar {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    flex: 0 0 100% !important;
    border-radius: 50% !important;
  }
  .app-shell--leader-schedule > .main > .topbar.topbar--floating-controls .workspace-avatar-control .management-profile-menu {
    top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
    right: 0 !important;
  }
  .app-shell--leader-schedule .content.content--leader-schedule {
    padding-top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
  }
}

/* PATCH040 — hide floating management controls while the mobile drawer is open,
   and keep new-team entry focused on the Chinese source name. */
.group-localization-note--chinese-only {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  border-color: #cfe8f3 !important;
  background: #f2fbff !important;
}
.group-localization-note--chinese-only strong { color: #177fa8 !important; }

@media (max-width: 900px) {
  .topbar.topbar--floating-controls.is-drawer-suppressed,
  .app-shell.management-sidebar-open > .main > .topbar.topbar--floating-controls {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
  }
  .topbar.topbar--floating-controls.is-drawer-suppressed *,
  .app-shell.management-sidebar-open > .main > .topbar.topbar--floating-controls * {
    pointer-events: none !important;
  }
}

/* Existing operation guide: current trilingual chapters. */
.operation-guide-page { display: grid; width: min(100%, 1180px); min-width: 0; gap: 16px; margin: 0 auto; }
.operation-guide-page *, .operation-guide-page *::before, .operation-guide-page *::after { box-sizing: border-box; }
.operation-guide-page > *, .operation-guide-page details, .operation-guide-page summary { min-width: 0; }
.operation-guide-page [id] { scroll-margin-top: 100px; }
.operation-guide-hero { padding: 24px; border: 1px solid #cfe6f4; background: linear-gradient(145deg, #f8fcff, #edf8fe); }
.operation-guide-hero-copy { display: grid; gap: 8px; min-width: 0; }
.operation-guide-hero-copy > span { color: #1598cc; font-size: 13px; font-weight: 800; }
.operation-guide-hero h1 { margin: 0; color: #173b58; font-size: clamp(24px, 3vw, 36px); }
.operation-guide-hero p { margin: 0; color: #617b90; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.operation-guide-jumps { padding: 16px; }
.operation-guide-jumps > strong { display: block; margin-bottom: 12px; color: #355c77; font-size: 13px; }
.operation-guide-jumps > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.operation-guide-jumps a { min-width: 0; padding: 9px 11px; border: 1px solid #d6e8f3; border-radius: 10px; color: #36708f; background: #f7fbfe; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; text-decoration: none; }
.operation-guide-jumps a:hover, .operation-guide-jumps a:focus-visible { background: #eaf8fe; border-color: #3db0df; }
.operation-guide-sections { display: grid; gap: 12px; }
.operation-guide-section { display: block; padding: 0; border: 1px solid #d8e8f2; }
.operation-guide-section > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 16px; list-style: none; }
.operation-guide-section > summary::-webkit-details-marker { display: none; }
.operation-guide-section > summary > span { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #168bb6; background: #edf8fd; font-size: 12px; font-weight: 800; }
.operation-guide-section > summary::after { content: '+'; margin-left: auto; flex: 0 0 18px; color: #36708f; font-size: 22px; }
.operation-guide-section[open] > summary::after { content: '−'; }
.operation-guide-section h2 { margin: 0; min-width: 0; color: #244a66; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.operation-guide-rule-list { margin: 0; padding: 0 16px 16px; }
.operation-guide-rule-list > div { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 18px; border-top: 1px solid #e8f0f5; padding: 14px 0; }
.operation-guide-rule-list dt { font-weight: 750; color: #315872; }
.operation-guide-rule-list dd { margin: 0; color: #526c80; }
.operation-guide-rule-list dt, .operation-guide-rule-list dd { min-width: 0; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.operation-guide-section > h3 { margin: 0 16px 10px; font-size: 14px; color: #315872; }
.operation-guide-permission-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 16px 16px; list-style: none; }
.operation-guide-permission-nodes li { padding: 9px 11px; border-radius: 9px; background: #f3f9fc; color: #526c80; font-size: 13px; overflow-wrap: anywhere; }
.operation-guide-footer { padding: 2px 12px 8px; color: #617b90; font-size: 12px; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 1040px) { .operation-guide-jumps > div, .operation-guide-permission-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .operation-guide-page { gap: 12px; }
  .operation-guide-hero { padding: 18px 16px; }
  .operation-guide-jumps > div, .operation-guide-permission-nodes { grid-template-columns: 1fr; }
  .operation-guide-section > summary { gap: 9px; padding: 14px; }
  .operation-guide-section h2 { font-size: 15px; }
  .operation-guide-rule-list > div { grid-template-columns: 1fr; gap: 4px; }
}

/* PATCH042 — give permission names readable breathing room and make the
   attendance-review source-of-truth rule visible without widening the page. */
#permission-member-dialog .permission-module-table thead th:first-child {
  padding: 7px 12px !important;
}
#permission-member-dialog .permission-module-name-cell {
  padding: 8px 12px !important;
}
#permission-member-dialog .permission-module-row-notes {
  padding: 6px 12px !important;
}
.attendance-review-authority-note {
  display: block;
  width: 100%;
  flex: 1 0 100%;
  color: #6d8291;
  font-size: 9.5px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* PATCH043 — permission-name cell spacing must remain visibly separated from
   every table boundary even after legacy mobile/table overrides. */
#permission-member-dialog .permission-module-table thead > tr > th:first-child {
  padding: 11px 18px !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-module-table tbody.permission-module-row-group > tr.permission-module-row > th.permission-module-name-cell {
  padding: 10px 18px !important;
  box-sizing: border-box !important;
}
#permission-member-dialog .permission-module-name-cell > .permission-module-name {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  padding: 2px 0 !important;
  box-sizing: border-box !important;
}

#permission-member-dialog .permission-module-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#permission-member-dialog .permission-module-quick-actions button {
  border: 0;
  background: transparent;
  color: #2878ad;
  padding: 0;
  font-size: 9px;
  cursor: pointer;
}
#permission-member-dialog .permission-module-quick-actions button:hover { text-decoration: underline; }
#permission-member-dialog .permission-template-bar small { flex-basis: 100%; color: #71889b; }
#permission-member-dialog .permission-effective-preview p { margin: 6px 0; color: #496b83; font-size: 10px; line-height: 1.55; }
#permission-member-dialog .permission-site-scope-note { padding: 7px 9px; border-radius: 8px; background: #eef7ff; color: #285f88; }
#permission-member-dialog .permission-effective-scope-list { display: grid; gap: 5px; margin: 8px 0; padding: 0; list-style: none; }
#permission-member-dialog .permission-effective-scope-list li { display: grid; grid-template-columns: minmax(110px, .85fr) minmax(0, 1.15fr); gap: 8px; align-items: baseline; color: #496b83; font-size: 10px; line-height: 1.45; }
#permission-member-dialog .permission-effective-scope-list span { color: #71879a; overflow-wrap: anywhere; }
#permission-member-dialog .permission-diff-preview ul { margin: 0; padding-left: 18px; color: #496b83; font-size: 10px; line-height: 1.65; }
#permission-member-dialog [data-permission-diff-preview][data-has-sensitive-changes="true"] { border-left: 3px solid #d77b43; padding-left: 10px; color: #8d4c28; }
#permission-member-dialog .permission-advanced-option small { display: block; margin-top: 3px; color: #768da0; font-weight: 500; }
#permission-member-dialog .permission-module-notes-row > td > .permission-module-row-notes {
  padding: 8px 18px !important;
  box-sizing: border-box !important;
}

/* PATCH044 — operation guide text-flow hardening and refined mobile leader roster.
   Text must always expand naturally in CN / EN / ES.  The mobile leader page
   keeps the self-owned workflow but replaces the cramped seven-column phone
   view with a clear, compact status list. */
.operation-guide-page :where(h1, h2, h3, p, dt, dd, li, strong, em, a, th, td) {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto;
}
.operation-guide-page :where(.operation-guide-hero, .operation-guide-flow, .operation-guide-section, .operation-guide-status, .operation-guide-checklist),
.operation-guide-flow article,
.operation-guide-checklist article,
.operation-guide-rule-list > div,
.operation-guide-section > header,
.operation-guide-note {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.operation-guide-flow article > div,
.operation-guide-section > header > div,
.operation-guide-rule-list dd,
.operation-guide-note span {
  min-width: 0 !important;
}
.operation-guide-flow article strong,
.operation-guide-section h2,
.operation-guide-checklist h3 {
  line-height: 1.5 !important;
}
.operation-guide-flow article p,
.operation-guide-section header p,
.operation-guide-rule-list dt,
.operation-guide-rule-list dd,
.operation-guide-note span,
.operation-guide-checklist li,
.operation-guide-status th,
.operation-guide-status td {
  line-height: 1.72 !important;
}
.operation-guide-rule-list > div {
  align-items: start !important;
}
.operation-guide-checklist ul {
  align-content: start !important;
}

.leader-schedule-page .leader-mobile-roster {
  display: none !important;
}

@media (max-width: 700px) {
  .operation-guide-page {
    gap: 11px !important;
  }
  .operation-guide-hero,
  .operation-guide-flow,
  .operation-guide-section,
  .operation-guide-status,
  .operation-guide-checklist {
    border-radius: 16px !important;
    padding: 15px !important;
  }
  .operation-guide-section {
    gap: 12px !important;
  }
  .operation-guide-section > header {
    align-items: flex-start !important;
    gap: 10px !important;
    padding-bottom: 11px !important;
  }
  .operation-guide-section > header > span {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }
  .operation-guide-rule-list > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 10px 0 !important;
  }
  .operation-guide-rule-list dt {
    font-size: 12.5px !important;
  }
  .operation-guide-rule-list dd,
  .operation-guide-flow article p,
  .operation-guide-checklist li,
  .operation-guide-note span {
    font-size: 11.5px !important;
  }
  .operation-guide-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .operation-guide-status table,
  .operation-guide-status tbody {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
  }
  .operation-guide-status thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  .operation-guide-status tbody tr {
    display: grid !important;
    min-width: 0 !important;
    gap: 6px !important;
    border: 1px solid #dce9f1 !important;
    border-radius: 12px !important;
    background: #fbfdff !important;
    padding: 11px 12px !important;
  }
  .operation-guide-status tbody th,
  .operation-guide-status tbody td {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }
  .operation-guide-status tbody th {
    color: #28536e !important;
    font-size: 13px !important;
  }
  .operation-guide-status tbody td + td {
    border-top: 1px dashed #e4edf3 !important;
    padding-top: 6px !important;
  }

  .leader-schedule-page .leader-main {
    display: grid !important;
    gap: 11px !important;
    padding-bottom: 18px !important;
  }
  .leader-schedule-page .leader-schedule-tabs,
  .leader-schedule-page .leader-tool-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
    border: 1px solid rgba(199, 221, 232, .92) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .9) !important;
    padding: 4px !important;
    box-shadow: 0 8px 24px rgba(40, 86, 112, .07) !important;
  }
  .leader-schedule-page .leader-schedule-tabs button,
  .leader-schedule-page .leader-tool-tabs button {
    min-height: 42px !important;
    border-radius: 12px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .leader-schedule-page .leader-summary-card,
  .leader-schedule-page .leader-table-card {
    border-color: #dbe8ef !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(40, 86, 112, .065) !important;
  }
  .leader-schedule-page .leader-summary-card {
    padding: 10px !important;
  }
  .leader-schedule-page .leader-group-date-card {
    border-color: #dbe8ef !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #fbfdff 0%, #f3f9fc 100%) !important;
  }
  .leader-schedule-page .leader-group-date-item {
    min-height: 58px !important;
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  .leader-schedule-page .leader-group-date-value > strong,
  .leader-schedule-page .leader-group-date-value select,
  .leader-schedule-page .leader-group-date-item--date .qidian-date-trigger {
    font-size: 14.5px !important;
  }
  .leader-schedule-page .leader-count-grid {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    margin-top: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 1px 6px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .leader-schedule-page .leader-count-grid::-webkit-scrollbar {
    display: none !important;
  }
  .leader-schedule-page .leader-count-button {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    min-height: 56px !important;
    flex: 0 0 124px !important;
    gap: 7px !important;
    border: 1px solid #e1ebf1 !important;
    border-radius: 13px !important;
    background: #f6fafc !important;
    padding: 10px 11px !important;
    scroll-snap-align: start !important;
  }
  .leader-schedule-page .leader-count-button span {
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .leader-schedule-page .leader-count-button strong {
    font-size: 19px !important;
  }
  .leader-schedule-page .leader-table-card {
    margin-top: 0 !important;
  }
  .leader-schedule-page .leader-table-heading {
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 14px !important;
  }
  .leader-schedule-page .leader-table-heading h2 {
    font-size: 16px !important;
  }
  .leader-schedule-page .leader-table-heading small,
  .leader-schedule-page .leader-table-heading > span {
    font-size: 11.5px !important;
  }
  .leader-schedule-page .leader-desktop-roster {
    display: none !important;
  }
  .leader-schedule-page .leader-mobile-roster {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 14px 7px !important;
  }
  .leader-schedule-page .leader-mobile-person-card {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
    border-bottom: 1px solid #e8eff3 !important;
    background: transparent !important;
    padding: 13px 0 !important;
  }
  .leader-schedule-page .leader-mobile-person-card:last-child {
    border-bottom: 0 !important;
  }
  .leader-schedule-page .leader-mobile-person-head,
  .leader-schedule-page .leader-mobile-person-identity {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
  }
  .leader-schedule-page .leader-mobile-person-identity {
    width: 100% !important;
    gap: 10px !important;
  }
  .leader-schedule-page .leader-mobile-person-identity .schedule-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    font-size: 14px !important;
  }
  .leader-schedule-page .leader-mobile-person-identity > div {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }
  .leader-schedule-page .leader-mobile-person-identity strong {
    overflow: hidden !important;
    color: #233f54 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .leader-schedule-page .leader-mobile-person-identity small {
    color: #8091a0 !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }
  .leader-schedule-page .leader-mobile-person-identity small b {
    color: #526b7d !important;
    font-size: inherit !important;
    font-weight: 800 !important;
  }
  .leader-schedule-page .leader-mobile-status-line {
    display: flex !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding-left: 48px !important;
  }
  .leader-schedule-page .leader-mobile-status-line .badge {
    max-width: 100% !important;
    min-height: 25px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
  .leader-schedule-page .leader-mobile-person-meta {
    display: flex !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 7px 14px !important;
    padding-left: 48px !important;
  }
  .leader-schedule-page .leader-mobile-person-meta span {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: baseline !important;
    gap: 5px !important;
    color: #758897 !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
  }
  .leader-schedule-page .leader-mobile-person-meta small {
    font-size: inherit !important;
  }
  .leader-schedule-page .leader-mobile-person-meta strong {
    min-width: 0 !important;
    color: #405e73 !important;
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
  }
  .leader-schedule-page .leader-mobile-empty {
    padding: 28px 8px !important;
    color: #8494a2 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
}

@media (max-width: 360px) {
  .leader-schedule-page .leader-count-button {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    flex-basis: 116px !important;
  }
  .leader-schedule-page .leader-mobile-roster {
    padding-inline: 12px !important;
  }
  .leader-schedule-page .leader-mobile-status-line,
  .leader-schedule-page .leader-mobile-person-meta {
    padding-left: 0 !important;
  }
}



/* PATCH045 — faster worker/admin synchronization and employee portal page title. */
.worker-registration-page-heading {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  padding: 2px 12px;
  box-sizing: border-box;
  text-align: center;
}
.worker-registration-page-heading h1 {
  margin: 0;
  color: #173b58;
  font-size: clamp(25px, 4.5vw, 34px);
  font-weight: 850;
  letter-spacing: .02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.worker-inline-loading {
  display: grid;
  min-height: 132px;
  place-items: center;
  color: #70889c;
  font-size: 14px;
  font-weight: 720;
}
@media (max-width: 590px) {
  .worker-portal--registration .worker-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
  }
  .worker-registration-page-heading {
    min-height: 48px;
    margin-bottom: 12px;
    padding: 0 8px;
  }
  .worker-registration-page-heading h1 {
    font-size: clamp(24px, 7.2vw, 31px);
  }
}
@media (max-width: 360px) {
  .worker-registration-page-heading { margin-bottom: 9px; }
  .worker-registration-page-heading h1 { font-size: 23px; }
}

/* PATCH046 — replace the cumulative-sort dropdown with compact column arrows. */
.table-metric-sort {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  padding: 3px 5px;
  font: inherit;
  font-weight: inherit;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}
.table-metric-sort span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.table-metric-sort b {
  display: inline-grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #edf7fc;
  color: #2c799f;
  font-size: 13px;
  line-height: 1;
}
.table-metric-sort:hover,
.table-metric-sort:focus-visible {
  background: #edf8fd;
  color: #126f9c;
  outline: none;
}
.table-metric-sort:focus-visible { box-shadow: 0 0 0 3px rgba(37, 160, 217, .18); }
.table-metric-sort.is-active { color: #087dac; }
.table-metric-sort.is-active b {
  background: #22a7dc;
  color: #fff;
  box-shadow: 0 4px 10px rgba(24, 145, 198, .22);
}
.schedule-filter-bar {
  grid-template-columns: minmax(240px, 1.35fr) repeat(6, minmax(140px, .78fr)) !important;
}
.attendance-registration-actions {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .table-metric-sort { gap: 4px; padding-inline: 2px; }
  .table-metric-sort b { flex-basis: 18px; width: 18px; height: 18px; font-size: 12px; }
}

/* PATCH046 — inline metric sorting, load test tooling, and aligned drawer context. */
.sidebar-context-stack {
  display: grid;
  width: auto;
  min-width: 0;
  gap: 8px;
  margin: 12px 14px 0;
  padding: 0;
}
.sidebar-context-stack > .company-switch,
.sidebar-context-stack > .sidebar-scope {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.sidebar-context-stack > .company-switch > label,
.sidebar-context-stack > .sidebar-scope {
  padding-inline: 15px;
}
.sidebar-context-label { display: block; }

@media (max-width: 900px) {
  .sidebar.management-sidebar .sidebar-context-stack,
  .sidebar.management-sidebar .sidebar-context-stack > .company-switch,
  .sidebar.management-sidebar .sidebar-context-stack > .sidebar-scope,
  .sidebar.management-sidebar .nav,
  .sidebar.management-sidebar .nav button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .sidebar.management-sidebar .sidebar-context-stack {
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sidebar.management-sidebar .sidebar-context-stack > .company-switch,
  .sidebar.management-sidebar .sidebar-context-stack > .sidebar-scope {
    margin: 0 !important;
  }
  .sidebar.management-sidebar .sidebar-context-stack > .company-switch > label,
  .sidebar.management-sidebar .sidebar-context-stack > .sidebar-scope {
    display: grid !important;
    width: 100% !important;
    min-height: 58px !important;
    align-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    border: 1px solid rgba(137, 199, 251, .18) !important;
    border-radius: 11px !important;
    background: rgba(65, 147, 216, .08) !important;
    padding: 10px 13px !important;
  }
  .sidebar.management-sidebar .sidebar-context-label {
    margin: 0 !important;
    color: #8fb4d2 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: .03em !important;
  }
  .sidebar.management-sidebar .company-switch strong,
  .sidebar.management-sidebar .sidebar-scope strong {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #dceefe !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .sidebar.management-sidebar .company-switch select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding-inline: 8px 28px !important;
  }
  .sidebar.management-sidebar .sidebar-section-label {
    margin: 4px 13px 0 !important;
  }
  .sidebar.management-sidebar .nav button {
    padding-inline: 13px !important;
  }
}


/* PATCH047 — leader group/search/horizontal roster targeted fix */
.leader-schedule-page .leader-group-trigger {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.leader-schedule-page .leader-group-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-schedule-page .leader-group-trigger > b { flex: 0 0 auto; color: #6e8290; font-size: 15px; line-height: 1; }
.leader-group-picker-layer[hidden] { display: none !important; }
.leader-group-picker-layer {
  position: fixed;
  z-index: 2900;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.leader-group-picker-backdrop { position: absolute; inset: 0; border: 0; background: rgba(18, 37, 53, .42); padding: 0; }
.leader-group-picker-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(420px, 100%);
  max-height: min(620px, calc(100dvh - 24px));
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(181, 203, 216, .75);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(20, 43, 60, .28);
}
.leader-group-picker-panel > header { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e9eff3; padding: 0 14px 0 18px; }
.leader-group-picker-panel > header strong { color: #29485d; font-size: 16px; line-height: 1.35; }
.leader-group-picker-panel > header button { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 0; border-radius: 50%; background: #eef5f8; color: #4e6879; padding: 0; font-size: 22px; line-height: 1; }
.leader-group-picker-options { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 8px; }
.leader-group-picker-option { display: grid; width: 100%; min-height: 48px; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 10px; border: 0; border-radius: 11px; background: transparent; padding: 9px 12px; color: #29485d; font-size: 15px; font-weight: 750; line-height: 1.35; text-align: left; }
.leader-group-picker-option + .leader-group-picker-option { margin-top: 2px; }
.leader-group-picker-option:is(:hover, :focus-visible) { background: #eef7fd; outline: 0; }
.leader-group-picker-option.is-selected { background: #e4f3fc; color: #0e6da8; }
.leader-group-picker-option > span { min-width: 0; overflow-wrap: anywhere; }
.leader-group-picker-option > b { text-align: center; }
.leader-schedule-page .leader-roster-search { display: grid; width: 100%; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; border-top: 1px solid #edf2f5; border-bottom: 1px solid #e8eef2; background: #fbfdfe; padding: 10px 14px; box-sizing: border-box; }
.leader-schedule-page .leader-roster-search > span { color: #647789; font-size: 12px; font-weight: 780; white-space: nowrap; }
.leader-schedule-page .leader-roster-search > div { display: flex; width: 100%; min-width: 0; height: 38px; align-items: center; gap: 8px; border: 1px solid #d8e5ec; border-radius: 10px; background: #fff; padding: 0 11px; box-sizing: border-box; }
.leader-schedule-page .leader-roster-search b { flex: 0 0 auto; color: #7b8f9e; font-size: 17px; line-height: 1; }
.leader-schedule-page .leader-roster-search input { width: 100%; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0; color: #29485d; font-size: 14px; box-shadow: none; outline: 0; }
@media (max-width: 900px) {
  .leader-group-picker-layer { align-items: end; padding: 10px 8px max(8px, env(safe-area-inset-bottom)); }
  .leader-group-picker-panel { width: 100%; max-height: min(72dvh, 620px); border-radius: 18px 18px 12px 12px; }
  .leader-schedule-page .leader-roster-search { grid-template-columns: minmax(0, 1fr) !important; gap: 5px !important; padding: 10px 12px !important; }
  .leader-schedule-page .leader-roster-search > span { font-size: 12px !important; }
  .leader-schedule-page .leader-roster-search > div { height: 40px !important; }
  .leader-schedule-page .leader-roster-search input { font-size: 16px !important; }
  .leader-schedule-page .leader-desktop-roster { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; touch-action: pan-x pan-y !important; overscroll-behavior-inline: contain !important; -webkit-overflow-scrolling: touch !important; }
  .leader-schedule-page .leader-mobile-roster { display: none !important; }
  .leader-schedule-page .leader-self-table { width: 1040px !important; min-width: 1040px !important; }
}

/* PATCH050: keep the dashboard data date independent from schedule and attendance dates. */
.dashboard-data-date-control {
  display: grid !important;
  grid-template-columns: auto minmax(132px, 176px) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 4px 8px 4px 12px !important;
  cursor: default !important;
  box-sizing: border-box !important;
}
.dashboard-data-date-control > span {
  color: #234764 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.dashboard-data-date-control .qidian-date-control {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 176px !important;
  align-items: center !important;
}
.dashboard-data-date-control .qidian-date-trigger {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 6px 0 9px !important;
  box-sizing: border-box !important;
}
@media (max-width: 620px) {
  .dashboard-data-date-control {
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important;
  }
  .dashboard-data-date-control .qidian-date-control {
    max-width: none !important;
  }
}

/* PATCH060: mobile WEB worker pull-to-refresh; native APP and iPad desktop mode are excluded in app.js. */
.qidian-worker-pull-refresh {
  --qidian-pull-distance: 0px;
  position: fixed;
  z-index: 2600;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(42, 121, 165, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(30, 71, 98, 0.16);
  color: #2e617f;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-48px + min(var(--qidian-pull-distance), 88px)));
  transition: opacity 140ms ease, transform 140ms ease;
}
.qidian-worker-pull-refresh.is-visible { opacity: 1; }
.qidian-worker-pull-refresh.is-ready { color: #087aa8; }
.qidian-worker-pull-refresh-spinner {
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(calc(var(--qidian-pull-distance) * 2deg));
}
.qidian-worker-pull-refresh.is-refreshing .qidian-worker-pull-refresh-spinner {
  animation: qidian-worker-pull-spin 700ms linear infinite;
}
.qidian-worker-pull-refresh.is-done .qidian-worker-pull-refresh-spinner {
  border-right-color: currentColor;
  animation: none;
}
@keyframes qidian-worker-pull-spin { to { transform: rotate(360deg); } }
@media (min-width: 901px) {
  .qidian-worker-pull-refresh { display: none !important; }
}



/* QIDIAN_R17B_HOME_GROUP_B_20260907 */
/* Group B = desktop WEB + iPad WEB. Group A mobile is intentionally untouched. */
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack {
  align-items: stretch !important;
  gap: 8px !important;
}
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack > .company-switch {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: none !important;
}
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack > .company-switch > label,
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack > .sidebar-scope {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 12px 15px !important;
  align-content: center !important;
  gap: 4px !important;
  border: 1px solid rgba(150, 204, 255, .17) !important;
  border-radius: 11px !important;
  background: rgba(106, 179, 239, .09) !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: none !important;
}
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack > .company-switch > label > .sidebar-context-label,
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack > .company-switch > label > strong,
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack > .company-switch > label > select,
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack > .sidebar-scope > .sidebar-context-label,
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack > .sidebar-scope > strong {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html.qidian-ui-group-b .dashboard-site-scope.dashboard-site-scope--static {
  display: none !important;
}


/* QIDIAN_R17C_ATTENDANCE_FAST_EDIT_UI_20260907 */
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack{width:auto!important;margin:12px 10px 0!important;padding:0!important;gap:8px!important;align-items:stretch!important}
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack>.company-switch{width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-sizing:border-box!important;transform:none!important;transition:none!important}
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack>.company-switch>label,html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack>.sidebar-scope{display:grid!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:58px!important;margin:0!important;padding:10px 12px!important;align-content:center!important;gap:4px!important;border:1px solid #d3e8f5!important;border-radius:11px!important;background:#eef7fd!important;box-sizing:border-box!important;transform:none!important;transition:none!important}
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-label{display:block!important;color:#6d879f!important;font-size:10px!important;font-weight:700!important}
html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack strong,html.qidian-ui-group-b .sidebar.management-sidebar .sidebar-context-stack select{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:#204563!important;font-size:12px!important;font-weight:700!important;line-height:1.35!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html.qidian-ui-group-b .dashboard-site-scope.dashboard-site-scope--static{display:none!important}
.qidian-r17-attendance-load-overlay{inset:auto 16px auto auto!important;top:16px!important;left:auto!important;width:auto!important;height:auto!important;background:transparent!important;backdrop-filter:none!important;pointer-events:none!important;align-items:flex-start!important;justify-content:flex-end!important}
.qidian-r17-attendance-load-card{width:min(360px,84vw)!important;padding:12px 16px!important;border-radius:12px!important;text-align:left!important}
.qidian-r17-attendance-load-spinner{width:22px!important;height:22px!important;margin:0 10px 0 0!important;display:inline-block!important;vertical-align:middle!important}
.qidian-r17-attendance-load-title{display:inline!important;font-size:13px!important}
.qidian-r17-attendance-load-hint{margin-top:5px!important;font-size:11px!important}
.qidian-r8-time-wrap{display:flex;align-items:center;justify-content:flex-start;gap:5px;white-space:nowrap;min-width:84px}.qidian-r8-time,[data-attendance-inline-managed] input.qidian-r8-time[data-attendance-inline-time]{width:78px;min-width:72px;border:0!important;border-radius:0!important;padding:4px 0!important;margin:0!important;background:transparent!important;color:#123!important;font:inherit;line-height:1.2;text-align:left!important;box-shadow:none!important;outline:0!important}.qidian-r8-time:focus-visible{text-decoration:underline;text-underline-offset:3px}.qidian-r8-save{border:1px solid #72bfe5;border-radius:7px;padding:4px 7px;background:#eefaff;color:#087eb7;font-size:12px;font-weight:700;cursor:pointer}.qidian-r8-save:disabled{opacity:.45;cursor:default}.qidian-r8-working{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;background:#e8f8f2;color:#087c5b;font-weight:700;font-size:12px}.schedule-row-action.unscheduled {
  border-color: #d8e2ea;
  background: #f6f8fa;
  color: #62788a;
}

.schedule-row-action.unscheduled.is-active {
  border-color: #647b8d;
  background: #647b8d;
  color: #fff;
}

.schedule-leave-review {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #f2d69d;
  border-radius: 12px;
  background: #fffaf0;
}

.schedule-leave-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
}

.schedule-leave-request > span:first-child {
  display: grid;
  gap: 3px;
}

.schedule-leave-request small { color: #71879a; }

.schedule-leave-lock {
  display: grid;
  gap: 2px;
  color: #8a5b00;
}

.schedule-leave-lock small { color: #7a6b4b; }

.worker-response-actions--direct {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 10px;
}

.worker-response-actions--direct > .button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.worker-response-actions--direct > .button:only-child { grid-column: 1 / -1; }

.accumulation-settings {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border: 1px solid #d8e8f2;
  border-radius: 12px;
  background: #f8fcff;
}

.accumulation-settings legend {
  padding: 0 7px;
  color: #244f69;
  font-weight: 800;
}

.accumulation-settings > small { grid-column: 1 / -1; color: #688399; line-height: 1.5; }
.accumulation-settings .button { min-width: 136px; white-space: nowrap; }

.workforce-page-stack,
.schedule-workspace-card,
.schedule-workspace-card form {
  min-width: 0;
  max-width: 100%;
}

.schedule-table-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  contain: inline-size;
}

.schedule-workspace-card .schedule-pagination,
.schedule-workspace-card .floating-table-footer,
.schedule-workspace-card .floating-table-navigation,
.schedule-workspace-card .floating-table-scrollbar {
  box-sizing: border-box;
  min-width: 0 !important;
  max-width: 100%;
}

.schedule-workspace-card .floating-table-navigation {
  width: 100%;
  overflow: hidden;
}

.schedule-workspace-card .floating-table-scrollbar {
  overflow-x: auto !important;
  overflow-y: hidden;
}

.schedule-workspace-card .schedule-command-bar {
  position: relative;
  top: auto;
  z-index: auto;
}

.schedule-operations-table.schedule-table-modern {
  width: 100% !important;
  min-width: 2160px !important;
  table-layout: fixed;
}
.schedule-operations-table.schedule-table-modern th,
.schedule-operations-table.schedule-table-modern td {
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
  vertical-align: middle;
}
.schedule-operations-table.schedule-table-modern th {
  overflow: visible;
  white-space: nowrap;
}
.schedule-operations-table .schedule-col-employee {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}
.schedule-operations-table .schedule-col-contact {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
}
.schedule-operations-table th:nth-last-child(10) { width: 88px; }
.schedule-operations-table th:nth-last-child(9) { width: 124px; }
.schedule-operations-table th:nth-last-child(8) { width: 124px; }
.schedule-operations-table th:nth-last-child(7) { width: 152px; }
.schedule-operations-table th:nth-last-child(6),
.schedule-operations-table th:nth-last-child(5) { width: 124px; }
.schedule-operations-table .schedule-col-weekly,
.schedule-operations-table .schedule-col-unregistered,
.schedule-operations-table .schedule-col-absent {
  width: 176px;
  min-width: 176px;
}
.schedule-operations-table .schedule-col-actions,
.schedule-operations-table.schedule-table-modern tbody > tr > td:last-child {
  width: 244px;
  min-width: 244px;
}
.schedule-operations-table th[data-schedule-metric-sort] {
  cursor: pointer;
  user-select: none;
}
.schedule-operations-table th[data-schedule-metric-sort]:hover,
.schedule-operations-table th[data-schedule-metric-sort]:focus-visible {
  background: #edf8fd;
  outline: 2px solid #85bfd7;
  outline-offset: -2px;
}
.schedule-operations-table th[data-schedule-metric-sort]:is([aria-sort="ascending"], [aria-sort="descending"]) {
  color: #087dac;
  background: #edf8fd;
  box-shadow: inset 0 -3px #22a7dc;
}
.table-metric-sort { width: max-content; max-width: none; gap: 8px; align-items: center; white-space: nowrap; }
.table-metric-sort span { flex: 0 0 auto; overflow: visible; overflow-wrap: normal; white-space: nowrap; }
.table-metric-sort b { flex: 0 0 22px; width: 22px; height: 22px; position: static; }

html body .schedule-operations-table .schedule-row-actions {
  display: flex !important;
  flex-direction: row !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  grid-template-columns: none !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  white-space: nowrap;
}

html body .schedule-operations-table .schedule-row-actions > .schedule-row-action {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 48px;
  white-space: nowrap !important;
}

.work-settings-loading {
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid #d8e8f2;
  border-radius: 12px;
  background: linear-gradient(105deg, #f5f9fc 25%, #fff 42%, #f5f9fc 60%);
  background-size: 220% 100%;
  color: #607d91;
  font-weight: 800;
  animation: qidian-settings-loading 1.2s linear infinite;
}

@keyframes qidian-settings-loading {
  to { background-position: -220% 0; }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  .schedule-filter-bar { grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(120px, 1fr)) !important; }
}

@media (min-width: 641px) and (max-width: 1180px) {
  .schedule-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .schedule-filter-bar .schedule-search-field { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .schedule-leave-request { align-items: stretch; flex-direction: column; }
  .schedule-leave-request .schedule-row-actions { white-space: normal; }
  .accumulation-settings { grid-template-columns: 1fr; }
  .accumulation-settings > small { grid-column: 1; }
  .accumulation-settings .button { width: 100%; }
}

/* QIDIAN_R5_WAREHOUSE_MANAGEMENT_V1 */
/* R5 warehouse management card layout: one horizontal information model on every viewport. */
.warehouse-sites-card .site-card-grid {
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}
.warehouse-sites-card .site-card {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon main status"
    "actions actions actions";
  align-items: start;
  gap: 14px 16px;
  width: 100%;
  min-width: 0;
  min-height: 184px;
  height: 100%;
  padding: 18px;
}
.warehouse-sites-card .site-card-icon { grid-area: icon; width: 48px; height: 48px; }
.warehouse-sites-card .site-card-main { grid-area: main; display: grid; min-width: 0; gap: 7px; }
.warehouse-sites-card .site-card-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.warehouse-sites-card .site-card-title strong {
  overflow: visible;
  color: #24445e;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.warehouse-sites-card .site-card-title small {
  flex: 0 0 auto;
  color: #4386ba;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}
.warehouse-sites-card .site-card-main > p {
  overflow: visible;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.warehouse-sites-card .site-card-status { grid-area: status; display: flex; align-items: flex-start; justify-content: flex-end; }
.warehouse-sites-card .site-card-status .badge { writing-mode: horizontal-tb; white-space: nowrap; }
.warehouse-sites-card .site-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.warehouse-sites-card .site-card-meta span { writing-mode: horizontal-tb; white-space: nowrap; }
.warehouse-sites-card .site-card-actions { grid-area: actions; display: block; width: 100%; align-self: end; }
.warehouse-sites-card .site-card-button-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.warehouse-sites-card .site-card-button-row .button { width: 100%; min-width: 0; min-height: 36px; justify-content: center; white-space: nowrap; }
@media (max-width: 1280px) {
  .warehouse-sites-card .site-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .warehouse-sites-card .site-card { grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 0; padding: 15px; }
  .warehouse-sites-card .site-card-icon { width: 42px; height: 42px; }
  .warehouse-sites-card .site-card-button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .warehouse-sites-card .site-card { grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "icon main" "status status" "actions actions"; }
  .warehouse-sites-card .site-card-status { justify-content: flex-start; }
  .warehouse-sites-card .site-card-button-row { grid-template-columns: 1fr; }
}
/* QIDIAN_SUBSCRIPTION_COMPACT_UI */
.billing-plans-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-width:0; }
.billing-plans-grid .billing-plan-card { min-width:0; padding:14px; gap:6px; }
.billing-plans-grid .billing-plan-card h3 { margin:0 0 4px; font-size:17px; }
.billing-plans-grid .billing-plan-card p { margin:4px 0; overflow-wrap:anywhere; }
.billing-plans-grid .billing-plan-card strong { font-size:28px; line-height:1.2; }
.billing-plans-grid .billing-plan-card .table-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.billing-plans-grid .billing-plan-card .button { min-width:0; padding:8px 10px; }
.billing-config-grid--three:has([data-billing-plan-card]) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.billing-config-grid [data-billing-plan-card] { min-width:0; padding:14px; }
#permission-member-dialog .permission-module-card[hidden], .permission-role-employee #permission-module-section { display:none !important; }
@media(max-width:640px) { .billing-plans-grid,.billing-config-grid--three:has([data-billing-plan-card]) { grid-template-columns:minmax(0,1fr); } }

.schedule-status-summary[data-workforce-layout="direct_assignment"] { grid-template-columns: repeat(4, minmax(105px, 1fr)) !important; }
.schedule-status-summary > [data-workforce-metric] { white-space: nowrap; flex-shrink: 0; }

/* QIDIAN_WORKFORCE_STATUS_STYLES W1siLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IC5nb29kIHsgYm9yZGVyLWNvbG9yOiAjY2ZlZWRlOyBiYWNrZ3JvdW5kOiAjZjFmYmY2OyBjb2xvcjogIzMxODU1ZTsgfVxuLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IC5nb29kIGIgeyBjb2xvcjogIzE0OTQ1NzsgfVxuLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IC53YXJuIHsgYm9yZGVyLWNvbG9yOiAjZjJlMWJkOyBiYWNrZ3JvdW5kOiAjZmZmYWYwOyBjb2xvcjogI2FhNzYyMTsgfVxuLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IC53YXJuIGIgeyBjb2xvcjogI2Q1OGIxMzsgfVxuLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IC5iYWQgeyBib3JkZXItY29sb3I6ICNmM2Q4ZGQ7IGJhY2tncm91bmQ6ICNmZmY3Zjg7IGNvbG9yOiAjYmQ2NjcyOyB9XG4uc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkgLmJhZCBiIHsgY29sb3I6ICNlMTRkNjA7IH1cbi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSAubXV0ZWQgeyBiYWNrZ3JvdW5kOiAjZjVmN2ZhOyBjb2xvcjogIzg3OThhODsgfSIsIi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSA+IFtkYXRhLXdvcmtmb3JjZS1tZXRyaWM9XCJyZWdpc3RlcmVkXCJdIHsgYmFja2dyb3VuZDogI2VjZmFmZjsgYm9yZGVyLWNvbG9yOiAjOWNkYWU5OyBjb2xvcjogIzA4NjU3ZDsgfVxuLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5ID4gW2RhdGEtd29ya2ZvcmNlLW1ldHJpYz1cInJlZ2lzdGVyZWRcIl0gYiB7IGNvbG9yOiAjMDg2NTdkOyB9XG4uc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkgPiBbZGF0YS13b3JrZm9yY2UtbWV0cmljPVwidW5zY2hlZHVsZWRcIl0geyBiYWNrZ3JvdW5kOiAjZmZmOGRlOyBib3JkZXItY29sb3I6ICNlOWNmNzc7IGNvbG9yOiAjNzk1ODAwOyB9XG4uc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkgPiBbZGF0YS13b3JrZm9yY2UtbWV0cmljPVwidW5zY2hlZHVsZWRcIl0gYiB7IGNvbG9yOiAjNzk1ODAwOyB9XG4uc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkgPiBbZGF0YS13b3JrZm9yY2UtbWV0cmljPVwid29ya1wiXSB7IGJhY2tncm91bmQ6ICNlZGY5ZjE7IGJvcmRlci1jb2xvcjogI2FjZDhiYTsgY29sb3I6ICMxNzYzMzg7IH1cbi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSA+IFtkYXRhLXdvcmtmb3JjZS1tZXRyaWM9XCJ3b3JrXCJdIGIgeyBjb2xvcjogIzE3NjMzODsgfVxuLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5ID4gW2RhdGEtd29ya2ZvcmNlLW1ldHJpYz1cInJlc3RcIl0geyBiYWNrZ3JvdW5kOiAjZjZmMGZjOyBib3JkZXItY29sb3I6ICNjZWI5ZTY7IGNvbG9yOiAjNmIzYzkxOyB9XG4uc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkgPiBbZGF0YS13b3JrZm9yY2UtbWV0cmljPVwicmVzdFwiXSBiIHsgY29sb3I6ICM2YjNjOTE7IH1cbi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSA+IFtkYXRhLXdvcmtmb3JjZS1tZXRyaWM9XCJsZWF2ZVwiXSB7IGJhY2tncm91bmQ6ICNmZmYyZTY7IGJvcmRlci1jb2xvcjogI2VkYmY5MTsgY29sb3I6ICM5MTQ4MDA7IH1cbi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSA+IFtkYXRhLXdvcmtmb3JjZS1tZXRyaWM9XCJsZWF2ZVwiXSBiIHsgY29sb3I6ICM5MTQ4MDA7IH1cbi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSA+IFtkYXRhLXdvcmtmb3JjZS1tZXRyaWM9XCJub19vcGVyYXRpb25cIl0geyBiYWNrZ3JvdW5kOiAjZmZmMGY0OyBib3JkZXItY29sb3I6ICNlYWIzYzU7IGNvbG9yOiAjOWMzMTU3OyB9XG4uc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkgPiBbZGF0YS13b3JrZm9yY2UtbWV0cmljPVwibm9fb3BlcmF0aW9uXCJdIGIgeyBjb2xvcjogIzljMzE1NzsgfSIsMTA5NjI2XSxbIi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSB7XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDYsIG1pbm1heCgxMDVweCwgMWZyKSk7XG4gIGdhcDogMTBweDtcbiAgcGFkZGluZzogMTZweCAyNHB4IDEwcHg7XG59IiwiLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IHtcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoNiwgbWlubWF4KDEwNXB4LCAxZnIpKSAhaW1wb3J0YW50O1xuICBnYXA6IDEwcHg7XG4gIHBhZGRpbmc6IDE2cHggMjRweCAxMHB4O1xufSIsMTA5MTQyXSxbIi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSB7IGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDMsIG1pbm1heCgxMTBweCwgMWZyKSk7IH0iLCIuc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkgeyBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCg2LCBtaW5tYXgoMTA1cHgsIDFmcikpICFpbXBvcnRhbnQ7IH0iLDExNzM4Nl0sWyIuc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkgeyBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgyLCBtaW5tYXgoMTIwcHgsIDFmcikpOyBwYWRkaW5nOiAxNHB4IDE4cHggOHB4OyB9IiwiLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IHsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoNiwgbWlubWF4KDEwNXB4LCAxZnIpKSAhaW1wb3J0YW50OyBwYWRkaW5nOiAxNHB4IDE4cHggOHB4OyB9IiwxMTc1ODFdLFsiLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IHsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnIgMWZyOyBnYXA6IDdweDsgcGFkZGluZzogMTJweDsgfSIsIi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSB7IGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDYsIG1pbm1heCgxMDVweCwgMWZyKSkgIWltcG9ydGFudDsgZ2FwOiA3cHg7IHBhZGRpbmc6IDEycHg7IH0iLDExODEzOV0sWyIuc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkge1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCg2LCBtaW5tYXgoMTQ1cHgsIDFmcikpO1xuICBnYXA6IDE0cHg7XG4gIHBhZGRpbmc6IDIwcHggMzRweCAxNXB4O1xufSIsIi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSB7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDYsIG1pbm1heCgxMDVweCwgMWZyKSkgIWltcG9ydGFudDtcbiAgZ2FwOiAxNHB4O1xuICBwYWRkaW5nOiAyMHB4IDM0cHggMTVweDtcbn0iLDExOTgxN10sWyIuc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDMsIG1pbm1heCgxNDVweCwgMWZyKSk7XG4gIH0iLCIuc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDYsIG1pbm1heCgxMDVweCwgMWZyKSkgIWltcG9ydGFudDtcbiAgfSIsMTI1NzA2XSxbIi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMiwgbWlubWF4KDEyNXB4LCAxZnIpKTtcbiAgICBwYWRkaW5nOiAxNXB4IDE4cHggMTBweDtcbiAgfSIsIi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoNiwgbWlubWF4KDEwNXB4LCAxZnIpKSAhaW1wb3J0YW50O1xuICAgIHBhZGRpbmc6IDE1cHggMThweCAxMHB4O1xuICB9IiwxMjY0MTFdLFsiLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IHsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMywgbWlubWF4KDE0NXB4LCAxZnIpKTsgfSIsIi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSB7IGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDYsIG1pbm1heCgxMDVweCwgMWZyKSkgIWltcG9ydGFudDsgfSIsMTQyODkyXSxbIi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeSB7XG4gICAgZGlzcGxheTogZ3JpZCAhaW1wb3J0YW50O1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDIsIG1pbm1heCgwLCAxZnIpKSAhaW1wb3J0YW50O1xuICAgIGdhcDogOHB4ICFpbXBvcnRhbnQ7XG4gICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBtYXgtd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBtaW4td2lkdGg6IDAgIWltcG9ydGFudDtcbiAgICBwYWRkaW5nOiAxMnB4ICFpbXBvcnRhbnQ7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveCAhaW1wb3J0YW50O1xuICB9IiwiLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IHtcbiAgICBkaXNwbGF5OiBncmlkICFpbXBvcnRhbnQ7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoNiwgbWlubWF4KDEwNXB4LCAxZnIpKSAhaW1wb3J0YW50O1xuICAgIGdhcDogOHB4ICFpbXBvcnRhbnQ7XG4gICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBtYXgtd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBtaW4td2lkdGg6IDAgIWltcG9ydGFudDtcbiAgICBwYWRkaW5nOiAxMnB4ICFpbXBvcnRhbnQ7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveCAhaW1wb3J0YW50O1xuICB9Iiw1NjE5NzFdLFsiLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5IHtcbiAgZGlzcGxheTogZ3JpZDsiLCIuc2NoZWR1bGUtc3RhdHVzLXN1bW1hcnkge1xuICBkaXNwbGF5OiBncmlkO1xuICBvdmVyZmxvdy14OiBhdXRvO1xuICBvdmVyc2Nyb2xsLWJlaGF2aW9yLWlubGluZTogY29udGFpbjsiLDEwOTE0Ml0sWyIiLCJcbi5zY2hlZHVsZS1zdGF0dXMtc3VtbWFyeVtkYXRhLXdvcmtmb3JjZS1sYXlvdXQ9XCJkaXJlY3RfYXNzaWdubWVudFwiXSB7IGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIG1pbm1heCgxMDVweCwgMWZyKSkgIWltcG9ydGFudDsgfVxuLnNjaGVkdWxlLXN0YXR1cy1zdW1tYXJ5ID4gW2RhdGEtd29ya2ZvcmNlLW1ldHJpY10geyB3aGl0ZS1zcGFjZTogbm93cmFwOyBmbGV4LXNocmluazogMDsgfVxuIiw4MTM5MTldXQ== */

/* QIDIAN_GUIDE_WORKFORCE_BRAND_STYLES W1s3NTg0MDIsIi8qIFBBVENIMDQxIOKAlCBvcGVyYXRpb24gZ3VpZGUgdW5kZXIgdGhlIGF1ZGl0LWxvZyBwcm9maWxlIGVudHJ5LiAqL1xuLm9wZXJhdGlvbi1ndWlkZS1wYWdlIHtcbiAgZGlzcGxheTogZ3JpZDtcbiAgd2lkdGg6IG1pbigxMDAlLCAxMTgwcHgpO1xuICBtaW4td2lkdGg6IDA7XG4gIGdhcDogMTZweDtcbiAgbWFyZ2luOiAwIGF1dG87XG59XG4ub3BlcmF0aW9uLWd1aWRlLXBhZ2UgKixcbi5vcGVyYXRpb24tZ3VpZGUtcGFnZSAqOjpiZWZvcmUsXG4ub3BlcmF0aW9uLWd1aWRlLXBhZ2UgKjo6YWZ0ZXIgeyBib3gtc2l6aW5nOiBib3JkZXItYm94OyB9XG4ub3BlcmF0aW9uLWd1aWRlLXBhZ2UgPiAqIHsgbWluLXdpZHRoOiAwOyB9XG4ub3BlcmF0aW9uLWd1aWRlLXBhZ2UgW2lkXSB7IHNjcm9sbC1tYXJnaW4tdG9wOiAxMTJweDsgfVxuXG4ub3BlcmF0aW9uLWd1aWRlLWhlcm8ge1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IG1pbm1heCgwLCAxZnIpIG1pbm1heCgyMzBweCwgMzEwcHgpO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IDIycHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjZmU2ZjQ7XG4gIGJhY2tncm91bmQ6XG4gICAgcmFkaWFsLWdyYWRpZW50KGNpcmNsZSBhdCAxMDAlIDAsIHJnYmEoNTAsIDE4NCwgMjMxLCAuMTkpLCB0cmFuc3BhcmVudCAzOCUpLFxuICAgIGxpbmVhci1ncmFkaWVudCgxNDVkZWcsICNmOGZjZmYgMCUsICNlZGY4ZmUgMTAwJSk7XG4gIHBhZGRpbmc6IDI4cHggMzBweDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtaGVyby1jb3B5IHsgZGlzcGxheTogZ3JpZDsgbWluLXdpZHRoOiAwOyBnYXA6IDhweDsgfVxuLm9wZXJhdGlvbi1ndWlkZS1oZXJvLWNvcHkgPiBzcGFuIHtcbiAgY29sb3I6ICMxNTk4Y2M7XG4gIGZvbnQtc2l6ZTogMTFweDtcbiAgZm9udC13ZWlnaHQ6IDg1MDtcbiAgbGV0dGVyLXNwYWNpbmc6IC4xNmVtO1xufVxuLm9wZXJhdGlvbi1ndWlkZS1oZXJvIGgxIHtcbiAgbWFyZ2luOiAwO1xuICBjb2xvcjogIzE3M2I1ODtcbiAgZm9udC1zaXplOiBjbGFtcCgyOHB4LCAzLjN2dywgNDJweCk7XG4gIGxpbmUtaGVpZ2h0OiAxLjA4O1xuICBsZXR0ZXItc3BhY2luZzogLS4wMjVlbTtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtaGVybyBwIHtcbiAgbWF4LXdpZHRoOiA3NjBweDtcbiAgbWFyZ2luOiAwO1xuICBjb2xvcjogIzYxN2I5MDtcbiAgZm9udC1zaXplOiAxNHB4O1xuICBsaW5lLWhlaWdodDogMS43NTtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtaGVyby1tZXRhIHtcbiAgZGlzcGxheTogZ3JpZDtcbiAgbWluLXdpZHRoOiAwO1xuICBnYXA6IDVweDtcbiAgYm9yZGVyOiAxcHggc29saWQgcmdiYSg4NywgMTczLCAyMTIsIC4yOCk7XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGJhY2tncm91bmQ6IHJnYmEoMjU1LCAyNTUsIDI1NSwgLjc2KTtcbiAgcGFkZGluZzogMTZweCAxOHB4O1xuICBib3gtc2hhZG93OiAwIDEycHggMzBweCByZ2JhKDQwLCAxMDcsIDE0NSwgLjA4KTtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtaGVyby1tZXRhIHNwYW4sXG4ub3BlcmF0aW9uLWd1aWRlLWhlcm8tbWV0YSBlbSB7XG4gIGNvbG9yOiAjNzg5MGEzO1xuICBmb250LXNpemU6IDExcHg7XG4gIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgbGluZS1oZWlnaHQ6IDEuNDU7XG59XG4ub3BlcmF0aW9uLWd1aWRlLWhlcm8tbWV0YSBzdHJvbmcge1xuICBvdmVyZmxvdy13cmFwOiBhbnl3aGVyZTtcbiAgY29sb3I6ICMyMzUwNmU7XG4gIGZvbnQtc2l6ZTogMTZweDtcbiAgbGluZS1oZWlnaHQ6IDEuNDtcbn1cblxuLm9wZXJhdGlvbi1ndWlkZS1qdW1wcyB7XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0byBtaW5tYXgoMCwgMWZyKTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAxNHB4O1xuICBwYWRkaW5nOiAxMnB4IDE0cHg7XG59XG4ub3BlcmF0aW9uLWd1aWRlLWp1bXBzID4gc3Ryb25nIHtcbiAgY29sb3I6ICMzNTVjNzc7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtanVtcHMgPiBkaXYge1xuICBkaXNwbGF5OiBmbGV4O1xuICBtaW4td2lkdGg6IDA7XG4gIGdhcDogOHB4O1xuICBvdmVyZmxvdy14OiBhdXRvO1xuICBwYWRkaW5nOiAycHggMXB4IDVweDtcbiAgb3ZlcnNjcm9sbC1iZWhhdmlvci1pbmxpbmU6IGNvbnRhaW47XG4gIHNjcm9sbGJhci13aWR0aDogdGhpbjtcbiAgc2Nyb2xsLXNuYXAtdHlwZTogeCBwcm94aW1pdHk7XG4gIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtanVtcHMgYSB7XG4gIGZsZXg6IDAgMCBhdXRvO1xuICBzY3JvbGwtc25hcC1hbGlnbjogc3RhcnQ7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNkNmU4ZjM7XG4gIGJvcmRlci1yYWRpdXM6IDk5OXB4O1xuICBiYWNrZ3JvdW5kOiAjZjdmYmZlO1xuICBwYWRkaW5nOiA3cHggMTFweDtcbiAgY29sb3I6ICMzNjcwOGY7XG4gIGZvbnQtc2l6ZTogMTFweDtcbiAgZm9udC13ZWlnaHQ6IDc1MDtcbiAgbGluZS1oZWlnaHQ6IDE7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtanVtcHMgYTpob3Zlcixcbi5vcGVyYXRpb24tZ3VpZGUtanVtcHMgYTpmb2N1cy12aXNpYmxlIHtcbiAgYm9yZGVyLWNvbG9yOiAjM2RiMGRmO1xuICBiYWNrZ3JvdW5kOiAjZWFmOGZlO1xuICBvdXRsaW5lOiBub25lO1xufVxuXG4ub3BlcmF0aW9uLWd1aWRlLWZsb3csXG4ub3BlcmF0aW9uLWd1aWRlLXN0YXR1cyxcbi5vcGVyYXRpb24tZ3VpZGUtY2hlY2tsaXN0LFxuLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9uIHtcbiAgcGFkZGluZzogMjBweDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtZmxvdyA+IGhlYWRlcixcbi5vcGVyYXRpb24tZ3VpZGUtc3RhdHVzID4gaGVhZGVyLFxuLm9wZXJhdGlvbi1ndWlkZS1jaGVja2xpc3QgPiBoZWFkZXIge1xuICBkaXNwbGF5OiBncmlkO1xuICBnYXA6IDVweDtcbiAgbWFyZ2luLWJvdHRvbTogMTRweDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtZmxvdyBoMixcbi5vcGVyYXRpb24tZ3VpZGUtc3RhdHVzIGgyLFxuLm9wZXJhdGlvbi1ndWlkZS1jaGVja2xpc3QgaDIsXG4ub3BlcmF0aW9uLWd1aWRlLXNlY3Rpb24gaDIge1xuICBtYXJnaW46IDA7XG4gIGNvbG9yOiAjMjQ0YTY2O1xuICBmb250LXNpemU6IDE4cHg7XG4gIGxpbmUtaGVpZ2h0OiAxLjM1O1xufVxuLm9wZXJhdGlvbi1ndWlkZS1mbG93IGhlYWRlciBwLFxuLm9wZXJhdGlvbi1ndWlkZS1zdGF0dXMgaGVhZGVyIHAsXG4ub3BlcmF0aW9uLWd1aWRlLXNlY3Rpb24gaGVhZGVyIHAge1xuICBtYXJnaW46IDA7XG4gIGNvbG9yOiAjNzQ4OTlhO1xuICBmb250LXNpemU6IDEycHg7XG4gIGxpbmUtaGVpZ2h0OiAxLjY1O1xufVxuLm9wZXJhdGlvbi1ndWlkZS1mbG93ID4gZGl2IHtcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoNCwgbWlubWF4KDAsIDFmcikpO1xuICBnYXA6IDEwcHg7XG59XG4ub3BlcmF0aW9uLWd1aWRlLWZsb3cgYXJ0aWNsZSB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIG1pbi13aWR0aDogMDtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gIGdhcDogMTBweDtcbiAgYm9yZGVyOiAxcHggc29saWQgI2RjZWFmMztcbiAgYm9yZGVyLXJhZGl1czogMTRweDtcbiAgYmFja2dyb3VuZDogI2ZiZmRmZjtcbiAgcGFkZGluZzogMTNweDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtZmxvdyBhcnRpY2xlID4gc3BhbiB7XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIHdpZHRoOiAzMnB4O1xuICBoZWlnaHQ6IDMycHg7XG4gIGZsZXg6IDAgMCAzMnB4O1xuICBwbGFjZS1pdGVtczogY2VudGVyO1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoMTQ1ZGVnLCAjMmJiM2UzLCAjMTk4ZWM0KTtcbiAgY29sb3I6ICNmZmY7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgZm9udC13ZWlnaHQ6IDkwMDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtZmxvdyBhcnRpY2xlID4gZGl2IHsgZGlzcGxheTogZ3JpZDsgbWluLXdpZHRoOiAwOyBnYXA6IDRweDsgfVxuLm9wZXJhdGlvbi1ndWlkZS1mbG93IGFydGljbGUgc3Ryb25nIHtcbiAgb3ZlcmZsb3ctd3JhcDogYW55d2hlcmU7XG4gIGNvbG9yOiAjMzE1MzZjO1xuICBmb250LXNpemU6IDEzcHg7XG4gIGxpbmUtaGVpZ2h0OiAxLjQ1O1xufVxuLm9wZXJhdGlvbi1ndWlkZS1mbG93IGFydGljbGUgcCB7XG4gIG1hcmdpbjogMDtcbiAgb3ZlcmZsb3ctd3JhcDogYW55d2hlcmU7XG4gIGNvbG9yOiAjNzU4YTljO1xuICBmb250LXNpemU6IDExcHg7XG4gIGxpbmUtaGVpZ2h0OiAxLjY7XG59XG5cbi5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbnMge1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgyLCBtaW5tYXgoMCwgMWZyKSk7XG4gIGdhcDogMTRweDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiB7XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGFsaWduLWNvbnRlbnQ6IHN0YXJ0O1xuICBnYXA6IDE0cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNkOGU4ZjI7XG59XG4ub3BlcmF0aW9uLWd1aWRlLXNlY3Rpb24gPiBoZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBtaW4td2lkdGg6IDA7XG4gIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuICBnYXA6IDEycHg7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZThmMGY1O1xuICBwYWRkaW5nLWJvdHRvbTogMTNweDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiA+IGhlYWRlciA+IHNwYW4ge1xuICBkaXNwbGF5OiBncmlkO1xuICB3aWR0aDogMzZweDtcbiAgaGVpZ2h0OiAzNnB4O1xuICBmbGV4OiAwIDAgMzZweDtcbiAgcGxhY2UtaXRlbXM6IGNlbnRlcjtcbiAgYm9yZGVyLXJhZGl1czogMTFweDtcbiAgYmFja2dyb3VuZDogI2U5ZjdmZDtcbiAgY29sb3I6ICMxNjhmYmU7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgZm9udC13ZWlnaHQ6IDkwMDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiA+IGhlYWRlciA+IGRpdiB7IGRpc3BsYXk6IGdyaWQ7IG1pbi13aWR0aDogMDsgZ2FwOiA0cHg7IH1cbi5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiBoMiB7IGZvbnQtc2l6ZTogMTZweDsgfVxuLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9uIGhlYWRlciBwIHsgb3ZlcmZsb3ctd3JhcDogYW55d2hlcmU7IH1cbi5vcGVyYXRpb24tZ3VpZGUtcnVsZS1saXN0IHtcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ2FwOiAwO1xuICBtYXJnaW46IDA7XG59XG4ub3BlcmF0aW9uLWd1aWRlLXJ1bGUtbGlzdCA+IGRpdiB7XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogbWlubWF4KDExMnB4LCAyOSUpIG1pbm1heCgwLCAxZnIpO1xuICBnYXA6IDEycHg7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZWRmM2Y3O1xuICBwYWRkaW5nOiAxMHB4IDA7XG59XG4ub3BlcmF0aW9uLWd1aWRlLXJ1bGUtbGlzdCA+IGRpdjpmaXJzdC1jaGlsZCB7IHBhZGRpbmctdG9wOiAwOyB9XG4ub3BlcmF0aW9uLWd1aWRlLXJ1bGUtbGlzdCA+IGRpdjpsYXN0LWNoaWxkIHsgYm9yZGVyLWJvdHRvbTogMDsgcGFkZGluZy1ib3R0b206IDA7IH1cbi5vcGVyYXRpb24tZ3VpZGUtcnVsZS1saXN0IGR0IHtcbiAgb3ZlcmZsb3ctd3JhcDogYW55d2hlcmU7XG4gIGNvbG9yOiAjMzM1YTc1O1xuICBmb250LXNpemU6IDEycHg7XG4gIGZvbnQtd2VpZ2h0OiA4MDA7XG4gIGxpbmUtaGVpZ2h0OiAxLjU1O1xufVxuLm9wZXJhdGlvbi1ndWlkZS1ydWxlLWxpc3QgZGQge1xuICBtaW4td2lkdGg6IDA7XG4gIG1hcmdpbjogMDtcbiAgb3ZlcmZsb3ctd3JhcDogYW55d2hlcmU7XG4gIGNvbG9yOiAjNzA4Njk3O1xuICBmb250LXNpemU6IDExcHg7XG4gIGxpbmUtaGVpZ2h0OiAxLjc7XG59XG4ub3BlcmF0aW9uLWd1aWRlLW5vdGUge1xuICBkaXNwbGF5OiBmbGV4O1xuICBtaW4td2lkdGg6IDA7XG4gIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuICBnYXA6IDlweDtcbiAgYm9yZGVyOiAxcHggc29saWQgI2NjZWNkZjtcbiAgYm9yZGVyLXJhZGl1czogMTJweDtcbiAgYmFja2dyb3VuZDogI2YyZmJmNztcbiAgcGFkZGluZzogMTBweCAxMnB4O1xufVxuLm9wZXJhdGlvbi1ndWlkZS1ub3RlIHN0cm9uZyB7XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIHdpZHRoOiAyMXB4O1xuICBoZWlnaHQ6IDIxcHg7XG4gIGZsZXg6IDAgMCAyMXB4O1xuICBwbGFjZS1pdGVtczogY2VudGVyO1xuICBib3JkZXItcmFkaXVzOiA5OXB4O1xuICBiYWNrZ3JvdW5kOiAjMWNhNzc3O1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAxMXB4O1xufVxuLm9wZXJhdGlvbi1ndWlkZS1ub3RlIHNwYW4ge1xuICBtaW4td2lkdGg6IDA7XG4gIG92ZXJmbG93LXdyYXA6IGFueXdoZXJlO1xuICBjb2xvcjogIzRiNzQ2NDtcbiAgZm9udC1zaXplOiAxMXB4O1xuICBsaW5lLWhlaWdodDogMS42NTtcbn1cblxuLm9wZXJhdGlvbi1ndWlkZS10YWJsZS13cmFwIHtcbiAgd2lkdGg6IDEwMCU7XG4gIG1pbi13aWR0aDogMDtcbiAgb3ZlcmZsb3cteDogYXV0bztcbiAgYm9yZGVyOiAxcHggc29saWQgI2RjZTlmMTtcbiAgYm9yZGVyLXJhZGl1czogMTNweDtcbiAgLXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6IHRvdWNoO1xufVxuLm9wZXJhdGlvbi1ndWlkZS1zdGF0dXMgdGFibGUge1xuICB3aWR0aDogMTAwJTtcbiAgbWluLXdpZHRoOiA2ODBweDtcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgdGFibGUtbGF5b3V0OiBmaXhlZDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtc3RhdHVzIHRoLFxuLm9wZXJhdGlvbi1ndWlkZS1zdGF0dXMgdGQge1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2U4ZjBmNTtcbiAgcGFkZGluZzogMTFweCAxMnB4O1xuICBvdmVyZmxvdy13cmFwOiBhbnl3aGVyZTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgdmVydGljYWwtYWxpZ246IHRvcDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtc3RhdHVzIHRoZWFkIHRoIHtcbiAgYmFja2dyb3VuZDogI2YxZjhmYztcbiAgY29sb3I6ICMzYzYwNzg7XG4gIGZvbnQtc2l6ZTogMTFweDtcbiAgZm9udC13ZWlnaHQ6IDg1MDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtc3RhdHVzIHRib2R5IHRoIHtcbiAgd2lkdGg6IDI0JTtcbiAgYmFja2dyb3VuZDogI2ZiZmRmZjtcbiAgY29sb3I6ICMzMTU4NzI7XG4gIGZvbnQtc2l6ZTogMTJweDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtc3RhdHVzIHRib2R5IHRkIHtcbiAgY29sb3I6ICM2ZTg0OTU7XG4gIGZvbnQtc2l6ZTogMTFweDtcbiAgbGluZS1oZWlnaHQ6IDEuNjtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtc3RhdHVzIHRib2R5IHRyOmxhc3QtY2hpbGQgPiAqIHsgYm9yZGVyLWJvdHRvbTogMDsgfVxuXG4ub3BlcmF0aW9uLWd1aWRlLWNoZWNrbGlzdCA+IGRpdiB7XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIG1pbm1heCgwLCAxZnIpKTtcbiAgZ2FwOiAxMHB4O1xufVxuLm9wZXJhdGlvbi1ndWlkZS1jaGVja2xpc3QgYXJ0aWNsZSB7XG4gIG1pbi13aWR0aDogMDtcbiAgYm9yZGVyOiAxcHggc29saWQgI2RjZWFmMztcbiAgYm9yZGVyLXJhZGl1czogMTNweDtcbiAgYmFja2dyb3VuZDogI2ZiZmRmZjtcbiAgcGFkZGluZzogMTNweDtcbn1cbi5vcGVyYXRpb24tZ3VpZGUtY2hlY2tsaXN0IGgzIHtcbiAgbWFyZ2luOiAwIDAgOXB4O1xuICBvdmVyZmxvdy13cmFwOiBhbnl3aGVyZTtcbiAgY29sb3I6ICMzMTU4NzM7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgbGluZS1oZWlnaHQ6IDEuNDU7XG59XG4ub3BlcmF0aW9uLWd1aWRlLWNoZWNrbGlzdCB1bCB7XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdhcDogN3B4O1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG59XG4ub3BlcmF0aW9uLWd1aWRlLWNoZWNrbGlzdCBsaSB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgcGFkZGluZy1sZWZ0OiAxNXB4O1xuICBvdmVyZmxvdy13cmFwOiBhbnl3aGVyZTtcbiAgY29sb3I6ICM3MTg2OTc7XG4gIGZvbnQtc2l6ZTogMTFweDtcbiAgbGluZS1oZWlnaHQ6IDEuNTU7XG59XG4ub3BlcmF0aW9uLWd1aWRlLWNoZWNrbGlzdCBsaTo6YmVmb3JlIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IC41NWVtO1xuICBsZWZ0OiAxcHg7XG4gIHdpZHRoOiA2cHg7XG4gIGhlaWdodDogNnB4O1xuICBib3JkZXItcmFkaXVzOiA5OXB4O1xuICBiYWNrZ3JvdW5kOiAjMjhhOWRjO1xuICBjb250ZW50OiBcIlwiO1xufVxuLm9wZXJhdGlvbi1ndWlkZS1mb290ZXIge1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDJweCAxMnB4IDhweDtcbiAgY29sb3I6ICM3YThlOWY7XG4gIGZvbnQtc2l6ZTogMTFweDtcbiAgbGluZS1oZWlnaHQ6IDEuNjU7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuQG1lZGlhIChtYXgtd2lkdGg6IDEwNDBweCkge1xuICAub3BlcmF0aW9uLWd1aWRlLWZsb3cgPiBkaXYgeyBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgyLCBtaW5tYXgoMCwgMWZyKSk7IH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9ucyB7IGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWZyOyB9XG4gIC5vcGVyYXRpb24tZ3VpZGUtY2hlY2tsaXN0ID4gZGl2IHsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMiwgbWlubWF4KDAsIDFmcikpOyB9XG59XG5cbkBtZWRpYSAobWF4LXdpZHRoOiA3MDBweCkge1xuICAub3BlcmF0aW9uLWd1aWRlLXBhZ2UgeyBnYXA6IDEycHg7IH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1wYWdlIFtpZF0geyBzY3JvbGwtbWFyZ2luLXRvcDogODhweDsgfVxuICAub3BlcmF0aW9uLWd1aWRlLWhlcm8ge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWZyO1xuICAgIGdhcDogMTRweDtcbiAgICBib3JkZXItcmFkaXVzOiAxOHB4O1xuICAgIHBhZGRpbmc6IDIwcHggMTdweDtcbiAgfVxuICAub3BlcmF0aW9uLWd1aWRlLWhlcm8gaDEgeyBmb250LXNpemU6IDMwcHg7IH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1oZXJvIHAgeyBmb250LXNpemU6IDEycHg7IGxpbmUtaGVpZ2h0OiAxLjY1OyB9XG4gIC5vcGVyYXRpb24tZ3VpZGUtaGVyby1tZXRhIHsgcGFkZGluZzogMTFweCAxM3B4OyB9XG4gIC5vcGVyYXRpb24tZ3VpZGUtanVtcHMge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWZyO1xuICAgIGdhcDogOHB4O1xuICAgIHBhZGRpbmc6IDExcHggMTJweCA3cHg7XG4gIH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1mbG93LFxuICAub3BlcmF0aW9uLWd1aWRlLXN0YXR1cyxcbiAgLm9wZXJhdGlvbi1ndWlkZS1jaGVja2xpc3QsXG4gIC5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiB7IHBhZGRpbmc6IDE1cHg7IH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1mbG93ID4gZGl2IHsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnI7IH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1mbG93IGFydGljbGUgeyBwYWRkaW5nOiAxMXB4OyB9XG4gIC5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiA+IGhlYWRlciB7IGdhcDogMTBweDsgfVxuICAub3BlcmF0aW9uLWd1aWRlLXJ1bGUtbGlzdCA+IGRpdiB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnI7XG4gICAgZ2FwOiA0cHg7XG4gICAgcGFkZGluZzogOXB4IDA7XG4gIH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1ydWxlLWxpc3QgZHQgeyBmb250LXNpemU6IDEycHg7IH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1jaGVja2xpc3QgPiBkaXYgeyBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjsgfVxuICAub3BlcmF0aW9uLWd1aWRlLXN0YXR1cyB0YWJsZSB7IG1pbi13aWR0aDogNjEwcHg7IH1cbn1cblxuQG1lZGlhIChtYXgtd2lkdGg6IDM2MHB4KSB7XG4gIC5vcGVyYXRpb24tZ3VpZGUtaGVybyB7IHBhZGRpbmc6IDE4cHggMTRweDsgfVxuICAub3BlcmF0aW9uLWd1aWRlLWhlcm8gaDEgeyBmb250LXNpemU6IDI3cHg7IH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1mbG93LFxuICAub3BlcmF0aW9uLWd1aWRlLXN0YXR1cyxcbiAgLm9wZXJhdGlvbi1ndWlkZS1jaGVja2xpc3QsXG4gIC5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiB7IHBhZGRpbmc6IDEzcHg7IH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1qdW1wcyBhIHsgcGFkZGluZy1pbmxpbmU6IDlweDsgfVxufVxuXG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAub3BlcmF0aW9uLWd1aWRlLXBhZ2UgKiB7IHNjcm9sbC1iZWhhdmlvcjogYXV0byAhaW1wb3J0YW50OyB9XG59XG5cbkBtZWRpYSBwcmludCB7XG4gIC5vcGVyYXRpb24tZ3VpZGUtcGFnZSB7IHdpZHRoOiAxMDAlOyBtYXgtd2lkdGg6IG5vbmU7IGdhcDogMTBweDsgfVxuICAub3BlcmF0aW9uLWd1aWRlLWp1bXBzIHsgZGlzcGxheTogbm9uZTsgfVxuICAub3BlcmF0aW9uLWd1aWRlLWhlcm8sXG4gIC5vcGVyYXRpb24tZ3VpZGUtZmxvdyxcbiAgLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9uLFxuICAub3BlcmF0aW9uLWd1aWRlLXN0YXR1cyxcbiAgLm9wZXJhdGlvbi1ndWlkZS1jaGVja2xpc3QgeyBicmVhay1pbnNpZGU6IGF2b2lkOyBib3gtc2hhZG93OiBub25lOyB9XG4gIC5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbnMgeyBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjsgfVxuICAub3BlcmF0aW9uLWd1aWRlLXN0YXR1cyB0YWJsZSB7IG1pbi13aWR0aDogMDsgfVxufVxuIiwiLyogRXhpc3Rpbmcgb3BlcmF0aW9uIGd1aWRlOiBjdXJyZW50IHRyaWxpbmd1YWwgY2hhcHRlcnMuICovXG4ub3BlcmF0aW9uLWd1aWRlLXBhZ2UgeyBkaXNwbGF5OiBncmlkOyB3aWR0aDogbWluKDEwMCUsIDExODBweCk7IG1pbi13aWR0aDogMDsgZ2FwOiAxNnB4OyBtYXJnaW46IDAgYXV0bzsgfVxuLm9wZXJhdGlvbi1ndWlkZS1wYWdlICosIC5vcGVyYXRpb24tZ3VpZGUtcGFnZSAqOjpiZWZvcmUsIC5vcGVyYXRpb24tZ3VpZGUtcGFnZSAqOjphZnRlciB7IGJveC1zaXppbmc6IGJvcmRlci1ib3g7IH1cbi5vcGVyYXRpb24tZ3VpZGUtcGFnZSA+ICosIC5vcGVyYXRpb24tZ3VpZGUtcGFnZSBkZXRhaWxzLCAub3BlcmF0aW9uLWd1aWRlLXBhZ2Ugc3VtbWFyeSB7IG1pbi13aWR0aDogMDsgfVxuLm9wZXJhdGlvbi1ndWlkZS1wYWdlIFtpZF0geyBzY3JvbGwtbWFyZ2luLXRvcDogMTAwcHg7IH1cbi5vcGVyYXRpb24tZ3VpZGUtaGVybyB7IHBhZGRpbmc6IDI0cHg7IGJvcmRlcjogMXB4IHNvbGlkICNjZmU2ZjQ7IGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCgxNDVkZWcsICNmOGZjZmYsICNlZGY4ZmUpOyB9XG4ub3BlcmF0aW9uLWd1aWRlLWhlcm8tY29weSB7IGRpc3BsYXk6IGdyaWQ7IGdhcDogOHB4OyBtaW4td2lkdGg6IDA7IH1cbi5vcGVyYXRpb24tZ3VpZGUtaGVyby1jb3B5ID4gc3BhbiB7IGNvbG9yOiAjMTU5OGNjOyBmb250LXNpemU6IDEzcHg7IGZvbnQtd2VpZ2h0OiA4MDA7IH1cbi5vcGVyYXRpb24tZ3VpZGUtaGVybyBoMSB7IG1hcmdpbjogMDsgY29sb3I6ICMxNzNiNTg7IGZvbnQtc2l6ZTogY2xhbXAoMjRweCwgM3Z3LCAzNnB4KTsgfVxuLm9wZXJhdGlvbi1ndWlkZS1oZXJvIHAgeyBtYXJnaW46IDA7IGNvbG9yOiAjNjE3YjkwOyBmb250LXNpemU6IDE0cHg7IGxpbmUtaGVpZ2h0OiAxLjc7IG92ZXJmbG93LXdyYXA6IGFueXdoZXJlOyB9XG4ub3BlcmF0aW9uLWd1aWRlLWp1bXBzIHsgcGFkZGluZzogMTZweDsgfVxuLm9wZXJhdGlvbi1ndWlkZS1qdW1wcyA+IHN0cm9uZyB7IGRpc3BsYXk6IGJsb2NrOyBtYXJnaW4tYm90dG9tOiAxMnB4OyBjb2xvcjogIzM1NWM3NzsgZm9udC1zaXplOiAxM3B4OyB9XG4ub3BlcmF0aW9uLWd1aWRlLWp1bXBzID4gZGl2IHsgZGlzcGxheTogZ3JpZDsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMywgbWlubWF4KDAsIDFmcikpOyBnYXA6IDhweDsgfVxuLm9wZXJhdGlvbi1ndWlkZS1qdW1wcyBhIHsgbWluLXdpZHRoOiAwOyBwYWRkaW5nOiA5cHggMTFweDsgYm9yZGVyOiAxcHggc29saWQgI2Q2ZThmMzsgYm9yZGVyLXJhZGl1czogMTBweDsgY29sb3I6ICMzNjcwOGY7IGJhY2tncm91bmQ6ICNmN2ZiZmU7IGZvbnQtc2l6ZTogMTJweDsgbGluZS1oZWlnaHQ6IDEuNTsgb3ZlcmZsb3ctd3JhcDogYW55d2hlcmU7IHRleHQtZGVjb3JhdGlvbjogbm9uZTsgfVxuLm9wZXJhdGlvbi1ndWlkZS1qdW1wcyBhOmhvdmVyLCAub3BlcmF0aW9uLWd1aWRlLWp1bXBzIGE6Zm9jdXMtdmlzaWJsZSB7IGJhY2tncm91bmQ6ICNlYWY4ZmU7IGJvcmRlci1jb2xvcjogIzNkYjBkZjsgfVxuLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9ucyB7IGRpc3BsYXk6IGdyaWQ7IGdhcDogMTJweDsgfVxuLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9uIHsgZGlzcGxheTogYmxvY2s7IHBhZGRpbmc6IDA7IGJvcmRlcjogMXB4IHNvbGlkICNkOGU4ZjI7IH1cbi5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiA+IHN1bW1hcnkgeyBkaXNwbGF5OiBmbGV4OyBhbGlnbi1pdGVtczogY2VudGVyOyBnYXA6IDEycHg7IGN1cnNvcjogcG9pbnRlcjsgcGFkZGluZzogMTZweDsgbGlzdC1zdHlsZTogbm9uZTsgfVxuLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9uID4gc3VtbWFyeTo6LXdlYmtpdC1kZXRhaWxzLW1hcmtlciB7IGRpc3BsYXk6IG5vbmU7IH1cbi5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiA+IHN1bW1hcnkgPiBzcGFuIHsgZmxleDogMCAwIDMycHg7IGRpc3BsYXk6IGdyaWQ7IHBsYWNlLWl0ZW1zOiBjZW50ZXI7IHdpZHRoOiAzMnB4OyBoZWlnaHQ6IDMycHg7IGJvcmRlci1yYWRpdXM6IDlweDsgY29sb3I6ICMxNjhiYjY7IGJhY2tncm91bmQ6ICNlZGY4ZmQ7IGZvbnQtc2l6ZTogMTJweDsgZm9udC13ZWlnaHQ6IDgwMDsgfVxuLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9uID4gc3VtbWFyeTo6YWZ0ZXIgeyBjb250ZW50OiAnKyc7IG1hcmdpbi1sZWZ0OiBhdXRvOyBmbGV4OiAwIDAgMThweDsgY29sb3I6ICMzNjcwOGY7IGZvbnQtc2l6ZTogMjJweDsgfVxuLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9uW29wZW5dID4gc3VtbWFyeTo6YWZ0ZXIgeyBjb250ZW50OiAn4oiSJzsgfVxuLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9uIGgyIHsgbWFyZ2luOiAwOyBtaW4td2lkdGg6IDA7IGNvbG9yOiAjMjQ0YTY2OyBmb250LXNpemU6IDE2cHg7IGxpbmUtaGVpZ2h0OiAxLjU7IG92ZXJmbG93LXdyYXA6IGFueXdoZXJlOyB9XG4ub3BlcmF0aW9uLWd1aWRlLXJ1bGUtbGlzdCB7IG1hcmdpbjogMDsgcGFkZGluZzogMCAxNnB4IDE2cHg7IH1cbi5vcGVyYXRpb24tZ3VpZGUtcnVsZS1saXN0ID4gZGl2IHsgZGlzcGxheTogZ3JpZDsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBtaW5tYXgoMTIwcHgsIDE4MHB4KSBtaW5tYXgoMCwgMWZyKTsgZ2FwOiAxOHB4OyBib3JkZXItdG9wOiAxcHggc29saWQgI2U4ZjBmNTsgcGFkZGluZzogMTRweCAwOyB9XG4ub3BlcmF0aW9uLWd1aWRlLXJ1bGUtbGlzdCBkdCB7IGZvbnQtd2VpZ2h0OiA3NTA7IGNvbG9yOiAjMzE1ODcyOyB9XG4ub3BlcmF0aW9uLWd1aWRlLXJ1bGUtbGlzdCBkZCB7IG1hcmdpbjogMDsgY29sb3I6ICM1MjZjODA7IH1cbi5vcGVyYXRpb24tZ3VpZGUtcnVsZS1saXN0IGR0LCAub3BlcmF0aW9uLWd1aWRlLXJ1bGUtbGlzdCBkZCB7IG1pbi13aWR0aDogMDsgZm9udC1zaXplOiAxNHB4OyBsaW5lLWhlaWdodDogMS43NTsgb3ZlcmZsb3ctd3JhcDogYW55d2hlcmU7IH1cbi5vcGVyYXRpb24tZ3VpZGUtc2VjdGlvbiA+IGgzIHsgbWFyZ2luOiAwIDE2cHggMTBweDsgZm9udC1zaXplOiAxNHB4OyBjb2xvcjogIzMxNTg3MjsgfVxuLm9wZXJhdGlvbi1ndWlkZS1wZXJtaXNzaW9uLW5vZGVzIHsgZGlzcGxheTogZ3JpZDsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMywgbWlubWF4KDAsIDFmcikpOyBnYXA6IDhweDsgbWFyZ2luOiAwOyBwYWRkaW5nOiAwIDE2cHggMTZweDsgbGlzdC1zdHlsZTogbm9uZTsgfVxuLm9wZXJhdGlvbi1ndWlkZS1wZXJtaXNzaW9uLW5vZGVzIGxpIHsgcGFkZGluZzogOXB4IDExcHg7IGJvcmRlci1yYWRpdXM6IDlweDsgYmFja2dyb3VuZDogI2YzZjlmYzsgY29sb3I6ICM1MjZjODA7IGZvbnQtc2l6ZTogMTNweDsgb3ZlcmZsb3ctd3JhcDogYW55d2hlcmU7IH1cbi5vcGVyYXRpb24tZ3VpZGUtZm9vdGVyIHsgcGFkZGluZzogMnB4IDEycHggOHB4OyBjb2xvcjogIzYxN2I5MDsgZm9udC1zaXplOiAxMnB4OyBsaW5lLWhlaWdodDogMS43OyB0ZXh0LWFsaWduOiBjZW50ZXI7IG92ZXJmbG93LXdyYXA6IGFueXdoZXJlOyB9XG5AbWVkaWEgKG1heC13aWR0aDogMTA0MHB4KSB7IC5vcGVyYXRpb24tZ3VpZGUtanVtcHMgPiBkaXYsIC5vcGVyYXRpb24tZ3VpZGUtcGVybWlzc2lvbi1ub2RlcyB7IGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDIsIG1pbm1heCgwLCAxZnIpKTsgfSB9XG5AbWVkaWEgKG1heC13aWR0aDogNzAwcHgpIHtcbiAgLm9wZXJhdGlvbi1ndWlkZS1wYWdlIHsgZ2FwOiAxMnB4OyB9XG4gIC5vcGVyYXRpb24tZ3VpZGUtaGVybyB7IHBhZGRpbmc6IDE4cHggMTZweDsgfVxuICAub3BlcmF0aW9uLWd1aWRlLWp1bXBzID4gZGl2LCAub3BlcmF0aW9uLWd1aWRlLXBlcm1pc3Npb24tbm9kZXMgeyBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjsgfVxuICAub3BlcmF0aW9uLWd1aWRlLXNlY3Rpb24gPiBzdW1tYXJ5IHsgZ2FwOiA5cHg7IHBhZGRpbmc6IDE0cHg7IH1cbiAgLm9wZXJhdGlvbi1ndWlkZS1zZWN0aW9uIGgyIHsgZm9udC1zaXplOiAxNXB4OyB9XG4gIC5vcGVyYXRpb24tZ3VpZGUtcnVsZS1saXN0ID4gZGl2IHsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnI7IGdhcDogNHB4OyB9XG59XG4iXV0= */

/* QIDIAN_WORKFORCE_FILTERS_LOADING_V1 */
.tenant-data-status.is-loading { display: flex !important; }
/* END_QIDIAN_WORKFORCE_FILTERS_LOADING_V1 */

/* QIDIAN_EMPLOYEE_RELATIONSHIP_AVATAR_STABILITY_STYLES_V1 */
.permission-account-cell { align-items:center !important; min-width:0; }
.permission-account-avatar { position:relative; display:inline-grid !important; place-items:center; width:34px !important; height:34px !important; min-width:34px !important; max-width:34px !important; min-height:34px !important; max-height:34px !important; flex:0 0 34px !important; aspect-ratio:1 / 1; overflow:hidden; border-radius:50% !important; padding:0 !important; margin:0 !important; line-height:1 !important; transform:none !important; }
.permission-account-avatar > img { display:block; width:100% !important; height:100% !important; object-fit:cover; border-radius:inherit; }
.permission-account-copy { display:grid; min-width:0; gap:2px; align-content:center; }
.permission-account-copy > :is(strong,small) { min-width:0; max-width:100%; }
@media (max-width:760px) { .permission-account-cell { align-items:center !important; } }

/* QIDIAN_LEADER_IMPORT_FILTER_ISOLATION_STYLES_V1 */
.attendance-import-stage-progress { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:0; margin:12px 0; list-style:none; }
.attendance-import-stage-progress li { display:grid; justify-items:center; gap:5px; min-width:0; color:#708097; font-size:12px; text-align:center; }
.attendance-import-stage-progress li > span { width:12px; height:12px; border-radius:50%; border:2px solid #c9d5e4; background:#fff; }
.attendance-import-stage-progress li[data-state="active"] { color:#086c8d; font-weight:700; }
.attendance-import-stage-progress li[data-state="active"] > span { border-color:#22a8d8; box-shadow:0 0 0 4px rgba(34,168,216,.14); }
.attendance-import-stage-progress li[data-state="done"] > span { border-color:#2eaa72; background:#2eaa72; }
.attendance-import-stage-progress li[data-state="error"] { color:#b53142; }
.attendance-import-stage-progress li[data-state="error"] > span { border-color:#e55363; background:#fff1f3; }
@media (max-width:760px) { .attendance-import-stage-progress { gap:4px; } .attendance-import-stage-progress li { font-size:10px; } }

/* QIDIAN_SIX_NAVIGATION_ATTENDANCE_SCOPE_STYLES_V1 */
/* Force refresh stays silent when usable cached content exists. */
.tenant-data-status.is-loading { display:none !important; }

.schedule-mobile-filter-panel { display:block; min-width:0; }
.schedule-mobile-filter-panel > summary { display:none; }
.schedule-operations-table :is(th:nth-last-child(6),th:nth-last-child(5),.schedule-col-weekly,.schedule-col-unregistered,.schedule-col-absent) {
  width:152px !important; min-width:152px !important; max-width:152px !important;
  height:52px; padding:12px 16px !important; font-size:12px; line-height:1.25;
}
.schedule-metric-header::after { content:"↕"; display:inline-grid; place-items:center; width:20px; height:20px; margin-left:8px; border-radius:6px; color:#52718a; background:#edf4f8; font-size:11px; }
.schedule-metric-header[aria-sort="ascending"]::after { content:"↑"; }
.schedule-metric-header[aria-sort="descending"]::after { content:"↓"; }

@media (max-width:700px) {
  .schedule-mobile-filter-panel { margin:0 12px 12px; border:1px solid #d6e6f1; border-radius:14px; background:#f9fcff; overflow:hidden; }
  .schedule-mobile-filter-panel > summary { display:flex; min-height:44px; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; color:#315b75; cursor:pointer; list-style:none; }
  .schedule-mobile-filter-panel > summary::-webkit-details-marker { display:none; }
  .schedule-mobile-filter-panel > summary span { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:#e8f5fb; transition:transform .18s ease; }
  .schedule-mobile-filter-panel[open] > summary span { transform:rotate(180deg); }
  .schedule-mobile-filter-panel > .schedule-filter-bar { display:grid !important; grid-template-columns:minmax(0,1fr) !important; max-height:min(68vh,620px); gap:9px !important; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:10px 12px 14px !important; }
  .schedule-mobile-filter-panel > .schedule-filter-bar > label,
  .schedule-mobile-filter-panel > .schedule-filter-bar :is(input,select) { display:grid !important; width:100% !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; }
}

/* One shared photo-or-name avatar in employee identity rows. */
.employee-avatar-mini[data-qidian-employee-name],
.schedule-avatar[data-qidian-employee-name],
.permission-account-avatar[data-qidian-employee-name] {
  background: var(--qidian-employee-avatar-background, #64748b) !important;
  color: #fff !important;
}
.qidian-employee-avatar { position: relative; background: var(--qidian-employee-avatar-background, #64748b) !important; color: #fff !important; }
.qidian-employee-avatar > .qidian-employee-avatar-initial { display: grid; place-items: center; width: 100%; height: 100%; }
.qidian-employee-avatar > img[data-qidian-avatar-photo] { display: none !important; }
.qidian-employee-avatar[data-photo-state="loaded"] > .qidian-employee-avatar-initial { visibility: hidden; }
.qidian-employee-avatar[data-photo-state="loaded"] > img[data-qidian-avatar-photo] { display: block !important; position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: inherit; }

.qidian-bulk-employee-dialog {
  box-sizing: border-box;
  width: min(800px, calc(100vw - 32px));
  max-width: none;
  max-height: min(90dvh, 920px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8e4f2;
  border-radius: 18px;
  color: #172b4d;
  background: #fff;
  box-shadow: 0 24px 70px rgb(15 45 80 / 20%);
}
.qidian-bulk-employee-dialog[open] { display: flex; flex-direction: column; }
.qidian-bulk-employee-dialog::backdrop { background: rgb(15 35 65 / 55%); }
.qidian-bulk-employee-content { box-sizing: border-box; display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-width: 0; min-height: 0; }
.qidian-bulk-header, .qidian-bulk-footer { flex: 0 0 auto; background: #fff; }
.qidian-bulk-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 18px; border-bottom: 1px solid #e8eef6; }
.qidian-bulk-header h2 { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.35; }
.qidian-bulk-header p { margin: 0; color: #5f7088; font-size: .9rem; }
.qidian-bulk-close { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid #dbe5f1; border-radius: 10px; background: #f8fbff; color: #516782; font-size: 1.35rem; cursor: pointer; }
.qidian-bulk-close:hover { background: #eaf4fc; }
.qidian-bulk-body { box-sizing: border-box; flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 8px 28px 24px; }
.qidian-bulk-section { padding-top: 16px; }
.qidian-bulk-section + .qidian-bulk-section { margin-top: 20px; border-top: 1px solid #e8eef6; }
.qidian-bulk-section h3 { margin: 0 0 14px; color: #1f446b; font-size: 1rem; }
.qidian-bulk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qidian-bulk-fields label { display: grid; gap: 7px; min-width: 0; color: #4a607a; font-size: .88rem; font-weight: 600; }
.qidian-bulk-fields input, .qidian-bulk-fields select { box-sizing: border-box; width: 100%; min-width: 0; height: 42px; }
.qidian-bulk-drop { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 158px; padding: 18px; border: 2px dashed #9ecae9; border-radius: 14px; background: #f7fbff; color: #24537c; text-align: center; cursor: pointer; }
.qidian-bulk-drop:hover, .qidian-bulk-drop:focus-visible, .qidian-bulk-drop.is-dragging { border-color: #209bd0; background: #eaf7ff; outline: none; }
.qidian-bulk-drop.has-file { border-style: solid; border-color: #9cd6c3; background: #f5fcf9; }
.qidian-bulk-drop.is-error { border-color: #eb9696; background: #fff7f7; }
.qidian-bulk-drop strong { font-size: 1rem; }
.qidian-bulk-drop span:not(.qidian-bulk-file-icon) { color: #257da9; font-weight: 600; }
.qidian-bulk-drop small { color: #70839a; }
.qidian-bulk-file-icon { display: inline-grid; flex: 0 0 34px; place-items: center; width: 34px; height: 38px; border-radius: 8px; background: #e0f2fe; color: #178bc1; font-size: 1.3rem; line-height: 1; }
.qidian-bulk-file-input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.qidian-bulk-selected { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 10px; padding: 10px 12px; border: 1px solid #d8e8e2; border-radius: 10px; background: #f8fcfa; }
.qidian-bulk-selected[hidden] { display: none; }
.qidian-bulk-file-details { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.qidian-bulk-file-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qidian-bulk-file-details small { color: #64748b; }
.qidian-bulk-template { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border: 1px solid #dbe8f4; border-radius: 10px; background: #f8fbff; }
.qidian-bulk-template > div { display: grid; gap: 4px; min-width: 0; }
.qidian-bulk-template strong { font-size: .87rem; }
.qidian-bulk-template small, .qidian-bulk-preview-hint { color: #687b94; font-size: .82rem; }
.qidian-bulk-template button { flex: 0 0 auto; }
.qidian-bulk-preview-hint { margin: -4px 0 14px; }
.qidian-bulk-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qidian-bulk-stat { display: grid; gap: 4px; min-width: 0; padding: 13px 14px; border: 1px solid #cbe6f5; border-radius: 12px; background: #f2f9fd; color: #236d97; }
.qidian-bulk-stat:nth-child(2) { border-color: #c8e9da; background: #f1faf5; color: #197b55; }
.qidian-bulk-stat:nth-child(3) { border-color: #d8e0ec; background: #f6f8fb; color: #52657c; }
.qidian-bulk-stat:nth-child(4) { border-color: #f4d7b6; background: #fff8f1; color: #a8641d; }
.qidian-bulk-stat.is-error { border-color: #f0b9b9; background: #fff4f4; color: #b44545; }
.qidian-bulk-stat strong { font-size: 1.5rem; line-height: 1; }
.qidian-bulk-stat span { font-size: .82rem; font-weight: 600; }
.qidian-bulk-errors { max-height: 230px; overflow-y: auto; margin-top: 14px; padding: 14px; border: 1px solid #f1c6c6; border-radius: 12px; background: #fff8f8; }
.qidian-bulk-errors h4 { margin: 0 0 8px; color: #a43636; font-size: .93rem; }
.qidian-bulk-error-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-top: 1px solid #f7dfdf; color: #793838; font-size: .84rem; }
.qidian-bulk-error-row strong { min-width: 58px; }
.qidian-bulk-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 28px; border-top: 1px solid #e8eef6; box-shadow: 0 -6px 20px rgb(30 70 100 / 4%); }
.qidian-bulk-footer > span { color: #687b94; font-size: .81rem; }
.qidian-bulk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.qidian-bulk-employee-dialog.is-busy [data-bulk-preview]:disabled:not(:empty)::before,
.qidian-bulk-employee-dialog.is-busy [data-bulk-confirm]:disabled:not(:empty)::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: qidian-bulk-spin .7s linear infinite; }
@keyframes qidian-bulk-spin { to { transform: rotate(360deg); } }
@media (max-width: 650px) {
  .qidian-bulk-employee-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
  .qidian-bulk-header { padding: 18px 16px 14px; }
  .qidian-bulk-body { padding: 6px 16px 18px; }
  .qidian-bulk-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qidian-bulk-template { align-items: flex-start; flex-direction: column; }
  .qidian-bulk-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qidian-bulk-footer { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
  .qidian-bulk-actions { align-self: stretch; }
  .qidian-bulk-actions button { flex: 1 1 auto; }
}

/* Employee directory actions have one layout, independent of legacy row grids. */
.employee-compact-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; width: max-content; }
.employee-compact-actions .button { flex: 0 0 auto; width: auto; min-width: max-content; height: 36px; padding: 0 10px; white-space: nowrap; }
.employee-more-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.employee-more-actions .button { width: auto; min-width: max-content; white-space: nowrap; }
.employee-more-details p { margin: 8px 0; }
@media (max-width: 767px) {
  .employee-compact-actions { gap: 6px; }
  .employee-compact-actions .button { height: 32px; min-height: 32px; font-size: 12px; padding: 0 8px; }
}