.attendance-page { width: min(1680px, 100%); }
.export-button { height: 39px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; color: #fff; background: var(--brand); font-size: 11px; font-weight: 600; box-shadow: 0 2px 5px rgba(24,61,50,.15); }
.export-button:hover { background: var(--brand-hover); }
.attendance-heading-actions { display: flex; align-items: center; gap: 9px; }.corrections-button { height: 39px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d7dfdb; border-radius: 8px; color: #40534b; background: #fff; font-size: 11px; font-weight: 600; }.corrections-button:hover { border-color: #9eb3a9; }
.attendance-card { margin-top: 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); }
.attendance-filters { padding: 17px 18px; display: grid; grid-template-columns: minmax(145px,.8fr) repeat(4,minmax(145px,1fr)) auto; align-items: end; gap: 10px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.attendance-filters label { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.attendance-filters label > span { color: #69756f; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.attendance-filters input, .attendance-filters select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #dce2df; border-radius: 7px; outline: 0; color: #3d4944; background: #fff; font: 11px "DM Sans",sans-serif; }
.attendance-filters input:focus, .attendance-filters select:focus { border-color: #769889; box-shadow: 0 0 0 3px rgba(74,123,101,.1); }
.clear-button { height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.clear-button { border: 1px solid #dce2df; color: #61706a; background: #fff; }
.records-summary { min-height: 51px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.records-summary p { margin: 0; color: #718079; font-size: 11px; }.records-summary p strong { color: #27342e; font-size: 12px; }.records-summary > span { color: #8a9691; font-size: 9px; }
.attendance-table-wrap { overflow-x: auto; }
.attendance-table { min-width: 1320px; }
.attendance-table th { height: 42px; padding: 0 12px; white-space: nowrap; }
.attendance-table td { height: 68px; padding: 0 12px; }
.attendance-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 205px; background: #fff; box-shadow: 1px 0 #edf0ee; }
.attendance-table tbody tr:hover td:first-child { background: #fbfcfb; }
.record-date { display: block; color: #3d4944; font-weight: 600; }.record-day { display: block; margin-top: 3px; color: #929c98; font-size: 9px; }
.missing-value { color: var(--red); font-weight: 600; }
.difference { font-weight: 600; }.difference.positive { color: var(--green); }.difference.negative { color: var(--red); }
.attendance-status { height: 23px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 12px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.attendance-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.attendance-status.complete, .attendance-status.working { color: #367458; background: #eaf5ef; }
.attendance-status.late, .attendance-status.left-early { color: #95611f; background: #fbf2e4; }
.attendance-status.missing-clock-in, .attendance-status.missing-clock-out, .attendance-status.absent { color: #a64b49; background: #fbedeb; }
.attendance-status.vacation, .attendance-status.day-off { color: #566ca0; background: #edf1fa; }
.attendance-status.sick-leave { color: #715798; background: #f2eef9; }
.no-records { height: 220px !important; text-align: center; color: #81908a; }
.no-records .icon { margin: 0 auto 9px; }.no-records strong, .no-records span { display: block; }.no-records strong { color: #3c4943; font-size: 12px; }.no-records span { margin-top: 5px; font-size: 10px; }
@media (max-width: 1250px) { .attendance-filters { grid-template-columns: repeat(3,minmax(150px,1fr)); }.clear-button { grid-column: auto; } }
@media (max-width: 680px) { .attendance-heading-actions { width: 100%; }.page-heading .export-button, .page-heading .corrections-button { flex: 1; justify-content: center; }.attendance-filters { padding: 14px; grid-template-columns: 1fr 1fr; }.attendance-filters label:first-child { grid-column: 1 / -1; }.records-summary { padding-inline: 14px; }.records-summary > span { display: none; } }
@media (max-width: 420px) { .attendance-filters { grid-template-columns: 1fr; }.attendance-filters label:first-child { grid-column: auto; } }

/* Attendance records refresh — scoped to /attendance only. */
.attendance-index{--canvas:#f7f5f0;--surface:#fffefa;--line:#e7e4dc;--ink:#1d2924;--muted:#6f7873;--brand:#214b3d;--brand-hover:#16382e;--shadow:0 1px 2px rgba(35,48,42,.04),0 8px 26px rgba(35,48,42,.045)}
.attendance-index .topbar{border-color:#e9e5dd;background:rgba(255,254,250,.92)}
.attendance-index .attendance-page{width:min(1480px,100%);padding-top:27px}
.attendance-index .attendance-heading{padding:20px 22px;align-items:center;border:1px solid #e7e1d7;border-radius:16px;background:linear-gradient(112deg,#fffefa 0%,#faf7ef 68%,#f1eee3 100%);box-shadow:var(--shadow)}
.attendance-index .attendance-heading .eyebrow{color:#9a744a}
.attendance-index .attendance-heading h1{font-size:clamp(25px,2.1vw,30px)}
.attendance-index .export-button,.attendance-index .corrections-button{min-height:44px;border-radius:10px}
.attendance-insights{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.attendance-insights article{min-height:70px;padding:11px 14px;display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:var(--shadow)}
.attendance-insight-icon{width:37px;height:37px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px}
.attendance-insight-icon.green{color:var(--green);background:var(--green-soft)}.attendance-insight-icon.blue{color:var(--blue);background:var(--blue-soft)}.attendance-insight-icon.amber{color:var(--amber);background:var(--amber-soft)}
.attendance-insights small{display:block;color:#7d8883;font-size:9px}.attendance-insights strong{display:block;margin-top:2px;font:700 19px Manrope,sans-serif}
.attendance-index .attendance-card{margin-top:10px;border-radius:14px}
.attendance-index .attendance-filters{padding:12px 14px;grid-template-columns:minmax(145px,.8fr) minmax(0,4fr);background:#fcfbf7}
.attendance-filter-options{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr)) auto;align-items:end;gap:9px}
.attendance-index .attendance-filter-toggle{display:none}
.attendance-index .attendance-filters input,.attendance-index .attendance-filters select{height:42px;border-color:#ded9cf;border-radius:9px;background:#fffefa}
.attendance-index .clear-button{height:42px;border-color:#ded9cf;border-radius:9px;background:#fffefa}
.attendance-index .records-summary{min-height:44px}
.attendance-index .attendance-table td{height:64px}
.attendance-mobile-list{display:none}

@media(max-width:680px){
    .attendance-index .topbar{height:58px}
    .attendance-index .attendance-page{padding:12px 12px 20px}
    .attendance-index .attendance-heading{padding:15px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;border-radius:14px}
    .attendance-index .attendance-heading h1{font-size:23px}
    .attendance-index .attendance-heading>div>p:last-child{max-width:32ch;margin-top:5px;font-size:12px;line-height:1.45}
    .attendance-index .attendance-heading-actions{width:auto;gap:7px}
    .attendance-index .attendance-heading-actions a{width:44px;padding:0;flex:none;justify-content:center;font-size:0}
    .attendance-index .attendance-heading-actions .icon{width:18px;height:18px}
    .attendance-insights{margin:10px -12px 0;padding:0 12px 4px;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
    .attendance-insights::-webkit-scrollbar{display:none}
    .attendance-insights article{min-width:140px;min-height:64px;flex:0 0 40vw;padding:9px 11px;scroll-snap-align:start}
    .attendance-insight-icon{width:34px;height:34px}
    .attendance-index .attendance-card{margin-top:7px;border-radius:13px}
    .attendance-index .attendance-filters{padding:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
    .attendance-index .attendance-filters>label:first-child{grid-column:auto}
    .attendance-index .attendance-filters>label:first-child span{display:none}
    .attendance-index .attendance-filters input{height:44px}
    .attendance-index .attendance-filter-toggle{height:44px;padding:0 10px;display:flex;align-items:center;gap:7px;border:1px solid #ded9cf;border-radius:9px;color:#4e5d56;background:#fffefa;font-size:10px;font-weight:600;cursor:pointer}
    .attendance-index .attendance-filter-toggle span{flex:1;text-align:left}
    .attendance-index .attendance-filter-toggle i{min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:9px;color:#fff;background:var(--brand);font-size:9px;font-style:normal}
    .attendance-index .attendance-filter-toggle>.icon:last-child{transition:transform .2s ease}
    .attendance-index .filters-open .attendance-filter-toggle>.icon:last-child{transform:rotate(180deg)}
    .attendance-filter-options{display:none;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px;padding-top:2px}
    .filters-open .attendance-filter-options{display:grid}
    .attendance-index .attendance-filter-options label{min-width:0}
    .attendance-index .attendance-filter-options select{width:100%;min-width:0;height:44px}
    .attendance-index .attendance-filter-options .clear-button{min-height:42px;grid-column:1/-1}
    .attendance-index .records-summary{min-height:42px;padding-inline:12px}
    .attendance-index .attendance-table-wrap{display:none}
    .attendance-mobile-list{padding:7px 9px 10px;display:grid;gap:8px;background:#f7f5f0}
    .attendance-mobile-card{padding:12px;border:1px solid #e4dfd6;border-radius:12px;background:var(--surface);box-shadow:0 2px 10px rgba(35,48,42,.035)}
    .attendance-mobile-card>header{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px}
    .attendance-mobile-card>header .avatar{width:40px;height:40px;font-size:11px}
    .attendance-mobile-card>header>div{min-width:0;display:flex;flex-direction:column}
    .attendance-mobile-card>header>div strong,.attendance-mobile-card>header>div small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .attendance-mobile-card>header>div strong{font-size:12px}.attendance-mobile-card>header>div small{margin-top:3px;color:#818b86;font-size:9px}
    .attendance-mobile-date{margin-top:10px;padding:8px 9px;display:flex;align-items:center;gap:6px;border-radius:8px;color:#53625b;background:#f7f5ef;font-size:9px}
    .attendance-mobile-date span{margin-left:auto;color:#87918c}
    .attendance-timeline{padding:13px 2px 11px;display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:7px}
    .attendance-timeline>div{display:flex;align-items:center;flex-direction:column}
    .attendance-timeline small{color:#909995;font-size:8px;text-transform:uppercase}.attendance-timeline strong{margin-top:4px;font-size:11px}
    .attendance-timeline>i{height:1px;background:#ddd9d0}
    .attendance-mobile-totals{padding:9px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border-radius:9px;background:#f7f5ef}
    .attendance-mobile-totals>span{min-width:0;display:flex;align-items:center;flex-direction:column;text-align:center}
    .attendance-mobile-totals small{color:#909995;font-size:7px;text-transform:uppercase}.attendance-mobile-totals strong{margin-top:4px;font-size:10px}
    .attendance-mobile-empty{min-height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#81908a;text-align:center}
    .attendance-mobile-empty strong{margin-top:8px;color:#3c4943;font-size:12px}.attendance-mobile-empty span{margin-top:5px;font-size:10px}
}

@media(max-width:390px){
    .attendance-index .attendance-filter-toggle span{display:none}
    .attendance-index .attendance-mobile-card>header{grid-template-columns:38px minmax(0,1fr)}
    .attendance-index .attendance-mobile-card>header .attendance-status{grid-column:2;margin-top:2px;justify-self:start}
    .attendance-mobile-date{flex-wrap:wrap}.attendance-mobile-date span{width:100%;margin:2px 0 0 21px}
    .attendance-mobile-totals{grid-template-columns:1fr 1fr;row-gap:10px}
}