:root {
    --color-bg: #f7f5fb;
    --color-surface: #ffffff;
    --color-border: #e5dff0;
    --color-text: #241b2f;
    --color-text-muted: #756a80;
    --color-primary: #6d28d9;
    --color-primary-hover: #5b21b6;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-success-bg: #f3e8ff;
    --color-success-text: #6b21a8;
    --color-error-bg: #fef2f2;
    --color-error-text: #991b1b;
    --radius: 16px;
    --sidebar-width: 258px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.settings-table{margin-top:1rem}.settings-table td{vertical-align:middle}.cell-detail{display:block;margin-top:.35rem;color:var(--color-text-muted);white-space:nowrap}.settings-table .count-pill{display:inline-grid;min-width:28px;text-align:center}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
}
body.modal-open { overflow: hidden; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: 0 0 0.4rem; }

/* --- App shell --- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg,#0b3c2a 0%,#082e21 100%);
    color: #d7e9df;
    padding: 1.45rem 1rem;
    flex-shrink: 0;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    overflow-y: auto;
}

.sidebar .brand {
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    margin: 0 .55rem 1.7rem;
    letter-spacing: -.02em;
}
.sidebar .brand img{display:block;width:124px;max-width:100%;height:auto;object-fit:contain}

.sidebar nav { display: flex; flex-direction: column; gap: 0.15rem; }

.sidebar nav a {
    color: #cde1d6;
    padding: 0.7rem .85rem;
    border-radius: 11px;
    font-size: 0.92rem;
}

.sidebar nav a:hover {
    background: rgba(255,255,255,0.08);
    text-decoration: none;
    color: #fff;
}
.sidebar nav a.active { color:#fff; background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.08)); box-shadow:inset 3px 0 #e8b94b; font-weight:700; }
.nav-badge{margin-left:auto;min-width:1.35rem;height:1.35rem;padding:0 .35rem;display:inline-grid;place-items:center;border-radius:999px;background:#f5d0fe;color:#581c87;font-size:.7rem;font-weight:850}.nav-badge[hidden]{display:none}
.push-toggle{width:100%;border:0;background:#f3e8ff;color:#6b21a8;text-align:left;padding:.65rem .75rem;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}.push-toggle:disabled{opacity:.55;cursor:not-allowed}.push-status{display:block;max-width:220px;padding:.35rem .2rem;color:var(--color-text-muted);line-height:1.35}

.main { flex: 1; min-width: 0; margin-left: var(--sidebar-width); }

.topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 72px;
    box-shadow: 0 4px 18px rgba(24,62,43,.04);
}

.hamburger { display: none; border: 0; background: transparent; padding: .5rem; cursor: pointer; margin-right: auto; }
.hamburger span { display: block; width: 24px; height: 2px; margin: 4px; background: var(--color-text); }
.account-menu { position: relative; margin-left: auto; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-trigger { border: 0; background: transparent; display: flex; gap: .55rem; align-items: center; cursor: pointer; color: var(--color-text); }
.account-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-weight: 700; }
.topbar-company { font-size: 1rem; font-weight: 750; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger > span:last-child { width: 8px; height: 8px; font-size: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; opacity: .65; }
.account-menu[open] .account-trigger > span:last-child { transform: rotate(225deg) translate(-2px, -2px); }
.account-dropdown { position: absolute; right: 0; top: calc(100% + .6rem); min-width: 230px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 16px 36px rgba(0,0,0,.14); padding: .45rem; }
.account-dropdown a, .account-dropdown button { display: block; width: 100%; text-align: left; padding: .65rem .75rem; border: 0; background: transparent; color: var(--color-text); cursor: pointer; font: inherit; border-radius: 7px; }
.account-dropdown a:hover, .account-dropdown button:hover { background: #f3f4f6; text-decoration: none; }
.account-email { padding: .65rem .75rem; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; font-size: .85rem; }
.account-name { padding: .65rem .75rem 0; font-weight: 750; color: var(--color-text); }
.page-alerts { padding: 1rem 1.5rem 0; max-width: 1100px; margin: 0 auto; }
.sidebar-backdrop { display: none; }

.impersonation-banner {
    background: #fffbeb;
    color: #92400e;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-right: auto;
}

.content { padding: 2rem; max-width: 1280px; margin: 0 auto; }

/* --- Cards & layout --- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 30px rgba(16,54,36,.055);
}

.card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.card-header-row h2 { margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 28px rgba(16,54,36,.055);
}

.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.2rem; }

/* --- Forms --- */
form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.85rem;
}

.checkbox-label { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    font-family: var(--font);
    font-size: 0.95rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    min-height: 44px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select{height:46px;line-height:1.2}input[type="file"]{height:auto;min-height:46px;padding:.45rem;max-width:100%;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface)}
