@font-face {
    font-family: Inter;
    src: url("../fonts/Inter-Variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --bs-font-sans-serif: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bs-body-bg: #f3f6fb;
    --bs-body-color: #172742;
    --bs-secondary-color: #53647c;
    --bs-border-color: #dce4ef;
    --bs-primary: #2355d8;
    --bs-primary-rgb: 35, 85, 216;
    --bs-link-color: #1a4ac3;
    --bs-link-color-rgb: 26, 74, 195;
    --bs-link-hover-color: #11378f;
    --bs-link-hover-color-rgb: 17, 55, 143;
    --nav-width: 248px;
    --nav-color: #12233e;
    --surface: #fff;
    --line: #e1e7f0;
    --ink: #162641;
    --muted: #53647c;
    --soft-shadow: 0 2px 3px #15254704, 0 8px 22px #20335706;
}

body { font-size: .92rem; }
a { text-decoration: none; }
main:focus { outline: 0; }
:focus-visible { outline: 3px solid #7395ff; outline-offset: 2px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 2000; background: #fff; color: var(--ink); padding: .7rem 1rem; border-radius: .5rem; }

.app-nav {
    --bs-offcanvas-width: min(20rem, 88vw);
    --bs-offcanvas-bg: var(--nav-color);
    --bs-offcanvas-color: #eff4ff;
    background: var(--nav-color) !important;
    color: #eff4ff;
}
.nav-brand-row { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; min-height: 82px; gap: 10px; padding: 0 17px; border-bottom: 1px solid #ffffff14; }
.brand-block, .login-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
    width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; overflow: hidden;
    border-radius: 11px; color: #fff; background: #2858d6; font-size: .92rem; font-weight: 800; letter-spacing: -.02em;
}
.brand-mark img { width: 100%; height: 100%; padding: 4px; background: #fff; object-fit: contain; }
.brand-mark.lg { width: 54px; height: 54px; }
.brand-caption { min-width: 0; }
.brand-caption strong, .brand-caption small, .login-brand strong, .login-brand small { display: block; overflow-wrap: anywhere; }
.brand-caption strong { color: #fff; font-size: .81rem; font-weight: 690; line-height: 1.3; }
.brand-caption small { color: #adc0e0; font-size: .68rem; margin-top: 4px; }
.app-nav .offcanvas-body { display: block; min-height: 0; padding: 12px 12px 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #45618c transparent; }
.nav-caption { margin: 17px 0 6px 11px; color: #a6bade; font-size: .65rem; font-weight: 690; letter-spacing: .08em; text-transform: uppercase; }
.nav-group:first-child .nav-caption { margin-top: 6px; }
.side-link {
    display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 10px; border: 1px solid transparent;
    margin-bottom: 2px; border-radius: 8px; color: #d2dff4; font-size: .79rem; font-weight: 560;
}
.side-link svg { flex: 0 0 auto; color: #b4c7ee; }
.side-link:hover { color: #fff; background: #ffffff11; }
.side-link.active { color: #fff; background: #2856c2; border-color: #4b71cc; box-shadow: 0 4px 10px #08173930; }
.side-link.active svg { color: #fff; }
.nav-account { border-top: 1px solid #ffffff14; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); background: var(--nav-color); }

.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
    min-height: 67px; padding: 8px clamp(14px, 2.25vw, 34px); position: sticky; z-index: 1020; top: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border-bottom: 1px solid var(--line);
}
.header-start, .header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-actions { flex: 0 0 auto; gap: 16px; }
.header-context { white-space: nowrap; color: var(--muted); font-size: .78rem; }
.header-divider { color: #8291a9; }
.header-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 680; }
.btn-nav-toggle { color: var(--ink); border: 1px solid var(--line); background: #fff; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; }
.btn-nav-toggle:hover { color: #1949bf; background: #eef3ff; }
.server-clock { gap: 7px; align-items: center; font-size: .79rem; color: #304968; font-weight: 650; font-variant-numeric: tabular-nums; }
.server-clock small { color: #586b85; font-size: .66rem; }
.account-trigger { align-items: center; display: flex; gap: 8px; padding: 4px; color: var(--ink); border: none; font-size: .78rem; text-align: left; }
.account-trigger:hover, .account-trigger.show { color: #1949bf; background: #eef3ff; }
.account-label { max-width: 140px; line-height: 1.18; }
.account-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.account-label small { display: block; margin-top: 4px; color: var(--muted); font-size: .67rem; }
.avatar, .initial, .profile-avatar {
    display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    color: #214ebd; background: #e9efff; font-weight: 750; font-size: .8rem;
}
.profile-avatar { width: 62px; height: 62px; border-radius: 17px; font-size: 1.45rem; }
.account-trigger:after { margin: 0 3px 0 4px; }
.dropdown-menu { --bs-dropdown-bg: #fff; --bs-dropdown-font-size: .87rem; --bs-dropdown-link-hover-bg: #eef3fd; box-shadow: var(--soft-shadow); }
.dropdown-item { display: flex; align-items: center; gap: 9px; padding-top: .55em; padding-bottom: .55em; }
.main-content { width: 100%; max-width: 1530px; margin: 0 auto; padding: clamp(22px,2.65vw,38px) clamp(14px,2.25vw,34px) 40px; flex: 1 0 auto; min-width: 0; }
.app-footer { color: var(--muted); font-size: .75rem; padding: 15px clamp(14px,2.25vw,34px); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

.section-heading, .page-intro {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 23px;
}
.section-heading h1, .page-intro h1, .section-heading h2 { margin: 0 0 6px; font-size: clamp(1.6rem,2.5vw,2.2rem); font-weight: 760; letter-spacing: -.043em; line-height: 1.13; }
.section-heading p, .page-intro p { margin: 0; color: var(--muted); max-width: 68ch; }
.page-intro .intro-date { margin-bottom: 6px; font-size: .82rem; font-weight: 650; color: #2754ba; }
.eyebrow { display: inline-block; color: #3760ad; font-size: .66rem; font-weight: 700; letter-spacing: .075em; margin-bottom: 2px; }
.surface-card, .metric-card, .office-panel {
    min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--soft-shadow);
}
.surface-card > .table-responsive:last-child { border-radius: 0 0 13px 13px; }
.surface-card > .table-responsive:first-child { border-radius: 13px; }
.card-pad, .office-panel { padding: clamp(15px, 1.7vw, 23px); }
.card-heading, .card-toolbar h2, .card-toolbar h3 { font-size: 1.02rem; font-weight: 740; letter-spacing: -.025em; margin: 0 0 12px; }
.card-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px clamp(15px, 1.7vw, 23px); }
.card-toolbar h2, .card-toolbar h3 { margin: 0; }
.card-toolbar form { min-width: 0; }
.metric-card { padding: 17px; height: 100%; position: relative; }
.metric-body { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.metric-label { color: #4e607d; font-size: .78rem; font-weight: 660; line-height: 1.35; }
.metric-value { margin-top: 4px; font-size: clamp(1.45rem,2.45vw,2rem); line-height: 1.18; letter-spacing: -.055em; font-weight: 760; font-variant-numeric: tabular-nums; }
.metric-note { margin-top: 8px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.metric-icon, .icon-tile, .quick-icon, .pay-icon, .timeline-node, .status-icon {
    display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
    background: #eaf0ff; color: #214ebd;
}
.metric-blue .metric-icon, .metric-green .metric-icon { color: #087254; background: #e6f8f0; }
.metric-gold .metric-icon { color: #8a570b; background: #fef1d9; }
.metric-red .metric-icon { color: #aa284c; background: #fdebf0; }
.money-value { font-size: clamp(1.18rem,2vw,1.62rem); overflow-wrap: anywhere; }
.tiny-muted { font-size: .75rem; color: var(--muted); line-height: 1.42; overflow-wrap: anywhere; }
.tabular, time { font-variant-numeric: tabular-nums; }

.btn { --bs-btn-font-size: .86rem; --bs-btn-font-weight: 650; --bs-btn-border-radius: 9px; --bs-btn-padding-x: .85rem; --bs-btn-padding-y: .55rem; }
.btn svg { vertical-align: -3px; }
.btn-sm { --bs-btn-font-size: .77rem; --bs-btn-padding-x: .62rem; --bs-btn-padding-y: .36rem; --bs-btn-border-radius: 8px; }
.btn-lg { --bs-btn-font-size: .94rem; --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .74rem; }
.btn-accent {
    --bs-btn-color: #fff; --bs-btn-bg: #2355d8; --bs-btn-border-color: #2355d8;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1b45bb; --bs-btn-hover-border-color: #1b45bb; --bs-btn-focus-shadow-rgb: 98,134,220;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #173da6; --bs-btn-active-border-color: #173da6;
    --bs-btn-disabled-color: #536580; --bs-btn-disabled-bg: #e9eef7; --bs-btn-disabled-border-color: #dbe3f0; --bs-btn-disabled-opacity: 1;
}
.btn-outline-accent {
    --bs-btn-color: #204cbc; --bs-btn-border-color: #c6d4f6; --bs-btn-hover-color: #143fba; --bs-btn-hover-bg: #eaf0ff;
    --bs-btn-hover-border-color: #a0b7ed; --bs-btn-active-bg: #dce8ff; --bs-btn-active-color: #143fba;
    --bs-btn-active-border-color: #9bb3f1; --bs-btn-focus-shadow-rgb: 98,134,220;
}
.btn-outline-secondary { --bs-btn-color: #3d526f; --bs-btn-border-color: #d5deeb; --bs-btn-hover-bg: #eef3f9; --bs-btn-hover-color: #172b4b; --bs-btn-hover-border-color: #c2cee0; }
.form-control, .form-select, .input-group-text { background-color: #fff; font-size: .86rem; min-width: 0; border-radius: 8px; }
.form-control, .form-select { min-height: 42px; }
.form-control-sm, .form-select-sm { min-height: 34px; }
.form-control-lg, .form-select-lg { min-height: 46px; }
.form-label { color: #344862; font-weight: 650; font-size: .8rem; }
.form-control:focus, .form-select:focus { border-color: #719bfc; background: #fff; box-shadow: 0 0 0 3px #2355d820; }
.form-check-input:checked { background-color: #2355d8; border-color: #2355d8; }
.form-text { color: var(--muted); line-height: 1.5; font-size: .76rem; }
.filter-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; max-width: 100%; }
.filter-form > div { min-width: 0; }
.table { --bs-table-bg: #fff; --bs-table-color: var(--ink); --bs-table-border-color: #e8edf4; margin: 0; font-size: .82rem; vertical-align: middle; }
.table th { padding: 11px 13px; white-space: nowrap; color: #445974; background: #f6f8fc; font-weight: 700; font-size: .72rem; line-height: 1.4; vertical-align: middle; }
.table td { padding: 11px 13px; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background-color: #f9fbff; }
.table td > :first-child:last-child { max-width: 100%; }
.table .table-user { display: flex; align-items: center; gap: 9px; min-width: 135px; }
.table-user strong { overflow-wrap: anywhere; }
.table .spread-cell { min-width: 180px; max-width: 360px; overflow-wrap: anywhere; white-space: normal; }
.table td.empty, .empty { color: var(--muted); padding: 23px 15px; text-align: center; font-size: .85rem; }
.table .btn { white-space: nowrap; }
html .badge {
    font-size: .69rem; font-weight: 660; padding: .46em .68em; border-radius: 6px; line-height: 1.24;
}
.badge-soft-success { background: #e6f7ee; color: #086341; }
.badge-soft-warning { background: #fff2d5; color: #794a05; }
.badge-soft-danger { background: #fde8ed; color: #a62648; }
.badge-soft-info { background: #e4f5ff; color: #175772; }
.badge-soft-primary { background: #e9efff; color: #2047ae; }
.badge-soft-secondary { background: #edf1f7; color: #435571; }
.alert { border-radius: 10px; padding: .85rem 1rem; font-size: .84rem; }
.alert-dismissible { padding-right: 2.85rem; }
.note-box, .location-bubble { padding: .8rem 1rem; background: #eef3fe; color: #2d4670; border: 1px solid #dbe6fb; border-radius: 10px; font-size: .82rem; line-height: 1.52; overflow-wrap: anywhere; }
.location-bubble.is-valid { color: #075e43; background: #ecf8f1; border-color: #ccebdd; }
.location-bubble.is-invalid { color: #9e2347; background: #fff2f5; border-color: #f4cedb; }
.stat-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #4f617a; padding: .64rem 0; border-bottom: 1px solid #edf0f5; font-size: .82rem; min-width: 0; }
.stat-item:last-child { border-bottom: 0; }
.stat-item strong { color: var(--ink); text-align: right; }
.report-feed { display: grid; gap: 8px; }
.report-feed-item { color: var(--ink); display: flex; min-width: 0; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px; }
.report-feed-item:hover { color: #1f4fbe; border-color: #9db4ee; }
.report-feed-date { min-width: 40px; padding: 5px; background: #ecf1ff; color: #2650be; border-radius: 7px; text-align: center; }
.report-feed-date > * { display: block; line-height: 1.15; }

.quick-access { display: flex; align-items: center; color: var(--ink); gap: 10px; background: #fff; min-height: 58px; height: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; }
.quick-access:hover { color: #204cbc; border-color: #a1b9ee; box-shadow: var(--soft-shadow); }
.quick-access > svg { margin-left: auto; color: #5277d5; flex: 0 0 auto; }
.quick-access strong, .quick-access small { display: block; }
.quick-access strong { font-size: .79rem; font-weight: 710; }
.quick-access small { font-size: .71rem; color: var(--muted); margin-top: 2px; }
.quick-icon { width: 34px; height: 34px; }
.dash-chart { --bar-grid: #e5ecf5; height: 177px; margin: 10px 2px 0; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: clamp(4px,1vw,16px); }
.dash-day { display: grid; height: 100%; grid-template-rows: 1fr 24px; justify-items: stretch; align-items: stretch; text-align: center; min-width: 0; }
.dash-track { position: relative; display: flex; align-items: flex-end; justify-content: center; background: repeating-linear-gradient(to top, transparent 0,transparent calc(25% - 1px), var(--bar-grid) calc(25% - 1px),var(--bar-grid) 25%); }
.dash-bar { position: relative; width: clamp(14px,3.5vw,39px); height: var(--height); border-radius: 6px 6px 0 0; background: #6b91ef; }
.dash-day.today .dash-bar { background: #2355d8; }
.dash-track[data-empty] .dash-bar { height: 2px; background: #cdd9eb; }
.dash-value { position: absolute; left: 50%; bottom: calc(var(--height) + 2px); transform: translateX(-50%); color: #304d83; font-size: .68rem; font-weight: 700; }
.dash-day small { padding-top: 6px; color: var(--muted); font-weight: 650; }
.dash-chart { padding-top: 15px; }

.video-stage {
    position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; min-height: 155px; max-height: 310px;
    overflow: hidden; border-radius: 12px; background: #142442; color: #dbe9ff;
}
.video-stage > video, .video-stage > img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.video-stage > video { transform: scaleX(-1); }
.video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 15px; color: #cddcf7; font-size: .83rem; }
.video-placeholder svg { color: #9cbaf9; }
.camera-guideline { position: absolute; height: 72%; aspect-ratio: 3/4; border: 2px dashed #ffffffad; border-radius: 50%; pointer-events: none; }
.camera-controls, .camera-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.camera-help { color: var(--muted); font-size: .77rem; }
.attendance-checks .metric-card { padding: 13px 15px; }
.attendance-checks .metric-value { font-size: 1.45rem; line-height: 1.16; margin-top: 2px; }
.attendance-checks .metric-icon { width: 34px; height: 34px; }
.attendance-action { border-top: 3px solid #4e75df; }
.attendance-clock { font-size: 1rem; font-weight: 720; color: #214ba8; }
.modal-content { --bs-modal-bg: #fff; }
.modal-body .video-stage { max-height: 214px; }
.dialog-status { min-height: 1.2em; }

.auth-main { min-height: 100vh; min-height: 100dvh; }
.auth-body { background: #fff; }
.login-shell { display: grid; min-height: 100vh; min-height: 100dvh; }
.login-aside {
    background: radial-gradient(ellipse at 80% 22%, #355eaa, transparent 61%), linear-gradient(146deg,#122441 12%,#193566 78%);
    padding: clamp(32px,5vw,76px); color: #fff;
}
.login-aside-content { display: flex; flex-direction: column; justify-content: space-between; width: 100%; gap: 40px; }
.login-aside .brand-caption strong { font-size: 1rem; }
.login-aside .brand-caption small { font-size: .77rem; }
.login-aside .brand-mark { background: #e2ebff; color: #1d49aa; }
.login-presentation { max-width: 475px; }
.login-presentation h2 { font-size: clamp(2.5rem,4.4vw,4.5rem); font-weight: 740; letter-spacing: -.064em; margin: 0 0 14px; line-height: 1.05; }
.login-presentation p { color: #d7e5ff; font-size: 1rem; max-width: 36ch; line-height: 1.65; }
.login-schedule { display: flex; align-items: center; gap: 12px; border: 1px solid #6d8db066; background: #ffffff0a; border-radius: 13px; padding: 13px; max-width: 340px; margin-top: 31px; }
.login-schedule strong, .login-schedule span { display: block; }
.login-schedule .icon-tile { display: grid; }
.login-schedule div > span { color: #d1e0fb; font-size: .73rem; }
.login-zone { color: #d5e3ff; font-size: .75rem; margin-left: auto; }
.login-copyright { color: #d3e2fc; }
.login-form-panel { display: grid; place-items: center; align-content: center; padding: 32px 25px; }
.login-form-wrap { width: min(100%,410px); }
.login-title { font-size: clamp(1.85rem,3.1vw,2.55rem); font-weight: 760; letter-spacing: -.048em; margin-bottom: 11px; }
.login-brand small { color: var(--muted); font-size: .78rem; }
.installer-shell { max-width: 750px; }

@media (min-width: 992px) {
    .app-nav { position: fixed; inset: 0 auto 0 0; width: var(--nav-width); z-index: 1021; display: flex; flex-direction: column; }
    .app-nav .offcanvas-body { flex: 1 1 auto; }
    .app-shell { margin-left: var(--nav-width); }
    .login-shell { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .topbar { min-height: 60px; }
    .header-start { gap: 8px; }
    .header-page { font-size: .82rem; }
    .main-content { padding-top: 19px; }
    .card-toolbar { align-items: flex-start; }
    .metric-card { padding: 12px; }
    .metric-label { font-size: .74rem; }
    .metric-note { font-size: .7rem; }
    .metric-icon { height: 30px; width: 30px; border-radius: 8px; }
    .metric-icon svg { width: 17px; height: 17px; }
    .filter-form > div { flex: 1 1 135px; }
    .page-intro .btn, .section-heading .btn { min-height: 40px; }
    .form-control, .form-select { font-size: max(16px,.86rem); }
    .camera-controls .btn, .camera-actions .btn { padding: 8px 5px; font-size: .76rem; }
    .table th, .table td { padding-left: 11px; padding-right: 11px; }
}

.form-control[type="date"], .form-control[type="month"], .form-control[type="time"] { max-width: 100%; }
.form-control:disabled { background-color: #edf1f8; }
.table-responsive:focus-visible { outline-offset: -3px; }