@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:wght@600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* iOS zoom prevention */
input,select,textarea{font-size:16px !important;}

:root{
  --gold:#C8933A;--gold-light:#F5E9D3;--gold-dark:#8B621A;
  --navy:#1A2744;--navy-mid:#243358;--navy-light:#2E4070;
  --cream:#FAF8F4;--white:#FFFFFF;
  --text-primary:#1A2744;--text-secondary:#5A6A8A;--text-muted:#9AAAC0;
  --border:#E2DDD5;--border-strong:#C8B89A;
  --success:#1A7A4A;--success-bg:#EAF5EF;
  --warning:#B45309;--warning-bg:#FEF3C7;
  --danger:#991B1B;--danger-bg:#FEE2E2;
  --info:#1D4ED8;--info-bg:#EFF6FF;

  /* Sidebar */
  --sidebar-w:240px;
  --header-h:52px;

  --radius:12px;--radius-sm:8px;
  --shadow:0 4px 24px rgba(26,39,68,0.10);
  --shadow-sm:0 2px 8px rgba(26,39,68,0.07);
}

html{-webkit-text-size-adjust:100%;touch-action:manipulation;}
body{font-family:'Be Vietnam Pro',sans-serif;background:var(--cream);color:var(--text-primary);min-height:100vh;font-size:14px;line-height:1.6;overflow-x:hidden;}

/* ===== APP SHELL ===== */
#app{display:flex;flex-direction:column;min-height:100vh;}

/* ===== TOP HEADER ===== */
.app-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--header-h);
  background:var(--navy);
  display:flex;align-items:center;
  padding:0 16px;
  gap:12px;
  box-shadow:0 2px 12px rgba(26,39,68,0.2);
}
.header-toggle{
  width:36px;height:36px;border-radius:8px;
  background:rgba(255,255,255,0.08);border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;flex-shrink:0;transition:background 0.2s;
}
.header-toggle:hover{background:rgba(255,255,255,0.14);}
.header-toggle span{display:block;width:18px;height:1.5px;background:rgba(255,255,255,0.8);border-radius:2px;transition:all 0.3s;}
.header-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.header-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.header-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.header-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1;}
.header-logo-mark{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#E8AC50);
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:12px;color:var(--navy);font-weight:700;flex-shrink:0;
}
.header-company{font-size:14px;font-weight:700;color:var(--white);line-height:1.1;}
.header-system{font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:0.3px;}

.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.header-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--navy);cursor:pointer;
}
.header-role-badge{
  padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:0.4px;
}
.role-tgd{background:var(--gold);color:var(--navy);}
.role-ptgd{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.8);}
.btn-logout{
  background:none;border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.6);padding:5px 12px;
  border-radius:var(--radius-sm);font-size:11px;font-weight:500;
  cursor:pointer;font-family:'Be Vietnam Pro',sans-serif;transition:all 0.2s;
}
.btn-logout:hover{background:rgba(255,255,255,0.1);color:white;}

/* ===== SIDEBAR OVERLAY (mobile) ===== */
.sidebar-overlay{
  position:fixed;inset:0;z-index:150;
  background:rgba(26,39,68,0.5);
  opacity:0;pointer-events:none;
  transition:opacity 0.3s;
}
.sidebar-overlay.show{opacity:1;pointer-events:all;}

/* ===== SIDEBAR ===== */
.sidebar{
  position:fixed;top:var(--header-h);left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--navy);
  z-index:160;
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.sidebar.open{transform:translateX(0);}

/* Desktop: always visible */
@media(min-width:900px){
  .sidebar{transform:translateX(0);}
  .sidebar-overlay{display:none!important;}
  .header-toggle{display:none;}
  .main-wrap{margin-left:var(--sidebar-w);}
  body.sidebar-hidden .sidebar{transform:translateX(-100%);}
  body.sidebar-hidden .main-wrap{margin-left:0;}
  body.sidebar-hidden .header-toggle{display:flex;}
}

/* Sidebar sections */
.sidebar-section{padding:16px 12px 8px;}
.sidebar-section-label{
  font-size:9px;font-weight:700;color:rgba(255,255,255,0.3);
  letter-spacing:1.5px;text-transform:uppercase;
  padding:0 8px;margin-bottom:4px;
}

/* Nav items */
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;
  cursor:pointer;text-decoration:none;
  color:rgba(255,255,255,0.6);font-size:13px;font-weight:500;
  transition:all 0.15s;position:relative;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.nav-item:hover{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.9);}
.nav-item.active{background:rgba(200,147,58,0.18);color:var(--gold);}
.nav-item.active .nav-icon{color:var(--gold);}
.nav-item svg,.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:0.7;}
.nav-item.active svg,.nav-item.active .nav-icon{opacity:1;}

