/* =============================================================================
   YOUR FAVOURITES — ADMIN UI  (global stylesheet, v2: sidebar layout)
   Loaded once by dashboard_new_landing_page.php. Every page that is loaded
   into the dashboard by AJAX (entry pages, attendance edit, reports, modals)
   uses these classes instead of inline <style> blocks.

   Sections
     1. Tokens (+ old variable names kept so existing inline styles still work)
     2. Base
     3. Shell + sidebar (category menu, profile, log out)
     4. Main area: page title + sub tabs
     5. Page shell, cards
     6. Buttons
     7. Forms, date rows, messages
     8. Modals (+ global alert)
     9. Leave modal layout
    10. Data tables + status badges
    11. Attendance grid (store_attendance_ajax.php -> fetch_list)
    12. Attendance edit page (store_attendance_edit.php)
    13. Responsive, focus, reduced motion
    14. Login page (index.php)
    15. Tablet & touch (main users are on tablets)
    16. Entry pages (store_entry_pages_ajax.php)
    17. Accounts config (categories + expense sub categories)
    18. Accounts entry (daily form + sub category panel)
    19. UI v3 (orange title, underline sub tabs, rail toggle at top, store filter, card rows)
    20. Temperature check (runs, section tabs, cards, keypad)
    21. Store pills everywhere = Document reminders style
    22. Temperature check compact (smaller cards, inline edit)
    23. Entry page heads = Document reminders style
    24. Attendance entry v3 (tinted column groups, inline date label)
    25. Accounts entry v3 (KPI strip, £ inputs, net bars)
    26. Attendance worked time (IN / OUT / BREAK / HOURS)
    26. Accounts entry: vertical date list
   ============================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
    /* core palette — warm sidebar, white workspace, soft teal panels */
    --yf-ink:        #1F1F24;   /* text, dark buttons              */
    --yf-ink-2:      #6B6B76;   /* secondary text                  */
    --yf-ink-3:      #A3A3AD;   /* hints                           */
    --yf-sand:       #F3ECE4;   /* sidebar                         */
    --yf-sand-2:     #E9DFD4;   /* sidebar lines / hover           */
    --yf-canvas:     #FFFFFF;   /* workspace background            */
    --yf-surface:    #FFFFFF;   /* cards                           */
    --yf-surface-2:  #FAF8F5;   /* table heads, footers            */
    --yf-line:       #EEEAE5;   /* borders                         */
    --yf-line-2:     #DCD6CF;   /* inputs, stronger borders        */
    --yf-mint:       #E3F1EE;   /* soft panel (like "Channels")    */
    --yf-teal:       #5FB3A7;   /* teal accent                     */

    /* brand accents */
    --yf-chilli:     #EF5A3C;   /* badges, active marker, CTA      */
    --yf-chilli-dark: #D4432A;  /* CTA hover / pressed             */
    --yf-turmeric:   #F2B233;   /* highlights                      */
    --yf-turmeric-soft: #FFF3D6;

    /* status */
    --yf-danger:     #D64532;  --yf-danger-soft:  #FDEBE7;
    --yf-warn:       #A86A00;  --yf-warn-soft:    #FFF1D6;
    --yf-ok:         #2E8B6F;  --yf-ok-soft:      #E3F1EE;
    --yf-info:       #3F6FBF;  --yf-info-soft:    #E8EFFA;

    /* shape + type */
    --yf-r-sm: 8px;
    --yf-r:    12px;
    --yf-r-lg: 20px;
    --yf-shadow: 0 8px 24px rgba(31, 31, 36, .06);
    --yf-shadow-pop: 0 18px 44px rgba(31, 31, 36, .18);
    --yf-font: "DM Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --yf-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
    --yf-sidebar-w: 232px;

    /* old names — still used by inline styles inside AJAX pages */
    --bg-page: var(--yf-canvas);
    --bg-card: var(--yf-surface);
    --text-primary: var(--yf-ink);
    --text-muted: var(--yf-ink-2);
    --border-light: var(--yf-line);
    --border-dark: var(--yf-ink);
    --border-accent: var(--yf-ink);
    --radius: var(--yf-r-sm);
    --font-family: var(--yf-font);
}

/* ---------------------------------------------------------------- 2. BASE */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--yf-font);
    font-size: 14px;
    background: var(--yf-canvas);
    color: var(--yf-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
table { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 3. SHELL + SIDEBAR */
.yf-shell { display: flex; min-height: 100vh; }

.yf-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: var(--yf-sidebar-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 28px 20px 24px;
    background: var(--yf-sand);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    transition: width .2s ease, padding .2s ease;
}
.yf-sidebar > .brand-logo-btn { order: 0; }
.yf-sidebar > .side-profile   { order: 1; }
.yf-sidebar > .menu-tabs      { order: 2; }
.yf-sidebar > .rail-toggle    { order: 3; }
.yf-sidebar > .side-logout    { order: 4; }

.brand-logo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--yf-ink);
    cursor: pointer;
}
.brand-logo-btn:hover, .brand-logo-btn:focus { text-decoration: none; color: var(--yf-ink); }
.brand-logo-btn img { height: 30px; width: auto; }
.brand-mark {
    width: 30px; height: 30px;
    display: inline-grid; place-items: center;
    border-radius: 9px;
    background: var(--yf-chilli);
    color: #fff;
    font-size: 12px; font-weight: 700;
}
.brand-name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand-logo-btn { padding-left: 4px; }

.side-profile {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    margin: 26px 0 22px;
    padding: 8px 10px;
    border-radius: var(--yf-r);
    background: rgba(255, 255, 255, .45);
    text-align: left;
}
.side-avatar, .side-name, .side-role { transition: all .2s ease; }
.side-avatar {
    grid-row: 1 / span 2;
    width: 36px; height: 36px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: #F6C3AE;
    color: var(--yf-ink);
    font-family: var(--yf-display);
    font-size: 14px; font-weight: 700;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
}
.side-name {
    font-family: var(--yf-display);
    font-size: 14px; font-weight: 700;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-role { font-size: 11px; line-height: 1.3; color: var(--yf-ink-2); }

/* category menu: centred list, active item bold with a chilli dot */
.menu-tabs { display: flex; flex-direction: column; gap: 4px; }
.menu-tab-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    border: 0;
    border-radius: var(--yf-r);
    background: transparent;
    color: var(--yf-ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.menu-tab-btn .menu-ico { width: 18px; font-size: 15px; text-align: center; flex-shrink: 0; opacity: .75; }
.menu-tab-btn.active .menu-ico { opacity: 1; }
.menu-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-tab-btn:hover { color: var(--yf-ink); background: var(--yf-sand-2); }
.menu-tab-btn.active { color: var(--yf-ink); font-weight: 700; background: rgba(255, 255, 255, .7); }
.menu-tab-btn.active::after {
    content: "";
    width: 7px; height: 7px;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--yf-chilli);
}

.rail-toggle, .side-logout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--yf-r);
    background: transparent;
    font-size: 13px;
    color: var(--yf-ink-2);
    text-decoration: none;
    cursor: pointer;
}
.rail-toggle { margin-top: auto; }
.rail-toggle i {
    width: 26px; height: 26px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--yf-line-2);
    font-size: 11px;
    transition: transform .2s ease;
}
.rail-toggle::after { content: "Collapse"; }
.rail-toggle:hover { color: var(--yf-ink); background: var(--yf-sand-2); }
.side-logout:hover, .side-logout:focus { color: var(--yf-ink); background: var(--yf-sand-2); text-decoration: none; }
.logout-btn {
    width: 26px; height: 26px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: var(--yf-ink);
    color: #fff !important;
    font-size: 11px;
}
.side-logout:hover .logout-btn { background: var(--yf-chilli); }

/* collapsed rail: icons only (desktop). Labels come back as native tooltips (title) */
@media (min-width: 861px) {
    html.rail-collapsed { --yf-sidebar-w: 84px; }
    html.rail-collapsed .yf-sidebar { padding: 28px 12px 20px; }
    html.rail-collapsed .brand-logo-btn { justify-content: center; padding-left: 0; }
    html.rail-collapsed .brand-name,
    html.rail-collapsed .side-name,
    html.rail-collapsed .side-role,
    html.rail-collapsed .menu-lbl { display: none; }
    html.rail-collapsed .side-profile { display: flex; justify-content: center; margin: 22px 0 18px; padding: 6px 0; background: transparent; }
    html.rail-collapsed .menu-tab-btn { justify-content: center; padding: 12px 0; }
    html.rail-collapsed .menu-tab-btn .menu-ico { font-size: 17px; }
    html.rail-collapsed .menu-tab-btn.active::after { position: absolute; top: 8px; right: 12px; margin: 0; }
    html.rail-collapsed .rail-toggle,
    html.rail-collapsed .side-logout { justify-content: center; padding: 8px 0; }
    html.rail-collapsed .rail-toggle::after { content: none; }
    html.rail-collapsed .rail-toggle i { transform: rotate(180deg); }
}

/* ---------------------------------------------------------------- 4. MAIN AREA: TITLE + SUB TABS */
.yf-main { flex: 1; min-width: 0; padding: 30px 40px 40px; }

.yf-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.yf-pagehead h1 {
    margin: 0;
    font-family: var(--yf-display);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.1;
    color: var(--yf-ink);
}
.yf-date-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--yf-line-2);
    border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--yf-ink-2);
    white-space: nowrap;
}

/* title + sub tabs stay on screen while the content scrolls */
.yf-stickyhead {
    position: sticky;
    top: 0;
    z-index: 900;
    margin: -30px -40px 0px;/*22px*/
    padding: 30px 40px 16px;
    background: var(--yf-surface);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.yf-stickyhead.is-stuck { border-bottom-color: var(--yf-line); box-shadow: 0 6px 18px rgba(31, 31, 36, .05); }
.yf-stickyhead .yf-pagehead { margin-bottom: 14px; }
.yf-clock-sep { width: 1px; height: 14px; background: var(--yf-line-2); margin: 0 2px; }
.yf-clock-time { font-variant-numeric: tabular-nums; min-width: 62px; color: var(--yf-ink); font-weight: 600; }

#header_submenu_bar { display: none; }
#header_submenu_bar.open { display: block; }
.submenu-items-flex {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.submenu-loading, .submenu-empty { font-size: 13px; color: var(--yf-ink-3); }

.sub-group-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sub-group-block + .sub-group-block { padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--yf-line); }
.sub-group-title { font-size: 12px; font-weight: 600; color: var(--yf-ink-3); }

/* generic look (also used as segmented buttons in the leave modal) */
.sub-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--yf-line-2);
    border-radius: 999px;
    background: var(--yf-surface);
    color: var(--yf-ink-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sub-action-btn:hover { color: var(--yf-ink); border-color: var(--yf-ink-3); }
.sub-action-btn.active { background: var(--yf-ink); border-color: var(--yf-ink); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- 5. PAGE SHELL, CARDS */
.dash-page-wrapper { width: 100%; max-width: 1440px; margin: 0; padding: 0; }
.dash-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }

.content-card {
    background: var(--yf-surface);
    border: 1px solid var(--yf-line);
    border-radius: var(--yf-r-lg);
    box-shadow: var(--yf-shadow);
    padding: 24px;
}
.content-card.is-mint { background: var(--yf-mint); border-color: transparent; box-shadow: none; }
.page-title, .yf-h2 { font-family: var(--yf-display); font-size: 22px; font-weight: 700; margin: 0; }
.page-sub   { font-size: 13px; color: var(--yf-ink-2); margin: 2px 0 0; }

/* stat tiles (like Views / Followers) */
.yf-stats { display: flex; flex-wrap: wrap; gap: 32px; }
.yf-stat .lbl { display: block; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--yf-line); font-size: 12px; color: var(--yf-ink-2); }
.yf-stat .val { font-family: var(--yf-display); font-size: 26px; font-weight: 700; line-height: 1; }

