/* =========================
  DESIGN TOKENS & RESET
========================= */

:root {
  --ink: #172033;
  --muted: #667085;
  --line: #e4e7ec;
  --surface: #ffffff;
  --canvas: #f6f8fb;
  --navy: #102a43;
  --blue: #1769aa;
  --blue-dark: #0f4c81;
  --green: #11845b;
  --red: #c23b4a;
  --shadow: 0 14px 35px rgba(16, 42, 67, 0.08);
}

* {
  box-sizing: border-box;
}


body {

  margin: 0;

  min-width: 320px;

  font-family:
    "Trebuchet MS",
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(circle at top right, #e5f1fb 0, transparent 34%),
    var(--canvas);

  color: var(--ink);

  line-height: 1.5;

}


/* =========================
   HEADER
========================= */

.header {

  background: linear-gradient(135deg, var(--navy), var(--blue-dark));

  color: white;

  padding: 28px 20px;

  border-bottom: 4px solid #55b6d9;

}


.header-content {

  max-width: 1200px;

  margin: auto;

  display: flex;

  align-items: center;

  gap: 15px;

}


.logo {

  width: 68px;
  height: 68px;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 30px;

  background: rgba(255,255,255,0.14);

  border: 1px solid rgba(255,255,255,0.28);

  border-radius: 18px;

  box-shadow: 0 8px 20px rgba(0,0,0,0.14);

}


.logo img {

  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

}


.header h1 {

  margin: 0;

  font-size: clamp(21px, 3vw, 30px);

  letter-spacing: 0.2px;

}


.header p {

  margin: 5px 0 0;

  color: #d9edf8;

  opacity: 1;

  font-size: 14px;

}


/* =========================
   CONTAINER
========================= */

.container {

  width: 100%;

  max-width: 1200px;

  margin: auto;

  padding: 34px 15px 42px;

}


/* =========================
   CARD
========================= */

.card {

  background: var(--surface);

  border: 1px solid rgba(228, 231, 236, 0.9);

  border-radius: 14px;

  padding: clamp(20px, 3vw, 30px);

  margin-bottom: 20px;

  box-shadow: var(--shadow);

}


.card h2 {

  margin: 0;

  color: var(--navy);

  font-size: 21px;

  letter-spacing: -0.2px;

}


.card p {

  color: var(--muted);

  margin: 7px 0 22px;

}


/* =========================
   FORM
========================= */

.form-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 15px;

}


.form-group {

  display: flex;

  flex-direction: column;

  margin-bottom: 15px;

}


.form-group label {

  color: #344054;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 7px;

}


input,
select,
textarea {

  width: 100%;

  border:

    1px solid
    var(--line);

  border-radius: 9px;

  padding: 12px 13px;

  font-family: inherit;

  font-size: 15px;

  color: var(--ink);

  background: #fcfdff;

  outline: none;

  transition: 0.2s;

}


input:focus,
select:focus,
textarea:focus {

  border-color: var(--blue);

  box-shadow:
    0 0 0 3px
    rgba(23,105,170,0.13);

}


textarea {

  resize: vertical;

}


.full-width {

  width: 100%;

}


/* =========================
   BUTTON
========================= */

.btn-primary {

  width: 100%;

  border: none;

  border-radius: 9px;

  padding: 15px;

  background: var(--blue);

  color: white;

  font-family: inherit;

  font-size: 15px;

  font-weight: bold;

  cursor: pointer;

}


.btn-primary:hover {

  background: var(--blue-dark);

  transform: translateY(-1px);

}


.btn-primary:disabled {

  opacity: 0.6;

  cursor: not-allowed;

}


.btn-secondary {

  border: 1px solid var(--line);

  padding: 11px 15px;

  border-radius: 9px;

  background: #f8fafc;

  color: #344054;

  font-family: inherit;

  font-weight: 600;

  cursor: pointer;

  white-space: nowrap;

}


/* =========================
   RIWAYAT
========================= */

.riwayat-header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  padding-bottom: 4px;

}


.riwayat-controls {

  display: flex;

  gap: 10px;

}