textarea { min-height: 96px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row > label { flex: 1 1 180px; min-width: min(180px,100%); max-width:100%; }

.filter-row { display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:flex-end;margin-bottom:1rem;padding:1rem;border:1px solid var(--color-border);border-radius:14px;background:linear-gradient(145deg,#fff,#fbf9fe) }
.filter-row label { flex:1 1 180px;min-width:0;margin-bottom:0;font-size:.78rem;font-weight:800;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.035em }
.filter-row label input,.filter-row label select{margin-top:.35rem;text-transform:none;letter-spacing:normal}.filter-row>.btn,.filter-row>button{flex:0 0 auto;min-height:46px}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer; font-weight:650; transition:.18s ease;
    text-decoration: none;
}
.btn:hover { text-decoration: none; background: #f3f4f6; transform:translateY(-1px); }

.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.btn-lg { padding: 0.85rem 1.6rem; font-size: 1.05rem; }

/* --- Tables --- */
.table { width: 100%; border-collapse: separate; border-spacing:0; }
.table th, .table td {
    text-align: left;
    padding: .85rem .75rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.88rem;
}
.table th { color: var(--color-text-muted); font-weight: 750; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.08em; background:#f8faf9; }
.table tbody tr { transition:background .15s ease; }.table tbody tr:hover { background:#f8fbf9; }
.table-actions { white-space:nowrap; }
.table-actions .action-group,.action-group { display:flex; align-items:center; gap:.4rem; flex-wrap:nowrap; }
.table-actions form,.action-group form { margin:0; }
.table-scroll { overflow-x:auto; }

/* --- Badges / alerts --- */
.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: #eef2ff;
    color: #3730a3;
    text-transform: capitalize;
}
.badge-active, .badge-approved, .badge-published { background: #f3e8ff; color: #6b21a8; }
.badge-suspended, .badge-denied, .badge-terminated { background: #fef2f2; color: #991b1b; }
.badge-pending, .badge-draft, .badge-trial, .badge-invited { background: #fffbeb; color: #92400e; }
.badge-early { background: #e0f2fe; color: #075985; }
.badge-on_time { background: #f3e8ff; color: #6b21a8; }
.badge-late { background: #fef2f2; color: #991b1b; }

.alert { padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.9rem; margin-bottom: 1rem; }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert-error { background: var(--color-error-bg); color: var(--color-error-text); }
.alert-notice { background: #eff6ff; color: #1e40af; }

.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.simple-list li:last-child { border-bottom: none; }

.backup-codes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.backup-codes code { font-size: 1rem; }

.announcement { padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.announcement:last-child { border-bottom: none; }
.noticeboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}.pinned-notice{position:relative;padding:1.35rem 1.2rem 1.1rem;background:linear-gradient(145deg,#fff,#faf5ff);border:1px solid #e9d5ff;border-radius:6px 18px 8px 15px;box-shadow:0 10px 24px rgba(88,28,135,.10);transform:rotate(-.25deg)}.pinned-notice:nth-child(even){transform:rotate(.35deg);background:linear-gradient(145deg,#fff,#f5f3ff)}.notice-pin{position:absolute;top:.5rem;right:.7rem;color:#7c3aed;text-shadow:0 2px 3px rgba(76,29,149,.25)}.pinned-notice h2,.pinned-notice h3{margin:.15rem 1rem .65rem 0}.pinned-notice small{color:var(--color-text-muted)}

.clock-card { text-align: center; padding: 2rem; }
.staff-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-width:0; }
.staff-heading h1 { margin-bottom:.15rem; font-size:clamp(1.65rem,5vw,2.35rem); }
.staff-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;flex-wrap:wrap}
.clock-state { padding:.45rem .8rem; border-radius:999px; background:#f3f4f6; color:#4b5563; font-weight:700; font-size:.8rem; }
.clock-state.is-in { background:#dcfce7; color:#166534; }
.staff-tabs { display:flex; gap:.25rem; overflow-x:auto; border-bottom:1px solid var(--color-border); margin:1rem 0 1.25rem; }
.staff-tabs a { white-space:nowrap; padding:.75rem 1rem; color:var(--color-text-muted); text-decoration:none; border-bottom:3px solid transparent; }
.staff-tabs a.active { color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:700; }
.shift-list { list-style:none; padding:0; margin:0; }
.shift-list li { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--color-border); }
.shift-list small { display:block; color:var(--color-text-muted); margin-top:.2rem; }
.badge-complete { background:#f3f4f6; color:#4b5563; }.badge-upcoming { background:#eff6ff;color:#1d4ed8; }
.leave-strip { display:flex; flex-wrap:wrap; gap:.75rem; }.leave-strip article { min-width:180px; padding:.85rem; background:#f8faf9; border:1px solid var(--color-border); border-radius:10px; }.leave-strip article span,.leave-strip article small { display:block; margin-top:.25rem; }
.checkin-card { text-align:center; padding:clamp(2rem,7vw,5rem); }
.clock-button { width:210px; height:210px; border-radius:50%; border:12px solid #ede9fe; background:#6d28d9; color:#fff; box-shadow:0 15px 35px rgba(109,40,217,.25); cursor:pointer; font:inherit; }
.clock-button span { display:block; font-size:1.55rem; font-weight:800; }.clock-button small { display:block; margin-top:.35rem; opacity:.85; }.clock-button.clock-out { background:#dc2626; border-color:#fee2e2; box-shadow:0 15px 35px rgba(220,38,38,.22); }
.geofence-picker { margin:.5rem 0 1rem; }.geofence-map { height:340px; position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--color-border); background:#e8f0eb; z-index:1; margin-bottom:1rem; }
.leaflet-container { position: relative; overflow: hidden; }
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-map-pane svg, .leaflet-map-pane canvas { position: absolute; left: 0; top: 0; }
.leaflet-tile { width: 256px !important; height: 256px !important; max-width: none !important; max-height: none !important; padding: 0 !important; border: 0 !important; }
.leaflet-control-container { position: relative; z-index: 800; }
.leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; }.leaflet-top { top: 0; }.leaflet-bottom { bottom: 0; }.leaflet-left { left: 0; }.leaflet-right { right: 0; }.leaflet-control { pointer-events: auto; }
.geofence-marker { background:transparent; border:0; }
.geofence-marker span { display:block; width:22px; height:22px; background:#6d28d9; border:3px solid #fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 2px 7px rgba(70,35,110,.38); }
.location-status { min-height: 1.25rem; color: var(--color-text-muted); font-size: .85rem; }
.muted { color: var(--color-text-muted); }
.geofence-editor { margin-top: .35rem; min-width: 270px; }
.geofence-editor summary { color: var(--color-primary); cursor: pointer; font-weight: 600; }
.geofence-editor form { margin-top: .7rem; padding: .8rem; background: #f7faf8; border-radius: 8px; }
.geofence-editor .form-row { gap: .5rem; }
.geofence-editor label { min-width: 110px; margin-bottom: .55rem; }

code {
    background: #f3f4f6;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    font-size: 0.85em;
}

/* --- Auth pages (login, reset, invite, install) --- */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(160deg, #eef1ff 0%, #f5f6fa 60%);
}

.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 2.2rem 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 40px -20px rgba(20, 22, 43, 0.15);
}

.auth-subtitle { color: var(--color-text-muted); font-size: 0.9rem; margin-top: -0.6rem; margin-bottom: 1.2rem; }
.auth-links { text-align: center; font-size: 0.85rem; margin-top: 1rem; }

.auth-card form { display: flex; flex-direction: column; }
.auth-card .btn { width: 100%; text-align: center; margin-top: 0.4rem; }

@media (max-width: 720px) {
    .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
    .main { margin-left: 0; }
    .hamburger { display: block; }
    .sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 35; border: 0; background: rgba(0,0,0,.4); }
    .content { padding: 1rem; }
    .account-label { display: none; }
}

.modal { position: fixed; inset: 0; z-index: 100; background: rgba(10,18,14,.58); display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-card { width: min(100%, 430px); max-height:calc(100vh - 2rem); overflow:auto; background: #fff; border-radius: 18px; padding: 1.5rem; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.modal-card-wide { width:min(100%,850px); }.modal-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1.25rem; }.modal-heading h2 { font-size:1.45rem; margin:.15rem 0 0; }.modal-close,.icon-button { border:0;background:#eff4f1;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1.35rem;color:#476056; }.link-button { border:0;background:transparent;padding:.3rem 0;color:var(--color-primary);font:inherit;font-weight:750;cursor:pointer; }.link-button::before { content:"＋ "; }.eyebrow { color:var(--color-primary); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.modal-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.25rem; }
.dashboard-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.25rem; }
.dashboard-grid-single{grid-template-columns:minmax(0,1fr)}
.dashboard-column{display:grid;align-content:start;gap:1.25rem;min-width:0}.leave-balances-card{margin:0;padding:1rem 1.15rem;overflow:hidden;background:#fff}
.leave-balances-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.65rem;border-bottom:1px solid #eee9f5}.leave-balances-title{display:flex;align-items:center;gap:.55rem;color:#6d28d9}.leave-balances-title h2{margin:0;color:#6d28d9;font-size:1.08rem}.leave-title-icon{display:grid;place-items:center;width:29px;height:29px}.leave-title-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.leave-request-link{display:inline-flex;align-items:center;gap:.35rem;color:#6d28d9;font-size:.78rem;font-weight:800}.leave-request-link:hover{text-decoration:none;color:#5b21b6}
.leave-balance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem}
.leave-balance-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto 14px;align-items:center;gap:.7rem;min-width:0;min-height:66px;padding:.65rem .15rem;border-bottom:1px solid #eee9f5;color:#3b3150!important;text-decoration:none!important;transition:background .16s ease}
.leave-balance-item:hover{background:#faf7ff}.leave-balance-item:focus-visible{outline:2px solid #7c3aed;outline-offset:-2px;border-radius:9px}
.leave-balance-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#f3effa;color:#6d28d9!important}
.leave-balance-icon svg{width:23px;height:23px;fill:none;stroke:#6d28d9!important;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.leave-balance-rx{color:#6d28d9!important;font-family:Georgia,serif;font-size:1.15rem;font-weight:800;font-style:italic}
.leave-balance-icon svg.bi{fill:#6d28d9!important;stroke:none!important}
.leave-balance-name{overflow:hidden;color:#3b3150!important;font-size:.92rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.leave-balance-amount{min-width:57px;padding:.34rem .58rem;border-radius:999px;background:#faf8fd;color:#6d28d9!important;font-size:1rem;line-height:1;text-align:center}.leave-balance-amount small{margin-left:.08rem;color:#6d28d9!important;font-size:.72rem;font-weight:800}.leave-balance-arrow{color:#b8a9cc!important;font-size:1.55rem;font-weight:500;line-height:1;transition:transform .16s ease}.leave-balance-item:hover .leave-balance-arrow{transform:translateX(2px);color:#6d28d9!important}.leave-balances-empty{grid-column:1/-1;margin:.75rem 0 0;padding:.75rem;border:1px dashed var(--color-border);border-radius:10px;color:var(--color-text-muted);text-align:center}
@media(max-width:700px){.leave-balance-grid{grid-template-columns:1fr}.leave-balances-heading{align-items:flex-start}.leave-request-link{margin-top:.2rem}.leave-balance-item{min-height:62px}}
.stat-success .stat-value { color: #15803d; }
.stat-danger .stat-value { color: #dc2626; }
.stat-warning .stat-value { color: #d97706; }
.donut-wrap { display: flex; align-items: center; gap: 2rem; padding: 1rem 0; }
.donut-chart { width: 190px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#21a66b 0 calc(var(--clocked)*1%), #e45757 0 calc((var(--clocked) + var(--absent))*1%), #e5ad35 0 calc((var(--clocked) + var(--absent) + var(--waiting))*1%), #8067c9 0); position: relative; box-shadow:0 14px 30px rgba(15,107,71,.13); }
.donut-chart::after { content: ""; width: 105px; aspect-ratio: 1; border-radius: 50%; background: #fff; position: absolute; }
.donut-chart span { position: relative; z-index: 1; font-size: 1.45rem; font-weight: 800; }
.chart-legend { list-style: none; padding: 0; margin: 0; }
.chart-legend li { margin: .5rem 0; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .5rem; }
.legend-clocked { background: #16a34a; }.legend-absent { background: #dc2626; }.legend-waiting { background: #f59e0b; }.legend-leave { background: #7c3aed; }
.approval-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.approval-link-grid a{display:flex;align-items:center;gap:.8rem;padding:1rem;border:1px solid var(--color-border);border-radius:14px;background:#fcfaff;text-decoration:none}.approval-link-grid strong{display:grid;place-items:center;min-width:2.4rem;height:2.4rem;border-radius:50%;background:#ede9fe;color:#6d28d9;font-size:1.15rem}.approval-link-grid span{color:var(--color-text);font-weight:750}@media(max-width:700px){.approval-link-grid{grid-template-columns:1fr}}
.notes-cell{min-width:11rem;max-width:24rem;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.section-gap { margin-top: 1.25rem; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; }.page-heading h1 { margin:.15rem 0; font-size:2rem; letter-spacing:-.035em; }.page-heading p { margin:0;color:var(--color-text-muted); }.policy-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1.25rem; }.policy-card { display:grid;grid-template-columns:auto 1fr;gap:1rem;margin:0; }.policy-icon { width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#e5f5ec;color:var(--color-primary);font-weight:850; }.policy-card p { color:var(--color-text-muted);margin:.2rem 0 .6rem; }.policy-meta { display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.65rem; }.policy-meta span,.tier-chip,.count-pill { background:#f0f5f2;color:#486157;border-radius:999px;padding:.25rem .55rem;font-size:.73rem; }.tier-chip { display:inline-block;margin:.15rem .2rem .15rem 0; }.empty-state { grid-column:1/-1;text-align:center;padding:3rem; }.option-row { display:flex;flex-wrap:wrap;gap:1.1rem;padding:1rem;background:#f7faf8;border-radius:12px;margin-bottom:1rem; }.option-row label { margin:0; }.tier-builder { border:1px solid var(--color-border);border-radius:14px;padding:1rem; }.tier-builder p { margin:0; }.tier-row { display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:.7rem;align-items:end;padding-top:.75rem;border-top:1px solid var(--color-border); }.tier-row label { margin:0; }.tier-row .icon-button { margin-bottom:.05rem; }.count-pill { font-weight:750; }
@media (max-width:720px){.page-heading{align-items:flex-start;flex-direction:column}.tier-row{grid-template-columns:1fr 1fr}.tier-row .icon-button{align-self:end}.geofence-map{height:280px}}
.bar-chart { display:grid;gap:.8rem; }.bar-row { display:grid;grid-template-columns:minmax(90px,1fr) 2fr 30px;align-items:center;gap:.7rem;font-size:.84rem; }.bar-row > div { height:10px;background:#edf3ef;border-radius:999px;overflow:hidden; }.bar-row i { display:block;height:100%;background:linear-gradient(90deg,#0f6b47,#45b879);border-radius:999px; }.metric-comparison { display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-height:150px;align-items:center; }.metric-comparison div { text-align:center;padding:1.3rem;border-radius:14px;background:linear-gradient(145deg,#f1faf5,#e8f4ed); }.metric-comparison div:last-child { background:linear-gradient(145deg,#fff6f5,#fcebea); }.metric-comparison strong { display:block;font-size:2.2rem;color:var(--color-primary); }.metric-comparison div:last-child strong { color:#c84a4a; }.metric-comparison span { color:var(--color-text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:750; }
.policy-title-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.policy-title-row h2{margin:0}.danger-link{border:0;background:transparent;color:var(--color-danger);font:inherit;font-size:.78rem;font-weight:750;padding:.6rem 0 0;cursor:pointer}.undo-toast{position:fixed;right:1.25rem;bottom:1.25rem;z-index:200;display:flex;align-items:center;gap:1rem;background:#123c2b;color:#fff;padding:.85rem 1rem;border-radius:13px;box-shadow:0 18px 45px rgba(0,0,0,.25)}.undo-toast form{margin:0}.undo-toast button{border:0;background:#fff;color:#0f6b47;border-radius:8px;padding:.45rem .7rem;font-weight:800;cursor:pointer}.map-error{padding:2rem;text-align:center;color:var(--color-error-text)}
.sparkline{width:140px;height:42px;overflow:visible}.sparkline polyline{fill:none;stroke:#21a66b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.line-chart{width:100%;height:240px;overflow:visible;border-bottom:1px solid var(--color-border);background:repeating-linear-gradient(to bottom,transparent 0,transparent 54px,#edf3ef 55px)}.line-chart polyline{fill:none;stroke:#0f6b47;stroke-width:4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.chart-axis{display:flex;justify-content:space-between;color:var(--color-text-muted);font-size:.75rem;margin-top:.55rem}.trend-card{padding-bottom:1rem}
.attendance-chart{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:.6rem;align-items:stretch}.chart-y-axis{display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:var(--color-text-muted);font-size:.72rem;padding:.05rem 0}.attendance-chart .line-chart polyline{stroke:var(--color-primary)}.chart-axis-dates{margin-left:4.1rem}
.leave-date-range{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:end;padding:1rem;border:1px solid #d8c8f5;background:#faf7ff;border-radius:14px}.leave-date-range span{padding-bottom:.9rem;color:var(--color-primary);font-size:1.4rem}.leave-range-summary{margin:.65rem 0 1rem;padding:.65rem .8rem;background:#f3e8ff;color:#5b21b6;border-radius:10px;font-weight:650}.workday-picker{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0;padding:1rem;border:1px solid var(--color-border);border-radius:12px}.workday-picker legend{font-weight:750;padding:0 .4rem}.department-supervisor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.department-supervisor-card{padding:1rem;border:1px solid var(--color-border);border-radius:14px;background:#fcfaff}.supervisor-checklist{display:grid;gap:.45rem;margin:.75rem 0}@media(max-width:560px){.leave-date-range{grid-template-columns:1fr}.leave-date-range span{display:none}}
.schedule-range-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.85rem;margin-bottom:1rem}.schedule-range-filter .leave-date-range{padding:.75rem}.schedule-range-filter .btn{margin-bottom:.05rem}@media(max-width:650px){.schedule-range-filter{grid-template-columns:1fr}.schedule-range-filter .btn{width:100%}}
.two-factor-page{min-height:100vh;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 50% 0,#dff2e7,transparent 42%),#f4f7f5}.verification-card{width:min(100%,500px);background:#fff;border:1px solid var(--color-border);border-radius:22px;padding:2.5rem;text-align:center;box-shadow:0 24px 70px rgba(12,67,43,.14)}.verification-card h1{font-size:2rem;margin:.5rem 0}.verification-card>p{color:var(--color-text-muted);margin:0 auto 1.5rem;max-width:380px}.security-mark{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 1rem;border-radius:50%;background:linear-gradient(145deg,#0f6b47,#2da873);color:#fff;font-size:1.8rem;font-weight:850;box-shadow:0 12px 25px rgba(15,107,71,.22)}.otp-group{display:grid;grid-template-columns:repeat(6,1fr);gap:.55rem;margin:1.5rem 0}.otp-group input[data-otp-digit]{width:100%;min-width:0;aspect-ratio:1;border:2px solid #d6e2db;border-radius:12px;text-align:center;font-size:1.55rem;font-weight:850;padding:0}.otp-group input[data-otp-digit]:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(15,107,71,.12)}.btn-block{width:100%;min-height:50px}.security-note{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.25rem;color:var(--color-text-muted)}.security-pill{padding:.4rem .75rem;border-radius:999px;background:#e4f5eb;color:#0f6b47;font-size:.75rem;font-weight:800}.step-number{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0f6b47;color:#fff;font-weight:800;margin-bottom:.6rem}.verification-step{max-width:760px}.success-hero{text-align:center;max-width:650px;margin:0 auto 1.5rem}.success-hero p{color:var(--color-text-muted)}
@media(max-width:560px){.verification-card{padding:1.5rem}.otp-group{gap:.3rem}.otp-group input[data-otp-digit]{font-size:1.2rem;border-radius:9px}.line-chart{height:180px}}
.mobile-bottom-nav{display:none}@media(max-width:900px){html,body{max-width:100%;overflow-x:hidden}body{padding-bottom:calc(82px + env(safe-area-inset-bottom));font-size:clamp(14px,3.8vw,16px)}input,select,textarea{font-size:16px}.mobile-bottom-nav{position:fixed!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:100vw;overflow:hidden;left:0;right:0;bottom:0;z-index:2147483000;min-height:68px;background:rgba(255,255,255,.98);border-top:1px solid var(--color-border);box-shadow:0 -10px 30px rgba(60,30,90,.14);padding:.55rem max(.35rem,env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) max(.35rem,env(safe-area-inset-left));backdrop-filter:blur(15px);transform:translateZ(0)}.mobile-bottom-nav a{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;color:#756a80;font-size:clamp(.6rem,2.7vw,.7rem);font-weight:700;text-decoration:none;min-height:48px}.mobile-bottom-nav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-bottom-nav a.active{color:var(--color-primary);background:#f4efff;border-radius:12px}.mobile-bottom-nav .nav-icon{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mobile-bottom-nav a:active{color:var(--color-primary);transform:scale(.96)}.sidebar,.sidebar-backdrop,.hamburger{display:none!important}.main{margin-left:0!important;min-width:0}.content{padding-bottom:1.5rem;min-width:0}}
@media(max-width:600px){.staff-heading{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}.staff-heading-actions{justify-content:space-between;width:100%}.staff-heading-actions .btn{white-space:normal}.card{padding:clamp(1rem,4vw,1.35rem)}h1{font-size:clamp(1.65rem,8vw,2rem)}h2{font-size:clamp(1.15rem,5vw,1.45rem)}}
@media (max-width: 800px) { .dashboard-grid { grid-template-columns: 1fr; } .donut-wrap { flex-direction: column; align-items: flex-start; } }
.calendar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.calendar-event { display: flex; gap: .8rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--color-border); }
.calendar-event time { width: 48px; height: 50px; border: 1px solid var(--color-border); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: uppercase; font-size: .7rem; color: var(--color-text-muted); }
.calendar-event time b { font-size: 1.1rem; line-height: 1; color: var(--color-primary); }
.calendar-event span { display: flex; flex-direction: column; }
.calendar-event small { color: var(--color-text-muted); }
@media (max-width: 900px) { .calendar-grid { grid-template-columns: 1fr; } }
.two-factor-setup { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.undo-toast { opacity: 1; transform: translateY(0); transition: opacity .4s ease, transform .4s ease; }
.undo-toast.undo-toast-expiring { opacity: 0; transform: translateY(10px); pointer-events: none; }
.two-factor-qr { width: 244px; min-height: 244px; display: grid; place-items: center; padding: 12px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; }
.two-factor-qr img, .two-factor-qr canvas { display: block; max-width: 100%; height: auto !important; }
.qr-loading, .qr-error { color: var(--color-text-muted); text-align: center; font-size: .85rem; }
.qr-error { color: var(--color-error-text); }
.qr-help { max-width: 244px; color: var(--color-text-muted); font-size: .78rem; margin: .65rem 0 0; }
.secret-key { display: inline-block; font-size: 1rem; letter-spacing: .12em; overflow-wrap: anywhere; margin-bottom: 1rem; }
.two-factor-manual details { margin-top: .5rem; }
.two-factor-manual summary { cursor: pointer; color: var(--color-primary); }
.provisioning-uri { display: block; word-break: break-all; margin-top: .7rem; }
@media (max-width: 700px) { .two-factor-setup { grid-template-columns: 1fr; } }

/* Purple HR workspace additions */
.btn-primary,.clock-button:not(.clock-out){background:var(--color-primary)}
.policy-icon,.tier-chip,.count-pill{background:#f0e9ff;color:#5b21b6}.eyebrow{color:var(--color-primary)}
.profile-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid #ede9fe}.profile-photo-empty{display:grid;place-items:center;background:#ede9fe;color:#6d28d9;font-size:1.5rem;font-weight:800}.profile-photo-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}.approval-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.approval-grid article{display:grid;justify-items:center;gap:.65rem;padding:1rem;border:1px solid var(--color-border);border-radius:14px}.token-display{display:grid;gap:.5rem;padding:1rem;margin:1rem 0;background:#f4efff;border:1px solid #d8c8f5;border-radius:12px}.token-display code{overflow-wrap:anywhere;font-size:.9rem}.org-chart{overflow:hidden}.org-chart-scroll{overflow:auto;padding:1rem}.org-chart ul{display:flex;justify-content:center;gap:1.25rem;list-style:none;padding:1.5rem 0 0;margin:0;position:relative}.org-chart li{text-align:center;position:relative;min-width:180px}.org-chart li>ul{border-top:2px solid #d8c8f5}.org-person{display:grid;justify-items:center;gap:.25rem;padding:1rem;background:#fff;border:1px solid #ded2ef;border-top:4px solid var(--color-primary);border-radius:14px;box-shadow:0 8px 22px rgba(75,40,110,.08)}.org-person img,.org-person .avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}.org-person .avatar{display:grid;place-items:center;background:#ede9fe;color:#6d28d9;font-weight:800}.org-person small,.org-person em{color:var(--color-text-muted);font-style:normal;font-size:.78rem}

/* --- Split authentication experience --- */
.auth-split-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 1.08fr) minmax(520px, 0.92fr);
    background: #fbfaf7;
    color: #102119;
}
.auth-hero {
    position: relative;
    min-height: 100vh;
    padding: 3.4rem 3.5rem;
    color: #fff;
    background:
        radial-gradient(circle at 100% 100%, rgba(204, 188, 27, .8), transparent 45%),
        linear-gradient(145deg, #0b5237 0%, #18704f 75%, #7e901b 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-brand {
    position: absolute;
    top: 3rem;
    left: 3.5rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 800;
    text-decoration: none;
}
.auth-brand:hover { text-decoration: none; }
.auth-brand img {
    display: block;
    width: min(180px, 38vw);
    height: auto;
}
.auth-brand b { color: #f2bd35; }
.auth-brand-icon {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid #f2bd35;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #f2bd35;
    font-size: 1rem;
}
.auth-hero-copy { max-width: 650px; }
.auth-hero-copy h1 { color: #fff; font-size: clamp(2rem, 3.2vw, 3rem); margin: 0 0 .75rem; letter-spacing: -.04em; }
.auth-hero-copy p, .auth-hero-copy li { color: rgba(255,255,255,.78); font-size: 1.2rem; line-height: 1.55; }
.auth-hero-copy ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.auth-hero-copy li { margin: .45rem 0; }
.auth-hero-copy li::before { content: "✓"; margin-right: .45rem; color: #fff; }
.auth-copyright { position: absolute; bottom: 2.2rem; left: 3.5rem; color: rgba(255,255,255,.6); }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 3rem; overflow: auto; }
.auth-form-wrap { width: min(100%, 540px); }
.auth-form-wrap h1 { font-size: 2rem; margin: 0 0 .35rem; letter-spacing: -.035em; }
.auth-lead, .auth-note { color: #587066; line-height: 1.4; margin: 0 0 1.75rem; }
.auth-note { font-size: .88rem; margin-top: -1rem; }
.auth-form-wrap form label { color: #14251d; font-size: .95rem; font-weight: 650; gap: .5rem; margin-bottom: 1rem; }
.auth-form-wrap form label span, .auth-form-wrap form small { color: #61776e; font-weight: 400; }
.auth-form-wrap input[type="text"],
.auth-form-wrap input[type="email"],
.auth-form-wrap input[type="password"],
.auth-form-wrap input[type="tel"] {
    min-height: 3.35rem;
    padding: .75rem 1rem;
    border-color: #cadbd4;
    border-radius: 12px;
    background: #fff;
}
.auth-form-wrap input:focus { border-color: #125d40; box-shadow: 0 0 0 3px rgba(18,93,64,.12); }
.auth-form-wrap .btn-primary { min-height: 3.35rem; width: 100%; background: #0d5338; border-color: #0d5338; font-weight: 700; }
.auth-form-wrap .btn-primary:hover { background: #083f2b; }
.auth-links, .auth-switch { text-align: center; margin-top: 1.6rem; }
.auth-switch { color: #61776e; margin-top: 2.5rem; }
.auth-links a, .auth-switch a { color: #0d5338; font-weight: 700; }
.auth-register-page { height: 100vh; overflow: hidden; }
.auth-register-page .auth-hero { height: 100vh; min-height: 0; position: sticky; top: 0; overflow: hidden; }
.auth-register-page .auth-panel { height: 100vh; align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.auth-register-page .auth-form-wrap { padding: 1rem 0 3rem; }
@media (max-width: 850px) {
    .auth-split-page { grid-template-columns: 1fr; }
    .auth-hero { min-height: 260px; padding: 7rem 2rem 2rem; }
    .auth-brand { left: 2rem; top: 2rem; }
    .auth-copyright { display: none; }
    .auth-panel { padding: 2.5rem 1.25rem; }
    .auth-register-page { height: auto; overflow: visible; }
    .auth-register-page .auth-hero { position: relative; height: auto; min-height: 260px; overflow: visible; }
    .auth-register-page .auth-panel { height: auto; overflow: visible; }
}
.geofence-map:empty::after { content: "Loading map..."; min-height: 180px; display: grid; place-items: center; padding: 1rem; text-align: center; color: var(--color-text-muted); background: #f5f8f6; border: 1px dashed var(--color-border); border-radius: 10px; }

/* Consistent non-wrapping, horizontally scrollable data tables. */
.table-scroll,.card:has(> table){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.table{width:max-content;min-width:100%;white-space:nowrap}.table th,.table td{white-space:nowrap;overflow:visible}.table td form{min-width:max-content}
.profile-requests-card{margin-top:1.5rem}.profile-requests-card .table{min-width:640px}

/* Attendance uses distinct semantic colours; the remaining product palette stays purple. */
.stat-success .stat-value{color:#16a34a}.donut-chart{background:conic-gradient(#16a34a 0 calc(var(--clocked)*1%),#dc2626 0 calc((var(--clocked) + var(--absent))*1%),#f59e0b 0 calc((var(--clocked) + var(--absent) + var(--waiting))*1%),#7c3aed 0 calc((var(--clocked) + var(--absent) + var(--waiting) + var(--leave))*1%),#94a3b8 0);box-shadow:0 14px 30px rgba(109,40,217,.13)}
.legend-clocked{background:#16a34a}.legend-absent{background:#dc2626}.legend-waiting{background:#f59e0b}.legend-leave{background:#7c3aed}.legend-off-duty{background:#94a3b8}.bar-row i{background:linear-gradient(90deg,#6d28d9,#a78bfa)}.sparkline polyline{stroke:#8b5cf6}.line-chart polyline{stroke:#6d28d9}.undo-toast{background:#4c1d95}.undo-toast button{color:#6d28d9}.security-mark{background:linear-gradient(145deg,#6d28d9,#a855f7);box-shadow:0 12px 25px rgba(109,40,217,.22)}.security-pill{background:#f3e8ff;color:#6b21a8}.step-number{background:#6d28d9}.two-factor-page{background:radial-gradient(circle at 50% 0,#ede9fe,transparent 42%),#f7f5fb}.policy-icon{background:#f3e8ff}.option-row{background:#faf7ff}.metric-comparison div{background:linear-gradient(145deg,#faf7ff,#f1eaff)}
.leaflet-overlay-pane svg{pointer-events:none}.leaflet-overlay-pane path{stroke:#6d28d9;fill:#8b5cf6}.geofence-map:empty::after{background:#faf7ff}
.auth-hero{background:linear-gradient(145deg,#3b0764,#6d28d9)}.auth-form-wrap input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.14)}.auth-form-wrap .btn-primary{background:#6d28d9;border-color:#6d28d9}.auth-form-wrap .btn-primary:hover{background:#5b21b6}.auth-links a,.auth-switch a{color:#6d28d9}
.auth-lead,.auth-note,.auth-switch,.auth-form-wrap form label span,.auth-form-wrap form small{color:#756a80}.auth-form-wrap form label{color:#241b2f}.auth-form-wrap input[type="text"],.auth-form-wrap input[type="email"],.auth-form-wrap input[type="password"],.auth-form-wrap input[type="tel"]{border-color:#ded2ef}.modal-close,.icon-button{background:#f3e8ff;color:#6b21a8}.geofence-editor form{background:#faf7ff}.policy-meta span,.tier-chip,.count-pill{background:#f3e8ff;color:#6b21a8}.bar-row>div,.line-chart{background-color:#f3effa}
.directory-toolbar{display:flex;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.directory-toolbar label{margin:0}.contact-list a{display:block}
.sidebar{background:linear-gradient(180deg,#3b0764 0%,#240046 100%);color:#ede9fe}.sidebar nav a{color:#ddd6fe}.sidebar nav a.active{box-shadow:inset 3px 0 #c4b5fd}.topbar,.card,.stat-card{box-shadow:0 8px 30px rgba(76,29,149,.06)}.table th{background:#faf7ff}.table tbody tr:hover{background:#fcfaff}
.employee-checklist{border:1px solid var(--color-border);border-radius:14px;padding:1rem;margin:1rem 0}.employee-checklist legend{font-weight:800;color:var(--color-text)}.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.55rem}.checkbox-grid label{padding:.55rem;border:1px solid var(--color-border);border-radius:9px;margin:0}.select-all-row{font-weight:800;margin-bottom:.8rem!important}
.remembered-identity{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem;padding:1rem;margin-bottom:1rem;border:1px solid #d8c8f5;border-radius:12px;background:#faf7ff}.remembered-identity strong,.remembered-identity .checkbox-label{grid-column:1/-1}.remembered-identity span{padding:.35rem .55rem;border-radius:8px;background:#fff;color:#5b21b6;font-weight:700}.remember-me{margin:.25rem 0 1rem!important}.edited-label{display:inline-block;vertical-align:middle;padding:.18rem .45rem;border-radius:999px;background:#f3e8ff;color:#6b21a8;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em}.directory-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1rem}.employee-business-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:1rem;align-items:center;padding:1.15rem;border:1px solid #ded2ef;border-radius:16px;background:linear-gradient(145deg,#fff,#faf7ff);box-shadow:0 10px 24px rgba(76,29,149,.08)}.business-card-photo img,.business-card-photo span{display:grid;place-items:center;width:76px;height:76px;border-radius:14px;object-fit:cover;background:#ede9fe;color:#6d28d9;font-size:1.35rem;font-weight:850}.business-card-details{min-width:0}.business-card-details h3{margin:0 0 .25rem}.business-card-details p{margin:0;color:#5b21b6;font-weight:750}.business-card-details>span{display:block;margin:.15rem 0 .65rem;color:var(--color-text-muted);font-size:.82rem}.business-card-contact{display:grid;gap:.25rem}.business-card-contact a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}@media(max-width:390px){.employee-business-card{grid-template-columns:58px minmax(0,1fr)}.business-card-photo img,.business-card-photo span{width:58px;height:58px}}
/* Consistent Safari-safe controls, including inputs whose type attribute is omitted. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{display:block;inline-size:100%;max-inline-size:100%;min-inline-size:0;box-sizing:border-box;font-family:var(--font);font-size:.95rem;padding:.65rem .75rem;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-text)}input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select{min-block-size:46px}input[type="date"],input[type="time"],input[type="datetime-local"]{-webkit-appearance:none;appearance:none;min-width:0;width:100%}input[type="file"]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:.38rem;font-size:.82rem}input[type="file"]::file-selector-button{-webkit-appearance:none;max-width:48%;margin-right:.55rem;padding:.55rem .65rem;border:0;border-radius:8px;background:#ede9fe;color:#5b21b6;font:inherit;font-weight:750;overflow:hidden;text-overflow:ellipsis}.profile-photo-row form,.profile-photo-row label{min-width:0;max-width:100%;width:min(100%,420px)}
.employee-business-card{position:relative}.you-tag{display:inline-block;padding:.14rem .42rem;border-radius:999px;background:#6d28d9;color:#fff;font-size:.63rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.employee-business-card>.you-tag{position:absolute;top:.6rem;right:.65rem}.celebrations-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#faf5ff 55%,#fdf4ff 100%)}.celebration-symbol{font-size:2rem}.celebration-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;position:relative;z-index:1}.celebration-person{display:grid;grid-template-columns:52px minmax(0,1fr);gap:.75rem;align-items:center;padding:.8rem;border:1px solid #eadcff;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 7px 18px rgba(109,40,217,.07)}.celebration-photo img,.celebration-photo span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;object-fit:cover;background:#ede9fe;color:#6d28d9;font-weight:850}.celebration-person p{margin:.15rem 0;color:#6b21a8;font-weight:700}.celebration-person small{color:var(--color-text-muted)}.confetti{position:absolute;inset:0;pointer-events:none;opacity:.6}.confetti i{position:absolute;width:8px;height:14px;border-radius:2px;background:#8b5cf6;transform:rotate(25deg)}.confetti i:nth-child(1){left:5%;top:12%;background:#f59e0b}.confetti i:nth-child(2){left:25%;top:5%;transform:rotate(70deg);background:#ec4899}.confetti i:nth-child(3){left:48%;top:16%;background:#22c55e}.confetti i:nth-child(4){right:33%;top:5%;transform:rotate(105deg)}.confetti i:nth-child(5){right:15%;top:18%;background:#f97316}.confetti i:nth-child(6){right:4%;top:6%;transform:rotate(55deg);background:#06b6d4}
@media(max-width:900px){.org-chart-scroll{padding-left:1rem;scroll-padding-left:1rem}.org-chart ul{justify-content:flex-start;width:max-content;min-width:100%}.org-chart li{min-width:170px}.org-chart-scroll>.org-chart-tree,.org-chart-scroll>ul{margin-left:0}.profile-photo-row{align-items:flex-start}.profile-photo-row form{flex:1 1 210px}}
.recent-announcements-scroll{max-height:28rem;overflow-y:auto;overscroll-behavior:contain;padding-right:.5rem;scrollbar-gutter:stable}.pdf-icon{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;margin-right:.35rem}.danger-link{color:#b4235a}.confetti i{animation:confetti-fall 3.8s linear infinite;top:-18px}.confetti i:nth-child(2){animation-delay:-1.2s;animation-duration:4.5s}.confetti i:nth-child(3){animation-delay:-2.4s;animation-duration:3.2s}.confetti i:nth-child(4){animation-delay:-.6s;animation-duration:4.1s}.confetti i:nth-child(5){animation-delay:-3s;animation-duration:3.5s}.confetti i:nth-child(6){animation-delay:-1.8s;animation-duration:4.8s}@keyframes confetti-fall{0%{transform:translate3d(0,-20px,0) rotate(0);opacity:0}10%{opacity:1}55%{transform:translate3d(18px,120px,0) rotate(220deg)}100%{transform:translate3d(-10px,280px,0) rotate(480deg);opacity:0}}@media(prefers-reduced-motion:reduce){.confetti i{animation:none;top:12%}}
.announcement-actions{gap:.4rem;flex-wrap:nowrap}.announcement-actions form{margin:0}.announcement-actions .btn{min-height:0;padding:.34rem .62rem;font-size:.74rem;line-height:1.15;border-radius:7px}.announcement-edit-button{background:#fff;color:var(--color-primary);border:1px solid var(--color-border)}.announcement-edit-button:hover{background:#faf7ff;border-color:#a78bfa}
.celebrations-card:not(:has(.celebration-person)) .confetti{display:none}
.owner-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}.owner-metrics>.metric-card{grid-column:span 2}.owner-chart-card{grid-column:span 3;position:relative}.owner-chart-card canvas{display:block;width:100%;height:auto;max-height:260px}.metric-card{padding:1rem;border:1px solid var(--color-border);border-radius:14px;background:#fff;box-shadow:0 7px 18px rgba(109,40,217,.06)}.metric-card span{display:block;color:var(--color-text-muted);font-size:.8rem}.metric-card strong{display:block;margin-top:.25rem;font-size:1.5rem;color:#4c1d95}.chart-legend{display:flex;flex-wrap:wrap;gap:.7rem;font-size:.75rem;color:var(--color-text-muted)}.chart-legend span{display:flex;align-items:center;gap:.3rem}.chart-legend i{width:.65rem;height:.65rem;border-radius:50%}.gauge-value{position:absolute;left:50%;bottom:2.7rem;transform:translateX(-50%);font-size:1.5rem;color:#4c1d95}.subscription-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}@media(max-width:800px){.owner-metrics{grid-template-columns:1fr}.owner-metrics>.metric-card,.owner-chart-card{grid-column:auto}.subscription-summary-grid{grid-template-columns:1fr}}
.owner-org-manager>summary{cursor:pointer;padding:.45rem 0;color:var(--color-primary)}
.employee-create-panel>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem}.employee-create-panel>summary::-webkit-details-marker{display:none}.employee-create-panel>summary::after{content:'＋';display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#f3e8ff;color:#6b21a8;font-size:1.25rem;font-weight:800}.employee-create-panel[open]>summary::after{content:'−'}.employee-create-panel>summary span,.employee-create-panel>summary small{display:block}.employee-create-panel>summary small{margin-top:.2rem;color:var(--color-text-muted);font-weight:400}.employee-create-panel>form{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--color-border)}
@media(max-width:900px){.org-chart-scroll{padding-inline:1.5rem;direction:ltr}.org-chart-scroll>ul{width:max-content!important;min-width:max-content!important;justify-content:flex-start!important}.org-chart-scroll>ul>li:first-child{margin-left:0}.org-chart-scroll::after{content:"";display:block;width:1px;height:1px;margin-left:1rem}}
/* Explicit tree connectors between every reporting level. */
.org-chart li>ul{position:relative;padding-top:3rem;border-top:0;width:max-content;min-width:100%}.org-chart li>ul::before{content:"";position:absolute;top:0;left:50%;height:1.5rem;border-left:2px solid #a78bfa}.org-chart li>ul>li::before{content:"";position:absolute;top:-1.5rem;left:-.625rem;right:-.625rem;border-top:2px solid #a78bfa}.org-chart li>ul>li:first-child::before{left:50%}.org-chart li>ul>li:last-child::before{right:50%}.org-chart li>ul>li:only-child::before{display:none}.org-chart li>ul>li::after{content:"";position:absolute;top:-1.5rem;left:50%;height:1.5rem;border-left:2px solid #a78bfa}.org-chart li>ul>li:only-child::after{height:1.5rem}.org-person{position:relative;z-index:1;width:max-content;min-width:180px;max-width:280px;margin-inline:auto}
.page-alerts{position:fixed;top:82px;right:1rem;z-index:1200;width:min(430px,calc(100vw - 2rem));padding:0}.page-alerts:empty{display:none}.page-alerts .alert{box-shadow:0 14px 35px rgba(40,20,60,.2);border:1px solid rgba(255,255,255,.7)}

/* Bounded data regions and touch-friendly horizontal collections. */
.table-scroll,.card:has(>table){overflow:auto;max-height:min(70vh,42rem);overscroll-behavior:contain;scrollbar-gutter:stable}
.policy-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.6rem}.policy-grid>.policy-card{flex:0 0 min(86vw,340px);scroll-snap-align:start}.policy-grid>.empty-state{flex:1}
.selection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.8rem 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.sidebar{display:block!important;z-index:50}.hamburger{display:block!important}.sidebar-open .sidebar-backdrop{display:block!important}.topbar{position:sticky;top:0;z-index:40;padding-top:max(.75rem,env(safe-area-inset-top))}.sidebar-backdrop{z-index:45}}
.password-field{display:flex;align-items:stretch}.password-field input{min-width:0;border-radius:10px 0 0 10px!important}.password-field button{position:relative;z-index:1;flex:0 0 auto;min-width:4.25rem;border:1px solid var(--color-border);border-left:0;border-radius:0 10px 10px 0;background:#f3e8ff;color:#5b21b6;font-weight:750;padding:0 .8rem;cursor:pointer}.password-field button:hover,.password-field button:focus-visible{background:#e9d5ff}.password-checklist{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .75rem;margin-top:.55rem}.password-checklist span{display:flex;align-items:center;gap:.35rem;transition:color .2s}.password-checklist span::before{content:'○';font-weight:800}.password-checklist .met,.field-valid{color:#147a50!important}.password-checklist .met::before{content:'✓'}.field-invalid{color:#b4235a!important}.policy-grid+.card .action-group{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem}
.theme-purple{--color-primary:#6d28d9}.theme-blue{--color-primary:#2563eb}.theme-green{--color-primary:#15803d}.theme-orange{--color-primary:#c2410c}.theme-rose{--color-primary:#be123c}.theme-options{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}.theme-choice{display:flex;align-items:center;gap:.45rem;padding:.6rem .75rem;border:1px solid var(--color-border);border-radius:10px}.theme-choice span{width:1.25rem;height:1.25rem;border-radius:50%;background:#6d28d9}.theme-blue span{background:#2563eb}.theme-green span{background:#15803d}.theme-orange span{background:#c2410c}.theme-rose span{background:#be123c}.subscription-arrears{margin:1rem clamp(.75rem,3vw,2rem) 0;padding:1rem;border:2px solid #dc2626;border-radius:12px;background:#fef2f2;color:#991b1b}.subscription-arrears a{color:inherit;font-weight:800}.dropdown-button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:.65rem .75rem;color:inherit;font:inherit;cursor:pointer}.tour-overlay{position:fixed;inset:0;z-index:3000;background:rgba(20,10,30,.72);display:grid;place-items:end center;padding:1rem}.tour-card{width:min(480px,100%);background:#fff;border-radius:16px;padding:1.25rem;box-shadow:0 25px 70px rgba(0,0,0,.35)}.tour-actions{display:flex;justify-content:space-between;gap:.75rem}.tour-highlight{position:relative;z-index:3001;outline:4px solid #fbbf24;outline-offset:4px}.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-scroll>.table{min-width:640px}.content,.card,.form-row,.settings-grid{min-width:0;max-width:100%}
@media(max-width:900px){.auth-brand img{width:min(150px,42vw);height:auto}.topbar-company{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card{overflow-wrap:anywhere}.form-row{grid-template-columns:minmax(0,1fr)!important}.table:not(.table-scroll .table){display:block;max-width:100%;overflow-x:auto;white-space:nowrap}}
.owner-gauge-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.owner-gauge-card{position:relative;min-width:0;text-align:center}.owner-gauge-card canvas{display:block;width:240px;max-width:100%;height:auto;margin:0 auto}.owner-gauge-card .gauge-value{bottom:1.75rem}.invoice-list,.proof-review-grid{display:flex;gap:.75rem;overflow-x:auto;padding:.25rem 0 .75rem;scroll-snap-type:x proximity}.invoice-card,.proof-review-card{flex:0 0 min(280px,85vw);display:grid;align-content:start;gap:.65rem;padding:.9rem;border:1px solid var(--color-border);border-radius:14px;scroll-snap-align:start}.invoice-card h3{font-size:1.15rem;margin:.35rem 0}.invoice-card p,.proof-review-card p{margin:.3rem 0}.invoice-card form{align-self:start}.proof-review-card{grid-template-columns:minmax(0,1fr) auto}.proof-review-card>a,.proof-actions{grid-column:1/-1}.proof-actions{display:flex;gap:.5rem}.proof-actions form{margin:0}.badge-confirmed{background:#dcfce7;color:#166534}.badge-rejected{background:#fee2e2;color:#991b1b}
@media(max-width:850px){.auth-hero{padding-top:11rem}.auth-brand{top:1.25rem;left:1.25rem}.auth-brand img{width:105px!important;max-height:105px;object-fit:contain}.auth-hero-copy{position:relative;z-index:1}.owner-gauge-grid{grid-template-columns:1fr}.invoice-card{grid-template-columns:1fr}}
.tour-overlay{z-index:2147483647!important;padding-bottom:max(1rem,env(safe-area-inset-bottom));isolation:isolate}.tour-card{position:relative;z-index:2}.tour-highlight{z-index:100!important}
@supports (overflow:clip){@media(max-width:900px){html,body{overflow-x:clip!important}}}
@media(max-width:900px){.app-shell,.main{overflow:visible!important}.topbar{position:-webkit-sticky!important;position:sticky!important;top:0!important;z-index:1000!important;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}.tour-overlay{place-items:center;padding-top:max(1rem,env(safe-area-inset-top));padding-bottom:max(1rem,env(safe-area-inset-bottom))}}
.tour-open{overflow:hidden!important;touch-action:none}
.integration-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.75rem;margin:1rem 0}.integration-steps>div{display:grid;gap:.4rem;padding:.85rem;border:1px solid var(--color-border);border-radius:12px;background:#faf9fc}.integration-steps code,.integration-status code{overflow-wrap:anywhere}.integration-status{padding:.75rem;border-left:4px solid var(--color-primary);background:#faf7ff}.api-example{margin-top:1rem}.api-example summary{cursor:pointer;font-weight:750}.api-example pre{overflow:auto;padding:1rem;border-radius:12px;background:#17131f;color:#f8f5ff;font-size:.78rem;line-height:1.55}.api-example pre code{display:inline;background:transparent!important;color:inherit!important;padding:0!important;border:0!important;box-shadow:none!important;white-space:pre}
.pdf-icon{width:1.25em;height:1.25em;vertical-align:-.25em;margin-right:.35rem;fill:initial;stroke:initial}.badge-modified{background:#ede9fe;color:#5b21b6}.staff-clock-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:.75rem}.staff-clock-grid form{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem;border:1px solid var(--color-border);border-radius:12px}.staff-clock-grid span,.staff-clock-grid small{display:block}.staff-clock-grid small{margin-top:.2rem;color:var(--color-text-muted)}
.modal-approval-form{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--color-border)}.modal-approval-form p{margin-top:0}.modal-approval-form .btn{width:100%}
.manual-attendance-card{overflow:hidden}.manual-attendance-filters{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(170px,.8fr));gap:.75rem;margin:1rem 0}.staff-clock-scroll{max-height:390px;overflow-y:auto;overscroll-behavior:contain;padding:.15rem .45rem .15rem .05rem;scrollbar-gutter:stable}.manual-empty{text-align:center;padding:2rem}.staff-clock-grid form[hidden]{display:none}.toggle-setting{display:flex!important;align-items:flex-start;gap:.8rem;padding:1rem;margin:1rem 0;border:1px solid #ddd6fe;border-radius:14px;background:#faf7ff}.toggle-setting input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--color-primary)}.toggle-setting span,.toggle-setting small{display:block}.toggle-setting small{margin-top:.25rem;color:var(--color-text-muted);font-weight:400}.device-request-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:1rem;margin-top:1rem}.device-request-card{display:flex;flex-direction:column;gap:1rem;padding:1.1rem;border:1px solid var(--color-border);border-radius:16px;background:linear-gradient(145deg,#fff,#faf7ff);box-shadow:0 8px 24px rgba(45,25,75,.06)}.device-request-heading{display:flex;align-items:center;gap:.75rem}.device-request-heading small{display:block;color:var(--color-text-muted);margin-top:.15rem}.device-avatar{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:13px;background:#ede9fe;color:#6b21a8;font-weight:850}.device-replacement{font-size:.85rem;color:var(--color-text-muted);margin:0}.device-reason{position:relative;padding:.8rem 1rem;border-radius:14px 14px 14px 4px;background:#f2ecfa;color:#352646}.device-reason span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#7e5aa0}.device-reason p{margin:.25rem 0 0}.device-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:auto}.device-actions form,.device-actions button{width:100%}.btn-deny{border-color:#fecdd3!important;background:#fff1f2!important;color:#be123c!important}.table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.table-toolbar small{display:block;margin-top:.2rem}.select-column{width:42px}.btn:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:760px){.manual-attendance-filters{grid-template-columns:1fr}.staff-clock-scroll{max-height:340px}.device-actions{grid-template-columns:1fr}.table-toolbar{align-items:flex-start;flex-direction:column}}

/* Keep employee navigation anchored to the visual viewport in mobile Safari/WebViews. */
@media(max-width:900px){
html{min-height:100%;min-height:100dvh}
body{min-height:100%;min-height:100dvh}
.mobile-bottom-nav{position:fixed!important;inset:auto 0 0 0!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;margin:0!important;transform:none!important;-webkit-transform:none!important;isolation:isolate}
}
.reaction-picker,.reaction-summary{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}.reaction-button{display:inline-flex;align-items:center;gap:.28rem;border:1px solid #e7dcf2;border-radius:999px;background:#fff;padding:.38rem .62rem;font-size:1.05rem;cursor:pointer;transition:.18s}.reaction-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(109,40,217,.14)}.reaction-button.selected{border-color:#8b5cf6;background:#f2eaff;box-shadow:0 0 0 2px rgba(139,92,246,.12)}.reaction-button span,.reaction-summary span{font-size:.75rem;font-weight:800;color:#675b70}.reaction-summary span{padding:.25rem .5rem;border-radius:999px;background:#f6f1fb}.template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.25rem}.template-card{padding:1rem;border:1px solid var(--color-border);border-radius:14px;background:#fcfaff}.template-card h3{margin-top:0}
.social-reaction-summary{display:flex;align-items:center;gap:.5rem;margin-top:.85rem;padding-top:.65rem;border-top:1px solid #eee7f5;color:var(--color-text-muted);font-size:.78rem}.social-reaction-stack{display:flex;padding-left:.35rem}.social-reaction-stack i{display:grid;place-items:center;width:25px;height:25px;margin-left:-.35rem;border:2px solid #fff;border-radius:50%;background:#f4effa;font-style:normal;font-size:.8rem;box-shadow:0 1px 4px rgba(40,20,60,.15)}.social-reaction-counts{display:flex;gap:.5rem;margin-left:auto}.social-reaction-counts b{font-weight:750;color:#675b70}@media(max-width:520px){.social-reaction-counts{display:none}}
.staff-reaction-set{display:flex;justify-content:flex-start;margin-top:.75rem;padding-top:.6rem;border-top:1px solid #eee7f5}
.table-quick-filter{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--color-text-muted);font-size:.88rem}.table-quick-filter input{max-width:360px;margin:0}
.report-heading{align-items:center}.report-period-badge{display:grid;gap:.2rem;min-width:245px;padding:.85rem 1rem;border:1px solid #ddd1ee;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(76,29,149,.06)}.report-period-badge span{color:var(--color-text-muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.report-period-badge strong{color:#4c1d95}.report-filter-card{margin-bottom:1.35rem;padding:1.15rem 1.25rem;border:1px solid #ded2ef;border-radius:18px;background:linear-gradient(135deg,#fff 0%,#faf7ff 100%);box-shadow:0 10px 30px rgba(76,29,149,.07)}.report-filter-intro{display:flex;align-items:center;gap:.75rem}.report-filter-intro h2{margin:0;font-size:1.05rem}.report-filter-intro p{margin:.2rem 0 0;color:var(--color-text-muted);font-size:.84rem}.report-filter-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#ede9fe;color:#6d28d9;font-size:1.35rem;font-weight:900}.report-filter-form{display:grid;grid-template-columns:minmax(360px,1fr) auto;gap:1rem;align-items:end;margin-top:1rem}.report-date-range{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);gap:.65rem;align-items:end}.report-date-range label{margin:0;color:#675b70;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.045em}.report-date-range label span{display:block;margin-bottom:.35rem}.report-date-range input{background:#fff}.report-range-arrow{padding-bottom:.75rem;color:#8b5cf6;font-size:1.15rem}.report-filter-actions{display:flex;gap:.55rem}.report-filter-actions .btn{min-height:46px;white-space:nowrap}.report-presets{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid #ece5f4}.report-presets>span{margin-right:.15rem;color:var(--color-text-muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.report-presets a{padding:.38rem .68rem;border:1px solid #e3d8ef;border-radius:999px;background:#fff;color:#5b21b6;font-size:.78rem;font-weight:750}.report-presets a:hover{border-color:#a78bfa;background:#f5f0ff;text-decoration:none}
@media(max-width:760px){.report-heading{align-items:stretch}.report-period-badge{min-width:0}.report-filter-form{grid-template-columns:1fr}.report-date-range{grid-template-columns:1fr}.report-range-arrow{display:none}.report-filter-actions{display:grid;grid-template-columns:1fr 1fr}.report-filter-actions .btn{width:100%}.report-filter-card{padding:1rem}.report-presets{align-items:stretch}.report-presets>span{width:100%}}
@media(max-width:900px){.mobile-bottom-nav{position:fixed!important;top:auto!important;bottom:0!important}.app-shell{min-height:100dvh}.content{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}}
@media(max-width:640px){.table-quick-filter{align-items:stretch;flex-direction:column}.table-quick-filter input{max-width:none}}
.rich-editor{border:1px solid var(--border,#ddd6e8);border-radius:14px;overflow:hidden;background:#fff;margin-top:.45rem}.rich-editor-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;padding:.55rem;background:#f6f4f8;border-bottom:1px solid var(--border,#ddd6e8)}.rich-editor-toolbar button,.rich-editor-toolbar select{min-height:36px;border:0;border-radius:7px;background:transparent;padding:.35rem .65rem;color:var(--text,#2d2437)}.rich-editor-toolbar button:hover,.rich-editor-toolbar button:focus,.rich-editor-toolbar select:hover{background:#e9e2f5}.rich-editor-content{min-height:240px;padding:1rem 1.15rem;outline:0;line-height:1.65;color:var(--text,#2d2437)}.rich-editor-source{display:block;width:100%;min-height:240px;margin:0;border:0;border-radius:0;padding:1rem 1.15rem;background:#201a29;color:#f3eefe;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;outline:0}.rich-editor-source[hidden]{display:none}.rich-editor-toolbar [data-rich-source][aria-pressed=true]{background:#6d28d9;color:#fff}.rich-editor-content:empty:before{content:attr(data-placeholder);color:#93899e;pointer-events:none}.rich-editor-content[aria-invalid=true]{box-shadow:inset 0 0 0 2px #dc2626}.rich-editor-footer{display:flex;justify-content:flex-end;padding:.35rem .75rem;background:#faf9fc;border-top:1px solid var(--border,#ddd6e8);font-size:.78rem;color:#756a80}.announcement-body{line-height:1.65}.announcement-body p:first-child{margin-top:0}.announcement-body p:last-child{margin-bottom:0}.announcement-body blockquote{border-left:4px solid var(--color-primary,#7c3aed);margin:1rem 0;padding:.4rem 1rem;background:#f7f3ff;border-radius:0 8px 8px 0}.announcement-body [align=center]{text-align:center}.announcement-body [align=right]{text-align:right}.announcement-body [align=justify]{text-align:justify}.row-muted{opacity:.68}
.rich-editor-toolbar select[data-format-block]{display:inline-block!important;width:150px!important;max-width:150px!important;min-width:120px;flex:0 0 150px;margin:0 .2rem!important;padding-right:2rem}.rich-editor-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;width:38px;padding:.35rem!important}.rich-editor-toolbar button[data-rich-source]{width:auto;min-width:76px;padding-inline:.65rem!important}.rich-editor-toolbar button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.rich-editor-toolbar button strong,.rich-editor-toolbar button em,.rich-editor-toolbar button u{font-size:1.05rem}
.rich-editor-toolbar button.is-active,.rich-editor-toolbar button[aria-pressed="true"]:not([data-rich-source]){background:#ddd0f4;color:#4c1d95;box-shadow:inset 0 0 0 1px #bda7e8}.rich-editor-toolbar button:disabled,.rich-editor-toolbar select:disabled{opacity:.4;cursor:not-allowed}.rich-editor-toolbar button[data-command="removeFormat"]:active{background:#fee2e2;color:#991b1b}
/* Rich-editor state and attendance color corrections. */
.rich-editor-content{font-weight:400!important;text-align:left}.rich-editor-content p{font:inherit;margin:.35rem 0}.rich-editor-content h2{margin:.65rem 0 .35rem;font-size:1.6rem;font-weight:800;line-height:1.25}.rich-editor-content h3{margin:.6rem 0 .3rem;font-size:1.25rem;font-weight:750;line-height:1.3}.rich-editor-content blockquote{margin:.65rem 0;padding:.55rem .85rem;border-left:4px solid #7c3aed;background:#f7f3ff;color:#4c4059;font-style:italic}.badge-late{background:#fef9c3!important;color:#854d0e!important}
/* Toolbar hover and keyboard focus never represent an enabled formatting state. */
.rich-editor-toolbar button:hover,.rich-editor-toolbar button:focus,.rich-editor-toolbar select:hover,.rich-editor-toolbar select:focus{background:transparent!important;box-shadow:0 0 0 1px #d8c8f5;outline:none}.rich-editor-toolbar button.is-active,.rich-editor-toolbar button[aria-pressed="true"]:not([data-rich-source]){background:#ddd0f4!important;color:#4c1d95;box-shadow:inset 0 0 0 1px #9f7aea}

/* Announcement reactions: compact counts with an anchored emoji picker. */
.announcement-reaction-footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:1rem;min-height:44px;container-type:inline-size}
.announcement-reaction-counts{display:flex;flex-wrap:wrap;gap:.4rem}
.announcement-reaction-count{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;background:#fff;border:1px solid #e7dcf2;border-radius:999px;font-size:1rem}
.announcement-reaction-count span{font-size:.75rem;font-weight:700;color:#675b70}
.announcement-reaction-count.selected{background:#f2eaff;border-color:#8b5cf6}
.announcement-reaction-menu{flex:none}
.announcement-reaction-trigger{display:grid;place-items:center;width:44px;height:44px;list-style:none;cursor:pointer;background:#fff;border:1px solid #e7dcf2;border-radius:50%;color:#756282;font-size:1.7rem;line-height:1}
.announcement-reaction-trigger::-webkit-details-marker{display:none}
.announcement-reaction-trigger sup{font-size:.8rem}
.announcement-reaction-menu[open] .announcement-reaction-trigger{background:#f2eaff;border-color:#8b5cf6}
.announcement-reaction-popover{position:absolute;right:0;bottom:calc(100% + 8px);z-index:20;display:grid;grid-template-columns:repeat(4,44px);gap:2px;width:max-content;max-width:100%;padding:6px;margin:0;border:1px solid #e7dcf2;border-radius:24px;background:#fff;box-shadow:0 8px 28px rgba(60,25,95,.2);animation:announcement-reaction-enter .15s ease-out}
.announcement-reaction-option{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;padding:0;background:transparent;font-size:1.55rem;cursor:pointer;transition:transform .15s}
.announcement-reaction-option:hover{transform:translateY(-3px);background:#f2eaff}
.announcement-reaction-option[aria-pressed=true]{background:#f2eaff;box-shadow:inset 0 0 0 1px #8b5cf6}
.pinned-notice.reaction-menu-open,.pinned-notice:has(.announcement-reaction-menu[open]){z-index:25}
@container (min-width:380px){.announcement-reaction-popover{grid-template-columns:repeat(8,44px);border-radius:999px}}
@keyframes announcement-reaction-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.announcement-reaction-popover{animation:none}.announcement-reaction-option{transition:none}}