/* ---------------------------------------------------------------- 6. BUTTONS */
.btn-modern-primary, .sp-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--yf-chilli);
    border-radius: var(--yf-r-sm);
    background: var(--yf-chilli);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.btn-modern-primary:hover, .sp-save-btn:hover,
.btn-modern-primary:focus-visible, .sp-save-btn:focus-visible { background: var(--yf-chilli-dark); border-color: var(--yf-chilli-dark); }
.btn-modern-primary:active, .sp-save-btn:active { transform: translateY(1px); }
.btn-modern-primary[disabled], .sp-save-btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-modern-outline, .sp-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--yf-line-2);
    border-radius: var(--yf-r-sm);
    background: var(--yf-surface);
    color: var(--yf-ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.btn-modern-outline:hover, .btn-modern-outline.active,
.sp-cancel-btn:hover { background: var(--yf-canvas); color: var(--yf-ink); border-color: var(--yf-ink-3); }

/* CTA size rule (all pages): Submit / Save / Update = 20px top-bottom, 50px left-right.
   !important so inline paddings inside AJAX pages and JS-built alert buttons follow it too */
.btn-modern-primary, .sp-save-btn, #ateRoot .ate-btn, .login-btn,
#dashboard_ajax_content .btn-primary, .sp-modal .btn-primary,
#dashboard_ajax_content .btn-dark, .sp-modal .btn-dark,
#dashboard_ajax_content button[type="submit"], #dashboard_ajax_content input[type="submit"] {
    padding: 20px 50px !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    border-radius: var(--yf-r) !important;
    justify-content: center;
}

/* bootstrap primary buttons inside the dashboard follow the same red CTA look */
#dashboard_ajax_content .btn-primary, .sp-modal .btn-primary,
#dashboard_ajax_content .btn-dark, .sp-modal .btn-dark {
    background: var(--yf-chilli); border-color: var(--yf-chilli); color: #fff;
}
#dashboard_ajax_content .btn-primary:hover, .sp-modal .btn-primary:hover,
#dashboard_ajax_content .btn-dark:hover, .sp-modal .btn-dark:hover { background: var(--yf-chilli-dark); border-color: var(--yf-chilli-dark); }

/* CTA placement: every form's action buttons sit at the LEFT, even when a page
   loaded into the dashboard floats / right-aligns them (inline styles included) */
#dashboard_ajax_content :is(div, p, td, form):has(> .sp-save-btn, > .btn-modern-primary, > .btn-primary, > button[type="submit"], > input[type="submit"]) {
    justify-content: flex-start !important;
    text-align: left !important;
}
#dashboard_ajax_content :is(.sp-save-btn, .btn-modern-primary, .btn-primary, button[type="submit"], input[type="submit"]) {
    float: none !important;
    margin-left: 0 !important;
}
#dashboard_ajax_content :is(.pull-right, .float-right, .text-right):has(.sp-save-btn, .btn-modern-primary, .btn-primary, button[type="submit"]) {
    float: none !important;
    text-align: left !important;
}

/* segmented filter (e.g. EXPIRED / 0-90 DAYS) */
.yf-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--yf-sand); }
.yf-seg > * {
    padding: 6px 14px; border: 0; border-radius: 999px; background: transparent;
    font-size: 13px; font-weight: 600; color: var(--yf-ink-2); cursor: pointer;
}
.yf-seg > .active { background: var(--yf-surface); color: var(--yf-ink); box-shadow: var(--yf-shadow); }

/* ---------------------------------------------------------------- 7. FORMS, DATE ROWS, MESSAGES */
.yf-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--yf-ink-2);
}
.yf-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--yf-line-2);
    border-radius: var(--yf-r-sm);
    background: var(--yf-surface);
    font-size: 13px;
}
.yf-input:focus { outline: none; border-color: var(--yf-ink); box-shadow: 0 0 0 3px rgba(26, 29, 38, .08); }
.yf-date-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.yf-msg { font-size: 12px; font-weight: 600; }
.yf-msg.push-left { margin-right: auto; }
.yf-note { font-size: 12px; color: var(--yf-ink-2); }
.yf-section { margin-bottom: 16px; }

/* ---------------------------------------------------------------- 8. MODALS */
.sp-modal .modal-dialog { width: 95%; max-width: 1080px; }
.sp-modal .modal-dialog.is-wide { width: 96%; max-width: 1300px; }
.sp-modal .modal-dialog.is-mid  { max-width: 900px; }
.sp-modal .modal-content {
    border: 0;
    border-radius: var(--yf-r-lg);
    background: var(--yf-surface);
    box-shadow: var(--yf-shadow-pop);
    overflow: hidden;
}
.sp-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--yf-surface);
    border-bottom: 1px solid var(--yf-line);
    color: var(--yf-ink);
}
.sp-modal .modal-header::before, .sp-modal .modal-header::after { display: none; } /* bootstrap 3 clearfix */
.sp-modal .modal-title { font-family: var(--yf-display); font-size: 20px; font-weight: 700; margin: 0; color: var(--yf-ink); }
.sp-modal .modal-title strong { font-weight: 700; color: var(--yf-ink-2); }
.sp-modal .close {
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--yf-ink-2);
    font-size: 22px; line-height: 1;
    opacity: 1; text-shadow: none;
    cursor: pointer;
}
.sp-modal .close:hover { background: var(--yf-canvas); color: var(--yf-ink); }
.sp-modal .modal-body { padding: 20px; background: var(--yf-surface); }
.sp-modal .modal-body.is-frame   { padding: 0; height: 70vh; overflow: hidden; }
.sp-modal .modal-body.is-frame-lg { padding: 0; height: 75vh; }
.sp-modal .modal-body.is-scroll  { max-height: 72vh; overflow-y: auto; }
.sp-modal .modal-body.is-log     { height: 60vh; overflow-y: auto; }
.sp-modal iframe { width: 100%; height: 100%; border: 0; }

.sp-action-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--yf-line);
    background: var(--yf-surface-2);
}
.sp-action-bar::before, .sp-action-bar::after { display: none; }
.sp-action-group { display: flex; gap: 8px; }

/* CTA placement rule: action buttons sit on the LEFT, main (red) action first,
   status messages / notes go to the right */
.sp-action-bar .sp-save-btn, .sp-action-bar .btn-modern-primary,
.sp-action-group .sp-save-btn, .sp-action-group .btn-modern-primary,
#globalAlertFooter .btn-modern-primary { order: -1; }
.sp-action-bar > .yf-msg, .sp-action-bar > .yf-note,
.sp-action-bar > .push-left { order: 99; margin-left: auto; margin-right: 0; text-align: right; }
.sp-inline-bar {                     /* footer bar inside a modal body (accounts) */
    display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 20px; padding: 12px 16px;
    border: 1px solid var(--yf-line); border-radius: var(--yf-r);
    background: var(--yf-surface-2);
}
.modal-loading { padding: 40px; text-align: center; font-size: 13px; font-weight: 600; color: var(--yf-ink-2); }

/* global alert / confirm */
#globalAlertModal { z-index: 10500; }
#globalAlertModal .modal-dialog { max-width: 400px; margin: 120px auto; }
#globalAlertModal .modal-header { padding: 12px 16px; }
#globalAlertModal .modal-title { font-size: 14px; }
#globalAlertModal .modal-body { padding: 24px 20px 20px; text-align: center; }
#globalAlertIcon { font-size: 34px; margin-bottom: 10px; color: var(--yf-ink); }
#globalAlertIcon i { color: inherit !important; }
#globalAlertMessage { font-size: 14px; color: var(--yf-ink-2); margin: 0; }
#globalAlertFooter {
    display: flex; justify-content: flex-start; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--yf-line); background: var(--yf-surface-2);
}
#globalAlertFooter::before, #globalAlertFooter::after { display: none; }

/* ---------------------------------------------------------------- 9. LEAVE MODAL LAYOUT */
.lv-staff-box { padding: 10px; border: 1px solid var(--yf-line); border-radius: var(--yf-r); background: var(--yf-surface); }
.lv-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 20px;
    border: 1px solid var(--yf-line);
    border-radius: var(--yf-r);
    background: var(--yf-surface-2);
}
.lv-panel > div { padding: 16px; min-height: 120px; }
.lv-panel > div + div { border-left: 1px solid var(--yf-line); }
.lv-seg { display: flex; gap: 4px; margin-bottom: 14px; }
.lv-head { font-size: 12px; font-weight: 600; color: var(--yf-ink-2); }
.lv-hint { font-size: 12px; color: var(--yf-ink-3); margin-top: 4px; }
.lv-list { max-height: 320px; overflow-y: auto; margin-bottom: 16px; }
.lv-foot { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--yf-line); }

/* ---------------------------------------------------------------- 10. DATA TABLES + BADGES */
.yf-table-wrap { overflow-x: auto; border: 1px solid var(--yf-line); border-radius: var(--yf-r); }
.yf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.yf-table th, .yf-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--yf-line); }
.yf-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--yf-surface-2);
    font-size: 12px; font-weight: 600; color: var(--yf-ink-2);
}
.yf-table tbody tr:hover td { background: #FCFAF7; }
.yf-table .yf-group-row td {
    background: var(--yf-canvas);
    font-size: 13px; font-weight: 700; color: var(--yf-ink);
    padding-top: 12px; padding-bottom: 12px;
}
.yf-table .yf-name { font-weight: 600; }
.yf-table .yf-sub  { display: block; font-size: 12px; color: var(--yf-ink-2); }
.yf-table .yf-empty { color: var(--yf-ink-3); }

.yf-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap;
    background: var(--yf-canvas); color: var(--yf-ink-2);
}
.yf-badge--danger { background: var(--yf-danger-soft); color: var(--yf-danger); }
.yf-badge--warn   { background: var(--yf-warn-soft);   color: var(--yf-warn); }
.yf-badge--ok     { background: var(--yf-ok-soft);     color: var(--yf-ok); }
.yf-badge--info   { background: var(--yf-info-soft);   color: var(--yf-info); }

/* expiry highlighting: expired = red + blink, due within 90 days = dark yellow */
.yf-badge--expired { background: var(--yf-danger-soft); color: var(--yf-danger); animation: yf-blink 1.2s ease-in-out infinite; }
.yf-badge--soon    { background: #FCEBB6; color: #7A5300; }
@keyframes yf-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.yf-h2 + .btn-modern-outline { margin-left: auto; }
.yf-h3 { margin: 0; font-family: var(--yf-display); font-size: 18px; font-weight: 700; line-height: 1.2; }
.yf-table th small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--yf-ink-3); }
.yf-table .col-name { width: 220px; }

