/* Extracted from BudgetingAja_fixed_v3.html */


        :root {
            --primary: #4CAF50;
            --primary-light: #81C784;
            --primary-dark: #388E3C;
            --secondary: #2196F3;
            --secondary-light: #64B5F6;
            --danger: #F44336;
            --warning: #FF9800;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --white: #ffffff;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f5f7fa;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 800px;
            margin: 20px auto;
            background: var(--white);
            padding: 25px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }
        
        /* Header Styles */
        .app-header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }
        
        .app-title {
            color: var(--primary-dark);
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 5px;
            letter-spacing: 0.5px;
        }
        
        .tagline {
            color: var(--gray);
            font-size: 14px;
            font-style: italic;
            margin-bottom: 20px;
        }
        
        /* Dashboard Cards */
        .dashboard {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .card {
            background: var(--white);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            border-top: 4px solid;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .card-income {
            border-color: var(--primary);
        }
        
        .card-expense {
            border-color: var(--danger);
        }
        
        .card-balance {
            border-color: var(--secondary);
        }
        
        .card-title {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        .card-title i {
            margin-right: 8px;
            font-size: 16px;
        }
        
        .card-value {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .card-income .card-value {
            color: var(--primary-dark);
        }
        
        .card-expense .card-value {
            color: var(--danger);
        }
        
        .card-balance .card-value {
            color: var(--secondary);
        }
        
        /* Form Styles */
        .form-container {
            background: var(--light);
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        }
        
        .form-title {
            text-align: center;
            color: var(--primary-dark);
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 600;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--gray);
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            transition: border 0.3s ease;
            background-color: var(--white);
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }
        
        /* Button Styles */
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 120px;
        }
        
        .btn i {
            margin-right: 8px;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: var(--white);
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-secondary {
            background-color: var(--secondary);
            color: var(--white);
        }
        
        .btn-secondary:hover {
            background-color: #1976D2;
        }
        
        .btn-danger {
            background-color: var(--danger);
            color: var(--white);
        }
        
        .btn-danger:hover {
            background-color: #D32F2F;
        }
        
        .btn-warning {
            background-color: var(--warning);
            color: var(--white);
        }
        
        .btn-warning:hover {
            background-color: #F57C00;
        }
        
        /* Table Styles */
        .data-section {
            margin-top: 30px;
        }
        
        .section-title {
            text-align: center;
            color: var(--primary-dark);
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 600;
        }
        
        .search-filter {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .search-box {
            position: relative;
            width: 200px;
        }
        
        .search-box input {
            padding-left: 35px;
        }
        
        .search-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            font-size: 14px;
            background: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        th {
            background-color: var(--primary);
            color: var(--white);
            font-weight: 500;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.5px;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        tr:hover {
            background-color: #f1f1f1;
        }
        
        .action-buttons {
            display: flex;
            gap: 5px;
        }
        
        .btn-icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            background: transparent;
        }
        
        .btn-edit {
            color: var(--secondary);
        }
        
        .btn-edit:hover {
            background-color: rgba(33, 150, 243, 0.1);
        }
        
        .btn-delete {
            color: var(--danger);
        }
        
        .btn-delete:hover {
            background-color: rgba(244, 67, 54, 0.1);
        }
        
        /* Settings Panel */
        .btn-settings {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 100;
            border: none;
            transition: all 0.3s ease;
        }
        
        .btn-settings:hover {
            transform: rotate(30deg);
            background: var(--primary-dark);
        }
        
        .settings-panel {
            position: fixed;
            top: 80px;
            right: 20px;
            background: var(--white);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            z-index: 99;
            width: 300px;
            transform: translateX(120%);
            transition: transform 0.3s ease;
        }
        
        .settings-panel.active {
            transform: translateX(0);
        }
        
        .settings-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
            display: flex;
            align-items: center;
        }
        
        .settings-title i {
            margin-right: 8px;
            color: var(--primary);
        }
        
        .settings-form .form-group {
            margin-bottom: 15px;
        }
        
        .settings-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        /* Footer */
        .app-footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            color: var(--gray);
            font-size: 12px;
        }
        
        /* Badge for Transaction Type */
        .badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
        }
        
        .badge-income {
            background-color: rgba(76, 175, 80, 0.1);
            color: var(--primary-dark);
        }
        
        .badge-expense {
            background-color: rgba(244, 67, 54, 0.1);
            color: var(--danger);
        }

        /* Tabs for Report */
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
            font-weight: 500;
            color: var(--gray);
        }
        
        .tab.active {
            border-bottom: 2px solid var(--primary);
            color: var(--primary-dark);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* Chart Styles */
        .chart-container {
            margin-top: 20px;
            padding: 15px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        /* Report Styles */
        .report-filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            align-items: flex-end;
            flex-wrap: wrap;
        }
        
        .report-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 20px;
        }
        
        .report-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        .report-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary-dark);
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 200;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 25px;
            width: 90%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--primary-dark);
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        
        .close-modal {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 24px;
            cursor: pointer;
            color: var(--gray);
            transition: all 0.3s ease;
        }
        
        .close-modal:hover {
            color: var(--danger);
        }
        
        /* Export Buttons */
        .export-btn-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        /* Summary Report */
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .report-stat {
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }
        
        .stat-title {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 5px;
        }
        
        .stat-value {
            font-size: 20px;
            font-weight: 600;
        }
        
        .stat-income {
            color: var(--primary-dark);
        }
        
        .stat-expense {
            color: var(--danger);
        }
        
        .stat-balance {
            color: var(--secondary);
        }
        
        /* Responsive Table - Scroll Horizontal */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
                margin: 5px;
                width: 95%;
            }
            
            .dashboard, .summary-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            
            .form-grid, .report-grid {
                grid-template-columns: 1fr;
            }
            
            .button-group {
                flex-direction: flex;
            }
            
            .btn {
                width: 100%;
                margin-bottom: 5px;
            }
            
            .search-filter, .report-filters {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
            
            .search-box {
                width: 100%;
            }
            
            /* Table Responsive dengan Scroll Horizontal */
            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                margin-bottom: 15px;
                border: 1px solid #ddd;
                border-radius: 8px;
            }
            
            #laporanTable, .report-table {
                min-width: 600px; /* Lebar minimum tabel */
                margin-bottom: 0;
            }
            
            #laporanTable th, 
            #laporanTable td,
            .report-table th,
            .report-table td {
                padding: 8px 10px;
                font-size: 11px;
            }
            
            .action-buttons {
                flex-wrap: nowrap;
            }
            
            .btn-icon {
                width: 28px;
                height: 28px;
                font-size: 12px;
            }
            
            .modal-content {
                width: 95%;
                padding: 15px;
            }
        }

        /* Tambahkan di bagian responsive CSS */
@media (max-width: 768px) {
    .report-table {
        font-size: 12px;
    }
    
    .report-table th, 
    .report-table td {
        padding: 6px 8px;
    }
    
    .report-stat {
        padding: 10px;
    }
    
    .stat-title {
        font-size: 12px;
    }
    
    .stat-value {
        font-size: 16px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .report-table {
        font-size: 13px;
    }
}

.filter-group {
    margin-bottom: 15px;
}

.filter-control {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.filter-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.filter-col {
    flex: 1;
}

@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
    }
    
    .filter-col {
        width: 100%;
    }
}

       
    
/* === Safe Area for Mobile Devices === */
body {
  padding-top: calc(65px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
}

.app-footer {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}


/* === Responsive Structure & Layout Upgrade === */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --font-sm: clamp(12px, 1.6vw, 14px);
  --font-md: clamp(14px, 2vw, 16px);
  --font-lg: clamp(18px, 2.4vw, 22px);
}

