/* Penyesuaian khusus per layar. Hanya yang benar-benar tidak bisa diwakili
   kosakata komponen umum. */

/* --- Masuk ------------------------------------------------------------ */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-18) var(--sp-10);
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
}
.login__sisi {
  background: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-10);
  position: relative;
  overflow: hidden;
}
/* Bilah denominasi rupiah sebagai latar, versi besar dari ikon aplikasi. */
.login__sisi::after {
  content: '';
  position: absolute;
  right: -60px; bottom: -40px;
  width: 340px; height: 340px;
  background:
    linear-gradient(var(--cat-1) 0 0) 0 60% / 26px 40% no-repeat,
    linear-gradient(var(--cat-3) 0 0) 20% 60% / 26px 55% no-repeat,
    linear-gradient(var(--cat-4) 0 0) 40% 60% / 26px 70% no-repeat,
    linear-gradient(var(--cat-2) 0 0) 60% 60% / 26px 85% no-repeat,
    linear-gradient(var(--cat-6) 0 0) 80% 60% / 26px 100% no-repeat;
  opacity: 0.24;
  transform: rotate(6deg);
}
.login__kutip { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.3; max-width: 22ch; }

@media (max-width: 899px) {
  .login { grid-template-columns: 1fr; }
  .login__sisi { display: none; }
  .login__panel { padding: var(--sp-10) var(--sp-5); }
}

/* --- Beranda ---------------------------------------------------------- */
.quick-add { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: var(--sp-3); align-items: end; }
@media (max-width: 767px) { .quick-add { grid-template-columns: 1fr; } }

/* Di layar lebar, seluruh isian berjajar dan disejajarkan pada dasarnya.
   Pesan galat karena itu dikeluarkan dari alur: kalau ikut menambah tinggi,
   satu isian yang gagal validasi akan menggeser seluruh baris ke atas tepat
   pada saat pengguna sedang membacanya. Di layar sempit susunannya satu kolom,
   jadi pesan galat mengalir normal seperti biasa. */
@media (min-width: 768px) {
  .quick-add { padding-bottom: 22px; }
  .quick-add > .field { position: relative; }
  .quick-add .field__error {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
  }
}

.sparkline { width: 100%; height: 44px; display: block; }

/* --- Slip gaji -------------------------------------------------------- */
.slip-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 1023px) { .slip-grid { grid-template-columns: 1fr; } }

.komponen-baris {
  display: grid;
  grid-template-columns: 1fr 170px auto;
  gap: var(--sp-2);
  align-items: center;
}
@media (max-width: 767px) {
  .komponen-baris { grid-template-columns: 1fr auto; }
  .komponen-baris .money-input { grid-column: 1 / -1; }
}

/* --- Anggaran --------------------------------------------------------- */
.anggaran-baris {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.anggaran-baris:last-child { border-bottom: none; }
.anggaran-baris__bar { grid-column: 1 / -1; }
@media (max-width: 767px) { .anggaran-baris { grid-template-columns: 1fr; } }

/* --- Tabungan --------------------------------------------------------- */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.goal { display: flex; gap: var(--sp-4); align-items: center; }

/* --- Laporan ---------------------------------------------------------- */
.laporan-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 1023px) { .laporan-grid { grid-template-columns: 1fr; } }

/* --- Pengaturan ------------------------------------------------------- */
.setting-baris {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.setting-baris:last-child { border-bottom: none; }
.setting-baris__teks { flex: 1; min-width: 0; }

.kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}