/* document reminder table (dashboard_ajax.php) */
.doc-table td { vertical-align: top; }
.doc-table .yf-name { font-weight: 600; white-space: nowrap; }
.staff-link { color: var(--yf-ink); font-weight: 600; text-decoration: none; }
.staff-link:hover { color: var(--yf-chilli); text-decoration: underline; text-underline-offset: 3px; }
.doc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.doc-date { font-weight: 600; color: var(--yf-ink); white-space: nowrap; }
.doc-date.doc-expired { color: var(--yf-danger); }
.doc-date.doc-urgent  { color: #9A6700; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--yf-ink-2); }
.doc-link { color: var(--yf-ink); }
.doc-link:hover { color: var(--yf-chilli); }
.doc-none { color: var(--yf-line-2); }
.doc-table tr.row-expired td:first-child { box-shadow: inset 3px 0 0 var(--yf-danger); }
.doc-table tr.row-soon td:first-child    { box-shadow: inset 3px 0 0 var(--yf-turmeric); }

.yf-group-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.yf-group-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.yf-btn-xs {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--yf-line-2); border-radius: 999px;
    background: var(--yf-surface);
    font-size: 12px; font-weight: 500; color: var(--yf-ink-2);
    cursor: pointer;
}
.yf-btn-xs:hover { color: var(--yf-ink); border-color: var(--yf-ink-3); }
.yf-btn-xs i { font-size: 11px; }

/* store mark before store names (same shape as the YF mark in the rail) */
.store-title { display: inline-flex; align-items: center; gap: 10px; }
.store-mark {
    width: 28px; height: 28px;
    display: inline-grid; place-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    font-family: var(--yf-font);
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    color: #fff;
    background: var(--yf-chilli);
}
.store-mark.tone-1 { background: var(--yf-teal); }
.store-mark.tone-2 { background: #D49A1F; }
.store-mark.tone-3 { background: var(--yf-info); }
.store-mark.tone-4 { background: var(--yf-ink); }

/* document reminders: table / cards switch */
.dash-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.yf-seg > * i { margin-right: 4px; font-size: 12px; }
#docViewRoot[data-view="table"] .doc-view-cards,
#docViewRoot[data-view="cards"] .doc-view-table { display: none; }

.sc-group + .sc-group { margin-top: 26px; }
.sc-group-head { padding: 10px 14px; margin-bottom: 14px; border-radius: var(--yf-r); background: var(--yf-surface-2); font-weight: 700; }
.sc-grid { --sc-cols: 5; display: grid; grid-template-columns: repeat(var(--sc-cols), minmax(0, 1fr)); gap: 14px; }
/* cards per row by device:
   desktop >=1600: 5 | laptop 1200-1599: 4 | tablet landscape 900-1199: 3 | tablet portrait 600-899: 2 | mobile <600: 1 */
@media (max-width: 1599px) { .sc-grid { --sc-cols: 4; } }
@media (max-width: 1199px) { .sc-grid { --sc-cols: 3; } }
@media (max-width: 899px)  { .sc-grid { --sc-cols: 2; } }
@media (max-width: 599px)  { .sc-grid { --sc-cols: 1; } }
.sc-card {
    container-type: inline-size;     /* lets the inside adapt to the card's own width */
    min-width: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--yf-line);
    border-radius: 16px;
    background: var(--yf-surface);
    overflow: hidden;
}
.sc-card.row-expired { box-shadow: inset 3px 0 0 var(--yf-danger); }
.sc-card.row-soon    { box-shadow: inset 3px 0 0 var(--yf-turmeric); }
.sc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 14px 16px 12px; }
.sc-head .yf-badge { margin-left: auto; }
.sc-avatar {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: #F6C3AE;
    font-family: var(--yf-display); font-size: 12px; font-weight: 700;
}
.sc-name { flex: 1; min-width: 0; font-weight: 600; line-height: 1.25; }
.sc-body { border-top: 1px solid var(--yf-line); }
.sc-doc { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px 16px; }
.sc-doc + .sc-doc { border-top: 1px dashed var(--yf-line); }
.sc-doc-label { font-size: 12px; font-weight: 600; color: var(--yf-ink-2); padding-top: 1px; }
.sc-doc-val .doc-meta { margin-top: 3px; }
.sc-name { overflow-wrap: break-word; }
/* narrow cards (4-5 per row on laptops): label above the value */
@container (max-width: 290px) {
    .sc-doc { grid-template-columns: 1fr; gap: 2px; padding: 9px 14px; }
    .sc-head { padding: 12px 14px 10px; row-gap: 4px; }
    .sc-head .sc-name { flex-basis: calc(100% - 42px); }
    .sc-head .yf-badge { margin-left: 42px; }          /* status chip under the name */
}

/* attendance overview (last 7 days per store) */
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ov-card { background: var(--yf-surface); border: 1px solid var(--yf-line); border-radius: var(--yf-r-lg); box-shadow: var(--yf-shadow); overflow: hidden; }
.ov-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; }
.ov-scroll { overflow-x: auto; }
.ov-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ov-table th, .ov-table td { padding: 8px 6px; border-top: 1px solid var(--yf-line); }
.ov-table th { font-size: 11px; font-weight: 600; color: var(--yf-ink-2); background: var(--yf-surface-2); text-align: center; line-height: 1.2; }
.ov-table th small { display: block; font-weight: 500; color: var(--yf-ink-3); }
.ov-table th.is-today { color: var(--yf-ink); background: var(--yf-turmeric-soft); }
.ov-table .ov-name { padding-left: 18px; text-align: left; font-weight: 600; white-space: nowrap; }
.ov-table td.ov-c { text-align: center; font-weight: 700; }
.ov-p { color: var(--yf-ok); }
.ov-s { color: var(--yf-info); }
.ov-off { color: var(--yf-ink-3); }
.ov-lv { color: var(--yf-danger); }
.ov-none { color: var(--yf-line-2); }

/* report filters (monthly / yearly inside the dashboard) */
.yf-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
.yf-filter-row.is-split { justify-content: space-between; }
.yf-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.yf-range { gap: 10px; }
.yf-input-date { width: 130px !important; }
.yf-output { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--yf-line); }

