/* Tampilan Formulir Pendaftaran Program Beasiswa Tunas Kelapa 2026.
   Palet warna & tipografi mengikuti brand guide:
     Primary #0E4775, Dark #082F4E, Secondary #17649C,
     Background #F3F8FC, White #FFFFFF, font Helvetica.
   Latar wave.svg mengikuti pola halaman formulir bergaya Microsoft Forms:
   kanvas terang di atas, ombak gelap di bawah, kartu putih melayang di
   tengah, dengan strip footer (slot logo, ditambahkan belakangan) di
   bagian bawah kartu. */

:root {
  --color-primary: #0e4775;
  --color-dark: #082f4e;
  --color-secondary: #17649c;
  --color-bg: #f3f8fc;
  --color-white: #ffffff;
  --font-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Cloudscape membaca variabel ini untuk font seluruh komponennya
     (lihat --font-family-base-c9u5cr di internal/generated/styles/tokens.js). */
  --font-family-base-c9u5cr: var(--font-base);

  /* Pola latar mengikuti teknik Microsoft Forms: satu wave-pattern svg
     (cover, rata atas) ditumpuk di atas gradasi dua-stop ber-alpha warna
     Primary, dengan warna dasar Background sebagai lapisan akhir. */
  --waves-background:
    url('/wave.svg') center top / cover no-repeat,
    linear-gradient(180deg, rgba(14, 71, 117, 0.18) 0%, rgba(8, 47, 78, 0.92) 100%),
    var(--color-bg);
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-base);
}

.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  background: var(--waves-background);
  background-attachment: fixed;
  padding: 56px 16px 72px;
  box-sizing: border-box;
  font-family: var(--font-base);
}

/* Header kartu (src/components/CardHeader.tsx): logo resmi, tampil sebagai
   band di bagian atas kartu (mis. .page__card, .auth-card) - bukan elemen
   terpisah di atas kartu. Logo di pojok kiri, avatar profil (bila ada,
   lihat .profile-menu) di pojok kanan band yang sama. */
.page__card-header {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid rgba(14, 71, 117, 0.1);
  background: var(--color-bg);
}

.page__card-header-logo {
  height: 120px;
  width: auto;
  object-fit: contain;
}

.page__card {
  width: 100%;
  max-width: 980px;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--color-white);
  box-shadow:
    0 24px 60px rgba(14, 71, 117, 0.28),
    0 2px 8px rgba(14, 71, 117, 0.12);

  /* Cloudscape Container membulatkan keempat sudutnya sendiri (16px default).
     Sudut bawahnya jadi terlihat sebagai "takik" putih di batas dengan
     .page__card-footer yang warnanya beda - dimatikan di sini karena sudut
     atasnya sama-sama putih dengan .page__card (tidak terlihat bedanya). */
  --border-radius-container-33hhdh: 0;
}

/* Strip footer di bagian bawah kartu: slot logo organisasi ditambahkan
   belakangan (placeholder di bawah ini), meniru tata letak footer halaman
   formulir bergaya Microsoft Forms. */
.page__card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 32px 22px;
  background: var(--color-bg);
  border-top: 1px solid rgba(14, 71, 117, 0.1);
}

.page__card-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
}

.page__card-footer-logo {
  height: 4rem;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.page__card-footer p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #5b6b7f;
}

.page__card-footer-links {
  display: flex;
  gap: 16px;
}

.page__card-footer-links a {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
}

.page__card-footer-links a:hover {
  text-decoration: underline;
}

/* Gerbang verifikasi email + OTP (src/auth/EmailOtpGate.tsx). Kartu kaca
   (glassmorphism) di atas backdrop gradasi/wave yang sama dengan Wizard.
   Belum ada profileMenu di layar ini (belum login) - logo dirata-tengah,
   beda dari .page__card-header lain yang rata kiri agar sejajar avatar. */
.auth-card .page__card-header {
  justify-content: center;
}

.auth-card {
  width: 100%;
  max-width: 540px;
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(0deg, rgba(3, 120, 124, 0.04), rgba(3, 120, 124, 0.04)),rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 24px 60px rgba(14, 71, 117, 0.28),
    0 2px 8px rgba(14, 71, 117, 0.12);
}

