:root{--ink:#202634;--muted:#8490a2;--line:#e9edf2;--surface:#fff;--page:#e9edf2;--purple:#6254db;--purple-dark:#5144c4;--nav:#1d2432;--green:#14966e;--red:#d04b55;--orange:#cc8538}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font:14px 'DM Sans',sans-serif;min-height:100vh}h1,h2,h3,strong,.brand{font-family:'Manrope','DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:var(--nav);color:#c2c9d6;padding:25px 16px;display:flex;flex-direction:column;z-index:2}.brand{display:flex;align-items:center;gap:11px;color:white;font-size:17px;font-weight:800;letter-spacing:-.5px}.brand-light{color:#adabff}.brand small{display:block;margin-top:3px;color:#788296;font:700 9px 'DM Sans',sans-serif;letter-spacing:1.5px}.brand-mark{width:36px;height:36px;border-radius:11px;background:var(--purple);display:grid;place-items:center;color:white;font:800 18px 'Manrope',sans-serif}.nav-label{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#737e90;margin:43px 12px 12px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;color:#b8c1d0;font-size:13px;font-weight:500}.sidebar nav a span{width:18px;text-align:center;color:#9ea8ba;font-size:15px}.sidebar nav a:hover,.sidebar nav a.active{background:#30394b;color:#fff}.sidebar nav a.active span{color:#aaa2ff}.sidebar-bottom{margin-top:auto;border-top:1px solid #343c4a;padding:17px 3px 0;display:flex;align-items:center;gap:10px}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#3e4771;color:#dedbff;font-weight:700}.identity{min-width:0;display:grid;gap:3px;flex:1}.identity strong{font-size:11px;color:#f5f6f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity small{font-size:10px;color:#939eb0}.logout{border:0;background:none;color:#aab3c1;font-size:18px}.main{margin-left:248px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:112px;background:white;border-bottom:1px solid var(--line);padding:25px 38px;display:flex;align-items:center;justify-content:space-between}.topbar h1{font-size:23px;letter-spacing:-.7px;margin:6px 0 0}.eyebrow{font-size:9px;letter-spacing:1.35px;font-weight:700;color:#99a2b1}.today{border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:#697588;font-size:11px}.content{padding:29px 38px 36px;flex:1;max-width:1480px;width:100%;margin:0 auto}.footer{padding:17px 38px;color:#a4adba;font-size:10px;border-top:1px solid var(--line)}.footer span{padding:0 5px;color:#c2c7d1}.welcome-row,.page-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.welcome-row p,.page-actions p{margin:0}.muted{color:var(--muted);font-size:12px;line-height:1.6}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:24px}.stat-card,.panel,.form-panel,.summary-card{background:white;border:1px solid var(--line);border-radius:11px}.stat-card{min-height:148px;padding:19px;position:relative;display:flex;flex-direction:column}.stat-icon{position:absolute;right:16px;top:16px;width:31px;height:31px;display:grid;place-items:center;border-radius:9px;font-size:15px}.violet{background:#f0efff;color:#695be1}.green{background:#e8f7f1;color:#15996e}.orange{background:#fff4e9;color:#ca8335}.blue{background:#ebf4ff;color:#4380cf}.stat-label{font-size:9px;letter-spacing:1px;color:#929cad;font-weight:700}.stat-card strong{font-size:23px;letter-spacing:-.8px;margin-top:19px;white-space:nowrap}.stat-card small{font-size:10px;color:#9aa3b0;margin-top:5px}.panel{overflow:hidden;margin-bottom:20px}.panel-heading{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading h2,.form-panel h2{font-size:15px;margin:0 0 5px;letter-spacing:-.3px}.panel-heading p{margin:0}.text-link{color:var(--purple);font-size:11px;font-weight:700}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;font-size:9px;letter-spacing:.8px;color:#929cad;background:#fafbfd;font-weight:700;padding:12px 16px;border-top:1px solid #f0f2f5;border-bottom:1px solid #f0f2f5}td{font-size:11px;color:#566173;padding:13px 16px;border-bottom:1px solid #f0f2f5}tbody tr:last-child td{border-bottom:0}.strong{font-weight:700;color:#30394a}.table-sub{display:block;font-size:10px;color:#9ba4b1;margin-top:4px}.badge{display:inline-block;border-radius:20px;padding:5px 9px;background:#f0f2f5;color:#717b8c;font-size:9px;font-weight:700}.badge-baru{background:#edf3ff;color:#5576ca}.badge-dikonfirmasi{background:#f0efff;color:#6859d4}.badge-selesai,.badge-income,.badge-hadir{background:#e9f7f1;color:#16835f}.badge-dibatalkan,.badge-alpa,.badge-expense{background:#fff0f0;color:#c24c52}.badge-terlambat{background:#fff5e8;color:#bd792b}.badge-izin,.badge-sakit{background:#eef3f8;color:#64758c}.empty-state{padding:28px;text-align:center;color:#8b95a4;font-size:12px}.btn{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:7px;padding:0 13px;border:1px solid transparent;font-size:11px;font-weight:700;white-space:nowrap}.btn-primary{color:white;background:var(--purple);box-shadow:0 3px 8px #6254db2a}.btn-primary:hover{background:var(--purple-dark)}.btn-primary span{font-size:15px}.btn-plain{color:#596477;background:white;border-color:#e2e6ed}.btn-plain:hover{background:#f7f8fa}.alert{padding:11px 14px;border-radius:7px;margin-bottom:15px;font-size:11px}.alert-error{background:#fff0f0;color:#ab3b46;border:1px solid #f7d8db}.alert-success{background:#eaf8f2;color:#187455;border:1px solid #d1f0e1}.form-panel{padding:22px;max-width:850px}.form-panel>.panel-heading{padding:0 0 20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label,.form-stack label,.setup-card label,.filter-bar label{display:grid;gap:7px;color:#515c6f;font-size:11px;font-weight:600}.form-grid input,.form-grid select,.form-grid textarea,.form-stack input,.setup-card input,.filter-bar input{width:100%;height:38px;border:1px solid #e1e5ec;border-radius:6px;padding:0 10px;background:white;color:#30394a;outline:0}.form-grid textarea{height:auto;padding:9px;resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.form-stack input:focus,.setup-card input:focus{border-color:#9c93ec;box-shadow:0 0 0 3px #6254db12}.form-grid small{font-size:10px;color:#969fad;font-weight:400}.full-width{grid-column:1/-1}.form-actions{grid-column:1/-1;display:flex;gap:9px;margin-top:4px}.filter-bar{display:flex;align-items:flex-end;gap:9px;margin-bottom:14px}.filter-bar label{min-width:180px}.filter-bar input{height:35px}.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:16px}.summary-four{grid-template-columns:repeat(4,minmax(0,1fr))}.summary-card{padding:15px 17px;display:flex;flex-direction:column;gap:8px}.summary-card span{font-size:10px;color:#8993a2}.summary-card span small{font-size:9px}.summary-card strong{font-size:18px}.positive{color:var(--green)!important}.negative{color:var(--red)!important}.actions{display:flex;align-items:center;gap:10px}.actions form,.table-wrap form{display:inline}.link-danger{border:0;padding:0;background:none;color:#c34c57;font-size:10px;font-weight:600}.auth-wrap{display:grid;place-items:center;min-height:calc(100vh - 62px);padding:35px 15px}.main-auth{margin-left:0}.auth-card{width:min(100%,405px);padding:34px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 60px #1c29420a}.auth-brand{color:var(--ink);margin-bottom:33px}.auth-card>.eyebrow{margin-bottom:7px}.auth-card h1,.setup-head h1{font-size:23px;letter-spacing:-.8px;margin:0 0 6px}.auth-card>.muted{margin:0 0 22px}.form-stack{display:grid;gap:15px}.form-stack input{height:42px}.btn-full{width:100%;height:42px;margin-top:2px}.auth-switch{text-align:center;padding-top:17px;font-size:11px;color:#7d8796}.auth-switch a,.secure-note a{color:var(--purple);font-weight:700}.secure-note{text-align:center;font-size:10px;color:#a0a8b4;margin:20px 0 0}.setup-page{width:min(100% - 32px,850px);margin:50px auto}.setup-head{margin-bottom:22px}.setup-head .brand{color:var(--ink);margin-bottom:35px}.setup-head .eyebrow{margin-bottom:7px}.setup-head .muted{max-width:590px}.setup-card{border:1px solid var(--line);background:white;border-radius:12px;padding:24px}.setup-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}.setup-columns h2{font-size:15px;margin:0 0 5px}.setup-columns .muted{margin:0 0 16px}.setup-card label{margin-bottom:13px}.setup-card input{height:38px}.setup-card>.btn{margin-top:8px}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content{padding:24px}.topbar{padding:22px 24px}.footer{padding:16px 24px}}
@media(max-width:720px){.sidebar{position:static;width:auto;height:auto;padding:12px 15px}.sidebar .brand{font-size:15px}.sidebar .brand-mark{width:31px;height:31px}.nav-label,.sidebar-bottom{display:none}.sidebar nav{display:flex;overflow-x:auto;margin-top:12px}.sidebar nav a{white-space:nowrap;padding:8px 10px;font-size:11px}.main{margin-left:0}.topbar{height:86px;padding:17px}.topbar h1{font-size:19px}.today{font-size:9px;padding:7px}.content{padding:18px 14px}.footer{padding:13px 14px}.stats-grid{gap:9px}.stat-card{min-height:128px;padding:14px}.stat-card strong{font-size:18px}.stat-icon{width:27px;height:27px;right:12px;top:12px}.stat-label{font-size:8px}.page-actions{align-items:flex-start}.page-actions .muted{max-width:55%}.summary-grid{gap:8px}.summary-card{padding:12px}.summary-card strong{font-size:15px}.summary-four{grid-template-columns:repeat(2,minmax(0,1fr))}.form-panel{padding:16px}.form-grid{grid-template-columns:1fr}.full-width,.form-actions{grid-column:auto}.form-actions{flex-wrap:wrap}.setup-columns{grid-template-columns:1fr;gap:10px}.setup-page{margin:25px auto}.setup-card{padding:17px}.filter-bar{flex-wrap:wrap}.filter-bar label{flex:1}.auth-card{padding:25px}}
@media(max-width:720px){.sidebar-bottom{display:flex;margin-top:6px;padding:8px 3px 0;border-top:1px solid #343c4a}}
.stat-card-link{display:flex;flex:1;flex-direction:column;color:inherit}.stat-card-link:hover .stat-label{color:var(--purple)}.dashboard-panels{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:16px;align-items:start}.attendance-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:0 18px 14px}.attendance-summary>div{display:grid;gap:4px;border:1px solid #f0f2f5;border-radius:7px;padding:9px 8px}.attendance-summary strong{font-size:17px}.attendance-summary span{font-size:9px;color:#929cad}.attendance-unrecorded{color:var(--orange)}.attendance-roster{padding:0 18px}.attendance-person{display:flex;align-items:center;gap:9px;min-height:49px;border-top:1px solid #f0f2f5}.avatar-small{width:27px;height:27px;font-size:10px;flex:0 0 27px}.attendance-person-name{display:grid;gap:3px;flex:1;min-width:0}.attendance-person-name strong{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attendance-person-name small{font-size:9px;color:var(--muted)}.badge-unrecorded{background:#fff5e8;color:#b6762e}.roster-more{font-size:9px;color:var(--muted);padding:0 0 8px 36px}.attendance-actions{display:flex;gap:8px;padding:13px 18px 16px;border-top:1px solid #f0f2f5}.attendance-actions .btn{font-size:10px}.dashboard-panels>.panel{min-width:0}
@media(max-width:1050px){.dashboard-panels{grid-template-columns:1fr}}
@media(max-width:480px){.attendance-summary{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:12px;padding-right:12px}.attendance-roster{padding-left:12px;padding-right:12px}.attendance-person{gap:7px}.attendance-person .badge{font-size:8px;padding:4px 6px}.attendance-actions{padding:11px 12px}.attendance-actions .btn{padding:0 9px;font-size:9px}}
.staff-welcome{margin-bottom:18px}.staff-welcome h2{font-size:20px;margin:8px 0 4px}.staff-welcome p{margin-top:4px}.staff-today{max-width:760px}.clock-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 20px 17px}.clock-card{display:grid;gap:8px;padding:17px;border:1px solid var(--line);border-radius:9px;background:#fafbfd}.clock-card span{font-size:9px;font-weight:700;letter-spacing:.8px;color:#929cad}.clock-card strong{font-size:28px;letter-spacing:-1px}.clock-card small{font-size:10px;color:var(--muted)}.clock-actions{padding:0 20px 20px}.btn-clock{height:43px;min-width:190px;font-size:12px}.btn-checkout{color:white;background:#208667;box-shadow:0 3px 8px #20866725}.btn-checkout:hover{background:#176f53}.attendance-complete{border-radius:7px;padding:13px;background:#eaf8f2;color:#187455;font-size:12px;font-weight:700}.staff-month-summary{max-width:760px;margin-top:16px}.staff-welcome+.staff-today+.staff-month-summary+.panel{max-width:1000px}
@media(max-width:480px){.clock-grid{gap:8px;padding-left:12px;padding-right:12px}.clock-card{padding:12px}.clock-card strong{font-size:23px}.clock-actions{padding-left:12px;padding-right:12px}.staff-month-summary{gap:8px}.btn-clock{width:100%}}
.topbar-heading{display:flex;align-items:center;gap:12px}
.topbar-heading>div{min-width:0}
.sidebar-toggle{width:38px;height:38px;flex:0 0 38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.sidebar-toggle span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor}
.sidebar-close,.sidebar-backdrop{display:none}
.sidebar,.main{transition:transform .24s ease,margin-left .24s ease}
@media(min-width:721px){
    body.sidebar-collapsed .sidebar{transform:translateX(-100%)}
    body.sidebar-collapsed .main{margin-left:0}
}
@media(max-width:720px){
    body.sidebar-open{overflow:hidden}
    .sidebar{position:fixed;inset:0 auto 0 0;width:min(280px,calc(100vw - 48px));height:100vh;height:100dvh;padding:20px 16px;transform:translateX(-100%);z-index:10;overflow-y:auto}
    .sidebar.is-open{transform:translateX(0)}
    .sidebar .brand{font-size:17px}
    .sidebar .brand-mark{width:36px;height:36px}
    .sidebar .nav-label{display:block;margin:35px 12px 12px}
    .sidebar nav{display:grid;gap:5px;margin-top:0;overflow:visible}
    .sidebar nav a{white-space:normal;padding:11px 12px;font-size:13px}
    .sidebar-bottom{display:flex;margin-top:auto;padding:17px 3px 0;border-top:1px solid #343c4a}
    .sidebar-close{position:absolute;top:19px;right:14px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #454e60;border-radius:8px;background:transparent;color:#d7dce5;font-size:22px;line-height:1}
    .sidebar-backdrop.is-visible{display:block;position:fixed;inset:0;width:100%;height:100%;padding:0;border:0;background:#11182799;z-index:9}
    .main{margin-left:0}
    .topbar{height:auto;min-height:78px;padding:14px}
    .topbar-heading{gap:10px}
    .topbar .eyebrow{font-size:8px}
    .topbar h1{font-size:17px;overflow-wrap:anywhere}
    .today{white-space:nowrap}
    body.sidebar-open .sidebar-toggle{position:relative;z-index:11}
}
@media(max-width:380px){
    .topbar{padding:12px 10px}
    .topbar-heading{gap:8px}
    .topbar h1{font-size:15px}
    .topbar .eyebrow{letter-spacing:.7px}
    .today{padding:6px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
    .sidebar,.main{transition:none}
}
.public-home{width:min(100%,680px);margin:clamp(48px,12vh,120px) auto;padding:42px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 18px 60px #1c29420a}
.public-home .auth-brand{margin-bottom:45px}
.public-home .eyebrow{margin:0 0 11px}
.public-home h1{max-width:560px;font-size:clamp(27px,5vw,40px);line-height:1.16;letter-spacing:-1.4px;margin:0 0 12px}
.public-home>.muted{max-width:500px;font-size:14px}
.public-home-actions{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:26px}
.public-home-actions .text-link{width:100%;margin-top:5px}
.gallery{position:relative;margin:15px 0 25px;overflow:hidden;border-radius:11px;background:#202634}
.gallery-slides{aspect-ratio:16/9}
.gallery-slide{display:block;width:100%;height:100%;object-fit:cover}
.gallery-slide[hidden]{display:none}
.gallery-control{position:absolute;top:50%;display:grid;place-items:center;width:38px;height:38px;padding:0;transform:translateY(-50%);border:1px solid #ffffff70;border-radius:50%;background:#20263499;color:#fff;font-size:28px;line-height:1}
.gallery-previous{left:12px}
.gallery-next{right:12px}
.gallery-indicators{position:absolute;right:0;bottom:12px;left:0;display:flex;justify-content:center;gap:8px}
.gallery-indicator{width:9px;height:9px;padding:0;border:1px solid #fff;border-radius:50%;background:#ffffff80}
.gallery-indicator.is-active{background:#fff;transform:scale(1.2)}
@media(max-width:600px){.public-home{margin:24px 14px;padding:25px 21px}.public-home .auth-brand{margin-bottom:38px}.public-home-actions{align-items:stretch;flex-direction:column}.public-home-actions .btn{width:100%}.gallery{margin:15px 0 22px}.gallery-control{width:33px;height:33px;font-size:24px}.gallery-previous{left:8px}.gallery-next{right:8px}.gallery-indicators{bottom:9px;gap:7px}.gallery-indicator{width:8px;height:8px}}
.staff-bookings-notice{margin-bottom:20px;padding:17px 20px;border:1px solid #f0dfb3;border-radius:10px;background:#fffaf0}
.staff-bookings-notice-heading{display:flex;align-items:center;gap:11px}
.staff-bookings-notice-icon{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:50%;background:#fff0cb;color:#9a650e;font-weight:800}
.staff-bookings-notice h2{margin:0 0 4px;font-size:13px}
.staff-bookings-notice p{margin:0;color:#837456;font-size:11px}
.staff-bookings-notice ul{display:grid;gap:6px;margin:13px 0;padding:0;list-style:none}
.staff-bookings-notice li{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:6px;background:#fff}
.staff-booking-links{display:flex;align-items:center;gap:12px}
.staff-payment-field[hidden]{display:none}
.staff-payment-hint{display:grid;gap:4px;padding:10px 12px;border:1px solid #d9e6ff;border-radius:7px;background:#f4f8ff;color:#52627b;font-size:11px;font-weight:400}
.staff-payment-hint strong{color:#5144c4;font-size:12px}
.staff-payment-result{display:block;padding:9px 11px;border-radius:6px;background:#f0efff;color:#5144c4;font-size:11px;font-weight:700}
.staff-payment-result.is-invalid{background:#fff0f0;color:#ab3b46}
.staff-bookings-notice li strong{font-size:12px}
.staff-bookings-notice li span{color:#697588;font-size:11px}
.staff-bookings-notice>a{display:inline-block;margin-top:12px;color:var(--purple);font-size:11px;font-weight:700}
.staff-bookings-notice ul+a{margin-top:0}
.staff-bookings-notice+.page-actions{margin-top:0}
@media(max-width:720px){.staff-bookings-notice{padding:14px}.staff-bookings-notice li{align-items:flex-start;flex-direction:column;gap:4px}}
.avatar-image{object-fit:cover;border:1px solid #ffffff33}
.staff-profile-panel{max-width:900px}
.staff-profile-summary{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:20px;border:1px solid var(--line);border-radius:9px;background:#fafbfd}
.staff-profile-summary img,.staff-profile-placeholder{width:68px;height:68px;flex:0 0 68px;border-radius:50%;object-fit:cover}
.staff-profile-placeholder{display:grid;place-items:center;background:#e9e7ff;color:var(--purple);font-size:24px;font-weight:800}
.staff-profile-summary>div{display:grid;gap:5px}
.staff-profile-summary strong{font-size:15px}
.user-signature-section{border:1px solid var(--line);border-radius:9px;padding:14px;background:var(--surface)}
.user-signature-section canvas{display:block;width:100%;height:160px;border:1px dashed #b8c1cf;border-radius:7px;background:#fff;touch-action:none}
.user-signature-clear{display:flex!important;align-items:center;gap:7px;margin-bottom:10px}
.user-signature-clear input{width:16px!important;height:16px!important}
.staff-profile-summary span,.staff-profile-summary small{color:var(--muted);font-size:11px}
.staff-profile-form input[type=file]{height:auto;padding:8px}
.staff-profile-password{padding-top:5px;border-top:1px solid var(--line)}
.staff-profile-password h3{margin:17px 0 4px;font-size:13px}
.staff-profile-password>.muted{margin:0 0 14px}
@media(max-width:720px){.staff-profile-panel{padding:16px}.staff-profile-form{grid-template-columns:1fr}.staff-profile-form .full-width,.staff-profile-form .form-actions{grid-column:1}.staff-profile-password .form-grid{grid-template-columns:1fr}.staff-profile-password .form-grid>span{display:none}}
.attendance-capture{display:grid;gap:12px;max-width:520px;margin:0 20px 18px;padding:14px;border:1px solid var(--line);border-radius:9px;background:#fafbfd}
.attendance-capture[hidden]{display:none}
.attendance-capture-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.attendance-capture>p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.attendance-capture video{width:100%;max-height:360px;border-radius:8px;background:#202634;object-fit:cover}
.attendance-capture>.btn{justify-self:start}
.attendance-evidence-summary{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0 20px 18px;color:var(--muted);font-size:10px}
.attendance-evidence-summary a,.attendance-evidence-links a{color:var(--purple);font-weight:700}
.attendance-evidence-links{display:block;margin:2px 0;white-space:nowrap}
@media(max-width:720px){.attendance-capture{margin:0 12px 14px}.attendance-capture>.btn{width:100%}.attendance-evidence-summary{padding:0 12px 14px;display:grid}}
.attendance-filter .attendance-name-filter{min-width:240px;flex:1}
.attendance-filter input[type=search]{width:100%}
@media(max-width:720px){
    body{font-size:14px}
    .content{padding:20px 16px 26px}
    .footer{padding:15px 16px}
    .topbar{gap:10px}
    .topbar-heading{flex:1;min-width:0}
    .topbar-heading>div{overflow:hidden}
    .topbar h1{max-width:100%;line-height:1.2}
    .topbar .eyebrow{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .today{flex:none}
    .welcome-row,.page-actions{align-items:stretch;flex-direction:column;gap:10px}
    .welcome-row>.btn,.page-actions>.btn,.page-actions>.actions{align-self:flex-start}
    .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
    .stat-card{min-height:124px;padding:15px}
    .stat-card strong{font-size:20px;white-space:normal;overflow-wrap:anywhere}
    .stat-icon{right:12px;top:12px}
    .summary-grid,.summary-four{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
    .summary-card{min-width:0;padding:13px}
    .summary-card strong{overflow-wrap:anywhere}
    .panel,.form-panel{min-width:0}
    .panel-heading{align-items:flex-start;padding:16px}
    .panel-heading>.btn,.panel-heading>.text-link{flex:none}
    .table-wrap{max-width:100%;overscroll-behavior-x:contain}
    .table-wrap table{min-width:600px}
    .form-panel{padding:17px}
    .form-grid{grid-template-columns:minmax(0,1fr);gap:13px}
    .form-grid>.full-width,.form-grid>.form-actions{grid-column:1}
    .form-actions{flex-wrap:wrap}
    .form-actions>.btn{min-height:42px}
    .filter-bar{align-items:stretch;flex-wrap:wrap}
    .filter-bar label,.attendance-filter .attendance-name-filter{min-width:0;flex:1 1 100%}
    .filter-bar>.btn{min-height:40px}
    .actions{flex-wrap:wrap}
    .attendance-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
    .clock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .auth-wrap{min-height:calc(100dvh - 62px);padding:24px 14px}
    .auth-card{padding:26px 21px}
    input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
}
@media(max-width:480px){
    .content{padding:16px 12px 22px}
    .footer{padding:13px 12px}
    .topbar{padding:12px}
    .topbar-heading{gap:8px}
    .sidebar-toggle{width:40px;height:40px;flex-basis:40px}
    .today{padding:7px 8px;font-size:9px}
    .stats-grid{gap:8px}
    .stat-card{min-height:116px;padding:12px}
    .stat-label{max-width:calc(100% - 34px);line-height:1.4}
    .stat-card strong{font-size:18px;margin-top:17px}
    .panel-heading{padding:14px 12px}
    .form-panel{padding:14px}
    .form-panel>.panel-heading{padding-bottom:16px}
    .summary-card{padding:11px}
    .attendance-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .attendance-actions{flex-wrap:wrap}
    .attendance-actions>.btn{flex:1 1 auto;min-height:40px}
    .clock-grid{grid-template-columns:1fr}
    .actions>.btn,.actions>form{flex:1 1 auto}
    .actions>form>.btn{width:100%;min-height:40px}
}
@media(max-width:360px){
    .content{padding-right:10px;padding-left:10px}
    .today{font-size:8px}
    .stat-card{padding:10px}
    .stat-card strong{font-size:16px}
    .btn{padding:0 10px}
}