/* ---------------------------------------------------------------- 11. ATTENDANCE GRID (fetch_list) */
.att-wrap { overflow-x: auto; }
.att-grid { width: auto; border-collapse: collapse; font-size: 12px; margin-bottom: 0; }
.att-grid > thead > tr > th {
    background: var(--yf-surface) !important;
    color: var(--yf-ink);
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    text-align: center; vertical-align: middle !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 6px;
}
.att-grid > thead > tr > th.att-name-h { text-align: left; padding-left: 12px; }
.att-grid > thead > tr > th.att-grp { letter-spacing: .3px; }
.att-grid > tbody > tr > td { vertical-align: middle !important; border: 1px solid #cbd5e1 !important; }
.att-grid > tbody > tr > td.att-name { padding: 10px 12px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.att-grid > tbody > tr > td.att-c { padding: 0 !important; text-align: center; width: 62px; }
.att-grid label.att-cell { display: block; margin: 0; padding: 10px 4px; cursor: pointer; }
.att-grid label.att-cell:hover { background: rgba(74, 159, 212, .12); }
.att-grid label.att-cell.att-dis { opacity: .4; cursor: not-allowed; }
.att-grid label.att-cell.att-dis:hover { background: transparent; }
.att-grid label.att-cell input { margin: 0; cursor: inherit; }
.att-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12px; color: #475569; }
.att-legend b { color: var(--yf-ink); margin-right: 4px; }
.att-grid td.att-h { padding: 4px 8px !important; white-space: nowrap; }
.att-grid .att-half { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.att-grid .att-half .att-half-lbl { font-weight: 700; margin-right: 2px; min-width: 24px; }
.att-grid .att-half label {
    display: inline-flex; align-items: center; gap: 4px;
    margin: 0; padding: 3px 8px;
    border: 1px solid #cbd5e1; border-radius: 14px;
    font-size: 11px; font-weight: 700; background: #fff; cursor: pointer;
}
.att-grid .att-half label:hover { background: rgba(74, 159, 212, .12); }
.att-grid .att-half label input { margin: 0; cursor: pointer; }
.att-grid .att-half label.on { border-color: var(--yf-ink); background: #f1f5f9; }
.att-grid tr.att-inc > td { background: #fef2f2 !important; }
.att-grid tr.att-inc .att-half label { border-color: #dc2626; }
.att-grid tr.att-inc .att-half-lbl { color: #dc2626; }
.att-last { color: #dc2626; font-size: 12px; margin-top: 10px; }

/* ---------------------------------------------------------------- 12. ATTENDANCE EDIT PAGE */
#ateRoot { font-size: 12px; color: var(--yf-ink); }
#ateRoot .ate-card { background: var(--yf-surface); border: 1px solid var(--yf-line); border-radius: var(--yf-r-lg); padding: 20px; }
#ateRoot .ate-title { font-family: var(--yf-display); font-size: 22px; font-weight: 700; margin: 0; }
#ateRoot .ate-sub { color: var(--yf-ink-2); font-size: 13px; margin: 2px 0 14px; }
#ateRoot .ate-hr { border: 0; border-top: 1px solid var(--yf-line); margin: 0 0 4px; }
#ateRoot .ate-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #334155; margin: 14px 0 8px; }
#ateRoot .ate-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#ateRoot .ate-chip { border: 1px solid #d1d5db; background: #fff; color: #111; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; }
#ateRoot .ate-chip.on { background: #000; color: #fff; border-color: #000; }
#ateRoot .ate-mchip { min-width: 58px; text-align: center; background: #f1f5f9; }
#ateRoot .ate-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
#ateRoot select.ate-fy { height: 32px; border: 1px solid #d1d5db; border-radius: 6px; padding: 0 8px; font-weight: 600; font-size: 12px; }
#ateRoot .ate-dates { display: flex; flex-wrap: wrap; gap: 3px; }
#ateRoot .ate-dchip { width: 30px; padding: 6px 0; text-align: center; border-radius: 6px; border: 1px solid #e5e7eb; background: #f1f5f9; color: #334155; cursor: pointer; user-select: none; line-height: 1.2; }
#ateRoot .ate-dchip b { display: block; font-size: 14px; }
#ateRoot .ate-dchip span { font-size: 11px; }
#ateRoot .ate-dchip.saved { background: #c6f6d5; border-color: #9ae6b4; color: #166534; }
#ateRoot .ate-dchip.half { background: #ffedd5; border-color: #fb923c; color: #9a3412; }
#ateRoot .ate-dchip.on { background: #000; border-color: #000; color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000; }
#ateRoot .ate-legend { display: flex; gap: 14px; margin-top: 8px; color: #64748b; font-size: 11px; }
#ateRoot .ate-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid #cbd5e1; }
#ateRoot .ate-legend i.sw-saved { background: #c6f6d5; }
#ateRoot .ate-legend i.sw-none  { background: #f1f5f9; }
#ateRoot .ate-legend i.sw-half  { background: #ffedd5; border-color: #fb923c; }
#ateRoot .ate-legend i.sw-sel   { background: #000; }
#ateRoot .ate-daytitle { font-size: 14px; font-weight: 700; margin: 20px 0 8px; }
#ateRoot .ate-foot { display: flex; justify-content: flex-start; border-top: 1px solid var(--yf-line); margin-top: 16px; padding-top: 14px; }
#ateRoot .ate-btn { background: var(--yf-chilli); color: #fff; border: 0; border-radius: 6px; padding: 8px 16px; font-weight: 700; font-size: 12px; cursor: pointer; }
#ateRoot .ate-btn:hover:not([disabled]) { background: var(--yf-chilli-dark); }
#ateRoot .ate-btn[disabled] { opacity: .4; cursor: not-allowed; }
#ateRoot .ate-msg { padding: 24px; text-align: center; color: #64748b; }
#ateRoot .ate-empty { color: #dc2626; }
#ateRoot .ate-toast { display: none; margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-weight: 600; }
#ateRoot .ate-toast.ok { background: #dcfce7; color: #166534; }
#ateRoot .ate-toast.err { background: #fee2e2; color: #991b1b; }

/* ---------------------------------------------------------------- 13. RESPONSIVE, FOCUS, MOTION */
:focus-visible { outline: 2px solid var(--yf-info); outline-offset: 2px; }
.menu-tab-btn:focus-visible { outline-offset: -2px; }

@media (max-width: 1024px) {
    :root { --yf-sidebar-w: 200px; }
    .yf-main { padding: 24px; }
    .yf-stickyhead { margin: -24px -24px 20px; padding: 24px 24px 14px; }
    .yf-pagehead h1 { font-size: 30px; }
}
/* tablet / phone: sidebar becomes a top bar with a scrolling menu */
@media (max-width: 860px) {
    .yf-shell { flex-direction: column; }
    .yf-sidebar {
        position: sticky; top: 0; height: auto; width: 100%;
        flex-direction: row; align-items: center; gap: 14px;
        padding: 10px 16px;
    }
    .side-profile { display: none; }
    .brand-name { display: none; }
    .menu-tabs { flex-direction: row; flex: 1; overflow-x: auto; scrollbar-width: none; }
    .menu-tabs::-webkit-scrollbar { display: none; }
    .menu-tab-btn { width: auto; white-space: nowrap; padding: 8px 12px; }
    .side-logout { margin: 0; padding: 0; width: auto; }
    .rail-toggle { display: none; }
    .menu-tab-btn.active::after { display: none; }
    .side-logout span:last-child { display: none; }
    .yf-main { padding: 20px 16px; }
    .yf-stickyhead { top: 58px; margin: -20px -16px 18px; padding: 16px 16px 12px; }
    .yf-pagehead { flex-wrap: wrap; }
    .yf-pagehead h1 { font-size: 26px; }
}
@media (max-width: 1300px) { .ov-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
    .lv-panel { grid-template-columns: 1fr; }
    .lv-panel > div + div { border-left: 0; border-top: 1px solid var(--yf-line); }
    .sp-modal .modal-dialog { width: auto; margin: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ---------------------------------------------------------------- 14. LOGIN PAGE */
.login-page { background: var(--yf-surface); }
.login-shell { display: flex; min-height: 100vh; }

/* left brand panel — same sand as the rail */
.login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 44%;
    max-width: 620px;
    padding: 40px 48px 0;
    background: var(--yf-sand);
    overflow: hidden;
}
.login-brand-top { display: flex; align-items: center; gap: 10px; }
.login-brand-top .brand-mark { display: inline-grid; }
.login-brand-copy { margin-top: 64px; max-width: 420px; }
.login-brand-copy h1 {
    margin: 0;
    font-family: var(--yf-display);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--yf-ink);
}
.login-brand-copy p { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--yf-ink-2); max-width: 36ch; }
.login-photo {
    flex: 1;
    min-height: 220px;
    margin: 40px -48px 0 0;
    border-top-left-radius: 28px;
    background-color: var(--yf-sand-2);
    background-size: cover;
    background-position: center;
}

/* right form panel */
.login-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-card { width: 100%; max-width: 380px; }
.login-logo { display: block; max-width: 180px; max-height: 64px; margin-bottom: 28px; }
.login-title {
    margin: 0;
    font-family: var(--yf-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--yf-ink);
}
.login-sub { margin: 8px 0 24px; font-size: 14px; color: var(--yf-ink-2); }

.login-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--yf-r);
    background: var(--yf-danger-soft);
    color: var(--yf-danger);
    font-size: 13px;
    font-weight: 500;
}

.login-form { display: flex; flex-direction: column; }
.login-label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--yf-ink); }
.login-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    margin-bottom: 16px;
    border: 1px solid var(--yf-line-2);
    border-radius: var(--yf-r);
    background: var(--yf-surface);
    font-size: 15px;
    color: var(--yf-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input:focus { outline: none; border-color: var(--yf-ink); box-shadow: 0 0 0 4px rgba(31, 31, 36, .08); }
.login-pass { position: relative; }
.login-pass .login-input { padding-right: 48px; }
.login-eye {
    position: absolute; top: 4px; right: 4px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--yf-ink-3);
    cursor: pointer;
}
.login-eye:hover, .login-eye[aria-pressed="true"] { color: var(--yf-ink); background: var(--yf-surface-2); }

.login-check { display: flex; align-items: center; gap: 10px; margin: 2px 0 22px; font-size: 13px; color: var(--yf-ink-2); cursor: pointer; }
.login-check input { width: 16px; height: 16px; accent-color: var(--yf-ink); }
.login-captcha { margin-bottom: 18px; }

.login-btn {
    height: 48px;
    border: 0;
    border-radius: var(--yf-r);
    background: var(--yf-chilli);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.login-btn:hover, .login-btn:focus-visible { background: var(--yf-chilli-dark); }

.login-foot { margin-top: 24px; font-size: 13px; color: var(--yf-ink-2); }
.login-foot a { color: var(--yf-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
    .login-shell { flex-direction: column; }
    .login-brand { width: 100%; max-width: none; padding: 20px 24px 24px; }
    .login-brand-copy { margin-top: 22px; }
    .login-brand-copy h1 { font-size: 30px; }
    .login-brand-copy h1 br { display: none; }
    .login-brand-copy p { display: none; }
    .login-photo { display: none; }
    .login-panel { align-items: flex-start; padding: 32px 24px; }
}


/* ---------------------------------------------------------------- 15. TABLET & TOUCH
   Most users are on tablets (portrait + landscape); some on laptop / desktop.
   Rules under (pointer: coarse) only hit touch screens, so mouse users keep the
   compact desktop sizes and hover effects.                                        */

/* no 300ms double-tap delay, no grey tap flash */
button, a, label, input, select, .ate-chip, .ate-dchip, .menu-tab-btn, .sub-action-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.yf-table-wrap, .att-wrap, .ov-scroll, .submenu-items-flex, .menu-tabs { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* notch / rounded-corner safe areas when saved to home screen (phones, small tablets) */
@media (max-width: 860px) {
    .yf-sidebar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .yf-main    { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (pointer: coarse) {
    /* 44px minimum touch targets */
    .menu-tab-btn { min-height: 48px; }
    .sub-action-btn, #header_submenu_bar .sub-action-btn { min-height: 44px; padding: 10px 18px; font-size: 14px; }
    .yf-seg > * { min-height: 40px; padding: 8px 16px; }
    .yf-btn-xs { min-height: 38px; padding: 8px 14px; font-size: 13px; }
    .btn-modern-outline, .sp-cancel-btn { min-height: 44px; padding: 10px 18px; }
    .sp-modal .close { width: 44px; height: 44px; font-size: 26px; }
    .rail-toggle, .side-logout { min-height: 44px; }
    .doc-link, .doc-none { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; margin: -6px 0; }
    .staff-link { display: inline-block; padding: 4px 0; }

    /* 16px inputs stop iPad / iPhone from zooming into the field */
    input, select, textarea, .yf-input, .form-control { font-size: 16px !important; }
    .yf-input, .form-control, select.ate-fy { min-height: 44px; }

    /* attendance grid: big radios, the whole cell is the target */
    .att-grid input[type="radio"] { width: 22px; height: 22px; }
    .att-grid label.att-cell { padding: 12px 6px; }
    .att-grid > tbody > tr > td.att-c { width: 66px; }
    .att-grid > tbody > tr > td.att-name { padding: 12px; }
    .att-grid .att-half label { padding: 8px 12px; font-size: 13px; gap: 6px; }
    .att-grid .att-half input[type="radio"] { width: 18px; height: 18px; }
    .att-grid .att-half { flex-wrap: wrap; row-gap: 6px; }

    /* attendance edit: chips big enough for a thumb */
    #ateRoot .ate-chip { min-height: 44px; padding: 10px 16px; font-size: 14px; display: inline-flex; align-items: center; }
    #ateRoot .ate-dchip { width: 44px; padding: 8px 0; }
    #ateRoot .ate-dates { gap: 6px; }

    /* hover plates stick after a tap on touch screens: turn them off */
    .menu-tab-btn:hover { background: transparent; }
    .menu-tab-btn.active:hover { background: rgba(255, 255, 255, .7); }
    .sub-action-btn:hover, #header_submenu_bar .sub-action-btn:hover { background: var(--yf-surface); color: var(--yf-ink-2); }
    #header_submenu_bar .sub-action-btn:hover { background: transparent; }
    #header_submenu_bar .sub-action-btn.active:hover, .sub-action-btn.active:hover { background: var(--yf-ink); color: #fff; }
    .yf-table tbody tr:hover td { background: transparent; }
    .att-grid label.att-cell:hover, .att-grid .att-half label:hover { background: transparent; }

    /* press feedback instead of hover */
    .menu-tab-btn:active, .sub-action-btn:active, .yf-btn-xs:active, .ate-chip:active, .ate-dchip:active,
    .btn-modern-outline:active, .sp-cancel-btn:active { transform: scale(.97); }
}

/* touch rail (tablet landscape): slim rail shows the label under each icon,
   because title tooltips never appear on touch */
@media (pointer: coarse) and (min-width: 861px) {
    html.rail-collapsed { --yf-sidebar-w: 96px; }
    html.rail-collapsed .menu-tab-btn { flex-direction: column; gap: 4px; padding: 10px 4px; min-height: 60px; }
    html.rail-collapsed .menu-tab-btn .menu-lbl {
        display: block;
        max-width: 100%;
        font-size: 10.5px; font-weight: 600;
        overflow: hidden; text-overflow: ellipsis;
    }
    html.rail-collapsed .menu-tab-btn.active::after { top: 8px; right: 14px; }
}

/* tablet landscape (short screens): shorter sticky title so more rows fit */
@media (pointer: coarse) and (max-height: 900px) and (min-width: 861px) {
    .yf-stickyhead { padding-top: 18px; padding-bottom: 12px; margin-top: -30px; }
    .yf-pagehead h1 { font-size: 28px; }
    .yf-stickyhead .yf-pagehead { margin-bottom: 10px; }
}

/* tablet portrait (and phones): modals become near full-screen sheets */
@media (max-width: 900px) {
    .sp-modal .modal-dialog, .sp-modal .modal-dialog.is-wide, .sp-modal .modal-dialog.is-mid {
        width: auto; max-width: none; margin: 12px;
    }
    .sp-modal .modal-content { border-radius: 16px; }
    .sp-modal .modal-body.is-scroll { max-height: calc(100vh - 190px); }
    .sp-action-bar { position: sticky; bottom: 0; flex-wrap: wrap; }
    .sp-action-bar > .yf-msg, .sp-action-bar > .yf-note, .sp-action-bar > .push-left { flex-basis: 100%; order: 99; text-align: left; margin-left: 0; }
    .lv-panel { grid-template-columns: 1fr 1fr; }
    .lv-panel > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--yf-line); }
    .lv-panel > div + div { border-left: 0; }
    .lv-panel > div:last-child { border-left: 1px solid var(--yf-line); }
}

/* tablet portrait: title row + date pill stack neatly, filter rows wrap */
@media (min-width: 600px) and (max-width: 900px) {
    .yf-pagehead h1 { font-size: 28px; }
    .dash-topbar { flex-wrap: wrap; }
    .dash-tools { margin-left: 0; }
    .yf-filter-row.is-split { flex-direction: column; align-items: flex-start; }
}

/* laptops / desktops with a mouse keep the dense layout; wide screens get more room */
@media (pointer: fine) and (min-width: 1600px) {
    .dash-page-wrapper { max-width: 1600px; }
}

/* phones: sub menu in one swipeable line; tablets keep it wrapped so every page is visible */
@media (max-width: 599px) {
    #header_submenu_bar .submenu-items-flex { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    #header_submenu_bar .sub-group-block { flex-wrap: nowrap; }
    #header_submenu_bar .submenu-items-flex::-webkit-scrollbar { display: none; }
}


/* ---------------------------------------------------------------- 16. ENTRY PAGES */
.entry-head { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--yf-line); }
.entry-filters { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.entry-dates { display: flex; flex-wrap: wrap; gap: 6px; }
.entry-date-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 64px; padding: 7px 12px;
    border: 1px solid var(--yf-line-2); border-radius: var(--yf-r);
    background: var(--yf-surface-2); color: var(--yf-ink);
    font-size: 13px; font-weight: 700; line-height: 1.2;
    cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.entry-date-btn span { font-size: 11px; font-weight: 500; opacity: .75; }
.entry-date-btn.data-pending   { background: var(--yf-surface-2); color: var(--yf-ink); border-color: var(--yf-line-2); }
.entry-date-btn.data-completed { background: #C6F6D5; color: #166534; border-color: #9AE6B4; }
.entry-date-btn.active-date    { background: var(--yf-ink); color: #fff; border-color: var(--yf-ink); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--yf-ink); }

/* footer: CTA left, note / message right */
.entry-foot { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--yf-line); }
.entry-foot > .yf-note, .entry-foot > .yf-msg { margin-left: auto; text-align: right; }

.entry-frame { width: 100%; height: calc(100vh - 200px); min-height: 640px; }
.entry-frame iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: var(--yf-r); background: var(--yf-surface); }

/* leave entry */
.lv-staff-radios { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-staff-leave-radio {
    display: inline-flex; align-items: center;
    margin: 0; padding: 7px 14px;
    border: 1px solid var(--yf-line-2); border-radius: 999px;
    background: var(--yf-surface); color: var(--yf-ink);
    font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
}
.btn-staff-leave-radio input[type="radio"] { display: none; }
.btn-staff-leave-radio.selected { background: var(--yf-ink); border-color: var(--yf-ink); color: #fff; }
.lv-bal-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lv-bal { min-width: 52px; padding: 5px 8px; text-align: center; border: 1px solid var(--yf-line-2); border-radius: var(--yf-r-sm); background: var(--yf-surface); }
.lv-bal span { display: block; font-size: 10px; font-weight: 700; color: var(--yf-ink-2); }
.lv-bal b { font-family: var(--yf-display); font-size: 18px; }
.lv-stats { width: 100%; margin-top: 8px; font-size: 12px; }
.lv-stats td { padding: 3px 0; }
.lv-stats td:first-child { color: var(--yf-ink-2); }
.lv-stats td:last-child { text-align: right; }
.lv-date-table td { vertical-align: middle; }
.lv-date { font-weight: 600; white-space: nowrap; width: 200px; background: var(--yf-surface-2); }
.lv-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lv-opt { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 10px; border: 1px solid var(--yf-line-2); border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--yf-surface); }
.lv-opt input { margin: 0; }
.lv-opt:has(input:checked) { border-color: var(--yf-ink); background: #F1F5F9; }
.lv-group { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border: 1px dashed var(--yf-line-2); border-radius: 999px; }
.lv-group strong { font-size: 11px; margin-right: 2px; }
.lv-group .lv-opt { padding: 3px 8px; }

/* bootstrap datepicker above sticky header / modals */
#ui-datepicker-div { display: none !important; }
.datepicker.datepicker-dropdown { z-index: 9999 !important; }

@media (pointer: coarse) {
    .entry-date-btn { min-width: 68px; min-height: 52px; padding: 8px 12px; }
    .btn-staff-leave-radio { min-height: 44px; padding: 10px 16px; font-size: 14px; }
    .lv-opt { min-height: 40px; padding: 8px 12px; font-size: 13px; }
    .lv-opt input { width: 18px; height: 18px; }
}
@media (max-width: 767px) {
    .lv-date { width: auto; }
}


/* ---------------------------------------------------------------- 17. ACCOUNTS CONFIG */
.acc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.acc-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2px solid var(--yf-ink); }
.acc-list, .sub-list { list-style: none; margin: 0; padding: 0; }
.acc-toast { display: none; padding: 6px 12px; border-radius: 999px; background: var(--yf-ok-soft); color: var(--yf-ok); font-size: 12px; font-weight: 600; white-space: nowrap; }
.acc-toast.is-bad { background: var(--yf-danger-soft); color: var(--yf-danger); }

.cat-item { margin-bottom: 8px; }
.cat-item-row {
    display: flex; align-items: center; gap: 8px;
    min-height: 50px; padding: 4px 8px 4px 4px;
    background: var(--yf-surface); border: 1px solid var(--yf-line); border-radius: var(--yf-r);
}
.cat-item-row:hover { border-color: var(--yf-line-2); }
.drag-handle { display: grid; place-items: center; width: 36px; height: 40px; flex-shrink: 0; color: var(--yf-ink-3); cursor: grab; touch-action: none; }
.drag-handle:active { cursor: grabbing; color: var(--yf-ink); }
.cat-input-inline {
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px;
    border: 1px solid transparent; border-radius: var(--yf-r-sm); background: transparent;
    font-size: 14px; font-weight: 600; color: var(--yf-ink); outline: none;
}
.cat-sname-inline {
    flex: 0 0 76px; width: 76px; height: 40px; padding: 0 6px;
    border: 1px solid transparent; border-radius: var(--yf-r-sm); background: transparent;
    font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: center; color: var(--yf-ink-2); outline: none;
}
.cat-input-inline:hover, .cat-sname-inline:hover { background: var(--yf-surface-2); border-color: var(--yf-line); }
.cat-input-inline:focus, .cat-sname-inline:focus { background: var(--yf-surface); border-color: var(--yf-ink); }
.btn-delete-row {
    display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--yf-ink-3); cursor: pointer;
}
.btn-delete-row:hover { background: var(--yf-danger-soft); color: var(--yf-danger); }

/* expense drill down */
.sub-toggle {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    height: 36px; padding: 0 10px;
    border: 1px solid var(--yf-line-2); border-radius: 999px; background: var(--yf-surface);
    font-size: 12px; font-weight: 600; color: var(--yf-ink-2); cursor: pointer;
}
.sub-toggle i { font-size: 11px; transition: transform .2s ease; }
.sub-toggle.on { background: var(--yf-ink); border-color: var(--yf-ink); color: #fff; }
.sub-toggle.on i { transform: rotate(180deg); }
.sub-count { min-width: 14px; text-align: center; }
.sub-panel { margin: 6px 0 4px 22px; padding: 10px 10px 10px 14px; border-left: 3px solid var(--yf-turmeric); background: var(--yf-surface-2); border-radius: 0 var(--yf-r) var(--yf-r) 0; }
.sub-panel[hidden] { display: none; }
.sub-item {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    min-height: 48px; padding: 4px 6px 4px 2px; margin-bottom: 6px;
    background: var(--yf-surface); border: 1px solid var(--yf-line); border-radius: var(--yf-r-sm);
}
.sub-item .cat-input-inline { font-weight: 500; flex-basis: 140px; }
.sub-item .cat-sname-inline { flex-basis: 64px; width: 64px; }
.sub-stores { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.st-pill {
    height: 32px; min-width: 38px; padding: 0 10px;
    border: 1px solid var(--yf-line-2); border-radius: 999px; background: var(--yf-surface);
    font-size: 11px; font-weight: 700; color: var(--yf-ink-2); cursor: pointer;
}
.st-pill.on { background: var(--yf-ink); border-color: var(--yf-ink); color: #fff; }
.sortable-placeholder { min-height: 48px; margin-bottom: 8px; border: 1px dashed var(--yf-line-2); border-radius: var(--yf-r); background: var(--yf-surface-2); }

/* add rows */
.add-row-form { display: flex; gap: 8px; margin-top: 10px; }
.add-input-name, .add-input-sname {
    height: 46px; padding: 0 12px;
    border: 1px solid var(--yf-line-2); border-radius: var(--yf-r); background: var(--yf-surface);
    font-size: 14px; outline: none;
}
.add-input-name { flex: 1 1 auto; min-width: 0; }
.add-input-sname { flex: 0 0 90px; width: 90px; text-transform: uppercase; text-align: center; font-weight: 600; }
.add-input-name:focus, .add-input-sname:focus { border-color: var(--yf-ink); box-shadow: 0 0 0 3px rgba(31, 31, 36, .08); }
.acc-add-btn { padding: 0 24px !important; height: 46px !important; flex-shrink: 0; }
.sub-add .add-input-name, .sub-add .add-input-sname { height: 42px; }
.sub-add .acc-add-btn { height: 42px !important; }

@media (max-width: 1300px) { .acc-cols { grid-template-columns: 1fr; } }
@media (pointer: coarse) {
    .cat-item-row { min-height: 56px; }
    .drag-handle { width: 44px; height: 48px; font-size: 18px; }
    .cat-input-inline, .cat-sname-inline { height: 46px; }
    .btn-delete-row { width: 44px; height: 44px; }
    .sub-toggle { height: 44px; padding: 0 14px; font-size: 13px; }
    .st-pill { height: 40px; min-width: 46px; font-size: 12px; }
    .sub-item { min-height: 56px; }
    .add-input-name, .add-input-sname, .acc-add-btn { height: 50px !important; }
}


/* ---------------------------------------------------------------- 18. ACCOUNTS ENTRY */
.acc-entry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.acc-block-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid var(--yf-ink);
    font-size: 13px; font-weight: 700;
}
.acc-block-head span:last-child { font-variant-numeric: tabular-nums; }
.acc-line { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--yf-line); }
.acc-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--yf-ink); }
.acc-amt {
    width: 140px; height: 42px; padding: 0 12px; flex-shrink: 0;
    border: 1px solid var(--yf-line-2); border-radius: var(--yf-r-sm); background: var(--yf-surface);
    text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--yf-ink); outline: none;
}
.acc-amt:focus { border-color: var(--yf-ink); box-shadow: 0 0 0 3px rgba(31, 31, 36, .08); }
.acc-amt-sum { background: var(--yf-surface-2); cursor: pointer; }
.acc-sub-open {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 10px 0 0; border: 0; background: transparent; text-align: left; cursor: pointer;
}
.acc-sub-open .fa-chevron-right { color: var(--yf-ink-3); font-size: 12px; }
.acc-sub-open:hover .acc-label { text-decoration: underline; text-underline-offset: 3px; }
.acc-chip { padding: 3px 9px; border-radius: 999px; background: var(--yf-surface-2); border: 1px solid var(--yf-line); font-size: 11px; font-weight: 700; color: var(--yf-ink-2); white-space: nowrap; }
.acc-chip.on { background: var(--yf-turmeric-soft); border-color: var(--yf-turmeric); color: #7A5300; }

.acc-trend td, .acc-trend th { text-align: right; padding: 8px 10px; white-space: nowrap; }
.acc-trend td:first-child, .acc-trend th:first-child { text-align: left; }
.acc-trend td small { color: var(--yf-ink-3); font-size: 11px; }
.acc-trend tr.is-today td { font-weight: 700; background: var(--yf-turmeric-soft); }
.acc-trend tfoot td { font-weight: 700; border-top: 2px solid var(--yf-ink); background: var(--yf-surface-2); }
.acc-trend .is-neg, .acc-entry .is-neg { color: var(--yf-danger); }

/* sub category panel: right side (desktop / landscape tablet), bottom sheet (portrait / phone) */
.acc-drawer { position: fixed; inset: 0; z-index: 1200; }
.acc-drawer[hidden] { display: none; }
.acc-drawer-backdrop { position: absolute; inset: 0; background: rgba(31, 31, 36, .38); }
.acc-drawer-sheet {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(460px, 100%); display: flex; flex-direction: column;
    background: var(--yf-surface); box-shadow: var(--yf-shadow-pop);
    animation: acc-in-right .2s ease;
}
@keyframes acc-in-right { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes acc-in-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
html.acc-drawer-open, html.acc-drawer-open body { overflow: hidden; }
.acc-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--yf-line); }
.acc-drawer-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 18px; color: var(--yf-ink-2); cursor: pointer; }
.acc-drawer-x:hover { background: var(--yf-surface-2); color: var(--yf-ink); }
.acc-drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px 12px; -webkit-overflow-scrolling: touch; }
.acc-drawer-body[hidden] { display: none; }
.accs-search { margin: 8px 0; }
.accs-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; min-height: 58px; padding: 6px 0; border-bottom: 1px solid var(--yf-line); }
.accs-row[hidden] { display: none; }
.accs-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--yf-ink); }
.accs-name small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--yf-ink-3); }
.accs-other .accs-name { color: var(--yf-ink-2); font-style: italic; }
.accs-amt {
    height: 48px; padding: 0 12px;
    border: 1px solid var(--yf-line-2); border-radius: var(--yf-r); background: var(--yf-surface);
    text-align: right; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; outline: none;
}
.accs-amt:focus { border-color: var(--yf-ink); box-shadow: 0 0 0 3px rgba(31, 31, 36, .08); }
.acc-drawer-foot { display: flex; align-items: center; gap: 14px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--yf-line); background: var(--yf-surface-2); }
.acc-drawer-total { margin-left: auto; text-align: right; }
.acc-drawer-total span { display: block; font-size: 12px; color: var(--yf-ink-2); }
.acc-drawer-total b { font-family: var(--yf-display); font-size: 24px; font-variant-numeric: tabular-nums; }

