.ds-page { --ds-ink:#182d2b; --ds-muted:#697a79; --ds-line:#e1e9e7; --ds-green:#176354; --ds-soft:#edf5f2; background:#f6f8f7; color:var(--ds-ink); }
.ds-app { max-width:1900px; margin:0 auto; padding:32px 34px 52px; font-size:14px; }
.ds-app *, .ds-dialog * { box-sizing:border-box; }
.ds-app button,.ds-dialog button,.ds-app input,.ds-app select,.ds-dialog input,.ds-dialog select,.ds-dialog textarea { font:inherit; }
.ds-app button,.ds-dialog button { cursor:pointer; }
.ds-app button:disabled,.ds-dialog button:disabled { cursor:not-allowed; opacity:.45; }
.ds-app :focus-visible,.ds-dialog :focus-visible { outline:3px solid #60a797; outline-offset:3px; }
.ds-app a { color:var(--ds-green); }
.ds-topline,.ds-heading,.ds-actions,.ds-toolbar,.ds-tabs,.ds-legend,.ds-identity,.ds-row-heading,.ds-dialog-head,.ds-dialog-foot,.ds-row-actions { display:flex; align-items:center; }
.ds-topline { justify-content:space-between; gap:12px; margin-bottom:22px; }
.ds-breadcrumb { display:flex; gap:10px; align-items:center; font-size:12px; color:var(--ds-muted); }
.ds-breadcrumb a { text-decoration:none; color:var(--ds-muted); }
.ds-preview { border:1px solid #d9e6e0; background:#eef4f0; padding:6px 10px; color:#49675e; font-size:11px; border-radius:5px; display:inline-flex; align-items:center; gap:7px; }
.ds-dot { width:6px; height:6px; border-radius:50%; background:#438873; display:inline-block; }
.ds-heading { justify-content:space-between; gap:18px; margin-bottom:26px; }
.ds-heading h1 { font-size:29px; font-weight:650; letter-spacing:-1px; margin:0 0 8px; }
.ds-heading p { margin:0; color:var(--ds-muted); line-height:1.6; }
.ds-actions { gap:8px; flex-wrap:wrap; }
.ds-btn { border:1px solid #d6e0dc; color:var(--ds-ink); background:white; border-radius:7px; padding:9px 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-weight:550; font-size:12px; min-height:36px; text-decoration:none; white-space:nowrap; }
.ds-btn:hover { background:#f0f5f2; border-color:#b6cdc3; }
.ds-btn.primary { background:var(--ds-green); border-color:var(--ds-green); color:white; }
.ds-btn.primary:hover { background:#104f43; }
.ds-btn.quiet { background:transparent; border-color:transparent; color:var(--ds-muted); }
.ds-btn.small { min-height:29px; padding:5px 9px; font-size:11px; }
.ds-btn.danger { color:#a74642; }
.ds-icon { width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ds-persona { display:flex; flex-direction:column; gap:4px; font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--ds-muted); }
.ds-persona select { font-size:12px; text-transform:none; letter-spacing:0; border:1px solid var(--ds-line); border-radius:6px; background:white; padding:7px 24px 7px 9px; color:var(--ds-ink); }
.ds-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:white; border:1px solid var(--ds-line); border-radius:10px; margin-bottom:25px; }
.ds-stat { padding:18px 22px; border-right:1px solid var(--ds-line); }
.ds-stat:last-child { border:0; }
.ds-stat-label { font-size:11px; color:var(--ds-muted); display:flex; gap:7px; align-items:center; }
.ds-stat-value { display:flex; gap:10px; align-items:baseline; margin-top:10px; font-size:27px; letter-spacing:-.8px; font-weight:600; }
.ds-stat-value span { font-size:11px; color:var(--ds-muted); letter-spacing:0; font-weight:400; }
.ds-stat.warn .ds-stat-value { color:#a2691f; }
.ds-tabs { border-bottom:1px solid var(--ds-line); gap:24px; margin-bottom:21px; overflow-x:auto; }
.ds-tab { background:none; border:0; border-bottom:2px solid transparent; padding:0 0 13px; color:var(--ds-muted); font-size:12px; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.ds-tab[aria-selected="true"] { color:var(--ds-green); border-bottom-color:var(--ds-green); font-weight:650; }
.ds-counter { display:inline-flex; min-width:19px; height:19px; align-items:center; justify-content:center; background:#edf0ee; border-radius:5px; font-size:10px; }
.ds-toolbar { justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.ds-week-title { font-size:17px; letter-spacing:-.4px; font-weight:650; margin:0 7px; }
.ds-week-controls { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.ds-input,.ds-select,.ds-date { border:1px solid var(--ds-line); background:white; border-radius:6px; color:var(--ds-ink); min-height:35px; padding:7px 10px; font-size:12px; }
.ds-select { max-width:220px; }
.ds-search { position:relative; }
.ds-search .ds-icon { position:absolute; top:10px; left:11px; color:var(--ds-muted); }
.ds-search input { padding-left:34px; width:200px; }
.ds-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:15px; }
.ds-filters .ds-result-count { margin-left:auto; font-size:11px; color:var(--ds-muted); }
.ds-switch { display:flex; padding:3px; gap:2px; background:#eaf0ed; border-radius:7px; }
.ds-switch button { border:0; background:transparent; color:var(--ds-muted); padding:6px 10px; border-radius:5px; font-size:11px; }
.ds-switch button[aria-pressed="true"] { background:white; color:var(--ds-ink); box-shadow:0 1px 3px #153d2912; }
.ds-calendar-scroll,.ds-table-scroll { overflow:auto; background:white; border:1px solid var(--ds-line); border-radius:9px; }
.ds-calendar { border-collapse:separate; border-spacing:0; width:100%; min-width:920px; table-layout:fixed; }
.ds-calendar th { height:65px; font-weight:500; font-size:11px; color:var(--ds-muted); background:#fff; border-bottom:1px solid var(--ds-line); text-align:left; padding:12px 13px; }
.ds-calendar th:first-child { width:196px; position:sticky; left:0; z-index:2; }
.ds-calendar th .ds-date-number { font-size:19px; color:var(--ds-ink); display:inline-flex; margin-left:8px; min-width:29px; min-height:29px; align-items:center; justify-content:center; }
.ds-calendar th.today .ds-date-number { background:var(--ds-green); color:white; border-radius:50%; }
.ds-calendar th.today { background:#f5faf7; }
.ds-calendar td { padding:7px; border-bottom:1px solid #ecf0ee; border-right:1px solid #ecf0ee; vertical-align:top; height:78px; }
.ds-calendar td:first-child { padding:13px 14px; position:sticky; left:0; z-index:1; background:white; }
.ds-calendar tr:last-child td { border-bottom:0; }
.ds-calendar td:last-child { border-right:0; }
.ds-calendar .ds-dept td { background:#f7f9f8; height:30px; padding:7px 14px; font-size:10px; letter-spacing:.6px; text-transform:uppercase; font-weight:650; color:#6a7c75; }
.ds-dept-count { color:#98a69f; margin-left:8px; }
.ds-identity { gap:9px; }
.ds-avatar { width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:#e8f0ec; color:#42655b; font-size:10px; font-weight:650; }
.ds-avatar.lead { background:#edeefa; color:#65658b; }
.ds-name { font-size:12px; font-weight:600; color:var(--ds-ink); }
.ds-meta { font-size:10px; color:var(--ds-muted); margin-top:4px; line-height:1.4; }
.ds-day { display:block; border:0; background:transparent; width:100%; text-align:left; border-radius:5px; padding:0; min-height:60px; }
.ds-day:hover { outline:2px solid #c8dbd2; outline-offset:2px; }
.ds-event { display:block; border-radius:4px; border-left:3px solid #79aa96; background:#edf5ef; color:#385c4b; padding:7px 7px; margin-bottom:4px; font-size:10px; line-height:1.4; }
.ds-event b { display:block; font-weight:600; font-size:11px; white-space:nowrap; }
.ds-event.wfh { background:#edf3ff; color:#466699; border-color:#7b9dc7; }
.ds-event.shift { background:#fff5e7; color:#8c692f; border-color:#d9b272; }
.ds-event.pto { background:#f0edfb; color:#756196; border-color:#ad99cf; }
.ds-event.sick { background:#fbeeee; color:#ab6565; border-color:#d49e9e; }
.ds-event.other { background:#eef1f7; color:#63728a; border-color:#9aa9bd; }
.ds-event.flex_work,.ds-event.flex_off { background:#e8f5f5; color:#478386; border-color:#8bb9bb; }
.ds-off { color:#a7b0ac; font-size:11px; display:block; padding:15px 6px; }
.ds-warning-dot { color:#a47329; font-size:10px; display:flex; align-items:center; gap:4px; padding:2px 0 0; }
.ds-warning-dot .ds-icon { width:12px; height:12px; }
.ds-legend { gap:16px; flex-wrap:wrap; padding:15px 2px; font-size:10px; color:var(--ds-muted); }
.ds-legend span { display:flex; gap:5px; align-items:center; }
.ds-key { width:8px; height:8px; border-radius:2px; background:#79aa96; }
.ds-key.wfh { background:#7b9dc7; }.ds-key.pto { background:#ad99cf; }.ds-key.sick { background:#d49e9e; }.ds-key.flex_off { background:#8bb9bb; }.ds-key.shift { background:#d9b272; }.ds-key.other { background:#9aa9bd; }.ds-key.off { background:#cdd5d0; }
.ds-footnote { font-size:11px; line-height:1.7; color:var(--ds-muted); margin:4px 0; }
.ds-notice { display:flex; align-items:flex-start; gap:9px; background:#fcf7ed; color:#8d6b32; border:1px solid #f0e2c7; border-radius:7px; padding:11px 13px; font-size:12px; line-height:1.6; margin:14px 0; }
.ds-notice .ds-icon { margin-top:2px; }
.ds-table { border-collapse:collapse; width:100%; font-size:12px; min-width:760px; }
.ds-table th { background:#f7f9f8; padding:13px 15px; text-align:left; font-size:10px; color:var(--ds-muted); font-weight:600; border-bottom:1px solid var(--ds-line); }
.ds-table td { padding:15px; border-bottom:1px solid #edf1ef; }
.ds-table tr:last-child td { border-bottom:0; }
.ds-table .numeric { text-align:right; font-variant-numeric:tabular-nums; }
.ds-table .group-head { text-align:center; background:#eef4f0; letter-spacing:.5px; }
.ds-negative { color:#b34d43; font-weight:650; }
.ds-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:4px; font-size:10px; font-weight:500; background:#eef4f0; color:#4e7063; }
.ds-chip.amber { background:#fcf2dc; color:#99713b; }
.ds-chip.gray { background:#f0f2f1; color:#79847e; }
.ds-list { display:flex; flex-direction:column; gap:12px; }
.ds-card { border:1px solid var(--ds-line); border-radius:9px; padding:20px; background:white; }
.ds-row-heading { justify-content:space-between; gap:12px; }
.ds-card h3 { margin:0 0 7px; font-size:14px; font-weight:600; }
.ds-card p { color:var(--ds-muted); margin:8px 0; line-height:1.7; font-size:12px; }
.ds-row-actions { gap:7px; flex-wrap:wrap; }
.ds-empty { text-align:center; padding:64px 22px; background:white; border:1px dashed #cfdbd4; border-radius:9px; }
.ds-empty h3 { font-size:16px; font-weight:550; }.ds-empty p { color:var(--ds-muted); font-size:12px; }
.ds-subtitle { font-size:17px; font-weight:600; margin:0 0 6px; letter-spacing:-.3px; }
.ds-balance-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0; }
.ds-balance-cards strong { font-size:30px; display:block; margin:14px 0 8px; font-weight:550; }
.ds-balance-cards h3 { color:var(--ds-muted); font-size:11px; }
.ds-panel-copy { max-width:720px; font-size:12px; color:var(--ds-muted); line-height:1.8; }
.ds-setup-top { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:18px; }
.ds-history { list-style:none; padding:0; margin:0; }
.ds-history li { padding:17px 0 17px 22px; border-left:1px solid #d6e2db; position:relative; margin-left:5px; }
.ds-history li::before { content:''; background:#7ca58f; width:7px; height:7px; border-radius:50%; position:absolute; top:22px; left:-4px; }
.ds-history strong { font-size:12px; }.ds-history p { margin:6px 0; font-size:12px; color:var(--ds-muted); }
.ds-history time { font-size:10px; color:#89978f; }
.ds-dialog { --ds-ink:#182d2b; --ds-muted:#697a79; --ds-line:#e1e9e7; --ds-green:#176354; color:var(--ds-ink); width:min(740px,calc(100vw - 32px)); max-height:90vh; border:0; border-radius:12px; padding:0; box-shadow:0 24px 100px #112c2938; }
.ds-dialog::backdrop { background:#11272366; backdrop-filter:blur(2px); }
.ds-dialog-head { padding:22px 24px 17px; justify-content:space-between; border-bottom:1px solid var(--ds-line); }
.ds-dialog-head h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.5px; }
.ds-dialog-body { padding:20px 24px; }
.ds-dialog-foot { border-top:1px solid var(--ds-line); padding:15px 24px; justify-content:flex-end; gap:8px; background:#f8faf9; }
.ds-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.ds-field { display:flex; flex-direction:column; gap:7px; font-size:11px; font-weight:550; }
.ds-field input,.ds-field select,.ds-field textarea { width:100%; border:1px solid #d6e0db; padding:9px 10px; min-height:37px; border-radius:6px; color:var(--ds-ink); background:white; font-size:12px; font-weight:400; }
.ds-field textarea { resize:vertical; min-height:70px; }
.ds-field.full { grid-column:1 / -1; }
.ds-segments { margin-top:20px; }
.ds-segment-row { display:grid; grid-template-columns:1fr 1fr 1.25fr auto; gap:8px; align-items:end; margin:10px 0; }
.ds-form-section { font-size:12px; margin:20px 0 10px; font-weight:650; }
.ds-checks { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; }
.ds-checks label { display:flex; align-items:center; gap:5px; }
.ds-error { padding:10px 12px; background:#fff0ed; color:#a1463b; border-radius:6px; font-size:12px; margin:13px 0 0; }
.ds-error:empty { display:none; }
.ds-timeline { display:grid; grid-template-columns:66px 66px 1fr; max-height:330px; overflow:auto; border:1px solid var(--ds-line); border-radius:6px; margin:15px 0; }
.ds-timeline > div { border-bottom:1px solid #edf1ef; min-height:28px; padding:6px 8px; font-size:10px; color:var(--ds-muted); }
.ds-timeline .ds-time-head { background:#f4f8f5; position:sticky; top:0; color:var(--ds-ink); font-weight:600; z-index:1; }
.ds-timeline .ds-time-on { background:#edf5ef; color:#486f5c; border-left:2px solid #87b09b; }
.ds-period { display:flex; justify-content:space-between; gap:10px; padding:13px 0; border-bottom:1px solid var(--ds-line); font-size:12px; }
.ds-toast { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); z-index:10005; padding:12px 18px; color:white; background:#214d40; box-shadow:0 6px 25px #173c292e; border-radius:7px; font-size:12px; max-width:90vw; }
.ds-loading { padding:80px; color:#6b8274; text-align:center; }
@media (min-width:1700px) { .ds-calendar th:first-child { width:240px; }.ds-event b { font-size:12px; }.ds-calendar td { padding:9px; } }
@media (max-width:1050px) { .ds-app { padding:24px 20px; }.ds-heading { align-items:flex-start; }.ds-heading h1 { font-size:25px; }.ds-stat { padding:15px; }.ds-tabs { gap:18px; } }
@media (max-width:900px) { body.ds-page.cc-has-admin-sidebar,body.ds-page.cc-has-admin-sidebar.cc-admin-sidebar-collapsed { padding-left:52px; } }
@media (max-width:700px) { .ds-app { padding:18px 12px; }.ds-heading { flex-direction:column; }.ds-topline { align-items:flex-start; }.ds-preview { max-width:160px; line-height:1.5; }.ds-stats { grid-template-columns:1fr 1fr; }.ds-stat:nth-child(2) { border-right:0; }.ds-stat:nth-child(-n+2) { border-bottom:1px solid var(--ds-line); }.ds-heading h1 { font-size:24px; }.ds-week-title { font-size:14px; }.ds-form-grid { grid-template-columns:1fr; }.ds-segment-row { grid-template-columns:1fr 1fr; padding:12px; background:#f8faf9; border-radius:5px; }.ds-row-heading,.ds-setup-top { flex-direction:column; align-items:flex-start; }.ds-balance-cards { grid-template-columns:1fr; }.ds-filters .ds-result-count { margin-left:0; }.ds-dialog-body { padding:16px; }.ds-dialog-foot { padding:12px 16px; flex-wrap:wrap; } }

/* ── Live tracker additions (API-driven UI) ── */
.ds-event.off { background:#f3f5f4; color:#79847e; border-color:#cdd5d0; }
.ds-key.flex_work { background:#478386; }
.ds-key.regular { background:#438873; }
.ds-calendar td.closed { background:repeating-linear-gradient(135deg,#fafbfa,#fafbfa 6px,#f1f4f2 6px,#f1f4f2 12px); }
.ds-calendar td.today { background:#f8fbf9; }
.ds-badges { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.ds-badge { font-style:normal; font-size:9px; letter-spacing:.4px; text-transform:uppercase; padding:2px 5px; border-radius:3px; background:#eef4f0; color:#4e7063; }
.ds-badge.pending { background:#fcf2dc; color:#99713b; }
.ds-badge.closed,.ds-badge.holiday { background:#f0f2f1; color:#79847e; }
.ds-chip.red { background:#fbe9e9; color:#a74642; }
.ds-chip.green { background:#e6f3ee; color:#176354; }
.ds-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.ds-chip .ds-x { border:0; background:transparent; color:inherit; font-size:12px; line-height:1; padding:0 2px; cursor:pointer; }
.ds-notice.error { background:#fbeeee; color:#a74642; border-color:#eccaca; }
.ds-notice.warn { background:#fcf7ed; color:#8d6b32; }
.ds-link { border:0; background:none; color:var(--ds-green); font-weight:550; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.ds-plain { margin:6px 0 0; padding-left:18px; color:var(--ds-muted); font-size:12px; line-height:1.7; }
.ds-balance-cards strong.ds-negative { color:#a74642; }

/* ── Company directory picker (Add employee) ── */
.ds-picker { border:1px solid var(--ds-line); border-radius:8px; padding:12px; margin-bottom:16px; background:#fbfdfc; }
.ds-picker .ds-search { width:100%; }
.ds-picker .ds-search input { width:100%; }
.ds-picker-list { display:flex; flex-direction:column; gap:4px; margin-top:10px; max-height:230px; overflow:auto; }
.ds-picker-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; border:1px solid transparent; background:white; border-radius:6px; padding:8px 10px; }
.ds-picker-row:hover:not(:disabled) { border-color:#b6cdc3; background:#f2f7f4; }
.ds-picker-row:disabled { opacity:.55; }
.ds-picker-row > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ds-picker-row strong { font-size:13px; font-weight:600; }
.ds-picker-row .ds-meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ds-directory-results > .ds-meta { margin:10px 0 0; }

/* A request waiting on a day, shown inside the day dialog so it can be decided there. */
.ds-request { border:1px solid #f0e2c7; background:#fdfaf3; border-radius:8px; padding:13px 15px; margin:14px 0; }
.ds-request h3 { margin:0 0 3px; font-size:14px; font-weight:650; }
.ds-request p { margin:4px 0; line-height:1.6; }
.ds-request .ds-row-actions { margin-top:11px; gap:8px; flex-wrap:wrap; }
.ds-card-rejected { border-color:#eccaca; }
.ds-chip.red { background:#fbe9e9; color:#a74642; }