/* ===== RESET & BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',system-ui,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;display:flex;overflow-x:hidden}
::selection{background:#059669;color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#1e293b}
::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}

/* ===== SIDEBAR ===== */
.sidebar{width:260px;background:linear-gradient(180deg,#0f172a 0%,#1e293b 100%);border-right:1px solid #1e293b;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:transform .3s}
.sidebar-header{padding:28px 24px 20px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
.logo-icon{font-size:36px;margin-bottom:8px}
.sidebar-header h2{font-size:20px;font-weight:800;background:linear-gradient(135deg,#34d399,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-header p{font-size:11px;color:#64748b;margin-top:4px;letter-spacing:.5px;text-transform:uppercase}
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.nav-btn{display:flex;align-items:center;gap:12px;padding:12px 16px;border:none;background:transparent;color:#94a3b8;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;text-align:left;width:100%}
.nav-btn:hover{background:rgba(255,255,255,.05);color:#e2e8f0}
.nav-btn.active{background:linear-gradient(135deg,rgba(5,150,105,.2),rgba(52,211,153,.1));color:#34d399;box-shadow:inset 3px 0 0 #059669}
.nav-icon{font-size:18px;width:24px;text-align:center}
.sidebar-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.06)}
.sidebar-footer small{font-size:11px;color:#475569}

/* ===== MOBILE HEADER ===== */
.mobile-header{display:none}

/* ===== MOBILE NAV ===== */
.mobile-nav{display:none}

/* ===== MOBILE MENU GRID ===== */
.mobile-menu-grid{display:none}

/* ===== MAIN CONTENT ===== */
.main-content{flex:1;margin-left:260px;padding:32px;min-height:100vh}
.page{display:none;animation:fadeIn .4s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.page-header{margin-bottom:28px}
.page-header h1{font-size:26px;font-weight:800;color:#f1f5f9}
.page-header p{font-size:14px;color:#64748b;margin-top:4px}

/* ===== STAT CARDS ===== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:rgba(30,41,59,.6);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px;transition:transform .2s,box-shadow .2s}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.stat-icon{font-size:32px;width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.stat-green .stat-icon{background:rgba(5,150,105,.15)}
.stat-red .stat-icon{background:rgba(239,68,68,.15)}
.stat-blue .stat-icon{background:rgba(59,130,246,.15)}
.stat-purple .stat-icon{background:rgba(139,92,246,.15)}
.stat-label{display:block;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.stat-value{display:block;font-size:22px;font-weight:800;margin-top:4px;color:#f1f5f9}
.stat-green .stat-value{color:#34d399}
.stat-red .stat-value{color:#f87171}
.stat-blue .stat-value{color:#60a5fa}
.stat-purple .stat-value{color:#a78bfa}

/* ===== CARDS ===== */
.card{background:rgba(30,41,59,.6);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px;margin-bottom:20px}
.card h3{font-size:16px;font-weight:700;color:#e2e8f0;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}

/* ===== PROGRESS BAR ===== */
.progress-section{margin-bottom:24px}
.progress-bar-wrap{background:#1e293b;border-radius:10px;height:16px;overflow:hidden;margin:12px 0}
.progress-bar{height:100%;background:linear-gradient(90deg,#059669,#34d399);border-radius:10px;transition:width .8s cubic-bezier(.4,0,.2,1);position:relative}
.progress-bar::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.progress-labels{display:flex;justify-content:space-between;font-size:13px;color:#94a3b8}
.progress-labels span:first-child{font-weight:700;color:#34d399;font-size:18px}
.alert-box{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#fbbf24;padding:12px 16px;border-radius:10px;font-size:13px;margin-top:12px;font-weight:500}

/* ===== CHARTS ===== */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.chart-wrap{position:relative;height:260px;display:flex;align-items:center;justify-content:center}

/* ===== FORMS ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full{grid-column:1/-1}
label{font-size:11px;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
input,textarea,select{width:100%;padding:10px 14px;border:1px solid #334155;border-radius:10px;background:rgba(15,23,42,.6);color:#e2e8f0;font-size:14px;font-family:inherit;transition:all .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:#059669;box-shadow:0 0 0 3px rgba(5,150,105,.15)}
textarea{resize:vertical;min-height:80px;line-height:1.5}
.hint{font-size:11px;color:#475569;margin-top:2px}
.search-bar{display:flex;gap:10px;margin-bottom:16px}
.search-bar input{flex:1}
.filter-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06)}
.filter-group{display:flex;flex-direction:column;gap:4px}
.filter-group label{font-size:10px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.filter-group select,.filter-group input[type="month"]{padding:8px 12px;border:1px solid #334155;border-radius:8px;background:rgba(15,23,42,.6);color:#e2e8f0;font-size:13px;font-family:inherit;min-width:160px}
.filter-group select:focus,.filter-group input[type="month"]:focus{outline:none;border-color:#059669}

/* ===== FILE UPLOAD ===== */
.file-upload{position:relative;border:2px dashed #334155;border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;overflow:hidden}
.file-upload:hover{border-color:#059669;background:rgba(5,150,105,.05)}
.file-upload input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-placeholder{color:#64748b;font-size:14px}
.foto-preview{max-width:100%;max-height:200px;border-radius:8px;object-fit:contain}

/* ===== BUTTONS ===== */
.btn{padding:10px 20px;border-radius:10px;border:1px solid transparent;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#059669,#34d399);color:#fff;border-color:transparent}
.btn-primary:hover{box-shadow:0 4px 20px rgba(5,150,105,.4);transform:translateY(-1px)}
.btn-secondary{background:rgba(255,255,255,.05);color:#94a3b8;border-color:#334155}
.btn-secondary:hover{background:rgba(255,255,255,.1);color:#e2e8f0}
.btn-danger{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.3)}
.btn-danger:hover{background:rgba(239,68,68,.2)}
.btn-warning{background:rgba(245,158,11,.1);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.btn-warning:hover{background:rgba(245,158,11,.2)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}

/* ===== TABLES ===== */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748b;background:rgba(15,23,42,.4);border-bottom:1px solid rgba(255,255,255,.06);font-weight:600}
td{padding:12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;color:#cbd5e1}
tr:hover td{background:rgba(255,255,255,.02)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.empty-state{text-align:center;padding:40px 16px;color:#475569;font-size:14px}
.thumb-img{width:48px;height:48px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid #334155;transition:transform .2s}
.thumb-img:hover{transform:scale(1.1)}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-content{position:relative;max-width:90vw;max-height:90vh}
.modal-content img{max-width:100%;max-height:85vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-close{position:absolute;top:-12px;right:-12px;width:36px;height:36px;border-radius:50%;background:#1e293b;border:1px solid #334155;color:#e2e8f0;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:#059669;color:#fff;padding:12px 24px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;transition:all .4s;z-index:2000;pointer-events:none;white-space:nowrap;box-shadow:0 8px 30px rgba(5,150,105,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .charts-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  body{flex-direction:column}
  .sidebar{display:none}

  /* Mobile Header */
  .mobile-header{display:flex;align-items:center;position:fixed;top:0;left:0;right:0;z-index:90;background:rgba(15,23,42,.96);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);padding:12px 16px;height:60px}
  .mh-brand{display:flex;align-items:center;gap:10px}
  .mh-logo{font-size:28px}
  .mh-brand strong{font-size:17px;font-weight:800;background:linear-gradient(135deg,#34d399,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block}
  .mh-brand small{font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:.5px}

  /* Main content */
  .main-content{margin-left:0;padding:72px 14px 90px;min-height:100vh}

  /* Page header mobile */
  .page-header{margin-bottom:16px}
  .page-header h1{font-size:20px}
  .page-header p{font-size:12px;margin-top:2px}

  /* Mobile Menu Grid - app-like icon menu */
  .mobile-menu-container{margin-bottom:20px}
  .mm-title{display:block !important}
  .mobile-menu-grid{display:none;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;margin-left:0;margin-right:0}
  .mobile-menu-grid.show{display:grid}
  .menu-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;cursor:pointer;border-radius:16px;transition:all .2s;background:rgba(30,41,59,.4);border:1px solid rgba(255,255,255,.03)}
  .menu-item:active{transform:scale(.93);background:rgba(255,255,255,.06)}
  .menu-item span{font-size:10px;font-weight:600;color:#cbd5e1;text-align:center;line-height:1.2}
  .menu-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .2s}
  .mi-green{background:rgba(5,150,105,.15);box-shadow:0 4px 15px rgba(5,150,105,.1)}
  .mi-yellow{background:rgba(245,158,11,.15);box-shadow:0 4px 15px rgba(245,158,11,.1)}
  .mi-blue{background:rgba(59,130,246,.15);box-shadow:0 4px 15px rgba(59,130,246,.1)}
  .mi-purple{background:rgba(139,92,246,.15);box-shadow:0 4px 15px rgba(139,92,246,.1)}

  /* Bottom Nav - native app style */
  .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(15,23,42,.97);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.08);padding:6px 0 env(safe-area-inset-bottom,10px);z-index:100;justify-content:space-around}
  .mob-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:none;background:transparent;color:#64748b;cursor:pointer;font-family:inherit;border-radius:12px;transition:all .25s;flex:1;position:relative}
  .mob-btn .mob-icon{font-size:20px;display:block;transition:transform .2s}
  .mob-btn span:last-child{font-size:10px;font-weight:600;letter-spacing:.2px}
  .mob-btn.active{color:#34d399}
  .mob-btn.active .mob-icon{transform:scale(1.15)}
  .mob-btn.active::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:24px;height:3px;background:#34d399;border-radius:0 0 3px 3px}

  /* Stat cards - compact 2x2 */
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .stat-card{padding:14px;gap:10px;border-radius:14px;flex-direction:column;text-align:center}
  .stat-card:hover{transform:none;box-shadow:none}
  .stat-icon{font-size:24px;width:44px;height:44px;border-radius:12px;margin:0 auto}
  .stat-label{font-size:9px;letter-spacing:.4px}
  .stat-value{font-size:16px;margin-top:2px}

  /* Cards compact */
  .card{padding:16px;margin-bottom:14px;border-radius:14px}
  .card h3{font-size:14px;margin-bottom:12px;padding-bottom:10px}

  /* Progress */
  .progress-section{margin-bottom:14px}
  .progress-bar-wrap{height:12px;margin:8px 0}
  .progress-labels span:first-child{font-size:16px}

  /* Charts */
  .charts-grid{grid-template-columns:1fr;gap:14px;margin-bottom:14px}
  .chart-wrap{height:200px}

  /* Forms compact */
  .form-grid{grid-template-columns:1fr;gap:12px}
  .form-group.full{grid-column:1}
  input,textarea,select{padding:10px 12px;font-size:14px;border-radius:12px}
  .btn{padding:10px 16px;border-radius:12px;font-size:13px}
  .btn-row{gap:8px;margin-top:16px;padding-top:14px}

  /* Filter bar compact */
  .filter-bar{gap:8px;padding-bottom:12px;margin-bottom:12px}
  .filter-group select,.filter-group input[type="month"]{min-width:0;width:100%;font-size:12px;padding:8px 10px}

  /* Table compact */
  th{padding:8px 10px;font-size:10px}
  td{padding:10px;font-size:12px}
  .actions{gap:4px}
  .btn-sm{padding:5px 8px;font-size:11px}

  /* Toast above bottom nav */
  .toast{bottom:80px;font-size:13px;padding:10px 20px}
}
@media(max-width:380px){
  .stats-grid{gap:8px}
  .stat-value{font-size:14px}
  .stat-icon{width:38px;height:38px;font-size:20px}
  .menu-icon{width:40px;height:40px;font-size:18px}
}

/* ===== LIGHT MODE ===== */
body.light-mode {
  background: #f8fafc;
  color: #0f172a;
}
body.light-mode .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-right: 1px solid #e2e8f0;
}
body.light-mode .sidebar-header {
  border-bottom-color: #e2e8f0;
}
body.light-mode .sidebar-header h2 {
  background: linear-gradient(135deg, #059669, #047857);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.light-mode .nav-btn {
  color: #475569;
}
body.light-mode .nav-btn:hover {
  background: rgba(0,0,0,0.03);
  color: #0f172a;
}
body.light-mode .nav-btn.active {
  background: linear-gradient(135deg, rgba(5,150,105,.1), rgba(52,211,153,.05));
  color: #059669;
}
body.light-mode .sidebar-footer {
  border-top-color: #e2e8f0;
}
body.light-mode .page-header h1 {
  color: #0f172a;
}
body.light-mode .stat-card, body.light-mode .card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
}
body.light-mode .stat-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
body.light-mode .stat-value {
  color: #0f172a;
}
body.light-mode .stat-green .stat-value{color:#059669}
body.light-mode .stat-red .stat-value{color:#dc2626}
body.light-mode .stat-blue .stat-value{color:#2563eb}
body.light-mode .stat-purple .stat-value{color:#7c3aed}
body.light-mode .card h3 {
  color: #0f172a;
  border-bottom-color: #f1f5f9;
}
body.light-mode th {
  background: #f1f5f9;
  color: #475569;
  border-bottom-color: #e2e8f0;
}
body.light-mode td {
  color: #334155;
  border-bottom-color: #f1f5f9;
}
body.light-mode tr:hover td {
  background: #f8fafc;
}
body.light-mode input, body.light-mode textarea, body.light-mode select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
body.light-mode .filter-bar {
  border-bottom-color: #e2e8f0;
}
body.light-mode .filter-group select, body.light-mode .filter-group input[type="month"] {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}
body.light-mode .mobile-header {
  background: rgba(255,255,255,.98);
  border-bottom-color: #e2e8f0;
}
body.light-mode .mobile-nav {
  background: rgba(255,255,255,.98);
  border-top-color: #e2e8f0;
}
body.light-mode .mh-brand strong {
  background: linear-gradient(135deg, #059669, #047857);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.light-mode .mob-btn {
  color: #64748b;
}
body.light-mode .mob-btn.active {
  color: #059669;
}
body.light-mode .mob-btn.active::before {
  background: #059669;
}
body.light-mode .menu-item {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
body.light-mode .menu-item span {
  color: #334155;
}
body.light-mode .progress-bar-wrap {
  background: #e2e8f0;
}
body.light-mode ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
body.light-mode ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
body.light-mode .btn-secondary {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}
body.light-mode .btn-secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
}
body.light-mode .btn-row {
  border-top-color: #e2e8f0;
}
body.light-mode .file-upload {
  border-color: #cbd5e1;
}
body.light-mode .modal-content img {
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
body.light-mode .modal-close {
  background: #ffffff;
  color: #0f172a;
  border-color: #e2e8f0;
}