@media (max-width: 1199px) {
    .acc-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acc-summary { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .acc-entry { grid-template-columns: 1fr; }
    .acc-amt { width: 120px; }
}
/* portrait tablets and phones: bottom sheet */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
    .acc-drawer-sheet {
        top: auto; left: 0; right: 0; width: 100%; max-height: 88vh;
        border-radius: 20px 20px 0 0; animation: acc-in-up .2s ease;
    }
    .acc-drawer-head::before {
        content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
        border-radius: 4px; background: var(--yf-line-2);
    }
    .acc-drawer-head { position: relative; padding-top: 22px; }
    .accs-row { grid-template-columns: minmax(0, 1fr) 160px; }
}
@media (pointer: coarse) {
    .acc-amt { height: 48px; font-size: 16px; }
    .acc-line { min-height: 56px; }
    .accs-amt { height: 52px; }
}


/* ---------------------------------------------------------------- 19. UI v3 */
/* page title: orange, light sans (was slab) */
.yf-pagehead h1 {
    font-family: var(--yf-font);
    font-weight: 500;
    font-size: 38px;
    letter-spacing: -.02em;
    color: var(--yf-chilli);
}
/* section titles in sans too */
.yf-h2, .page-title { font-family: var(--yf-font); font-weight: 500; font-size: 24px; letter-spacing: -.01em; }
.yf-h3 { font-family: var(--yf-font); font-weight: 600; }

