/* style.css */

body { 
    font-family: 'Inter', sans-serif; 
}

/* Utility kecil berbasis CSS variable */
.uk-brand { color: var(--uk-primary); }
.uk-btn-primary {
    background: var(--uk-primary); 
    color: #fff;
}
.uk-btn-primary:hover 
.uk-btn-outline{
    border:1px solid var(--uk-primary); color: var(--uk-primary); background:#fff;
    padding:.5rem .9rem; border-radius:.5rem; font-weight:600;
}

/* KELAS BARU UNTUK TOMBOL SEMANTIK */
.uk-btn-income{ background: var(--uk-income-bg); color: var(--uk-income-contrast); }
.uk-btn-income:hover{ filter: brightness(90%); }
.uk-btn-expense{ background: var(--uk-expense-bg); color: var(--uk-expense-contrast); }
.uk-btn-expense:hover{ filter: brightness(90%); }

/* KELAS BARU UNTUK LATAR BELAKANG SEMANTIK (UNTUK FAB) */
.uk-bg-income  { background: var(--uk-income-bg);  color: var(--uk-income-contrast); }
.uk-bg-expense { background: var(--uk-expense-bg); color: var(--uk-expense-contrast); }



.uk-link {
    color: #374151; 
    border-radius: .5rem; 
    padding: .5rem 1rem;
    transition: all .2s ease;
}
.uk-link:hover { color: var(--uk-primary); background: var(--uk-soft); }
.uk-link.active {
    color: var(--uk-primary); 
    background: var(--uk-soft); 
    font-weight: 600;
}

.uk-badge {
    background: var(--uk-soft); 
    color: var(--uk-text-strong);
    border: 1px solid var(--uk-ring); 
    padding: .1rem .5rem; 
    border-radius: .375rem;
    font-size: .75rem; 
    font-weight: 600;
}

.nav-mask {
    backdrop-filter: blur(6px);
}

/* ==== Semantic table header tokens ==== */
/* Mapping semantik */
:root {
    --uk-dues-bg: var(--uk-primary);
    --uk-dues-contrast: #fff;

    --uk-income-bg: #16a34a;  /* green-600 */
    --uk-income-contrast: #fff;

    --uk-expense-bg: #dc2626; /* red-600 */
    --uk-expense-contrast: #fff;

    --uk-neutral-bg: #374151; /* gray-700 */
    --uk-neutral-contrast: #fff;

    /* Badge soft */
    --uk-success-soft: #dcfce7; /* green-100 */
    --uk-success-fg:   #166534; /* green-800 */
    --uk-warn-soft:    #fef3c7; /* amber-100 */
    --uk-warn-fg:      #92400e; /* amber-800 */
    --uk-danger-soft:  #fee2e2; /* red-100 */
    --uk-danger-fg:    #991b1b; /* red-800 */
}

/* Helper untuk tabel */
.uk-card--table { border-radius:.75rem; overflow:hidden; }
.uk-thead--dues    { background: var(--uk-dues-bg);    color: var(--uk-dues-contrast); }
.uk-thead--income  { background: var(--uk-income-bg);  color: var(--uk-income-contrast); }
.uk-thead--expense { background: var(--uk-expense-bg); color: var(--uk-expense-contrast); }
.uk-thead--neutral { background: var(--uk-neutral-bg); color: var(--uk-neutral-contrast); }

