/* SpaLite admin tweaks on top of Filament defaults (no build step). */
.sl-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; color: inherit; }
.sl-brand-logo { width: 2rem; height: 2rem; border-radius: .5rem; background: #1f9d7a; color: #fff; display: grid; place-items: center; font-size: 1rem; }
.sl-seg { display: inline-flex; border: 1px solid rgb(229 231 235); border-radius: .6rem; overflow: hidden; font-size: .8rem; font-weight: 600; margin-right: .5rem; }
.dark .sl-seg { border-color: rgb(255 255 255 / .1); }
.sl-seg a { padding: .35rem .7rem; color: rgb(107 114 128); }
.sl-seg a.on { background: #1f9d7a; color: #fff; }
.sl-seg-floating { position: fixed; top: 1rem; right: 1rem; z-index: 30; background: #fff; }
.dark .sl-seg-floating { background: rgb(17 24 39); }
.sl-login-hint { margin-top: 1rem; font-size: .8rem; color: rgb(107 114 128); border: 1px dashed rgb(229 231 235); border-radius: .6rem; padding: .6rem .8rem; background: rgb(249 250 251); }
.dark .sl-login-hint { background: transparent; border-color: rgb(255 255 255 / .1); color: rgb(156 163 175); }
.sl-login-foot { margin-top: 1rem; text-align: center; font-size: .75rem; color: rgb(107 114 128); }
.sl-sidebar-foot { padding: .75rem 1.5rem 1rem; font-size: .75rem; color: rgb(107 114 128); line-height: 1.5; }

/* outlet switcher */
.sl-switcher { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem .4rem .6rem; border: 1px solid rgb(229 231 235); border-radius: .6rem; font-weight: 500; font-size: .875rem; background: transparent; cursor: pointer; }
.dark .sl-switcher { border-color: rgb(255 255 255 / .1); }
.sl-switcher .dot, .sl-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: #1f9d7a; display: inline-block; flex: none; }
.sl-dot.muted { background: rgb(156 163 175); }
.sl-switcher .chev { color: rgb(107 114 128); font-size: .65rem; }
.sl-switcher-code { margin-left: auto; padding-left: 1rem; font-size: .7rem; color: rgb(107 114 128); }
.sl-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: #e8f6f1; color: #17826a; }
.dark .sl-chip { background: #0f2a24; color: #6ee7c4; }

/* dashboard */
.sl-notice { display: flex; font-weight: 400; gap: .75rem; padding: .9rem 1.1rem; border-radius: .75rem; background: #e8f6f1; color: #17826a; font-size: .875rem; border: 1px solid #cdeee3; }
.dark .sl-notice { background: #0f2a24; color: #6ee7c4; border-color: #14382f; }
.sl-stages { display: grid; gap: .6rem; }
.sl-stage { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; }
.sl-stage .sl-chip { flex: none; min-width: 4.5rem; justify-content: center; }

/* audit diff */
.sl-diff { display: grid; grid-template-columns: minmax(8rem, 1fr) 1fr 1fr; border: 1px solid rgb(229 231 235); border-radius: .5rem; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.dark .sl-diff { border-color: rgb(255 255 255 / .1); }
.sl-diff > div { padding: .45rem .6rem; border-bottom: 1px solid rgb(229 231 235); word-break: break-word; }
.dark .sl-diff > div { border-color: rgb(255 255 255 / .06); }
.sl-diff .h { font-family: Inter, sans-serif; font-weight: 600; color: rgb(107 114 128); background: rgb(249 250 251); }
.dark .sl-diff .h { background: rgb(255 255 255 / .03); }
.sl-diff .old { color: #dc2626; } .dark .sl-diff .old { color: #f87171; }
.sl-diff .new { color: #17826a; } .dark .sl-diff .new { color: #6ee7c4; }
.sl-muted { color: rgb(107 114 128); font-size: .8rem; }
.sl-tablet-link { font-family: ui-monospace, monospace; font-size: .85rem; padding: .5rem .7rem; border-radius: .5rem; background: rgb(249 250 251); border: 1px solid rgb(229 231 235); word-break: break-all; }
.dark .sl-tablet-link { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .1); }
.sl-people { display: flex; flex-direction: column; gap: .5rem; }
.sl-person { display: flex; align-items: center; gap: .6rem; font-size: .875rem; }
.sl-avatar { width: 2rem; height: 2rem; border-radius: 9999px; background: #cdeee3; color: #17826a; display: grid; place-items: center; font-size: .7rem; font-weight: 700; flex: none; }
.dark .sl-avatar { background: #14382f; color: #6ee7c4; }
.sl-chip-gray { background: rgb(243 244 246); color: rgb(107 114 128); margin-left: .25rem; }
.dark .sl-chip-gray { background: rgb(255 255 255 / .06); color: rgb(156 163 175); }

/* Stage 2: commission resolver preview */
.sl-preview { display: grid; gap: 1rem; }
.sl-preview-form { display: grid; grid-template-columns: 1fr 1.4fr .8fr; gap: .75rem; }
.sl-preview-form label { display: grid; gap: .3rem; font-size: .8rem; }
@media (max-width: 900px) { .sl-preview-form { grid-template-columns: 1fr; } }
.sl-result { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.sl-ladder { display: grid; gap: .5rem; }
.sl-step { display: grid; grid-template-columns: 1.75rem 1fr auto; gap: .75rem; align-items: center; padding: .6rem .8rem; border: 1px solid rgb(229 231 235); border-radius: .6rem; font-size: .875rem; }
.dark .sl-step { border-color: rgb(255 255 255 / .1); }
.sl-step .n { width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: rgb(243 244 246); color: rgb(107 114 128); display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.dark .sl-step .n { background: rgb(255 255 255 / .08); }
.sl-step.win { border-color: #1f9d7a; background: #e8f6f1; }
.dark .sl-step.win { background: #0f2a24; }
.sl-step.win .n { background: #1f9d7a; color: #fff; }
.sl-step.skip { opacity: .7; }

/* Stage 2: attendance board + pay example */
.sl-att { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sl-att th { text-align: left; font-size: .75rem; color: rgb(107 114 128); font-weight: 600; padding: .6rem .8rem; border-bottom: 1px solid rgb(229 231 235); background: rgb(249 250 251); }
.sl-att td { padding: .6rem .8rem; border-bottom: 1px solid rgb(229 231 235); vertical-align: middle; }
.dark .sl-att th { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); }
.dark .sl-att td { border-color: rgb(255 255 255 / .06); }
.sl-att .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-att .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-att tr.total td { font-weight: 700; background: rgb(249 250 251); }
.dark .sl-att tr.total td { background: rgb(255 255 255 / .03); }
.sl-att tr.off td { color: rgb(156 163 175); }
.sl-att tr.warn td { background: #fff7ed; }
.dark .sl-att tr.warn td { background: rgb(120 53 15 / .2); }
.sl-tag { display: inline-flex; padding: .1rem .5rem; border-radius: 9999px; font-size: .7rem; font-weight: 600; background: rgb(243 244 246); color: rgb(107 114 128); }
.sl-tag.green { background: #ecfdf5; color: #047857; } .sl-tag.blue { background: #eff6ff; color: #1d4ed8; }
.sl-tag.red { background: #fef2f2; color: #b91c1c; } .sl-tag.amber { background: #fffbeb; color: #b45309; }
.dark .sl-tag.green { background: #052e1f; color: #6ee7b7; } .dark .sl-tag.blue { background: #0b1f4d; color: #93c5fd; }
.dark .sl-tag.red { background: #3b0a0a; color: #fca5a5; } .dark .sl-tag.amber { background: #3a2605; color: #fcd34d; }
.sl-att-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.sl-example { border: 1px solid #cdeee3; background: #e8f6f1; border-radius: .75rem; padding: .8rem 1rem; display: grid; gap: .3rem; font-size: .85rem; color: rgb(17 24 39); }
.dark .sl-example { background: #0f2a24; border-color: #14382f; color: rgb(243 244 246); }
.sl-example .row { display: flex; justify-content: space-between; gap: 1rem; }
.sl-example .row b { font-variant-numeric: tabular-nums; }
.sl-example .total { border-top: 1px dashed #9fd9c4; padding-top: .3rem; font-weight: 700; }

/* Stage 4: expenses strip, payroll run */
.sl-expstrip { display: grid; gap: 10px; }
.sl-exphead { display: flex; gap: 12px; align-items: baseline; }
.sl-expcats { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-expcat { flex: 1 1 140px; border: 1px solid rgb(229 231 235); border-radius: 12px; padding: 10px 12px; }
.dark .sl-expcat { border-color: rgb(255 255 255 / .1); }
.sl-expcat .k { font-size: 12px; color: rgb(107 114 128); display: flex; justify-content: space-between; }
.sl-expcat .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sl-expcat .bar { height: 4px; border-radius: 4px; background: rgb(243 244 246); margin-top: 6px; overflow: hidden; }
.dark .sl-expcat .bar { background: rgb(255 255 255 / .08); }
.sl-expcat .bar span { display: block; height: 100%; background: rgb(31 157 122); }
.sl-pay { width: 100%; border-collapse: collapse; font-size: 13px; }
.sl-pay th { text-align: left; font-size: 12px; color: rgb(107 114 128); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid rgb(229 231 235); white-space: nowrap; }
.sl-pay td { padding: 9px 10px; border-bottom: 1px solid rgb(229 231 235); vertical-align: top; }
.dark .sl-pay th, .dark .sl-pay td { border-color: rgb(255 255 255 / .1); }
.sl-pay .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-pay .sub { display: block; font-size: 11px; color: rgb(107 114 128); }
.sl-pay tr.open > td { background: rgb(232 246 241); }
.dark .sl-pay tr.open > td { background: rgb(15 42 36); }
.sl-pay tr.detail > td { background: rgb(249 250 251); }
.dark .sl-pay tr.detail > td { background: rgb(255 255 255 / .03); }
.sl-pay tr.total td { font-weight: 700; border-top: 2px solid currentColor; }
.sl-pay .toggle { cursor: pointer; color: rgb(107 114 128); }
.sl-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 6px 0; }
@media (max-width: 900px) { .sl-dgrid { grid-template-columns: 1fr; } }
.sl-dl { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed rgb(229 231 235); }
.dark .sl-dl { border-color: rgb(255 255 255 / .1); }
.sl-dl.tot { border-bottom: 0; border-top: 2px solid currentColor; font-weight: 700; }
.sl-dl.off .lbl { text-decoration: line-through; color: rgb(107 114 128); }
.sl-dl .lbl { flex: 1; }
.sl-dl input { width: 100px; text-align: right; border: 1px solid rgb(209 213 219); border-radius: 8px; padding: 4px 8px; background: transparent; font-variant-numeric: tabular-nums; }
.sl-warns { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-warn { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.dark .sl-warn { background: #3a2605; color: #fde68a; border-color: #78350f; }
.sl-steps { display: flex; gap: 6px; align-items: center; font-size: 12px; color: rgb(107 114 128); }
.sl-steps .s { padding: 3px 10px; border-radius: 999px; border: 1px solid rgb(229 231 235); }
.sl-steps .s.on { background: rgb(31 157 122); color: #fff; border-color: rgb(31 157 122); font-weight: 700; }
.sl-pay .fi-badge, .sl-pay .fi-badge span { overflow: visible; text-overflow: clip; white-space: nowrap; max-width: none; }

/* ---- Stage 5: dashboard, drill-down, reports (mobile first) ---- */
:root { --sl-jade: #1f9d7a; --sl-jade-600: #17826a; --sl-jade-50: #e8f6f1; --sl-grey: #cbd5e1; --sl-track: #eef2f6; --sl-border: rgb(229 231 235); --sl-surface: #fff; --sl-muted: rgb(107 114 128); }
.dark { --sl-grey: #475569; --sl-track: #1f2937; --sl-border: rgb(255 255 255 / .1); --sl-surface: rgb(24 24 27); --sl-jade-50: #0f2a24; --sl-muted: rgb(156 163 175); }
.sld { display: grid; gap: 14px; }
.sld-muted { color: var(--sl-muted); } .sld .small, .sld-muted.small { font-size: 12px; }
.sld .up { color: #047857; font-weight: 700; } .sld .down { color: #b91c1c; font-weight: 700; }
.dark .sld .up { color: #6ee7b7; } .dark .sld .down { color: #fca5a5; }
.sld-seg { display: inline-grid; grid-auto-flow: column; border: 1px solid var(--sl-border); border-radius: 10px; overflow: hidden; background: var(--sl-surface); }
.sld-seg button { padding: 8px 16px; font-weight: 600; font-size: 14px; color: var(--sl-muted); }
.sld-seg button.on { background: var(--sl-jade); color: #fff; }
.sld-seg.small button { padding: 5px 11px; font-size: 12px; }
.sld > .sld-seg { display: grid; grid-template-columns: 1fr 1fr; }
.sld-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sld-kpis .k { background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.sld-kpis .k > span { font-size: 11px; color: var(--sl-muted); font-weight: 600; }
.sld-kpis .k b { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sld-kpis .k small { font-size: 11px; color: var(--sl-muted); }
.sld-kpis .k.hl { border: 2px solid var(--sl-jade); background: var(--sl-jade-50); }
.sld-est { font-style: normal; font-size: 10px; font-weight: 700; color: #b45309; background: #fffbeb; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.dark .sld-est { background: #3a2605; color: #fcd34d; }
.sld-alerts { display: grid; gap: 8px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 10px 12px; color: #7f1d1d; }
.dark .sld-alerts { background: #2a0d0d; border-color: #7f1d1d; color: #fecaca; }
.sld-alerts .ah { display: flex; justify-content: space-between; } .sld-alerts .chips { display: flex; gap: 6px; overflow-x: auto; }
.sld-alerts .ach { white-space: nowrap; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid #fecaca; color: #b91c1c; }
.sld-alerts .ach.medium { color: #b45309; border-color: #fde68a; } .sld-alerts .ach.low { color: var(--sl-muted); border-color: var(--sl-border); }
.dark .sld-alerts .ach { background: rgb(24 24 27); }
.sld-sec { font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; margin: 2px 2px -4px; }
.sld-sec span { font-size: 12px; font-weight: 400; }
.sld-cards { display: grid; gap: 8px; }
.sld-oc { background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 14px; padding: 12px; display: grid; gap: 6px; }
.sld-oc .r1 { display: flex; gap: 8px; align-items: center; } .sld-oc .chev { margin-left: auto; color: var(--sl-muted); font-size: 18px; }
.sld-oc .r2 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; } .sld-oc .big { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sld-oc .r3 { font-size: 12px; }
.sld-chip { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--sl-track); color: var(--sl-muted); white-space: nowrap; }
.sld-chip.open { background: var(--sl-jade-50); color: var(--sl-jade-600); } .sld-chip.closed { background: #ecfdf5; color: #047857; }
.sld-chip.late { background: #fffbeb; color: #b45309; }
.dark .sld-chip.closed { background: #052e1f; color: #6ee7b7; } .dark .sld-chip.late { background: #3a2605; color: #fcd34d; } .dark .sld-chip.open { color: #6ee7c4; }
.sld-card { background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; min-width: 0; }
.sld-card > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sld-card > header h3 { font-weight: 600; font-size: 15px; }
.sld-legend { display: flex; gap: 10px; font-size: 11px; color: var(--sl-muted); flex-wrap: wrap; margin-left: auto; }
.sld-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.sld-legend i.c1 { background: var(--sl-jade); } .sld-legend i.c2 { background: #5fb99d; } .sld-legend i.c3 { background: var(--sl-grey); }
.sld-cards > .sld-legend { margin-left: 2px; }
.sld-grid2, .sld-grid3 { display: grid; gap: 14px; }
.sld-tt { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sl-border); font-size: 13px; }
.sld-tt:last-child { border-bottom: 0; } .sld-tt .n { width: 22px; height: 22px; border-radius: 50%; background: var(--sl-jade-50); color: var(--sl-jade-600); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.sld-tt b:last-child { font-variant-numeric: tabular-nums; }
.sld-al { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sl-border); font-size: 13px; }
.sld-al .sev { width: 10px; height: 10px; border-radius: 50%; } .sld-al .sev.high { background: #dc2626; } .sld-al .sev.medium { background: #d97706; } .sld-al .sev.low { background: var(--sl-grey); }
.sld-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sld-table th { text-align: left; font-size: 12px; color: var(--sl-muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--sl-border); white-space: nowrap; }
.sld-table td { padding: 10px 12px; border-bottom: 1px solid var(--sl-border); vertical-align: top; } .sld-table tbody tr { cursor: pointer; }
.sld-table tbody tr:hover td { background: rgb(0 0 0 / .02); } .sld-table .r, .slr-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sld-table tr.tot td { font-weight: 700; border-top: 2px solid currentColor; cursor: default; }
.sld-install { display: flex; gap: 10px; align-items: center; background: var(--sl-surface); border: 1px solid var(--sl-jade); border-radius: 14px; padding: 10px 12px; }
.sld-install .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--sl-jade) url("/icons/maskable-192.png") center / cover; color: transparent; flex: none; }
.sld-x { color: var(--sl-muted); padding: 4px 8px; }
.sld-pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--sl-border); border-radius: 999px; color: var(--sl-muted); background: var(--sl-surface); }
.sld-pill.on { background: var(--sl-jade); color: #fff; border-color: var(--sl-jade); }
.sld-pp { display: flex; gap: 8px; flex-wrap: wrap; } .sld-pp > div { border: 1px solid var(--sl-border); border-radius: 10px; padding: 8px 12px; font-size: 12px; display: grid; min-width: 120px; } .sld-pp b { font-size: 15px; }
.sld-kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--sl-border); font-size: 13px; font-variant-numeric: tabular-nums; }
.sld-kv.tot { border-bottom: 0; border-top: 2px solid currentColor; font-weight: 700; }
.sld-wide-only { display: none; }
.slc .slc-b { fill: var(--sl-jade); opacity: .85; } .slc .slc-bp { fill: var(--sl-jade); opacity: .35; } .slc .slc-bh { fill: var(--sl-jade-600); }
.slc .slc-g { stroke: var(--sl-border); stroke-width: 1; } .slc .slc-ax { fill: var(--sl-muted); font-size: 10px; }
.slc .slc-lc { fill: none; stroke: var(--sl-jade); stroke-width: 2.5; } .slc .slc-lp { fill: none; stroke: var(--sl-grey); stroke-width: 2; stroke-dasharray: 4 3; } .slc .slc-dot { fill: var(--sl-jade); }
.slc-hbars { display: grid; gap: 8px; } .slc-hb { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; column-gap: 10px; align-items: center; font-size: 13px; }
.slc-hb .t { grid-column: 1 / -1; order: 3; height: 10px; background: var(--sl-track); border-radius: 6px; overflow: hidden; } .slc-hb .t span { display: block; height: 100%; background: var(--sl-jade); border-radius: 6px; }
.slc-hb .v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; } .slc-hb .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slc-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--sl-track); }
.slc-split .c1 { background: var(--sl-jade); } .slc-split .c2 { background: #2563eb; } .slc-split .c3 { background: #7c3aed; }
.slr-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .slr-outlets { display: flex; gap: 6px; flex-wrap: wrap; }
.slr-hub { display: grid; gap: 14px; } .slr-cards { display: grid; gap: 12px; }
.slr-card .rh { display: flex; gap: 12px; align-items: center; } .slr-card .ri { width: 38px; height: 38px; border-radius: 10px; background: var(--sl-jade-50); color: var(--sl-jade-600); display: grid; place-items: center; font-size: 18px; flex: none; }
.slr-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.slr-exp { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--sl-border); font-size: 13px; }
.slr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.slr-table th { text-align: left; font-size: 12px; color: var(--sl-muted); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--sl-border); white-space: nowrap; }
.slr-table td { padding: 7px 12px; border-bottom: 1px solid var(--sl-border); }
.slr-table tr.grp td { font-weight: 700; font-size: 11px; letter-spacing: .05em; background: rgb(0 0 0 / .03); }
.slr-table tr.sub td { font-weight: 700; background: rgb(0 0 0 / .02); } .slr-table tr.tot td { font-weight: 800; border-top: 2px solid currentColor; background: var(--sl-jade-50); }
.slr-table td.neg { color: #b91c1c; } .slr-table td.pos { color: #047857; } .dark .slr-table td.neg { color: #fca5a5; } .dark .slr-table td.pos { color: #6ee7b7; }
.slr-table tr.delta td { font-size: 12px; }
.sl-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--sl-surface); border-top: 1px solid var(--sl-border); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.sl-bnav a, .sl-bnav button { display: grid; justify-items: center; font-size: 11px; font-weight: 600; color: var(--sl-muted); gap: 1px; } .sl-bnav span { font-size: 18px; line-height: 1.1; }
.sl-bnav .on { color: var(--sl-jade-600); }
@media (max-width: 1023px) { .fi-main { padding-bottom: 76px; } }
@media (min-width: 1024px) {
    .sl-bnav { display: none; }
    .sld-narrow-only { display: none !important; } .sld-wide-only { display: block; } section.sld-wide-only { display: grid; }
    .sld > .sld-seg { display: inline-grid; justify-self: start; }
    .sld-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sld-kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sld-kpis .k { padding: 14px 16px; } .sld-kpis .k b { font-size: 22px; }
    .sld-grid2 { grid-template-columns: 1.1fr 1fr; } .sld-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sld-grid3 .span2 { grid-column: span 2; }
    .slc-hb { grid-template-columns: 120px 1fr auto; } .slc-hb .t { grid-column: auto; order: 0; }
    .slr-hub { grid-template-columns: 2.2fr 1fr; align-items: start; } .slr-cards { grid-template-columns: 1fr 1fr; }
}

/* Full-width panel (v1.2.1): very wide screens use the room for the report hub cards. */
@media (min-width: 1600px) { .slr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Six KPI tiles in one row next to the sidebar on 1024–1499 px screens: a smaller value so B$ 12,345.00 still fits. */
@media (min-width: 1024px) and (max-width: 1499px) { .sld-kpis:not(.four) .k { padding: 12px 12px; } .sld-kpis:not(.four) .k b { font-size: 19px; } }

/* ---- Stage 6: import wizard, demo banner ---- */
.sli { display: grid; gap: 14px; }
.sli-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--sl-border); border-radius: 12px; overflow: hidden; background: var(--sl-surface); }
.sli-steps .st { display: flex; gap: 8px; align-items: center; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--sl-muted); border-right: 1px solid var(--sl-border); }
.sli-steps .st:last-child { border-right: 0; }
.sli-steps .st b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--sl-track); }
.sli-steps .st.on { background: var(--sl-jade-50); color: var(--sl-jade-600); } .sli-steps .st.on b { background: var(--sl-jade); color: #fff; }
.sli-steps .st.done b { background: var(--sl-jade-50); color: var(--sl-jade-600); }
.sli-drop { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 16px; border: 2px dashed var(--sl-jade); border-radius: 14px; background: var(--sl-jade-50); }
.sli-file { display: grid; grid-template-columns: 44px minmax(0, 1fr) 220px 180px 28px; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--sl-border); }
.sli-file .ic { width: 44px; height: 44px; border-radius: 10px; background: #e8f6f1; color: #17826a; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.sli-field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--sl-muted); }
.sli-field select, .sli-select { width: 100%; border: 1px solid var(--sl-border); border-radius: 8px; padding: 6px 8px; font-size: 13px; background-color: var(--sl-surface); color: inherit; }
.sli-field select, select.sli-select { background-repeat: no-repeat; background-position: right .5rem center; background-size: 1.1em 1.1em; padding-right: 2rem; }
.sli-n { width: 56px; border: 1px solid var(--sl-border); border-radius: 6px; padding: 2px 6px; background: var(--sl-surface); color: inherit; }
.sli-note { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-top: 6px; }
.dark .sli-note { background: #3a2605; color: #fde68a; border-color: #78350f; }
.sli-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sli-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sli-check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14px; } .sli-check input { margin-top: 3px; accent-color: var(--sl-jade); width: 16px; height: 16px; }
.sli-log { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--sl-border); font-size: 13px; }
.sli-log:last-child { border-bottom: 0; }
@media (max-width: 900px) { .sli-file { grid-template-columns: 44px minmax(0, 1fr) 28px; } .sli-file .sli-field { grid-column: 2 / 3; } .sli-steps .st { font-size: 11px; padding: 8px; } }
.sl-demo-banner { position: sticky; top: 0; z-index: 40; background: #fde047; color: #422006; font-weight: 700; font-size: 13px; text-align: center; padding: 6px 12px; }

/* v1.1.1: no sidebar scrollbar unless the menu is longer than the screen and the pointer is over it (thin then) */
.fi-sidebar-nav { scrollbar-width: none; }
.fi-sidebar-nav::-webkit-scrollbar { width: 0; height: 0; }
.fi-sidebar-nav:hover { scrollbar-width: thin; }
.fi-sidebar-nav:hover::-webkit-scrollbar { width: 6px; }
.fi-sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(120,120,120,.35); border-radius: 6px; }

/* v1.2.0: days worked typed on a payroll run (attendance off) */
.sl-days { width: 3.2rem; text-align: right; border: 1px solid rgba(120,120,120,.4); border-radius: 6px; padding: 2px 6px; background: transparent; }

/* ---- v1.3.0 dashboard v2 (mockups dashboard-v2/01 + 02) ---- */
.sld-legend i.s2 { background: #2563eb; } .sld-legend i.s3 { background: #7c3aed; }
.slc .slc-s1 { fill: var(--sl-jade); } .slc .slc-s2 { fill: #2563eb; } .slc .slc-s3 { fill: #7c3aed; }
.sld-range { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 14px; padding: 10px 14px; }
.sld-range .chips { display: flex; gap: 6px; min-width: 0; }
.sld-range .chips button { white-space: nowrap; border: 1px solid var(--sl-border); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--sl-muted); background: var(--sl-surface); }
.sld-range .chips button.on { background: var(--sl-jade); border-color: var(--sl-jade); color: #fff; }
.sld-range .dates { display: flex; gap: 6px; align-items: center; }
.sld-range .dates input { border: 1px solid var(--sl-border); border-radius: 8px; padding: 5px 8px; font-size: 13px; background: var(--sl-surface); color: inherit; }
.sld-range .dates .arr { color: var(--sl-muted); }
.sld-range .info { margin-left: auto; font-size: 12px; color: var(--sl-muted); }
/* v1.8.1: the same bar on every date-based list — month picker (Payroll) and outlet chips with "All". */
.sld-range .month { display: flex; align-items: center; gap: 8px; }
.sld-range .month b { min-width: 140px; text-align: center; font-weight: 600; font-size: 14px; }
.sld-range .month button { width: 34px; height: 34px; border: 1px solid var(--sl-border); border-radius: 8px; font-size: 18px; line-height: 1; color: var(--sl-muted); background: var(--sl-surface); }
.sld-range .month button:hover { color: var(--sl-jade); border-color: var(--sl-jade); }
.sld-range .outs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-left: 12px; border-left: 1px solid var(--sl-border); }
.sld-range .outs button { white-space: nowrap; border: 1px solid var(--sl-border); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sl-muted); background: var(--sl-surface); }
.sld-range .outs button.on { background: color-mix(in srgb, var(--sl-jade) 12%, transparent); border-color: var(--sl-jade); color: var(--sl-jade-600, var(--sl-jade)); }
.dark .sld-range .outs button.on { color: #6ee7b7; }
.fi-header-subheading:has([data-testid="range-caption"]) { max-width: none; font-size: 16px; margin-top: 4px; }
.sld-delta { font-weight: 700; white-space: nowrap; } .sld-delta.up { color: #047857; } .sld-delta.down { color: #b91c1c; }
.dark .sld-delta.up { color: #6ee7b7; } .dark .sld-delta.down { color: #fca5a5; }
.sld-cardh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--sl-border); }
.sld-cardh h3 { font-weight: 600; font-size: 15px; }
.sld-table th.sort { cursor: pointer; user-select: none; } .sld-table th.sort.on { color: var(--sl-jade-600); } .sld-table th.sort i { font-style: normal; font-size: 10px; }
.sld-table .sld-rowlink { color: inherit; }
.sld-chip.bad { background: #fef2f2; color: #b91c1c; } .sld-chip.info { background: #eff6ff; color: #1d4ed8; }
.dark .sld-chip.bad { background: #3b0d0d; color: #fca5a5; } .dark .sld-chip.info { background: #0b1f3a; color: #93c5fd; }
.sld-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sl-border); margin: -4px -2px 4px; }
.sld-tabs button { padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--sl-muted); border-bottom: 2px solid transparent; }
.sld-tabs button.on { color: var(--sl-jade-600); border-bottom-color: var(--sl-jade); }
.sld-branchbar { display: grid; gap: 4px; grid-template-columns: 1fr auto; align-items: center; margin-top: -10px; }
.sld-branchbar nav, .sld-branchbar [data-testid="branch-meta"] { grid-column: 1; }
.sld-prevnext { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.sld-crumb, .sld-link { color: var(--sl-jade-600); font-weight: 600; }
.sl-pin-prompt { display: inline-block; background: #fffbeb; color: #92400e; border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.dark .sl-pin-prompt { background: #3a2605; color: #fcd34d; }
@media (min-width: 1024px) {
    .sld-kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sld-grid2.even { grid-template-columns: 1fr 1fr; }
    .sld-grid3.branch { grid-template-columns: 1.45fr 1fr 1fr; }
}
@media (min-width: 1024px) and (max-width: 1499px) {
    .sld-range .info { margin-left: 0; flex-basis: 100%; }
    [data-testid="outlet-table"] th, [data-testid="outlet-table"] td { padding: 9px 7px; }
    [data-testid="outlet-table"] td[style*="min-width"] { min-width: 70px !important; }
}
@media (max-width: 1023px) {
    /* Phones: the range presets are one row of chips that scrolls sideways; KPI tiles two per row. */
    .sld-range { padding: 8px 10px; }
    .sld-range { display: grid; grid-template-columns: minmax(0, 1fr); }
    .sld-range .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; width: 100%; min-width: 0; padding-bottom: 2px; }
    .sld-range .chips::-webkit-scrollbar { display: none; }
    .sld-range .dates { width: 100%; } .sld-range .dates input { flex: 1; min-width: 0; }
    .sld-range .info { margin-left: 0; }
    .sld-range .outs { padding-left: 0; border-left: 0; }
    .sld-kpis.seven, .sld-kpis.six { grid-template-columns: 1fr 1fr; }
    .sld-kpis.seven .k.hl { grid-column: 1 / -1; }
    .sld-branchbar { grid-template-columns: 1fr; margin-top: -6px; } .sld-prevnext { grid-column: 1; grid-row: auto; }
    .sld-table { font-size: 12px; } .sld-table th, .sld-table td { padding: 8px; }
}/* Fluid charts (series / stacked) scale with their card: axis text in viewBox units so it stays readable. */
.slc.fluid .slc-ax { font-size: 13px; }
.sld-grid3.branch [data-testid="branch-tabs"] .slc-hb { grid-template-columns: minmax(0, 1.4fr) 1fr auto; }
/* v1.3.0 fix: the seven overview KPI tiles. One row from 1366 px up (padding and figures shrink with the width),
   4 + 3 between 640 and 1365 px, two per row on phones. */
@media (min-width: 640px) { .sld-kpis.seven { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sld-kpis.seven .k.hl { grid-column: auto; } }
@media (min-width: 1366px) {
    .sld-kpis.seven { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(6px, .5vw, 10px); }
    .sld-kpis.seven .k { padding: clamp(8px, .65vw, 14px) clamp(8px, .75vw, 16px); }
    .sld-kpis.seven .k > span { font-size: clamp(10px, .62vw, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sld-kpis.seven .k b { font-size: clamp(15px, 1.12vw, 22px); }
    .sld-kpis.seven .k small { font-size: clamp(10px, .6vw, 11px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* v1.4.0 POS faces: Therapists form face picker (radio images) and the ticket line note */
.sl-face { display: inline-grid; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.sl-face svg { width: 100%; height: 100%; display: block; }
.sl-face-picker .fi-fo-radio { gap: 10px 18px; }
.sl-line-note { display: block; font-size: 12px; font-style: italic; color: rgb(100 116 139); margin-top: 2px; }
.dark .sl-line-note { color: rgb(148 163 184); }

/* ============================================================== v1.6.0 shifts + payment methods */
.sl-chip.jade { background: #e8f6f1; color: #17826a; } .sl-chip.green { background: #ecfdf5; color: #047857; }
.sl-chip.red { background: #fef2f2; color: #b91c1c; } .sl-chip.amber { background: #fffbeb; color: #b45309; }
.dark .sl-chip.red { background: #3b0d0d; color: #fca5a5; } .dark .sl-chip.amber { background: #3a2605; color: #fcd34d; } .dark .sl-chip.green { background: #052e1f; color: #6ee7b7; }
.sld-shiftalert { display: flex; align-items: center; gap: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 13px; }
.sld-shiftalert > span { flex: 1; } .sld-shiftalert .sld-pill { flex: none; }
.dark .sld-shiftalert { background: #2a0d0d; border-color: #7f1d1d; color: #fecaca; }
.sld-grid3.shifts { grid-template-columns: 1.6fr 1fr 1fr; }
@media (max-width: 1100px) { .sld-grid3.shifts { grid-template-columns: 1fr; } }
.sld-pie { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; padding-top: 6px; }
.sld-legend.col { display: grid; gap: 6px; margin: 0; font-size: 12px; }
.sld-legend.col .row { display: flex; justify-content: space-between; gap: 8px; }
.sld-legend.col i { width: 10px; height: 10px; }
.slc .slc-donut-v { font-size: 5px; font-weight: 800; fill: var(--sl-jade-600, #0f4f42); }
.sl-pmsw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 8px; vertical-align: -1px; }
.sl-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sl-swatches .sw { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6); cursor: pointer; }
.sl-swatches .sw.on { border-color: rgb(17 24 39); }
.dark .sl-swatches .sw.on { border-color: #fff; }
.sl-pmprev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sl-pmprev .b { height: 56px; border-radius: 14px; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; padding: 4px; }
.sl-pmprev .b.on { outline: 3px solid #fff; box-shadow: 0 0 0 5px currentColor; color: #fff; }
.sl-mailprev { border: 1px solid var(--sl-border, #e5e7eb); border-radius: 10px; overflow: hidden; font-size: 13px; }
.sl-mailprev .hd { background: var(--sl-track, #f3f4f6); padding: 10px 14px; display: grid; gap: 2px; } .sl-mailprev .hd b { font-size: 14px; }
.sl-mailprev .bd { padding: 14px; display: grid; gap: 8px; } .sl-mailprev table { width: 100%; font-size: 12px; } .sl-mailprev td { padding: 3px 6px; }
.sl-mailprev .num { text-align: right; font-variant-numeric: tabular-nums; } .sl-mailprev .muted { color: #6b7280; }
.sl-mailprev .atts { display: flex; gap: 8px; flex-wrap: wrap; }
.sl-mailprev .att { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--sl-border, #e5e7eb); border-radius: 8px; font-size: 12px; font-weight: 600; }
.sl-shiftview { display: grid; gap: 12px; }
.sl-shiftview .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sl-reportframe { width: 100%; height: 78vh; border: 1px solid var(--sl-border, #e5e7eb); border-radius: 12px; background: #e9eeec; }
/* v1.6.1 bar chart by day (Charts::dayBars): fixed max bar width, centred group, B$ y-axis, dd-mm labels, value on hover. */
.slb { --h: 220px; padding: 6px 0 0 64px; }
.slb-plot { position: relative; height: var(--h); border-bottom: 1px solid var(--sl-border); }
.slb-g { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--sl-border); height: 0; }
.slb-g span { position: absolute; right: calc(100% + 8px); top: -7px; font-size: 11px; color: var(--sl-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.slb-bars { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(2px, .5vw, 10px); padding: 0 6px; }
.slb-c { position: relative; flex: 1 1 0; max-width: 56px; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.slb-b { position: relative; width: 100%; min-height: 2px; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: visible; opacity: .88; transition: opacity .1s; }
.slb-b > span { display: block; width: 100%; flex: none; } .slb-b > span:last-of-type { border-radius: 4px 4px 0 0; }
.slb-s1 { background: var(--sl-jade); } .slb-s2 { background: #2563eb; } .slb-s3 { background: #7c3aed; }
.slb-c:hover .slb-b { opacity: 1; }
.slb-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #111827; color: #fff; font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; z-index: 2; font-variant-numeric: tabular-nums; pointer-events: none; }
.slb-c:hover .slb-tip { display: block; }
.slb-l { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--sl-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.slb { padding-bottom: 26px; }
.slb.rot { padding-bottom: 44px; }
.slb.rot .slb-l { transform: translateX(-80%) rotate(-45deg); transform-origin: right top; left: 50%; top: calc(100% + 8px); }
/* v1.6.1 dates: "01-11-2026 · Sun" with the weekday muted. */
.fmt-wd { color: var(--sl-muted); font-size: .82em; font-weight: 400; }
.slr-table td.nowrap { white-space: nowrap; }

/* ---- v1.6.2 panel typography (one place for every page: dashboard, reports, shifts, tickets, settings) ----
   base 15 px · table cells 14 px · table headers 12.5 px uppercase · muted helpers / weekday 12.5 px · KPI labels 13 px.
   Line heights stay put so table rows remain ~48 px. */
.fi-body { font-size: 15px; }
.fi-main .text-sm, .fi-topbar .text-sm, .fi-sidebar .text-sm, .fi-modal .text-sm, .fi-dropdown-panel .text-sm { font-size: 15px; line-height: 1.35rem; }
.fi-main .text-xs { font-size: 12.5px; }
.fi-ta-cell, .fi-ta-cell .text-sm, .fi-ta-text-item-label { font-size: 14px; line-height: 1.25rem; }
.fi-ta-header-cell, .fi-ta-header-cell .text-sm, .fi-ta-header-cell-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; line-height: 1rem; }
.fi-fo-field-wrp-helper-text, .fi-fo-field-wrp-helper-text .text-sm, .fi-fo-field-wrp-hint, .fi-ta-cell .text-gray-500, .fi-in-entry-wrp-helper-text { font-size: 12.5px; }
.fmt-wd, .sld .small, .sld-muted.small, .slr-table .fmt-wd, .sld-table .fmt-wd { font-size: 12.5px; }
.sld-table, .slr-table { font-size: 14px; }
.sld-table th, .slr-table th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.slr-table tr.grp td { font-size: 12.5px; }
.sld-kpis .k > span { font-size: 13px; }
.sld-kpis .k small { font-size: 12.5px; }
.sld-seg.small button { font-size: 13px; }
/* the range pickers sit inline in the range bars */
.sl-rangeform { min-width: 0; }
.sl-rangeform .fi-fo-component-ctn, .sl-rangeform > form > div { display: grid; grid-template-columns: repeat(2, minmax(150px, 170px)); gap: 8px; }
/* v1.6.2: the seven overview tiles keep one row from 1366 px with the larger labels — less padding, not smaller text. */
.sld-kpis.seven .k > span, .sld-kpis .k > span { font-size: 13px; }
.sld-kpis.seven .k small { font-size: 12.5px; }
@media (min-width: 1280px) and (max-width: 1599px) { .sld-kpis.seven .k { padding: 9px 9px; } .sld-kpis.seven { gap: 6px; } }
/* v1.6.2: with 14 px cells, a little less vertical padding keeps a one-line row at ~48 px. */
.fi-ta-cell .fi-ta-text.py-4, .fi-ta-cell .fi-ta-icon.py-4, .fi-ta-cell .fi-ta-col-wrp > .py-4 { padding-top: 12px; padding-bottom: 12px; }
/* v1.6.2: the narrow "Shifts today" card keeps its four columns inside at 14 px. */
[data-testid="shifts-today"] { overflow-x: auto; }
[data-testid="shifts-today"] .sld-table th, [data-testid="shifts-today"] .sld-table td { padding-left: 8px; padding-right: 8px; }
[data-testid="shifts-today"] .sld-table th { letter-spacing: .02em; }
@media (max-width: 1599px) { [data-testid="shifts-today"] .sld-table { font-size: 13px; } [data-testid="shifts-today"] .sld-table th { font-size: 11.5px; } }
@media (max-width: 1599px) {
    [data-testid="shifts-today"] .sld-table th { text-transform: none; letter-spacing: 0; }
    [data-testid="shifts-today"] .sld-table th, [data-testid="shifts-today"] .sld-table td { padding-left: 6px; padding-right: 6px; white-space: normal; }
}

/* ---- v1.7.0 one window style (mockup therapist-v2/01): centred, never slide-overs ----
   720 px for short forms ('3xl'), 1040 px for wide ones ('5xl'); title + subtitle on a sticky header, the body
   scrolls, Cancel / Save pinned at the bottom. */
.fi-modal-window { border-radius: 16px !important; max-height: 92vh; overflow: hidden; box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.fi-modal-window.max-w-3xl { max-width: 720px; }
.fi-modal-window.max-w-5xl { max-width: 1040px; }
.fi-modal-window > .fi-modal-content, .fi-modal-window .fi-modal-content { overflow-y: auto; }
.fi-modal-window .fi-modal-header { padding: 18px 24px 12px; border-bottom: 1px solid var(--sl-border); }
.fi-modal-window .fi-modal-heading { font-size: 18px; }
.fi-modal-window .fi-modal-description { font-size: 13px; color: var(--sl-muted); }
.fi-modal-window .fi-modal-footer { padding: 14px 24px 18px; border-top: 1px solid var(--sl-border); }
.fi-modal-close-overlay { background: rgb(15 79 66 / .45) !important; }
.dark .fi-modal-close-overlay { background: rgb(2 6 23 / .72) !important; }
.dark .fi-modal-window { box-shadow: 0 30px 80px rgb(0 0 0 / .6); }

/* ---- v1.7.0 therapist page (mockup therapist-v2/02) ---- */
.sl-th-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: inherit; }
.sl-th-head .sl-th-face, .sl-th-head .face { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: inline-grid; flex: none; background: var(--sl-jade-50); }
.sl-th-head .face svg, .sl-th-head .face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sl-th-head .nm { display: grid; gap: 2px; min-width: 0; }
.sl-th-head .nm > span { font-size: 24px; line-height: 1.2; }
.sl-th-head .nm small { font-size: 13px; font-weight: 400; color: var(--sl-muted); letter-spacing: 0; }
.sl-th-head .stats { display: flex; gap: 24px; margin-left: 24px; }
.sl-th-head .st { display: grid; text-align: right; } .sl-th-head .st b { font-size: 19px; font-variant-numeric: tabular-nums; }
.sl-th-head .st small { font-size: 12.5px; font-weight: 400; color: var(--sl-muted); }
.sl-sec { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--sl-border); padding-bottom: 6px; margin-top: 4px; }
.sl-sec h3 { margin: 0; font-size: 14px; font-weight: 700; } .sl-sec span { font-size: 12.5px; color: var(--sl-muted); }
.sl-th-grid > .fi-fo-component-ctn, .sl-th-grid { align-items: start; }
/* the face picker: Auto + ten faces on one row (wraps on narrow cards) */
.sl-face-picker .fi-fo-radio { display: flex !important; flex-wrap: wrap; gap: 8px 12px !important; align-items: center; }
.sl-face-picker .sl-face { width: 44px; height: 44px; }
.sl-face-picker label:has(input:checked) .sl-face { box-shadow: 0 0 0 3px var(--sl-jade); }
.sl-photo-box { border: 1px dashed var(--sl-border); border-radius: 12px; padding: 10px 14px; }
.sl-last30 { display: grid; gap: 10px; }
.sl-last30 .mono { font-family: ui-monospace, monospace; font-size: 12.5px; }
.sl-last30 .nowrap { white-space: nowrap; }
.sl-last30-link { color: var(--sl-jade); font-weight: 600; font-size: 14px; justify-self: end; }
.dark .sl-last30-link { color: #6ee7c4; }
/* sticky Cancel / Save under the page */
.fi-form-actions.fi-sticky, .fi-sticky .fi-form-actions { box-shadow: 0 -8px 20px rgb(0 0 0 / .06); }
.dark .fi-form-actions.fi-sticky, .dark .fi-sticky .fi-form-actions { box-shadow: 0 -8px 20px rgb(0 0 0 / .4); }
@media (max-width: 1499px) { .sl-th-head .stats { margin-left: 0; } }
/* v1.7.0 ticket window: the therapist's face on each line */
.sl-tag-face { display: inline-flex; align-items: center; gap: 5px; }
.sl-tag-face .face { border-radius: 50%; overflow: hidden; display: inline-grid; flex: none; }
.sl-tag-face .face svg, .sl-tag-face .face img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* v1.7.0 therapist page footer: the audit note on the left, Cancel / Save on the right */
.fi-form-actions .sl-audit-note { margin-right: auto; opacity: 1 !important; cursor: default; font-weight: 400; font-size: 13px; }
.fi-form-actions .fi-ac { width: 100%; }
.sl-photo-box .filepond--root { max-width: 220px; }
/* v1.7.0: footer order — note left, then Cancel, then Save (whatever order Filament renders them in) */
.fi-form-actions .fi-ac { display: flex !important; justify-content: flex-end; gap: 10px; }
.fi-form-actions .sl-audit-note { order: -1; }
.fi-form-actions .fi-ac > *:has([type="submit"]), .fi-form-actions .fi-ac > [type="submit"] { order: 3; }
/* face picker: faces only (no radio dots); the chosen one has the jade ring; "Automatic" is a dashed pill */
.sl-face-picker input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sl-face-picker label { cursor: pointer; }
.sl-face-picker .fi-fo-radio > div:first-child label, .sl-face-picker label:not(:has(.sl-face)) span { border: 1.5px dashed var(--sl-border); border-radius: 999px; padding: 10px 12px; font-size: 13px; color: var(--sl-muted); }
.sl-face-picker label:has(input:checked):not(:has(.sl-face)) span { border-color: var(--sl-jade); color: var(--sl-jade); border-style: solid; }
.sl-face-picker label:hover .sl-face { box-shadow: 0 0 0 2px var(--sl-border); }
/* Filament renders right-aligned actions as flex-row-reverse: keep a normal row so it reads note · Cancel · Save. */
.fi-form-actions .fi-ac { flex-direction: row !important; justify-content: flex-end !important; }
.fi-form-actions .sl-audit-note { margin-right: auto; }
.fi-form-actions .sl-audit-note span { font-weight: 400; color: var(--sl-muted); }

/* ---- v1.7.1 outlet picture (photo or initials tile) and the Open POS cards ---- */
.sl-opic { display: inline-grid; place-items: center; overflow: hidden; flex: none; background: var(--sl-jade-50); color: var(--sl-jade-600); font-weight: 800; letter-spacing: .02em; }
.dark .sl-opic { color: #6ee7c4; }
.sl-opic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-opic.sm { width: 44px; height: 44px; border-radius: 10px; font-size: 14px; }
.sl-opic.md { width: 56px; height: 56px; border-radius: 12px; font-size: 17px; }
.sl-opic.card { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; font-size: 44px; }
.sl-pos-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: stretch; }
@media (min-width: 1800px) { .sl-pos-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) and (max-width: 1599px) { .sl-pos-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-pos-card { display: flex; flex-direction: column; background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.sl-pos-card .b { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.sl-pos-card .nm { font-weight: 700; font-size: 17px; line-height: 1.25; }
.sl-pos-card .cd { font-size: 12.5px; color: var(--sl-muted); letter-spacing: .04em; }
.sl-pos-card .go { margin-top: auto; width: 100%; }
.sl-pos-st { align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin: 2px 0 10px; }
.sl-pos-st.jade { background: var(--sl-jade-50); color: var(--sl-jade-600); }
.sl-pos-st.grey { background: var(--sl-track); color: var(--sl-muted); }
.sl-pos-st.red { background: #fde8e8; color: #b91c1c; }
.dark .sl-pos-st.jade { color: #6ee7c4; } .dark .sl-pos-st.red { background: #3b1414; color: #fca5a5; }
.sld-branchbar .sl-opic { margin-right: 4px; }

/* ---- v1.7.2 "‹ Back" at the top-left of the page header ---- */
.sl-back { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px 0 8px; border-radius: 8px; border: 1px solid var(--sl-border);
  background: var(--sl-surface); color: inherit; font-size: 13px; font-weight: 600; text-decoration: none; flex: none; transition: background .15s, border-color .15s; }
.sl-back:hover { border-color: var(--sl-jade-600); color: var(--sl-jade-600); }
.sl-back:focus-visible { outline: 2px solid var(--sl-jade-600); outline-offset: 2px; }
.sl-header-top .fi-breadcrumbs { margin: 0; }

/* ---- v1.8.0 Reports hub v2 (mockup reports-v2/01) ---- */
.slh-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.slh-head-r { display: flex; align-items: center; gap: 10px; }
.slh-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 38px; width: 260px; border: 1px solid var(--sl-border); border-radius: 10px; background: var(--sl-surface); color: var(--sl-muted); }
.slh-search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 13.5px; color: inherit; padding: 0; box-shadow: none; }
.slh-search input:focus { box-shadow: none; }
.slh-search:focus-within { border-color: var(--sl-jade); box-shadow: 0 0 0 3px rgb(31 157 122 / .15); }
.slh { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.slh-main { display: grid; gap: 18px; min-width: 0; }
.slh-filters { position: sticky; top: 4.25rem; z-index: 5; display: grid; gap: 10px; padding: 12px 16px; background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 14px; box-shadow: 0 6px 18px rgb(15 79 66 / .06); }
.slh-presets, .slh-outs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.slh-presets > button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--sl-border); background: var(--sl-surface); font-weight: 600; font-size: 13px; color: var(--sl-muted); }
.slh-presets > button.on { background: var(--sl-jade); border-color: var(--sl-jade); color: #fff; }
.slh-dates { margin-left: 4px; }
.slh-outs > button { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sl-track); color: var(--sl-muted); border: 0; }
.slh-outs > button.on { background: var(--sl-jade-50); color: var(--sl-jade-600); }
.dark .slh-outs > button.on { color: #6ee7c4; }
.slh-outs .cmp { margin-left: auto; font-size: 12px; color: var(--sl-muted); }
.slh-groups { display: grid; gap: 18px; }
.slh-grp { display: grid; gap: 10px; }
.slh-grp h2 { margin: 2px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-muted); display: flex; align-items: center; gap: 10px; }
.slh-grp h2::after { content: ""; flex: 1; height: 1px; background: var(--sl-border); }
.slh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; align-items: stretch; }
@media (min-width: 1500px) { .slh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.slh-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 14px; transition: box-shadow .15s, transform .15s, border-color .15s; min-height: 196px; }
.slh-card:hover { box-shadow: 0 10px 30px rgb(15 79 66 / .12); transform: translateY(-1px); border-color: var(--sl-jade); }
.slh-card.off { opacity: .62; } .slh-card.off:hover { transform: none; }
.slh-card .top { display: flex; align-items: flex-start; gap: 12px; }
.slh-card .ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 18px; color: #fff; }
.slh-card .tt { display: grid; gap: 2px; min-width: 0; } .slh-card .tt b { font-size: 15px; } .slh-card .tt span { font-size: 12px; color: var(--sl-muted); line-height: 1.35; }
.slh-card .new { position: absolute; top: 10px; right: 40px; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--sl-jade-50); color: var(--sl-jade-600); }
.slh-card .star { margin-left: auto; color: #d1d5db; font-size: 17px; line-height: 1; background: none; border: 0; padding: 2px; cursor: pointer; }
.slh-card .star.on { color: #f59e0b; } .dark .slh-card .star { color: #52525b; } .dark .slh-card .star.on { color: #f59e0b; }
.slh-card .big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.slh-card .big b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--sl-jade-600); } .dark .slh-card .big b { color: #6ee7c4; }
.slh-card .big b.down { color: #b91c1c; } .dark .slh-card .big b.down { color: #fca5a5; }
.slh-card .big span { font-size: 12px; color: var(--sl-muted); } .slh-card .big .up { color: #047857; font-weight: 700; } .slh-card .big .down { color: #b91c1c; font-weight: 700; }
.dark .slh-card .big .up { color: #6ee7c4; } .dark .slh-card .big .down { color: #fca5a5; }
.slh-card .spark { height: 34px; display: flex; align-items: flex-end; gap: 3px; margin-top: auto; }
.slh-card .spark i { flex: 1; background: var(--sl-jade-50); border-radius: 2px 2px 0 0; min-height: 2px; } .slh-card .spark i.hi { background: var(--sl-jade); }
.dark .slh-card .spark i { background: #134e40; } .dark .slh-card .spark i.hi { background: var(--sl-jade); }
.slh-card .acts { display: flex; align-items: center; gap: 6px; }
.slh-btn { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--sl-border); background: var(--sl-surface); }
.slh-btn.primary { background: var(--sl-jade); border-color: var(--sl-jade); color: #fff; } .slh-btn.primary:hover { background: var(--sl-jade-600); }
.slh-card .ico { margin-left: auto; display: flex; gap: 4px; }
.slh-card .ico button { width: 34px; height: 32px; border-radius: 8px; border: 1px solid var(--sl-border); font-size: 10.5px; font-weight: 700; color: var(--sl-muted); background: var(--sl-surface); }
.slh-card .ico button:hover { border-color: var(--sl-jade); color: var(--sl-jade-600); }
.slh-card .sk-b { display: block; background: var(--sl-track); border-radius: 6px; animation: slh-pulse 1.2s ease-in-out infinite; }
.slh-card.sk .spark i { background: var(--sl-track); }
@keyframes slh-pulse { 50% { opacity: .45; } }
.slh-empty { padding: 28px; text-align: center; color: var(--sl-muted); border: 1px dashed var(--sl-border); border-radius: 14px; }
.slh-rail { display: grid; gap: 14px; position: sticky; top: 4.25rem; }
.slh-box { background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 14px; }
.slh-box header { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--sl-border); } .slh-box h3 { font-weight: 700; font-size: 15px; }
.slh-box .b { padding: 12px 14px; display: grid; gap: 10px; font-size: 13px; }
.slh-box .help { font-size: 12px; color: var(--sl-muted); }
.slh-box .favs { display: flex; flex-wrap: wrap; gap: 6px; } .slh-box .favs a { padding: 5px 10px; border-radius: 999px; background: var(--sl-track); font-size: 12px; font-weight: 600; }
.slh-box .favs a:hover { background: var(--sl-jade-50); color: var(--sl-jade-600); }
.slh-box .exp { display: flex; align-items: center; gap: 10px; } .slh-box .exp .m { flex: 1; min-width: 0; } .slh-box .exp .m small { display: block; color: var(--sl-muted); font-size: 11px; }
.slh-box .exp .ft { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: #1d7a4d; } .slh-box .exp .ft.p { background: #b91c1c; }
.slh-box .exp .dl { font-weight: 700; color: var(--sl-jade-600); padding: 4px 6px; }
.slh-box .sched .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.slh-toggle { width: 40px; height: 22px; flex: none; border-radius: 999px; background: var(--sl-grey); position: relative; border: 0; cursor: pointer; transition: background .15s; }
.slh-toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.slh-toggle.on { background: var(--sl-jade); } .slh-toggle.on i { left: 21px; }
@media (max-width: 1100px) { .slh { grid-template-columns: minmax(0, 1fr); } .slh-rail { position: static; } .slh-filters { top: 4rem; } }
@media (max-width: 640px) { .slh-cards { grid-template-columns: minmax(0, 1fr); } .slh-search { width: 100%; } }
/* report tables: variance colours, audit rows after close */
.slr-table td.var-red { color: #b91c1c; font-weight: 700; } .slr-table td.var-amber { color: #b45309; font-weight: 700; } .slr-table td.var-green { color: #047857; }
.dark .slr-table td.var-red { color: #fca5a5; } .dark .slr-table td.var-amber { color: #fcd34d; } .dark .slr-table td.var-green { color: #6ee7c4; }
.slr-table tr.warn td { background: rgb(245 158 11 / .08); }
/* dashboard: starred reports as quick links under the range bar */
.sld-favs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; }
.sld-fav { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--sl-jade-50); color: var(--sl-jade-600); }
.dark .sld-fav { color: #6ee7c4; } .sld-fav:hover { background: var(--sl-jade); color: #fff; }