/* =====================================================================
   ContraWork 2 - application styles (on top of Bootstrap 5.3)
   Light and dark themes via [data-bs-theme]. No external fonts or images.
   ===================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
    --cw-side-w: 252px;
    --cw-side-mini: 64px;
    --cw-top-h: 58px;
    --cw-radius: .55rem;
    --cw-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --cw-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    --cw-primary: #2949c6;
    --cw-primary-rgb: 41, 73, 198;
    --cw-primary-dark: #1e369a;
    --cw-accent: #0ea5a4;

    --cw-bg: #f3f5fa;
    --cw-surface: #ffffff;
    --cw-surface-2: #f8f9fc;
    --cw-border: #e2e6ef;
    --cw-text: #1d2433;
    --cw-muted: #6b7489;
    --cw-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --cw-shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);

    --cw-side-bg: #0f1a3a;
    --cw-side-bg-2: #16234a;
    --cw-side-text: #c7cfe6;
    --cw-side-muted: #8592b5;
    --cw-side-active: #ffffff;
    --cw-side-active-bg: rgba(255, 255, 255, .1);
    --cw-side-stripe: #7aa2ff;
    --cw-accent-rgb: 14, 165, 164;

    --cw-k: var(--cw-primary);          /* KPI accent */

    /* attendance status colours */
    /* attendance status colours: one clearly different colour each (white text) */
    --st-PR: #16a34a;   /* green   present */
    --st-HD: #0891b2;   /* cyan    half day */
    --st-AB: #dc2626;   /* red     absent */
    --st-WO: #64748b;   /* grey    weekly off */
    --st-PH: #2563eb;   /* blue    holiday */
    --st-LV: #9333ea;   /* purple  leave */
    --st-MP: #ea580c;   /* orange  missed punch */
    --st-WOP: #92400e;  /* brown   worked on weekly off */
    --st-PHP: #db2777;  /* pink    worked on holiday */
    --st-CO: #0f766e;   /* teal    comp off */

    --bs-primary: var(--cw-primary);
    --bs-primary-rgb: var(--cw-primary-rgb);
    --bs-link-color: var(--cw-primary);
    --bs-link-color-rgb: var(--cw-primary-rgb);
    --bs-link-hover-color: var(--cw-primary-dark);
    --bs-body-font-family: var(--cw-font);
    --bs-body-font-size: .9rem;
    --bs-body-bg: var(--cw-bg);
    --bs-border-radius: .45rem;
}

[data-bs-theme=dark] {
    --cw-primary: #6d8cff;
    --cw-primary-rgb: 109, 140, 255;
    --cw-primary-dark: #9fb3ff;
    --cw-bg: #0d111b;
    --cw-surface: #151b29;
    --cw-surface-2: #1b2232;
    --cw-border: #2a3347;
    --cw-text: #e3e8f4;
    --cw-muted: #95a0b8;
    --cw-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --cw-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
    --cw-side-bg: #0a0f1d;
    --cw-side-bg-2: #111a2e;
    --bs-body-bg: var(--cw-bg);
    --bs-body-color: var(--cw-text);
    --bs-border-color: var(--cw-border);
    --bs-secondary-bg: var(--cw-surface-2);
    --bs-tertiary-bg: #1a2131;
    --st-WO: #8391a7; --st-PH: #5b8cff; --st-LV: #a855f7; --st-MP: #f97316; --st-WOP: #b45309; --st-PHP: #ec4899; --st-CO: #14b8a6;
}


/* ------------------------------------------------------------------ colour themes
   html[data-cw-theme] = company default (App Settings > Colour theme) or the user's own choice
   (palette button in the top bar, kept in this browser). Each theme = two main colours,
   with its own light and dark version. Classic (indigo + teal) is the base above. */
[data-cw-theme=saffron] {   /* Saffron & Graphite: orange + gray */
    --cw-primary: #ea580c; --cw-primary-rgb: 234, 88, 12; --cw-primary-dark: #c2410c;
    --cw-accent: #475569; --cw-accent-rgb: 71, 85, 105;
    --cw-bg: #f4f4f5; --cw-surface-2: #f8f8f9; --cw-border: #e4e4e7;
    --cw-side-bg: #1f2329; --cw-side-bg-2: #2b3038; --cw-side-text: #d4d7dd; --cw-side-muted: #9aa1ab;
    --cw-side-active-bg: rgba(234, 88, 12, .18); --cw-side-stripe: #fb923c;
}
[data-cw-theme=saffron][data-bs-theme=dark] {
    --cw-primary: #fb923c; --cw-primary-rgb: 251, 146, 60; --cw-primary-dark: #fdba74;
    --cw-accent: #94a3b8; --cw-accent-rgb: 148, 163, 184;
    --cw-bg: #111214; --cw-surface: #1a1c20; --cw-surface-2: #212429; --cw-border: #30343b;
    --cw-side-bg: #0c0d0f; --cw-side-bg-2: #17191d; --bs-tertiary-bg: #1e2024;
}
[data-cw-theme=forest] {    /* Forest & Slate: green + gray */
    --cw-primary: #15803d; --cw-primary-rgb: 21, 128, 61; --cw-primary-dark: #166534;
    --cw-accent: #64748b; --cw-accent-rgb: 100, 116, 139;
    --cw-bg: #f3f6f4; --cw-surface-2: #f7faf8; --cw-border: #dfe7e2;
    --cw-side-bg: #1e293b; --cw-side-bg-2: #273449; --cw-side-text: #d1dae6; --cw-side-muted: #94a3b8;
    --cw-side-active-bg: rgba(74, 222, 128, .14); --cw-side-stripe: #4ade80;
}
[data-cw-theme=forest][data-bs-theme=dark] {
    --cw-primary: #4ade80; --cw-primary-rgb: 74, 222, 128; --cw-primary-dark: #86efac;
    --cw-accent: #94a3b8; --cw-accent-rgb: 148, 163, 184;
    --cw-bg: #0c1210; --cw-surface: #131c18; --cw-surface-2: #19241f; --cw-border: #28362f;
    --cw-side-bg: #0b1220; --cw-side-bg-2: #111b2d; --bs-tertiary-bg: #17211c;
}
[data-cw-theme=maroon] {    /* Maroon & Gold */
    --cw-primary: #9f1239; --cw-primary-rgb: 159, 18, 57; --cw-primary-dark: #881337;
    --cw-accent: #ca8a04; --cw-accent-rgb: 202, 138, 4;
    --cw-bg: #f7f4f2; --cw-surface-2: #fbf8f6; --cw-border: #ebe3df;
    --cw-side-bg: #2a0f17; --cw-side-bg-2: #3b1621; --cw-side-text: #f1d9df; --cw-side-muted: #c49aa6;
    --cw-side-active-bg: rgba(250, 204, 21, .14); --cw-side-stripe: #facc15;
}
[data-cw-theme=maroon][data-bs-theme=dark] {
    --cw-primary: #fb7185; --cw-primary-rgb: 251, 113, 133; --cw-primary-dark: #fda4af;
    --cw-accent: #eab308; --cw-accent-rgb: 234, 179, 8;
    --cw-bg: #140c0e; --cw-surface: #1d1315; --cw-surface-2: #25191c; --cw-border: #3a2a2e;
    --cw-side-bg: #12070a; --cw-side-bg-2: #1e0c11; --bs-tertiary-bg: #22171a;
}
[data-cw-theme=ocean] {     /* Ocean & Amber: blue + amber */
    --cw-primary: #0369a1; --cw-primary-rgb: 3, 105, 161; --cw-primary-dark: #075985;
    --cw-accent: #f59e0b; --cw-accent-rgb: 245, 158, 11;
    --cw-bg: #f1f5f9; --cw-surface-2: #f7fafc; --cw-border: #dde5ee;
    --cw-side-bg: #082f49; --cw-side-bg-2: #0c4a6e; --cw-side-text: #cfe8f7; --cw-side-muted: #8cb6d0;
    --cw-side-active-bg: rgba(251, 191, 36, .16); --cw-side-stripe: #fbbf24;
}
[data-cw-theme=ocean][data-bs-theme=dark] {
    --cw-primary: #38bdf8; --cw-primary-rgb: 56, 189, 248; --cw-primary-dark: #7dd3fc;
    --cw-accent: #fbbf24; --cw-accent-rgb: 251, 191, 36;
    --cw-bg: #07111a; --cw-surface: #0e1b27; --cw-surface-2: #132332; --cw-border: #213547;
    --cw-side-bg: #04131f; --cw-side-bg-2: #082236; --bs-tertiary-bg: #142130;
}

/* theme picker (top bar and sign-in page) */
.cw-tswatch { width: 26px; height: 26px; border-radius: 50%; flex: none; display: inline-block; position: relative;
             box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), inset 0 0 0 2px rgba(255, 255, 255, .5); }
