*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#1a2e4a;--navy-mid:#1e3a5f;--navy-lt:#243d6e;
  --gold:#f0a500;--gold-lt:#ffc940;--gold-pale:#fff8e1;
  --bg:#f0f3f9;--white:#fff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;
  --success:#10b981;--danger:#ef4444;--warn:#f59e0b;--info:#3b82f6;
  --sh-sm:0 2px 8px rgba(0,0,0,.08);--sh-md:0 6px 20px rgba(0,0,0,.11);
  --sh-lg:0 14px 44px rgba(0,0,0,.14);--sh-xl:0 24px 64px rgba(0,0,0,.18);
  --r:14px;--r-sm:9px;--r-xs:6px;--t:.2s cubic-bezier(.4,0,.2,1);
}
html{font-size:15px;scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-thumb{background:#c1cad8;border-radius:99px;}

/* ── HEADER ── */
.app-header{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);
  padding:0 32px;height:68px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 24px rgba(0,0,0,.25);
}
.logo{display:flex;align-items:center;gap:12px;}
.logo-mark{
  width:40px;height:40px;border-radius:11px;
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:0 3px 12px rgba(240,165,0,.4);flex-shrink:0;
}
.logo-text .brand{font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.2;}
.logo-text .brand em{color:var(--gold);font-style:normal;}
.logo-text .sub{font-size:.6rem;color:#7a92b0;letter-spacing:.8px;text-transform:uppercase;}
.portal-tabs{display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:4px;}
.ptab{
  padding:7px 20px;border-radius:7px;font-family:'Poppins',sans-serif;
  font-size:.78rem;font-weight:600;cursor:pointer;border:none;
  color:#94a3b8;background:none;transition:var(--t);
}
.ptab.active{background:var(--gold);color:var(--navy);box-shadow:0 2px 10px rgba(240,165,0,.4);}
.ptab:not(.active):hover{color:#fff;background:rgba(255,255,255,.1);}

/* ── MAIN ── */
.main{padding:28px 32px 60px;max-width:1100px;margin:0 auto;}
.page{display:none;}.page.active{display:block;}

/* ── SECTION TITLE ── */
.sec-title{font-size:1.3rem;font-weight:800;color:var(--navy);margin-bottom:4px;}
.sec-sub{font-size:.8rem;color:var(--muted);margin-bottom:24px;}

/* ── CARDS ── */
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh-sm);border:1px solid var(--border);}
.card-hdr{
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  padding:18px 24px;border-radius:var(--r) var(--r) 0 0;
  display:flex;align-items:center;gap:12px;
}
.card-hdr-icon{font-size:1.3rem;}
.card-hdr-text .title{font-size:.95rem;font-weight:700;color:#fff;}
.card-hdr-text .sub{font-size:.72rem;color:#7a92b0;margin-top:2px;}
.card-body{padding:28px 24px;}

/* ── BALANCE BAR ── */
.balance-bar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-bottom:24px;
}
.bal-cell{
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  border-radius:var(--r-sm);padding:16px;text-align:center;
}
.bal-cell .num{font-size:1.8rem;font-weight:800;color:var(--gold);line-height:1;}
.bal-cell .lbl{font-size:.65rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.6px;margin-top:4px;}
.bal-cell.warn .num{color:#fca5a5;}
#balance-wrap{display:none;margin-bottom:24px;}

/* ── FORM ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.fg{display:flex;flex-direction:column;gap:5px;}
.fg.full{grid-column:1/-1;}
.fg label{font-size:.75rem;font-weight:700;color:var(--navy);letter-spacing:.1px;}
.fg label .req{color:var(--danger);margin-left:2px;}
.fg input,.fg select,.fg textarea{
  padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-family:'Poppins',sans-serif;font-size:.82rem;color:var(--text);background:var(--white);
  outline:none;transition:border-color var(--t),box-shadow var(--t);
}
.fg textarea{resize:vertical;min-height:90px;}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,46,74,.1);
}
.fg .err-msg{font-size:.7rem;color:var(--danger);font-weight:600;display:none;}
.fg.has-error input,.fg.has-error select,.fg.has-error textarea{border-color:var(--danger);}
.fg.has-error .err-msg{display:block;}

/* ── BUTTONS ── */
.btn{
  padding:11px 26px;border-radius:var(--r-sm);font-family:'Poppins',sans-serif;
  font-size:.84rem;font-weight:700;cursor:pointer;border:none;transition:var(--t);
  display:inline-flex;align-items:center;gap:8px;
}
.btn-primary{
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  color:#fff;box-shadow:0 3px 12px rgba(26,46,74,.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(26,46,74,.4);}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  color:var(--navy);box-shadow:0 3px 12px rgba(240,165,0,.35);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(240,165,0,.5);}
.btn-success{background:#10b981;color:#fff;}
.btn-success:hover{background:#059669;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#dc2626;}
.btn-ghost{background:var(--bg);color:var(--muted);}
.btn-ghost:hover{background:#e4e7ef;color:var(--text);}
.btn-sm{padding:6px 14px;font-size:.72rem;}

/* ── SUBMIT ROW ── */
.form-footer{
  grid-column:1/-1;display:flex;justify-content:flex-end;
  margin-top:8px;padding-top:20px;border-top:1px solid var(--border);
}

/* ── STATUS BADGE ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.1px;}
.badge-pending{background:#fef9c3;color:#92400e;}
.badge-approved{background:#d1fae5;color:#065f46;}
.badge-rejected{background:#fee2e2;color:#991b1b;}
.badge-cancel-req{background:#fff3cd;color:#856404;}
.badge-cancelled{background:#f3f4f6;color:#374151;}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;border-radius:var(--r-sm);}
table{width:100%;border-collapse:collapse;font-size:.78rem;}
thead tr{background:linear-gradient(135deg,var(--navy),var(--navy-mid));}
thead th{padding:12px 14px;color:#fff;font-weight:600;text-align:left;white-space:nowrap;}
tbody tr{border-bottom:1px solid var(--border);transition:background var(--t);}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:#f8fafc;}
tbody td{padding:12px 14px;color:var(--text);vertical-align:middle;}
.actions{display:flex;gap:6px;flex-wrap:wrap;}

/* ── APPROVER LOGIN ── */
.login-wrap{
  max-width:380px;margin:60px auto 0;
}
.login-wrap .card-body{padding:32px;}
.login-title{font-size:1.1rem;font-weight:800;color:var(--navy);margin-bottom:4px;text-align:center;}
.login-sub{font-size:.76rem;color:var(--muted);text-align:center;margin-bottom:24px;}

/* ── MODAL ── */
.overlay{
  position:fixed;inset:0;background:rgba(8,18,36,.55);
  z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity var(--t);
  backdrop-filter:blur(4px);
}
.overlay.open{opacity:1;pointer-events:all;}
.modal{
  background:var(--white);border-radius:20px;width:100%;max-width:480px;
  box-shadow:var(--sh-xl);
  transform:scale(.91) translateY(26px);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .22s;
  opacity:0;
}
.overlay.open .modal{transform:scale(1) translateY(0);opacity:1;}
.modal-hdr{
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  padding:20px 24px;border-radius:20px 20px 0 0;
  display:flex;align-items:center;justify-content:space-between;
}
.modal-title{font-size:.95rem;font-weight:700;color:#fff;}
.modal-close{background:rgba(255,255,255,.1);border:none;color:#fff;width:32px;height:32px;border-radius:7px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:background var(--t);}
.modal-close:hover{background:rgba(255,255,255,.22);}
.modal-body{padding:24px;}
.modal-info{background:#f8fafc;border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;margin-bottom:18px;font-size:.78rem;line-height:1.7;}
.modal-info strong{color:var(--navy);}
.modal-ftr{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}

/* ── TOASTS ── */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:500;display:flex;flex-direction:column;gap:10px;}
.toast{
  background:var(--navy);color:#fff;border-left:4px solid var(--gold);
  padding:12px 18px;border-radius:11px;font-size:.78rem;font-weight:600;
  box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;
  min-width:240px;max-width:340px;
  animation:tIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
.toast.success{border-left-color:var(--success);}
.toast.error{border-left-color:var(--danger);}
.toast.warn{border-left-color:var(--warn);}
@keyframes tIn{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes tOut{from{transform:none;opacity:1}to{transform:translateX(60px);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:48px 20px;color:var(--muted);}
.empty-state .icon{font-size:2.5rem;margin-bottom:10px;}
.empty-state p{font-size:.82rem;}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.filter-bar select,.filter-bar input{padding:8px 13px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:.78rem;color:var(--text);background:var(--white);outline:none;transition:border-color var(--t);}
.filter-bar select:focus,.filter-bar input:focus{border-color:var(--navy);}

/* ── STATS ROW (approver) ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.stat-card{background:var(--white);border-radius:var(--r-sm);padding:16px 20px;box-shadow:var(--sh-sm);border:1px solid var(--border);display:flex;align-items:center;gap:14px;}
.stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.stat-icon.blue{background:#eff6ff;}
.stat-icon.yellow{background:#fef9c3;}
.stat-icon.green{background:#d1fae5;}
.stat-icon.red{background:#fee2e2;}
.stat-num{font-size:1.4rem;font-weight:800;color:var(--navy);line-height:1;}
.stat-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;}

/* ── SETUP NOTICE ── */
.setup-notice{
  background:linear-gradient(135deg,#1e3a5f,#1a2e4a);
  border-radius:var(--r);padding:20px 24px;margin-bottom:24px;
  border-left:4px solid var(--gold);
}
.setup-notice h3{font-size:.88rem;font-weight:700;color:var(--gold);margin-bottom:8px;}
.setup-notice p{font-size:.76rem;color:#94a3b8;line-height:1.7;}
.setup-notice code{background:rgba(240,165,0,.15);color:var(--gold-lt);padding:1px 6px;border-radius:4px;font-size:.72rem;}

@media(max-width:700px){
  .app-header{padding:0 16px;}
  .portal-tabs{display:none;}
  .main{padding:16px 14px 40px;}
  .form-grid{grid-template-columns:1fr;}
  .fg.full{grid-column:1;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .balance-bar{grid-template-columns:1fr 1fr 1fr;}
  table{font-size:.7rem;}
}
</style>