/* Parent nav item with children */
.nav-parent{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;
  cursor:pointer;color:rgba(255,255,255,0.85);
  font-size:13px;font-weight:600;
  transition:all 0.15s;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.nav-parent:hover{background:rgba(255,255,255,0.05);}
.nav-parent.section-active{color:var(--gold);}
.nav-parent svg{width:16px;height:16px;flex-shrink:0;}
.nav-chevron{
  margin-left:auto;width:14px;height:14px;
  transition:transform 0.2s;flex-shrink:0;
  opacity:0.5;
}
.nav-parent.expanded .nav-chevron{transform:rotate(90deg);}

/* Children */
.nav-children{
  overflow:hidden;
  max-height:0;transition:max-height 0.3s ease;
}
.nav-children.open{max-height:300px;}
.nav-child{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px 7px 34px;border-radius:8px;
  cursor:pointer;color:rgba(255,255,255,0.5);
  font-size:12px;font-weight:400;
  transition:all 0.15s;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.nav-child:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.04);}
.nav-child.active{color:var(--gold);background:rgba(200,147,58,0.12);}
.nav-child::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:currentColor;flex-shrink:0;margin-right:2px;opacity:0.6;
}
.nav-child.active::before{opacity:1;}

/* Sidebar divider */
.sidebar-divider{height:1px;background:rgba(255,255,255,0.07);margin:8px 12px;}

/* User info at bottom */
.sidebar-user{
  margin-top:auto;padding:14px 12px;
  border-top:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;gap:10px;
}
.sidebar-user-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--gold);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--navy);flex-shrink:0;
}
.sidebar-user-name{font-size:12px;font-weight:600;color:rgba(255,255,255,0.85);line-height:1.2;}
.sidebar-user-role{font-size:10px;color:rgba(255,255,255,0.35);}

/* ===== MAIN CONTENT ===== */
.main-wrap{
  margin-top:var(--header-h);
  flex:1;display:flex;flex-direction:column;
  transition:margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
  min-height:calc(100vh - var(--header-h));
}
.main-content{flex:1;padding:20px 16px;width:100%;}
@media(min-width:640px){.main-content{padding:24px 24px;}}
@media(min-width:1200px){.main-content{padding:28px 32px;}}

/* ===== PAGE HEADER ===== */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap;}
.page-title{font-size:18px;font-weight:700;color:var(--navy);}
@media(min-width:640px){.page-title{font-size:22px;}}
.page-subtitle{font-size:12px;color:var(--text-secondary);margin-top:3px;}
.page-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:16px;font-size:12px;color:var(--text-muted);}
.breadcrumb-sep{opacity:0.4;}
.breadcrumb a{color:var(--text-secondary);text-decoration:none;}
.breadcrumb a:hover{color:var(--gold-dark);}
.breadcrumb .current{color:var(--text-primary);font-weight:500;}

/* ===== CARDS ===== */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
@media(min-width:640px){.card{padding:20px;}}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.card-title{font-size:14px;font-weight:600;color:var(--navy);}

/* ===== STAT CARDS ===== */
.stats-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.stats-grid.cols-4{grid-template-columns:repeat(4,1fr);}}
@media(min-width:900px){.stats-grid.cols-3{grid-template-columns:repeat(3,1fr);}}

.stat-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;
  position:relative;overflow:hidden;
}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.stat-card.accent-gold::before{background:var(--gold);}
.stat-card.accent-navy::before{background:var(--navy);}
.stat-card.accent-success::before{background:var(--success);}
.stat-card.accent-warning::before{background:var(--warning);}
.stat-card.accent-danger::before{background:var(--danger);}
.stat-label{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:5px;}
.stat-value{font-size:24px;font-weight:700;color:var(--navy);line-height:1;}
@media(min-width:640px){.stat-value{font-size:28px;}}
.stat-sub{font-size:11px;color:var(--text-secondary);margin-top:4px;}
.progress-bar{height:4px;background:var(--border);border-radius:2px;margin-top:8px;}
.progress-fill{height:100%;border-radius:2px;}

