@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  
  /* WARNA MODE SIANG (SUDAH DIPERGELAP AGAR NYAMAN DI MATA) */
  :root { 
    --bg-body: #f4f7fe; 
    --bg-panel: #ffffff; 
    --text-main: #111827; /* Hitam pekat untuk angka dan teks utama */
    --text-muted: #64748b; /* Abu-abu gelap untuk judul card agar tidak silau */
    --border: #e2e8f0; 
    --primary: #4318FF; 
    --shadow: 0px 4px 12px rgba(0, 0, 0, 0.06); 
  }
  
  /* WARNA MODE MALAM */
  [data-theme="dark"] { 
    --bg-body: #1a1c23; 
    --bg-panel: #272933; 
    --text-main: #ffffff; 
    --text-muted: #8f9bba; 
    --border: #3d4050; 
    --primary: #4318FF; 
    --shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); 
  }
  
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; transition: background-color 0.3s, color 0.3s; }
  body { background-color: var(--bg-body); color: var(--text-main); overflow-x: hidden;}
  
  #login-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg-body); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; }
  .login-box { background: var(--bg-panel); padding: 40px; border-radius: 16px; box-shadow: var(--shadow); width: 100%; max-width: 400px; text-align: center; }
  .login-box input { width: 100%; padding: 12px; margin: 10px 0 20px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-body); color: var(--text-main); font-size: 14px; text-align: center; outline:none;}
  .login-box input:focus { border-color: var(--primary); }

  .layout { display: flex; min-height: 100vh; position: relative;}
  .sidebar { width: 250px; background-color: var(--bg-panel); padding: 20px; border-right: 1px solid var(--border); height: 100vh; overflow-y: auto; }
  .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; margin-bottom: 40px; color: var(--text-main); }
  .logo img { height: 35px; border-radius:4px;}
  .nav-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 15px; text-decoration: none; color: var(--text-muted); border-radius: 8px; margin-bottom: 8px; font-weight: 500;}
  .nav-menu a svg { width: 20px; height: 20px; min-width: 20px; flex-shrink: 0; stroke-width: 2; fill: none; stroke: currentColor; overflow: visible;}
  .nav-menu a:hover, .nav-menu a.active { background-color: var(--primary); color: #fff; }
  
  .mobile-only { display: none !important; }
  .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 90; }

  .main-content { flex: 1; padding: 30px; overflow-y: auto; height: 100vh; }
  .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .topbar h2 { font-size: 24px; font-weight: 700; margin: 0;}
  .topbar-right { display: flex; align-items: center; gap: 15px; }
  .icon-btn { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-main); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  
  .user-profile { display: flex; align-items: center; gap: 10px; font-weight: 600; background: var(--bg-panel); padding: 5px 15px 5px 5px; border-radius: 20px; border: 1px solid var(--border); cursor: pointer;}
  .user-profile span { font-size: 14px; }
  .avatar { width: 30px; height: 30px; border-radius: 50%; background-color: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; text-transform: uppercase;}
  
  .page-filter { display: inline-flex; align-items: center; gap: 10px; background: var(--bg-panel); padding: 10px 15px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 25px; box-shadow: var(--shadow); flex-wrap: wrap;}
  .page-filter input { border: 1px solid var(--border); border-radius:4px; padding:5px; background: var(--bg-body); color: var(--text-main); outline: none; font-family: inherit;}
  [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.8; cursor: pointer; }
  
  .dashboard-top-wrapper { display: flex; gap: 20px; align-items: stretch; margin-bottom: 30px; }
  .dashboard-top-wrapper .stats-grid-3 { flex: 2.7; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 0; }
  .top-mp-card { flex: 1.3; display: flex; flex-direction: column; background-color: var(--bg-panel); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 0 !important; }
  .top-mp-card .table-responsive { flex: 1; overflow-y: auto; }
  
  .stat-card { 
    background-color: var(--bg-panel); 
    padding: 20px; 
    border-radius: 16px; 
    box-shadow: var(--shadow); 
    position: relative; 
    overflow: hidden;
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    min-height: 130px; 
  }
  .stat-card h3 { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; position: relative; z-index: 1; }
  .stat-card .value { font-size: 24px; font-weight: 700; color: var(--text-main); position: relative; z-index: 1; }
  
  .stat-icon { 
    position: absolute; 
    right: -2px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: rgba(255, 255, 255, 0.03); 
    width: 100px; 
    height: 100px; 
    z-index: 0; 
    pointer-events: none; 
  }
  [data-theme="light"] .stat-icon { color: rgba(0, 0, 0, 0.04); }

  .card { background-color: var(--bg-panel); border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; padding: 0;} 
  .card-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border); flex-wrap:wrap; gap:10px;}
  .card-body { padding: 20px; }
  
  .table-responsive { overflow-x: auto; width: 100%; }
  .table { width: 100%; border-collapse: collapse; min-width: 100%; border-spacing: 0;}
  .table th, .table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle !important; }
  .table th { color: var(--text-muted); font-weight: 500; background: rgba(0,0,0,0.02); }
  [data-theme="dark"] .table th { background: rgba(255,255,255,0.02); }
  .col-name { max-width: 250px; white-space: normal; word-wrap: break-word; line-height: 1.4; }
  
  .parent-row { background-color: rgba(67, 24, 255, 0.03); }
  [data-theme="dark"] .parent-row { background-color: rgba(67, 24, 255, 0.08); }
  .parent-row td:first-child { border-left: 3px solid var(--primary); padding-left: 17px; } 
  .parent-row td { font-weight: 500; }
  .child-row { transition: all 0.3s ease; }
  .toggle-btn { background:none; border:none; color:var(--primary); cursor:pointer; font-weight:600; display:flex; align-items:center; gap:5px;}
  .badge-payment { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; color: white;}
  
  .simple-chart-container { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 20px;}
  .chart-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%;}
  .chart-bar { width: 100%; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 5%; transition: height 0.5s ease; position: relative;}
  .chart-bar:hover::after { content: attr(data-val); position: absolute; top: -25px; left: 50%; transform: translateX(-50%); background: var(--text-main); color: var(--bg-panel); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; z-index: 10;}
  .chart-label { font-size: 11px; color: var(--text-muted); text-align: center;}

  .ledger-table { width: 100%; font-size: 15px; }
  .ledger-table td { padding: 12px 0; border-bottom: 1px dashed var(--border); }
  .ledger-table .t-title { font-weight: 600; color: var(--text-main); }
  .ledger-table .t-val { text-align: right; font-weight: 600; }
  .ledger-table .t-sub { padding-left: 20px; color: var(--text-muted); font-size: 14px;}
  .ledger-table .t-total { font-size: 18px; font-weight: 700; color: var(--primary); border-top: 2px solid var(--border); border-bottom:none; padding-top: 15px;}
  
  .settings-tabs { display:flex; gap:10px; overflow-x:auto; border-bottom:1px solid var(--border); padding: 0 20px 10px 20px;}
  .st-btn { background:transparent; border:none; padding:10px 15px; cursor:pointer; color:var(--text-muted); font-weight:600; border-radius:8px; white-space:nowrap;}
  .st-btn.active { background:var(--primary); color:white; }
  .settings-pane { display:none; padding: 20px;}
  .settings-pane.active { display:block; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: 14px; text-decoration: none;}
  .btn-primary { background-color: var(--primary); color: white; }
  .btn-outline { background: transparent; border: 1px dashed var(--border); color: var(--text-main); }
  
  td.action-btns { display: table-cell !important; white-space: nowrap; width: 1%; }
  .action-btns button, .action-btns a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: white; text-decoration: none; margin-right: 5px; vertical-align: middle; }
  .action-btns button:last-child, .action-btns a:last-child { margin-right: 0; }
  .bg-green { background-color: #10B981; } .bg-yellow { background-color: #F59E0B; } .bg-red { background-color: #EF4444; } .bg-blue { background-color: #3B82F6; } .bg-dark { background-color: #333; }
  
  .form-group { margin-bottom: 15px; }
  .form-group label { display: block; margin-bottom: 5px; font-size: 14px; color: var(--text-muted); font-weight:500;}
  .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background-color: var(--bg-body); color: var(--text-main); font-family:inherit; outline:none;}
  .form-group input:focus, .form-group select:focus { border-color: var(--primary); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
  .sales-item-row { display: grid; grid-template-columns: 2fr 1fr 1.5fr auto; gap: 10px; align-items: end; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--border); }
  
  .searchable-dropdown { position: relative; width: 100%; }
  .searchable-options { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; z-index: 1000; box-shadow: var(--shadow); margin-top:5px;}
  .searchable-options div { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-main); transition: background 0.2s;}
  .searchable-options div:last-child { border-bottom: none; }
  .searchable-options div:hover { background: var(--bg-body); color: var(--primary); font-weight:600;}
  .searchable-dropdown.active .searchable-options { display: block; }

  .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 100; padding:20px;}
  .modal.active { display: flex; }
  .modal-content { background-color: var(--bg-panel); padding: 30px; border-radius: 16px; width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); }
  .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .close-btn { background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; }
  
  .loading-overlay { display: none; position: fixed; top:20px; right:20px; background: var(--primary); color:white; padding:10px 20px; border-radius:8px; z-index: 99999; align-items:center; gap:10px; box-shadow: var(--shadow); font-weight:600; font-size:14px;}
  .spinner-small { border: 3px solid rgba(255,255,255,0.3); border-top: 3px solid white; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  
  .toast { position: fixed; bottom: 20px; right: 20px; background-color: #333; color: white; padding: 15px 25px; border-radius: 8px; display: none; z-index: 1000; box-shadow: var(--shadow);}
  .toast.success { background-color: #10B981; } .toast.error { background-color: #EF4444; }
  .text-green { color: #10B981 !important; } .text-red { color: #EF4444 !important; }

  @media print {
    body * { visibility: hidden; } body { background: white !important; color: black !important; margin: 0; padding: 0; }
    .print-only, .print-only * { visibility: visible; }
    .print-only { display: block; position: absolute; left: 0; top: 0; width: 80mm; padding: 5mm; font-family: monospace; font-size: 12px; color: black; }
    .print-header { text-align: center; border-bottom: 1px dashed black; padding-bottom: 5px; margin-bottom: 5px; }
    .print-header h2 { margin: 0; font-size: 18px; }
    .print-table { width: 100%; border-collapse: collapse; margin: 5px 0; } .print-table th, .print-table td { border-bottom: 1px dashed black; padding: 3px 0; text-align: left; }
    .print-footer { text-align: center; margin-top: 10px; font-size: 10px; border-top: 1px dashed black; padding-top: 5px;}
  }

  /* MEDIA QUERY RESPONSIVE (HP) */
  @media (max-width: 768px) {
    .mobile-only { display: flex !important; } 
    .sidebar { position: fixed; left: -260px; top: 0; bottom: 0; z-index: 100; transition: left 0.3s ease-in-out; }
    .sidebar.open { left: 0; } 
    .sidebar-overlay.active { display: block; } 
    .main-content { padding: 15px !important; } 
    .topbar-right span { display: none !important; }
    
    .dashboard-top-wrapper { flex-direction: column; }
    .dashboard-top-wrapper .stats-grid-3 { flex: none; width: 100%; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .top-mp-card { flex: none; width: 100%; margin-bottom: 20px !important;}
    
    .stat-card { padding: 15px !important; min-height: 100px; }
    .stat-card h3 { font-size: 12px !important; margin-bottom: 5px; }
    .stat-card .value { font-size: 18px !important; }
    .stat-icon { width: 80px !important; height: 80px !important; right: -10px; top: 50%; transform: translateY(-50%); }
    
    .form-grid { grid-template-columns: 1fr !important; }
    .sales-item-row { grid-template-columns: 1fr 1fr auto !important; }
    .sales-item-row > div:first-child { grid-column: span 3; margin-bottom: 5px !important; }

    .page-filter { flex-wrap: nowrap !important; gap: 8px; padding: 8px 10px; width: 100%; overflow-x: auto; }
    .page-filter span { font-size: 12px; white-space: nowrap; }
    .page-filter input[type="date"] { padding: 6px; font-size: 12px; width: 120px; }
    .page-filter .btn { padding: 6px 12px !important; font-size: 12px; white-space: nowrap; }

    .table-responsive { overflow-x: auto; width: 100%; }
    .table { width: 100% !important; min-width: 450px !important; }
    .table th, .table td { padding: 12px 15px !important; font-size: 13px !important; white-space: normal; }
    .col-name { max-width: 150px !important; white-space: normal !important; }
    
    #table-top-buyers, #table-bank-summary, #table-bestseller, #table-top-mp { min-width: 100% !important; }
  }