/* sub menu: underline tabs instead of pills */
#header_submenu_bar .submenu-items-flex,
#header_submenu_bar .sub-group-block { gap: 4px 22px; }
#header_submenu_bar .sub-action-btn {
    padding: 6px 2px 5px;
    min-height: 0;
    border: 0;
    border-bottom: 2px solid var(--yf-line-2);
    border-radius: 0;
    background: transparent;
    color: var(--yf-ink-2);
    font-size: 15px;
    font-weight: 400;
}
#header_submenu_bar .sub-action-btn::before { display: none !important; }
#header_submenu_bar .sub-action-btn:hover { background: transparent; color: var(--yf-ink); border-bottom-color: var(--yf-ink-3); }
#header_submenu_bar .sub-action-btn.active,
#header_submenu_bar .sub-action-btn.active:hover { background: transparent; color: var(--yf-chilli); border-bottom-color: var(--yf-chilli); font-weight: 500; }
.sub-group-block + .sub-group-block { border-left: 0; padding-left: 0; margin-left: 0; }

/* rail: collapse button sits at the top, next to the brand */
.yf-sidebar { position: sticky; }
.yf-sidebar > .rail-toggle {
    order: 0;
    position: absolute; top: 30px; right: 14px;
    width: 30px; height: 30px; min-height: 0; padding: 0; margin: 0;
    justify-content: center;
    border-radius: 50%;
}
.yf-sidebar > .rail-toggle::after { content: none; }
.yf-sidebar > .rail-toggle i { width: 28px; height: 28px; border-color: var(--yf-line-2); background: var(--yf-surface); }
.yf-sidebar > .brand-logo-btn { padding-right: 40px; order: -1; }
.yf-sidebar > .side-logout { margin-top: auto; }
@media (min-width: 861px) {
    html.rail-collapsed .yf-sidebar > .rail-toggle { position: static; order: 0; align-self: center; margin: 12px 0 0; width: 44px; height: 30px; }
    html.rail-collapsed .yf-sidebar > .brand-logo-btn { padding-right: 0; }
}
@media (pointer: coarse) {
    .yf-sidebar > .rail-toggle { width: 44px; height: 44px; top: 23px; right: 8px; }
    #header_submenu_bar .sub-action-btn { min-height: 44px; padding: 10px 2px 8px; font-size: 16px; }
}

/* store filter chips (document reminders) */
.store-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.sf-chip {
    padding: 5px 10px;
    border: 1px solid var(--yf-line-2);
    border-radius: 4px;
    background: var(--yf-surface);
    color: var(--yf-ink-2);
    font-size: 14px;
    cursor: pointer;
}
.sf-chip:hover { border-color: var(--yf-ink-3); color: var(--yf-ink); }
.sf-chip.on { background: var(--yf-chilli); border-color: var(--yf-chilli); color: #fff; }
@media (pointer: coarse) { .sf-chip { min-height: 44px; padding: 8px 14px; font-size: 15px; } }
.sc-group[hidden], .doc-table tr[hidden] { display: none; }

/* store heading in card view: compact tinted box */
.sc-group-head { display: inline-flex; max-width: 100%; padding: 8px 14px 8px 8px; }
.sc-group-head .yf-group-head { gap: 14px; }

/* card rows: label + file icon + type on top, date underneath */
.sc-doc { display: block; padding: 10px 16px; }
.sc-doc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 3px; }
.sc-doc-top .sc-doc-label { font-size: 12px; font-weight: 600; color: var(--yf-ink-2); }
.sc-doc-top .doc-meta { margin: 0; font-size: 11px; color: var(--yf-ink-3); }
.sc-doc .doc-line .doc-date { font-size: 15px; }
@container (max-width: 290px) { .sc-doc { padding: 9px 14px; } }


/* ---------------------------------------------------------------- 20. TEMPERATURE CHECK */
.tp-empty { padding: 16px; border: 1px dashed var(--yf-line-2); border-radius: var(--yf-r); color: var(--yf-ink-2); }
.tp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.tp-runs > * { min-height: 40px; padding: 8px 18px; }
.tp-progress { margin-left: auto; font-size: 13px; color: var(--yf-ink-2); }
.tp-tabs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-tab {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 8px 16px;
    border: 1px solid var(--yf-line-2); border-radius: 999px; background: var(--yf-surface);
    font-size: 14px; font-weight: 600; color: var(--yf-ink-2); cursor: pointer;
}
.tp-tab .tp-count { font-size: 12px; font-weight: 500; color: var(--yf-ink-3); font-variant-numeric: tabular-nums; }
.tp-tab .fa-check { color: var(--yf-ok); }
.tp-tab.is-ok { background: var(--yf-ok-soft); border-color: #B7E0CF; color: var(--yf-ok); }
.tp-tab.on { border: 2px solid var(--yf-ink); color: var(--yf-ink); }
.tp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yf-danger); display: inline-block; }

