/* Jigawa TnT — design system: navy #0B2545, teal #0E8C82, gold #C9A227 */
:root{
  --navy:#0B2545; --navy2:#13345C; --teal:#0E8C82; --gold:#C9A227;
  --ink:#1F2937; --muted:#5B6B7B; --light:#EEF3F7; --teal-t:#E3F3F1; --gold-t:#FBF4DC;
  --white:#FFFFFF; --danger:#B4432F; --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Segoe UI', Calibri, Arial, sans-serif; color:var(--ink);
  background:var(--light);
}
h1,h2,h3{font-family:Cambria, Georgia, serif; color:var(--navy); margin:0 0 12px;}
h1{font-size:1.6rem;} h2{font-size:1.25rem;} h3{font-size:1.05rem;}
a{color:var(--teal); text-decoration:none;}
a:hover{text-decoration:underline;}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--navy); color:var(--white); padding:12px 20px; flex-wrap:wrap; gap:8px;
}
.brand-mark{
  background:var(--gold); color:var(--navy); font-weight:700; padding:4px 10px;
  border-radius:6px; margin-right:10px; font-family:Cambria, serif;
}
.brand-text{font-weight:600; font-size:0.95rem;}
.topbar-user{display:flex; align-items:center; gap:12px; font-size:0.85rem;}
.user-role{background:var(--teal); padding:3px 9px; border-radius:12px; font-size:0.75rem;}
.logout-link{color:var(--gold);}

.sidenav{
  background:var(--navy2); color:var(--white); padding:16px 0; width:220px; float:left;
  min-height:calc(100vh - 54px);
}
.sidenav a{
  display:block; color:#CADCFC; padding:10px 20px; font-size:0.92rem; border-left:3px solid transparent;
}
.sidenav a:hover{background:rgba(255,255,255,0.06); text-decoration:none; border-left-color:var(--gold); color:var(--white);}

.content{margin-left:220px; padding:24px 28px; max-width:1100px;}
@media (max-width:820px){
  .sidenav{float:none; width:100%; min-height:auto; display:flex; overflow-x:auto;}
  .sidenav a{padding:10px 14px; white-space:nowrap; border-left:none; border-bottom:3px solid transparent;}
  .sidenav a:hover{border-left:none; border-bottom-color:var(--gold);}
  .content{margin-left:0; padding:16px;}
}

.pagefooter{
  clear:both; text-align:center; color:var(--muted); font-size:0.78rem; padding:18px; border-top:1px solid #D9E2EC;
}

.card{
  background:var(--white); border:1px solid #D9E2EC; border-radius:var(--radius);
  padding:18px 20px; margin-bottom:18px;
}
.card-title{
  font-family:Cambria, serif; color:var(--navy); font-weight:700; font-size:1.05rem; margin-bottom:10px;
  border-bottom:2px solid var(--gold); padding-bottom:6px;
}

.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:1fr 1fr 1fr;}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:820px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.kpi-tile{
  background:var(--navy); color:var(--white); border-radius:var(--radius); padding:16px 18px;
}
.kpi-tile .kpi-value{font-family:Cambria, serif; font-size:2rem; font-weight:700; color:var(--gold);}
.kpi-tile .kpi-label{font-size:0.82rem; color:#CADCFC; margin-top:4px;}

table{width:100%; border-collapse:collapse; font-size:0.9rem;}
th{background:var(--navy); color:var(--white); text-align:left; padding:9px 12px;}
td{padding:9px 12px; border-bottom:1px solid #E4EAF0;}
tr:nth-child(even) td{background:var(--light);}

.badge{display:inline-block; padding:3px 10px; border-radius:12px; font-size:0.76rem; font-weight:600;}
.badge-navy{background:var(--navy2); color:var(--white);}
.badge-teal{background:var(--teal-t); color:var(--teal);}
.badge-gold{background:var(--gold-t); color:#8A6D00;}
.badge-danger{background:#FBEAE6; color:var(--danger);}
.badge-muted{background:var(--light); color:var(--muted);}

label{display:block; font-size:0.85rem; font-weight:600; color:var(--navy); margin:12px 0 4px;}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], select, textarea{
  width:100%; padding:9px 11px; border:1px solid #C7D2DE; border-radius:6px; font-size:0.92rem; font-family:inherit;
}
textarea{resize:vertical; min-height:70px;}

.btn{
  display:inline-block; background:var(--teal); color:var(--white); border:none; padding:10px 18px;
  border-radius:6px; font-size:0.92rem; font-weight:600; cursor:pointer; margin-top:14px;
}
.btn:hover{background:#0b6f66; text-decoration:none;}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:#a9861f;}
.btn-danger{background:var(--danger);}
.btn-outline{background:transparent; color:var(--teal); border:1px solid var(--teal);}

.alert{padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:0.9rem;}
.alert-success{background:#E3F3F1; color:#0b6f66; border:1px solid #b7e0da;}
.alert-error{background:#FBEAE6; color:var(--danger); border:1px solid #f0c4ba;}
.alert-info{background:var(--gold-t); color:#8A6D00; border:1px solid #ecd899;}

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy);
}
.login-box{
  background:var(--white); padding:36px 34px; border-radius:12px; width:100%; max-width:380px;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
}
.login-box h1{font-size:1.3rem; margin-bottom:4px;}
.login-box p.sub{color:var(--muted); font-size:0.85rem; margin-bottom:18px;}

.qr-box{
  font-family:monospace; background:var(--light); border:1px dashed #C7D2DE; padding:14px;
  text-align:center; border-radius:8px; font-size:1.1rem; letter-spacing:1px; color:var(--navy);
}
.section-note{color:var(--muted); font-size:0.85rem; margin-bottom:14px;}