body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
        .kpi-tile { transition: transform 120ms ease, box-shadow 120ms ease; }
        .kpi-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.1); }
        
        .emp-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(100,116,139,0.55); }
        .emp-link:hover { color: #047857; border-bottom-color: #047857; }

        
        .table-scroll {
            overflow-x: auto;
            background:
                linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
                linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center,
                radial-gradient(farthest-side at 0 50%, rgba(15,23,42,0.16), rgba(15,23,42,0)) left center,
                radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,0.16), rgba(15,23,42,0)) right center;
            background-repeat: no-repeat;
            background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
            background-attachment: local, local, scroll, scroll;
        }
        .table-scroll::-webkit-scrollbar { height: 10px; }
        .table-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
        .table-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e1; border-radius: 999px; border: 2px solid #f1f5f9;
        }
        .table-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .table-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }
        
        .table-scroll.is-wide > table { min-width: 980px; }
        
        .table-scroll tbody tr { background-color: #ffffff; }
        .table-scroll thead tr { background-color: #f8fafc; }
        .table-scroll th:first-child,
        .table-scroll td:first-child {
            position: sticky; left: 0; z-index: 2;
            background-color: inherit;
        }
        
        .table-scroll th:first-child::after,
        .table-scroll td:first-child::after {
            content: ""; position: absolute; top: 0; right: 0; bottom: 0;
            width: 1px; background: #e2e8f0;
        }
        
        .table-scroll th[colspan]:first-child,
        .table-scroll td[colspan]:first-child { position: static; }
        
        @media (max-width: 640px) {
            .table-scroll table { font-size: 12px; }
            
            .table-scroll thead th { font-size: 10px; letter-spacing: 0; }
            .table-scroll th:not(:first-child),
            .table-scroll td:not(:first-child) {
                padding-left: 0.5rem; padding-right: 0.5rem; white-space: nowrap;
            }
            
            .table-scroll th:first-child,
            .table-scroll td:first-child {
                max-width: 148px; padding-right: 0.5rem;
            }
            .table-scroll th.px-5:first-child,
            .table-scroll td.px-5:first-child { padding-left: 0.625rem; }
            .table-scroll td.pl-10 { padding-left: 1.25rem; }
            .table-scroll td.pl-16 { padding-left: 2rem; }
            .table-scroll td.pl-24 { padding-left: 2.75rem; }
            .table-scroll.is-wide > table { min-width: 720px; }
        }
        
        
        
        .hdr-vangst { background: #FF5500; border-bottom: 1px solid #E04A00; }
        .hdr-vangst .hdr-panel { position: relative; background: #fff; }
        .hdr-vangst .hdr-panel::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: #fff; }
        .hdr-vangst h1 { color: #fff; }
        .hdr-vangst .hdr-date { color: #fff; }
        .hdr-vangst .hdr-divider { border-color: rgba(255,255,255,0.35); }
        .hdr-vangst nav > a,
        .hdr-vangst nav > .js-menu > button { color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,0.55) !important; }
        .hdr-vangst nav > a:hover,
        .hdr-vangst nav > .js-menu > button:hover { background: rgba(255,255,255,0.18) !important; }
        .hdr-vangst nav > a[class*="bg-emerald-50"],
        .hdr-vangst nav > .js-menu > button[class*="bg-emerald-50"],
        .hdr-vangst nav > .js-menu > button[class*="bg-slate-800"] { background: #0A0A0A !important; color: #fff !important; border-color: #0A0A0A !important; border-radius: 7px; }
        
        .hdr-vangst nav > a,
        .hdr-vangst nav > .js-menu > button { padding: 0.45rem 0.9rem; }
        .hdr-vangst nav > .js-menu > button.hdr-admin { margin-left: 0.5rem; }
        .hdr-vangst nav > .js-menu > button.hdr-admin:not([class*="bg-slate-800"]) { background: #fff !important; border-color: #fff !important; color: #0A0A0A !important; }
        .hdr-vangst nav > .js-menu > button.hdr-admin:not([class*="bg-slate-800"]):hover { background: #F1F1F1 !important; }
        .hdr-vangst .hdr-user, .hdr-vangst .hdr-user span, .hdr-vangst .hdr-user a { color: #fff !important; }
        .hdr-vangst .hdr-user span { font-weight: 500; }
        .hdr-vangst .hdr-user a { opacity: 0.85; }
        .hdr-vangst .hdr-user a:hover { opacity: 1; text-decoration: underline; }
        
        
        .hdr-vangst .hdr-user .hdr-view-toggle a { opacity: 1; }
        .hdr-vangst .hdr-user .hdr-view-toggle a:hover { text-decoration: none; }
        .hdr-vangst .hdr-user .hdr-view-toggle .hdr-view-on { color: #FF5500 !important; font-weight: 600; }
        
        .admin-navigation-panel { max-width: calc(100vw - 32px); }

    
:focus-visible{outline:2px solid #0369a1;outline-offset:3px} .demo-table{width:100%;font-size:14px;border-collapse:collapse}.demo-table th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:500;color:#64748b;background:#f8fafc}.demo-table th,.demo-table td{padding:10px 12px;text-align:right;border-bottom:1px solid #e2e8f0;white-space:nowrap}.demo-table th:first-child,.demo-table td:first-child{text-align:left}.demo-table tbody tr:hover{background:#f8fafc}.demo-table .group-total{background:#f1f5f9;font-weight:600}.drill-button{text-decoration:underline dotted #cbd5e1;text-underline-offset:3px}.people-list{display:flex;gap:6px;flex-wrap:wrap;white-space:normal}.person-chip{border:1px solid #e2e8f0;border-radius:999px;padding:3px 9px;font-size:12px;background:#f8fafc}.scroll-hint{font-size:11px;color:#94a3b8}.demo-subnav a[aria-current=page]{background:#ecfdf5;color:#065f46}.demo-subnav a{display:inline-block;padding:8px 14px;border-radius:6px}.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}.stat-card{padding:14px;border-radius:10px;border:1px solid #e2e8f0;background:white}.stat-card small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#64748b}.stat-card strong{display:block;font-size:24px;margin-top:5px}.filter-control{border:1px solid #cbd5e1;border-radius:6px;padding:7px 10px;font-size:14px;background:white} details summary{cursor:pointer}.demo-table .details-cell{text-align:left;white-space:normal;padding:14px}.empty{padding:36px;text-align:center;color:#64748b}.pagination a{padding:6px 12px;border:1px solid #cbd5e1;border-radius:6px}.hdr-vangst .hdr-panel::before{pointer-events:none}@media(max-width:767px){.demo-table{min-width:780px}.hdr-vangst .hdr-panel img{height:28px}.demo-heading{font-size:18px}}

[data-bkctl]{flex-wrap:wrap;max-width:100%}.hdr-vangst .js-menu:last-child>div{left:auto;right:0}

/* Shared shell keeps the footer at the viewport bottom on short pages. */
.demo-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.demo-page>header,.demo-page>footer{flex-shrink:0}.demo-page>.demo-main{flex:1 0 auto;width:100%;min-width:0}

/* Match production attendance dividers across the grouped bucket header. */
.demo-bucket-table th,.demo-bucket-table td{border-right:1px solid #e2e8f0}.demo-bucket-table tr>:last-child{border-right:0}.demo-bucket-table thead tr:nth-child(2)>:last-child{border-right:1px solid #e2e8f0}.demo-bucket-table tbody tr>td:nth-child(2),.demo-bucket-table thead tr:nth-child(2)>th:first-child{border-right:2px solid #dce4e9}