.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tp-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px; border: 1px solid var(--yf-line); border-radius: 16px; background: var(--yf-surface);
}
.tp-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tp-name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.tp-range { font-size: 12px; color: var(--yf-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-step { display: flex; align-items: center; gap: 8px; }
.tp-btn {
    width: 52px; height: 52px; flex-shrink: 0;
    border: 1px solid var(--yf-line-2); border-radius: 14px; background: var(--yf-surface-2);
    font-size: 24px; font-weight: 500; line-height: 1; color: var(--yf-ink); cursor: pointer;
    touch-action: none; user-select: none;
}
.tp-btn:active { transform: scale(.95); background: var(--yf-sand); }
.tp-val {
    flex: 1; height: 52px; border: 1px dashed transparent; border-radius: 12px; background: transparent;
    font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--yf-ink); cursor: pointer;
}
.tp-val:hover { border-color: var(--yf-line-2); }
.tp-btn:disabled, .tp-val:disabled { opacity: .4; cursor: not-allowed; }
.tp-status { font-size: 13px; font-weight: 600; min-height: 18px; color: var(--yf-ink-2); }
.tp-act { width: 100%; height: 46px; padding: 0 10px; border: 2px solid var(--yf-danger); border-radius: 10px; background: var(--yf-surface); font-size: 15px; }
.tp-act[hidden] { display: none; }
.tp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.tp-hint { font-size: 12px; color: var(--yf-ink-3); }
.tp-niu { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 500; color: var(--yf-ink-2); cursor: pointer; }
.tp-niu input { width: 18px; height: 18px; accent-color: var(--yf-ink); }

.tp-card.is-ok    { border-color: #9FD8C0; }
.tp-card.is-ok .tp-status { color: var(--yf-ok); }
.tp-card.is-near  { border: 2px solid var(--yf-turmeric); }
.tp-card.is-near .tp-status { color: #8A5A00; }
.tp-card.is-bad   { border: 2px solid var(--yf-danger); background: var(--yf-danger-soft); }
.tp-card.is-bad .tp-status { color: var(--yf-danger); }
.tp-card.is-empty { border: 1px dashed var(--yf-line-2); }
.tp-card.is-empty .tp-num { color: var(--yf-ink-3); }
.tp-card.is-niu   { background: var(--yf-surface-2); }
.tp-card.is-niu .tp-num { color: var(--yf-ink-3); font-size: 22px; }
.tp-card.is-edited .tp-name::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--yf-turmeric); vertical-align: middle; }

.tp-sec[hidden], .tp-run-body[hidden] { display: none; }
.tp-sec-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tp-confirm {
    flex: 1 1 320px; min-height: 56px; padding: 10px 18px;
    border: 2px dashed var(--yf-ink-3); border-radius: 14px; background: var(--yf-surface);
    font-size: 16px; font-weight: 600; color: var(--yf-ink); cursor: pointer;
}
.tp-confirm small { display: block; font-size: 12px; font-weight: 500; opacity: .8; }
.tp-confirm.is-done { border: 2px solid var(--yf-ok); background: var(--yf-ok-soft); color: var(--yf-ok); }
.tp-next { min-height: 56px; }
.tp-next[hidden], .tp-confirm[hidden] { display: none !important; }
.tp-comment { margin-top: 20px; }
.tp-last { margin-top: 10px; font-size: 12px; color: var(--yf-ink-3); }

/* keypad: bottom sheet */
.tp-kp { position: fixed; inset: 0; z-index: 1300; }
.tp-kp[hidden] { display: none; }
.tp-kp-backdrop { position: absolute; inset: 0; background: rgba(31, 31, 36, .35); }
.tp-kp-sheet {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: min(380px, 100%); padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--yf-surface); border-radius: 20px 20px 0 0; box-shadow: var(--yf-shadow-pop);
    animation: acc-in-up .18s ease;
}
.tp-kp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tp-kp-head span { font-size: 12px; color: var(--yf-ink-3); }
.tp-kp-disp { margin: 8px 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--yf-surface-2); text-align: right; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-kp-msg { min-height: 20px; font-size: 13px; color: #8A5A00; }
.tp-kp-msg button { margin: 0 4px; padding: 4px 10px; border: 1px solid var(--yf-turmeric); border-radius: 999px; background: var(--yf-turmeric-soft); font-weight: 600; cursor: pointer; }
.tp-kp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.tp-kp-keys button { height: 60px; border: 1px solid var(--yf-line); border-radius: 14px; background: var(--yf-surface-2); font-size: 24px; font-weight: 600; cursor: pointer; }
.tp-kp-keys button:active { background: var(--yf-sand); }
.tp-kp-keys .tp-kp-ok { grid-column: span 2; background: var(--yf-chilli); border-color: var(--yf-chilli); color: #fff; font-size: 18px; }

/* entry pages: keep the Save / Submit bar on screen while scrolling (tablet) */
.entry-page .entry-foot { position: sticky; bottom: 0; z-index: 5; background: var(--yf-surface); margin-bottom: -20px; padding-bottom: 16px; }

@media (max-width: 700px) {
    .tp-grid { grid-template-columns: 1fr; }
    .tp-progress { margin-left: 0; flex-basis: 100%; }
}


/* ---------------------------------------------------------------- 21. STORE PILLS (one style on every page) */
/* entry pages (attendance, leave, temperature, accounts), attendance edit, accounts reports */
.sub-action-btn[class*="-st-btn"],
.sub-action-btn.btn-acc-store, .sub-action-btn.btn-acc-fy-store,
#ateRoot #ateStores .ate-chip {
    padding: 5px 10px;
    min-height: 0;
    border: 1px solid var(--yf-line-2);
    border-radius: 4px;
    background: var(--yf-surface);
    color: var(--yf-ink-2);
    font-size: 14px;
    font-weight: 400;
}
.sub-action-btn[class*="-st-btn"]:hover,
.sub-action-btn.btn-acc-store:hover, .sub-action-btn.btn-acc-fy-store:hover,
#ateRoot #ateStores .ate-chip:hover { border-color: var(--yf-ink-3); color: var(--yf-ink); background: var(--yf-surface); }
.sub-action-btn[class*="-st-btn"].active,
.sub-action-btn.btn-acc-store.active, .sub-action-btn.btn-acc-fy-store.active,
#ateRoot #ateStores .ate-chip.on {
    background: var(--yf-chilli); border-color: var(--yf-chilli); color: #fff; font-weight: 400;
}
@media (pointer: coarse) {
    .sub-action-btn[class*="-st-btn"], .sub-action-btn.btn-acc-store, .sub-action-btn.btn-acc-fy-store,
    #ateRoot #ateStores .ate-chip { min-height: 44px; padding: 8px 14px; font-size: 15px; }
    .sub-action-btn[class*="-st-btn"].active:hover, #ateRoot #ateStores .ate-chip.on:hover { background: var(--yf-chilli); color: #fff; }
}


