:root{--navy:#00264a;--navy2:#003b73;--blue:#0069d9;--blue2:#0b87d5;--bg:#eef4fb;--card:#fff;--text:#071429;--muted:#66748a;--line:#dbe5f2;--green:#10b65a;--orange:#ff8a00;--red:#ef2f32;--shadow:0 16px 35px rgba(0,35,70,.12)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}
.app-shell{display:flex;min-height:100vh}.sidebar{width:270px;background:linear-gradient(180deg,#002342,#00172d);color:#fff;padding:24px 18px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column}.brand img{width:190px;display:block;margin:0 auto 28px}.sidebar nav{display:grid;gap:8px}.sidebar nav a{padding:14px 16px;border-radius:10px;color:#e9f3ff}.sidebar nav a.active,.sidebar nav a:hover{background:linear-gradient(135deg,#0b67c7,#00509d)}.sidebar footer{margin-top:auto;color:#d5e6fb;font-size:14px;border-top:1px solid rgba(255,255,255,.13);padding-top:18px}
.main{margin-left:270px;width:calc(100% - 270px);min-height:100vh}.main.public{margin-left:0;width:100%}
.topbar{height:72px!important;min-height:72px!important;background:linear-gradient(90deg,#073763,#1479bd)!important;color:#fff!important;padding:10px 28px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}.topbar h1{font-size:24px!important;margin:0!important}.topbar p{font-size:13px!important;margin:2px 0 0!important}.mobile-brand img{height:42px!important;width:auto!important;opacity:.35!important}.userbox{position:static!important;background:rgba(255,255,255,.13);padding:7px 12px!important;border-radius:12px;text-align:right;display:grid}.userbox small{text-transform:capitalize;color:#dbeeff}.userbox a{font-weight:800;color:#fff}
.flash{max-width:1280px;margin:18px auto;background:#e8f7ee;color:#076b31;border:1px solid #bce8ce;border-radius:14px;padding:14px 18px}
.login-wrap{min-height:calc(100vh - 72px);display:grid;place-items:start center;padding-top:50px}.login-logo{text-align:center;margin-bottom:18px}.login-logo img{max-width:160px}.card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:26px}.login-card{width:min(520px,92vw)}.card h2,.login-card h2{font-size:28px;margin:0 0 20px}
label{display:block;font-weight:800;margin:16px 0 7px}input,select{width:100%;border:1px solid #cbd8e7;border-radius:12px;padding:12px 14px;font-size:15px;background:#fff}button,.btn{border:0;border-radius:12px;padding:12px 18px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:15px}.primary{background:linear-gradient(135deg,#086ac0,#005397);color:#fff}.secondary{background:#eaf1f8;color:#0d3258}.success{background:linear-gradient(135deg,#14bf66,#08a650);color:#fff}.warning{background:linear-gradient(135deg,#ff9c19,#f47b00);color:#fff}.danger{background:linear-gradient(135deg,#ff3439,#dd151b);color:#fff}.muted{color:var(--muted)}
.hero-row,.stats-grid,.content-grid,.full-card{max-width:1280px;margin:0 auto}.hero-row{margin-top:24px;display:flex;justify-content:space-between;align-items:center;padding:0 20px 18px}.admin-welcome img{max-width:170px}.hero-row h2{font-size:28px;margin:0 0 6px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 20px 22px}.stats-grid.four{grid-template-columns:repeat(4,1fr)}.stat{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px}.stat span{display:block;color:var(--muted);font-weight:800;font-size:14px}.stat strong{display:block;font-size:32px;margin:8px 0 3px}.stat small{color:#069647;font-weight:700}.stat.icon{display:grid;grid-template-columns:54px 1fr;column-gap:14px;align-items:center}.stat.icon b{grid-row:1/4;background:linear-gradient(135deg,#0073df,#0051b5);color:white;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:22px}
.content-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;padding:0 20px 22px}.content-grid.one{max-width:620px;grid-template-columns:1fr}.admin-grid{grid-template-columns:400px 1fr}.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.badge{padding:7px 10px;border-radius:999px;background:#eef4fb;color:#17466f;font-weight:900;font-size:13px}.badge.green{background:#dff8e9;color:#08783a}.badge.red{background:#ffe1e1;color:#b71717}.timer{font-size:44px;text-align:center;font-weight:900;color:var(--green);margin-top:12px}.time-card>.muted{text-align:center}.button-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.button-row form{margin:0}.button-row button{width:100%}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:16px;text-align:center}.mini-grid span{display:block;color:var(--muted);font-size:13px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:780px}th,td{padding:13px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}th{color:#53647a;background:#f5f8fc}
.employee-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}.employee-card{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fbfdff}.inline-form,.import-form{display:flex;gap:8px;align-items:end;margin-top:12px}.check{display:flex;gap:8px;align-items:center}.check input{width:auto}.space{margin-top:26px}.full-card{margin-bottom:40px}.full-card .card-head form{display:flex;gap:10px;align-items:center}.full-card .card-head{flex-wrap:wrap}
@media(max-width:980px){.sidebar{display:none}.main{margin-left:0;width:100%}.topbar{height:64px!important;min-height:64px!important;padding:8px 14px!important}.topbar h1{font-size:20px!important}.topbar p{display:none}.mobile-brand img{height:34px!important}.userbox{font-size:12px}.hero-row{margin-top:16px;padding:0 12px 12px}.admin-welcome img{display:none}.stats-grid,.stats-grid.four,.content-grid,.admin-grid{grid-template-columns:1fr;padding-left:12px;padding-right:12px}.button-row{grid-template-columns:1fr}.card{padding:18px;border-radius:18px}.timer{font-size:36px}.full-card{margin-left:12px;margin-right:12px}}
@media(max-width:980px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .app-shell,
  .main,
  .main.public{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    overflow-x:hidden;
  }

  .topbar{
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    padding:8px 12px !important;
  }

  .hero-row,
  .stats-grid,
  .content-grid,
  .full-card{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .card{
    width:100% !important;
    max-width:100% !important;
  }

  .stats-grid,
  .stats-grid.four,
  .content-grid,
  .admin-grid{
    grid-template-columns:1fr !important;
  }

  table{
    min-width:0 !important;
    width:100% !important;
    font-size:13px;
  }

  th,td{
    padding:10px 8px;
  }

  .table-wrap{
    width:100%;
    overflow-x:auto;
  }
}
@media(max-width:980px){

  *{
    box-sizing:border-box;
  }

  .hero-row,
  .stats-grid,
  .content-grid,
  .full-card,
  .card{
    width:100% !important;
    max-width:100% !important;
  }

  .stats-grid,
  .content-grid{
    padding-left:8px !important;
    padding-right:8px !important;
    gap:10px !important;
  }

  .card{
    margin:0 !important;
    padding:16px !important;
  }

  .timer{
    font-size:32px !important;
  }

  .button-row{
    gap:8px !important;
  }
}
@media(max-width:980px){

  *{
    box-sizing:border-box;
  }

  .hero-row,
  .stats-grid,
  .content-grid,
  .full-card,
  .card{
    width:100% !important;
    max-width:100% !important;
  }

  .stats-grid,
  .content-grid{
    padding-left:8px !important;
    padding-right:8px !important;
    gap:10px !important;
  }

  .card{
    margin:0 !important;
    padding:16px !important;
  }

  .timer{
    font-size:32px !important;
  }

  .button-row{
    gap:8px !important;
  }
}