/* Konten auth-card di luar header: padding dipindah ke sini karena
   .page__card-header (band identitas organisasi) kini butuh lebar penuh
   kartu, sama seperti pola .page__card. */
.auth-card__body {
  padding: 28px 32px 32px;
}

.auth-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.auth-card__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
}

.auth-card__subtitle {
  margin: 0 0 24px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #57657a;
}

.auth-field {
  display: block;
  margin-bottom: 20px;
}

.auth-field__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #33455e;
  margin-bottom: 6px;
}

.auth-field__control {
  position: relative;
}

.auth-field__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #8a97ab;
  pointer-events: none;
}

.auth-field__control input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 40px;
  border-radius: 10px;
  border: 1px solid #cbd5e4;
  font-size: 0.95rem;
  font-family: var(--font-base);
  background: #ffffff;
}

.auth-field__control input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14, 71, 117, 0.15);
}

.auth-field__otp-input {
  letter-spacing: 0.5em;
  font-variant-numeric: tabular-nums;
}

.auth-button {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-base);
  cursor: pointer;
}

.auth-button:disabled {
  background: #9db4dd;
  cursor: not-allowed;
}

.auth-resend {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-base);
  cursor: pointer;
  text-align: center;
}

.auth-resend:disabled {
  color: #9aa7bb;
  cursor: not-allowed;
}

.auth-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(14, 71, 117, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--color-dark);
}

.auth-chip__change {
  border: none;
  background: none;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.85rem;
  font-family: var(--font-base);
  cursor: pointer;
  padding: 0;
}

.auth-banner {
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.auth-banner--error {
  background: #fdf1f2;
  color: #9f1c2e;
  border: 1px solid #f3c6cc;
}

.auth-banner--success {
  background: #edf9f2;
  color: #146c43;
  border: 1px solid #bfe6cf;
}

/* Input tanggal DD/MM/YYYY dengan popup kalender (src/components/
   DateInputWithCalendar.tsx). Tombol kalender dipasang lewat suffix Input
   Cloudscape; popup adalah panel lepas diposisikan relatif terhadap wrapper. */

.date-input {
  position: relative;
}

.date-input__calendar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: #66738a;
  cursor: pointer;
}

.date-input__calendar-button:hover {
  color: var(--color-primary);
}

.date-input__calendar-button svg {
  width: 18px;
  height: 18px;
}

.date-input__popup {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  background: #ffffff;
  border: 1px solid #d5dde8;
  border-radius: 12px;
  box-shadow:
    0 12px 28px rgba(14, 71, 117, 0.18),
    0 2px 8px rgba(14, 71, 117, 0.1);
  padding: 8px;
}

/* Layar sela di .page__card: sedang memeriksa status pengajuan, atau gagal
   memeriksanya (src/App.tsx). */
.page__card-loading {
  padding: 48px 32px;
  text-align: center;
  color: #57657a;
  font-size: 0.95rem;
}

/* Layar "sudah mengajukan" (src/applications/ApplicationStatusNotice.tsx),
   menggantikan Wizard ketika status pengajuan bukan Ditolak. */
.status-notice {
  padding: 40px 32px 48px;
  text-align: center;
}

.status-notice__badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.status-notice__badge--baru,
.status-badge--baru {
  background: rgba(23, 100, 156, 0.12);
  color: var(--color-secondary);
}

.status-notice__badge--ditangguhkan,
.status-badge--ditangguhkan {
  background: #fff3d9;
  color: #8a5a00;
}

.status-notice__badge--diterima,
.status-badge--diterima {
  background: #e1f5e8;
  color: #146c43;
}

.status-notice__badge--ditolak,
.status-badge--ditolak {
  background: #fdeced;
  color: #9f1c2e;
}

.status-notice__title {
  margin: 0 0 16px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-dark);
}

.status-notice__text {
  max-width: 560px;
  margin: 0 auto 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5872;
}

.status-notice__actions {
  margin-top: 20px;
}