.cw-tswatch.sw-saffron { background: linear-gradient(135deg, #ea580c 50%, #475569 50%); }
.cw-tswatch.sw-classic { background: linear-gradient(135deg, #2949c6 50%, #0ea5a4 50%); }
.cw-tswatch.sw-forest  { background: linear-gradient(135deg, #15803d 50%, #64748b 50%); }
.cw-tswatch.sw-maroon  { background: linear-gradient(135deg, #9f1239 50%, #ca8a04 50%); }
.cw-tswatch.sw-ocean   { background: linear-gradient(135deg, #0369a1 50%, #f59e0b 50%); }
.cw-themes .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.cw-themes .dropdown-item.active, .cw-themes .dropdown-item:active { background: rgba(var(--cw-primary-rgb), .12); color: var(--cw-text); }
.cw-themes .dropdown-item.active::after { content: "\F26E"; font-family: bootstrap-icons; margin-left: auto; color: var(--cw-primary); }
.cw-themes { min-width: 240px; }

/* ------------------------------------------------------------------ base */
html { scroll-padding-top: calc(var(--cw-top-h) + 12px); }
body { background: var(--cw-bg); color: var(--cw-text); font-size: var(--bs-body-font-size); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
kbd { font-family: var(--cw-mono); font-size: .72em; padding: .1rem .35rem; border-radius: .3rem; background: var(--cw-surface-2); color: var(--cw-muted); border: 1px solid var(--cw-border); box-shadow: inset 0 -1px 0 var(--cw-border); }
.cw-skip { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: var(--cw-surface); padding: .5rem 1rem; border-radius: var(--cw-radius); }
:focus-visible { outline: 2px solid rgba(var(--cw-primary-rgb), .6); outline-offset: 2px; }
.small, small { font-size: .82em; }
.cw-req { color: #dc2626; margin-left: .15rem; }
.form-label.req::after { content: "*"; color: #dc2626; margin-left: .15rem; }
.cw-link { color: var(--cw-primary); cursor: pointer; text-decoration: none; border-bottom: 1px dotted rgba(var(--cw-primary-rgb), .45); }
.cw-link:hover { text-decoration: none; border-bottom-style: solid; }
.cw-h6 { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cw-muted); font-weight: 700; margin-bottom: .6rem; }
.cw-h6 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.text-bg-teal { color: #fff !important; background-color: var(--st-LV) !important; }
/* attendance status badges (CW.status with CW.ATT_STATUS) use the same colours as the grids */
.text-bg-att-PR, .text-bg-att-HD, .text-bg-att-AB, .text-bg-att-WO, .text-bg-att-PH, .text-bg-att-LV, .text-bg-att-MP, .text-bg-att-WOP, .text-bg-att-PHP, .text-bg-att-CO { color: #fff !important; }
.text-bg-att-PR { background-color: var(--st-PR) !important; } .text-bg-att-HD { background-color: var(--st-HD) !important; }
.text-bg-att-AB { background-color: var(--st-AB) !important; } .text-bg-att-WO { background-color: var(--st-WO) !important; }
.text-bg-att-PH { background-color: var(--st-PH) !important; } .text-bg-att-LV { background-color: var(--st-LV) !important; }
.text-bg-att-MP { background-color: var(--st-MP) !important; } .text-bg-att-WOP { background-color: var(--st-WOP) !important; }
.text-bg-att-PHP { background-color: var(--st-PHP) !important; } .text-bg-att-CO { background-color: var(--st-CO) !important; }
.text-bg-light { border: 1px solid var(--cw-border); }

/* Bootstrap buttons follow the app primary */
.btn-primary {
    --bs-btn-bg: var(--cw-primary); --bs-btn-border-color: var(--cw-primary);
    --bs-btn-hover-bg: var(--cw-primary-dark); --bs-btn-hover-border-color: var(--cw-primary-dark);
    --bs-btn-active-bg: var(--cw-primary-dark); --bs-btn-active-border-color: var(--cw-primary-dark);
    --bs-btn-disabled-bg: var(--cw-primary); --bs-btn-disabled-border-color: var(--cw-primary);
}
[data-bs-theme=dark] .btn-primary { --bs-btn-color: #0b1020; --bs-btn-hover-color: #0b1020; --bs-btn-active-color: #0b1020; --bs-btn-disabled-color: #0b1020; }
.btn-outline-primary {
    --bs-btn-color: var(--cw-primary); --bs-btn-border-color: var(--cw-primary);
    --bs-btn-hover-bg: var(--cw-primary); --bs-btn-hover-border-color: var(--cw-primary);
    --bs-btn-active-bg: var(--cw-primary); --bs-btn-active-border-color: var(--cw-primary);
}
.btn-light { --bs-btn-bg: var(--cw-surface); --bs-btn-border-color: var(--cw-border); --bs-btn-hover-bg: var(--cw-surface-2); --bs-btn-hover-border-color: var(--cw-border); --bs-btn-color: var(--cw-text); --bs-btn-hover-color: var(--cw-text); --bs-btn-active-bg: var(--cw-surface-2); }
.btn-icon { --bs-btn-padding-x: .45rem; --bs-btn-padding-y: .25rem; color: var(--cw-muted); border: 0; background: transparent; line-height: 1; }
.btn-icon:hover, .btn-icon:focus-visible { color: var(--cw-text); background: var(--cw-surface-2); }
.btn.cw-busy { pointer-events: none; opacity: .85; }
.btn i.bi + span, .btn i.bi { vertical-align: -.1em; }
.form-control, .form-select { border-color: var(--cw-border); background-color: var(--cw-surface); color: var(--cw-text); }
.form-control:disabled, .form-control[readonly]:not(.flatpickr-input), .form-select:disabled { background-color: var(--cw-surface-2); }
.input-group-text { background-color: var(--cw-surface-2); border-color: var(--cw-border); color: var(--cw-muted); }
.form-control:focus, .form-select:focus { background-color: var(--cw-surface); color: var(--cw-text); border-color: rgba(var(--cw-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--cw-primary-rgb), .15); }
.validation-summary-valid { display: none !important; }
.field-validation-error { display: block; margin-top: .2rem; }
.form-check-input:checked { background-color: var(--cw-primary); border-color: var(--cw-primary); }
.form-label { font-weight: 500; font-size: .82rem; margin-bottom: .2rem; color: var(--cw-text); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--cw-primary); }
.dropdown-menu { --bs-dropdown-font-size: .88rem; border-color: var(--cw-border); box-shadow: var(--cw-shadow-lg); }
.modal-content, .offcanvas { background: var(--cw-surface); }
.modal-header, .modal-footer { border-color: var(--cw-border); }
.table { --bs-table-bg: transparent; }

/* ------------------------------------------------------------------ app shell */
.cw-app { min-height: 100vh; }

.cw-side {
    position: fixed; inset: 0 auto 0 0; width: var(--cw-side-w); z-index: 1040;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--cw-side-bg) 0%, var(--cw-side-bg-2) 100%);
    color: var(--cw-side-text); transition: width .2s ease, transform .2s ease;
}
.cw-brand { display: flex; align-items: center; gap: .65rem; padding: .9rem 1rem; height: var(--cw-top-h); color: #fff; text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.cw-brand-logo { width: 34px; height: 34px; border-radius: .5rem; background: #fff; object-fit: contain; padding: 3px; flex: none; }
.cw-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cw-brand-text strong { font-size: 1rem; letter-spacing: .01em; }
.cw-brand-text small { color: var(--cw-side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; }
.cw-side-search { padding: .75rem .75rem .25rem; }
.cw-search-btn { display: flex; align-items: center; gap: .5rem; color: var(--cw-side-muted); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.cw-search-btn:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.cw-search-btn span { flex: 1; }
.cw-search-btn kbd { background: transparent; border-color: rgba(255, 255, 255, .18); color: var(--cw-side-muted); box-shadow: none; }

.cw-nav { flex: 1; overflow-y: auto; padding: .4rem .5rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.cw-nav-head, .cw-nav-link {
    display: flex; align-items: center; gap: .65rem; width: 100%; padding: .48rem .7rem; border-radius: .45rem;
    color: var(--cw-side-text); background: none; border: 0; text-align: left; font-size: .875rem; text-decoration: none !important;
}
.cw-nav-head > i:first-child, .cw-nav-link > i:first-child { font-size: 1.05rem; width: 1.2rem; text-align: center; flex: none; opacity: .9; }
.cw-nav-head span, .cw-nav-link span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-nav-head:hover, .cw-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.cw-nav-head { font-weight: 600; margin-top: .15rem; }
.cw-caret { font-size: .7rem; transition: transform .2s; opacity: .6; }
.cw-nav-group.open > .cw-nav-head .cw-caret { transform: rotate(180deg); }
.cw-nav-items { display: none; padding: .1rem 0 .3rem .9rem; margin-left: .95rem; border-left: 1px solid rgba(255, 255, 255, .08); }
.cw-nav-group.open > .cw-nav-items { display: block; }
.cw-nav-items .cw-nav-link { padding: .38rem .6rem; font-size: .84rem; color: var(--cw-side-muted); }
.cw-nav-items .cw-nav-link > i:first-child { font-size: .95rem; }
.cw-nav-link.active { color: var(--cw-side-active) !important; background: var(--cw-side-active-bg); box-shadow: inset 3px 0 0 var(--cw-side-stripe); font-weight: 600; }
.cw-nav-kbd { background: transparent; border-color: rgba(255, 255, 255, .15); color: var(--cw-side-muted); box-shadow: none; }
.cw-side-foot { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; font-size: .72rem; color: var(--cw-side-muted); border-top: 1px solid rgba(255, 255, 255, .07); }
.cw-side-foot a { color: var(--cw-side-muted); }

.cw-main { margin-left: var(--cw-side-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.cw-top {
    position: sticky; top: 0; z-index: 1030; height: var(--cw-top-h);
    display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
    background: color-mix(in srgb, var(--cw-surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--cw-border);
}
.cw-side-toggle { font-size: 1.35rem; }
.cw-title { flex: 1; min-width: 0; }
.cw-title h1 { font-size: 1.12rem; font-weight: 650; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-subtitle { font-size: .76rem; color: var(--cw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-top-actions { display: flex; align-items: center; gap: .2rem; }
.cw-top-actions .btn-icon { font-size: 1.15rem; padding: .45rem .5rem; border-radius: .5rem; }
.cw-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #dc2626; color: #fff; font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center; }
.cw-user { display: flex; align-items: center; gap: .5rem; border: 0; padding: .25rem .4rem; border-radius: .6rem; color: var(--cw-text); }
.cw-user:hover { background: var(--cw-surface-2); }
.cw-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; background: linear-gradient(135deg, var(--cw-primary), var(--cw-accent)); flex: none; }
.cw-user-name { text-align: left; line-height: 1.15; font-size: .85rem; font-weight: 600; }
.cw-user-name small { display: block; font-weight: 400; color: var(--cw-muted); font-size: .72rem; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-alerts { width: 340px; max-height: 70vh; overflow-y: auto; }
.cw-alert-item { display: flex; align-items: center; gap: .6rem; white-space: normal; padding: .5rem 1rem; }
.cw-alert-item span:nth-child(2) { flex: 1; }

.cw-content { flex: 1; padding: 1.1rem 1.25rem 2rem; outline: none; max-width: 100%; }

/* collapsed side menu (desktop) */
html.cw-side-mini .cw-side { width: var(--cw-side-mini); }
html.cw-side-mini .cw-main { margin-left: var(--cw-side-mini); }
html.cw-side-mini .cw-brand-text, html.cw-side-mini .cw-side-search span, html.cw-side-mini .cw-side-search kbd,
html.cw-side-mini .cw-nav-head span, html.cw-side-mini .cw-nav-link span, html.cw-side-mini .cw-caret, html.cw-side-mini .cw-nav-kbd,
html.cw-side-mini .cw-side-foot span { display: none; }
html.cw-side-mini .cw-brand { padding: .9rem; justify-content: center; }
html.cw-side-mini .cw-nav-items { margin-left: 0; padding-left: 0; border-left: 0; }
html.cw-side-mini .cw-nav-head, html.cw-side-mini .cw-nav-link { justify-content: center; padding: .55rem; }
html.cw-side-mini .cw-search-btn { justify-content: center; }
html.cw-side-mini .cw-side-foot { justify-content: center; }

.cw-backdrop { display: none; }

/* mobile */
@media (max-width: 991.98px) {
    .cw-side { transform: translateX(-100%); width: min(84vw, 300px) !important; box-shadow: var(--cw-shadow-lg); }
    body.cw-side-open .cw-side { transform: none; }
    body.cw-side-open .cw-backdrop { display: block; position: fixed; inset: 0; background: rgba(10, 15, 30, .45); z-index: 1035; }
    .cw-main, html.cw-side-mini .cw-main { margin-left: 0; }
    html.cw-side-mini .cw-brand-text, html.cw-side-mini .cw-nav-head span, html.cw-side-mini .cw-nav-link span, html.cw-side-mini .cw-caret,
    html.cw-side-mini .cw-side-search span { display: initial; }
    .cw-top { padding: 0 .75rem; }
    .cw-content { padding: .85rem .75rem calc(4.5rem + env(safe-area-inset-bottom)); }
}
.cw-bottom {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; justify-content: space-around;
    padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); background: var(--cw-surface); border-top: 1px solid var(--cw-border);
}
.cw-bottom a, .cw-bottom button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .68rem; color: var(--cw-muted); background: none; border: 0; text-decoration: none !important; padding: .2rem 0; }
.cw-bottom i { font-size: 1.2rem; }
.cw-bottom a:hover, .cw-bottom button:hover { color: var(--cw-primary); }

/* ------------------------------------------------------------------ cards, toolbars, filters */
.cw-card { border: 1px solid var(--cw-border); border-radius: var(--cw-radius); background: var(--cw-surface); box-shadow: var(--cw-shadow); }
.cw-card > .card-header { background: transparent; border-bottom: 1px solid var(--cw-border); font-weight: 600; font-size: .88rem; padding: .65rem 1rem; }
.cw-card > .card-header > i:first-child { color: var(--cw-primary); margin-right: .25rem; }
.cw-card > .card-footer { background: var(--cw-surface-2); border-top: 1px solid var(--cw-border); }
.card { --bs-card-bg: var(--cw-surface); --bs-card-border-color: var(--cw-border); }

.cw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .65rem; }
.cw-toolbar .form-check { margin-bottom: 0; }
.cw-subbar { margin: .6rem 0 .4rem; }
.cw-note { border: 0; border-left: 3px solid #0ea5e9; background: color-mix(in srgb, #0ea5e9 9%, var(--cw-surface)); color: var(--cw-text); border-radius: .4rem; }
.cw-note i { color: #0ea5e9; }

.cw-filter {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem .75rem;
    padding: .7rem .85rem; margin-bottom: .75rem; border: 1px solid var(--cw-border); border-radius: var(--cw-radius);
    background: var(--cw-surface); box-shadow: var(--cw-shadow);
}
.cw-f, .cw-filter-item { display: flex; flex-direction: column; min-width: 140px; }
.cw-f .form-label, .cw-filter-item .form-label { font-size: .72rem; color: var(--cw-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
.cw-f-sm { min-width: 0; width: 92px; }
.cw-f-lg { min-width: 230px; flex: 0 1 290px; }
.cw-f-btn { min-width: 0; }
.cw-f .input-group { flex-wrap: nowrap; }
.cw-f .input-group .form-select { min-width: 120px; }
.cw-sel-info { white-space: nowrap; }

/* KPI tiles */
.cw-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: .75rem; margin-bottom: .9rem; }
.cw-kpis-sm { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.cw-kpi {
    --cw-k: var(--cw-primary);
    display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; color: var(--cw-text) !important; text-decoration: none !important;
    background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); box-shadow: var(--cw-shadow);
    position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease;
}
a.cw-kpi:hover { transform: translateY(-1px); box-shadow: var(--cw-shadow-lg); }
.cw-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--cw-k); }
.cw-kpi > i { width: 40px; height: 40px; border-radius: .6rem; display: grid; place-items: center; font-size: 1.2rem; flex: none; color: var(--cw-k); background: color-mix(in srgb, var(--cw-k) 12%, transparent); }
.cw-kpi > div > span { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cw-kpi small { color: var(--cw-muted); font-size: .74rem; }
.cw-kpis-sm .cw-kpi { padding: .5rem .65rem; gap: .5rem; }
.cw-kpis-sm .cw-kpi > i { width: 30px; height: 30px; font-size: .95rem; }
.cw-kpis-sm .cw-kpi > div > span { font-size: 1.05rem; }
.kpi-green { --cw-k: #16a34a; } .kpi-red { --cw-k: #dc2626; } .kpi-amber { --cw-k: #d97706; }
.kpi-violet { --cw-k: #7c3aed; } .kpi-teal { --cw-k: var(--st-LV); } .kpi-blue { --cw-k: #2563eb; }

.cw-chart { position: relative; height: 280px; }
.cw-chart-empty { height: 280px; display: grid; place-items: center; color: var(--cw-muted); font-size: .85rem; }
.cw-quick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* empty and loading */
.cw-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 2rem 1rem; color: var(--cw-muted); text-align: center; }
.cw-empty > i { font-size: 2rem; opacity: .55; }
.cw-empty-page { min-height: 50vh; }
.cw-empty-page h1 { font-size: 1.4rem; color: var(--cw-text); }
.cw-loading-box { padding: 1.25rem; color: var(--cw-muted); font-size: .85rem; }

/* record header (labour / contractor / run) */
.cw-record {
    display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; padding: .85rem 1rem; margin-bottom: .85rem;
    background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); box-shadow: var(--cw-shadow);
}
.cw-record-icon { width: 54px; height: 54px; border-radius: .75rem; display: grid; place-items: center; font-size: 1.5rem; color: var(--cw-primary); background: rgba(var(--cw-primary-rgb), .1); flex: none; }
.cw-record-photo { width: 58px; height: 70px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--cw-border); background: var(--cw-surface-2); flex: none; }
.cw-record-main { flex: 1 1 340px; min-width: 0; }
.cw-record-title { font-size: 1.12rem; font-weight: 650; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cw-record-title .badge { font-size: .68rem; font-weight: 600; }
.cw-record-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--cw-muted); font-size: .82rem; margin-top: .2rem; }
.cw-record-meta i { margin-right: .2rem; }
.cw-record-stats { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin-top: .5rem; }
.cw-record-stats > span { font-size: .76rem; color: var(--cw-muted); background: var(--cw-surface-2); border: 1px solid var(--cw-border); border-radius: 2rem; padding: .12rem .6rem; }
.cw-record-stats b { color: var(--cw-text); font-variant-numeric: tabular-nums; }
.cw-record-actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/* tabs */
.cw-tabs { border-bottom-color: var(--cw-border); margin-bottom: .85rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cw-tabs .nav-link { white-space: nowrap; color: var(--cw-muted); font-weight: 500; border: 0; border-bottom: 2px solid transparent; padding: .55rem .95rem; background: none; }
.cw-tabs .nav-link:hover { color: var(--cw-text); }
.cw-tabs .nav-link.active { color: var(--cw-primary); border-bottom-color: var(--cw-primary); background: none; }
.cw-tabs .nav-link:disabled { opacity: .45; }
.cw-pills .nav-link { color: var(--cw-muted); font-weight: 500; }
.cw-pills .nav-link .badge { margin-left: .25rem; }

/* steps / flow */
.cw-steps, .cw-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; margin-bottom: .85rem; counter-reset: s; }
.cw-step, .cw-flow-step {
    position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .6rem .8rem .6rem 2.9rem; font-weight: 600; font-size: .85rem;
    background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: var(--cw-radius);
}
.cw-step > span { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; color: #fff; background: var(--cw-primary); }
.cw-flow-step > i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: var(--cw-primary); }
.cw-step small, .cw-flow-step small { font-weight: 400; color: var(--cw-muted); font-size: .74rem; }
.cw-flow-step b { font-weight: 600; }
.cw-periodbar { padding: .6rem .85rem; margin-bottom: .75rem; background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); }
.cw-periodbar:empty { display: none; }

/* drawer */
.cw-drawer-lg { --bs-offcanvas-width: min(680px, 100vw); }
.cw-drawer-foot { position: sticky; bottom: 0; display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; padding: .75rem 1rem; margin: 1rem -1rem -1rem; background: var(--cw-surface); border-top: 1px solid var(--cw-border); }

/* ------------------------------------------------------------------ forms */
.cw-formwrap { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 1rem; align-items: start; }
.cw-formwrap--flat { grid-template-columns: minmax(0, 1fr); }
.cw-secnav { position: sticky; top: calc(var(--cw-top-h) + 12px); display: flex; flex-direction: column; gap: .1rem; padding: .4rem; background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); max-height: calc(100vh - var(--cw-top-h) - 30px); overflow-y: auto; }
.cw-secnav a { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .4rem .6rem; border-radius: .4rem; color: var(--cw-muted); font-size: .84rem; text-decoration: none !important; }
.cw-secnav a:hover { background: var(--cw-surface-2); color: var(--cw-text); }
.cw-secnav a.active { background: rgba(var(--cw-primary-rgb), .1); color: var(--cw-primary); font-weight: 600; }
.cw-secnav a.has-error { color: #dc2626; }
.cw-sec-count:not(:empty) { min-width: 1.25rem; height: 1.25rem; border-radius: .65rem; background: #dc2626; color: #fff; font-size: .68rem; display: inline-grid; place-items: center; padding: 0 .3rem; }
.cw-secnav .badge { font-weight: 500; }
.cw-secs { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.cw-sec { border: 1px solid var(--cw-border); border-radius: var(--cw-radius); background: var(--cw-surface); scroll-margin-top: calc(var(--cw-top-h) + 12px); }
.cw-sec > .card-header { background: transparent; font-weight: 650; font-size: .86rem; border-bottom: 1px solid var(--cw-border); padding: .6rem 1rem; }
.cw-sec.has-error { border-color: rgba(220, 38, 38, .55); }
.cw-sec.has-error > .card-header { color: #dc2626; }
.cw-field .form-text { font-size: .74rem; margin-top: .15rem; }
.cw-field .invalid-feedback { font-size: .76rem; }
.cw-field[data-req] .form-label::after { content: ""; }
.cw-formbody { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.cw-formbody .cw-sec { padding: .4rem 1rem .6rem; }
.cw-sec-title { font-size: .95rem; font-weight: 650; padding: .55rem 0; margin: 0 0 .25rem; border-bottom: 1px solid var(--cw-border); }
.cw-setting { padding: .55rem 0; border-bottom: 1px dashed var(--cw-border); }
.cw-setting:last-child { border-bottom: 0; }
.cw-setting.cw-changed, .cw-changed { box-shadow: inset 3px 0 0 #f59e0b; background: color-mix(in srgb, #f59e0b 7%, transparent); }
.cw-formbar {
    position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap;
    margin-top: .85rem; padding: .65rem .9rem; background: color-mix(in srgb, var(--cw-surface) 92%, transparent); backdrop-filter: blur(6px);
    border: 1px solid var(--cw-border); border-radius: var(--cw-radius); box-shadow: 0 -4px 14px rgba(16, 24, 40, .06);
}
.cw-formbar-info { margin-right: auto; }
form.is-dirty .cw-formbar { border-color: rgba(245, 158, 11, .6); }
.cw-form-modal .cw-formwrap { gap: 0; }
.cw-form-modal .cw-sec { border: 0; background: transparent; }
.cw-form-modal .cw-sec > .card-header { padding: .3rem 0; border: 0; color: var(--cw-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.cw-form-modal .cw-sec > .card-body { padding: .3rem 0 .6rem; }
.cw-fine { padding: .6rem .75rem; border-radius: .45rem; background: color-mix(in srgb, #dc2626 6%, transparent); border: 1px dashed rgba(220, 38, 38, .35); }
@media (max-width: 991.98px) {
    .cw-formwrap { grid-template-columns: minmax(0, 1fr); }
    .cw-secnav { position: static; flex-direction: row; overflow-x: auto; max-height: none; scrollbar-width: none; }
    .cw-secnav a { white-space: nowrap; }
}

/* photo */
.cw-photo { position: relative; width: 132px; display: flex; flex-direction: column; gap: .4rem; }
.cw-photo img, .cw-photo-empty { width: 132px; height: 160px; border-radius: .5rem; border: 1px solid var(--cw-border); object-fit: cover; background: var(--cw-surface-2); }
.cw-photo-empty { display: grid; place-items: center; font-size: 3rem; color: var(--cw-muted); }
.cw-photo-btns { width: 132px; }
.cw-photo-btns .btn { padding-left: .3rem; padding-right: .3rem; font-size: .75rem; }
.cw-cam { position: relative; background: #000; border-radius: .5rem; overflow: hidden; display: flex; justify-content: center; }
.cw-cam video { width: 100%; max-height: 60vh; transform: scaleX(-1); object-fit: contain; }
.cw-cam canvas { max-width: 100%; max-height: 60vh; }
.cw-cam-guide { position: absolute; top: 12%; left: 50%; width: 38%; aspect-ratio: 3 / 4; transform: translateX(-50%); border: 3px dashed rgba(255,255,255,.75); border-radius: 50%; pointer-events: none; }
.cw-logo-preview { max-height: 120px; object-fit: contain; background: #fff; border-radius: .5rem; padding: .5rem; border: 1px solid var(--cw-border); }

/* password strength */
.cw-strength { height: 6px; border-radius: 3px; background: var(--cw-surface-2); border: 1px solid var(--cw-border); overflow: hidden; }
.cw-strength > div { height: 100%; width: 0; transition: width .25s ease, background-color .25s; border-radius: 3px; }

/* ------------------------------------------------------------------ Tom Select (searchable dropdowns) */
.ts-wrapper .ts-control, .ts-wrapper.single .ts-control, .ts-wrapper.single.input-active .ts-control { background-color: var(--cw-surface); color: var(--cw-text); }
.ts-wrapper.form-select, .ts-wrapper.form-control { background-color: var(--cw-surface); border-color: var(--cw-border); color: var(--cw-text); }
.ts-wrapper.form-select-sm { font-size: .84rem; min-height: calc(1.5em + .5rem + 2px); padding-top: .2rem; padding-bottom: .2rem; }
.ts-wrapper.focus { border-color: rgba(var(--cw-primary-rgb), .6) !important; box-shadow: 0 0 0 .2rem rgba(var(--cw-primary-rgb), .15) !important; }
.ts-wrapper.is-invalid { border-color: #dc2626 !important; }
.ts-wrapper.disabled, .ts-wrapper.disabled .ts-control { background-color: var(--cw-surface-2) !important; opacity: .85; }
.ts-wrapper .ts-control > input { color: var(--cw-text); }
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single .ts-control > .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-wrapper .ts-control > input::placeholder { color: var(--cw-muted); }
.ts-dropdown { background: var(--cw-surface); color: var(--cw-text); border-color: var(--cw-border); box-shadow: var(--cw-shadow-lg); z-index: 1090; font-size: .85rem; border-radius: .45rem; }
.ts-dropdown .active { background: rgba(var(--cw-primary-rgb), .12); color: var(--cw-text); }
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .create { padding: .38rem .6rem; }
.ts-wrapper.multi .ts-control > div { background: rgba(var(--cw-primary-rgb), .12); color: var(--cw-text); border-radius: .3rem; border: 0; }
.ts-wrapper .clear-button { color: var(--cw-muted); }
.cw-ts-loading { padding: .5rem .6rem; color: var(--cw-muted); }
.cw-opt1 .cw-oc, .cw-ic { font-family: var(--cw-mono); font-size: .78em; color: var(--cw-muted); margin-right: .35rem; }
.cw-opt1 .cw-opt-desc { font-size: .74rem; color: var(--cw-muted); line-height: 1.25; margin-top: .1rem; white-space: normal; }
.cw-ts-multi { min-width: min(640px, 92vw); }
.cw-opt { display: grid; grid-template-columns: minmax(70px, .7fr) minmax(140px, 2fr) minmax(90px, 1.3fr) minmax(60px, 1fr); gap: .6rem; align-items: center; }
.cw-opt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-oc { font-family: var(--cw-mono); font-size: .8em; color: var(--cw-primary); }
.cw-ot { font-weight: 500; }
.cw-os, .cw-oe { color: var(--cw-muted); font-size: .8em; }
.cw-opt-head { padding: .35rem .6rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cw-muted); border-bottom: 1px solid var(--cw-border); background: var(--cw-surface-2); }
.cw-opt-head .cw-oc, .cw-opt-head .cw-ot { color: var(--cw-muted); font-family: inherit; font-weight: 600; }

/* ------------------------------------------------------------------ flatpickr */
.flatpickr-calendar { background: var(--cw-surface); border: 1px solid var(--cw-border); box-shadow: var(--cw-shadow-lg); font-family: var(--cw-font); }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--cw-surface); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--cw-surface); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, span.flatpickr-weekday, .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--cw-text); fill: var(--cw-text); background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--cw-surface); }
.flatpickr-day { color: var(--cw-text); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--cw-surface-2); border-color: var(--cw-border); }
.flatpickr-day.today { border-color: var(--cw-primary); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--cw-primary); border-color: var(--cw-primary); color: #fff; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: var(--cw-muted); opacity: .55; }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--cw-text); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--cw-text); }
input.flatpickr-input.form-control[readonly] { background-color: var(--cw-surface); }

/* ------------------------------------------------------------------ grids (Tabulator) */
.cw-gridwrap, .cw-grid { border-radius: var(--cw-radius); }
.cw-gridbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .4rem .5rem; background: var(--cw-surface); border: 1px solid var(--cw-border); border-bottom: 0; border-radius: var(--cw-radius) var(--cw-radius) 0 0; }
.cw-gridbar + .tabulator, .cw-gridbar + .cw-grid { border-top-left-radius: 0; border-top-right-radius: 0; }
.cw-gsearch { position: relative; flex: 0 1 260px; }
.cw-gsearch i { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); color: var(--cw-muted); font-size: .8rem; }
.cw-gsearch input { padding-left: 1.7rem; }
.cw-gcount-all { white-space: nowrap; }
.cw-gmenu { max-height: 60vh; overflow-y: auto; min-width: 220px; }
.cw-gmenu .dropdown-item { display: flex; align-items: center; cursor: pointer; font-size: .84rem; }
.cw-gridbar .btn.active { background: rgba(var(--cw-primary-rgb), .12); color: var(--cw-primary); border-color: rgba(var(--cw-primary-rgb), .35); }

.tabulator {
    font-size: .82rem; border: 1px solid var(--cw-border); border-radius: var(--cw-radius); background: var(--cw-surface); color: var(--cw-text);
    --cw-row-h: 30px;
}
.tabulator .tabulator-header { background: var(--cw-surface-2); border-bottom: 1px solid var(--cw-border); color: var(--cw-text); font-weight: 600; }
.tabulator .tabulator-header .tabulator-col { background: var(--cw-surface-2); border-right: 1px solid var(--cw-border); }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: .4rem .45rem; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-title { font-size: .76rem; white-space: nowrap; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: color-mix(in srgb, var(--cw-surface-2) 70%, var(--cw-border)); }
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
    font-size: .76rem; padding: .12rem .3rem; border: 1px solid var(--cw-border); border-radius: .3rem; background: var(--cw-surface); color: var(--cw-text); width: 100%;
}
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left { border-right: 2px solid var(--cw-border); }
.tabulator .tabulator-tableholder { background: var(--cw-surface); }
.tabulator .tabulator-tableholder .tabulator-table { background: var(--cw-surface); color: var(--cw-text); }
.tabulator-row { background: var(--cw-surface); border-bottom: 1px solid color-mix(in srgb, var(--cw-border) 70%, transparent); min-height: var(--cw-row-h); }
.tabulator-row.tabulator-row-even { background: color-mix(in srgb, var(--cw-surface-2) 55%, var(--cw-surface)); }
.tabulator-row .tabulator-cell { padding: .32rem .45rem; border-right: 1px solid color-mix(in srgb, var(--cw-border) 55%, transparent); }
.tabulator-row .tabulator-cell.tabulator-frozen { background: inherit; }
.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left { border-right: 2px solid var(--cw-border); }
.tabulator-row.tabulator-selectable:hover { background: rgba(var(--cw-primary-rgb), .06); cursor: pointer; }
.tabulator-row.tabulator-selected { background: rgba(var(--cw-primary-rgb), .14) !important; }
.tabulator-row.tabulator-selected:hover { background: rgba(var(--cw-primary-rgb), .2) !important; }
.tabulator .tabulator-footer { background: var(--cw-surface-2); border-top: 1px solid var(--cw-border); color: var(--cw-text); }
.tabulator .tabulator-footer .tabulator-calcs-holder, .tabulator .tabulator-calcs-holder { background: var(--cw-surface-2) !important; border-top: 1px solid var(--cw-border); }
.tabulator .tabulator-calcs-holder .tabulator-row { background: var(--cw-surface-2) !important; font-weight: 700; }
.tabulator-row.tabulator-calcs { background: var(--cw-surface-2) !important; font-weight: 700; }
.cw-nocalc .tabulator-calcs-holder, .cw-nocalc .tabulator-row.tabulator-calcs { display: none !important; }
.tabulator .tabulator-row.tabulator-group { background: color-mix(in srgb, var(--cw-primary) 7%, var(--cw-surface)); border-bottom: 1px solid var(--cw-border); border-top: 1px solid var(--cw-border); padding: .35rem .5rem; font-weight: 600; color: var(--cw-text); }
.tabulator .tabulator-row.tabulator-group:hover { background: color-mix(in srgb, var(--cw-primary) 11%, var(--cw-surface)); }
.tabulator-row.tabulator-group span.cw-gval { margin-right: .5rem; }
.tabulator-row.tabulator-group .cw-gcount { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; border-radius: 1rem; background: rgba(var(--cw-primary-rgb), .15); color: var(--cw-primary); font-size: .72rem; text-align: center; margin-right: .75rem; }
.tabulator-row.tabulator-group .cw-gsum { font-weight: 500; color: var(--cw-muted); font-size: .76rem; margin-right: .9rem; }
.tabulator .tabulator-placeholder .tabulator-placeholder-contents { color: var(--cw-muted); font-size: .9rem; font-weight: 400; }
.tabulator .tabulator-placeholder .cw-empty { padding: 2.5rem 1rem; }
.tabulator .tabulator-col-resize-handle:hover { background: rgba(var(--cw-primary-rgb), .3); }
.tabulator-row .tabulator-cell.cw-money, .tabulator .cw-money { font-variant-numeric: tabular-nums; }
.tabulator-row .tabulator-cell { font-variant-numeric: tabular-nums; }
.tabulator .cw-selcol .tabulator-col-content, .tabulator-row .cw-selcol { padding-left: .3rem; padding-right: .3rem; }
.tabulator-row .cw-actcol .btn-icon { padding: .1rem .35rem; }
.tabulator-row .tabulator-cell .badge { font-weight: 600; font-size: .7rem; }
.tabulator-row .tabulator-cell a { text-decoration: none; }
.tabulator-tooltip { background: var(--cw-text); color: var(--cw-surface); font-size: .76rem; border-radius: .35rem; padding: .35rem .5rem; white-space: pre-line; max-width: 320px; }
.tabulator-edit-list, .tabulator-popup-container { background: var(--cw-surface); color: var(--cw-text); border-color: var(--cw-border); }
.tabulator-edit-list .tabulator-edit-list-item.active, .tabulator-edit-list .tabulator-edit-list-item.focused { background: var(--cw-primary); color: #fff; }
.tabulator-row .tabulator-cell.tabulator-editing { border: 1px solid var(--cw-primary); padding: 0; }
.tabulator-row .tabulator-cell.tabulator-editing input, .tabulator-row .tabulator-cell.tabulator-editing select { background: var(--cw-surface); color: var(--cw-text); }
.cw-grid.cw-loading, .cw-gridwrap.cw-loading { position: relative; }
.cw-grid.cw-loading::after, .cw-gridwrap.cw-loading::after {
    content: ""; position: absolute; inset: 0; z-index: 20; border-radius: var(--cw-radius);
    background: color-mix(in srgb, var(--cw-surface) 55%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%232949c6' stroke-width='4' stroke-linecap='round' stroke-dasharray='90 60'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center 90px no-repeat;
}

/* row states used by page scripts */
.tabulator-row.cw-row-warn, .cw-row-warn { background: color-mix(in srgb, #f59e0b 10%, var(--cw-surface)) !important; }
.tabulator-row.cw-row-dirty, .cw-row-dirty { background: color-mix(in srgb, var(--cw-primary) 8%, var(--cw-surface)) !important; box-shadow: inset 3px 0 0 var(--cw-primary); }
.tabulator-row.cw-row-locked, .cw-row-locked { color: var(--cw-muted); }
.tabulator-row.cw-row-locked:hover { cursor: not-allowed; }
.tabulator-row.cw-row-muted, .cw-row-muted { opacity: .55; }
.tabulator-row.cw-row-active, .cw-row-active { background: rgba(var(--cw-primary-rgb), .14) !important; box-shadow: inset 3px 0 0 var(--cw-primary); }
.tabulator-row .tabulator-cell.cw-editable, .cw-editable, .tabulator-row .tabulator-cell.cw-editcell, .cw-editcell { cursor: text; background-image: linear-gradient(to right, rgba(var(--cw-primary-rgb), .45) 50%, transparent 50%); background-size: 6px 1px; background-repeat: repeat-x; background-position: 0 calc(100% - 3px); }
.tabulator-row .tabulator-cell.cw-editable:hover, .tabulator-row .tabulator-cell.cw-editcell:hover { background-color: rgba(var(--cw-primary-rgb), .06); }
.tabulator-row .tabulator-cell.cw-dirty, .cw-dirty { background-color: color-mix(in srgb, #facc15 26%, var(--cw-surface)) !important; }
.cw-scrollbox { max-height: 50vh; overflow: auto; border: 1px solid var(--cw-border); border-radius: .45rem; }
.cw-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--cw-border); vertical-align: -2px; }
.cw-pivot { min-height: 120px; }

/* ------------------------------------------------------------------ attendance */
.st { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: .3rem; color: #fff; background: var(--st-c, #64748b); line-height: 1.4; }
.st-PR { --st-c: var(--st-PR); } .st-HD { --st-c: var(--st-HD); } .st-AB { --st-c: var(--st-AB); } .st-WO { --st-c: var(--st-WO); }
.st-PH { --st-c: var(--st-PH); } .st-LV { --st-c: var(--st-LV); } .st-MP { --st-c: var(--st-MP); } .st-WOP { --st-c: var(--st-WOP); }
.st-PHP { --st-c: var(--st-PHP); } .st-CO { --st-c: var(--st-CO); } .st-NA { --st-c: #94a3b8; }
.cw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; font-size: .74rem; margin: .1rem 0 .55rem; }
.cw-legend .st { font-weight: 500; }
.cw-lock-key { color: var(--cw-muted); white-space: nowrap; }

.cw-daycards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .45rem; margin-bottom: .7rem; }
.cw-daycard {
    --st-c: var(--cw-primary);
    display: flex; flex-direction: column; align-items: flex-start; padding: .45rem .65rem; text-align: left;
    background: var(--cw-surface); border: 1px solid var(--cw-border); border-left: 3px solid var(--st-c); border-radius: .45rem; color: var(--cw-text);
}
button.cw-daycard:hover { background: color-mix(in srgb, var(--st-c) 7%, var(--cw-surface)); }
button.cw-daycard.active, button.cw-daycard[aria-pressed=true] { background: color-mix(in srgb, var(--st-c) 14%, var(--cw-surface)); box-shadow: 0 0 0 1px var(--st-c); }
.cw-daycard b { font-size: 1.15rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cw-daycard small { color: var(--cw-muted); font-size: .72rem; }
.cw-daycard.st-PR, .cw-daycard.st-AB, .cw-daycard.st-HD, .cw-daycard.st-LV, .cw-daycard.st-MP, .cw-daycard.st-WO, .cw-daycard.st-PH, .cw-daycard.st-NA { color: var(--cw-text); background-color: var(--cw-surface); }
/* total present (everyone who came) */
.cw-daycard.st-IN { --st-c: var(--st-PR); color: var(--cw-text); background-color: color-mix(in srgb, var(--st-PR) 9%, var(--cw-surface)); border-left-width: 4px; }
.cw-daycard.st-IN b { color: var(--st-PR); }

/* month grid */
.cw-month .tabulator-row { --cw-row-h: 30px; }
.cw-month .tabulator-col.cw-dc .tabulator-col-content { padding: .25rem 0; }
.cw-month .tabulator-header .tabulator-col.cw-dc .tabulator-col-title { text-align: center; }
.cw-dh { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.cw-dh b { font-size: .8rem; }
.cw-dh small { font-size: .62rem; color: var(--cw-muted); font-weight: 500; }
.cw-dh.is-sun b, .cw-dh.is-sun small { color: #dc2626; }
.cw-dh.is-ph b { color: var(--st-PH); }
.tabulator-row .tabulator-cell.cw-dc { padding: 2px 1px; position: relative; text-align: center; overflow: visible; }
.tabulator-row .tabulator-cell.cw-dc.is-sun { background: color-mix(in srgb, #dc2626 4%, transparent); }
.tabulator-row .tabulator-cell.cw-dc.is-ph { background: color-mix(in srgb, var(--st-PH) 7%, transparent); }
.tabulator-row .tabulator-cell.cw-dc:hover { outline: 1px solid rgba(var(--cw-primary-rgb), .5); outline-offset: -1px; cursor: pointer; }
.cw-mc { display: inline-block; min-width: 28px; padding: 1px 2px; border-radius: .25rem; font-size: .68rem; font-weight: 700; line-height: 1.35; color: #fff; background: var(--st-c, #94a3b8); }
.cw-mc.cw-mc-io { font-size: .6rem; font-weight: 600; line-height: 1.15; padding: 1px; }
.cw-month-io .tabulator-row { --cw-row-h: 40px; }
.cw-mc-none { color: var(--cw-muted); }
.cw-mc-lock, .cw-mc-ok { position: absolute; top: 0; right: 1px; font-size: .52rem; }
.cw-mc-lock { color: var(--cw-muted); }
.cw-mc-ok { color: #16a34a; }
.cw-mc-otp, .cw-mc-man, .cw-mc-dirty { position: absolute; width: 5px; height: 5px; border-radius: 50%; }
.cw-mc-otp { bottom: 1px; right: 2px; background: #7c3aed; }
.cw-mc-man { bottom: 1px; left: 2px; background: #f59e0b; }
.cw-mc-dirty { top: 1px; left: 2px; width: 7px; height: 7px; background: var(--cw-primary); box-shadow: 0 0 0 1.5px var(--cw-surface); }
.tabulator-row .tabulator-cell.cw-msum { background: color-mix(in srgb, var(--cw-surface-2) 70%, transparent); font-weight: 600; }
.tabulator-row .tabulator-cell.cw-msum.cw-msum-tp { color: var(--st-PR); background: color-mix(in srgb, var(--st-PR) 9%, var(--cw-surface)); }
.cw-cal { margin-top: .5rem; }
.cw-cal [data-day] { background: var(--cw-surface); transition: box-shadow .12s; }
.cw-cal [data-day]:hover, .cw-cal [data-day]:focus-visible { box-shadow: 0 0 0 2px rgba(var(--cw-primary-rgb), .35); }

/* ------------------------------------------------------------------ documents */
.cw-drop { padding: .7rem .8rem; border: 1.5px dashed var(--cw-border); border-radius: var(--cw-radius); background: var(--cw-surface); transition: border-color .15s, background-color .15s; }
.cw-drop.is-over, .cw-drop.cw-over, .cw-over { border-color: var(--cw-primary); background: rgba(var(--cw-primary-rgb), .06); }
.cw-doctable { font-size: .84rem; }
.cw-doctable th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cw-muted); font-weight: 600; }
.cw-docs-missing:empty { display: none; }

/* ------------------------------------------------------------------ reports list */
.cw-reports { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .65rem; }
.cw-report {
    display: flex; flex-direction: column; gap: .2rem; padding: .75rem .85rem; color: var(--cw-text) !important; text-decoration: none !important;
    background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); box-shadow: var(--cw-shadow); transition: border-color .12s, transform .12s;
}
.cw-report:hover { border-color: rgba(var(--cw-primary-rgb), .55); transform: translateY(-1px); }
.cw-report-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .2rem; }
.cw-report-top i { font-size: 1.2rem; color: var(--cw-primary); }
.cw-report b { font-size: .9rem; font-weight: 600; }
.cw-report small { color: var(--cw-muted); font-size: .76rem; }
.cw-filter-extra { margin-top: -.3rem; }

/* ------------------------------------------------------------------ rights grid */
.cw-rights-wrap { max-height: 65vh; overflow: auto; }
.cw-rights { font-size: .82rem; margin: 0; }
.cw-rights th, .cw-rights td { text-align: center; vertical-align: middle; padding: .22rem .3rem; border-color: var(--cw-border); }
.cw-rights thead th { position: sticky; top: 0; z-index: 2; background: var(--cw-surface-2); font-size: .7rem; font-weight: 600; color: var(--cw-muted); white-space: nowrap; }
.cw-rights .cw-rights-title { text-align: left; white-space: nowrap; min-width: 220px; position: sticky; left: 0; background: var(--cw-surface); z-index: 1; }
.cw-rights thead .cw-rights-title { z-index: 3; background: var(--cw-surface-2); }
.cw-rights-group td, .cw-rights-group th { text-align: left !important; background: var(--cw-surface-2) !important; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--cw-muted); }
.cw-rbit { border: 0; background: none; padding: .2rem .35rem; border-radius: .3rem; line-height: 1; color: var(--cw-muted); font-size: .95rem; }
.cw-rbit:hover { background: var(--cw-surface-2); }
.cw-rbit:focus-visible { outline: 2px solid rgba(var(--cw-primary-rgb), .6); }
.cw-rbit .bi-check-square-fill, .cw-rbit .text-success { color: #16a34a; }
.cw-rcol { cursor: pointer; }
.cw-rcol:hover { background: rgba(var(--cw-primary-rgb), .1) !important; color: var(--cw-primary) !important; }

/* ------------------------------------------------------------------ hover card */
.cw-hover {
    position: absolute; z-index: 1085; width: 330px; max-width: calc(100vw - 16px); font-size: .82rem;
    background: var(--cw-surface); color: var(--cw-text); border: 1px solid var(--cw-border); border-radius: .7rem; box-shadow: var(--cw-shadow-lg); overflow: hidden;
    animation: cw-pop .12s ease;
}
@keyframes cw-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hc-loading { padding: .75rem 1rem; }
.hc-head { display: flex; gap: .75rem; padding: .75rem .9rem; background: linear-gradient(135deg, rgba(var(--cw-primary-rgb), .1), transparent); border-bottom: 1px solid var(--cw-border); }
.hc-photo { width: 52px; height: 62px; border-radius: .45rem; object-fit: cover; border: 1px solid var(--cw-border); background: var(--cw-surface-2); flex: none; }
.hc-icon { width: 46px; height: 46px; border-radius: .6rem; display: grid; place-items: center; font-size: 1.3rem; color: var(--cw-primary); background: rgba(var(--cw-primary-rgb), .12); flex: none; }
.hc-title { font-weight: 650; font-size: .95rem; line-height: 1.2; }
.hc-sub { color: var(--cw-muted); font-size: .75rem; font-family: var(--cw-mono); margin: .1rem 0 .25rem; }
.hc-head .badge, .hc-head .st { font-size: .66rem; }
.hc-body { padding: .45rem .9rem; }
.hc-row { display: grid; grid-template-columns: 18px 92px 1fr; gap: .3rem; padding: .16rem 0; align-items: baseline; }
.hc-row i { color: var(--cw-muted); }
.hc-l { color: var(--cw-muted); }
.hc-v { min-width: 0; overflow-wrap: anywhere; }
.hc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); border-top: 1px solid var(--cw-border); }
.hc-stats > div { padding: .45rem .3rem; text-align: center; border-right: 1px solid var(--cw-border); }
.hc-stats > div:last-child { border-right: 0; }
.hc-stats b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.hc-stats small { color: var(--cw-muted); font-size: .66rem; }
.hc-foot { display: flex; gap: 1rem; padding: .45rem .9rem; background: var(--cw-surface-2); border-top: 1px solid var(--cw-border); font-size: .78rem; }

/* ------------------------------------------------------------------ toasts, palette, help, idle */
.cw-toasts { z-index: 1100; }
.cw-toast { background: var(--cw-surface); color: var(--cw-text); box-shadow: var(--cw-shadow-lg); border-left: 4px solid var(--t, #16a34a) !important; min-width: 300px; }
.cw-toast .toast-body i { color: var(--t); }
.cw-toast-success { --t: #16a34a; } .cw-toast-danger { --t: #dc2626; } .cw-toast-warning { --t: #d97706; } .cw-toast-info { --t: #0ea5e9; }

.cw-palette-dialog { margin-top: 9vh; }
.cw-palette-input { display: flex; align-items: center; gap: .6rem; padding: .35rem .9rem; border-bottom: 1px solid var(--cw-border); }
.cw-palette-input > i { color: var(--cw-muted); font-size: 1.1rem; }
.cw-palette-input input { box-shadow: none !important; background: transparent; }
#paletteList { max-height: 60vh; }
.cw-pal-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .9rem; border-color: var(--cw-border); background: var(--cw-surface); color: var(--cw-text); text-decoration: none !important; }
.cw-pal-item > i { font-size: 1.05rem; color: var(--cw-muted); width: 1.3rem; text-align: center; }
.cw-pal-item.active, .cw-pal-item:hover { background: rgba(var(--cw-primary-rgb), .1); color: var(--cw-text); border-color: var(--cw-border); }
.cw-pal-item.active > i { color: var(--cw-primary); }
.cw-pal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cw-pal-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-pal-title b { font-family: var(--cw-mono); font-size: .82em; color: var(--cw-primary); }
.cw-pal-sub { font-size: .74rem; color: var(--cw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-pal-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cw-muted); }

.cw-help { --bs-offcanvas-width: 100vw; }
/* help window: 80% of the screen on a PC (full width on a phone) */
@media (min-width: 768px) { .cw-help { --bs-offcanvas-width: 80vw; } .cw-help .offcanvas-body { font-size: .92rem; padding: 1rem 1.5rem; } }
/* F1 help is always in front: above the page, every modal (1055), drawer, dropdown (1090) and hover card */
.cw-help.offcanvas, .cw-help.offcanvas.showing, .cw-help.offcanvas.show { z-index: 1095; box-shadow: -12px 0 32px rgba(10, 15, 30, .22); }
.cw-help .offcanvas-body { font-size: .88rem; line-height: 1.55; }
.cw-help .offcanvas-body h2 { font-size: 1rem; font-weight: 650; margin: 1.1rem 0 .4rem; }
.cw-help .offcanvas-body h3 { font-size: .9rem; font-weight: 650; margin: .9rem 0 .3rem; }
.cw-help .offcanvas-body ul, .cw-help .offcanvas-body ol { padding-left: 1.2rem; }
.cw-help .offcanvas-body li { margin-bottom: .25rem; }
.cw-help .offcanvas-body .tip { padding: .5rem .7rem; border-left: 3px solid var(--cw-accent); background: color-mix(in srgb, var(--cw-accent) 8%, transparent); border-radius: .3rem; margin: .6rem 0; }
.cw-help .offcanvas-body .warn { padding: .5rem .7rem; border-left: 3px solid #d97706; background: color-mix(in srgb, #d97706 8%, transparent); border-radius: .3rem; margin: .6rem 0; }
.cw-help .offcanvas-body table { width: 100%; font-size: .82rem; margin: .5rem 0; }
.cw-help .offcanvas-body td, .cw-help .offcanvas-body th { padding: .25rem .4rem; border-bottom: 1px solid var(--cw-border); vertical-align: top; }
.cw-help .offcanvas-body .ex { padding: .5rem .7rem; border: 1px dashed var(--cw-border); background: color-mix(in srgb, #16a34a 6%, transparent); border-radius: .3rem; margin: .6rem 0; }
.cw-help .offcanvas-body .ex > strong:first-child { display: block; color: #15803d; margin-bottom: .2rem; }
.cw-help .offcanvas-body table.fields th { background: color-mix(in srgb, var(--cw-accent) 8%, transparent); }
.cw-help .offcanvas-body table.fields td:first-child { font-weight: 600; white-space: nowrap; }
.cw-help .offcanvas-body code { font-size: .8rem; }
.cw-help .offcanvas-body details { margin: .4rem 0; } .cw-help .offcanvas-body summary { cursor: pointer; font-weight: 600; }

.cw-idle { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(10, 15, 30, .55); backdrop-filter: blur(3px); }
.cw-idle[hidden] { display: none; }
.cw-idle-box { max-width: 380px; text-align: center; padding: 1.6rem 1.5rem; background: var(--cw-surface); border-radius: .9rem; box-shadow: var(--cw-shadow-lg); }
.cw-idle-box > i { font-size: 2.2rem; color: #d97706; }
.cw-idle-box p { margin: .75rem 0 1rem; }

.cw-keys td { padding: .45rem .9rem; }

/* ------------------------------------------------------------------ login / bare pages */
body.cw-bare { background: var(--cw-bg); }
/* full-screen site photo / drawing, tinted with the theme colours */
.cw-login {
    min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); position: relative; isolation: isolate;
    background: #eef2f6 url(/img/login-bg.svg) right bottom / cover no-repeat;
}
/* a real photo (wwwroot/img/login-bg*.jpg): shown faded */
.cw-login.has-photo { background-position: center; background-size: cover; }
.cw-login.has-photo::before {
    background:
        linear-gradient(100deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .7) 34%, rgba(255, 255, 255, .22) 56%, rgba(255, 255, 255, .08) 100%),
        linear-gradient(0deg, rgba(var(--cw-primary-rgb), .08), rgba(var(--cw-primary-rgb), 0));
}
[data-bs-theme=dark] .cw-login.has-photo::before {
    background:
        linear-gradient(100deg, rgba(10, 12, 16, .92) 0%, rgba(10, 12, 16, .8) 40%, rgba(10, 12, 16, .6) 100%),
        linear-gradient(0deg, rgba(var(--cw-primary-rgb), .22), rgba(var(--cw-primary-rgb), .06));
}
.cw-login::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .8) 36%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(0deg, rgba(var(--cw-primary-rgb), .10), rgba(var(--cw-accent-rgb), .06));
}
[data-bs-theme=dark] .cw-login::before {
    background:
        linear-gradient(100deg, rgba(10, 12, 16, .88) 0%, rgba(10, 12, 16, .7) 42%, rgba(10, 12, 16, .45) 70%, rgba(10, 12, 16, .55) 100%),
        linear-gradient(0deg, rgba(var(--cw-primary-rgb), .25), rgba(var(--cw-accent-rgb), .12));
}
.cw-login-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2.4rem 3.2rem; color: #1f2937; min-width: 0; }
.cw-login-brand { display: flex; align-items: center; gap: .9rem; }
.cw-login-logo { width: 56px; height: 56px; border-radius: .9rem; background: #fff; padding: 6px; object-fit: contain; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.cw-login-brand b { display: block; font-size: 1.15rem; color: #111827; letter-spacing: .01em; }
.cw-login-brand small { color: #6b7280; font-size: .82rem; }
.cw-login-brand b { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.cw-login-brand b span { color: var(--cw-primary); }
.cw-login-logo { padding: 0; background: transparent; box-shadow: 0 8px 22px rgba(15, 23, 42, .22); border-radius: 1rem; }
.cw-login-hero { max-width: 560px; margin: 2rem 0; }
.cw-login-kicker { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 99px; font-size: .78rem; font-weight: 600;
                   letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(var(--cw-primary-rgb), .85); box-shadow: 0 6px 18px rgba(var(--cw-primary-rgb), .35); }
.cw-login-hero h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); font-weight: 800; color: #111827; line-height: 1.12; margin: 1rem 0 .8rem; }
.cw-login.has-photo .cw-login-hero h2, .cw-login.has-photo .cw-login-brand b { text-shadow: 0 1px 12px rgba(255, 255, 255, .9); }
.cw-login.has-photo .cw-login-hero p { color: #1f2937; text-shadow: 0 1px 8px rgba(255, 255, 255, .95); }
.cw-login-hero h2 span { color: var(--cw-primary); }
.cw-login-hero p { color: #4b5563; font-size: 1.02rem; margin: 0 0 1.6rem; max-width: 470px; }
.cw-login-points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; max-width: 560px; }
.cw-login-points li { display: flex; gap: .7rem; align-items: center; font-size: .88rem; padding: .7rem .8rem; border-radius: .8rem; color: #1f2937;
                      background: rgba(255, 255, 255, .75); border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 4px 14px rgba(15, 23, 42, .06); backdrop-filter: blur(6px); }
.cw-login-points i { width: 36px; height: 36px; border-radius: .6rem; display: grid; place-items: center; flex: none; color: #fff; font-size: 1.05rem;
                     background: linear-gradient(135deg, var(--cw-primary), rgba(var(--cw-accent-rgb), .9)); }
.cw-login-foot { font-size: .78rem; color: #6b7280; }
[data-bs-theme=dark] .cw-login-art { color: #eef1f6; }
[data-bs-theme=dark] .cw-login-brand b, [data-bs-theme=dark] .cw-login-hero h2 { color: #fff; }
[data-bs-theme=dark] .cw-login-hero h2 span { color: var(--cw-side-stripe); }
[data-bs-theme=dark] .cw-login-hero p, [data-bs-theme=dark] .cw-login-brand small, [data-bs-theme=dark] .cw-login-foot { color: #c9ced8; }
[data-bs-theme=dark] .cw-login-points li { color: #eef1f6; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.cw-login-form { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1.5rem; }
.cw-login-maker { display: flex; align-items: center; gap: .7rem; padding: .55rem 1rem; border-radius: .8rem; 
                  background: rgba(255, 255, 255, .85); box-shadow: 0 6px 20px rgba(15, 23, 42, .12); backdrop-filter: blur(8px); }
.cw-login-maker span { font-size: .72rem; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.cw-login-maker img { height: 30px; width: auto; display: block; }
.cw-login-card {
    width: 100%; max-width: 420px; padding: 2.2rem 2rem 1.6rem; border-radius: 1.2rem; position: relative; overflow: hidden;
    background: color-mix(in srgb, var(--cw-surface) 94%, transparent); backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .06);
}
.cw-login-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--cw-primary), var(--cw-accent)); }
.cw-login-card h1 { font-size: 1.65rem; font-weight: 800; margin-bottom: .25rem; }
.cw-login-card .input-group-text { background: var(--cw-surface-2); color: var(--cw-muted); }
.cw-login-card .form-control { padding-top: .6rem; padding-bottom: .6rem; }
.cw-login-card .form-control:focus { border-color: var(--cw-primary); box-shadow: 0 0 0 .2rem rgba(var(--cw-primary-rgb), .18); }
.cw-login-card .btn-primary { background: linear-gradient(135deg, var(--cw-primary), var(--cw-primary-dark)); border: 0; font-weight: 600; letter-spacing: .01em;
                              box-shadow: 0 10px 24px rgba(var(--cw-primary-rgb), .35); }
[data-bs-theme=dark] .cw-login-card .btn-primary { color: #111318; }
.cw-login-themes { display: flex; align-items: center; gap: .5rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--cw-border); flex-wrap: wrap; }
.cw-login-themes > span { font-size: .78rem; color: var(--cw-muted); margin-right: .2rem; }
.cw-login-themes button { border: 0; padding: 0; background: none; border-radius: 50%; line-height: 0; }
.cw-login-themes button.active .cw-tswatch { box-shadow: 0 0 0 2px var(--cw-surface), 0 0 0 4px var(--cw-primary); }
.cw-login-themes .cw-mode { margin-left: auto; color: var(--cw-muted); font-size: 1.1rem; line-height: 1; padding: .25rem; }
@media (max-width: 991.98px) {
    .cw-login { grid-template-columns: 1fr; align-content: start; background-position: 70% bottom; }
    .cw-login::before, .cw-login.has-photo::before { background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .7) 40%, rgba(255, 255, 255, .25) 100%); }
    .cw-login-art { padding: 1.4rem 1.25rem 0; }
    .cw-login-hero { margin: 1.2rem 0 0; }
    .cw-login-hero h2 { font-size: 1.6rem; }
    .cw-login-points, .cw-login-foot { display: none; }
    .cw-login-form { padding: 1.2rem 1rem 2rem; }
    .cw-login-card { padding: 1.8rem 1.25rem 1.3rem; }
}

/* ------------------------------------------------------------------ misc page bits */
.cw-openitems:empty { display: none; }
.cw-openitems { font-size: .84rem; }
.modal .cw-gridbar { border-radius: .4rem .4rem 0 0; }
@media (max-width: 575.98px) {
    .cw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .cw-kpi { padding: .6rem .65rem; gap: .5rem; }
    .cw-kpi > i { width: 32px; height: 32px; font-size: 1rem; }
    .cw-kpi > div > span { font-size: 1.1rem; }
    .cw-f, .cw-filter-item, .cw-f-lg { flex: 1 1 100%; min-width: 0; }
    .cw-f-sm { flex: 0 0 90px; }
    .cw-gsearch { flex: 1 1 100%; }
    .cw-record { padding: .7rem; }
    .cw-title h1 { font-size: 1rem; }
}

@media print {
    .cw-side, .cw-top, .cw-bottom, .cw-gridbar, .cw-toolbar, .cw-filter, .toast-container { display: none !important; }
    .cw-main { margin: 0 !important; }
    .cw-content { padding: 0; }
    body { background: #fff; }
}

/* ---------- search box under the page title ---------- */
.cw-top-search { position: relative; flex: 0 1 380px; min-width: 200px; }
.cw-top-search > .bi-search { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--cw-muted); pointer-events: none; font-size: .85rem; }
.cw-top-search input { padding-left: 1.9rem; padding-right: 2rem; border-radius: 999px; background: var(--cw-surface-2); border-color: var(--cw-border); }
.cw-top-search input:focus { background: var(--cw-surface); }
.cw-top-search > kbd { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-size: .68rem; padding: .05rem .35rem; opacity: .6; pointer-events: none; }
.cw-top-search input:focus ~ kbd { display: none; }
.cw-top-results { position: absolute; top: calc(100% + 6px); left: 0; width: min(560px, 90vw); max-height: 70vh; overflow-y: auto; z-index: 1060;
    background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); box-shadow: var(--cw-shadow-lg); }
.cw-top-results.cw-loading-list { opacity: .75; }
.cw-top-results .cw-pal-item { display: flex; align-items: center; gap: .6rem; }
@media (max-width: 1100px) { .cw-top-search { flex-basis: 260px; } }

/* ---------- labour holidays ---------- */
.cw-ph-h { display: flex; flex-direction: column; align-items: center; line-height: 1.15; white-space: normal; text-align: center; cursor: pointer; }
.cw-ph-h small { font-size: .66rem; font-weight: 400; color: var(--cw-muted); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-ph-h .badge { font-size: .58rem; margin-top: 2px; }
.cw-ph-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--cw-muted); }

/* ---------- a record opened from search (?find=) ---------- */
.tabulator-row.cw-found { outline: 2px solid var(--cw-accent); outline-offset: -2px; background: color-mix(in srgb, var(--cw-accent) 10%, var(--cw-surface)) !important; }

/* Rota / Schedule Setup: labour rows x 28 days */
.cw-rota-wrap { overflow: auto; max-height: calc(100vh - 330px); min-height: 220px; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.cw-rota { font-size: .78rem; border-collapse: separate; border-spacing: 0; }
.cw-rota th, .cw-rota td { padding: 2px !important; white-space: nowrap; }
.cw-rota thead th { position: sticky; top: 0; z-index: 3; background: var(--bs-tertiary-bg); }
.cw-rota thead tr:nth-child(2) th { top: 26px; }
.cw-rota .cw-rs { position: sticky; z-index: 2; background: var(--bs-body-bg); text-align: left; }
.cw-rota thead .cw-rs { z-index: 4; background: var(--bs-tertiary-bg); }
.cw-rota .cw-rs0 { left: 0; width: 28px; }
.cw-rota .cw-rs1 { left: 28px; width: 80px; min-width: 80px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.cw-rota .cw-rs2 { left: 108px; width: 160px; min-width: 160px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; border-right: 2px solid var(--bs-border-color); }
.cw-rota td.wk-start, .cw-rota th.wk-start { border-left: 2px solid var(--bs-secondary-color) !important; }
.cw-rota select { -webkit-appearance: none; appearance: none; text-align: center; text-align-last: center; cursor: pointer; font-size: .76rem; padding: 2px 1px; width: 42px; min-width: 42px; border-radius: 3px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); }
.cw-rota select.v-off { color: #c62828; font-weight: 600; background: rgba(198, 40, 40, .07); }
.cw-rota select.v-at { color: #1565c0; }
.cw-rota select:disabled { opacity: .85; }
.cw-rota th.is-sun { color: #c62828; }
/* one rota per contractor: policy column; labour on a fixed policy (grey, not changed here) */
.cw-rota .cw-rota-pol { position: sticky; left: 268px; z-index: 2; background: var(--bs-body-bg); width: 130px; min-width: 130px; max-width: 130px; white-space: normal !important; line-height: 1.2; border-right: 2px solid var(--bs-border-color); }
.cw-rota thead .cw-rota-pol { z-index: 4; background: var(--bs-tertiary-bg); }
.cw-rota tr.cw-rota-fixed td { background: color-mix(in srgb, var(--bs-secondary-bg) 70%, transparent); color: var(--cw-muted); }
.cw-rota tr.cw-rota-fixed td.cw-rs, .cw-rota tr.cw-rota-fixed td.cw-rota-pol { background: var(--bs-secondary-bg); }
.cw-rota td.cw-rota-fx { width: 42px; min-width: 42px; font-size: .74rem; cursor: not-allowed; }
.cw-rota td.cw-rota-fx.v-off { color: #c62828; opacity: .75; }
.cw-rota-fixed-key { background: var(--bs-secondary-bg); color: var(--cw-muted); padding: 0 .3rem; border-radius: .2rem; }

/* Holidays: 12-month calendar of one year */
.cw-hcal { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.cw-hcal .m { border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .35rem .4rem; background: var(--bs-body-bg); }
.cw-hcal .m h6 { font-size: .8rem; margin: 0 0 .25rem; display: flex; justify-content: space-between; }
.cw-hcal table { width: 100%; font-size: .72rem; text-align: center; border-collapse: collapse; }
.cw-hcal th { color: var(--bs-secondary-color); font-weight: 500; }
.cw-hcal td { padding: 1px 0; border-radius: 3px; }
.cw-hcal td.sun { color: #c62828; }
.cw-hcal td.hol { background: #2e7d32; color: #fff; font-weight: 600; cursor: pointer; }
.cw-hcal td.hol.opt { background: #f9a825; color: #222; }
.cw-hcal td.hol.loc { background: #1565c0; }
.cw-hcal td.today { outline: 2px solid var(--bs-primary); }
.cw-hcal td.add { cursor: pointer; }
.cw-hcal td.add:hover { background: var(--bs-tertiary-bg); }

/* secure document viewer (personal documents) */
.cw-docview { user-select: none; -webkit-user-select: none; }
.cw-docview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.cw-docview-pages { max-height: 70vh; overflow: auto; text-align: center; background: var(--cw-surface-2, #f3f4f6); border-radius: .375rem; padding: .75rem; }
.cw-docview-pages canvas { display: block; margin: 0 auto .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.25); background: #fff; pointer-events: none; }
@media print { .cw-docview-modal, .cw-docview-modal + .modal-backdrop, .modal-backdrop { display: none !important; } }

/* ------------------------------------------------------------------ report tabs + pivot (cw-pivot.js) */
.cw-rtabs { margin-bottom: .5rem; }
.cw-rtabs .nav-link { padding: .35rem .9rem; font-size: .88rem; }
.cw-rtabs .nav-link i { margin-right: .3rem; }
.cw-pv-cfg { background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); padding: .6rem .7rem; margin-bottom: .6rem; }
.cw-pv-quick { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.cw-pv-quick .btn { padding: .1rem .5rem; font-size: .78rem; }
.cw-pv-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 767.98px) { .cw-pv-zones { grid-template-columns: 1fr; } }
.cw-pv-zone { border: 1px dashed var(--cw-border); border-radius: var(--cw-radius); padding: .4rem .5rem; min-width: 0; }
.cw-pv-h { font-size: .78rem; font-weight: 600; color: var(--cw-muted); margin-bottom: .25rem; }
.cw-pv-zone ol { list-style: none; padding: 0; margin: 0 0 .35rem; }
.cw-pv-zone li { display: flex; align-items: center; gap: .3rem; padding: .15rem .3rem; margin-bottom: .2rem; border-radius: .3rem;
    background: rgba(var(--cw-primary-rgb), .07); font-size: .84rem; min-height: 1.9rem; }
.cw-pv-zone li.text-muted { background: none; }
.cw-pv-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-pv-btns { display: inline-flex; flex: none; }
.cw-pv-btns .btn { padding: 0 .3rem; line-height: 1.4; }
.cw-pv-agg { width: auto; flex: none; padding-top: 0; padding-bottom: 0; font-size: .78rem; }
.cw-pv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; }
.cw-pv-levels .btn { font-size: .78rem; }
.cw-pv-out .tabulator-row.cw-pv-sub { font-weight: 600; }
.cw-pv-out .tabulator-row.cw-pv-sub1 { background: rgba(var(--cw-primary-rgb), .09); }
.cw-pv-out .tabulator-row.cw-pv-sub2 { background: rgba(var(--cw-primary-rgb), .05); }
.cw-pv-out .tabulator-cell.cw-pv-tot { font-weight: 600; background: rgba(var(--cw-primary-rgb), .04); }
.cw-pv-out .tabulator-calcs-holder { font-weight: 700; }
.cw-pv-out .tabulator-data-tree-control { margin-right: .35rem; }
.cw-pv-out .cw-pv-tog { cursor: pointer; color: var(--cw-primary); margin-right: .35rem; font-size: .8rem; }

/* ------------------------------------------------------------------ punches modal (Daily Attendance) */
.cw-punchday { border: 1px solid var(--cw-border); border-radius: var(--cw-radius); padding: .5rem .65rem; margin-bottom: .6rem; }
.cw-punchday-cur { border-color: rgba(var(--cw-primary-rgb), .6); background: rgba(var(--cw-primary-rgb), .04); }
.cw-punchtable { font-size: .85rem; }
.cw-punchtable th { font-size: .72rem; text-transform: uppercase; color: var(--cw-muted); font-weight: 600; }
.cw-punchbtn { text-decoration: none; font-size: .85rem; }

/* ------------------------------------------------------------------ punch log (Attendance > Punch Import) */
.cw-pchips, #pChips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.cw-pchip { display: inline-flex; gap: .3rem; align-items: baseline; padding: .15rem .55rem; border: 1px solid var(--cw-border); border-radius: 999px;
    background: var(--cw-surface); font-size: .8rem; color: var(--cw-text); }
.cw-pchip b { font-weight: 700; }
button.cw-pchip { cursor: pointer; }
.cw-pchip-bad { border-color: rgba(220, 38, 38, .45); color: #b91c1c; background: rgba(220, 38, 38, .06); }
.tabulator-row.cw-row-unknown .tabulator-cell { color: #b91c1c; }
.cw-upsteps { padding-left: 1.1rem; color: var(--cw-muted); }
.cw-upsteps li { margin-bottom: .15rem; }

/* ---------- Leave: apply popup side panel, Leave Credit months ---------- */
.cw-lv-side { background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .6rem .7rem; }
.cw-baltab tr[data-lt] { cursor: pointer; }
.cw-lc-months { display: grid; grid-template-columns: repeat(13, minmax(64px, 1fr)); gap: 6px; }
@media (max-width: 992px) { .cw-lc-months { grid-template-columns: repeat(7, minmax(60px, 1fr)); } }
@media (max-width: 576px) { .cw-lc-months { grid-template-columns: repeat(4, minmax(60px, 1fr)); } }
.cw-lc-m, .cw-lc-ye { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: .5rem;
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); font-size: .85rem; line-height: 1.2; }
.cw-lc-m small, .cw-lc-ye small { font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; }
.cw-lc-m:hover:not(:disabled) { border-color: var(--bs-primary); box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .15); }
.cw-lc-m.done, .cw-lc-ye.done { background: rgba(var(--bs-success-rgb), .1); border-color: rgba(var(--bs-success-rgb), .45); }
.cw-lc-m.done small, .cw-lc-ye.done small { color: var(--bs-success-text-emphasis); }
.cw-lc-m.todo { border-style: dashed; border-color: rgba(var(--bs-warning-rgb), .8); }
.cw-lc-m.todo small { color: var(--bs-warning-text-emphasis); }
.cw-lc-m.open small { font-style: italic; }
.cw-lc-m.future { opacity: .45; }
.cw-lc-ye { border-style: dotted; }
/* leave card summary boxes */
.cw-lcard { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .35rem .6rem; min-width: 150px; font-size: .82rem; background: var(--bs-body-bg); }
.cw-lcard > div { display: flex; justify-content: space-between; gap: 10px; }
.cw-lcard > div span { color: var(--bs-secondary-color); }
.cw-lcard-h { font-weight: 700; font-size: .95rem; border-bottom: 1px solid var(--bs-border-color); margin-bottom: 2px; }
.cw-lcard-bal { border-top: 1px dashed var(--bs-border-color); margin-top: 2px; padding-top: 2px; }
.cw-lcard-bal b { font-size: .95rem; }
.cw-lc-tabs .nav-link { padding: .25rem .7rem; font-size: .875rem; }
/* punch set aside (att.RawPunchIgnore) */
.tabulator-row.cw-row-ignored .tabulator-cell { color: var(--bs-secondary-color); background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(var(--bs-danger-rgb), .05) 8px 12px); }
.cw-punch-ignored td { color: var(--bs-secondary-color); text-decoration: line-through; }
/* leave applied / regularisation asked (attendance grids) */
.cw-req { font-weight: 500; font-size: .72rem; margin: 1px 0; white-space: normal; text-align: left; }
.cw-req-p { background: color-mix(in srgb, #ea580c 14%, transparent); color: #c2410c; border: 1px solid color-mix(in srgb, #ea580c 40%, transparent); }
.cw-req-a { background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; border: 1px solid color-mix(in srgb, #16a34a 35%, transparent); }
[data-bs-theme=dark] .cw-req-p { color: #fdba74; }
[data-bs-theme=dark] .cw-req-a { color: #86efac; }
.cw-mc-req { position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 0; border-color: #2563eb transparent transparent transparent; }
.cw-mc-req.is-p { border-color: #ea580c transparent transparent transparent; }
.cw-mc-dirty { left: calc(50% - 3px); }
.cw-mc .cw-mc-otv { font-weight: 700; margin-left: 2px; color: #fde68a; }
/* hint at the end of a filter row (PC only) */
.cw-f.cw-f-note { flex: 1 1 100%; flex-direction: row; align-items: center; min-width: 0; margin-top: -.15rem; line-height: 1.25; }
/* edit buttons moved into the filter box on a PC (data-filter-slot): filters left (wide), buttons right (narrow) */
.cw-f-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem .75rem; flex: 1 1 auto; min-width: 0; }
.cw-filter.cw-filter-2col { flex-wrap: nowrap; align-items: stretch; gap: .75rem; }
.cw-filter-2col .cw-f-fields .cw-f-lg { flex: 1 1 200px; min-width: 190px; max-width: 300px; }
.cw-filter-2col .cw-f-fields .cw-f-date { min-width: 0; width: 118px; }
.cw-f-actions.in-filters { margin: 0; padding: 0 0 0 .75rem; flex: 0 0 auto; max-width: 390px; display: flex; flex-wrap: wrap; align-content: center;
    align-items: center; gap: .4rem; border-left: 1px solid var(--bs-border-color); }
.cw-f-actions.in-filters > span { flex: 1 1 100%; white-space: nowrap; }
.cw-f-actions.in-filters .btn { white-space: nowrap; }
/* tighter space between the filter row, the cards / toolbar and the grid */
.cw-filter { margin-bottom: .45rem; }
.cw-daycards { margin-bottom: .45rem; }
/* day cards as one thin line on a PC: number and label side by side (grid gets the height) */
@media (min-width: 768px) {
    .cw-daycards { display: flex; flex-wrap: nowrap; gap: .3rem; overflow-x: auto; scrollbar-width: thin; }
    .cw-daycard { flex: 1 0 auto; flex-direction: row; align-items: baseline; justify-content: center; gap: .3rem; padding: .16rem .45rem; border-radius: .35rem; white-space: nowrap; }
    .cw-daycard b { font-size: .9rem; line-height: 1.2; }
    .cw-daycard small { font-size: .7rem; }
}
.cw-toolbar { margin-bottom: .4rem; }
.cw-toolbar .cw-legend { margin: 0; }
.cw-daycards:empty, .cw-toolbar:empty { display: none; }

/* =====================================================================
   COMPACT LAYOUT ON A PC: less space around the page, boxes, notes, tabs and cards,
   so the main grid gets the height of the screen for the records.
   ===================================================================== */
@media (min-width: 768px) {
    :root { --cw-top-h: 50px; }
    .cw-content { padding: .6rem 1rem .75rem; }
    .cw-filter { padding: .45rem .7rem; gap: .35rem .6rem; margin-bottom: .4rem; }
    .cw-f-fields { gap: .35rem .6rem; }
    .cw-f .form-label, .cw-filter-item .form-label { font-size: .68rem; margin-bottom: .05rem; }
    .cw-f.cw-f-note { margin-top: 0; font-size: .76rem; }
    .cw-toolbar { gap: .35rem; margin-bottom: .35rem; }
    .cw-gridbar { padding: .25rem .4rem; gap: .3rem; }
    .cw-tabs { margin-bottom: .45rem; }
    .cw-tabs .nav-link { padding: .38rem .8rem; }
    .cw-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; margin-bottom: .45rem; }
    .cw-kpi { padding: .4rem .6rem; gap: .5rem; box-shadow: none; }
    .cw-kpi > i { width: 28px; height: 28px; font-size: .9rem; border-radius: .45rem; }
    .cw-kpi > div > span { font-size: 1.02rem; }
    .cw-kpi small { font-size: .7rem; }
    .alert.cw-note, .cw-content > .alert, #page > .alert { padding: .3rem .6rem !important; margin-bottom: .4rem; font-size: .78rem; line-height: 1.35; }

    /* record header (labour, contractor ...): one low strip - name and details on one line, figures below */
    .cw-record { gap: .4rem .8rem; padding: .4rem .7rem; margin-bottom: .45rem; box-shadow: none; flex-wrap: nowrap; align-items: center; }
    .cw-record-photo { width: 40px; height: 48px; border-radius: .35rem; }
    .cw-record-icon { width: 40px; height: 40px; font-size: 1.15rem; border-radius: .5rem; }
    .cw-record-main { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .9rem; flex: 1 1 auto; }
    .cw-record-title { font-size: 1rem; flex-wrap: nowrap; white-space: nowrap; }
    .cw-record-meta { margin-top: 0; font-size: .78rem; gap: .1rem .8rem; }
    .cw-record-stats { margin-top: 0; flex: 1 1 100%; gap: .25rem .35rem; }
    .cw-record-stats > span { font-size: .72rem; padding: .05rem .5rem; }
    .cw-record-actions { flex: 0 0 auto; gap: .3rem; max-width: 46%; justify-content: flex-end; }
}

/* long notes above a grid: one line, "more" opens the rest (cw-core.js) */
.cw-note.cw-clamp { display: flex; align-items: flex-start; gap: .4rem; }
.cw-note.cw-clamp > .cw-clamp-text { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.cw-note.cw-clamp.open > .cw-clamp-text { display: block; }
.cw-note.cw-clamp > .cw-clamp-btn { flex: none; border: 0; background: none; padding: 0 .2rem; font-size: .74rem; color: var(--cw-primary); white-space: nowrap; }

/* figure cards above a grid (Authorise, ...) and the status legend: one thin row on a PC */
@media (min-width: 768px) {
    .cw-kpis.cw-kpis-sm { display: flex; flex-wrap: nowrap; gap: .3rem; overflow-x: auto; scrollbar-width: thin; margin-bottom: .35rem; }
    .cw-kpis-sm .cw-kpi { flex: 1 0 auto; padding: .18rem .5rem; gap: .35rem; border-radius: .35rem; }
    .cw-kpis-sm .cw-kpi::before { width: 2px; }
    .cw-kpis-sm .cw-kpi > i { width: 22px; height: 22px; font-size: .78rem; border-radius: .3rem; }
    .cw-kpis-sm .cw-kpi > div { display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
    .cw-kpis-sm .cw-kpi > div > span { display: inline; font-size: .92rem; }
    .cw-kpis-sm .cw-kpi small { font-size: .7rem; }
    .cw-legend { flex-wrap: nowrap; gap: .2rem; font-size: .68rem; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
    .cw-legend .st { padding: .05rem .35rem; }
    .cw-toolbar .cw-legend { flex: 0 1 auto; min-width: 0; }
    /* in a toolbar the legend shows only the codes (the meaning is in the tooltip) */
    .cw-toolbar .cw-legend .cw-lg-w { display: none; }
}

/* month grid (Monthly Attendance, Monthly Authorisation): lower rows and day headings on a PC - more labour on the screen */
@media (min-width: 768px) {
    .cw-month .tabulator-row { --cw-row-h: 26px; }
    .cw-month-io .tabulator-row { --cw-row-h: 36px; }
    .cw-month .tabulator-row .tabulator-cell { padding-top: 2px; padding-bottom: 2px; }
    .cw-month .tabulator-col.cw-dc .tabulator-col-content { padding: .12rem 0; }
    .cw-dh b { font-size: .74rem; }
    .cw-dh small { font-size: .58rem; }
    .cw-mc { line-height: 1.25; }
}

/* drop-down lists opened in a popup: shown above the popup, never cut off by it */
.ts-dropdown.cw-ts-modal { z-index: 1095; }

/* Overtime: totals as capsules under the buttons */
.cw-otsum .cw-daycard { flex: 0 0 auto; }
.cw-otsum .cw-daycard b { font-size: .86rem; }

/* Labour Wage Sheet row 1: labels above the boxes (like the filter box), totals on the right */
.cw-ws-bar { flex-wrap: nowrap; align-items: flex-end; gap: .6rem; }
.cw-ws-bar .cw-f { min-width: 0; flex: none; }
.cw-ws-bar .cw-f .form-label { white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: .78rem; }
.cw-ws-bar .cw-f .form-label b { color: var(--cw-text); font-size: .86rem; }
.cw-ws-bar #ltSel { width: 180px; }
.cw-ws-eff input { width: 150px; }
.cw-ws-bar > .btn { white-space: nowrap; flex: none; }
.cw-ws-bar .cw-daycards { margin-bottom: 0; flex: 0 1 auto; min-width: 0; align-self: flex-start; }
@media (max-width: 767.98px) { .cw-ws-bar { flex-wrap: wrap; } }

/* freeze columns (columns menu): pin per column */
.cw-gmenu .cw-frz { color: var(--bs-secondary-color); line-height: 1; }
.cw-gmenu .cw-frz.on { color: var(--cw-primary, #0d6efd); }
.cw-gmenu .cw-frz:hover { color: var(--cw-primary, #0d6efd); }

/* contractor > wage rules: one compact bar, then the grid filling the screen (sticky heading / first column) */
.cw-wr-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem .9rem; margin-bottom: .5rem; }
.cw-wr-left { display: flex; flex-direction: column; gap: .35rem; }
.cw-wr-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .9rem; }
.cw-wr-right { flex: 1 1 340px; min-width: 280px; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.cw-wr-right .cw-wr-help { width: 100%; height: 5.4em; overflow-y: auto; flex: 0 0 auto; }
.cw-wr-help > div + div { margin-top: .15rem; }
.cw-wr-help .badge { font-size: .64rem; min-width: 38px; }
.cw-wr-f { display: flex; flex-direction: column; min-width: 0; }
.cw-wr-f > label { font-size: .74rem; color: var(--bs-secondary-color); margin-bottom: .1rem; white-space: nowrap; }
.cw-wr-f select { width: auto; min-width: 190px; max-width: 240px; }
.cw-wr-otp { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: 0 .3rem; }
.cw-wr-otp input { width: 52px; padding: .1rem .3rem; border: 0; }
.cw-wr-info { font-size: 1.1rem; cursor: help; align-self: center; }
.cw-wr-help { font-size: .76rem; line-height: 1.3; color: var(--bs-secondary-color);
               background: var(--bs-tertiary-bg, #f8f9fa); border-left: 3px solid var(--cw-primary, #0d6efd); border-radius: .25rem; padding: .3rem .5rem; }
.cw-wr-help i { color: var(--cw-primary, #0d6efd); }
.cw-wr-scroll { overflow: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.cw-wr-table { border-collapse: separate; border-spacing: 0; }
.cw-wr-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-tertiary-bg, #f8f9fa); }
.cw-wr-table .cw-wr-c { position: sticky; left: 0; z-index: 1; background: var(--bs-body-bg); min-width: 220px; }
.cw-wr-table thead .cw-wr-c { z-index: 3; background: var(--bs-tertiary-bg, #f8f9fa); }
.cw-wr-table th { font-size: .76rem; font-weight: 600; white-space: nowrap; vertical-align: bottom; padding: .25rem .35rem; }
.cw-wr-table td { font-size: .8rem; padding: .12rem .35rem; }
.cw-wr-table input:disabled { opacity: .45; }
.cw-wr-pct { width: 100px; margin: .15rem auto 0; }
.cw-wr-pct input { padding: .05rem .3rem; }

/* settings > letter formats editor */
.cw-lt-ph { max-height: 62vh; overflow-y: auto; }
.cw-lt-ph .btn { font-size: .74rem; line-height: 1.2; padding: .2rem .4rem; }
.cw-lt-ph code { font-size: .74rem; }
#tBody { font-size: .78rem; }