:root{
  --bg:#ffffff;
  --text:#1a1d23;
  --black:#0f1115;
  --navy:#161a23;
  --gray-100:#f6f7f9;
  --gray-200:#ebedf0;
  --gray-300:#dde1e6;
  --gray-500:#7b8294;

  --blue:#2563eb;     --blue-bg:#eaf0ff;
  --green:#16a34a;    --green-bg:#e8f8ee;
  --purple:#7c3aed;   --purple-bg:#f1eafe;
  --amber:#d97706;    --amber-bg:#fff3e0;
  --red:#dc2626;      --red-bg:#fdeceb;
  --teal:#0d9488;     --teal-bg:#e3f7f5;
  --pink:#db2777;     --pink-bg:#fde9f1;

  --radius:14px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-bottom:74px;
}
a{color:var(--text);text-decoration:none;}
h1,h2,h3{margin:0 0 12px;}
.icon{display:inline-block;vertical-align:middle;flex-shrink:0;}

.container{max-width:1200px;margin:0 auto;padding:18px;}

/* Top bar */
.topbar{
  position:sticky;top:0;z-index:50;
  background:#ffffff;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--gray-200);
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:0.2px;}
.topbar .brand img{height:32px;max-width:140px;object-fit:contain;}
.topbar a.logout{color:#fff;background:var(--black);padding:7px 14px;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:6px;}

/* Desktop sidebar */
.layout{display:flex;min-height:100vh;}
.sidebar{
  width:230px;background:var(--navy);color:#fff;
  padding:20px 0;flex-shrink:0;
  display:flex;flex-direction:column;
}
.sidebar .brand{padding:0 20px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #2a2f3a;margin-bottom:10px;}
.sidebar .brand img{height:34px;max-width:160px;object-fit:contain;}
.sidebar .brand span.txt{font-size:18px;font-weight:800;color:#fff;}
.sidebar a{
  display:flex;align-items:center;gap:12px;
  padding:11px 20px;color:#aab0c0;font-size:14.5px;border-left:3px solid transparent;font-weight:600;
}
.sidebar a .icon{color:#aab0c0;}
.sidebar a:hover{background:#1f2430;color:#fff;}
.sidebar a:hover .icon{color:#fff;}
.sidebar a.active{background:#1f2430;color:#fff;border-left:3px solid var(--blue);}
.sidebar a.active .icon{color:var(--blue);}
.main{flex:1;min-width:0;}

/* Mobile bottom nav */
.bottomnav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:#ffffff;
  border-top:1px solid var(--gray-200);
  box-shadow:0 -2px 10px rgba(0,0,0,0.05);
}
.bottomnav .row{display:flex;justify-content:space-around;}
.bottomnav a{
  flex:1;text-align:center;color:var(--gray-500);font-size:11px;padding:8px 2px 9px;font-weight:600;
}
.bottomnav a .icon{display:block;margin:0 auto 3px;color:var(--gray-500);}
.bottomnav a.active{color:var(--blue);}
.bottomnav a.active .icon{color:var(--blue);}

@media (max-width:880px){
  .sidebar{display:none;}
  .bottomnav{display:block;}
  .container{padding:14px;}
}

/* Cards */
.card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);
  padding:18px;margin-bottom:18px;
  box-shadow:0 1px 3px rgba(20,20,43,0.04);
}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
@media (max-width:880px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{
  border-radius:var(--radius);
  padding:18px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}
.stat-card .icon-badge{
  width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.22);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.stat-card .label{font-size:12px;color:rgba(255,255,255,0.85);text-transform:uppercase;letter-spacing:0.5px;font-weight:700;}
.stat-card .value{font-size:25px;font-weight:800;margin-top:4px;}
.stat-blue{background:linear-gradient(135deg,#2563eb,#1d4ed8);}
.stat-green{background:linear-gradient(135deg,#16a34a,#0f7c39);}
.stat-purple{background:linear-gradient(135deg,#7c3aed,#5f27c9);}
.stat-amber{background:linear-gradient(135deg,#f59e0b,#d97706);}
.stat-red{background:linear-gradient(135deg,#ef4444,#dc2626);}
.stat-teal{background:linear-gradient(135deg,#14b8a6,#0d9488);}

/* colored top-border card variants for content cards */
.card-accent{border-top:4px solid var(--blue);}
.card-accent.green{border-top-color:var(--green);}
.card-accent.purple{border-top-color:var(--purple);}
.card-accent.amber{border-top-color:var(--amber);}
.card-accent.pink{border-top-color:var(--pink);}
.card-accent.teal{border-top-color:var(--teal);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff;border:1px solid var(--blue);
  padding:10px 18px;border-radius:9px;font-size:14px;cursor:pointer;font-weight:700;
  transition:opacity .15s;
}
.btn:hover{opacity:0.88;}
.btn-outline{background:#fff;color:var(--text);border-color:var(--gray-300);}
.btn-outline:hover{background:var(--gray-100);opacity:1;}
.btn-sm{padding:6px 12px;font-size:13px;}
.btn-danger{background:var(--red);border-color:var(--red);}
.btn-green{background:var(--green);border-color:var(--green);}
.btn-black{background:var(--black);border-color:var(--black);}
.btn-block{width:100%;text-align:center;justify-content:center;}
button.btn{font-family:inherit;}

/* Forms */
.form-group{margin-bottom:14px;}
label{display:block;font-size:13px;font-weight:700;margin-bottom:5px;color:#444;}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=tel],
input[type=search],input[type=file],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--gray-300);border-radius:9px;
  font-size:14px;background:#fff;color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
@media (max-width:700px){.grid-2,.grid-3{grid-template-columns:1fr;}}

/* Table */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--gray-200);white-space:nowrap;}
th{background:var(--gray-100);font-weight:700;color:#444;font-size:12.5px;text-transform:uppercase;letter-spacing:0.3px;}
tr:hover td{background:#fafbfc;}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--gray-200);background:var(--gray-100);}
.avatar-lg{width:100px;height:100px;border-radius:16px;object-fit:cover;border:2px solid var(--gray-200);}

/* Tags */
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700;}
.tag-green{background:var(--green-bg);color:var(--green);}
.tag-red{background:var(--red-bg);color:var(--red);}
.tag-orange{background:var(--amber-bg);color:var(--amber);}
.tag-gray{background:var(--gray-200);color:var(--gray-500);}
.tag-black{background:var(--blue-bg);color:var(--blue);}

/* Search bar */
.search-bar{display:flex;gap:10px;margin-bottom:0;flex-wrap:wrap;}
.search-bar input,.search-bar select{flex:1;min-width:140px;}

/* Alerts */
.alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:14px;font-weight:600;}
.alert-success{background:var(--green-bg);color:var(--green);}
.alert-error{background:var(--red-bg);color:var(--red);}

/* Page header */
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.page-header h2{display:flex;align-items:center;gap:10px;}

/* Login page */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1d4ed8,#7c3aed);}
.login-box{background:#fff;padding:38px 32px;border-radius:18px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.login-box .logo-wrap{text-align:center;margin-bottom:14px;}
.login-box .logo-wrap img{height:56px;max-width:200px;object-fit:contain;}
.login-box h1{text-align:center;font-size:24px;margin-bottom:4px;}
.login-box p.sub{text-align:center;color:var(--gray-500);margin-bottom:24px;font-size:13px;}

/* Fingerprint scan box */
.fp-box{
  border:2px dashed var(--blue);background:var(--blue-bg);border-radius:16px;padding:28px;text-align:center;margin-bottom:18px;
}
.fp-box .icon-circle{
  width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.fp-result{display:flex;gap:16px;align-items:center;padding:18px;border:1px solid var(--gray-200);border-radius:14px;margin-top:14px;}

.empty-state{text-align:center;padding:44px 16px;color:var(--gray-500);}
.empty-state .icon{color:var(--gray-300);margin-bottom:10px;}
.text-sm{font-size:13px;color:var(--gray-500);}
.flex-between{display:flex;justify-content:space-between;align-items:center;}
.mb-0{margin-bottom:0;}

.logo-preview{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.logo-preview img{height:60px;max-width:200px;object-fit:contain;border:1px solid var(--gray-200);border-radius:10px;padding:6px;background:#fafafa;}