/* Badge status yang sama, ukuran ringkas untuk dipakai di dalam tabel
   dasbor admin (src/admin/AdminDashboard.tsx). */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Dasbor admin (src/admin/). Kartu admin lebih lebar dari kartu pendaftar
   (.page__card, 980px) karena harus menampung tabel dengan banyak kolom. */
.admin-page__card {
  max-width: 1080px;
}

/* Tabel admin (src/admin/DataTable.tsx, membungkus DataTables/
   datatables.net-dt) - kolom "Aksi" dirender sebagai HTML mentah (bukan
   JSX, lihat catatan di DataTable.tsx), jadi tombol/select-nya diberi kelas
   polos di sini, bukan lewat komponen Cloudscape seperti tabel lain di
   halaman ini. */
.dt-action-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(14, 71, 117, 0.25);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dt-action-button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.dt-action-button:hover {
  background: var(--color-dark);
  box-shadow: 0 4px 12px rgba(14, 71, 117, 0.35);
  transform: translateY(-1px);
}

.dt-action-button--danger {
  background: #c23a4b;
  box-shadow: 0 2px 6px rgba(194, 58, 75, 0.25);
}

.dt-action-button--danger:hover {
  background: #9f1c2e;
  box-shadow: 0 4px 12px rgba(159, 28, 46, 0.35);
}

.dt-action-button:disabled {
  color: #ffffff;
  background: #cbd5e4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.dt-action-note {
  font-size: 0.75rem;
  color: #8a97ab;
  font-style: italic;
}

/* Tema DataTables agar konsisten dengan palet halaman admin - variabel di
   bawah ini dibaca oleh CSS bawaan datatables.net-dt (lihat node_modules
   datatables.net-dt/css/dataTables.dataTables.css), di-override di sini
   agar hanya berlaku pada tabel admin, bukan seluruh halaman. */
.admin-datatable {
  --dt-input_border: 1px solid #cbd5e4;
  --dt-input_border-radius: 8px;
  --dt-input_padding: 8px 12px;
  --dt-input_background: #ffffff;
  --dt-input_color: #1a2233;
  --dt-header_border: 1px solid rgba(14, 71, 117, 0.15);
  --dt-header_padding: 10px 12px;
  --dt-body_border: 1px solid rgba(14, 71, 117, 0.08);
  --dt-body_padding: 10px 12px;
  --dt-paging-button_border-radius: 6px;
  --dt-paging-button_color: var(--color-primary);
  --dt-paging-button_background-current: var(--color-primary);
  --dt-paging-button_border-current: 1px solid var(--color-primary);
  --dt-paging-button_color-current: #ffffff;
  --dt-paging-button_background-current-hover: var(--color-dark);
  --dt-paging-button_border-current-hover: 1px solid var(--color-dark);
  --dt-paging-button_color-current-hover: #ffffff;
  --dt-paging-button_background-hover: rgba(14, 71, 117, 0.08);
  font-family: var(--font-base);
  font-size: 0.85rem;
  color: #1a2233;
}

.admin-datatable table.dataTable {
  margin-top: 8px !important;
}

.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-toolbar__email {
  font-size: 0.85rem;
  color: #5b6b7f;
}

.admin-empty {
  padding: 32px;
  text-align: center;
  color: #7b8698;
}

.admin-denied {
  padding: 48px 32px;
  text-align: center;
}

.admin-denied__title {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-dark);
}

.admin-denied__text {
  max-width: 480px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5872;
}

/* Tampilan "formulir terisi" (src/applications/FilledFormView.tsx): data
   pengajuan dikelompokkan per bagian dengan header bar berwarna dan field
   bergaya kotak isian, dipakai bersama oleh modal "Pengajuan Saya" (App.tsx),
   "Lihat Data Anda" (SubmissionThankYou.tsx), dan "Lihat detail" dasbor
   admin (AdminDashboard.tsx). */
.filled-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filled-form__section {
  border: 1px solid #d5dde8;
  border-radius: 10px;
  overflow: hidden;
}

.filled-form__section-header {
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 16px;
}

.filled-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 16px;
  background: var(--color-bg);
}

.filled-form__field {
  min-width: 0;
}

.filled-form__field-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7a90;
  margin-bottom: 4px;
}