/* ---------------------------------------------------------------- 22. TEMPERATURE COMPACT */
.tp-top { gap: 8px 12px; margin-bottom: 10px; }
.tp-runs > * { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.tp-tab { min-height: 38px; padding: 6px 12px; font-size: 13px; }
.tp-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.tp-card { gap: 4px; padding: 8px 10px; border-radius: 12px; }
.tp-name { font-size: 13px; }
.tp-range { font-size: 11px; }
.tp-step { gap: 6px; }
.tp-btn { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; }
.tp-val {
    position: relative; flex: 1; min-width: 0; height: 40px;
    display: grid; place-items: center;
    border: 1px dashed transparent; border-radius: 10px;
    cursor: text; user-select: none; touch-action: manipulation;
}
.tp-val:hover { border-color: var(--yf-line-2); }
.tp-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-edit {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 2px solid var(--yf-ink); border-radius: 10px; background: var(--yf-surface);
    text-align: center; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; outline: none;
}
.tp-edit[hidden] { display: none; }
.tp-foot { margin-top: 0; min-height: 22px; }
.tp-status { font-size: 12px; min-height: 0; line-height: 1.3; }
.tp-status .tp-use { margin-left: 4px; padding: 2px 10px; border: 1px solid var(--yf-turmeric); border-radius: 999px; background: var(--yf-turmeric-soft); font-size: 12px; font-weight: 700; cursor: pointer; }
.tp-niu { font-size: 11px; gap: 4px; flex-shrink: 0; }
.tp-niu input { width: 16px; height: 16px; }
.tp-act { height: 34px; padding: 0 8px; border-width: 1px; border-radius: 8px; font-size: 13px; }
.tp-card.is-def { border-color: var(--yf-line-2); }
.tp-card.is-def .tp-status { color: var(--yf-ink-3); font-weight: 500; }
.tp-card.is-near { border-width: 1px; }
.tp-card.is-bad { border-width: 1px; }
.tp-card.is-editing { border-color: var(--yf-ink); }
.tp-card.is-edited .tp-name::after { width: 6px; height: 6px; margin-left: 5px; }
.tp-sec-foot { margin-top: 10px; gap: 8px; }
.tp-confirm { min-height: 46px; padding: 8px 14px; font-size: 14px; border-radius: 12px; }
.tp-confirm small { font-size: 11px; }
.tp-next { min-height: 46px; }
.tp-comment { margin-top: 14px; }
@media (pointer: coarse) {
    .tp-btn { width: 42px; height: 42px; }
    .tp-val, .tp-step { min-height: 42px; }
}
@media (max-width: 700px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ---------------------------------------------------------------- 23. ENTRY PAGE HEADS */
/* title only, no subtitle or divider; store pills right under it (same as Document reminders) */
.entry-page .entry-head { padding: 0; margin: 0 0 14px; border: 0; }
.entry-page .entry-head .yf-h2 { margin: 0; }
.entry-page .entry-filters { gap: 12px; }


/* ---------------------------------------------------------------- 24. ATTENDANCE ENTRY v3 */
.entry-date-row { display: flex; align-items: center; gap: 14px; }
.entry-date-lbl { flex-shrink: 0; font-size: 13px; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; color: var(--yf-ink); }

/* tinted column groups: present = green, off = yellow, leave = red, other half = cream */
.att-grid { --g-p: #EAF7EC; --g-p-h: #DFF3E3; --g-o: #FFFBE3; --g-o-h: #FDF5CC; --g-l: #FDEBEC; --g-l-h: #FBDDDF; --g-h: #FEFDE8; --g-h-h: #FBF8D2; }
.att-grid > thead > tr > th.g-p, .att-grid > tbody > tr > td.g-p { background: var(--g-p) !important; }
.att-grid > thead > tr > th.g-o, .att-grid > tbody > tr > td.g-o { background: var(--g-o) !important; }
.att-grid > thead > tr > th.g-l, .att-grid > tbody > tr > td.g-l { background: var(--g-l) !important; }
.att-grid > thead > tr > th.g-h, .att-grid > tbody > tr > td.g-h { background: var(--g-h) !important; }
.att-grid > thead > tr:first-child > th.g-p { background: var(--g-p-h) !important; }
.att-grid > thead > tr:first-child > th.g-o { background: var(--g-o-h) !important; }
.att-grid > thead > tr:first-child > th.g-l { background: var(--g-l-h) !important; }
.att-grid > thead > tr > th.g-h { background: var(--g-h-h) !important; }
.att-grid > tbody > tr > td.att-name { background: var(--yf-surface-2); }
.att-grid > tbody > tr:hover > td.g-p { background: var(--g-p-h) !important; }
.att-grid > tbody > tr:hover > td.g-o { background: var(--g-o-h) !important; }
.att-grid > tbody > tr:hover > td.g-l { background: var(--g-l-h) !important; }
.att-grid > tbody > tr.att-inc > td { background: #FDECEA !important; }
.att-grid > tbody > tr > td.att-c, .att-grid > thead > tr > th.g-p, .att-grid > thead > tr > th.g-o,
.att-grid > thead > tr > th.g-l, .att-grid > thead > tr > th.g-h { border-color: rgba(31, 31, 36, .08); }


/* ---------------------------------------------------------------- 25. ACCOUNTS ENTRY v3 */
.acc-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acc-kpi { padding: 12px 14px; border: 1px solid var(--yf-line); border-radius: 14px; background: var(--yf-surface); }
.acc-kpi span { display: block; font-size: 12px; color: var(--yf-ink-2); }
.acc-kpi b { display: block; margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.acc-kpi.is-net { background: var(--yf-ok-soft); border-color: #B7E0CF; }
.acc-kpi.is-net b { color: var(--yf-ok); }
.acc-kpi.neg { background: var(--yf-danger-soft); border-color: #F3C2BB; }
.acc-kpi.neg b { color: var(--yf-danger); }

/* amount box with £ in front */
.acc-money { position: relative; display: inline-flex; flex-shrink: 0; }
.acc-money::before {
    content: "£"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 14px; font-weight: 500; color: var(--yf-ink-3); pointer-events: none;
}
.acc-money .acc-amt, .acc-money .accs-amt { padding-left: 24px; }
.acc-money .accs-amt { width: 100%; }
.accs-row .acc-money { display: flex; }

/* denser rows */
.acc-line { min-height: 50px; padding: 5px 0; }
.acc-label { font-size: 14px; font-weight: 500; }
.acc-amt { width: 136px; height: 40px; font-size: 15px; font-weight: 600; }
.acc-amt::placeholder, .accs-amt::placeholder { color: var(--yf-ink-3); font-weight: 400; }
.acc-block-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.acc-block-head span:last-child { font-size: 14px; letter-spacing: 0; }

/* last 7 days: small net bars */
.acc-bar-td { width: 90px; padding-left: 4px !important; }
.acc-bar { display: block; height: 6px; border-radius: 3px; min-width: 2px; }
.acc-bar.pos { background: var(--yf-ok); opacity: .65; }
.acc-bar.neg { background: var(--yf-danger); opacity: .65; }
.acc-trend td, .acc-trend th { padding: 7px 10px; font-size: 13px; }

/* drawer footer: filled count under the total */
.acc-drawer-total small { display: block; font-size: 11px; color: var(--yf-ink-3); }

@media (max-width: 900px) { .acc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (pointer: coarse) { .acc-amt { height: 44px; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- 26. ACCOUNTS ENTRY: VERTICAL DATES */
/* landscape tablet / desktop: dates stacked on the left of the form, today on top */
@media (min-width: 1000px) {
    .acc-shell { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 22px; align-items: start; }
    .acc-dates {
        position: sticky; top: 12px;
        flex-direction: column-reverse;              /* today first */
        flex-wrap: nowrap; gap: 6px;
        padding-right: 16px; border-right: 1px solid var(--yf-line);
    }
    .acc-dates .entry-date-btn { width: 100%; min-width: 0; padding: 8px 4px; }
}
/* portrait / small: same row of chips above the form as before */
@media (max-width: 999px) {
    .acc-shell .acc-dates { margin-bottom: 16px; }
}

/* ---------------------------------------------------------------- 26. ATTENDANCE WORKED TIME */
.att-grid { --g-t: #EAF1F8; --g-t-h: #DCE8F4; --g-t2: #F0EDF8; --g-t2-h: #E3DEF2; }
.att-grid > thead > tr > th.g-t, .att-grid > tbody > tr > td.g-t { background: var(--g-t) !important; }
.att-grid > thead > tr:first-child > th.g-t { background: var(--g-t-h) !important; }
.att-grid > tbody > tr:hover > td.g-t { background: var(--g-t-h) !important; }
.att-grid > thead > tr > th.g-t2, .att-grid > tbody > tr > td.g-t2 { background: var(--g-t2) !important; }
.att-grid > thead > tr:first-child > th.g-t2 { background: var(--g-t2-h) !important; }
.att-grid > tbody > tr:hover > td.g-t2 { background: var(--g-t2-h) !important; }
.att-grid > tbody > tr > td.att-t { padding: 4px 6px; text-align: center; }
.att-time { display: inline-flex; align-items: center; gap: 3px; }
.att-part {
    width: 38px; height: 34px; padding: 2px 2px; border: 1px solid #cbd5e1; border-radius: 6px;
    background: #fff; font-size: 14px; font-variant-numeric: tabular-nums; text-align: center;
}
.att-part:focus { border-color: var(--yf-ink); outline: none; box-shadow: 0 0 0 2px rgba(31, 31, 36, .08); }
.att-part:disabled { background: transparent; border-color: transparent; color: transparent; }
.att-part::placeholder { color: var(--yf-ink-3); font-size: 12px; }
.att-part:disabled::placeholder { color: transparent; }
/* Other Half is a dropdown now (it is only needed for half days) */
.att-grid > thead > tr > th.g-h { line-height: 1.15; }
.att-half-sel { height: 34px; min-width: 74px; max-width: 92px; padding: 2px 4px; font-weight: 600; text-align: center; text-align-last: center; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; font-size: 13px; }
.att-half-sel:focus { border-color: var(--yf-ink); outline: none; box-shadow: 0 0 0 2px rgba(31, 31, 36, .08); }
.att-grid tr.att-inc .att-half-sel { border-color: #dc2626; }
.att-colon { font-weight: 700; color: var(--yf-ink-2); }
.att-time:has(.att-part:disabled) .att-colon { color: transparent; }
.att-grid > tbody > tr > td.att-hrs { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.att-hrs-0 { color: var(--yf-ink-3); font-weight: 400; }
.att-total { margin-top: 8px; font-size: 13px; color: var(--yf-ink-2); }
.att-total b { color: var(--yf-ink); }

@media (pointer: coarse) { .att-part { height: 40px; width: 42px; font-size: 15px; } }

/* ---------------------------------------------------------------- 27. ATTENDANCE ON TABLETS AND PHONES */
/* status pill: its own column, only on narrow screens (Deputy / Fresha style) */
.att-grid > thead > tr > th.att-stat-h, .att-grid > tbody > tr > td.att-stat { display: none; }
.att-stat-sel {
    width: 100%; min-width: 104px; max-width: 150px; height: 34px; padding: 2px 8px;
    border: 1px solid #cbd5e1; border-radius: 999px; background: #fff;
    font-size: 13px; font-weight: 600; text-align: center; text-align-last: center;
}
.att-stat-sel:focus { border-color: var(--yf-ink); outline: none; box-shadow: 0 0 0 2px rgba(31, 31, 36, .08); }
.att-stat-sel.is-p { background: var(--g-p); border-color: #B5DEC6; color: #16704A; }
.att-stat-sel.is-o { background: var(--g-o); border-color: #E7DCA8; color: #6B5A16; }
.att-stat-sel.is-l { background: var(--g-l); border-color: #EFBDB6; color: #A62A1F; }
.att-stat-sel.is-n { color: var(--yf-ink-3); }

/* tablets: same table, one line per staff — just tighter */
@media (max-width: 1300px) {
    .att-grid { font-size: 12px; }
    .att-grid > thead > tr > th { padding: 6px 3px; font-size: 10px; letter-spacing: 0; }
    .att-grid > tbody > tr > td.att-name, .att-grid > thead > tr > th.att-name-h { padding: 6px 8px; font-size: 12px; max-width: 150px; }
    .att-grid > tbody > tr > td.att-c { padding: 4px 2px; }
    .att-grid label.att-cell { width: 34px; height: 34px; }
    .att-grid input[type="radio"] { width: 18px; height: 18px; }
    .att-grid > tbody > tr > td.att-t { padding: 4px 3px; }
    .att-part { width: 36px; font-size: 13px; height: 36px; }
    .att-colon { font-size: 11px; }
    .att-grid > tbody > tr > td.att-hrs { padding: 4px 6px; }
    .att-half-sel { min-width: 68px; max-width: 84px; font-size: 12px; padding: 2px 2px; }
    .att-stat-sel { min-width: 96px; max-width: 120px; font-size: 12px; padding: 2px 4px; }
    .att-grid > tbody > tr > td.att-name, .att-grid > thead > tr > th.att-name-h { max-width: 118px; font-size: 11px; }
    .att-part { width: 32px; }
}

/* narrow tablets in portrait: one status dropdown instead of seven radio columns,
   so the whole row still fits on one line and stays aligned */
@media (max-width: 900px) {
    .att-grid > thead > tr > th.g-p, .att-grid > thead > tr > th.g-o, .att-grid > thead > tr > th.g-l,
    .att-grid > tbody > tr > td.att-c { display: none; }
    .att-grid > thead > tr > th.att-stat-h { display: table-cell; text-align: center; }
    .att-grid > tbody > tr > td.att-stat { display: table-cell; padding: 4px 6px; }
}

/* phones: one card per staff (a table would never fit) */
@media (max-width: 760px) {
    .att-grid > thead { display: none; }
    .att-grid, .att-grid > tbody { display: block; width: 100%; }
    .att-grid > tbody > tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
        padding: 10px 12px; margin-bottom: 10px;
        border: 1px solid var(--yf-line); border-radius: 12px; background: var(--yf-surface);
    }
    .att-grid > tbody > tr.att-inc { border-color: #dc2626; background: #FDECEA !important; }
    .att-grid > tbody > tr > td { display: flex; align-items: center; border: 0 !important; padding: 0; background: transparent !important; }
    .att-grid > tbody > tr > td.att-name { flex-basis: 100%; flex-direction: column; align-items: flex-start; font-size: 15px; font-weight: 700; padding: 0 0 2px; max-width: none; }
    .att-grid > tbody > tr > td.att-stat { display: flex; flex-basis: 100%; padding: 0 0 4px; }
    .att-stat-sel { max-width: 220px; height: 40px; }
    .att-grid > tbody > tr > td.att-c { gap: 4px; padding: 4px 8px; border-radius: 8px; }
    .att-grid > tbody > tr > td.att-c::before { content: attr(data-lbl); font-size: 12px; font-weight: 700; color: var(--yf-ink-2); }
    .att-grid > tbody > tr > td.att-c.g-p { background: var(--g-p) !important; }
    .att-grid > tbody > tr > td.att-c.g-o { background: var(--g-o) !important; }
    .att-grid > tbody > tr > td.att-c.g-l { background: var(--g-l) !important; }
    .att-grid > tbody > tr > td.att-t { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 6px; }
    .att-grid > tbody > tr > td.att-t::before { content: attr(data-lbl); font-size: 11px; font-weight: 700; color: var(--yf-ink-2); }
    .att-grid > tbody > tr > td.att-h, .att-grid > tbody > tr > td.att-h.g-h { flex-basis: 100%; background: transparent !important; padding: 0; }
    .att-part { width: 44px; height: 40px; font-size: 14px; }
}

/* worked time: decimal hours + the "please check" notes */
.att-dec { display: block; font-size: 11px; font-weight: 400; color: var(--yf-ink-3); }
.att-note { display: block; font-size: 11px; font-weight: 600; line-height: 1.2; margin-top: 2px; max-width: 120px; }
.att-note.warn { color: #8A5A00; }
.att-note.bad { color: var(--yf-danger); }
.att-grid > tbody > tr.att-warn-time > td.g-t, .att-grid > tbody > tr.att-warn-time > td.g-t2 { background: #FFF6DF !important; }
.att-grid > tbody > tr.att-bad-time > td.g-t, .att-grid > tbody > tr.att-bad-time > td.g-t2 { background: #FBE6E3 !important; }
.att-grid > tbody > tr.att-bad-time .att-time { border-color: var(--yf-danger); }
.att-missing { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #8A5A00; }

/* ---------------------------------------------------------------- 28. SCHEDULE CONFIG (Attendance > Schedule Config) */
.sch-grid .sch-id { display: block; font-size: 11px; color: var(--yf-ink-3); font-weight: 400; }
.sch-grid .att-cell.sch-day { width: 38px; height: 34px; }
.sch-grid input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--yf-chilli, #EF5A3C); }

/* schedule config: its own tip line (not the Attendance Entry day total) */
.sch-tip { margin-top: 8px; font-size: 13px; color: var(--yf-ink-2); }
.sch-tip b { color: var(--yf-ink); }