.table-wrapper {

  width: 100%;

  overflow-x: auto;

  margin-top: 20px;

  border: 1px solid var(--line);

  border-radius: 10px;

}


table {

  width: 100%;

  border-collapse: collapse;

  min-width: 850px;

  background: var(--surface);

}


th {

  background: #f2f7fb;

  color: #475467;

  text-align: left;

  padding: 14px 13px;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}


td {

  padding: 13px;

  border-bottom:
    1px solid
    var(--line);

  font-size: 14px;

}


tbody tr {

  transition: background 0.18s ease;

}


tbody tr:hover {

  background: #f8fbfd;

}


.badge {

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: bold;

}


.badge-pemasukan {

  background: #e7f6ef;

  color: var(--green);

}


.badge-pengeluaran {

  background: #fcebed;

  color: var(--red);

}


.btn-hapus {

  border: 1px solid #f2c8ce;

  background: #fff5f6;

  color: var(--red);

  padding: 8px 10px;

  border-radius: 8px;

  cursor: pointer;

}


.empty-state {

  text-align: center;

  padding: 35px;

  color: #6b7280;

}


/* =========================
   POPUP
========================= */

.popup-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(16, 42, 67, 0.58);

  backdrop-filter: blur(4px);

  z-index: 9999;

  align-items: center;

  justify-content: center;

  padding: 20px;

}


.popup-box {

  width: 100%;

  max-width: 400px;

  background: white;

  border-radius: 14px;

  padding: 30px;

  text-align: center;

  box-shadow:
    0 20px 60px
    rgba(0,0,0,0.3);

}


.popup-content-hidden {

  display: none;

}


.spinner {

  width: 55px;

  height: 55px;

  border-radius: 50%;

  border:
    6px solid
    #e5e7eb;

  border-top-color:
    #2563eb;

  margin:
    0 auto 20px;

  animation:
    spin 1s linear infinite;

}


@keyframes spin {

  to {

    transform:
      rotate(360deg);

  }

}


.success-icon,
.error-icon,
.delete-icon {

  width: 70px;

  height: 70px;

  border-radius: 50%;

  margin:
    0 auto 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 40px;

}


.success-icon {

  background: #22c55e;

  color: white;

}


.error-icon {

  background: #ef4444;

  color: white;

}


.delete-icon {

  background: #fee2e2;

}


.popup-button {

  width: 100%;

  margin-top: 20px;

  padding: 13px;

  border: none;

  border-radius: 9px;

  background: var(--blue);

  color: white;

  cursor: pointer;

  font-size: 15px;

}


.error-button {

  background: #dc2626;

}


/* =========================
   DELETE
========================= */

.delete-buttons {

  display: flex;

  gap: 10px;

  margin-top: 25px;

}


.btn-cancel,
.btn-delete {

  flex: 1;

  border: none;

  padding: 12px;

  border-radius: 9px;

  cursor: pointer;

}


.btn-cancel {

  background: #e5e7eb;

}


.btn-delete {

  background: #dc2626;

  color: white;

}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

  .form-grid {

    grid-template-columns:
      1fr;

  }


  .riwayat-header {

    flex-direction: column;

  }


  .riwayat-controls {

    width: 100%;

    align-items: stretch;

  }


  .riwayat-controls select {

    flex: 1;

  }


  .header h1 {

    font-size: 20px;

  }


  .header {

    padding: 22px 15px;

  }


  .header-content {

    align-items: flex-start;

  }


  .logo {

    width: 56px;
    height: 56px;

    flex: 0 0 56px;

  }


  .container {

    padding-top: 22px;

  }


  .card {

    padding: 18px;

  }

}


/* =========================
   FOOTER
========================= */

.site-footer {

  padding: 0 20px 32px;

  text-align: center;

  color: var(--muted);

  font-size: 13px;

}


.site-footer p {

  margin: 0;

}


.site-footer a {

  color: #2563eb;

  text-decoration: none;

  font-weight: 600;

}


.site-footer a:hover,
.site-footer a:focus-visible {

  text-decoration: underline;

}