:root {
      --primary: #1b3c35;
      --accent: #e67e22;
      --bg: #f4f6f8;
      --text: #333333;
      --card-bg: #ffffff;
      --border: 2px solid #000000;
      --shadow: 4px 4px 0px #000000;
    }

/* 
  Global & Reset 
*/
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f4f6f9; color: #333; overflow-x: hidden; }

/* ANIMATIONS */
@keyframes fadeInSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseSpinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* NEW NEO-BRUTALISM ANIMATIONS */
@keyframes floatingBox {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

@keyframes fadeInBackdrop {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.5); }
}

@keyframes popIn {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slideUpBottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes fadeView {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseText {
  0%, 100% { opacity: 0.5; color: inherit; }
  50% { opacity: 1; color: var(--accent); }
}

.view-active {
  animation: fadeView 0.3s ease-out forwards;
}

.loading-text {
  animation: pulseText 1.5s infinite;
}

    body {
      background-color: var(--bg);
      color: var(--text);
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    /* --- LOGIN SECTION --- */
    #login-section {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: var(--bg);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
    .login-box {
      background: linear-gradient(135deg, #1b3c35 0%, #0d1e1a 100%);
      padding: 40px;
      border-radius: 12px;
      width: 90%;
      max-width: 400px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      border: 2px solid var(--accent);
      position: relative;
      z-index: 1;
      animation: fadeInSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .login-header {
      text-align: center;
    }
    .login-box img {
      width: 80px;
      margin-bottom: 20px;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    }
    .login-box h2 {
      margin-bottom: 10px;
      color: #ffffff;
      font-weight: 600;
    }
    .login-box p {
      color: rgba(255,255,255,0.8);
      font-size: 0.9rem;
      margin-bottom: 25px;
    }
    .input-group {
      margin-bottom: 15px;
      text-align: left;
    }
    .login-box .input-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      font-size: 0.85rem;
    }

    .retro-input {
      width: 100%;
      padding: 12px;
      border: var(--border);
      border-radius: 4px;
      font-size: 1rem;
      outline: none;
    }

    .retro-input:focus {
      border-color: var(--accent);
    }

    .btn-login {
      width: 100%;
      padding: 12px;
      background: var(--primary);
      color: white;
      border: var(--border);
      box-shadow: var(--shadow);
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    }
    .btn-login:hover, .header-actions button:hover {
      background: #d68910;
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0px #000;
    }
    .btn-login:active, .header-actions button:active {
      transform: translate(4px, 4px);
      box-shadow: 0 0 0 #000 !important;
    }
    .login-footer {
      margin-top: 20px;
      text-align: center;
    }
    .login-footer p {
      color: rgba(255,255,255,0.7);
      font-size: 0.85rem;
      margin: 5px 0;
    }
    .login-footer a {
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
    }

    .error-msg {
      color: red;
      font-size: 0.9rem;
      margin-top: 15px;
      display: none;
      font-weight: bold;
    }

    /* --- DASHBOARD LAYOUT --- */
    #dashboard-section {
      display: none; /* Hidden by default */
      width: 100%;
      height: 100%;
    }

    .wrapper {
      display: flex;
      width: 100%;
      height: 100%;
    }

    /* SIDEBAR (Desktop) */
    .sidebar {
      width: 250px;
      background: var(--primary);
      color: white;
      display: flex;
      flex-direction: column;
      border-right: var(--border);
      flex-shrink: 0;
    }

    .sidebar-brand {
      padding: 20px;
      font-size: 1.5rem;
      font-weight: bold;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sidebar-brand img {
      width: 30px;
    }

    .nav-links {
      flex-grow: 1;
      padding: 20px 0;
      list-style: none;
    }

    .nav-links li {
      margin-bottom: 5px;
    }

    .nav-links a {
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      font-weight: 500;
      transition: all 0.3s;
    }

    .nav-links a:hover, .nav-links a.active {
      background: rgba(255,255,255,0.1);
      color: white;
      border-left: 4px solid var(--accent);
    }

    .sidebar-footer {
      padding: 20px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    /* MAIN CONTENT */
    .main-content {
      flex-grow: 1;
      overflow-y: auto;
      padding: 30px;
      background: var(--bg);
      padding-bottom: 100px; /* For mobile nav */
    }

    /* HEADER */
    .dashboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    .greeting h1 {
      font-size: 1.8rem;
      color: var(--primary);
    }

    .greeting p {
      color: #666;
      font-size: 0.9rem;
    }

    .header-actions button {
      padding: 10px 20px;
      background: var(--accent);
      color: white;
      border: var(--border);
      box-shadow: 2px 2px 0 #000;
      font-weight: bold;
      cursor: pointer;
      border-radius: 4px;
    }

    /* SUMMARY CARDS */
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .card {
      background: var(--card-bg);
      border: var(--border);
      border-radius: 8px;
      padding: 20px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    }

    .card:hover {
      transform: translate(-2px, -2px);
      box-shadow: 8px 8px 0px #000;
    }
    .card:active {
      transform: translate(4px, 4px);
      box-shadow: 0 0 0 #000 !important;
    }

    .card-title {
      font-size: 1rem;
      color: var(--text);
      font-weight: 800;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      justify-content: flex-end;
      gap: 10px;
    }
    .card-title i {
      background: var(--accent);
      color: #fff;
      padding: 6px;
      border-radius: 4px;
      border: 2px solid var(--text);
      box-shadow: 2px 2px 0px var(--text);
      font-size: 0.8rem;
    }

    .card-value {
      font-size: 1.5rem;
      font-weight: bold;
      color: var(--primary);
    }

    .card-saldo .card-value { color: var(--primary); }
    .card-masuk .card-value { color: #27ae60; }
    .card-keluar .card-value { color: #c0392b; }
    .card-utang .card-value { color: #e67e22; }
    .card-piutang .card-value { color: #2980b9; }

    /* CHARTS SECTION */
    .charts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 30px;
    }

    @media (max-width: 900px) {
      .charts-grid { grid-template-columns: 1fr; }
    }

    .chart-box {
      background: var(--card-bg);
      border: var(--border);
      border-radius: 8px;
      padding: 20px;
      box-shadow: var(--shadow);
      position: relative;
      height: 380px;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .chart-box:hover {
      transform: translateY(-5px);
      box-shadow: 8px 8px 0px #000;
    }

    .chart-box h3, .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--primary);
      color: #fff;
      padding: 12px 20px;
      margin-bottom: 20px;
      border-bottom: var(--border);
      border-radius: 6px;
      font-weight: 800;
      font-size: 1.1rem;
    }

    .card > .table-header, .table-container > .table-header, .chart-box > h3 {
      margin: -20px -20px 20px -20px;
      border-radius: 6px 6px 0 0;
    }
    .table-header h3 {
      margin: 0;
      font-size: 1.1rem;
      color: #fff;
    }
    
    .chart-container-inner {
      flex-grow: 1;
      position: relative;
    }

    /* TABLE SECTION */
    .table-container {
      background: var(--card-bg);
      border: var(--border);
      border-radius: 8px;
      padding: 20px;
      box-shadow: var(--shadow);
      overflow-x: auto;
    }

    /* .table-header is now merged with .chart-box h3 above */
    
    .table-header .btn-action {
      background: var(--accent);
      color: #fff;
      border: 2px solid var(--text);
      box-shadow: 2px 2px 0 var(--text);
      padding: 6px 12px;
      font-weight: bold;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px;
    }

    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #ddd;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
table tbody tr:hover {
  background-color: rgba(230, 126, 34, 0.05);
}

    th {
      font-weight: bold;
      color: #666;
    }

    .btn-action {
      background: none;
      border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}
.btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0px rgba(0,0,0,0.8);
  filter: brightness(1.1);
}
.btn-action:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
}
.btn-danger { background: #e74c3c; color: white; }
.btn-success { background: #2ecc71; color: white; }

.btn-edit { background: #f1c40f; color: #000; padding: 5px 10px; border: 2px solid #000; border-radius: 4px; box-shadow: 2px 2px 0px #000; font-weight: bold; }
.btn-edit:hover { background: #f39c12; transform: translate(-2px, -2px); box-shadow: 4px 4px 0px #000; }
.btn-edit:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #000; }

.btn-delete { background: #e74c3c; color: #fff; padding: 5px 10px; border: 2px solid #000; border-radius: 4px; box-shadow: 2px 2px 0px #000; font-weight: bold; }
.btn-delete:hover { background: #c0392b; transform: translate(-2px, -2px); box-shadow: 4px 4px 0px #000; }
.btn-delete:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #000; }

    /* BOTTOM NAV (Mobile) */
    .bottom-nav {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: var(--primary);
      border-top: var(--border);
      z-index: 100;
    }

    .bottom-nav ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      list-style: none;
      padding: 5px 0;
      position: relative;
    }

    .bottom-nav a {
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.7rem;
      gap: 5px;
      padding: 5px;
    }

    .bottom-nav a.active {
      color: var(--accent);
      font-weight: bold;
    }

    .bottom-nav i {
      font-size: 1.2rem;
    }

    /* FAB for Mobile */
    .fab-mobile-container {
      position: relative;
      top: -25px;
    }
    
    .fab-mobile {
      background: var(--accent);
      color: #fff !important;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: var(--border);
      box-shadow: 2px 2px 0px #000;
      text-decoration: none;
      font-size: 1.5rem !important;
      margin: 0 auto;
    }
    
    .fab-mobile i {
      font-size: 1.5rem !important;
    }
    
    .fab-mobile:active {
      transform: translate(2px, 2px);
      box-shadow: none;
    }

    /* MODAL CRUD */
    .modal {
      display: none; /* Default hidden */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0);
      justify-content: center;
      align-items: center;
    }
    .modal.show {
      display: flex;
      animation: fadeInBackdrop 0.3s forwards;
    }
    #modal-lainnya.show {
      align-items: flex-end;
    }

    .modal-content {
      background-color: var(--bg);
      padding: 20px;
      border: var(--border);
      width: 90%;
      max-width: 500px;
      border-radius: 8px;
      box-shadow: var(--shadow);
      position: relative;
      transform: scale(0.9);
      opacity: 0;
      max-height: 90vh;
      overflow-y: auto;
    }
    .modal.show .modal-content {
      animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
    #modal-lainnya.show .modal-content {
      animation: slideUpBottom 0.3s ease-out forwards;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      transform: scale(1);
      opacity: 1;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: -30px -30px 20px -30px;
      padding: 20px 30px;
      background: var(--primary);
      color: white;
      border-bottom: var(--border);
      border-radius: 8px 8px 0 0;
    }

    .modal-header h2 {
      margin: 0;
      color: white;
    }

    .close-modal {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: white;
      opacity: 0.8;
      transition: opacity 0.2s;
    }

    .close-modal:hover {
      opacity: 1;
    }

    /* Enhanced Modal Form Styling */
    .modal-content .input-group, .modal-content .form-group {
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .modal-content label {
      font-weight: 700;
      color: #2c3e50;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .modal-content .retro-input {
      background-color: #f8f9fa;
      border: 1px solid #ced4da;
      border-radius: 6px;
      transition: all 0.2s ease-in-out;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    }
    .modal-content .retro-input:focus {
      background-color: #ffffff;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15);
    }

    /* TOAST NOTIFICATION */
    .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100000;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .toast {
      background: #fff;
      color: #333;
      padding: 15px 25px;
      border-radius: 5px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border-left: 5px solid;
      font-weight: bold;
      transform: translateX(120%);
      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .toast.show {
      transform: translateX(0);
    }

    .toast.success { border-color: #2ecc71; }
    .toast.error { border-color: #e74c3c; }

    .toast.success i { color: #2ecc71; }
    .toast.error i { color: #e74c3c; }

    @media (max-width: 768px) {
      .sidebar { display: none; }
      .bottom-nav { display: block; }
      .header-actions { display: none; }
      .main-content { padding: 15px; padding-bottom: 90px; }
      .summary-grid { grid-template-columns: 1fr !important; }
      
      /* Mobile Table Card Layout */
      table { min-width: 100% !important; border: 0; }
      table thead { display: none; }
      table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 2px solid var(--text);
        border-radius: 8px;
        padding: 10px;
        box-shadow: 4px 4px 0px var(--text);
        background: var(--card-bg);
      }
      table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        border-bottom: 1px dashed #eee;
        padding: 8px 5px;
      }
      table tbody td:last-child { 
        border-bottom: none; 
        justify-content: flex-end; 
        gap: 10px; 
      }
      table tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #666;
        text-align: left;
        margin-right: 15px;
      }
    }