/* Schedule design tokens and typography are scoped away from the POS shell. */
@font-face { font-family: 'Work Schedule Sora'; src: url('../../portal/assets/sora-latin-400-normal-CRt88UEn.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Work Schedule Sora'; src: url('../../portal/assets/sora-latin-500-normal-01eiPEn0.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Work Schedule Sora'; src: url('../../portal/assets/sora-latin-600-normal-Cdg4DaK0.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Work Schedule Sora'; src: url('../../portal/assets/sora-latin-700-normal-9waGdLWo.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
.work-schedule-container.ws2-preview-active { height: 100%; min-height: 0; overflow: hidden; }
.ws2, .ws2-dialog {
  --ws2-green:var(--pos-primary,#3b8c2b); --ws2-soft:var(--pos-primary-soft,#eaf5e6);
  --ws2-primary-ink:var(--pos-primary-text,#2f7322); --ws2-on-primary:var(--pos-primary-ink,#fff);
  --ws2-text:var(--pos-text,#1f2328); --ws2-muted:var(--pos-muted,#6b7280);
  --ws2-line:var(--pos-border,#e7e7e4); --ws2-bg:var(--pos-canvas,#f7f7f5); --ws2-white:var(--pos-surface,#fff);
  --ws2-red:#e5484d; --ws2-amber:var(--ws2-warning-ink);
  --ws2-danger-ink:var(--pos-danger-ink,color-mix(in srgb,#e5484d 70%,var(--ws2-text)));
  --ws2-danger-fill:var(--pos-danger-fill,#ce383e); --ws2-on-danger:var(--pos-danger-fill-ink,#fff);
  --ws2-danger-soft:color-mix(in srgb,#e5484d 9%,var(--ws2-white));
  --ws2-danger-line:color-mix(in srgb,#e5484d 40%,var(--ws2-white));
  --ws2-warning-ink:var(--pos-warn-ink,color-mix(in srgb,#b45309 60%,var(--ws2-text)));
  --ws2-warning-soft:color-mix(in srgb,#f08c2e 10%,var(--ws2-white));
  --ws2-warning-line:color-mix(in srgb,#f08c2e 40%,var(--ws2-white));
  --ws2-info-soft:color-mix(in srgb,#3086cc 10%,var(--ws2-white));
  --ws2-info-ink:color-mix(in srgb,#3086cc 40%,var(--ws2-text));
  --ws2-violet-soft:color-mix(in srgb,#7353ba 10%,var(--ws2-white));
  --ws2-violet-ink:color-mix(in srgb,#7353ba 40%,var(--ws2-text));
  font: 400 13px/1.5 'Work Schedule Sora', 'Sora', sans-serif; letter-spacing: 0; color: var(--ws2-text); -webkit-font-smoothing: antialiased;
}
.ws2 *, .ws2-dialog * { box-sizing: border-box; letter-spacing: 0; }
.ws2 [hidden], .ws2-dialog [hidden] { display: none !important; }
.ws2 { position: relative; isolation: isolate; display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; height: 100%; overflow: hidden; background: var(--ws2-bg); }
.ws2 h1, .ws2 h2, .ws2 h3, .ws2 p, .ws2 dl, .ws2 dd, .ws2 ol, .ws2 ul, .ws2-dialog h2, .ws2-dialog h3, .ws2-dialog p, .ws2-dialog dl, .ws2-dialog dd { margin: 0; }
.ws2 h1 { font-size: 18px; font-weight: 600; line-height: 24px; }
.ws2 h2 { font-size: 14px; font-weight: 600; line-height: 20px; }
.ws2 h3, .ws2-dialog h3 { font-size: 13px; font-weight: 600; }
.ws2 p, .ws2 small, .ws2-dialog small, .ws2-muted { color: var(--ws2-muted); }
.ws2 button, .ws2 summary, .ws2-dialog button { font: inherit; cursor: pointer; color: inherit; text-transform: none; text-indent: 0; box-shadow: none; margin: 0; }
.ws2 button::before, .ws2 button::after, .ws2-dialog button::before, .ws2-dialog button::after { content: none !important; }
.ws2 button:disabled, .ws2-dialog button:disabled { cursor: not-allowed; opacity: .4; }
.ws2 button:focus-visible, .ws2 summary:focus-visible, .ws2-dialog button:focus-visible, .ws2 input:focus-visible, .ws2 select:focus-visible, .ws2-dialog input:focus-visible, .ws2-dialog select:focus-visible, .ws2-dialog textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--ws2-green) 40%, transparent); outline-offset: 2px; }
.ws2-icon { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; vertical-align: middle; }
.ws2-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.ws2 .ws2-btn, .ws2-dialog .ws2-btn, .ws2 .ws2-tool, .ws2-dialog .ws2-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-height: 36px; padding: 0 12px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; background: var(--pos-surface, #fff); font-weight: 500; line-height: 20px; white-space: nowrap; }
.ws2 .ws2-tool, .ws2-dialog .ws2-tool { flex: 0 0 36px; width: 36px; padding: 0; }
.ws2 .ws2-btn:hover, .ws2 .ws2-tool:hover, .ws2-dialog .ws2-btn:hover, .ws2-dialog .ws2-tool:hover { background: var(--pos-canvas, #f7f7f5); }
.ws2 .ws2-primary, .ws2-dialog .ws2-primary { color: var(--pos-primary-fill-ink, #fff); background: var(--pos-primary-fill, var(--ws2-green)); border-color: var(--pos-primary-fill, var(--ws2-green)); font-weight: 600; }
.ws2 .ws2-primary:hover, .ws2-dialog .ws2-primary:hover { color: var(--pos-primary-fill-ink, #fff); background: var(--pos-primary-fill-hover, var(--ws2-primary-ink)); }
.ws2-dialog .ws2-danger { background: var(--ws2-danger-fill); border-color: var(--ws2-danger-fill); color: var(--ws2-on-danger); }
.ws2-dialog .ws2-danger:hover { background: var(--ws2-danger-fill); color: var(--ws2-on-danger); }
.ws2-dialog .ws2-danger-text { color: var(--ws2-danger-ink); }
.ws2 .ws2-amber { color: var(--ws2-warning-ink); background: var(--ws2-warning-soft); border-color: var(--ws2-warning-line); font-weight: 600; }
.ws2-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; border-bottom: 1px solid var(--ws2-line); background: var(--pos-surface, #fff); padding: 6px 12px; min-height: 55px; }
.ws2-heading { margin-right: auto; min-width: 0; }
.ws2-heading p { font-size: 12px; line-height: 16px; }
.ws2-preview { display: inline-block; font-size: 9px; vertical-align: middle; color: var(--ws2-warning-ink); background: var(--ws2-warning-soft); padding: 1px 4px; border: 1px solid var(--ws2-warning-line); border-radius: 4px; font-weight: 500; line-height: 14px; }
.ws2-week-picker { display: flex; align-items: center; height: 36px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; overflow: hidden; }
.ws2-week-picker .ws2-tool { border: 0; border-radius: 0; height: 34px; min-height: 34px; }
.ws2-week-picker .ws2-btn { border-width: 0 1px; border-radius: 0; color: var(--ws2-primary-ink); height: 34px; min-height: 34px; font-weight: 600; }
.ws2-week-picker .ws2-btn:disabled { color: var(--pos-muted, #9ca3af); opacity: 1; cursor: default; }
.ws2 .ws2-week-label { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 200px; border: 0; border-left: 1px solid var(--pos-border, #e2e4e8); padding: 0 10px; background: var(--pos-surface, #fff); font-weight: 600; white-space: nowrap; }
.ws2-week-label > .ws2-icon { color: var(--pos-muted, #8a8f98); width: 14px; height: 14px; }
.ws2-header-actions { display: flex; align-items: center; gap: 8px; }
.ws2 .ws2-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 50%; color: var(--ws2-on-danger); background: var(--ws2-danger-fill); font-size: 10px; font-weight: 700; padding: 0 4px; line-height: 18px; }
.ws2-more, .ws2-filters { position: relative; }
.ws2 summary { list-style: none; }
.ws2 summary::-webkit-details-marker { display: none; }
.ws2-more > summary { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; background: var(--pos-surface, #fff); color: var(--pos-muted, #4b5563); }
.ws2-more > div, .ws2-filters > div { position: absolute; top: calc(100% + 6px); right: 0; z-index: 45; padding: 6px; background: var(--pos-surface, #fff); border: 1px solid var(--ws2-line); box-shadow: 0 14px 36px #00000024; border-radius: 12px; min-width: 210px; }
.ws2-more .ws2-btn { width: 100%; justify-content: flex-start; border: 0; }
.ws2-content { position: relative; flex: 1; min-height: 0; min-width: 0; overflow: hidden; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.ws2-content[aria-busy="true"] { pointer-events: none; }
.ws2-refresh { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px; background: color-mix(in srgb, var(--ws2-bg) 85%, transparent); color: var(--pos-text, #374151); font-weight: 500; }
.ws2-panel-loading { padding: 4px 0; }
.ws2-skeleton { border-radius: 6px; background: linear-gradient(100deg, var(--pos-surface2, #eff1ed) 25%, var(--pos-canvas, #f8faf6) 45%, var(--pos-surface2, #eff1ed) 65%); background-size: 240% 100%; animation: ws2-shimmer 1.5s ease-in-out infinite; }
.ws2-skeleton-title { height: 24px; width: 42%; margin-bottom: 24px; }
.ws2-skeleton-card { border: 1px solid var(--ws2-line); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.ws2-skeleton-label { width: 35%; height: 14px; margin-bottom: 12px; }
.ws2-skeleton-field { height: 36px; width: 100%; }
.ws2-progress { display: inline-flex; align-items: center; gap: 6px; color: var(--pos-muted, #6b7280); font-size: 12px; min-width: 0; }
.ws2-dialog footer:has([data-ws-busy-label]) > .ws2-progress { display: none; }
.ws2-progress .ws2-icon, .ws2-refresh .ws2-icon, [data-ws-busy-label] .ws2-icon { animation: ws2-spin 1s linear infinite; }
@keyframes ws2-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes ws2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ws2-skeleton, .ws2-progress .ws2-icon, .ws2-refresh .ws2-icon, [data-ws-busy-label] .ws2-icon { animation: none; } }
.ws2-isolated { flex: none; padding: 8px 10px; border: 1px solid var(--ws2-warning-line); border-radius: 8px; background: var(--ws2-warning-soft); color: var(--ws2-warning-ink); font-size: 12px; overflow-wrap: anywhere; }
.ws2-isolated p { margin: 4px 0; }
.ws2-isolated summary { cursor: pointer; }
.ws2-isolated ul { max-height: 200px; overflow: auto; margin: 6px 0 0; padding-left: 20px; }
.ws2-isolated li { margin-bottom: 6px; }
.ws2-hours { display: flex; align-items: center; border: 1px solid var(--ws2-line); background: var(--pos-surface, #fff); border-radius: 12px; padding: 8px 10px; gap: 10px; flex: none; min-width: 0; }
.ws2-hours-icon, .ws2-stat-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ws2-soft); color: var(--ws2-primary-ink); flex: none; }
.ws2-hours-summary { width: 170px; flex: none; min-width: 0; }
.ws2-hours h2 { font-size: 13px; line-height: 16px; }
.ws2-hours-summary p { display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 16px; margin-top: 2px; white-space: nowrap; overflow: hidden; }
.ws2-hours-summary strong { color: var(--pos-text, #1f2328); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ws2-open-dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ws2-green); }
.ws2-closed-dot { background: var(--ws2-danger-ink); }
.ws2 .ws2-hours-groups { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; list-style: none; padding: 0; }
.ws2-hours-groups li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; background: var(--pos-surface2, #f5f5f3); color: var(--pos-text, #374151); border-radius: 6px; font-size: 12px; white-space: nowrap; }
.ws2-hours-groups b { font-weight: 600; }
.ws2-hours-groups .ws2-current-hours { background: var(--pos-primary-soft, #eaf5e6); color: var(--ws2-primary-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ws2-green) 30%, transparent); }
.ws2-hours-groups .ws2-special-chip { background: var(--ws2-warning-soft); color: var(--ws2-warning-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ws2-hours-actions { display: flex; gap: 4px; margin-left: auto; }
.ws2-hours-actions .ws2-tool { width: 32px; height: 32px; min-height: 32px; flex-basis: 32px; }
.ws2-hours-actions [data-ws-action="toggle-hours"] { display: none; border: 0; }
.ws2-tip { display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 4px 6px 10px; border: 1px solid var(--pos-border, #d9edd1); border-radius: 8px; background: var(--pos-primary-soft, #f4faf1); }
.ws2-tip > .ws2-icon { color: var(--ws2-green); }
.ws2-tip > div { min-width: 0; flex: 1; }
.ws2-tip p { font-size: 12px; line-height: 16px; color: var(--pos-text, #374151); }
.ws2-tip strong { color: var(--pos-text, #1f2328); font-weight: 600; }
.ws2-tip .ws2-tool { width: 28px; height: 28px; min-height: 28px; flex-basis: 28px; border: 0; background: transparent; color: var(--pos-muted, #6b7280); }
.ws2-tip .ws2-tool .ws2-icon { width: 14px; height: 14px; }
.ws2-tip [data-ws-action="expand-tip"] { display: none; }
.ws2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: none; }
.ws2-stats > div { display: flex; align-items: center; gap: 10px; background: var(--pos-surface, #fff); border: 1px solid var(--ws2-line); border-radius: 12px; padding: 6px 10px; min-width: 0; min-height: 64px; }
.ws2-stat-icon { width: 36px; height: 36px; }
.ws2-stat-icon .ws2-icon { width: 18px; height: 18px; }
.ws2-stats > div:nth-child(2) .ws2-stat-icon { color: var(--ws2-info-ink); background: var(--ws2-info-soft); }
.ws2-stats > div:nth-child(3) .ws2-stat-icon { color: var(--ws2-warning-ink); background: var(--ws2-warning-soft); }
.ws2-stats > div > div { min-width: 0; flex: 1; }
.ws2-stats dt { display: flex; align-items: center; gap: 4px; color: var(--pos-muted, #6b7280); font-size: 12px; line-height: 16px; }
.ws2-stats dt > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2-info { display: inline-flex; color: var(--pos-muted, #a6adb8); }
.ws2-info .ws2-icon { width: 13px; height: 13px; }
.ws2-stats dd { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ws2-stats dd strong { font-size: 18px; line-height: 24px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws2-stats dd strong small { font-size: 13px; font-weight: 500; color: var(--pos-muted, #8a8f98); }
.ws2-stats dd > span { color: var(--pos-muted, #8a8f98); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2-attention { flex: none; }
.ws2-attention h2 { margin-bottom: 4px; padding: 0 2px; color: var(--pos-muted, #4b5563); font-size: 12px; line-height: 16px; }
.ws2-attention > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ws2-attention button { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid var(--ws2-line); border-radius: 12px; background: var(--pos-surface, #fff); padding: 6px 10px; text-align: left; }
.ws2-attention button:hover { border-color: var(--pos-border, #cfe6c8); box-shadow: 0 2px 8px #0000000a; }
.ws2-attention button > b { display: grid; place-items: center; min-width: 32px; height: 32px; color: var(--ws2-warning-ink); background: var(--ws2-warning-soft); border-radius: 8px; padding: 0 6px; font-size: 14px; }
.ws2-attention [data-ws-action="filter-without"] > b { background: var(--pos-primary-soft, #eaf5e6); color: var(--ws2-primary-ink); }
.ws2-attention button > span { flex: 1; min-width: 0; }
.ws2-attention strong { display: block; font-weight: 600; font-size: 13px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2-attention small { display: block; font-size: 11px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2-attention em { display: inline-flex; align-items: center; color: var(--ws2-green); font-size: 12px; font-weight: 600; font-style: normal; }
.ws2-attention em .ws2-icon { width: 14px; height: 14px; }
.ws2-schedule { min-height: 0; flex: 1; display: flex; flex-direction: column; background: var(--pos-surface, #fff); border: 1px solid var(--ws2-line); border-radius: 12px; overflow: hidden; }
.ws2-grid-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--ws2-line); flex: none; }
.ws2-grid-toolbar > div:first-child { margin-right: auto; min-width: 0; }
.ws2-grid-toolbar p { font-size: 11px; line-height: 16px; color: var(--pos-muted, #8a8f98); }
.ws2-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; padding: 0 9px; width: 36px; height: 36px; margin: 0; color: var(--pos-muted, #4b5563); cursor: text; transition: width .15s; }
.ws2-search:focus-within, .ws2-search:has(input:not(:placeholder-shown)) { width: 220px; }
.ws2-search input { border: 0 !important; padding: 0 !important; background: transparent !important; height: 28px !important; min-width: 0; width: 100%; color: var(--ws2-text); font: inherit; outline: none !important; box-shadow: none !important; }
.ws2-filters > summary { display: flex; align-items: center; gap: 6px; height: 36px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; padding: 0 12px; font-weight: 500; white-space: nowrap; color: var(--pos-text, #374151); }
.ws2-filters > div { width: 300px; padding: 12px; max-height: 65vh; overflow: auto; }
.ws2-filters h3 { margin-bottom: 12px; }
.ws2-filters label:not(.ws2-check) { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 12px; font-weight: 600; }
.ws2-filters select, .ws2-filter-staff > summary { height: 36px; border: 1px solid var(--pos-border, #e2e4e8); background: var(--pos-surface, #fff); color: var(--pos-text, #374151); border-radius: 8px; width: 100%; padding: 0 10px; font: inherit; font-weight: 400; }
.ws2-filter-staff > summary { display: flex; align-items: center; justify-content: space-between; gap:8px; height:auto; min-height:36px; padding-block:5px; }
.ws2-filter-staff > summary > .ws2-icon { flex:none; }
.ws2-filter-staff fieldset .ws2-avatar { width:24px; height:24px; font-size:10px; }
.ws2-filter-staff fieldset { max-height: 180px; overflow: auto; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; margin: 4px 0 0; padding: 8px; }
.ws2-filters p { font-size: 11px; color: var(--pos-muted, #8a8f98); }
.ws2-filters footer { display: flex; justify-content: space-between; height: auto; max-height: none; padding-top: 12px; }
.ws2 .ws2-check, .ws2-dialog .ws2-check { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 5px 0; font-weight: 400; font-size: 12px; cursor: pointer; line-height: 20px; }
.ws2 input[type="checkbox"], .ws2-dialog input[type="checkbox"] { appearance: auto !important; -webkit-appearance: checkbox !important; visibility: visible !important; opacity: 1 !important; position: static !important; display: inline-block !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; accent-color: var(--ws2-green); flex: 0 0 16px; border-radius: 3px; transform: none; }
.ws2-legend { display: flex; align-items: center; gap: 16px; padding: 6px 12px; color: var(--pos-muted, #6b7280); font-size: 11px; line-height: 16px; flex: none; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--pos-border, #f1f1ee); background: var(--pos-canvas, #fcfcfb); }
.ws2-legend > span { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.ws2-legend > span::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 1px solid var(--pos-border, #dcebd5); border-radius: 3px; }
.ws2-legend .ws2-legend-full::before { background: var(--pos-primary-soft, #eef7ea); border-left: 3px solid var(--ws2-green); }
.ws2-legend .ws2-legend-timeoff::before { background: var(--ws2-danger-soft); border-color: var(--ws2-danger-line); }
.ws2-legend .ws2-legend-dayoff::before, .ws2-legend .ws2-legend-extra::before { display: none; }
.ws2-legend .ws2-icon { width: 12px; height: 12px; }
.ws2-legend .ws2-legend-extra .ws2-icon { color: #f08c2e; }
.ws2-legend .ws2-legend-empty::before { border: 1px dashed var(--pos-border, #c9cbc6); }
.ws2-legend .ws2-legend-outside::before { width: 6px; height: 6px; border: 0; border-radius: 50%; background: #f08c2e; }
.ws2 [data-ws-grid] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ws2-desktop { overflow: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.ws2 table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; min-width: 960px; margin: 0; }
.ws2 th, .ws2 td { border: 0; border-bottom: 1px solid var(--pos-border, #f1f1ee); padding: 4px; vertical-align: top; }
.ws2 thead th { position: sticky; top: 0; z-index: 3; background: var(--pos-surface2, #fafaf9); font-weight: 500; text-align: center; color: var(--pos-muted, #6b7280); height: 36px; padding: 6px 4px; border-bottom-color: var(--ws2-line); font-size: 12px; line-height: 24px; }
.ws2 thead th strong { display: inline-grid; place-items: center; height: 24px; min-width: 24px; border-radius: 50%; color: var(--ws2-text); margin-left: 6px; font-size: 13px; font-weight: 600; }
.ws2 tr > th:first-child { position: sticky; left: 0; width: 220px; text-align: left; border-right: 1px solid var(--ws2-line); background: var(--pos-surface, #fff); z-index: 2; padding: 4px 12px; }
.ws2 thead tr > th:first-child { z-index: 4; background: var(--pos-surface2, #fafaf9); color: var(--pos-muted, #8a8f98); font-size: 11px; font-weight: 600; padding-block: 6px; }
.ws2 td { height: 66px; }
.ws2 td.ws2-today { background: var(--pos-primary-soft, #f7fbf5); }
.ws2 th.ws2-today { background: var(--pos-primary-soft, #eef7ea); color: var(--ws2-primary-ink); }
.ws2 th.ws2-today strong { background: var(--ws2-green); color: var(--ws2-on-primary); }
.ws2 .ws2-staff { display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 54px; padding: 0; border: 0; border-radius: 4px; background: transparent; text-align: left; font-weight: 400; min-width: 0; }
.ws2-staff:hover { background: var(--pos-surface2, #fafaf9); }
.ws2-avatar { display: grid; place-items: center; position: relative; width: 36px; height: 36px; border-radius: 50%; background: #f39a26; color: #fff; font-size: 12px; font-weight: 500; flex: none; }
.ws2-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ws2-avatar-status { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border: 1.5px solid var(--ws2-white); border-radius: 50%; background: #22c55e; }
.ws2 tbody tr:nth-child(3n) .ws2-avatar, .ws2-mobile li:nth-child(3n) .ws2-avatar { background: #3086cc; }
.ws2 tbody tr:nth-child(3n+1) .ws2-avatar, .ws2-mobile li:nth-child(3n+1) .ws2-avatar { background: #7353ba; }
.ws2-staff-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ws2-staff-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; line-height: 16px; }
.ws2-staff-text small { font-size: 11px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2-staff-hours { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ws2-staff-hours b { font-size: 13px; line-height: 16px; font-weight: 600; }
.ws2-class, .ws2-overtime { display: inline-block; font-size: 10px; font-weight: 700; font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--ws2-violet-soft); color: var(--ws2-violet-ink); line-height: 16px; }
.ws2-class-FT { background: var(--pos-primary-soft, #eaf5e6); color: var(--ws2-primary-ink); }
.ws2-class-OT, .ws2-overtime { background: var(--ws2-warning-soft); color: var(--ws2-warning-ink); }
.ws2 .ws2-cell { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 54px; height: 100%; width: 100%; background: transparent; border: 0; border-radius: 8px; padding: 4px; font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; }
.ws2 .ws2-cell:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ws2-green) 25%, transparent); }
.ws2-cell .ws2-shift-chip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; border-radius: 6px; padding: 2px 4px; min-height: 22px; font-size: 11px; line-height: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ws2-shift-chip > span { white-space: nowrap; }
.ws2-cell .ws2-shift-full { border-left: 3px solid var(--ws2-green); background: color-mix(in srgb, var(--pos-primary-soft, #eef7ea) 60%, var(--pos-surface, #fff)); color: var(--ws2-primary-ink); }
.ws2-cell .ws2-shift-partial { border: 1px solid var(--pos-border, #dcebd5); background: var(--pos-surface, #fff); color: var(--ws2-primary-ink); }
.ws2-cell .ws2-shift-extra { border-left: 3px solid #f08c2e; background: var(--ws2-warning-soft); color: var(--ws2-warning-ink); }
/* Dark mode keeps only the shift accent on the left. */
html[data-pos-appearance="dark"] .ws2-cell .ws2-shift-chip {
  border: 0;
  border-left: 3px solid var(--ws2-green);
}
html[data-pos-appearance="dark"] .ws2-cell .ws2-shift-extra {
  border-color: #f08c2e;
}
html[data-pos-appearance="dark"] .ws2 .ws2-cell-working.ws2-single-shift {
  border: 0;
  border-left: 3px solid var(--ws2-green);
}
html[data-pos-appearance="dark"] .ws2 .ws2-cell-working.ws2-single-shift:has(.ws2-shift-extra) {
  border-color: #f08c2e;
}
html[data-pos-appearance="dark"] .ws2-cell-working.ws2-single-shift .ws2-shift-chip {
  border: 0;
}
.ws2-cell.ws2-single-shift .ws2-shift-chip { flex: 1; min-height: 40px; font-size: 12px; }
.ws2-cell small { font-size: 10px; line-height: 12px; font-weight: 500; }
.ws2-cell .ws2-icon { width: 12px; height: 12px; }
.ws2-cell .ws2-outside-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f08c2e; top: 6px; right: 6px; }
.ws2-cell .ws2-partial-off { align-self: center; background: var(--ws2-danger-soft); color: var(--ws2-danger-ink); border-radius: 999px; padding: 0 6px; font-size: 10px; line-height: 16px; }
.ws2 .ws2-cell-dayOff { background: var(--pos-surface2, #f4f4f2); border: 1px solid var(--pos-border, #e7e7e4); color: var(--pos-muted, #6b7280); }
.ws2-cell-dayOff > span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.ws2 .ws2-cell-timeOff { background: var(--ws2-danger-soft); border: 1px solid var(--ws2-danger-line); color: var(--ws2-danger-ink); align-items: flex-start; padding-inline: 8px; text-align: left; }
.ws2-cell-timeOff strong { font-size: 12px; font-weight: 600; }
.ws2-cell .ws2-off-reason { width: 100%; font-size: 11px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2 .ws2-cell-notScheduled { background: var(--pos-surface, #fff); border: 1px dashed var(--pos-border, #dcddd8); color: var(--pos-muted, #b0b4ba); align-items: center; }
.ws2-cell-notScheduled .ws2-icon { width: 16px; height: 16px; }
.ws2-mobile { display: none; }
.ws2-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 200px; padding: 24px; text-align: center; flex: 1; }
.ws2-state > .ws2-icon { width: 44px; height: 44px; padding: 12px; border-radius: 50%; color: var(--pos-muted, #8a8f98); background: var(--pos-surface2, #f1f1ef); }
.ws2-state h3 { font-size: 13px; }
.ws2-state p { max-width: 260px; font-size: 12px; }
.ws2-toast { padding: 6px 16px; background: var(--pos-primary-soft, #eaf5e6); border-bottom: 1px solid var(--pos-border, #d9edd1); color: var(--ws2-primary-ink); font-size: 12px; flex: none; }
.ws2-dialog { color-scheme: inherit; border: 0; background: var(--pos-surface, #fff); padding: 0; max-width: 100%; max-height: 100dvh; box-shadow: -12px 0 32px #0000001f; }
.ws2-dialog::backdrop { background: #11182740; }
.ws2-dialog.ws2-panel { position: fixed; inset: var(--ws2-top, 0px) var(--ws2-right, 0px) auto auto; margin: 0; width: 540px; height: var(--ws2-height, 100dvh); border-radius: 0; }
.ws2-dialog.ws2-panel:not(.ws2-cell-menu) { overflow: hidden; }
.ws2-dialog[data-category="timeoff"] { width: 500px; }
.ws2-dialog[data-category="settings"], .ws2-dialog[data-category="salon"], .ws2-dialog[data-category="activity"] { width: 480px; }
.ws2-dialog > form { height: 100%; display: flex; flex-direction: column; min-height: 0; margin: 0; }
.ws2-dialog header { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--pos-border, #ddebd6); background: var(--pos-primary-soft, #f2f8ef); flex: none; min-height: 53px; }
.ws2-dialog header > div { flex: 1; min-width: 0; }
.ws2-dialog h2 { font-size: 15px; line-height: 20px; font-weight: 600; }
.ws2-dialog header p { color: var(--pos-muted, #6b7280); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2-dialog header .ws2-tool { border: 0; background: transparent; width: 32px; height: 32px; min-height: 32px; color: var(--pos-muted, #6b7280); flex-basis: 32px; }
/* Contain absolute hidden controls here so they cannot enlarge the outer dialog. */
.ws2-dialog main { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.ws2-dialog footer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--ws2-line); padding: 8px 16px; background: var(--pos-surface, #fff); flex: none; height: auto; max-height: none; overflow: visible; }
.ws2-footer-spacer { flex: 1; }
.ws2-dialog footer .ws2-btn { padding-inline: 16px; }
.ws2-dialog footer .ws2-primary { padding-inline: 20px; }
.ws2-dialog footer .ws2-danger-text { font-size: 0; padding: 0; width: 32px; flex: none; border: 0; }
.ws2-dialog label:not(.ws2-check) { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; margin: 0; color: var(--pos-text, #374151); }
.ws2-dialog input:not([type="checkbox"]), .ws2-dialog select, .ws2-dialog textarea { position: static; display: block; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; padding: 7px 10px; height: 36px; min-height: 32px; width: 100%; min-width: 0; max-width: 100%; background: var(--pos-surface, #fff); font: inherit; font-weight: 400; color: var(--pos-text, #374151); box-shadow: none; text-indent: 0; visibility: visible; }
.ws2-dialog select { appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='m4 5 3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.ws2-dialog textarea { resize: vertical; height: auto; }
.ws2-dialog .ws2-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ws2-dialog fieldset { border: 1px solid var(--ws2-line); border-radius: 8px; padding: 8px 10px; margin: 0; min-width: 0; }
.ws2-dialog legend { width: auto; max-width: 100%; font-size: 12px; padding: 0 5px; font-weight: 600; float: none; margin: 0; line-height: 20px; border: 0; }
.ws2-dialog .ws2-shifts { display: flex; flex-direction: column; gap: 4px; }
.ws2-dialog .ws2-shifts > .ws2-btn { align-self: flex-start; color: var(--ws2-green); font-size: 12px; font-weight: 600; border: 0; height: 28px; min-height: 28px; padding: 0 6px; }
.ws2-dialog .ws2-shift { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ws2-dialog .ws2-shift > label:not(.ws2-check) { flex: 1; min-width: 0; }
.ws2-dialog .ws2-shift input { height: 32px; padding: 5px 8px; }
.ws2-dialog .ws2-shift .ws2-tool { border: 0; width: 32px; height: 32px; min-height: 32px; flex-basis: 32px; color: var(--pos-muted, #9ca3af); }
.ws2-shift-to { color: var(--pos-muted, #8a8f98); font-size: 12px; }
.ws2-dialog .ws2-extra { position: relative; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; padding: 0; display: grid; place-items: center; color: var(--pos-muted, #9ca3af); }
.ws2-dialog .ws2-extra input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; }
.ws2-dialog .ws2-extra:has(input:checked) { border-color: var(--ws2-warning-line); background: var(--ws2-warning-soft); color: var(--ws2-warning-ink); }
.ws2-extra .ws2-icon { width: 14px; height: 14px; }
.ws2-break { font-size: 11px; color: var(--pos-muted, #8a8f98); display: flex; align-items: center; gap: 6px; }
.ws2-break .ws2-icon { width: 12px; height: 12px; }
.ws2-dialog .ws2-notice { padding: 8px 12px; border: 1px solid var(--pos-border, #d9edd1); border-radius: 8px; background: var(--pos-primary-soft, #f6fbf4); color: var(--pos-muted, #4b5563); font-size: 12px; }
.ws2-dialog .ws2-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 16px; color: var(--pos-muted, #8a8f98); }
.ws2-hint .ws2-icon { width: 12px; height: 12px; margin-top: 2px; }
.ws2-panel-tabs { display: flex; gap: 4px; padding: 4px; margin: 12px 16px 0; background: var(--pos-surface2, #f1f1ef); border-radius: 8px; flex: none; }
.ws2-panel-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; border: 0; border-radius: 6px; background: transparent; height: 32px; padding: 0 4px; font-size: 13px; font-weight: 500; color: var(--pos-muted, #6b7280); }
.ws2-panel-tabs .ws2-icon { width: 14px; height: 14px; }
.ws2-panel-tabs button[aria-selected="true"] { color: var(--ws2-primary-ink); background: var(--pos-surface, #fff); font-weight: 600; box-shadow: 0 1px 2px #0000000f; }
.ws2-panel-error { padding: 12px 16px; background: var(--ws2-danger-soft); color: var(--ws2-danger-ink); font-size: 12px; flex: none; }
.ws2-editor-staff { padding: 12px 16px 8px; border-bottom: 1px solid var(--pos-border, #f1f1ee); flex: none; }
.ws2-editor-staff .ws2-panel-tabs { margin: 8px 0 0; }
.ws2-selected-staff { display: flex; align-items: center; gap: 10px; border-radius: 8px; background: var(--pos-canvas, #f7f7f5); padding: 6px 10px; }
.ws2-selected-staff .ws2-avatar { width: 24px; height: 24px; font-size: 10px; }
.ws2-selected-staff > strong { flex: 1; font-size: 13px; font-weight: 600; }
.ws2-selected-staff > span:last-child { font-size: 12px; color: var(--pos-muted, #6b7280); }
.ws2-panel-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.ws2-panel-summary > div { background: var(--pos-primary-soft, #f6fbf4); padding: 6px 10px; border-radius: 8px; min-width: 0; }
.ws2-panel-summary dt { font-size: 11px; color: var(--pos-muted, #6b7280); }
.ws2-panel-summary strong { font-size: 16px; line-height: 20px; font-weight: 700; }
.ws2-panel-summary small { display: block; font-size: 10px; color: var(--pos-muted, #8a8f98); }
.ws2-week-bars { display: flex; gap: 4px; height: 20px; align-items: flex-end; }
.ws2-week-bars > span { display: flex; flex: 1; flex-direction: column; align-items: center; font-size: 9px; line-height: 12px; color: var(--pos-muted, #4b5563); font-weight: 600; }
.ws2-week-bars b { width: 100%; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ws2-green) 70%, transparent); }
.ws2-week-bars .ws2-bar-off b { background: var(--pos-border, #e7e7e4); }
.ws2-week-bars .ws2-bar-off { color: var(--pos-muted, #b0b4ba); }
.ws2-dialog [data-ws-plans], .ws2-dialog [data-ws-salon-plans] { border: 1px solid var(--ws2-line); border-radius: 8px; }
.ws2-dialog .ws2-plan, .ws2-dialog .ws2-salon-day { border: 0; border-bottom: 1px solid var(--pos-border, #f1f1ee); border-radius: 0; padding: 8px 10px; }
.ws2-dialog .ws2-plan:last-child, .ws2-dialog .ws2-salon-day:last-child { border-bottom: 0; }
.ws2-plan-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ws2-plan-heading strong { flex: 1; font-size: 13px; font-weight: 600; }
.ws2-plan-heading > small { font-size: 12px; }
.ws2-dialog .ws2-plan .ws2-shifts { padding-left: 46px; }
.ws2-dialog .ws2-plan[data-regular="false"] { padding: 0; border: 0; }
.ws2-dialog .ws2-plan[data-regular="false"] .ws2-shifts { padding-left: 0; margin-top: 12px; }
.ws2-dialog select[data-ws-plan-kind] { width: 110px; height: 28px; min-height: 28px; font-size: 11px; padding-block: 2px; }
.ws2-dialog .ws2-toggle { position: relative; display: inline-flex; flex: 0 0 36px; width: 36px; height: 20px; margin: 0; padding: 0; }
.ws2-dialog .ws2-toggle input { position: absolute !important; width: 100% !important; height: 100% !important; inset: 0 !important; opacity: 0 !important; cursor: pointer; }
.ws2-toggle > span { width: 36px; height: 20px; border-radius: 99px; background: var(--pos-border, #d1d5db); padding: 2px; pointer-events: none; }
.ws2-toggle > span::after { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background:#fff; box-shadow: 0 1px 2px #0000001a; transition: transform .15s; }
.ws2-toggle input:checked + span { background: var(--ws2-green); }
.ws2-toggle input:checked + span::after { transform: translateX(16px); }
.ws2-toggle:focus-within { outline: 2px solid color-mix(in srgb, var(--ws2-green) 40%, transparent); outline-offset: 2px; border-radius: 99px; }
.ws2-day-off-control { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 8px; }
.ws2-day-off-control > .ws2-icon { box-sizing: content-box; padding: 8px; border-radius: 8px; color: var(--pos-muted, #9ca3af); background: var(--pos-canvas, #f7f7f5); }
.ws2-day-off-control > div { flex: 1; min-width: 0; }
.ws2-day-off-control strong { font-size: 13px; font-weight: 600; }
.ws2-day-off-control p { font-size: 12px; color: var(--pos-muted, #6b7280); }
.ws2-repeat-box { padding: 10px; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 8px; }
.ws2-dialog .ws2-cell-detail { display: flex; flex-direction: column; gap: 8px; }
.ws2-cell-actions { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--pos-border, #f1f1ee); }
.ws2-dialog .ws2-cell-actions .ws2-btn { justify-content: flex-start; border: 0; height: 40px; }
.ws2-dialog.ws2-cell-menu { width: 320px; max-width: calc(100vw - 16px); height: auto; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 12px; margin: 0; box-shadow: 0 16px 40px #00000029; }
.ws2-cell-menu::backdrop { background: transparent; }
.ws2-cell-menu header { display: none; }
.ws2-cell-menu main { padding: 12px 6px 6px; gap: 8px; }
.ws2-cell-menu .ws2-cell-detail { padding: 0 8px; }
.ws2-cell-menu .ws2-cell-detail p { font-size: 11px; }
.ws2-cell-menu footer { display: none; }
.ws2-dialog .ws2-staff-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.ws2-request { border: 1px solid var(--ws2-line); border-radius: 12px; padding: 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.ws2-request > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ws2-status { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; text-transform: capitalize; }
.ws2-status-pending { color: var(--ws2-warning-ink); background: var(--ws2-warning-soft); }
.ws2-status-approved { color: var(--ws2-primary-ink); background: var(--pos-primary-soft, #eaf5e6); }
.ws2-status-declined { color: var(--ws2-danger-ink); background: var(--ws2-danger-soft); }
.ws2-request p { font-size: 12px; color: var(--pos-text, #374151); }
.ws2-request small { font-size: 11px; }
.ws2-request-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ws2-special-row, .ws2-overtime-row { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ws2-line); }
.ws2-special-row > div, .ws2-overtime-row > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ws2-dialog .ws2-special-row p { color: var(--ws2-muted); font-size: 12px; }
.ws2-overtime-row > strong { color: var(--ws2-warning-ink); }
.ws2-overtime-bar { display: flex; overflow: hidden; height: 6px; background: var(--pos-surface2, #f1f1ef); border-radius: 99px; margin-top: 6px; }
.ws2-overtime-bar span { background: var(--pos-border, #86c873); }
.ws2-overtime-bar b { background: #f08c2e; }
.ws2-date-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ws2-date-list > span { display: flex; align-items: center; gap: 5px; border: 1px solid var(--ws2-line); border-radius: 8px; padding: 2px 3px 2px 8px; }
.ws2-date-list .ws2-tool { width: 26px; height: 26px; min-height: 26px; flex-basis: 26px; border: 0; }
.ws2-criterion { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--pos-border, #f1f1ee); }
.ws2-criterion > div { flex: 1; min-width: 0; }
.ws2-criterion strong { font-size: 13px; font-weight: 500; }
.ws2-criterion p { font-size: 11px; line-height: 16px; color: var(--pos-muted, #8a8f98); }
.ws2-dialog .ws2-criterion > input { width: 64px; flex: 0 0 64px; height: 32px; text-align: right; }
.ws2-criterion > small { width: 48px; font-size: 11px; }
.ws2-settings-list { border: 1px solid var(--pos-border, #e7e7e4); border-radius: 8px; overflow: hidden; }
.ws2-card-preference { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--pos-border, #f1f1ee); }
.ws2-card-preference > .ws2-icon { box-sizing: content-box; padding: 8px; border-radius: 8px; background: var(--pos-surface2, #f1f1ef); color: var(--pos-muted, #4b5563); }
.ws2-card-preference > div { flex: 1; }
.ws2-card-preference strong { font-size: 13px; font-weight: 500; }
.ws2-card-preference p { font-size: 12px; color: var(--pos-muted, #6b7280); }
.ws2-activity { list-style: none; padding: 0; margin: 0; }
.ws2-activity li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ws2-line); }
.ws2-activity li > span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--ws2-soft); color: var(--ws2-green); }
.ws2-activity strong { font-size: 12px; font-weight: 500; }
.ws2-activity p { color: var(--ws2-muted); font-size: 11px; margin-top: 4px; }
.ws2-dialog.ws2-confirm { width: 420px; max-width: calc(100% - 24px); margin: auto; border: 1px solid var(--ws2-line); border-radius: 12px; height: fit-content; }
.ws2-dialog.ws2-confirm > form { height: auto; }
.ws2-confirm main { gap: 12px; padding-block: 20px; }
.ws2-confirm footer { justify-content: flex-end; }
.ws2-preview-note { color: var(--ws2-warning-ink); font-size: 11px; }
.ws2-dialog.ws2-overtime-modal { position: fixed; inset: 0; width: 640px; height: 620px; max-height: calc(100dvh - 32px); max-width: calc(100vw - 24px); margin: auto; border-radius: 12px; }
.ws2-overtime-modal main > p { font-size: 12px; }
.ws2-calendar { position: fixed; z-index: 60; width: 280px; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 12px; padding: 8px; background: var(--pos-surface, #fff); box-shadow: 0 14px 36px #00000024; }
.ws2-calendar-head { display: flex; align-items: center; justify-content: space-between; }
.ws2-calendar .ws2-tool { width: 28px; height: 28px; min-height: 28px; flex-basis: 28px; border: 0; }
.ws2-calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; }
.ws2-calendar-grid > span { color: var(--pos-muted, #8a8f98); font-size: 11px; padding: 4px 0; font-weight: 600; }
.ws2-calendar-grid > button { border: 0; background: var(--pos-surface, #fff); height: 32px; font-size: 12px; }
.ws2-calendar-grid > button:hover, .ws2-calendar-grid .ws2-selected-week { background: var(--pos-primary-soft, #eaf5e6); }
.ws2-calendar-grid .ws2-calendar-today { color: var(--ws2-green); font-weight: 700; }
@media (max-width: 1279px) {
  .ws2-attention > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1023px) {
  .ws2-header-actions > .ws2-btn > span { display: none; }
  .ws2-header-actions > .ws2-btn { width: 36px; padding: 0; position: relative; }
  .ws2-header-actions .ws2-count { position: absolute; top: -6px; right: -6px; outline: 2px solid var(--pos-surface, #fff); }
  .ws2-hours { align-items: flex-start; flex-wrap: wrap; }
  .ws2-hours-summary { width: auto; flex: 1; }
  .ws2 .ws2-hours-groups { display: none; order: 4; flex-basis: 100%; padding-left: 42px; }
  .ws2-hours.ws2-hours-expanded .ws2-hours-groups { display: flex; }
  .ws2-hours-actions [data-ws-action="toggle-hours"] { display: inline-flex; }
  .ws2-tip { align-items: flex-start; }
  .ws2-tip > .ws2-icon { margin-top: 2px; }
  .ws2-tip p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ws2-tip.ws2-tip-expanded p { display: block; }
  .ws2-tip [data-ws-action="expand-tip"] { display: block; font-size: 11px; font-weight: 600; color: var(--ws2-primary-ink); background: transparent; border: 0; padding: 2px 0 0; }
  .ws2-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ws2-stats > div { min-height: 52px; }
  .ws2 tr > th:first-child { width: 200px; }
  .ws2 thead th { height: 44px; line-height: 16px; padding: 4px; }
  .ws2 thead th > span { display: block; }
  .ws2 thead th strong { margin: 0; }
}
@media (max-width: 767px) {
  .ws2-header { padding: 6px 10px; gap: 8px; }
  .ws2-heading { min-width: 0; }
  .ws2-heading p { font-size: 11px; }
  .ws2-week-picker { order: 3; width: 100%; }
  .ws2 .ws2-week-label { flex: 1; min-width: 0; }
  .ws2-content { padding: 8px; gap: 8px; }
  .ws2-stats > div { gap: 8px; }
  .ws2-stats dd > span { display: none; }
  .ws2-stats dt { font-size: 11px; }
  .ws2-stat-icon { width: 32px; height: 32px; }
  .ws2-attention button { gap: 8px; }
  .ws2-attention strong { font-size: 12px; }
  .ws2-attention em { font-size: 0; }
  .ws2-grid-toolbar { padding: 6px 10px; }
  .ws2-grid-toolbar h2 { font-size: 14px; }
  .ws2-toolbar-hint { display: none; }
  .ws2-search:focus-within, .ws2-search:has(input:not(:placeholder-shown)) { width: 140px; }
  .ws2-grid-toolbar:has(.ws2-search:focus-within) > div:first-child { display: none; }
  .ws2-grid-toolbar:has(.ws2-search:focus-within) .ws2-search { flex: 1; }
  .ws2-filters > div { width: min(300px, calc(100vw - 32px)); }
  .ws2-desktop { display: none; }
  .ws2-mobile { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .ws2-days { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--ws2-line); background: var(--pos-surface2, #fafaf9); flex: none; }
  .ws2-days button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border: 0; border-radius: 8px; background: transparent; color: var(--pos-muted, #4b5563); height: 44px; }
  .ws2-days button span { font-size: 10px; font-weight: 500; line-height: 12px; }
  .ws2-days button b { font-size: 14px; line-height: 20px; font-weight: 600; }
  .ws2-days button[aria-current="date"]:not([aria-selected="true"]) { background:var(--ws2-soft); color:var(--ws2-primary-ink); }
  .ws2-days button[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--ws2-green); background: var(--pos-surface, #fff); color: var(--ws2-primary-ink); }
  .ws2 .ws2-mobile-date { display: flex; align-items: center; justify-content: space-between; font-size: 11px; line-height: 16px; padding: 4px 10px; border-bottom: 1px solid var(--ws2-line); background: var(--pos-surface2, #fafaf9); color: var(--pos-muted, #8a8f98); font-weight: 600; }
  .ws2-mobile ul { padding: 0; list-style: none; overflow: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
  .ws2-mobile li { border-bottom: 1px solid var(--pos-border, #f1f1ee); }
  .ws2-mobile-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
  .ws2-mobile .ws2-staff { flex: 1; min-height: 46px; overflow: hidden; }
  .ws2-mobile .ws2-staff > .ws2-icon { color: var(--pos-muted, #9ca3af); }
  .ws2-mobile .ws2-cell { width: 46%; max-width: 168px; min-height: 46px; align-self: stretch; height: auto; flex: none; }
  .ws2-mobile-details { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 10px 6px; padding: 6px 10px; background: var(--pos-canvas, #f7f7f5); border-radius: 8px; font-size: 11px; }
  .ws2-mobile-details .ws2-btn { font-size: 11px; margin-left: auto; height: 28px; min-height: 28px; }
  .ws2-dialog.ws2-panel { width: 100%; max-width: 100%; }
  .ws2-dialog header, .ws2-dialog main, .ws2-dialog footer { padding-inline: 12px; }
  .ws2-panel-tabs { margin-inline: 12px; }
  .ws2-dialog .ws2-staff-picker { grid-template-columns: 1fr; }
  .ws2-dialog .ws2-plan .ws2-shifts { padding-left: 0; }
  .ws2-criterion { gap: 6px; padding-inline: 8px; }
  .ws2-criterion > small { width: 40px; }
  .ws2-dialog .ws2-criterion > input { width: 54px; flex-basis: 54px; }
}
@media (prefers-reduced-motion: reduce) { .ws2 *, .ws2-dialog * { transition: none !important; } }
/* Explicit alignment also neutralizes POS-wide span and description-list rules. */
.ws2-stats dt, .ws2-panel-summary dt { font-weight: 400; }
.ws2 .ws2-cell { align-items: stretch; }
.ws2 .ws2-cell-notScheduled { align-items: center; }
.ws2 .ws2-cell-timeOff { align-items: flex-start; }
.ws2-cell .ws2-shift-chip { align-self: stretch; }
.ws2-dialog::backdrop { clip-path: inset(var(--ws2-top, 0px) var(--ws2-right, 0px) var(--ws2-bottom, 0px) var(--ws2-left, 0px)); }
.ws2-dialog .ws2-shift select { height: 32px; padding-block: 4px; }
.ws2-date-control { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; background: var(--pos-surface, #fff); font-size: 13px; font-weight: 400; color: var(--pos-text, #1f2328); }
.ws2-date-control .ws2-icon { color: var(--pos-muted, #6b7280); }
.ws2-dialog .ws2-date-control > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ws2-date-control:focus-within { outline: 2px solid color-mix(in srgb, var(--ws2-green) 15%, transparent); border-color: var(--ws2-green); }
.ws2-footer-total { font-size: 12px; color: var(--pos-muted, #6b7280); }
.ws2-footer-total b { font-weight: 600; color: var(--pos-text, #1f2328); }
.ws2-settings-list + h3, [data-ws-settings-section] > * + * { margin-top: 12px; }
.ws2-salon-day-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws2-salon-day-row > strong { width: 84px; font-size: 13px; font-weight: 600; }
.ws2-salon-time-row { display: flex; align-items: center; gap: 6px; min-width: 200px; flex: 1; }
.ws2-salon-time-row > label { flex: 1; min-width: 0; font-size: 0 !important; gap: 0 !important; }
.ws2-salon-time-row select { height: 32px; font-size: 13px; }
.ws2-salon-time-row > span { font-size: 12px; color: var(--pos-muted, #8a8f98); }
.ws2-salon-closed { color: var(--ws2-danger-ink); font-size: 12px; }
.ws2-salon-copy { display: flex; align-items: center; justify-content: space-between; }
.ws2-salon-copy strong { font-size: 12px; font-weight: 600; color: var(--pos-text, #374151); }
.ws2-salon-copy .ws2-btn { border: 0; padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--ws2-primary-ink); height: 28px; min-height: 28px; }
.ws2-staff-select-hint { float: right; font-size: 11px; font-weight: 400; color: var(--pos-muted, #8a8f98); }
.ws2-dialog .ws2-staff-multiselect { position: relative; font-weight: 400; font-size: 13px; }
.ws2-staff-multiselect > summary { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; padding: 7px 10px; height: 36px; list-style: none; color: var(--pos-muted, #9ca3af); cursor: pointer; }
.ws2-staff-multiselect > summary::-webkit-details-marker { display: none; }
.ws2-staff-multiselect > div { position: absolute; top: 40px; left: 0; right: 0; z-index: 10; padding: 8px; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 8px; background: var(--pos-surface, #fff); box-shadow: 0 14px 36px #00000024; max-height: 300px; overflow: auto; }
.ws2-dialog .ws2-staff-multiselect fieldset { border: 0; padding: 0; display: block; }
.ws2-staff-multiselect .ws2-avatar { width: 28px; height: 28px; font-size: 10px; }
.ws2-staff-multiselect .ws2-check { padding: 6px; }
.ws2-staff-multiselect .ws2-check small { display: block; font-size: 10px; line-height: 14px; }
.ws2-range-control { position: relative; display: flex; height: 36px; align-items: center; padding: 0 12px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; color: var(--pos-muted, #a1a1aa); font-weight: 400; font-size: 13px; }
.ws2-range-control > span { display: flex; align-items: center; gap: 8px; }
.ws2-dialog .ws2-range-control > input { position: absolute; width: 50%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }
.ws2-dialog .ws2-range-control > input:last-child { left: 50%; }
.ws2-segmented { display: flex; gap: 4px; padding: 4px; background: var(--pos-surface2, #f1f1ef); border-radius: 8px; margin-top: 4px; }
.ws2-segmented button { height: 32px; flex: 1; border: 0; border-radius: 6px; background: transparent; font-weight: 500; color: var(--pos-muted, #6b7280); }
.ws2-segmented [aria-checked="true"] { background:var(--ws2-white); font-weight: 600; color: var(--ws2-primary-ink); box-shadow: 0 1px 2px #0000000f; }
.ws2-leave-times { padding: 10px; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 8px; background: var(--pos-surface2, #fafaf9); }
.ws2-leave-times h3 { margin-bottom: 6px; }
.ws2-leave-times h3 .ws2-icon { width: 14px; height: 14px; color: var(--ws2-green); }
.ws2-optional { font-weight: 400; color: var(--pos-muted, #8a8f98); }
.ws2-payroll { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 8px; }
.ws2-payroll > div { flex: 1; }
.ws2-payroll strong { font-size: 13px; font-weight: 500; }
.ws2-payroll p { font-size: 12px; color: var(--pos-muted, #6b7280); }
.ws2-list-toolbar { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--pos-border, #f1f1ee); }
.ws2-list-toolbar > div { flex: 1; min-width: 0; }
.ws2-list-toolbar p { font-size: 11px; color: var(--pos-muted, #6b7280); }
.ws2-list-toolbar .ws2-search { flex: 0 0 36px; }
.ws2-list-toolbar:has(.ws2-search:focus-within) > div { display: none; }
.ws2-list-toolbar .ws2-search:focus-within { flex: 1; }
.ws2-dialog .ws2-list-toolbar > select { width: 120px; font-size: 11px; }
.ws2-request-person .ws2-avatar { width: 32px; height: 32px; font-size: 11px; }
.ws2-request-person > div { flex: 1; }
.ws2-request-person small { font-size: 10px; }
.ws2-request-dates .ws2-icon { width: 14px; height: 14px; color: var(--pos-muted, #8a8f98); }
.ws2-request .ws2-request-reason { background: var(--pos-canvas, #f7f7f5); padding: 6px 8px; border-radius: 6px; }
.ws2-dialog .ws2-review-note { font-size: 0 !important; }
.ws2-dialog .ws2-review-note textarea { height: 32px; resize: none; font-size: 12px; }
.ws2-date-picker-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--pos-border, #f1f1ee); padding-top: 8px; margin-top: 8px; }
.ws2-date-picker-footer small { font-size: 11px; }
.ws2-attention button { min-height: 46px; height: auto; }
.ws2-dialog .ws2-date-picker .ws2-btn { height: 30px; min-height: 30px; padding-inline: 12px; }
@font-face { font-family: 'Work Schedule Sora'; src: url('../../portal/assets/sora-latin-ext-400-normal-Twk1CgKs.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0100-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
.ws2 tbody th { vertical-align: middle; }
.ws2-staff-select-hint { float: none; margin-left: auto; }
.ws2-label-line { display: flex; align-items: center; justify-content: space-between; }
.ws2-request .ws2-review-trigger { height: 32px; min-height: 32px; width: 100%; font-weight: 600; margin-top: 4px; }
.ws2-review-controls { padding-top: 10px; border-top: 1px solid var(--pos-border, #f1f1ee); }
.ws2-review-controls .ws2-request-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 8px; }
.ws2-review-controls [data-status="declined"] { background: var(--ws2-danger-fill); border-color: var(--ws2-danger-fill); color: var(--ws2-on-danger); }
.ws2-dialog .ws2-link { display: inline; height: auto; min-height: 0; border: 0; color: var(--ws2-green); font-size: 12px; font-weight: 600; padding: 0; }
.ws2-overtime-legend { display: flex; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--pos-border, #f1f1ee); color: var(--pos-muted, #6b7280); font-size: 11px; }
.ws2-overtime-legend > span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--pos-border, #86c873); }
.ws2-overtime-legend > span:last-child::before { background: #f08c2e; }
.ws2-overtime-modal .ws2-panel-summary > div:first-child { background: var(--ws2-warning-soft); color: var(--ws2-warning-ink); }
.ws2-overtime-modal .ws2-panel-summary > div:not(:first-child) { background: var(--pos-canvas, #f7f7f5); }
.ws2-class-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.ws2-class-preview > div { padding: 8px 10px; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 8px; }
.ws2-class-preview dt { font-size: 11px; font-weight: 400; color: var(--pos-muted, #6b7280); }
.ws2-class-preview dd b { font-size: 18px; line-height: 24px; font-weight: 700; }
.ws2-active-rules { background: var(--pos-primary-soft, #f6fbf4); padding: 8px 12px; border-radius: 8px; }
.ws2-active-rules strong { font-size: 12px; font-weight: 600; }
.ws2-active-rules p { font-size: 11px; margin-top: 4px; color: var(--pos-muted, #4b5563); }
.ws2-active-rules p span { display: inline-block; background: var(--pos-surface, #fff); border-radius: 99px; padding: 2px 8px; color: var(--ws2-primary-ink); margin-bottom: 4px; }
.ws2-show-all { background: var(--pos-surface2, #fafaf9); }
.ws2-dialog [data-ws-closed].ws2-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.ws2-dialog [data-category="salon"] { width: 500px; }
.ws2-dialog[data-category="salon"] { width: 500px; }
.ws2-special-editor, .ws2-special-list { border: 1px solid var(--pos-border, #e7e7e4); border-radius: 12px; overflow: hidden; flex: none; }
.ws2-special-heading { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--pos-border, #eef3eb); background: var(--pos-primary-soft, #f7fbf5); }
.ws2-special-heading > .ws2-icon { box-sizing: content-box; padding: 6px; border-radius: 8px; background: var(--pos-primary-soft, #eaf5e6); color: var(--ws2-primary-ink); }
.ws2-special-heading > div { flex: 1; min-width: 0; }
.ws2-special-heading h3 { line-height: 16px; }
.ws2-special-heading p { font-size: 11px; line-height: 16px; color: var(--pos-muted, #6b7280); }
.ws2-special-body { display: flex; flex-direction: column; gap: 12px; padding: 10px 12px; }
.ws2-special-editor .ws2-salon-day { padding: 0; border: 0; }
.ws2-special-editor .ws2-salon-day-row > .ws2-toggle, .ws2-special-editor .ws2-salon-day-row > strong { display: none; }
.ws2-special-list { border-color: var(--ws2-warning-line); background: var(--ws2-warning-soft); }
.ws2-special-list .ws2-special-heading { border-color: var(--ws2-warning-line); background: transparent; }
.ws2-special-list .ws2-special-heading > .ws2-icon { color: var(--ws2-warning-ink); background: var(--ws2-warning-soft); }
.ws2-special-heading .ws2-btn { height: 32px; min-height: 32px; font-size: 12px; font-weight: 600; color: #fff; background: #b45309; border-color: #b45309; padding: 0 10px; }
.ws2-special-list .ws2-special-heading h3 b { border-radius: 99px; padding: 0 6px; font-size: 10px; color: var(--ws2-warning-ink); background: var(--ws2-warning-soft); }
.ws2-special-body[data-ws-closures] { background: var(--pos-surface, #fff); border-bottom: 1px solid var(--ws2-warning-line); }
.ws2-special-row { padding: 6px 12px; border-color: var(--ws2-warning-line); }
.ws2-special-pick { border: 0; background: transparent; flex: 1; min-width: 0; padding: 0; text-align: left; }
.ws2-special-pick > strong { font-size: 13px; font-weight: 600; }
.ws2-special-row .ws2-tool { width: 32px; height: 32px; min-height: 32px; border: 0; background: transparent; color: var(--pos-muted, #8a8f98); }
.ws2-special-empty { text-align: center; padding: 16px 12px; color: var(--ws2-warning-ink) !important; font-size: 12px; }
.ws2-closure-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media(max-width:767px) { .ws2-dialog[data-category="salon"] { width: 100%; } .ws2-special-heading p { display: none; } .ws2-special-heading .ws2-btn { font-size: 11px; padding: 0 6px; } }
.ws2-hover { position: fixed; z-index: 65; width: 280px; pointer-events: none; overflow: hidden; border-radius: 12px; background: var(--pos-surface2, #26302b); color: var(--pos-text, #fff); box-shadow: 0 14px 36px #00000047; }
.ws2-hover > div { display: flex; gap: 8px; padding: 8px 12px; background: var(--pos-canvas, #1e2622); border-bottom: 1px solid var(--pos-border, #ffffff1a); }
.ws2-hover > div > div { flex: 1; }
.ws2-hover > div strong { font-size: 13px; line-height: 16px; font-weight: 600; }
.ws2-hover > div p { font-size: 11px; color: var(--pos-muted, #b8c2bc); }
.ws2-hover > div > span { align-self: flex-start; border-radius: 99px; background: var(--pos-primary-soft, #7fcb6e33); color: var(--ws2-primary-ink); font-size: 10px; font-weight: 600; padding: 2px 6px; }
.ws2-hover > section { padding: 8px 12px; }
.ws2-hover > p { border-top: 1px solid var(--pos-border, #ffffff1a); padding: 6px 12px; color: var(--pos-muted, #9aa59e); font-size: 11px; }
.ws2-shift-summary { list-style: none; padding: 0; margin: 0; }
.ws2-shift-summary li > div { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; }
.ws2-shift-summary strong { flex: 1; font-size: 12px; font-weight: 600; }
.ws2-shift-summary b { color: var(--pos-muted, #4b5563); font-weight: 600; }
.ws2-shift-summary .ws2-summary-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--ws2-green); flex: none; }
.ws2-shift-summary .ws2-summary-extra { background: #f08c2e; }
.ws2-shift-summary em { display: inline-block; margin-left: 6px; font-size: 10px; font-style: normal; border-radius: 4px; padding: 0 4px; background: var(--ws2-warning-soft); color: var(--ws2-warning-ink); }
.ws2-shift-summary li > p { display: flex; align-items: center; gap: 4px; padding: 2px 0 2px 16px; color: var(--pos-muted, #8a8f98); font-size: 11px; }
.ws2-shift-summary li > p span:last-child { margin-left: auto; }
.ws2-shift-summary li > p .ws2-icon { width: 12px; height: 12px; }
.ws2-hover .ws2-shift-summary b { color: var(--pos-muted, #c9d2cc); }
.ws2-hover .ws2-shift-summary li > p { color: var(--pos-muted, #9aa59e); }
.ws2-summary-leave { color: var(--ws2-danger-ink) !important; font-size: 12px; }
.ws2-hover .ws2-summary-leave { color: var(--ws2-danger-ink) !important; }
.ws2-summary-outside { margin-top: 6px !important; padding: 4px 8px; border-radius: 6px; color: var(--ws2-warning-ink) !important; background: var(--ws2-warning-soft); font-size: 11px; }
.ws2-hover .ws2-summary-outside { color: var(--ws2-warning-ink) !important; background: var(--ws2-warning-soft); }
.ws2-summary-muted { font-size: 12px; }
.ws2-hover .ws2-summary-muted { color: var(--pos-muted, #c9d2cc); }
.ws2-dialog[data-category="activity"] { width: 460px; }
.ws2-log-date { color: var(--pos-muted, #8a8f98); font-size: 11px !important; font-weight: 600; margin-bottom: 4px !important; }
.ws2-log-filter { position: relative; }
.ws2-log-filter > summary { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; list-style: none; cursor: pointer; }
.ws2-log-filter > div { position: absolute; top: 42px; right: 0; width: 260px; padding: 12px; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 12px; background:var(--ws2-white); z-index: 10; box-shadow: 0 14px 36px #00000024; }
.ws2-log-filter label + label { margin-top: 12px !important; }
.ws2-activity [data-kind="edit"] > span { background: var(--ws2-info-soft); color: var(--ws2-info-ink); }
.ws2-activity [data-kind="delete"] > span { background: var(--ws2-danger-soft); color: var(--ws2-danger-ink); }
.ws2-activity [data-kind="timeoff"] > span { background: var(--ws2-warning-soft); color: var(--ws2-warning-ink); }
.ws2-activity [data-kind="review"] > span { background: var(--ws2-violet-soft); color: var(--ws2-violet-ink); }
.ws2-activity [data-kind="settings"] > span { background: var(--pos-surface2, #f1f1ef); color: var(--pos-muted, #4b5563); }
@media(max-width:767px) { .ws2-dialog[data-category="activity"] { width:100%; } }
.ws2 *, .ws2-dialog * { scrollbar-width: thin; scrollbar-color: var(--pos-border, #d4d4d4) transparent; }
.ws2-select { display: block; position: relative; min-width: 0; width: 100%; }
.ws2 .ws2-select > select, .ws2-dialog .ws2-select > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.ws2 .ws2-select-trigger, .ws2-dialog .ws2-select-trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; border: 1px solid var(--pos-border, #e2e4e8); border-radius: 8px; background: var(--pos-surface, #fff); padding: 0 12px; font: inherit; font-weight: 400; font-size: 13px; text-align: left; color: var(--pos-text, #1f2328); }
.ws2-select-trigger > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2-select-trigger > .ws2-icon { width: 16px; height: 16px; color: var(--pos-muted, #6b7280); }
.ws2-select-trigger[aria-expanded="true"] { border-color: var(--ws2-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ws2-green) 15%, transparent); }
.ws2-dialog .ws2-shift .ws2-select-trigger, .ws2-salon-time-row .ws2-select-trigger { height: 32px; padding-inline: 10px; }
.ws2-select-menu { position: fixed; z-index: 90; max-height: 280px; overflow-y: auto; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 12px; background: var(--pos-surface, #fff); padding: 4px; box-shadow: 0 12px 32px #0000001f; }
.ws2-select-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--pos-surface, #fff); font: inherit; font-size: 13px; color: var(--pos-text, #374151); text-align: left; white-space: nowrap; }
.ws2-select-menu > button > span { flex: 1; }
.ws2-select-menu > button[aria-selected="true"] { color: var(--ws2-green); font-weight: 500; }
.ws2-select-menu > button:hover, .ws2-select-menu > button:focus-visible { background: var(--pos-surface2, #f4f5f4); outline: none; }
.ws2-select-menu .ws2-icon { width: 16px; height: 16px; }
@media(max-width:1023px) { .ws2 *, .ws2-dialog * { scrollbar-width:none; } }
.ws2-heading p { line-height:18px; }
.ws2-legend { line-height:16.5px; }
@font-face { font-family: 'Work Schedule Sora'; src: url('../../portal/assets/sora-latin-ext-500-normal-B5KKQIFO.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0100-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Work Schedule Sora'; src: url('../../portal/assets/sora-latin-ext-600-normal-Cue1zdhl.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0100-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Work Schedule Sora'; src: url('../../portal/assets/sora-latin-ext-700-normal-DM0oy5s8.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0100-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
.ws2-tip [data-ws-action="expand-tip"] { min-height: 0; height: 16.5px; padding: 0; margin-top: 2px; line-height: 16.5px; }
.ws2-stats dt { min-height: 20px; }
.ws2-stats dd { line-height: 26px; }
.ws2 .ws2-info { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pos-muted, #b0b4ba); }
.ws2-info .ws2-icon { width: 14px; height: 14px; }
.ws2-info-popover { position: fixed; z-index: 60; width: 220px; padding: 8px 12px; border: 1px solid var(--pos-border, #e7e7e4); border-radius: 8px; box-shadow: 0 10px 28px #0000001f; background: var(--pos-surface, #fff); text-align: left; }
.ws2-info-popover strong { font-size: 12px; font-weight: 600; }
.ws2-info-popover p { margin-top: 2px; font-size: 12px; line-height: 16px; }
.ws2-info-popover[data-extended] { width: 360px; max-width: calc(100vw - 16px); max-height: min(360px, 50dvh); overflow: auto; overscroll-behavior: contain; }
.ws2-info-popover[data-extended] p { white-space: pre-line; }
.ws2-search { position: relative; }
.ws2-search > .ws2-tool { display: none; position: absolute; right: 4px; top: 5px; width: 24px; height: 24px; min-height: 24px; border: 0; flex-basis: 24px; padding: 0; }
.ws2-search:focus-within > .ws2-tool, .ws2-search:has(input:not(:placeholder-shown)) > .ws2-tool { display: inline-flex; }
.ws2-search:focus-within input, .ws2-search:has(input:not(:placeholder-shown)) input { padding-right: 22px !important; }
.ws2-header-actions .ws2-amber { overflow: visible; }
@media(max-width:1023px) { .ws2-filters > summary { position: relative; width:36px; padding:0; justify-content:center; } .ws2-filter-text { display:none; } .ws2-stats > div { min-height:60px; } }
@media(max-width:767px) { .ws2-heading p {font-size:12px;} .ws2-stats dt {font-size:12px;} .ws2-stat-icon {width:36px;height:36px;} .ws2-stats > div {gap:10px;} .ws2-days button {padding:0;} }
.ws2-request-person .ws2-avatar { width:36px; height:36px; }
.ws2-request-person > div small { color:var(--pos-muted, #8a8f98); font-size:11px; }
.ws2-request-kind { align-self:flex-start; border-radius:99px; background:var(--pos-surface2, #f1f1ef); color:var(--pos-muted, #4b5563); padding:2px 8px; font-size:11px; font-weight:500; }
.ws2-request .ws2-request-reason { background:none; padding:0; color:var(--pos-muted, #6b7280); }
.ws2-request-reason strong { font-weight:500; color:var(--pos-text, #374151); }
.ws2-request .ws2-request-payroll { color:var(--ws2-warning-ink); font-size:12px; font-weight:500; }
.ws2-screen-preview { padding:8px; border:1px solid var(--pos-border, #e7e7e4); border-radius:8px; background:var(--pos-surface2, #fafaf9); }
.ws2-screen-preview > div { display:flex; align-items:center; gap:6px; height:24px; border:1px solid var(--pos-border, #dcedd4); border-radius:6px; padding:0 8px; background:var(--pos-surface, #fff); font-size:10px; color:var(--pos-text, #374151); }
.ws2-screen-preview > div + div { margin-top:4px; }
.ws2-screen-preview .ws2-icon { width:12px; height:12px; }
.ws2-screen-preview > strong { display:flex; align-items:center; justify-content:center; height:48px; margin-top:4px; border:1px solid var(--pos-border, #dcedd4); border-radius:6px; font-size:10px; font-weight:500; background:var(--ws2-white); }
.ws2-screen-preview .ws2-card-hidden { border:1px dashed var(--pos-border, #dcddd8); color:var(--pos-muted, #b0b4ba); background:transparent; opacity:.6; }
.ws2-screen-preview small { margin-left:auto; font-size:10px; }
.ws2-dialog [data-ws-action="reset-settings"] { border:0; padding-inline:8px; color:var(--pos-muted, #4b5563); }
.ws2-required { color:var(--ws2-danger-ink); font-style:normal; }
.ws2-special-unselected .ws2-salon-day, .ws2-special-unselected .ws2-payroll, .ws2-special-unselected label:has([name="note"]) { opacity:.5; pointer-events:none; }
.ws2-special-pick { display:block !important; height:auto; min-height:0; width:100%; text-align:left; }
.ws2-special-pick > strong { display:inline; }
.ws2-special-pick > p { display:block; font-size:11px; line-height:16px; }
.ws2-special-heading p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws2-editor-staff { padding-bottom:10px; }
.ws2-dialog[data-category="schedule"] main > label + .ws2-hint { margin-top:-8px; }
.ws2-dialog[data-category="salon"] > form > .ws2-panel-tabs { margin-bottom:10px; }
.ws2-dialog .ws2-shift > label.ws2-extra { display:flex; flex-direction:row; align-items:center; justify-content:center; align-self:center; gap:0; flex:0 0 32px; width:32px; height:32px; padding:0; margin:0; line-height:1; }
.ws2-dialog .ws2-shift > label.ws2-extra > .ws2-icon { display:block; flex:0 0 14px; margin:0; }
.ws2-shifts-label { display:block; margin-top:12px; color:var(--pos-text, #374151); font-size:12px; font-weight:600; }
.ws2-dialog .ws2-plan[data-regular="false"] .ws2-shifts-label + .ws2-shifts { margin-top:4px; }
.ws2-dialog .ws2-picker-search { display:flex !important; flex-direction:row !important; align-items:center; gap:8px !important; padding:0 8px; border-bottom:1px solid var(--pos-border, #f1f1ee); }
.ws2-dialog .ws2-picker-search input { border:0; height:36px; padding:0; outline:0; box-shadow:none; }
.ws2-picker-search .ws2-icon { width:14px; height:14px; color:var(--pos-muted, #9ca3af); }
.ws2-dialog.ws2-overtime-modal { inset:50% auto auto 50%; transform:translate(-50%,-50%); height:auto; max-height:90dvh; margin:0; border-radius:16px; }
.ws2-overtime-modal > form { height:auto; max-height:90dvh; }
.ws2-overtime-modal header { padding:12px 20px; min-height:57px; }
.ws2-overtime-modal h2 { font-size:16px; line-height:24px; }
.ws2-overtime-modal main { padding:14px 20px; }
.ws2-overtime-modal main > p { line-height:18px; }
.ws2-overtime-modal footer { padding:10px 20px; }
.ws2-overtime-modal .ws2-panel-summary > div { padding:8px 12px; }
.ws2-overtime-modal .ws2-panel-summary strong { font-size:18px; line-height:27px; }
.ws2-overtime-row { padding:8px 0; gap:12px; }
.ws2-overtime-row .ws2-avatar { width:36px; height:36px; }
.ws2-overtime-person { display:flex; align-items:center; gap:8px; }
.ws2-overtime-person h3 { flex:1; line-height:19.5px; }
.ws2-overtime-person b { font-size:12px; line-height:18px; font-weight:600; }
.ws2-overtime-person em { font-size:11px; line-height:16.5px; font-style:normal; font-weight:700; color:var(--ws2-warning-ink); background:var(--ws2-warning-soft); border-radius:99px; padding:0 6px; }
.ws2-overtime-row p { font-size:11px; line-height:16.5px; color:var(--pos-muted, #8a8f98); margin-top:4px; }
.ws2-overtime-row .ws2-overtime-bar { margin-top:4px; }
.ws2-overtime-row .ws2-tool { width:32px; height:32px; min-height:32px; flex-basis:32px; }
@media(max-width:767px) { .ws2-dialog.ws2-overtime-modal {top:calc(var(--ws2-top,0px) + var(--ws2-height,100dvh)/2);max-height:var(--ws2-height,90dvh);} .ws2-overtime-modal > form {max-height:var(--ws2-height,90dvh);} .ws2-overtime-modal header,.ws2-overtime-modal main,.ws2-overtime-modal footer {padding-inline:16px;} }
.ws2-overtime-modal main > p { margin-top:-4px; }
.ws2-overtime-list { margin-top:-12px; }
.ws2-overtime-row { padding-block:10px; }
.ws2-overtime-row:last-child { border-bottom:0; }
.ws2-dialog footer { position:static; width:auto; box-shadow:none; }

/* Compact range filters, matching the shared DateRangeField design. */
.ws2-period-range { margin-top: 6px; }
.ws2-dialog .ws2-period-dates { display:flex; align-items:center; gap:8px; width:100%; height:32px; padding:0 10px; border:1px solid var(--pos-border, #e2e4e8); border-radius:8px; background:var(--pos-surface, #fff); text-align:left; font-size:13px; }
.ws2-period-dates > span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws2-period-dates > svg { flex-shrink:0; color:var(--pos-muted, #8a8f98); width:16px; height:16px; }
.ws2-dialog .ws2-period-dates[aria-expanded="true"] { border-color:var(--ws2-green); box-shadow:0 0 0 2px color-mix(in srgb, var(--ws2-green) 15%, transparent); }
.ws2-period-calendar .ws2-calendar-grid { row-gap:2px; }
.ws2-period-calendar .ws2-calendar-grid > button { position:relative; border-radius:6px; color:var(--pos-text, #1f2328); }
.ws2-period-calendar .ws2-calendar-grid > .ws2-other-month { color:var(--pos-border, #c4c8ce); }
.ws2-period-calendar .ws2-calendar-grid > .ws2-range-selected { border-radius:0; background:var(--pos-primary-soft, #eaf5e6); }
.ws2-period-calendar .ws2-calendar-grid > .ws2-range-edge { border-radius:6px; background:var(--ws2-green); color: var(--ws2-on-primary); font-weight:600; }
.ws2-period-calendar .ws2-date-today:not(.ws2-range-edge)::after { content:"" !important; position:absolute; bottom:3px; left:calc(50% - 2px); width:4px; height:4px; border-radius:50%; background:var(--ws2-green); }
.ws2-dialog .ws2-date-hint { margin:6px 0 0; color:var(--pos-muted, #8a8f98); font-size:11px; line-height:16px; }
.ws2-period-calendar .ws2-date-picker-footer { margin-top:6px; padding-top:6px; }
.ws2-dialog .ws2-date-clear { border-color:transparent; background:transparent; color:var(--pos-muted, #6b7280); }
.ws2-log-filter[open] > summary, .ws2-log-filter.ws2-filter-active > summary { position:relative; border-color:var(--ws2-green); background:var(--pos-primary-soft, #eaf5e6); color:var(--ws2-green); }
.ws2-log-filter [data-ws-period-count] { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--ws2-green); color: var(--ws2-on-primary); font-size:10px; line-height:18px; text-align:center; }
.ws2-log-filter > div { width:min(300px,calc(100vw - 24px)); }
.ws2-dialog[data-category="activity"] .ws2-list-toolbar { flex-shrink:0; padding:8px 16px; }
.ws2-dialog[data-category="activity"] .ws2-list-toolbar h3 { font-size:13px; line-height:20px; font-weight:600; }
.ws2-dialog[data-category="activity"] .ws2-list-toolbar p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:16px; }
.ws2-activity-filter > div { top:calc(100% + 8px); box-shadow:0 12px 32px #0000001f; }
.ws2-activity-filter > summary { color:var(--pos-muted, #4b5563); font-size:13px; font-weight:500; }
.ws2-log-filter-fields { display:flex; flex-direction:column; gap:10px; }
.ws2-activity-filter .ws2-select-trigger { height:32px; }
.ws2-log-filter-actions { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid var(--pos-border, #f1f1ee); }
.ws2-dialog .ws2-log-filter-actions .ws2-link { height:auto; min-height:0; padding:0; border:0; background:transparent; font-size:13px; font-weight:600; }
.ws2-dialog .ws2-log-filter-actions .ws2-link:disabled { color:var(--pos-muted, #b0b4ba); opacity:1; }
.ws2-dialog .ws2-log-filter-actions .ws2-primary { height:32px; min-height:32px; padding:0 14px; font-size:13px; }
.ws2-dialog[data-category="activity"] main { gap:12px; }
.ws2-dialog[data-category="activity"] .ws2-activity li { gap:10px; padding:6px 4px; border:0; border-radius:8px; }
.ws2-dialog[data-category="activity"] .ws2-activity li + li { margin-top:4px; }
.ws2-activity li > div { min-width:0; flex:1; }
.ws2-dialog[data-category="activity"] .ws2-activity strong { display:block; font-size:13px; line-height:18px; font-weight:400; }
.ws2-dialog[data-category="activity"] .ws2-activity p { margin-top:0; color:var(--pos-muted, #8a8f98); line-height:16px; }
.ws2-activity li > span > .ws2-icon { width:14px; height:14px; }
.ws2-period-calendar { padding:0; }
.ws2-period-calendar .ws2-calendar-head { margin:8px 8px 4px; }
.ws2-period-calendar .ws2-calendar-head strong { font-size:13px; font-weight:600; }
.ws2-period-calendar .ws2-calendar-grid { margin:0 8px; }
.ws2-dialog .ws2-period-calendar .ws2-date-hint { margin:4px 8px 8px; }
.ws2-period-calendar .ws2-date-picker-footer { margin-top:0; padding:6px 8px; border-top:1px solid var(--pos-border, #f1f1ee); }
.ws2-period-calendar .ws2-date-picker-footer .ws2-btn { height:28px; min-height:28px; padding:0 12px; border-radius:6px; font-size:12px; }
.ws2-period-calendar .ws2-date-picker-footer .ws2-date-clear { padding-inline:8px; font-weight:500; }
.ws2-period-calendar .ws2-date-clear:disabled { opacity:.4; }
@media(max-width:1023px) { .ws2-activity-filter > summary { width:36px; justify-content:center; padding:0; } .ws2-activity-filter > summary > span { display:none; } }
@media(max-width:767px) { .ws2-dialog[data-category="activity"] .ws2-list-toolbar { padding-inline:12px; } }

/* Add schedule uses the design's searchable single-staff picker. */
.ws2-dialog .ws2-staff-select-trigger { padding-inline:10px; }
.ws2-staff-select .ws2-avatar, .ws2-staff-select-menu .ws2-avatar { width:24px; height:24px; font-size:10px; font-weight:600; }
.ws2-staff-select-trigger > .ws2-avatar { flex:none; overflow:visible; }
.ws2-staff-select .ws2-avatar-status, .ws2-staff-select-menu .ws2-avatar-status { width:12px; height:12px; border-width:2px; bottom:-2px; right:-2px; }
.ws2-staff-select-name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; }
.ws2-staff-select-trigger .ws2-placeholder { color:var(--pos-muted, #9ca3af); font-weight:400; }
.ws2-staff-select-trigger > .ws2-staff-select-title, .ws2-staff-select-title { flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--pos-muted, #8a8f98); font-size:11px; font-weight:400; }
.ws2-staff-select-trigger > .ws2-icon { flex:none; color:var(--pos-muted, #9ca3af); transition:transform .15s; }
.ws2-staff-select-trigger[aria-expanded="true"] > .ws2-icon { transform:rotate(180deg); }
.ws2-staff-select-menu { max-height:none; padding:0; overflow:hidden; box-shadow:0 14px 36px #00000024; }
.ws2-staff-select-search { display:flex; align-items:center; gap:8px; padding:0 10px; border-bottom:1px solid var(--pos-border, #f1f1ee); }
.ws2-staff-select-search > .ws2-icon { width:14px; height:14px; color:var(--pos-muted, #9ca3af); flex:none; }
.ws2-dialog .ws2-staff-select-search > input { flex:1; min-width:0; height:36px; padding:0; border:0; border-radius:0; outline:none; box-shadow:none; font-size:13px; }
.ws2-staff-select-search > input::placeholder { color:var(--pos-muted, #9ca3af); }
.ws2-staff-select-menu > ul { list-style:none; margin:0; padding:4px 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--pos-border, #d4d4d4) transparent; }
.ws2-staff-select-menu [role="option"] { display:flex; align-items:center; gap:10px; height:36px; width:100%; padding:0 10px; border:0; background:var(--pos-surface, #fff); text-align:left; }
.ws2-staff-select-menu [role="option"]:hover, .ws2-staff-select-menu [role="option"]:focus-visible { background:var(--pos-canvas, #f7f7f5); outline:none; }
.ws2-staff-select-menu [aria-selected="true"] { background:var(--pos-primary-soft, #f6fbf4); }
.ws2-staff-select-menu [aria-selected="true"] .ws2-staff-select-name { font-weight:600; color:var(--ws2-primary-ink); }
.ws2-staff-select-menu [role="option"] > .fa-check { flex:none; color:var(--ws2-green); }
.ws2-staff-select-menu [aria-selected="false"] > .fa-check { visibility:hidden; }
.ws2-staff-select-menu [data-ws-staff-empty] { padding:16px 12px; color:var(--pos-muted, #6b7280); font-size:12px; text-align:center; }
@media(max-width:639px) { .ws2-staff-select-title { display:none; } }

/* Keep the compact list search horizontal inside form labels. */
.ws2-dialog label.ws2-search { flex-direction:row; align-items:center; gap:8px; min-width:36px; max-width:100%; overflow:hidden; font-weight:400; }
.ws2-dialog .ws2-search > .ws2-icon { width:16px; height:16px; flex:none; }
.ws2-dialog .ws2-search > input { flex:0; width:0; opacity:0; }
.ws2-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.ws2-dialog .ws2-search:is(:focus-within,:has(input:not(:placeholder-shown))) > input { flex:1; width:100%; opacity:1; }
.ws2-list-toolbar:has(.ws2-search input:not(:placeholder-shown)) > div { display:none; }
.ws2-list-toolbar .ws2-search:has(input:not(:placeholder-shown)) { flex:1; }
.ws2-timeoff-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding-block:8px; }
.ws2-timeoff-pagination [role="status"] { width:100%; color:var(--pos-muted, #6b7280); font-size:12px; text-align:center; }
.ws2-request-list[aria-busy="true"], [data-ws-request-list][aria-busy="true"] { opacity:.6; pointer-events:none; }

.ws2-staff-multiselect > summary { height:auto; min-height:36px; align-items:flex-start; gap:8px; }
.ws2-staff-multiselect > summary > .ws2-icon { flex:none; margin-top:3px; }
.ws2-selected-chips { display:flex; flex:1; min-width:0; flex-wrap:wrap; gap:5px; }
.ws2-staff-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:2px 5px 2px 2px; border-radius:16px; background:var(--pos-primary-soft, #f1f5ee); color:var(--pos-text, #1f2328); font-size:12px; }
.ws2-staff-chip > span:not(.ws2-avatar) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws2-staff-chip .ws2-avatar { width:22px; height:22px; font-size:9px; }
.ws2-dialog .ws2-staff-chip .ws2-tool { width:18px; height:18px; min-height:18px; flex-basis:18px; border:0; padding:0; background:transparent; color:var(--pos-muted, #8a8f98); }
.ws2-staff-chip .ws2-tool .ws2-icon { width:12px; height:12px; }
.ws2-staff-multiselect:has(.ws2-selected-chips) > div { top:calc(100% + 4px); }
.ws2-selected-leave { padding:10px 12px; border:1px solid var(--pos-border, #e7e7e4); border-radius:10px; background:var(--pos-canvas, #fafbf9); }
.ws2-selected-leave-title,.ws2-selected-person { display:flex; align-items:center; gap:8px; }
.ws2-selected-leave-title { justify-content:space-between; margin-bottom:8px; font-size:12px; }
.ws2-selected-leave-title > span,.ws2-selected-person > span:last-child { color:var(--pos-muted, #8a8f98); font-size:11px; }
.ws2-selected-leave > article + article { margin-top:10px; padding-top:10px; border-top:1px solid var(--pos-border, #e7e7e4); }
.ws2-selected-person .ws2-avatar { width:24px; height:24px; font-size:10px; }
.ws2-selected-person > strong { flex:1; font-size:12px; font-weight:600; }
.ws2-existing-leave { display:flex; flex-wrap:wrap; gap:2px 8px; margin-top:6px; padding:6px 8px; border-radius:6px; background:var(--pos-surface, #fff); font-size:11px; }
.ws2-existing-leave > span:first-child { flex:1; }
.ws2-existing-leave > small { width:100%; color:var(--pos-muted, #6b7280); }
.ws2-existing-overlap { background:var(--ws2-warning-soft); color:var(--ws2-warning-ink); }
.ws2-existing-overlap > small { color:var(--ws2-warning-ink); }
.ws2-dialog .ws2-selected-leave > .ws2-hint { margin:4px 0; }
.ws2-selected-leave [role="alert"] { color:var(--ws2-danger-ink); font-size:12px; }
.ws2-history-pagination { width:100%; font-size:12px; }
.ws2-pagination-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--pos-muted, #6b7280); }
.ws2-pagination-meta strong { font-weight:500; color:var(--pos-text, #374151); }
.ws2-dialog .ws2-pagination-meta label { flex-direction:row; align-items:center; gap:8px; font-size:11px; font-weight:400; }
.ws2-pagination-meta .ws2-select { width:68px; }
.ws2-dialog .ws2-pagination-meta .ws2-select-trigger { height:28px; padding-inline:8px; font-size:12px; }
.ws2-history-pagination nav { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:8px; }
.ws2-dialog .ws2-history-pagination .ws2-tool,.ws2-dialog .ws2-page-number { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; min-height:28px; flex:none; padding:0; border:1px solid var(--pos-border, #e2e4e8); border-radius:7px; background:var(--pos-surface, #fff); color:var(--pos-muted, #4b5563); font-size:12px; }
.ws2-dialog .ws2-page-number[aria-current="page"] { background:var(--pos-primary-soft, #eaf5e6); color:var(--ws2-primary-ink); border-color:var(--pos-border, #8bbd7f); font-weight:600; }
.ws2-dialog .ws2-history-pagination button:disabled { opacity:.35; cursor:default; }
.ws2-page-gap { color:var(--pos-muted, #9ca3af); padding:0 2px; }
.ws2-dialog[data-category="timeoff"]:has(.ws2-history-pagination) footer { padding:10px 16px; }
.ws2-confirm main > p { white-space:pre-line; }
@media(max-width:420px) { .ws2-dialog[data-category="timeoff"]:has(.ws2-history-pagination) footer { padding-inline:12px; } .ws2-history-pagination nav { gap:4px; } }

/* One mobile scroll area lets overview cards leave the viewport above the team. */
.ws2-schedule-heading { flex:none; min-width:0; background:var(--pos-surface, #fff); }
.ws2-mobile-heading { display:none; }
@media(max-width:767px) {
  .ws2-content { overflow-y:auto; overscroll-behavior-y:contain; }
  .ws2-content > * { flex-shrink:0; }
  .ws2-schedule { flex:none; overflow:visible; min-height:calc(100% + 16px); }
  .ws2-schedule-heading { position:sticky; top:-8px; z-index:5; border-radius:11px 11px 0 0; }
  .ws2-mobile-heading { display:block; }
  .ws2 [data-ws-grid],.ws2-mobile { flex:none; }
  .ws2-mobile ul { flex:none; overflow:visible; }
}

@media(max-width:767px) {
  .ws2-dialog.ws2-panel:not(.ws2-cell-menu) {
    inset:var(--ws2-sheet-top,0px) auto auto var(--ws2-sheet-left,0px);
    width:var(--ws2-sheet-width,100vw); max-width:var(--ws2-sheet-width,100vw);
    height:var(--ws2-sheet-height,100dvh); max-height:var(--ws2-sheet-height,100dvh);
    margin:0; border-radius:0; box-shadow:none;
  }
  .ws2-dialog.ws2-panel:not(.ws2-cell-menu)[open] { animation:ws2-mobile-sheet-in .18s ease-out; }
  .ws2-dialog.ws2-panel:not(.ws2-cell-menu) > form > header { padding-top:calc(8px + env(safe-area-inset-top,0px)); }
  .ws2-dialog.ws2-panel:not(.ws2-cell-menu) > form > footer { padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
  .ws2-dialog::backdrop { clip-path:none; }
}
@keyframes ws2-mobile-sheet-in { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .ws2-dialog.ws2-panel:not(.ws2-cell-menu)[open] { animation:none; } }

.ws2 .ws2-cell.ws2-cell-active { outline:2px solid var(--ws2-green); outline-offset:-2px; }
.ws2-dialog.ws2-cell-menu > form > header { display:flex; background:var(--pos-surface, #fff); border:0; padding:12px 14px 0; }
.ws2-cell-person { display:flex; align-items:center; gap:10px; min-width:0; }
.ws2-cell-person > div { min-width:0; }
.ws2-cell-person h3 { font-size:14px; font-weight:600; }
.ws2-cell-person .ws2-avatar { width:38px; height:38px; flex:none; }
.ws2-cell-menu header .ws2-tool { border-radius:50%; background:var(--pos-surface2, #f3f6f3); }
@media(max-width:767px) {
  .ws2-dialog.ws2-cell-menu.ws2-cell-sheet { inset:0; width:100vw; max-width:none; height:100dvh; max-height:100dvh; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:hidden; }
  .ws2-dialog.ws2-cell-sheet::backdrop { background:rgba(15,23,42,.24); clip-path:none; }
  .ws2-dialog.ws2-cell-sheet > form.sc2-bottom-sheet__panel { height:auto; margin:0; }
  .ws2-dialog.ws2-cell-sheet > form > header { padding:4px 16px 12px; }
  .ws2-dialog.ws2-cell-sheet main { flex:0 1 auto; padding:0 16px calc(12px + env(safe-area-inset-bottom,0px)); }
  .ws2-cell-sheet .ws2-cell-actions .ws2-btn { height:44px; }
}

/* The shared Salon Center sheet inherits the schedule's current POS palette. */
.ws2-cell-sheet > form.sc2-bottom-sheet__panel,.ws2-cell-sheet .sc2-bottom-sheet__handle { background:var(--ws2-white); color:var(--ws2-text); }
.ws2-cell-sheet .sc2-bottom-sheet__handle > span { background:var(--ws2-line); }

@media screen {
  html[data-pos-ui][data-pos-background]:not([data-pos-background=default]) .ws2 { background:var(--pos-image-workspace,transparent); }
}