@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');
:root{--primary-cyan:#00bcd4;--primary-cyan-dark:#008c9d;--primary-gradient:linear-gradient(135deg,#00d9e8,#0097a7);--text-primary:#15283d;--text-secondary:#43546a;--text-muted:#748397;--border-color:#e4ebf2;--bg-light:#f3f6fa;--success:#0c9a71;--danger:#d84242;--shadow-card:0 18px 48px rgba(19,41,66,.09);--transition:all .2s ease}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;scroll-behavior:smooth}
body{min-height:100vh;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;color:var(--text-secondary);background:var(--bg-light);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}

/* Landing page */
.welcome-page{position:relative;display:flex;min-height:100vh;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:40px 24px 190px;background:radial-gradient(ellipse at 50% 30%,#fff 0,#effbfd 46%,#e4f7f8 100%);text-align:center}
.corner-accent{position:absolute;width:300px;height:300px;border-radius:50%;pointer-events:none}.corner-top-right{top:-175px;right:-80px;background:rgba(0,188,212,.16)}.corner-bottom-left{bottom:-210px;left:-100px;background:rgba(0,151,167,.13)}
.welcome-brand-section{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}.brand-card-elevated{display:grid;width:124px;height:124px;place-items:center;padding:16px;background:#fff;border:1px solid #e9f0f3;border-radius:30px;box-shadow:0 22px 50px rgba(0,151,167,.16)}.brand-logo-img{width:100%;height:100%;object-fit:contain}.company-title-bold{margin-top:20px;color:#10263c;font-size:29px;font-weight:800;letter-spacing:.04em}.company-sub-text{margin-top:4px;color:#63778b;font-size:13px;font-weight:600;letter-spacing:.04em}.welcome-bottom-sheet{position:absolute;right:0;bottom:0;left:0;padding:32px 24px;background:linear-gradient(120deg,#00c4d3,#008f9e);border-radius:32px 32px 0 0;box-shadow:0 -14px 35px rgba(0,103,117,.12)}.welcome-sheet-content{display:flex;width:min(980px,100%);align-items:center;justify-content:space-between;gap:25px;margin:0 auto;text-align:left}.welcome-heading{color:#fff;font-size:25px;font-weight:800}.welcome-description{max-width:560px;margin-top:6px;color:rgba(255,255,255,.82);font-size:13px}.btn-signin-black{display:inline-flex;min-width:150px;min-height:46px;align-items:center;justify-content:center;gap:12px;padding:12px 22px;color:#fff;background:#172638;border:0;border-radius:999px;box-shadow:0 10px 22px rgba(13,32,50,.2);font-size:12px;font-weight:800;letter-spacing:.08em;text-decoration:none;transition:var(--transition)}.btn-signin-black:hover{transform:translateY(-2px);background:#0c1725;box-shadow:0 13px 26px rgba(13,32,50,.25)}
.splash-overlay{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;pointer-events:none;animation:fadeSplash .5s ease 1s forwards}.splash-content{display:flex;flex-direction:column;align-items:center}.splash-logo-wrap{width:90px;height:90px;margin-bottom:15px;padding:13px;background:#fff;border-radius:22px;box-shadow:0 12px 32px rgba(0,188,212,.15)}.splash-title{color:#10263c;font-size:20px;font-weight:800}.splash-subtitle{color:#0097a7;font-size:11px;font-weight:700;letter-spacing:.12em}@keyframes fadeSplash{to{opacity:0;visibility:hidden}}

/* Sign-in, registration and password pages */
.auth-page-wrapper{display:flex;min-height:100vh;flex-direction:column;background:#f2f5f9}.auth-top-header{position:relative;min-height:275px;padding:0 24px 88px;color:#fff;background:linear-gradient(120deg,#00bfd0,#008e9f);overflow:hidden}.auth-top-header::before{content:"";position:absolute;right:-80px;bottom:-250px;width:450px;height:450px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 32px rgba(255,255,255,.05),0 0 0 70px rgba(255,255,255,.035)}.auth-nav-bar{position:relative;z-index:1;display:flex;width:min(1050px,100%);height:70px;align-items:center;justify-content:space-between;margin:0 auto}.btn-nav-back{display:grid;width:40px;height:40px;place-items:center;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:50%;text-decoration:none;transition:var(--transition)}.btn-nav-back:hover{background:rgba(255,255,255,.25);transform:translateX(-2px)}.nav-link-register{padding:8px 14px;color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:11px;font-weight:700;text-decoration:none}.nav-link-register:hover{background:rgba(255,255,255,.15)}.header-text-block{position:relative;z-index:1;width:min(760px,100%);margin:26px auto 0;text-align:center}.auth-title{color:#fff;font-size:30px;font-weight:800;letter-spacing:-.03em}.auth-subtitle{margin:6px auto 0;color:rgba(255,255,255,.82);font-size:12px}.auth-sheet-card{position:relative;z-index:2;width:min(760px,calc(100% - 32px));margin:-62px auto 35px;padding:32px 38px;background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:28px;box-shadow:var(--shadow-card)}.form-group{position:relative;margin:0 0 16px}.form-label{display:block;margin:0 0 7px 4px;color:#4b5d70;font-size:11px;font-weight:700}.pill-input{display:block;width:100%;height:53px;padding:0 20px;color:#17283b;background:#e8edf4;border:1px solid transparent;border-radius:999px;outline:0;font-size:14px;transition:var(--transition)}.pill-input::placeholder{color:#8694a5}.pill-input:focus{background:#fff;border-color:#00bfd0;box-shadow:0 0 0 4px rgba(0,188,212,.15)}.input-with-icon .pill-input{padding-right:58px}.pill-toggle-pwd{position:absolute;top:50%;right:8px;display:grid;width:40px;height:40px;place-items:center;margin-top:-20px;color:#65768a;background:transparent;border:0;border-radius:50%;cursor:pointer}.pill-toggle-pwd svg{width:20px;height:20px}.form-meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 24px}.checkbox-custom{display:inline-flex;align-items:center;gap:8px;color:#718096;font-size:12px;cursor:pointer}.checkbox-custom input{width:17px;height:17px;accent-color:#00bcd4}.forgot-link-text{color:#52708d;font-size:12px;font-weight:600;text-decoration:none}.forgot-link-text:hover{color:#008c9d;text-decoration:underline}.btn-pill-submit{display:flex;width:100%;min-height:54px;align-items:center;justify-content:center;gap:12px;color:#fff;background:#1c293a;border:0;border-radius:999px;box-shadow:0 9px 19px rgba(19,41,66,.16);font-size:14px;font-weight:800;cursor:pointer;transition:var(--transition)}.btn-pill-submit:hover{transform:translateY(-1px);background:#111d2c}.btn-pill-submit:disabled{opacity:.7;cursor:wait}.spinner-loader{display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.spinner-loader.active{display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}
.flow-alert-box{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px 14px;border-radius:12px;font-size:12px}.flow-alert-box svg{width:19px;height:19px;flex:0 0 19px}.alert-flow-error{color:#c33131;background:#fff0f0;border:1px solid #ffdada}.alert-flow-success{color:#087b58;background:#eaf9f2;border:1px solid #c7efdd}.demo-accounts-panel{margin-top:23px;padding:16px;background:#f7f9fc;border:1px solid #e8edf3;border-radius:15px}.demo-title{margin-bottom:10px;color:#6d7c8e;font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.demo-buttons-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.btn-quick-fill{display:grid;gap:2px;padding:10px 12px;text-align:left;background:#fff;border:1px solid #e0e7ef;border-radius:10px;cursor:pointer;transition:var(--transition)}.btn-quick-fill:hover{border-color:#00bcd4;box-shadow:0 4px 12px rgba(0,151,167,.08);transform:translateY(-1px)}.quick-role{color:#008c9d;font-size:10px;font-weight:800}.quick-cred{color:#748397;font-size:10px}.auth-sheet-card .form-meta-row+.btn-pill-submit{margin-top:0}

/* ========================================================
   Dashboard overview
   ======================================================== */
.dashboard-wrapper {
    display: block;
    min-height: 100vh;
    background: #f4f7fb;
    color: #182536;
}

.dash-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 clamp(20px, 5vw, 76px);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #e7edf4;
    box-shadow: 0 3px 16px rgba(19, 41, 66, 0.04);
    backdrop-filter: blur(14px);
}

.dash-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.dash-logo-icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0  58px;
    place-items: center;
    overflow: hidden;
    padding: 5px;
    background: #fff;
    border: 1px solid #e6edf3;
    border-radius: 14px;
    box-shadow: 0 5px 14px rgba(0, 151, 167, .10);
}

.dash-logo-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dash-brand-copy { display: grid; gap: 2px; }
.dash-brand-copy strong { color: #14263a; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.dash-brand-copy small { color: #718096; font-size: 11px; font-weight: 600; letter-spacing: .04em; }

.dash-user-bar { display: flex; align-items: center; gap: 15px; }
.user-badge-item { display: flex; align-items: center; gap: 10px; }
.avatar-badge {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #00bfd3, #008c9d);
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(0, 151, 167, .19);
    font-size: 16px;
    font-weight: 800;
}
.user-badge-copy { display: grid; justify-items: start; gap: 3px; }
.user-badge-copy strong { max-width: 190px; overflow: hidden; color: #1e293b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.role-pill { display: inline-flex; align-items: center; width: fit-content; padding: 4px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.role-pill-admin { color: #7c3aed; background: #f3e8ff; }
.role-pill-petugas { color: #087f8c; background: #dff8fa; }

.dashboard-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 22px; }
.dashboard-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 7px; color: #008c9d; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.dashboard-page-heading h1 { color: #13243a; font-size: clamp(27px, 3vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.page-subtitle { margin-top: 8px; color: #718096; font-size: 13px; }
.today-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; color: #526174; background: #fff; border: 1px solid #e7edf4; border-radius: 999px; box-shadow: 0 3px 12px rgba(19, 41, 66, .03); font-size: 11px; font-weight: 700; white-space: nowrap; }
.today-dot { width: 7px; height: 7px; border-radius: 50%; background: #0eb98c; box-shadow: 0 0 0 4px #dcf8ef; }
.dashboard-alert { margin: 0 0 18px; padding: 13px 16px; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; font-size: 13px; }

.hero-dash-banner {
    position: relative;
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    overflow: hidden;
    padding: 30px clamp(24px, 4vw, 46px);
    color: #fff;
    background: linear-gradient(116deg, #073b50 0%, #087c8a 58%, #08afbd 100%);
    border-radius: 22px;
    box-shadow: 0 16px 34px rgba(4, 110, 128, .17);
}
.hero-dash-banner::after { content: ""; position: absolute; top: -120px; right: 14%; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.035), 0 0 0 70px rgba(255,255,255,.025); pointer-events: none; }
.hero-copy, .hero-session { position: relative; z-index: 1; }
.hero-kicker, .session-label { display: block; color: #a9eff1; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.hero-copy h2 { margin: 11px 0 8px; color: #fff; font-size: clamp(23px, 3vw, 32px); font-weight: 800; letter-spacing: -.035em; }
.hero-copy p { max-width: 610px; color: rgba(255,255,255,.78); font-size: 12.5px; line-height: 1.7; }
.hero-session { display: grid; min-width: 190px; gap: 8px; padding: 16px 18px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 15px; backdrop-filter: blur(8px); }
.hero-session strong { color: #fff; font-size: 12px; }
.hero-link { width: fit-content; margin-top: 4px; color: #c8fbfc; font-size: 11px; font-weight: 700; text-decoration: none; }
.hero-link:hover { color: #fff; text-decoration: underline; }

.dash-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 21px 0 25px; }
.dash-stats-grid.staff-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-item-card { display: flex; min-height: 126px; align-items: center; gap: 15px; padding: 20px; background: #fff; border: 1px solid #e8eef4; border-radius: 17px; box-shadow: 0 5px 18px rgba(19, 41, 66, .035); transition: transform .2s ease, box-shadow .2s ease; }
.stat-item-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(19, 41, 66, .08); }
.stat-icon-wrap { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 14px; }
.stat-icon-wrap svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat-cyan .stat-icon-wrap { color: #078c9c; background: #e3f9fb; }
.stat-green .stat-icon-wrap { color: #0c9a71; background: #e4f8f0; }
.stat-blue .stat-icon-wrap { color: #3478d4; background: #eaf2ff; }
.stat-purple .stat-icon-wrap { color: #8b5bd4; background: #f2eaff; }
.stat-copy { display: grid; min-width: 0; gap: 2px; }
.stat-desc { color: #708095; font-size: 11px; font-weight: 700; }
.stat-number { color: #192b40; font-size: 27px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.stat-note { color: #a1adba; font-size: 10px; }

.table-panel-card { overflow: hidden; background: #fff; border: 1px solid #e7edf4; border-radius: 18px; box-shadow: 0 7px 24px rgba(19, 41, 66, .045); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; }
.panel-heading .eyebrow { margin-bottom: 5px; }
.panel-heading h2, .staff-note-card h2 { color: #1a2c40; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.panel-subtitle { margin-top: 4px; color: #8491a1; font-size: 11px; }
.btn-open-reset { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 15px; color: #fff; background: #0a8f9e; border: 1px solid #0a8f9e; border-radius: 10px; box-shadow: 0 5px 12px rgba(8, 143, 158, .14); font-size: 11px; font-weight: 800; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.btn-open-reset:hover { transform: translateY(-1px); background: #087b89; }
.table-scroll { width: 100%; overflow-x: auto; }
.table-modern { width: 100%; border-collapse: collapse; text-align: left; }
.table-modern thead { background: #f7f9fc; }
.table-modern th { padding: 11px 18px; color: #8190a1; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.table-modern td { padding: 13px 18px; color: #465569; border-bottom: 1px solid #f0f3f6; font-size: 11px; white-space: nowrap; }
.table-modern tbody tr:last-child td { border-bottom: 0; }
.table-modern tbody tr:hover { background: #fbfdff; }
.table-name { color: #27384c; font-weight: 700; }
.you-tag { display: inline-flex; margin-left: 7px; padding: 3px 6px; color: #07818f; background: #e4f8fa; border-radius: 5px; font-size: 8px; font-weight: 800; }
.code-badge { padding: 4px 7px; color: #526174; background: #f2f5f8; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.table-muted { color: #8693a2 !important; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.status-pill > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active { color: #07865f; background: #e7f8f0; }
.status-inactive { color: #bd4a4a; background: #fff0ef; }
.table-empty { padding: 34px !important; color: #8c99a8 !important; text-align: center; }
.staff-note-card { display: flex; align-items: flex-start; gap: 14px; padding: 21px 23px; background: #fff; border: 1px solid #e7edf4; border-radius: 17px; box-shadow: 0 7px 24px rgba(19, 41, 66, .035); }
.staff-note-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: #07865f; background: #e7f8f0; border-radius: 11px; font-weight: 900; }
.staff-note-card p { margin-top: 5px; color: #78879a; font-size: 11px; line-height: 1.6; }
.dashboard-footer { padding: 25px 0 10px; color: #96a2b0; text-align: center; font-size: 10px; }
.dashboard-footer span { padding: 0 5px; color: #c3ccd6; }

@media (max-width: 920px) {
    .dash-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-dash-banner { align-items: flex-start; }
    .hero-session { min-width: 165px; }
}
@media (max-width: 640px) {
    .dash-nav { min-height: 70px; gap: 10px; padding: 0 16px; }
    .dash-logo-icon { width: 48px; height: 48px; flex-basis: 48px; }
    .dash-brand-copy small { display: none; }
    .dash-brand-copy strong { font-size: 14px; }
    .dash-user-bar { gap: 5px; }
    .user-badge-item { gap: 7px; }
    .avatar-badge { width: 36px; height: 36px; flex-basis: 36px; font-size: 13px; }
    .user-badge-copy strong { max-width: 100px; font-size: 11px; }
    .role-pill { padding: 3px 7px; font-size: 8px; }
    .logout-button-wrapper { width: 54px; height: 54px; flex-basis: 54px; }
    .logout-button-wrapper .button { width: 54px; height: 54px; }
    .logout-button-wrapper .button-elem { margin: 16px 11px 0 14px; }
    .logout-button-wrapper .button:hover .button-box, .logout-button-wrapper .button:focus-visible .button-box { transform: translateX(-50px); }
    .dashboard-container { width: min(100% - 30px, 1180px); padding-top: 27px; }
    .dashboard-page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
    .hero-dash-banner { min-height: 0; flex-direction: column; gap: 19px; padding: 24px 21px; border-radius: 18px; }
    .hero-copy h2 { font-size: 24px; }
    .hero-session { width: 100%; min-width: 0; }
    .dash-stats-grid { gap: 10px; margin: 15px 0 19px; }
    .stat-item-card { min-height: 106px; gap: 10px; padding: 13px 11px; border-radius: 14px; }
    .stat-icon-wrap { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
    .stat-icon-wrap svg { width: 19px; height: 19px; }
    .stat-desc { font-size: 9px; }
    .stat-number { font-size: 22px; }
    .stat-note { font-size: 8px; }
    .panel-heading { align-items: flex-start; padding: 18px 16px 15px; }
    .panel-heading h2 { font-size: 16px; }
    .btn-open-reset { min-height: 34px; padding: 0 10px; font-size: 9px; white-space: nowrap; }
    .table-modern th, .table-modern td { padding: 11px 13px; }
    .dashboard-footer { line-height: 1.7; }
}
/* Accessible animated logout arrow */
.logout-button-wrapper{display:inline-flex;flex:0 0 auto;width:auto;height:auto;align-items:center;justify-content:center;gap:3px}.logout-label{color:#087f8c;font-size:11px;font-weight:800;letter-spacing:.03em}.logout-button-wrapper .button{position:relative;display:block;width:58px;height:58px;margin:0;padding:0;overflow:hidden;color:#087f8c;background:transparent;border:0;border-radius:50%;text-decoration:none;cursor:pointer}.logout-button-wrapper .button::before,.logout-button-wrapper .button::after{content:"";position:absolute;inset:6px;border-radius:50%}.logout-button-wrapper .button::before{border:2px solid currentColor;transition:opacity .3s ease,transform .3s ease}.logout-button-wrapper .button::after{border:3px solid #00bcd4;opacity:0;transform:scale(1.25);transition:opacity .3s ease,transform .3s ease}.logout-button-wrapper .button-box{position:absolute;top:0;left:0;display:flex;transition:transform .35s ease}.logout-button-wrapper .button-elem{display:block;width:30px;height:30px;flex:0 0 30px;margin:14px 12px 0 17px}.logout-button-wrapper .arrow-icon{display:block;width:30px;height:30px;fill:currentColor}.logout-button-wrapper .button:hover::before,.logout-button-wrapper .button:focus-visible::before{opacity:0;transform:scale(.7)}.logout-button-wrapper .button:hover::after,.logout-button-wrapper .button:focus-visible::after{opacity:1;transform:scale(1)}.logout-button-wrapper .button:hover .button-box,.logout-button-wrapper .button:focus-visible .button-box{transform:translateX(-57px)}.logout-button-wrapper .button:focus-visible{outline:2px solid #087f8c;outline-offset:2px}
@media(max-width:640px){.welcome-page{padding-bottom:205px}.welcome-bottom-sheet{padding:25px 20px;border-radius:24px 24px 0 0}.welcome-sheet-content{align-items:flex-start;flex-direction:column;gap:18px}.welcome-heading{font-size:22px}.btn-signin-black{width:100%}.auth-top-header{min-height:245px;padding:0 17px 75px}.auth-title{font-size:26px}.auth-subtitle{max-width:360px;font-size:10px}.auth-sheet-card{padding:25px 20px;margin-top:-55px;border-radius:22px}.demo-buttons-grid{grid-template-columns:1fr}.form-meta-row{font-size:11px}.logout-button-wrapper{width:auto;height:auto;flex-basis:auto;gap:0}.logout-button-wrapper .button{width:48px;height:48px}.logout-button-wrapper .button-elem{margin:11px 9px 0 13px}.logout-button-wrapper .button:hover .button-box,.logout-button-wrapper .button:focus-visible .button-box{transform:translateX(-48px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.dashboard-alert-success{color:#087b58;background:#eaf9f2;border-color:#c7efdd}.dashboard-alert-error{color:#a83232;background:#fff0f0;border-color:#ffdada}.delete-user-form{margin:0}.btn-delete-user{display:inline-flex;min-height:32px;align-items:center;justify-content:center;gap:6px;padding:0 10px;color:#b83232;background:#fff5f5;border:1px solid #f4d0d0;border-radius:8px;font-size:10px;font-weight:800;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}.btn-delete-user svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.btn-delete-user:hover{transform:translateY(-1px);background:#ffe8e8;border-color:#e8aaaa}.btn-delete-user:focus-visible{outline:3px solid rgba(220,65,65,.2);outline-offset:2px}
/* Animated remember-me checkbox */
.checkbox-custom.check-control{position:relative;gap:8px;-webkit-tap-highlight-color:transparent}
.check-control input{position:absolute;width:18px;height:18px;margin:0;opacity:0;cursor:pointer}
.checkmark-box{position:relative;display:inline-grid;width:18px;height:18px;flex:0 0 18px;place-items:center;transform:translateZ(0)}
.checkmark-box::before{position:absolute;inset:-10px;content:"";border-radius:50%;background:rgba(34,50,84,.06);opacity:0;transition:opacity .2s ease}
.checkmark-box svg{position:relative;z-index:1;overflow:visible;fill:none;stroke:#c8ccd4;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.checkmark-box path{stroke-dasharray:60;stroke-dashoffset:0;transition:stroke-dashoffset .3s linear}
.checkmark-box polyline{stroke-dasharray:22;stroke-dashoffset:66;transition:stroke-dashoffset .2s linear}
.check-control:hover .checkmark-box::before{opacity:1}
.check-control:hover .checkmark-box svg,.check-control input:checked+.checkmark-box svg{stroke:#00aebb}
.check-control input:checked+.checkmark-box path{stroke-dashoffset:60}
.check-control input:checked+.checkmark-box polyline{stroke-dashoffset:42;transition-delay:.12s}
.check-control input:focus-visible+.checkmark-box{outline:2px solid rgba(0,174,187,.55);outline-offset:4px;border-radius:4px}/* Keep the native checkbox functional but place it invisibly over the custom mark. */
label.checkbox-custom.check-control > input[type="checkbox"]{position:absolute!important;top:0!important;left:0!important;width:18px!important;height:18px!important;margin:0!important;padding:0!important;opacity:0!important;appearance:none!important;-webkit-appearance:none!important;z-index:2!important;cursor:pointer!important}

/* Responsive layout refinements for dashboard and all auth/landing screens */
html, body { width: 100%; max-width: 100%; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; }
input, select, textarea, button { min-width: 0; }
.auth-sheet-card, .dashboard-container, .hero-dash-banner, .table-panel-card,
.staff-note-card, .welcome-sheet-content, .auth-nav-bar, .dash-nav { min-width: 0; }
.table-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-modern { min-width: 680px; }

@media (max-width: 920px) {
    .dash-nav { padding-right: 24px; padding-left: 24px; }
    .dashboard-container { width: min(100% - 40px, 1180px); }
    .hero-dash-banner { gap: 20px; }
    .stat-item-card { min-width: 0; }
    .panel-heading { gap: 14px; }
}

@media (max-width: 640px) {
    .dash-nav { flex-wrap: wrap; min-height: 0; gap: 8px 12px; padding: 10px 15px; }
    .dash-brand { flex: 1 1 100%; }
    .dash-user-bar { width: 100%; justify-content: space-between; gap: 8px; }
    .user-badge-copy { min-width: 0; }
    .user-badge-copy strong { max-width: min(48vw, 190px); }
    .dashboard-container { width: calc(100% - 28px); padding-top: 22px; }
    .dashboard-page-heading { width: 100%; }
    .page-subtitle { max-width: 100%; }
    .today-chip { max-width: 100%; white-space: normal; }
    .hero-copy, .hero-session { width: 100%; min-width: 0; }
    .hero-copy p { font-size: 12px; }
    .dash-stats-grid.staff-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-item-card { min-width: 0; }
    .panel-heading { flex-wrap: wrap; }
    .btn-open-reset { max-width: 100%; white-space: normal; }
    .staff-note-card { padding: 17px; }
    .auth-page-wrapper { min-height: 100svh; }
    .auth-top-header { padding-right: 16px; padding-left: 16px; }
    .auth-sheet-card { width: calc(100% - 24px); padding: 22px 18px; }
    .form-meta-row { flex-wrap: wrap; }
    .pill-input { min-height: 48px; }
    .btn-pill-submit, .btn-signin-black { min-height: 48px; }
}

@media (max-width: 420px) {
    .company-title-bold { max-width: 100%; font-size: clamp(19px, 6vw, 25px); }
    .welcome-page { padding-right: 16px; padding-left: 16px; }
    .welcome-bottom-sheet { padding: 22px 16px; }
    .welcome-heading { font-size: 20px; }
    .auth-top-header { min-height: 225px; padding-bottom: 66px; }
    .header-text-block { margin-top: 18px; }
    .auth-title { font-size: 24px; }
    .auth-subtitle { font-size: 10px; line-height: 1.5; }
    .auth-sheet-card { width: calc(100% - 20px); margin-bottom: 18px; padding: 20px 15px; border-radius: 19px; }
    .form-meta-row { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 20px; }
    .forgot-link-text { padding: 3px 0; }
    .dash-brand-copy strong { font-size: 13px; }
    .user-badge-copy strong { max-width: 38vw; }
    .role-pill { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dash-stats-grid, .dash-stats-grid.staff-stats-grid { grid-template-columns: minmax(0, 1fr); }
    .stat-item-card { min-height: 92px; padding: 15px; }
    .stat-desc { font-size: 10px; }
    .stat-number { font-size: 24px; }
    .panel-heading { padding: 16px 14px 13px; }
    .panel-heading h2 { font-size: 15px; }
    .dashboard-footer { padding-right: 8px; padding-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}