html {
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

/* Gunakan variable spacing di seluruh layout utama */
body {
  font-size: var(--font-md);
  line-height: 1.6;
}

.container {
  padding: var(--space-lg);
  margin: 0 auto var(--space-lg) auto;
  max-width: 800px;
}

/* Dashboard & Grid System */
.dashboard, .summary-grid, .report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

/* Title & Text Responsive */
.app-title {
  font-size: clamp(22px, 3vw, 28px);
  margin-bottom: var(--space-sm);
}

.section-title, .form-title {
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: var(--space-md);
}

/* Buttons & Inputs */
.btn {
  font-size: var(--font-sm);
  padding: 12px var(--space-md);
}

.form-control {
  font-size: var(--font-sm);
  padding: 10px var(--space-md);
}

/* Cards & Table Adjustments */
.card, .form-container, .report-card {
  padding: var(--space-md);
  border-radius: 12px;
}

table {
  font-size: var(--font-sm);
}

th, td {
  padding: var(--space-sm) var(--space-md);
}

/* Footer */
.app-footer {
  font-size: var(--font-sm);
  padding: var(--space-md) 0 calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
}


/* === Performance Fix for Settings Panel === */
.settings-panel {
  will-change: transform;
  backface-visibility: hidden;
}

.theme-aurora .settings-panel {
  /* Hapus blur untuk performa */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(10, 22, 26, 0.95) !important;
}

/* Optimasi container (kurangi blur berat) */
.theme-aurora .container {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Kurangi shadow berat agar GPU lebih ringan */
.card, .form-container, .report-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}



/* === Desktop Container Width Fix === */
.container {
  width: 100%;
  max-width: 1200px; /* sebelumnya 800px */
  margin: 0 auto var(--space-lg) auto;
  padding: var(--space-lg);
}

/* Responsif tambahan biar tetap ideal di HP */
@media (max-width: 768px) {
  .container {
    padding: var(--space-md);
    max-width: 100%;
  }
}




    .app-logo{
      display:block;
      margin: 6px auto 8px;
      width: clamp(120px, 40vw, 240px); /* min 120px, scales up, caps at 240px */
      height: auto;
    }
  


    /* === Dark Aurora Theme === */
    body.theme-aurora {
      --primary: #2EC9B8;
      --primary-light: #86F2E7;
      --primary-dark: #1C7F77;
      --secondary: #34C6BD;
      --secondary-light: #6FE5DE;
      --danger: #F26D6D;
      --warning: #FFB86B;
      --light: rgba(255,255,255,0.06);
      --dark: #E6F8F6;
      --gray: #A6C8C5;
      --white: rgba(255,255,255,0.92);
      color: var(--dark);
      background:
        radial-gradient(1200px 600px at -10% 0%, rgba(183, 230, 224, 0.25), transparent 60%),
        radial-gradient(900px 600px at 110% 10%, rgba(104, 239, 229, 0.30), transparent 55%),
        radial-gradient(800px 500px at 0% 100%, rgba(103, 215, 197, 0.22), transparent 55%),
        radial-gradient(700px 500px at 100% 100%, rgba(58, 167, 160, 0.30), transparent 55%),
        linear-gradient(180deg, #0C1A1F 0%, #0A1418 100%);
      background-attachment: fixed;
    }
    .theme-aurora .container {
      background: rgba(10, 22, 26, 0.65);
      color: #E9F9F7;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .theme-aurora .card,
    .theme-aurora .form-container,
    .theme-aurora .report-card,
    .theme-aurora .chart-container,
    .theme-aurora table,
    .theme-aurora .report-stat {
      background: rgba(16, 32, 36, 0.6);
      color: #E9F9F7;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    }
    .theme-aurora th {
      background: linear-gradient(90deg, var(--primary-dark), var(--secondary));
      color: #0A1619;
      text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    }
    .theme-aurora .btn-primary { background: var(--primary); color: #082224; }
    .theme-aurora .btn-primary:hover { background: var(--primary-dark); }
    .theme-aurora .btn-secondary { background: var(--secondary); color: #082224; }
    .theme-aurora .btn-secondary:hover { background: #1f9e97; }
    .theme-aurora .btn-danger { background: #ff7676; }
    .theme-aurora .btn-danger:hover { background: #ff5a5a; }
    .theme-aurora input.form-control,
    .theme-aurora select.form-control,
    .theme-aurora .form-control {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      color: #E9F9F7;
    }
    .theme-aurora .form-control::placeholder { color: #b7dedd; }
    .theme-aurora .tab.active { color: var(--white); border-bottom-color: var(--primary-light); }
    .theme-aurora .settings-panel { background: rgba(10, 22, 26, 0.9); border: 1px solid rgba(255,255,255,0.06); }
    .theme-aurora .app-title { color: var(--primary-light); text-shadow: 0 2px 12px rgba(104,239,229,0.3); }
    .theme-aurora .app-logo { filter: drop-shadow(0 2px 10px rgba(104, 239, 229, 0.25)); }
    .theme-aurora .btn-settings { background: var(--secondary); }
    .theme-aurora .btn-settings:hover { background: var(--primary); }
    /* Color chips preview */
    .aurora-preview { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
    .aurora-chip { width:26px; height:26px; border-radius:8px; box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4); }
    .aurora-chip.a1{ background: #B7E6E0; }
    .aurora-chip.a2{ background: #67D7C5; }
    .aurora-chip.a3{ background: #2F8A84; }
    .aurora-chip.a4{ background: #2A7270; }
    .aurora-chip.a5{ background: #68EFE5; }
    .aurora-chip.a6{ background: #3AA7A0; }
    .aurora-chip.a7{ background: #FFFFFF; border:1px solid #e7eef7; }
    .aurora-chip.a8{ background: #EEF6FF; border:1px solid #dae7ff; }
  


  /* === Aurora: Zebra fix for annual monthly summary table === */
  body.theme-aurora #annualMonthlySummaryTable tbody tr {
    background: rgba(16,32,36,0.55) !important;
    color: #E9F9F7 !important;
  }
  body.theme-aurora #annualMonthlySummaryTable tbody tr:nth-child(even) {
    background: rgba(16,32,36,0.70) !important;
  }
  body.theme-aurora #annualMonthlySummaryTable tbody tr:hover {
    background: rgba(104,239,229,0.10) !important;
  }
  body.theme-aurora #annualMonthlySummaryTable tbody td,
  body.theme-aurora #annualMonthlySummaryTable tbody td * {
    color: #E9F9F7 !important;
    opacity: 1 !important;
  }
  /* Header tone & borders for consistency */
  body.theme-aurora #annualMonthlySummaryTable thead th {
    background: linear-gradient(90deg, var(--primary-dark), var(--secondary)) !important;
    color: #0A1619 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  }



  /* === Aurora Unified Contrast & Zebra Fix (tables + modal) === */
  /* Targets: main history, monthly transactions, monthly summary, annual summary */
  body.theme-aurora #laporanTable tbody tr,
  body.theme-aurora #monthlyTransactionsTable tbody tr,
  body.theme-aurora #monthlySummaryTable tbody tr,
  body.theme-aurora #annualMonthlySummaryTable tbody tr {
    background: rgba(16,32,36,0.55) !important;
    color: #E9F9F7 !important;
  }
  body.theme-aurora #laporanTable tbody tr:nth-child(even),
  body.theme-aurora #monthlyTransactionsTable tbody tr:nth-child(even),
  body.theme-aurora #monthlySummaryTable tbody tr:nth-child(even),
  body.theme-aurora #annualMonthlySummaryTable tbody tr:nth-child(even) {
    background: rgba(16,32,36,0.70) !important;
  }
  body.theme-aurora #laporanTable tbody tr:hover,
  body.theme-aurora #monthlyTransactionsTable tbody tr:hover,
  body.theme-aurora #monthlySummaryTable tbody tr:hover,
  body.theme-aurora #annualMonthlySummaryTable tbody tr:hover {
    background: rgba(104,239,229,0.10) !important;
  }
  body.theme-aurora #laporanTable tbody td,
  body.theme-aurora #laporanTable tbody td *,
  body.theme-aurora #monthlyTransactionsTable tbody td,
  body.theme-aurora #monthlyTransactionsTable tbody td *,
  body.theme-aurora #monthlySummaryTable tbody td,
  body.theme-aurora #monthlySummaryTable tbody td *,
  body.theme-aurora #annualMonthlySummaryTable tbody td,
  body.theme-aurora #annualMonthlySummaryTable tbody td * {
    color: #E9F9F7 !important;
    opacity: 1 !important;
  }
  /* Keep semantic colors for amounts */
  body.theme-aurora #laporanTable .currency.negative,
  body.theme-aurora #monthlyTransactionsTable .currency.negative { color: #ff7676 !important; }
  body.theme-aurora #laporanTable .currency.positive,
  body.theme-aurora #monthlyTransactionsTable .currency.positive { color: #86F2E7 !important; }
  /* Headers look consistent */
  body.theme-aurora #laporanTable thead th,
  body.theme-aurora #monthlyTransactionsTable thead th,
  body.theme-aurora #monthlySummaryTable thead th,
  body.theme-aurora #annualMonthlySummaryTable thead th {
    background: linear-gradient(90deg, var(--primary-dark), var(--secondary)) !important;
    color: #0A1619 !important;
  }

  /* === Modal: force dark content and readable text */
  body.theme-aurora .modal{ 
    background: rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  body.theme-aurora .modal .modal-content{
    background: rgba(16,32,36,0.97) !important;
    color: #E9F9F7 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  }
  body.theme-aurora .modal .modal-body,
  body.theme-aurora .modal .modal-body *,
  body.theme-aurora #transactionDetail,
  body.theme-aurora #transactionDetail *{
    color: #FFFFFF !important;
    opacity: 1 !important;
  }
  body.theme-aurora .modal .badge, 
  body.theme-aurora .modal .tag{
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #E9F9F7 !important;
  }
  body.theme-aurora .modal .close-modal{ color:#E9F9F7 !important; }



  /* === Aurora: make nominal amounts & key section titles white === */
  /* Nominal amounts: values on cards & tables */
  body.theme-aurora .card .card-value,
  body.theme-aurora .currency {
    color: #FFFFFF !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  }
  /* Section titles */
  body.theme-aurora .form-title,         /* Tambah Transaksi Baru */
  body.theme-aurora .section-title {     /* Riwayat Transaksi / other section titles */
    color: #FFFFFF !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  }



  /* === Aurora: report titles & monthly stat values to white === */
  body.theme-aurora .report-title { 
    color: #FFFFFF !important; 
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  }
  body.theme-aurora .stat-value { 
    color: #FFFFFF !important; 
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  }
  /* keep expense red for clarity */
  body.theme-aurora .stat-value.stat-expense { 
    color: #ff7676 !important;
    text-shadow: none;
  }



#laporanTable th:nth-child(3),
#laporanTable th:nth-child(4),
#laporanTable th:nth-child(5),
#laporanTable td:nth-child(3),
#laporanTable td:nth-child(4),
#laporanTable td:nth-child(5){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
#laporanTable td:last-child{text-align:right}
#laporanTable td:last-child .action-buttons{display:inline-flex;gap:6px;justify-content:flex-end;align-items:center}
.currency{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}



/* Fix: garis pembatas tidak sejajar di kolom AKSI.
   Gunakan border pada <tr> (bukan pada <td>) agar 1 garis penuh per baris. */
#laporanTable{border-collapse:collapse; border-spacing:0}
#laporanTable td, #laporanTable th{border-bottom:none !important}
#laporanTable tbody tr{border-bottom:1px solid rgba(255,255,255,0.14)}
#laporanTable tbody tr:last-child{border-bottom:0}



/* Pusatkan teks di kolom 'Keterangan' (kolom ke-2) */
#laporanTable th:nth-child(2),
#laporanTable td:nth-child(2),
#monthlyTransactionsTable th:nth-child(2),
#monthlyTransactionsTable td:nth-child(2){
  text-align: center;
  vertical-align: middle;
}



/* Header tabel lebih jelas & rata tengah di semua tabel */
#laporanTable thead th,
#monthlyTransactionsTable thead th,
#monthlySummaryTable thead th,
#annualMonthlySummaryTable thead th{
  text-align: center !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.96); /* kontras tinggi */
  text-shadow: 0 1px 0 rgba(0,0,0,.35); /* sedikit glow agar tetap terbaca di gradient */
  vertical-align: middle;
}

/* Tinggi & padding header konsisten */
#laporanTable thead th,
#monthlyTransactionsTable thead th,
#monthlySummaryTable thead th,
#annualMonthlySummaryTable thead th{
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Garis pemisah bawah header sedikit lebih tegas */
#laporanTable thead tr,
#monthlyTransactionsTable thead tr,
#monthlySummaryTable thead tr,
#annualMonthlySummaryTable thead tr{
  border-bottom: 1.5px solid rgba(255,255,255,0.18);
}



/* Simpan ruang ikon agar tidak ketimpa teks */
input[type="date"]{ padding-right: 36px; }

/* MODE TERANG (default): ikon gelap */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  color: transparent !important;
  filter: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'><path d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm0 6H6v12h12V8H7zm2 2h2v2H9v-2zm0 4h2v2H9v-2zm4-4h2v2h-2v-2zm0 4h2v2h-2v-2z'/></svg>") !important;
}

/* MODE GELAP .theme-aurora: ikon putih (spesifisitas tinggi + !important) */
.theme-aurora input[type="date"]::-webkit-calendar-picker-indicator,
.theme-aurora .filters-dark input[type="date"]::-webkit-calendar-picker-indicator{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm0 6H6v12h12V8H7zm2 2h2v2H9v-2zm0 4h2v2H9v-2zm4-4h2v2h-2v-2zm0 4h2v2h-2v-2z'/></svg>") !important;
  filter: none !important;
}

.theme-aurora input[type="date"]{ color-scheme: dark; }
body:not(.theme-aurora) input[type="date"]{ color-scheme: light; }



/* Palet mengikuti tema (pakai variabel). Fallback: teal & merah. */
:root{
  --_accent-fallback:#14b8a6; /* teal */
  --_danger-fallback:#ef4444; /* red */
}

/* UPDATE -> gunakan warna aksen tema */
.btn-update, .btn-warning, .btn-orange{
  /* gunakan var(--accent) bila ada; jika tidak, fallback */
  --btn-clr: var(--accent, var(--_accent-fallback));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-clr) 92%, #ffffff 8%),
    color-mix(in srgb, var(--btn-clr) 75%, #000000 25%)
  ) !important;
  color:#fff !important;
  border:1px solid color-mix(in srgb, var(--btn-clr) 65%, #000 35%) !important;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--btn-clr) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  font-weight:700;
  border-radius:12px;
}
.btn-update:hover, .btn-warning:hover, .btn-orange:hover{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-clr) 96%, #ffffff 4%),
    color-mix(in srgb, var(--btn-clr) 82%, #000000 18%)
  ) !important;
  transform: translateY(-1px);
}
.btn-update:active, .btn-warning:active, .btn-orange:active{
  transform: translateY(0);
}

/* HAPUS SEMUA -> pakai var(--danger) agar tetap “bahaya” namun selaras */
.btn-danger, .btn-delete, .btn-red{
  --btn-clr: var(--danger, var(--_danger-fallback));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-clr) 92%, #ffffff 8%),
    color-mix(in srgb, var(--btn-clr) 75%, #000000 25%)
  ) !important;
  color:#fff !important;
  border:1px solid color-mix(in srgb, var(--btn-clr) 65%, #000 35%) !important;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--btn-clr) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  font-weight:700;
  border-radius:12px;
}
.btn-danger:hover, .btn-delete:hover, .btn-red:hover{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-clr) 96%, #ffffff 4%),
    color-mix(in srgb, var(--btn-clr) 82%, #000000 18%)
  ) !important;
  transform: translateY(-1px);
}

/* Ikon di tombol ikut putih */
.btn-update i, .btn-warning i, .btn-orange i,
.btn-danger i, .btn-delete i, .btn-red i,
.btn-update svg, .btn-warning svg, .btn-orange svg,
.btn-danger svg, .btn-delete svg, .btn-red svg{
  color:#fff !important;
  fill: currentColor;
}

/* Ring fokus ambil dari warna tombol agar konsisten */
.btn-update:focus-visible, .btn-warning:focus-visible, .btn-orange:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent, var(--_accent-fallback)) 80%, #fff 20%);
  outline-offset:2px;
}
.btn-danger:focus-visible, .btn-delete:focus-visible, .btn-red:focus-visible{
  outline:2px solid color-mix(in srgb, var(--danger, var(--_danger-fallback)) 80%, #fff 20%);
  outline-offset:2px;
}



/* === Style ikon AKSI seperti contoh (badge bulat lembut) === */
.action-buttons{ display:inline-flex; gap:10px; align-items:center; justify-content:flex-end; }

.btn-icon{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px;
  padding:0; border:none; background:transparent;
  box-shadow:none;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, opacity .12s ease;
}

/* warna dasar ikon */
.btn-icon i, .btn-icon svg{ font-size:16px; line-height:1; }

/* Edit: biru */
.btn-edit{ color:#2563eb; background-color:rgba(59,130,246,.16); }
.btn-edit:hover{ background-color:rgba(59,130,246,.24); transform:translateY(-1px); }
.btn-edit:active{ transform:translateY(0); }
.btn-edit:focus-visible{ outline:2px solid rgba(59,130,246,.45); outline-offset:2px; }

/* Delete: merah */
.btn-delete{ color:#ef4444; background-color:rgba(244,63,94,.16); }
.btn-delete:hover{ background-color:rgba(244,63,94,.24); transform:translateY(-1px); }
.btn-delete:active{ transform:translateY(0); }
.btn-delete:focus-visible{ outline:2px solid rgba(244,63,94,.45); outline-offset:2px; }

/* bayangan lembut agar badge "angkat" dari latar */
.btn-edit, .btn-delete{
  box-shadow: 0 6px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.14);
}

/* Tema gelap sedikit naikkan opacity background agar tetap terlihat */
.theme-aurora .btn-edit{ background-color:rgba(59,130,246,.22); }
.theme-aurora .btn-delete{ background-color:rgba(244,63,94,.22); }
.theme-aurora .btn-edit:hover{ background-color:rgba(59,130,246,.30); }
.theme-aurora .btn-delete:hover{ background-color:rgba(244,63,94,.30); }



/* Matikan animasi/hover halus untuk semua tombol */

/* 1) Tombol utama Update & Hapus Semua */
.btn-update, .btn-warning, .btn-orange,
.btn-danger, .btn-delete, .btn-red {
  transition: none !important;
}
.btn-update:hover, .btn-warning:hover, .btn-orange:hover{
  /* kembalikan ke gaya normal (tanpa transform/hover) */
  transform: none !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-clr, var(--accent, #14b8a6)) 92%, #ffffff 8%),
    color-mix(in srgb, var(--btn-clr, var(--accent, #14b8a6)) 75%, #000000 25%)
  ) !important;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--btn-clr, var(--accent, #14b8a6)) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-danger:hover, .btn-delete:hover, .btn-red:hover{
  transform: none !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-clr, var(--danger, #ef4444)) 92%, #ffffff 8%),
    color-mix(in srgb, var(--btn-clr, var(--danger, #ef4444)) 75%, #000000 25%)
  ) !important;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--btn-clr, var(--danger, #ef4444)) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* 2) Tombol ikon AKSI (edit/hapus) */
.btn-icon, .btn-edit, .btn-delete {
  transition: none !important;
  transform: none !important;
}
/* hover = sama seperti keadaan normal (tanpa perubahan visual) */
.btn-edit:hover{ transform:none !important; }
.btn-delete:hover{ transform:none !important; }
/* Pastikan background saat hover sama dengan default */
.btn-edit:hover{ background-color:rgba(59,130,246,.16) !important; }
.btn-delete:hover{ background-color:rgba(244,63,94,.16) !important; }
.theme-aurora .btn-edit:hover{ background-color:rgba(59,130,246,.22) !important; }
.theme-aurora .btn-delete:hover{ background-color:rgba(244,63,94,.22) !important; }



/* Ikon AKSI tegas: tanpa glow/menyala, tanpa hover effect */
.btn-icon{ box-shadow:none !important; transition:none !important; }

/* Edit: biru kuat, latar datar */
.btn-edit{
  color:#2563eb !important;
  background-image:none !important;
  background-color:rgba(37,99,235,.18) !important; /* light blue tint */
  box-shadow:none !important;
}
.theme-aurora .btn-edit{ background-color:rgba(37,99,235,.22) !important; }
.btn-edit:hover, .btn-edit:active{ background-color:rgba(37,99,235,.18) !important; transform:none !important; }
.theme-aurora .btn-edit:hover, .theme-aurora .btn-edit:active{ background-color:rgba(37,99,235,.22) !important; }

/* Delete: merah kuat, latar datar */
.btn-delete{
  color:#ef4444 !important;
  background-image:none !important;
  background-color:rgba(239,68,68,.18) !important; /* light red tint */
  box-shadow:none !important;
}
.theme-aurora .btn-delete{ background-color:rgba(239,68,68,.22) !important; }
.btn-delete:hover, .btn-delete:active{ background-color:rgba(239,68,68,.18) !important; transform:none !important; }
.theme-aurora .btn-delete:hover, .theme-aurora .btn-delete:active{ background-color:rgba(239,68,68,.22) !important; }



/* Tombol flat & tegas: tanpa gradient, tanpa glow, tanpa animasi */
.btn-update, .btn-warning, .btn-orange{
  --btn-clr: var(--accent, #14b8a6);
  background: none !important;
  background-color: var(--btn-clr) !important;
  color:#fff !important;
  border:1px solid color-mix(in srgb, var(--btn-clr) 70%, #000 30%) !important;
  box-shadow:none !important;
  transition:none !important;
  transform:none !important;
  border-radius:12px;
  font-weight:700;
}
.btn-danger, .btn-delete, .btn-red{
  --btn-clr: var(--danger, #ef4444);
  background: none !important;
  background-color: var(--btn-clr) !important;
  color:#fff !important;
  border:1px solid color-mix(in srgb, var(--btn-clr) 70%, #000 30%) !important;
  box-shadow:none !important;
  transition:none !important;
  transform:none !important;
  border-radius:12px;
  font-weight:700;
}

/* Hover/active tetap sama (tanpa efek) */
.btn-update:hover, .btn-warning:hover, .btn-orange:hover,
.btn-update:active, .btn-warning:active, .btn-orange:active{
  background-color: var(--btn-clr) !important;
  box-shadow:none !important;
  transform:none !important;
}
.btn-danger:hover, .btn-delete:hover, .btn-red:hover,
.btn-danger:active, .btn-delete:active, .btn-red:active{
  background-color: var(--btn-clr) !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Ikon di dalam tombol tetap putih & jelas */
.btn-update i, .btn-warning i, .btn-orange i,
.btn-danger i, .btn-delete i, .btn-red i,
.btn-update svg, .btn-warning svg, .btn-orange svg,
.btn-danger svg, .btn-delete svg, .btn-red svg {
  color:#fff !important; fill:currentColor;
}



/* Extra tight capsule */
.logo-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 6px;               /* <= lebih kecil lagi */
  border-radius:10px;             /* <= radius diperkecil */
  width:fit-content;margin:0 auto 4px;
}
.logo-pill > img.app-logo{display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.28))}

/* LIGHT MODE ONLY — dark glass + compact inner aurora */
body:not(.theme-aurora) .logo-pill{
  position:relative; isolation:isolate;
  background: rgba(12, 18, 28, .92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  overflow:hidden; backdrop-filter: blur(6px) saturate(150%);
}

/* Inner aurora — inset 1px dan blur kecil agar rapat */
body:not(.theme-aurora) .logo-pill::before{
  content:""; position:absolute; inset:1px; border-radius:calc(10px - 1px);
  background:
    radial-gradient(56% 50% at 28% 32%, rgba(16,185,129,.55), transparent 70%),
    radial-gradient(50% 56% at 72% 34%, rgba(59,130,246,.48), transparent 72%),
    radial-gradient(62% 56% at 50% 76%, rgba(20,184,166,.60), transparent 74%);
  filter: blur(8px);
  opacity:.95; z-index:0; pointer-events:none;
}

/* Ring gradasi tipis */
body:not(.theme-aurora) .logo-pill::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:.6px;
  background: linear-gradient(120deg,
    rgba(20,184,166,.92), rgba(59,130,246,.85) 50%, rgba(20,184,166,.92));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index:1; pointer-events:none;
}

/* DARK MODE — tetap polos */
.theme-aurora .logo-pill{ background:transparent; border:none; box-shadow:none; backdrop-filter:none; overflow:visible }
.theme-aurora .logo-pill::before, .theme-aurora .logo-pill::after{ content:none }
.theme-aurora .logo-pill > img.app-logo{ filter:none }



/* ===== Light Aurora (CSS-only, no JS) ===== */
body:not(.theme-aurora){
  --aurora-primary: #14B8A6;       /* teal */
  --aurora-primary-dark: #0F766E;  /* teal gelap */
  --aurora-secondary: #3B82F6;     /* biru */
  --aurora-mint: #5EEAD4;
  --aurora-white: #ffffff;
  --aurora-text: #0B1A1A;
  --aurora-border: rgba(13,148,136,0.12);

  color: var(--aurora-text);
  background:
    radial-gradient(1000px 520px at -10% 0%, rgba(20,184,166,.22), transparent 60%),
    radial-gradient(780px 520px at 110% 10%, rgba(59,130,246,.20), transparent 55%),
    radial-gradient(820px 540px at 0% 100%, rgba(94,234,212,.20), transparent 55%),
    radial-gradient(760px 520px at 100% 100%, rgba(20,184,166,.18), transparent 55%),
    linear-gradient(180deg, #F7FBFB 0%, #F2FAFF 100%);
  background-attachment: fixed;
}

/* Kartu & container */
body:not(.theme-aurora) .container,
body:not(.theme-aurora) .card,
body:not(.theme-aurora) .report-card,
body:not(.theme-aurora) .form-container,
body:not(.theme-aurora) .chart-container,
body:not(.theme-aurora) .report-stat{
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--aurora-border);
  box-shadow: 0 10px 28px rgba(2,62,64,0.08), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--aurora-text);
}

/* Tab & header aksen */
body:not(.theme-aurora) .nav-tabs .nav-link.active,
body:not(.theme-aurora) .nav-tabs .nav-link.active:hover{
  color:#fff;
  background: linear-gradient(90deg, var(--aurora-primary), var(--aurora-secondary));
  border-color: transparent;
}

body:not(.theme-aurora) .app-title,
body:not(.theme-aurora) .report-title{
  color: var(--aurora-primary-dark);
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

/* Tombol utama diselaraskan */
body:not(.theme-aurora) .btn-primary,
body:not(.theme-aurora) .btn-success{
  background: var(--aurora-primary);
  border-color: var(--aurora-primary);
  color:#fff;
}
body:not(.theme-aurora) .btn-primary:hover,
body:not(.theme-aurora) .btn-success:hover{
  background: var(--aurora-primary-dark);
  border-color: var(--aurora-primary-dark);
}
body:not(.theme-aurora) .btn-secondary{
  background: var(--aurora-secondary);
  border-color: var(--aurora-secondary);
  color:#fff;
}
body:not(.theme-aurora) .btn-secondary:hover{
  filter: brightness(.92);
}

/* Form */
body:not(.theme-aurora) .form-control{
  background:#fff;
  border:1px solid rgba(2,62,64,.15);
  color: var(--aurora-text);
}
body:not(.theme-aurora) .form-control::placeholder{ color:#7b9391; }

/* Tabel */
body:not(.theme-aurora) table{
  background:#fff;
  border: 1px solid var(--aurora-border);
}
body:not(.theme-aurora) thead th{
  background: linear-gradient(90deg, var(--aurora-primary), var(--aurora-secondary));
  color:#fff !important;
}
body:not(.theme-aurora) tbody tr:nth-child(even){ background:#F7FCFB; }
body:not(.theme-aurora) tbody tr:hover{ background: rgba(20,184,166,.10); }

/* Angka warna */
body:not(.theme-aurora) .currency.negative{ color:#EF4444 !important; }
body:not(.theme-aurora) .currency.positive{ color: var(--aurora-primary-dark) !important; }

/* Modal */
body:not(.theme-aurora) .modal{ background: rgba(0,0,0,.36); }
body:not(.theme-aurora) .modal .modal-content{
  background:#fff; color: var(--aurora-text);
  border:1px solid var(--aurora-border);
  box-shadow: 0 16px 48px rgba(2,62,64,.10);
}



/* ===== Overrides: Light Aurora with teal (#14B8A6) & white base, all text #0F766E ===== */
body:not(.theme-aurora){
  --aurora-primary: #14B8A6 !important;
  --aurora-primary-dark: #0F766E !important;
  --aurora-secondary: #14B8A6 !important; /* unify to teal */
  --aurora-mint: #5EEAD4 !important;
  --aurora-white: #ffffff !important;
  --aurora-text: #0F766E !important;
  --aurora-border: rgba(13,148,136,0.22) !important;

  color: #0F766E !important;
  background:
    radial-gradient(900px 520px at -10% 0%, rgba(20,184,166,.20), transparent 60%),
    radial-gradient(780px 520px at 110% 10%, rgba(20,184,166,.18), transparent 55%),
    radial-gradient(820px 540px at 0% 100%, rgba(20,184,166,.16), transparent 55%),
    radial-gradient(760px 520px at 100% 100%, rgba(20,184,166,.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  background-attachment: fixed;
}

/* Typography: force all common text to #0F766E */
body:not(.theme-aurora) h1, 
body:not(.theme-aurora) h2, 
body:not(.theme-aurora) h3, 
body:not(.theme-aurora) h4, 
body:not(.theme-aurora) h5, 
body:not(.theme-aurora) h6,
body:not(.theme-aurora) p,
body:not(.theme-aurora) span,
body:not(.theme-aurora) small,
body:not(.theme-aurora) label,
body:not(.theme-aurora) th,
body:not(.theme-aurora) td,
body:not(.theme-aurora) li,
body:not(.theme-aurora) a,
body:not(.theme-aurora) .text-muted,
body:not(.theme-aurora) .text-secondary,
body:not(.theme-aurora) .text-danger,
body:not(.theme-aurora) .text-success,
body:not(.theme-aurora) .app-title,
body:not(.theme-aurora) .report-title{
  color: #0F766E !important;
}

/* Links */
body:not(.theme-aurora) a:hover { opacity: .85; }

/* Cards / containers */
body:not(.theme-aurora) .container,
body:not(.theme-aurora) .card,
body:not(.theme-aurora) .report-card,
body:not(.theme-aurora) .form-container,
body:not(.theme-aurora) .chart-container,
body:not(.theme-aurora) .report-stat{
  background: #ffffff !important;
  border: 1px solid rgba(20,184,166,.22) !important;
  color: #0F766E !important;
  box-shadow: 0 10px 28px rgba(2,62,64,.08);
}

/* Tabs */
body:not(.theme-aurora) .nav-tabs .nav-link{
  color:#0F766E !important;
  background:#fff !important;
  border-color: rgba(20,184,166,.25) !important;
}
body:not(.theme-aurora) .nav-tabs .nav-link.active{
  border-bottom: 3px solid #14B8A6 !important;
}

/* Buttons: all white with teal border/text */
body:not(.theme-aurora) .btn,
body:not(.theme-aurora) .btn-primary,
body:not(.theme-aurora) .btn-secondary,
body:not(.theme-aurora) .btn-success,
body:not(.theme-aurora) .btn-info,
body:not(.theme-aurora) .btn-warning,
body:not(.theme-aurora) .btn-danger{
  background:#ffffff !important;
  color:#0F766E !important;
  border:1px solid rgba(20,184,166,.45) !important;
  box-shadow: none !important;
}
body:not(.theme-aurora) .btn:hover{
  background: rgba(20,184,166,.08) !important;
}

/* Forms */
body:not(.theme-aurora) .form-control{
  background:#fff !important;
  border:1px solid rgba(20,184,166,.30) !important;
  color:#0F766E !important;
}
body:not(.theme-aurora) .form-control::placeholder{ color:#5b8f8b !important; }

/* Tables */
body:not(.theme-aurora) table{ background:#fff !important; }
body:not(.theme-aurora) thead th{
  background: linear-gradient(90deg, #ffffff 0%, rgba(20,184,166,.12) 50%, #ffffff 100%) !important;
  color:#0F766E !important;
  border-bottom: 1px solid rgba(20,184,166,.35) !important;
}
body:not(.theme-aurora) tbody tr:nth-child(even){ background:#F0FDFB !important; }
body:not(.theme-aurora) tbody tr:hover{ background: rgba(20,184,166,.10) !important; }

/* Currency colors: seragam #0F766E */
body:not(.theme-aurora) .currency.negative,
body:not(.theme-aurora) .currency.positive{ color:#0F766E !important; }

/* Modal */
body:not(.theme-aurora) .modal{ background: rgba(0,0,0,.25) !important; }
body:not(.theme-aurora) .modal .modal-content{
  background:#fff !important; color:#0F766E !important;
  border:1px solid rgba(20,184,166,.22) !important;
}



/* === FINAL TWEAKS (LIGHT ONLY) === */

/* 1) Tabs active = #0F766E + underline */
body:not(.theme-aurora) .tabs .tab.active{
  color:#0F766E !important;
  border-bottom:3px solid #0F766E !important;
}
body:not(.theme-aurora) .tabs .tab{ color:rgba(15,118,110,0.60); }

/* 2) All nominal/amounts */
body:not(.theme-aurora) .currency,
body:not(.theme-aurora) .card .card-value,
body:not(.theme-aurora) .report-card .card-value,
body:not(.theme-aurora) .amount, 
body:not(.theme-aurora) .nominal, 
body:not(.theme-aurora) .money, 
body:not(.theme-aurora) .total-amount,
body:not(.theme-aurora) .stat-number,
body:not(.theme-aurora) .text-success,
body:not(.theme-aurora) .text-danger,
body:not(.theme-aurora) .text-primary{
  color:#0F766E !important;
}
/* Tables numeric columns fallback */
body:not(.theme-aurora) #laporanTable td:nth-child(3),
body:not(.theme-aurora) #laporanTable td:nth-child(4),
body:not(.theme-aurora) #laporanTable td:nth-child(5){
  color:#0F766E !important;
}

/* 3) Glossy glass for Settings panel when ACTIVE */
body:not(.theme-aurora) .settings-panel.active{
  transform: translateX(0) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.48))
              ,radial-gradient(600px 240px at -10% -20%, rgba(20,184,166,0.18), transparent 60%)
              ,radial-gradient(500px 220px at 110% -10%, rgba(20,184,166,0.14), transparent 60%) !important;
  border: 1px solid rgba(20,184,166,0.22) !important;
  box-shadow: 0 18px 40px rgba(2,62,64,0.12), inset 0 1px 0 rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}
/* Keep panel not-active as default white (no change) */

/* 4) Glossy glass for settings gear button */
body:not(.theme-aurora) .btn-settings{
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35))
              ,radial-gradient(200px 160px at 30% 0%, rgba(20,184,166,0.18), transparent 70%) !important;
  color:#0F766E !important;
  border:1px solid rgba(20,184,166,0.28) !important;
  box-shadow: 0 8px 22px rgba(2,62,64,0.18), inset 0 1px 0 rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(6px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.05) !important;
}
body:not(.theme-aurora) .btn-settings i{ color:#0F766E !important; }
body:not(.theme-aurora) .btn-settings:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(2,62,64,0.22), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}



/* === Glossy icon for settings title (LIGHT only) === */
body:not(.theme-aurora) .settings-panel .settings-title i{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; margin-right:8px;
  color:#0F766E !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.35)),
    radial-gradient(120px 80px at 30% 0%, rgba(20,184,166,0.20), transparent 70%);
  border:1px solid rgba(20,184,166,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.80), 0 4px 10px rgba(2,62,64,0.12);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}



/* === LIGHT ONLY: unify Monthly/Annual totals to #0F766E === */
body:not(.theme-aurora) .summary-grid .stat-value,
body:not(.theme-aurora) .stat-income,
body:not(.theme-aurora) .stat-expense,
body:not(.theme-aurora) .stat-balance{
  color:#0F766E !important;
}



  /* Ensure icons inherit the button text color across all states */
  .btn i, .btn svg { color: currentColor !important; fill: currentColor !important; stroke: currentColor !important; }
  /* Explicitly override common button variants that previously forced white icons */
  .btn-danger i, .btn-danger svg,
  .btn-warning i, .btn-warning svg,
  .btn-success i, .btn-success svg,
  .btn-primary i, .btn-primary svg,
  .btn-outline i, .btn-outline svg {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }



  :root { --glass-red: 239, 68, 68; } /* Tailwind red-500 approx */

  /* Make the TRASH icon itself look like red glass (gradient on glyph) */
  i.icon-glass-red {
    background: linear-gradient(180deg,
      #ffffff 0%, rgba(255,255,255,.85) 18%, rgba(255,255,255,.45) 35%,
      rgba(var(--glass-red), .98) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;      /* override currentColor rule */
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.6))
            drop-shadow(0 2px 6px rgba(var(--glass-red), .45));
  }

  /* Auto style the button that CONTAINS a red-glass icon to look lightly glassy */
  button:has(i.icon-glass-red),
  a:has(i.icon-glass-red) {
    background:
      radial-gradient(90% 100% at 30% 25%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 42%),
      linear-gradient(135deg, rgba(var(--glass-red), .10) 0%, rgba(var(--glass-red), .18) 100%);
    border: 1px solid rgba(var(--glass-red), .35);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -8px 16px rgba(0,0,0,.05),
      0 4px 12px rgba(var(--glass-red), .25);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    color: rgba(var(--glass-red), .95);
    transition: box-shadow .2s, transform .06s, background .2s;
  }
  button:has(i.icon-glass-red):hover,
  a:has(i.icon-glass-red):hover {
    background:
      radial-gradient(90% 100% at 30% 25%, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 45%),
      linear-gradient(135deg, rgba(var(--glass-red), .16) 0%, rgba(var(--glass-red), .26) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -10px 18px rgba(0,0,0,.06),
      0 6px 16px rgba(var(--glass-red), .35);
  }
  button:has(i.icon-glass-red):active,
  a:has(i.icon-glass-red):active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.12), 0 2px 8px rgba(var(--glass-red),.25);
  }

  /* If your icon buttons are circles/squircles, ensure visuals are neat */
  button:has(i.icon-glass-red), a:has(i.icon-glass-red){
    border-radius: 12px;
  }



  :root { --glass-red: 239, 68, 68; } /* ~ red-500 */

  /* 1) Pastikan ikon kembali mengikuti warna teks tombol (bukan gradasi di glyph) */
  i.icon-glass-red {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: currentColor !important;
    filter: none !important;
  }

  /* 2) Efek GLASS MERAH pada BACKGROUND tombol yang berisi ikon trash */
  button:has(i.fa-trash), button:has(i.fa-trash-alt),
  a:has(i.fa-trash), a:has(i.fa-trash-alt) {
    background:
      radial-gradient(90% 100% at 30% 25%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 42%),
      linear-gradient(135deg, rgba(var(--glass-red), .70) 0%, rgba(var(--glass-red), .90) 100%);
    border: 1px solid rgba(var(--glass-red), .85);
    color: #fff; /* ikon jadi putih berkat aturan currentColor */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -8px 16px rgba(0,0,0,.18),
      0 4px 12px rgba(var(--glass-red), .35);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    transition: transform .06s, box-shadow .2s, background .2s;
    border-radius: 12px;
  }

  button:has(i.fa-trash):hover, button:has(i.fa-trash-alt):hover,
  a:has(i.fa-trash):hover, a:has(i.fa-trash-alt):hover {
    background:
      radial-gradient(90% 100% at 30% 25%, rgba(255,255,255,.60) 0, rgba(255,255,255,0) 45%),
      linear-gradient(135deg, rgba(var(--glass-red), .78) 0%, rgba(var(--glass-red), .98) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -10px 18px rgba(0,0,0,.22),
      0 6px 16px rgba(var(--glass-red), .45);
  }

  button:has(i.fa-trash):active, button:has(i.fa-trash-alt):active,
  a:has(i.fa-trash):active, a:has(i.fa-trash-alt):active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.25), 0 2px 8px rgba(var(--glass-red),.35);
  }



  .footer-sub{
    display:block;
    margin-top:4px;
    font-size:.92rem;
    opacity:.9;
  }



/* === Fixed Headbar Glass Aurora === */
.app-headbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  background: linear-gradient(120deg, rgba(20,184,166,0.28), rgba(59,130,246,0.25));
  border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 999;
}

.menu-toggle {
  position: absolute;
  left: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #E9F9F7;
  font-size: 22px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.menu-toggle:hover {
  background: linear-gradient(120deg, #14B8A6, #3B82F6);
  color: #fff;
}

.logo-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.app-headbar .app-logo {
  height: 36px;
  filter: drop-shadow(0 0 8px rgba(104,239,229,.35));
}

/* Adjust body padding for fixed headbar */
body { padding-top: 80px; }



/* === Fix: Center Logo Perfectly in Headbar === */
.app-headbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  background: linear-gradient(120deg, rgba(20,184,166,0.28), rgba(59,130,246,0.25));
  border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 999;
}

.logo-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

.app-headbar .app-logo {
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(104,239,229,.35));
}

/* Reposition menu icon */
.menu-toggle {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}



/* === Fix: Ensure ☰ Menu Button is Clickable === */
.logo-center {
  pointer-events: none !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.menu-toggle {
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1001 !important;
  pointer-events: auto !important;
}

.app-headbar {
  z-index: 1000 !important;
}



/* === Fix: Move Main Logo to Center Headbar === */
.app-headbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  background: linear-gradient(120deg, rgba(20,184,166,0.28), rgba(59,130,246,0.25));
  border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 999;
}

.logo-center {
  pointer-events: none !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.app-headbar .app-logo {
  height: 46px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(104,239,229,.35));
}

.menu-toggle {
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1001 !important;
  pointer-events: auto !important;
}

body { padding-top: 90px !important; }



/* === Responsive Headbar Aurora === */
.app-headbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(56px, 8vh, 72px); /* responsive height */
  padding: 0 clamp(12px, 3vw, 24px);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  background: linear-gradient(120deg, rgba(20,184,166,0.28), rgba(59,130,246,0.25));
  border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 999;
  transition: all 0.3s ease;
}

.app-headbar .menu-toggle {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #E9F9F7;
  font-size: clamp(18px, 2vw, 22px);
  padding: clamp(6px, 1vw, 8px) clamp(10px, 2vw, 12px);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.app-headbar .logo-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-headbar .app-logo {
  height: clamp(32px, 6vh, 46px);
  width: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(104,239,229,.35));
  transition: height 0.3s ease;
}

.logo-spacer {
  flex: 0 0 clamp(42px, 6vw, 52px);
}

/* === Mobile adjustments === */
@media (max-width: 768px) {
  .app-headbar {
    height: 56px;
    padding: 0 14px;
  }
  .app-headbar .app-logo {
    height: 36px;
  }
  .menu-toggle {
    font-size: 18px;
    padding: 6px 10px;
  }
}

/* === Desktop larger screens === */
@media (min-width: 1025px) {
  .app-headbar {
    height: 80px;
    padding: 0 32px;
  }
  .app-headbar .app-logo {
    height: 52px;
  }
}



/* === PATCH: Remove Aurora Glow Box Behind Logo === */
.logo-pill {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.logo-pill::before,
.logo-pill::after {
  content: none !important;
}

.logo-pill > img.app-logo {
  filter: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}



/* === Responsive Title (Mobile ↔ Desktop) === */
.app-title, 
#app-title,
h1.app-title,
h1.page-title {
  font-size: clamp(20px, 4vw, 42px);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5px;
  line-height: 1.2;
  color: var(--text-color, #064e3b);
  margin: 16px 0 20px 0;
  transition: font-size 0.3s ease, letter-spacing 0.3s ease;
}

/* Desktop */
@media (min-width: 1024px) {
  .app-title, 
  #app-title {
    font-size: 40px;
    letter-spacing: 0.8px;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .app-title, 
  #app-title {
    font-size: 28px;
    letter-spacing: 0.4px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .app-title, 
  #app-title {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0.3px;
  }
}



/* === Adjust Space Between Headbar & Main Content === */
body {
  padding-top: clamp(60px, 8vh, 80px) !important; /* responsive offset for fixed headbar */
}

main, 
.app-content,
.container_filters-dark,
.app-main {
  margin-top: 0 !important;
  padding-top: clamp(10px, 1.5vh, 20px) !important;
}



/* === FIX: Button Visibility Delay (Mobile) === */
button, .btn, .app-button {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

/* Prevent overflow cutting buttons on layout change */
.form-section, .card, .transaction-form, .content-container {
  overflow: visible !important;
  height: auto !important;
}

/* Force repaint on layout resize */
@media (max-width: 768px) {
  .transaction-form, .app-content {
    transform: translateZ(0) !important;
    will-change: auto !important;
  }
}



/* === FIX: Hidden Delete Button (Mobile) === */
button.btn-danger, 
button.delete-btn,
button.hapus-semua,
#btnHapusSemua {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #ef4444 !important; /* solid red */
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
  z-index: 50 !important;
  position: relative !important;
  transform: none !important;
}

/* Ensure parent containers don't clip or overlay the button */
.form-section, .transaction-form, .card, .app-content {
  overflow: visible !important;
  background: transparent !important;
  z-index: auto !important;
}

/* Remove overlay or transparent gradient covering the button */
.form-section::after, .transaction-form::after, .card::after {
  content: none !important;
  background: none !important;
  display: none !important;
}



/* === Liquid Glass Buttons (Aurora Style) === */
.btn, .btn-primary, .btn-danger, .btn-update, .btn-export {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #E9F9F7 !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
              0 6px 20px rgba(0,0,0,0.25);
  transition: all 0.25s ease;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 12px 20px;
}

/* Hover & active effect */
.btn:hover, .btn-primary:hover, .btn-danger:hover, .btn-update:hover, .btn-export:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* === Warna Spesifik === */
.btn-primary, .btn-update {
  color: #14B8A6 !important;
  border-color: rgba(20,184,166,0.35) !important;
}
.btn-danger {
  color: #FF6B6B !important;
  border-color: rgba(255,107,107,0.35) !important;
}
.btn-export {
  color: #38BDF8 !important;
  border-color: rgba(56,189,248,0.35) !important;
}

/* === Keterangan tombol lebih jelas === */
.btn i {
  margin-right: 8px;
  font-size: 1rem;
}
.btn span {
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* === Responsif (mobile-friendly) === */
@media (max-width: 768px) {
  .btn {
    width: 100%;
    font-size: 15px;
    padding: 14px;
  }
}



/* === Unified Liquid Glass Buttons === */
button, .btn, .app-button {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #E9F9F7 !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
              0 6px 20px rgba(0,0,0,0.25);
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 12px 20px;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Hover effect for all */
button:hover, .btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* === Text & Icon === */
button i, .btn i {
  font-size: 1rem;
}
button span, .btn span {
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* === Red Danger Button (Text + Icon Only) === */
button.btn-danger, 
button.delete-btn,
button.hapus-semua,
#btnHapusSemua {
  color: #FF6B6B !important;
  border-color: rgba(255,107,107,0.35) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* === Hover for Red Danger === */
button.btn-danger:hover,
button.hapus-semua:hover {
  background: rgba(255,107,107,0.18) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,107,107,0.35);
}



/* === Settings Panel muncul dari kiri === */
.settings-panel {
  position: fixed !important;
  top: 80px !important;
  left: 20px !important; /* sebelumnya right: 20px */
  right: auto !important; /* override posisi kanan */
  background: var(--white) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  z-index: 99 !important;
  width: 300px !important;
  transform: translateX(-120%) !important; /* muncul dari kiri */
  transition: transform 0.3s ease !important;
}

.settings-panel.active {
  transform: translateX(0) !important; /* posisi normal */
}



/* === Settings Panel muncul dari kiri & adaptif ke tema === */
.settings-panel {
  position: fixed !important;
  top: 80px !important;
  left: 20px !important;
  right: auto !important;
  background: rgba(255, 255, 255, 0.7) !important; /* default light mode */
  backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  z-index: 99 !important;
  width: 300px !important;
  transform: translateX(-120%) !important;
  transition: transform 0.3s ease, background 0.3s ease !important;
}

/* Saat aktif */
.settings-panel.active {
  transform: translateX(0) !important;
}

/* === DARK MODE === */
.theme-dark .settings-panel {
  background: rgba(30, 30, 30, 0.75) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
}

/* Tombol di dalam panel tetap jelas */
.settings-panel button {
  filter: none !important;
  opacity: 1 !important;
}



/* === Settings Panel muncul dari kiri & adaptif ke tema (final) === */
.settings-panel {
  position: fixed !important;
  top: 80px !important;
  left: 20px !important;
  right: auto !important;
  background: rgba(255, 255, 255, 0.65) !important; /* light mode */
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  z-index: 99 !important;
  width: 310px !important;
  transform: translateX(-120%) !important;
  transition: transform 0.3s ease, background 0.3s ease !important;
}

.settings-panel.active {
  transform: translateX(0) !important;
}

/* === DARK MODE === */
.theme-dark .settings-panel {
  background: rgba(15, 15, 15, 0.85) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  color: #fff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

/* Isi panel tetap jelas di mode gelap */
.theme-dark .settings-panel * {
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Tombol tetap solid */
.settings-panel button {
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
}



/* === Settings Panel adaptif & fix di mode dark === */
.settings-panel {
  position: fixed !important;
  top: 80px !important;
  left: 20px !important;
  right: auto !important;
  width: 310px !important;
  border-radius: 14px !important;
  padding: 22px !important;
  z-index: 99 !important;
  transform: translateX(-120%) !important;
  transition: transform 0.3s ease, background 0.3s ease !important;
  background: rgba(255, 255, 255, 0.65) !important; /* Light mode glass */
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

.settings-panel.active {
  transform: translateX(0) !important;
}

/* === DARK MODE FIX (SOLID GLASS EFFECT) === */
.theme-dark .settings-panel {
  background: rgba(25, 25, 25, 0.9) !important; /* matte glass gelap */
  backdrop-filter: blur(6px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Pastikan semua elemen di dalamnya kontras */
.theme-dark .settings-panel * {
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Tombol tetap solid dan jelas */
.settings-panel button {
  opacity: 1 !important;
  filter: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  transition: all 0.25s ease-in-out;
}
.settings-panel button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}



/* === Settings Panel Full Sync dengan Tema === */
.settings-panel {
  position: fixed !important;
  top: 80px !important;
  left: 20px !important;
  right: auto !important;
  width: 310px !important;
  border-radius: 14px !important;
  padding: 22px !important;
  z-index: 99 !important;
  transform: translateX(-120%) !important;
  transition: transform 0.3s ease, background 0.3s ease !important;
  background: rgba(255, 255, 255, 0.6) !important; /* Light mode */
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  color: #111 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

.settings-panel.active {
  transform: translateX(0) !important;
}

/* === DARK MODE FULL SYNC === */
.theme-dark .settings-panel {
  background: rgba(18, 18, 18, 0.95) !important;
  color: #f5f5f5 !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

/* Warna teks di dalam panel */
.theme-dark .settings-panel * {
  color: #f5f5f5 !important;
  opacity: 1 !important;
}

/* Tombol tetap kontras di dark mode */
.theme-dark .settings-panel button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.theme-dark .settings-panel button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Switch dark mode tetap terlihat natural */
.theme-dark .settings-panel input[type="checkbox"],
.theme-dark .settings-panel .switch {
  accent-color: #00e0c0 !important;
}



/* === Settings Panel True Dark Aurora Glass === */
.settings-panel {
  position: fixed !important;
  top: 80px !important;
  left: 20px !important;
  width: 310px !important;
  border-radius: 16px !important;
  padding: 24px !important;
  z-index: 99 !important;
  transform: translateX(-120%) !important;
  transition: transform 0.35s ease, background 0.3s ease !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
  color: #111 !important;
}

/* Aktif (slide in dari kiri) */
.settings-panel.active {
  transform: translateX(0) !important;
}

/* === DARK MODE (True Dark Aurora Look) === */
.theme-dark .settings-panel {
  background: linear-gradient(
    135deg,
    rgba(15, 25, 30, 0.9) 0%,
    rgba(10, 15, 20, 0.85) 100%
  ) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(0, 255, 200, 0.1) !important;
  box-shadow: 0 12px 45px rgba(0, 255, 200, 0.05), 0 0 25px rgba(0, 255, 200, 0.08) !important;
  color: #e5e5e5 !important;
}

/* Semua isi panel kontras penuh */
.theme-dark .settings-panel * {
  color: #f8f8f8 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Tombol tetap elegan */
.settings-panel button {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  transition: all 0.25s ease-in-out;
}
.settings-panel button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Switch Dark Mode tetap teal */
.theme-dark .settings-panel input[type="checkbox"],
.theme-dark .settings-panel .switch {
  accent-color: #00d8b3 !important;
}



/* Force container wider on desktop (override earlier rules) */
.container {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--space-lg) !important;
  padding-right: var(--space-lg) !important;
}

/* Fix menu-toggle visual & interaction (ensure clickable) */
.menu-toggle {
  position: absolute;
  left: 20px;
  top: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #E9F9F7;
  font-size: 22px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  z-index: 1200 !important; /* ensure on top */
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
}

/* Ensure settings panel sits above header when active */
.settings-panel {
  z-index: 1210 !important;
  pointer-events: auto !important;
  will-change: transform;
  backface-visibility: hidden;
}



.theme-aurora .filters-dark :is(
  input[type="date"],
  input[type="month"],
  select
){
  color-scheme: dark;
  background-color: rgba(15,23,42,.55) !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 12px !important;
  height: 48px;
  padding: .6rem .9rem !important;
  outline: none;
}

/* Wrapper/filter box */
.theme-aurora .filters-dark :is(.form-group,.input-group,.form-control, .select, .box, .card){
  background-color: transparent !important;
}

.theme-aurora .filters-dark :is(input,select)::placeholder{ color: rgba(226,232,240,.75); }
.theme-aurora .filters-dark :is(input,select):focus{
  border-color: rgba(94,234,212,.55) !important;
  box-shadow: 0 0 0 2px rgba(94,234,212,.18);
}

/* ikon kalender putih */
.theme-aurora .filters-dark input[type="date"]::-webkit-calendar-picker-indicator,
.theme-aurora .filters-dark input[type="month"]::-webkit-calendar-picker-indicator{
  filter: invert(1) grayscale(1);
  opacity:.9;
}

/* panah dropdown putih */
.theme-aurora .filters-dark select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23E5E7EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 16px;
  padding-right: 2.2rem !important;
}

/* teks input tanggal di Android */
.theme-aurora .filters-dark input[type="date"]::-webkit-datetime-edit,
.theme-aurora .filters-dark input[type="date"]::-webkit-datetime-edit-text,
.theme-aurora .filters-dark input[type="date"]::-webkit-datetime-edit-month-field,
.theme-aurora .filters-dark input[type="date"]::-webkit-datetime-edit-day-field,
.theme-aurora .filters-dark input[type="date"]::-webkit-datetime-edit-year-field {
  color:#E5E7EB;
}

/* hindari autofill putih */
.theme-aurora .filters-dark :is(input,select):-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(15,23,42,.55) inset !important;
  -webkit-text-fill-color: #E5E7EB !important;
}



.theme-aurora .filters-dark .glossy-wrap,
.theme-aurora .filters-dark .glass-date {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* SELECT DROPDOWN GLOSSY */
.theme-aurora .filters-dark .glossy-wrap > select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 3rem !important;
  background: rgba(15,23,42,.55) !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: all .25s ease;
}

/* kapsul kaca di kanan select */
.theme-aurora .filters-dark .glossy-wrap::after {
  content: "";
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 2px 8px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.28);
  pointer-events: none;
}

/* panah putih di atas kapsul kaca */
.theme-aurora .filters-dark .glossy-wrap::before {
  content: "";
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  pointer-events: none;
}

/* hover glow */
.theme-aurora .filters-dark .glossy-wrap:hover::after,
.theme-aurora .filters-dark .glossy-wrap:focus-within::after {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 3px 12px rgba(104,239,229,.25),
    0 0 0 2px rgba(94,234,212,.18);
  border-color: rgba(255,255,255,.38);
}

/* DATE / MONTH INPUT GLOSSY */
.theme-aurora .filters-dark .glass-date input[type="date"],
.theme-aurora .filters-dark .glass-date input[type="month"] {
  width: 100%;
  padding-right: 3rem !important;
  background: rgba(15,23,42,.55) !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: all .25s ease;
}

/* kapsul kaca ikon kalender */
.theme-aurora .filters-dark .glass-date::after {
  content: "";
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 2px 8px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.28);
  pointer-events: none;
}

/* ikon kalender putih */
.theme-aurora .filters-dark .glass-date::before {
  content: "";
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M16 2v4M8 2v4M3 10h18M4 5h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  pointer-events: none;
}

/* hover glow */
.theme-aurora .filters-dark .glass-date:hover::after,
.theme-aurora .filters-dark .glass-date:focus-within::after {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 3px 12px rgba(104,239,229,.25),
    0 0 0 2px rgba(94,234,212,.18);
  border-color: rgba(255,255,255,.38);
}



/* Hapus background putih pada container filter (dari .filter-control dsb) */
.theme-aurora .filters-dark .filter-control,
.theme-aurora .filters-dark .form-group,
.theme-aurora .filters-dark .input-group,
.theme-aurora .filters-dark .form-control-wrapper {
  background: transparent !important;
  box-shadow: none !important;
}

/* Pastikan label terlihat */
.theme-aurora .filters-dark label { color: #E5E7EB !important; opacity: .9; }

/* Sinkronisasi tinggi & alignment agar kapsul glossy pas */
.theme-aurora .filters-dark .glass-date,
.theme-aurora .filters-dark .glossy-wrap { display:block; width:100%; }

.theme-aurora .filters-dark .glass-date input[type="date"],
.theme-aurora .filters-dark .glass-date input[type="month"],
.theme-aurora .filters-dark .glossy-wrap > select {
  height: 48px !important;
  line-height: 48px !important;
  padding-left: 12px !important;
  padding-right: 3rem !important;
  box-sizing: border-box;
}

/* Sesuaikan ukuran & posisi kapsul glossy */
.theme-aurora .filters-dark .glass-date::after,
.theme-aurora .filters-dark .glass-date::before,
.theme-aurora .filters-dark .glossy-wrap::after,
.theme-aurora .filters-dark .glossy-wrap::before {
  right: 10px;
  width: 32px; height: 32px;
  border-radius: 10px;
}



.theme-aurora .filters-dark select {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  background: rgba(15,23,42,.55) !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 12px !important;
  padding: .6rem .9rem !important;
}
.theme-aurora .filters-dark .glossy-wrap::before,
.theme-aurora .filters-dark .glossy-wrap::after {
  display: none !important;
}



.theme-aurora .filters-dark select,
.theme-aurora .filters-dark input[type="date"],
.theme-aurora .filters-dark input[type="month"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  background: rgba(15,23,42,.55) !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 10px !important;
  padding: .6rem .9rem !important;
  height: 48px !important;
  box-shadow: none !important;
}

/* Remove any glossy overlays */
.theme-aurora .filters-dark .glass-date::before,
.theme-aurora .filters-dark .glass-date::after,
.theme-aurora .filters-dark .glossy-wrap::before,
.theme-aurora .filters-dark .glossy-wrap::after {
  display: none !important;
}

/* Ensure wrappers are transparent and normal */
.theme-aurora .filters-dark .glass-date,
.theme-aurora .filters-dark .glossy-wrap {
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  width: 100% !important;
  position: static !important;
}



#app-settings .theme-color-options,
#app-settings .theme-color-palette,
.theme-selector .color-palette,
.theme-selector .color-options {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}



.theme-color-options,
.theme-color-palette,
.color-palette,
.color-options,
.theme-selector .color-palette,
.theme-selector .color-options {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* Switch container */
.theme-toggle{
  display:flex; align-items:center; gap:.75rem;
  padding:.25rem 0;
}
.theme-toggle .switch-label{
  color:#E5E7EB; font-weight:600; letter-spacing:.2px;
}
/* Track */
.theme-toggle .track{
  position:relative; width:56px; height:30px;
  border-radius:999px; background:rgba(148,163,184,.35);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
  transition:background .2s ease, box-shadow .2s ease;
  display:inline-block; vertical-align:middle;
}
/* Thumb */
.theme-toggle .thumb{
  position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(180deg, #ffffff, #dbeafe);
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.1);
  transition:transform .22s ease;
}
/* Native checkbox visually hidden but accessible */
.theme-toggle input[type="checkbox"]{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}
/* ON state */
.theme-toggle input:checked + .track{
  background:linear-gradient(180deg, rgba(45,212,191,.6), rgba(13,148,136,.55));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 2px rgba(94,234,212,.18);
}
.theme-toggle input:checked + .track .thumb{
  transform:translateX(26px);
  background:linear-gradient(180deg, #e6fffb, #ccfbf1);
}
/* Small helper text color for light mode */
body:not(.theme-aurora) .theme-toggle .switch-label{ color:#334155; }



/* === Final Fix: Headbar Gap Alignment (Mobile & Desktop) === */

/* Body normal, tambahkan sedikit padding untuk jarak aman di bawah headbar */
body {
  display: block !important;
  margin: 0;
  padding: 65px 0 40px 0 !important; /* 65px = tinggi headbar + sedikit napas */
  min-height: 100vh;
}

/* Container tetap center horizontal, tanpa margin atas */
.container {
  max-width: 800px;
  margin: 0 auto !important;
  padding: 25px;
}

/* Mobile tuning */
@media (max-width: 768px) {
  body {
    padding-top: 58px !important; /* sedikit lebih rapat di layar kecil */
    padding-bottom: 35px !important;
  }
  .container {
    margin: 0 auto !important;
    padding: 18px;
  }
}