/* Badge status */
.uk-badge-success { background: var(--uk-success-soft); color: var(--uk-success-fg); padding:.125rem .5rem; border-radius:9999px; font-weight:600; font-size:.75rem;}
.uk-badge-warn { background: var(--uk-warn-soft); color: var(--uk-warn-fg); padding:.125rem .5rem; border-radius:9999px; font-weight:600; font-size:.75rem;}
.uk-badge-danger { background: var(--uk-danger-soft); color: var(--uk-danger-fg); padding:.125rem .5rem; border-radius:9999px; font-weight:600; font-size:.75rem;}

        /* Modal */
        .modal {
            display: none;
            position: fixed; z-index: 1000; inset: 0;
            background: rgba(0,0,0,.5);
            justify-content: center; align-items: center;
            padding: 1rem;
        }
        .modal-content {
            background: #fff; width: 100%; max-width: 560px;
            border-radius: .75rem; padding: 1.25rem 1.25rem 1rem;
            box-shadow: 0 10px 25px rgba(0,0,0,.08);
            border-top: 6px solid var(--uk-primary);
        }
        .close-button{
            color:#9CA3AF; font-size: 1.75rem; line-height: 1; font-weight: 700;
        }
        .close-button:hover{ color:#111827; }
        /* Helper: tombol utama tema */
        .uk-btn-primary{
            background: var(--uk-primary);
            color:#fff; padding:.5rem .9rem; border-radius:.5rem;
            font-weight:600; display:inline-flex; align-items:center; gap:.5rem;
        }
        .uk-btn-primary:hover{ background: var(--uk-primary-hover); }
        .uk-btn-outline{
            border:1px solid var(--uk-primary);
            color: var(--uk-primary); background:#fff;
            padding:.5rem .9rem; border-radius:.5rem; font-weight:600;
        }
        .uk-input{
            width:100%; border:1px solid #D1D5DB; border-radius:.5rem; padding:.5rem .75rem;
            outline:none;
        }
        .uk-input:focus{ box-shadow: 0 0 0 2px var(--uk-ring); border-color: var(--uk-primary); }
        
        
        /* ====== Kategori (re-lokasi dari <style> inline) ====== */

/* kartu umum */
.uk-card {
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.1);
}

/* tombol utama mengikuti tema */
.uk-btn-primary {
  background: var(--uk-primary);
  color: #fff;
}
.uk-btn-primary:hover { background: var(--uk-primary-hover); }

/* field & judul (tanpa @apply) */
.uk-field {
  width: 100%;
  border: 1px solid #e5e7eb;        /* tailwind: border-gray-200 */
  border-radius: .375rem;            /* tailwind: rounded-md */
  padding: .5rem;                    /* tailwind: p-2 */
}
.uk-section-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; color:#1f2937; }
.uk-subtitle      { font-size: 1.25rem;  line-height: 1.75rem; font-weight: 600; color:#1f2937; }
.uk-empty         { padding: 1rem; text-align:center; color:#6b7280; }

/* tabel */
.uk-table th, .uk-table td { padding: .75rem 1.5rem; font-size: .875rem; }
.uk-thead { font-weight: 600; }

.uk-thead--income  { background: var(--uk-income-bg);  color: var(--uk-income-contrast); }
.uk-thead--expense { background: var(--uk-expense-bg); color: var(--uk-expense-contrast); }

/* chip status */
.uk-chip {
  display:inline-flex; align-items:center;
  padding:.125rem .5rem; border-radius:9999px;
  font-size:.75rem; font-weight:600;
}
.uk-chip--on  { background: var(--uk-success-soft); color: var(--uk-success-fg); }
.uk-chip--off { background:#f3f4f6; color:#4b5563; } /* gray-100 / gray-600 */

          /* Struktur: <div class="relative toggle"><input.peer> <div.track> <div.dot> */
/* Nav pills: konsisten mobile & desktop */
  .no-scrollbar::-webkit-scrollbar { display:none; }
  .no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

  /* Pills: ikon-only di <sm, ikon+label di ≥sm */
  .tab-button{
    display:flex; align-items:center; gap:.5rem;
    white-space:nowrap; border-radius:9999px;
    padding:.5rem .875rem; font-weight:600; font-size:.875rem;
    color:#374151; background:#F3F4F6; transition:background-color .2s ease, color .2s ease;
    scroll-snap-align:start;
  }
  .tab-button .label{ display:none; }
  @media (min-width:640px){ .tab-button .label{ display:inline; } }
  .tab-button:hover{ background:#E5E7EB; }
  .tab-button.active{ background: var(--uk-soft); color: var(--uk-primary); }

  /* Toggle */
  .toggle .track { transition: background-color .2s ease; }
  .toggle .dot   { transition: transform .2s ease; }
  .toggle .peer:checked ~ .track { background: var(--uk-primary); }
  @media (min-width:768px){ .toggle .peer:checked ~ .dot { transform: translateX(1.5rem); } }
  @media (max-width:767.98px){ .toggle .peer:checked ~ .dot { transform: translateX(1.75rem); } }

  /* Tema demo */
  .theme-btn{ background:var(--uk-primary); color:#fff; }
  .theme-btn:hover{ background:var(--uk-primary-hover); }
  .theme-ring{ box-shadow: 0 0 0 2px var(--uk-ring) inset; }
  .theme-link{ color:var(--uk-primary); }
  .theme-link:hover{ text-decoration:underline; }
  .theme-soft{ background:var(--uk-soft); }