/* ===== TABLE ===== */
.table-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.table-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
.table-title{font-size:14px;font-weight:600;color:var(--navy);}
.table-count{font-size:12px;color:var(--text-muted);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;min-width:480px;}
thead tr{background:var(--cream);}
th{padding:9px 14px;font-size:11px;font-weight:600;color:var(--text-muted);text-align:left;text-transform:uppercase;letter-spacing:0.4px;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:11px 14px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:#FDFCFA;}
.td-id{font-weight:600;color:var(--navy);font-size:12px;}
.td-muted{font-size:12px;color:var(--text-muted);}
.td-name strong{font-weight:600;display:block;font-size:13px;}
.td-name span{font-size:11px;color:var(--text-muted);}
.td-amount{font-variant-numeric:tabular-nums;font-weight:500;}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-warning{background:var(--warning-bg);color:var(--warning);}
.badge-danger{background:var(--danger-bg);color:var(--danger);}
.badge-info{background:var(--info-bg);color:var(--info);}
.badge-gray{background:#F1EFE8;color:#5F5E5A;}
.badge-gold{background:var(--gold-light);color:var(--gold-dark);}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;font-family:'Be Vietnam Pro',sans-serif;cursor:pointer;border:none;transition:all 0.2s;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.btn-primary{background:var(--navy);color:var(--white);}
.btn-primary:hover{background:var(--navy-light);}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-dark);color:var(--white);}
.btn-outline{background:var(--white);color:var(--text-secondary);border:1.5px solid var(--border);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-dark);}
.btn-danger-soft{background:var(--danger-bg);color:var(--danger);}
.btn-success-soft{background:var(--success-bg);color:var(--success);}
.btn-sm{padding:5px 11px;font-size:11px;}
.btn-full{width:100%;}

/* ===== FORM ===== */
.form-group{margin-bottom:14px;}
.form-label{display:block;font-size:11px;font-weight:700;color:var(--text-secondary);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.4px;}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:16px;font-family:'Be Vietnam Pro',sans-serif;color:var(--text-primary);background:var(--white);transition:border-color 0.2s;outline:none;}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,147,58,0.1);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted);}
.form-textarea{resize:vertical;min-height:80px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){.form-row{grid-template-columns:1fr;}}

/* ===== FILTER BAR ===== */
.filter-bar{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.filter-group{display:flex;align-items:center;gap:7px;}
.filter-label{font-size:11px;font-weight:700;color:var(--text-muted);white-space:nowrap;text-transform:uppercase;letter-spacing:0.3px;}
.filter-select{padding:7px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:16px;font-family:'Be Vietnam Pro',sans-serif;color:var(--text-primary);background:var(--cream);cursor:pointer;outline:none;}
.filter-select:focus{border-color:var(--gold);}
.ml-auto{margin-left:auto;}

/* ===== MONTH NAV ===== */
.month-nav{display:flex;align-items:center;gap:3px;background:var(--cream);border:1px solid var(--border);border-radius:8px;padding:3px;}
.month-btn{padding:5px 11px;border-radius:6px;background:none;border:none;font-size:13px;color:var(--text-secondary);cursor:pointer;font-family:'Be Vietnam Pro',sans-serif;transition:all 0.15s;-webkit-tap-highlight-color:transparent;}
.month-btn.active{background:var(--navy);color:white;font-weight:600;}
.month-btn:hover:not(.active){background:var(--white);}

/* ===== MODAL ===== */
.modal-backdrop{position:fixed;inset:0;background:rgba(26,39,68,0.5);z-index:400;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s;padding:0;}
@media(min-width:640px){.modal-backdrop{align-items:center;padding:20px;}}
.modal-backdrop.open{opacity:1;pointer-events:all;}
.modal{background:var(--white);border-radius:16px 16px 0 0;padding:20px 16px;width:100%;max-height:90vh;overflow-y:auto;transform:translateY(40px);transition:transform 0.25s;box-shadow:0 -8px 40px rgba(26,39,68,0.15);}
@media(min-width:640px){.modal{border-radius:16px;padding:28px;width:560px;max-width:100%;transform:translateY(16px);box-shadow:0 24px 64px rgba(26,39,68,0.2);}}
.modal-backdrop.open .modal{transform:translateY(0);}
.modal-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px;}
@media(min-width:640px){.modal-handle{display:none;}}
.modal-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.modal-subtitle{font-size:12px;color:var(--text-secondary);margin-bottom:18px;}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}

/* ===== TOAST ===== */
.toast-container{position:fixed;bottom:20px;right:16px;z-index:999;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--navy);color:white;padding:10px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;box-shadow:var(--shadow);animation:slideIn 0.3s ease;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);}
.toast.success{background:var(--success);}
.toast.error{background:var(--danger);}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* ===== ALERTS ===== */
.alert{padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:14px;border:1px solid;display:none;}
.alert-error{background:var(--danger-bg);color:var(--danger);border-color:#FCA5A5;}
.alert-success{background:var(--success-bg);color:var(--success);border-color:#86EFAC;}
.alert-warning{background:var(--warning-bg);color:var(--warning);border-color:#FCD34D;}

/* ===== DIVIDER ===== */
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--text-muted);font-size:12px;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}

/* ===== SECTION GAP ===== */
.gap{margin-bottom:16px;}

/* ===== PRINT ===== */
@media print{.app-header,.sidebar,.sidebar-overlay,.page-actions,.btn,.filter-bar,.modal-backdrop,.toast-container{display:none!important;}.main-wrap{margin-left:0!important;}.main-content{padding:0;}}