.filled-form__field-value {
  display: block;
  box-sizing: border-box;
  min-height: 20px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e4;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #1a2233;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Field berkas unggahan (UploadedFile) di FilledFormView.tsx - dirender
   sebagai tombol "buka" (bukan teks statis) bila pemanggil menyertakan
   applicationId+token (mis. dasbor admin), memicu fetchApplicationFile lalu
   membuka hasilnya di tab baru. */
.filled-form__field-value--file {
  padding: 0;
  background: transparent;
  border: none;
}

.filled-form__file-link {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  font-family: var(--font-base);
  font-size: 0.9rem;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  word-break: break-word;
}

.filled-form__file-link:hover {
  background: rgba(14, 71, 117, 0.08);
}

.filled-form__file-link:disabled {
  color: #9aa7bb;
  border-color: #cbd5e4;
  cursor: not-allowed;
}

.filled-form__file-error {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #9f1c2e;
}

/* Avatar inisial + menu akun (src/components/ProfileMenu.tsx), tampil di
   pojok kanan .page__card-header (lihat CardHeader.tsx), sejajar dengan
   logo di pojok kiri band yang sama - bukan lagi mengambang sendiri di
   sudut halaman. */
.profile-menu {
  position: relative;
  flex-shrink: 0;
  z-index: 30;
}

.profile-menu__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 20px rgba(14, 71, 117, 0.35),
    0 2px 6px rgba(14, 71, 117, 0.2);
}

.profile-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #d5dde8;
  border-radius: 10px;
  box-shadow:
    0 12px 28px rgba(14, 71, 117, 0.18),
    0 2px 8px rgba(14, 71, 117, 0.1);
  padding: 6px;
}

.profile-menu__email {
  padding: 8px 12px 6px;
  font-size: 0.75rem;
  color: #8a97ab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #eef1f5;
  margin-bottom: 4px;
}

.profile-menu__item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  font-family: var(--font-base);
  font-size: 0.9rem;
  color: #1a2233;
  cursor: pointer;
}

.profile-menu__item:hover {
  background: rgba(14, 71, 117, 0.08);
}

.profile-menu__item--danger {
  color: #9f1c2e;
}

.profile-menu__item--danger:hover {
  background: #fdeced;
}

/* Footer modal "Lihat detail" dasbor admin (AdminDashboard.tsx): tombol
   Cetak di kiri, tombol ubah status di kanan (Box float="right"). */
.admin-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Salinan khusus cetak modal "Lihat detail" (src/admin/AdminDashboard.tsx) -
   di-portal langsung ke document.body (BUKAN dirender di dalam Modal),
   sehingga bebas dari transform penengah dialog Cloudscape yang membuat
   trik "posisikan absolut memenuhi halaman" di bawah gagal bila konten
   tetap bersarang di dalamnya. Disembunyikan di layar; hanya tampil saat
   window.print() (lihat @media print di bawah). */
.print-sheet {
  display: none;
}

.print-sheet__print-header {
  display: none;
}

/* Cetak modal "Lihat detail": sembunyikan seluruh halaman kecuali isi
   .print-sheet (trik visibility), lalu posisikan absolut relatif ke
   viewport (containing block-nya document.body/html biasa - bukan lagi
   ancestor bertransform) agar mengalir memenuhi halaman kertas. `!important`
   dipakai karena Cloudscape memiliki aturan @media print sendiri pada
   beberapa kelas internalnya yang bisa menimpa aturan visibility generik
   di sini bila tidak dipaksa menang. */
@media print {
  body * {
    visibility: hidden !important;
  }

  .print-sheet,
  .print-sheet * {
    visibility: visible !important;
  }

  .print-sheet {
    display: block;
    position: absolute;
    inset: 0;
    padding: 24px;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-sheet__print-header {
    display: block;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--color-primary);
  }

  .print-sheet__logo {
    height: 64px;
    width: auto;
    object-fit: contain;
    margin-bottom: 12px;
  }

  .print-sheet__title {
    margin: 0 0 10px;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-dark);
  }

  .print-sheet__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    font-size: 0.85rem;
    color: #33455e;
  }

  .filled-form__section {
    break-inside: avoid;
  }

  .filled-form__file-link {
    border-style: dashed;
  }
}