@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* =====================================================================
   aa-theme.css — ATS base theme
   Palette and typefaces are fixed by ARSITEKTUR-ATS.md §11.
   ===================================================================== */

:root {
  --aa-teal-dark: #0F3D3E;
  --aa-teal:      #1C6E6A;
  --aa-gold:      #C9A24B;
  --aa-cream:     #FAF6EC;

  --aa-teal-soft: #E7EFEE;
  --aa-gold-soft: #F5EBD3;
  --aa-ink:       #16302F;
  --aa-ink-soft:  #5B706F;
  --aa-line:      #DDE5E3;
  --aa-white:     #FFFFFF;

  --aa-danger:     #B3261E;
  --aa-danger-bg:  #FBEAE8;
  --aa-success:    #16653C;
  --aa-success-bg: #E6F4EC;
  --aa-warning:    #8A6100;
  --aa-warning-bg: #FBF1DA;

  --aa-serif: 'Fraunces', Georgia, serif;
  --aa-sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --aa-radius:    10px;
  --aa-radius-sm: 6px;
  --aa-shadow:    0 1px 2px rgba(15, 61, 62, .06), 0 8px 24px rgba(15, 61, 62, .06);
  --aa-sidebar-w: 248px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.aa-body {
  margin: 0;
  font-family: var(--aa-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--aa-ink);
  background: var(--aa-cream);
}

a { color: var(--aa-teal); }

:focus-visible {
  outline: 2px solid var(--aa-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- */
/* Shell: sidebar + content                                          */
/* ---------------------------------------------------------------- */

.aa-shell { display: flex; min-height: 100vh; }

.aa-sidebar {
  width: var(--aa-sidebar-w);
  flex: 0 0 var(--aa-sidebar-w);
  background: var(--aa-teal-dark);
  color: #D9E6E4;
  display: flex;
  flex-direction: column;
  padding: 22px 0 16px;
}

.aa-sidebar__merek {
  padding: 0 22px 22px;
  font-family: var(--aa-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--aa-white);
}
.aa-sidebar__merek span { color: var(--aa-gold); }

.aa-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }

.aa-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--aa-radius-sm);
  color: #C7DAD8;
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.aa-nav__item:hover { background: rgba(255, 255, 255, .06); color: var(--aa-white); }

.aa-nav__item--aktif {
  background: rgba(255, 255, 255, .10);
  color: var(--aa-white);
  border-left-color: var(--aa-gold);
}

.aa-nav__item--nanti { color: #7C9695; cursor: default; }
.aa-nav__item--nanti:hover { background: none; color: #7C9695; }

.aa-nav__tanda {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7C9695;
}

.aa-sidebar__kaki {
  margin-top: auto;
  padding: 16px 22px 0;
  font-size: 12px;
  color: #7C9695;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.aa-utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- */
/* Top bar                                                           */
/* ---------------------------------------------------------------- */

.aa-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  background: var(--aa-white);
  border-bottom: 1px solid var(--aa-line);
}

.aa-topbar__judul {
  font-family: var(--aa-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
}

.aa-topbar__kanan { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.aa-klien { display: flex; align-items: center; gap: 8px; }
.aa-klien__label { font-size: 12px; color: var(--aa-ink-soft); }

.aa-pengguna { text-align: right; line-height: 1.3; flex: none; white-space: nowrap; }
.aa-pengguna__nama { font-weight: 600; font-size: 14px; }
.aa-pengguna__peran { font-size: 12px; color: var(--aa-ink-soft); }

.aa-isi { padding: 26px 28px 60px; max-width: 1180px; }

/* ---------------------------------------------------------------- */
/* Typography                                                        */
/* ---------------------------------------------------------------- */

.aa-h1, .aa-h2, .aa-h3 { font-family: var(--aa-serif); font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }
.aa-h1 { font-size: 26px; }
.aa-h2 { font-size: 20px; }
.aa-h3 { font-size: 16px; }

.aa-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--aa-teal);
  margin-bottom: 6px;
}

.aa-teks-lembut { color: var(--aa-ink-soft); }
.aa-teks-kecil  { font-size: 13px; }

/* ---------------------------------------------------------------- */
/* Cards and grids                                                   */
/* ---------------------------------------------------------------- */

.aa-kartu {
  background: var(--aa-white);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  padding: 20px;
  box-shadow: var(--aa-shadow);
}
.aa-kartu + .aa-kartu { margin-top: 18px; }

.aa-kartu__kepala {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--aa-line);
}
.aa-kartu__kepala .aa-h2, .aa-kartu__kepala .aa-h3 { margin: 0; }

.aa-grid { display: grid; gap: 16px; }
.aa-grid--3 { grid-template-columns: repeat(3, 1fr); }
.aa-grid--4 { grid-template-columns: repeat(4, 1fr); }

.aa-statistik { background: var(--aa-white); border: 1px solid var(--aa-line); border-radius: var(--aa-radius); padding: 16px 18px; }
.aa-statistik__angka { font-family: var(--aa-serif); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--aa-teal-dark); }
.aa-statistik__label { font-size: 13px; color: var(--aa-ink-soft); margin-top: 4px; }

/* ---------------------------------------------------------------- */
/* Buttons                                                           */
/* ---------------------------------------------------------------- */

.aa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--aa-radius-sm);
  font-family: var(--aa-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.aa-btn--utama   { background: var(--aa-teal-dark); color: var(--aa-white); }
.aa-btn--utama:hover { background: #0B2F30; }
.aa-btn--kedua   { background: var(--aa-white); color: var(--aa-teal-dark); border-color: var(--aa-line); }
.aa-btn--kedua:hover { border-color: var(--aa-teal); }
.aa-btn--emas    { background: var(--aa-gold); color: #3A2B00; }
.aa-btn--emas:hover { background: #B98F35; }
.aa-btn--blok    { width: 100%; }
.aa-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Destructive actions. Never the primary style: deleting master data is
   the one thing on the settings page that cannot be undone. */
.aa-btn--bahaya { background: var(--aa-white); color: var(--aa-danger); border-color: #F0C7C2; }
.aa-btn--bahaya:hover { background: var(--aa-danger-bg); border-color: var(--aa-danger); }

.aa-btn--kecil { padding: 5px 10px; font-size: 13px; }

/* ---------------------------------------------------------------- */
/* Forms                                                             */
/* ---------------------------------------------------------------- */

.aa-field { margin-bottom: 16px; }
.aa-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.aa-bantuan { font-size: 12px; color: var(--aa-ink-soft); margin-top: 5px; }

.aa-input, .aa-select, .aa-textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--aa-sans);
  font-size: 15px;
  color: var(--aa-ink);
  background: var(--aa-white);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-sm);
}
.aa-input:focus, .aa-select:focus, .aa-textarea:focus {
  border-color: var(--aa-teal);
  outline: 2px solid rgba(28, 110, 106, .18);
  outline-offset: 0;
}
.aa-textarea { min-height: 110px; resize: vertical; }
.aa-select--ramping { width: auto; padding: 7px 10px; font-size: 14px; }

/* Two short fields side by side inside a narrow form column. */
.aa-field-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aa-field-duo .aa-field { margin-bottom: 16px; }

/* Checkbox with its label on one line. */
.aa-cek { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.aa-cek input { width: 16px; height: 16px; accent-color: var(--aa-teal); }

/* Native colour picker, sized like the other inputs. */
.aa-warna-input {
  width: 100%;
  height: 42px;
  padding: 4px;
  background: var(--aa-white);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-sm);
  cursor: pointer;
}

/* ---------------------------------------------------------------- */
/* Tabs                                                              */
/* ---------------------------------------------------------------- */

.aa-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--aa-line);
  overflow-x: auto;
  overflow-y: hidden;   /* ← baris baru */
}

.aa-tab {
  padding: 9px 15px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  border-radius: var(--aa-radius-sm) var(--aa-radius-sm) 0 0;
  color: var(--aa-ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.aa-tab:hover { color: var(--aa-teal-dark); background: var(--aa-teal-soft); }
.aa-tab--aktif {
  color: var(--aa-teal-dark);
  background: var(--aa-white);
  border-bottom-color: var(--aa-gold);
}

/* ---------------------------------------------------------------- */
/* Two-column working layout: form beside list                       */
/* ---------------------------------------------------------------- */

.aa-dua-kolom {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.aa-dua-kolom > .aa-kartu + .aa-kartu { margin-top: 0; }

/* ---------------------------------------------------------------- */
/* Alerts and badges                                                 */
/* ---------------------------------------------------------------- */

.aa-alert {
  padding: 12px 14px;
  border-radius: var(--aa-radius-sm);
  border: 1px solid transparent;
  margin-bottom: 16px;
  font-size: 14px;
}
.aa-alert--sukses  { background: var(--aa-success-bg); border-color: #BFE0CD; color: var(--aa-success); }
.aa-alert--galat   { background: var(--aa-danger-bg);  border-color: #F0C7C2; color: var(--aa-danger); }
.aa-alert--info    { background: var(--aa-teal-soft);  border-color: #C9DCDA; color: var(--aa-teal-dark); }
.aa-alert--ingat   { background: var(--aa-warning-bg); border-color: #E8D5A6; color: var(--aa-warning); }

.aa-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--aa-teal-soft);
  color: var(--aa-teal-dark);
}
.aa-badge--emas { background: var(--aa-gold-soft); color: #6E5210; }
.aa-badge--abu  { background: #EEF1F0; color: var(--aa-ink-soft); }

/* Colour swatch shown next to a tag name. */
.aa-titik {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
  vertical-align: -1px;
}

/* ---------------------------------------------------------------- */
/* Tables                                                            */
/* ---------------------------------------------------------------- */

.aa-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.aa-tabel th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--aa-ink-soft);
  padding: 8px 10px;
  border-bottom: 1px solid var(--aa-line);
  font-weight: 600;
}
.aa-tabel td { padding: 10px; border-bottom: 1px solid var(--aa-line); vertical-align: top; }
.aa-tabel tr:last-child td { border-bottom: none; }
.aa-tabel--rapat td, .aa-tabel--rapat th { padding: 6px 10px; }

/* A row that has been switched off. Still readable, clearly retired. */
.aa-baris-mati td { opacity: .55; }

/* Buttons packed into the last cell of a table row. */
.aa-aksi { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.aa-aksi form { display: inline; margin: 0; }

/* Empty state inside a card. */
.aa-kosong {
  padding: 30px 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: var(--aa-ink-soft);
}

.aa-mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 13px; }

.aa-ya { color: var(--aa-success); font-weight: 600; }
.aa-tidak { color: var(--aa-ink-soft); }

/* ---------------------------------------------------------------- */
/* Standalone pages: sign in, errors                                 */
/* ---------------------------------------------------------------- */

.aa-body--kosong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(1100px 420px at 50% -10%, #FFFFFF 0%, var(--aa-cream) 62%);
}

.aa-panel {
  width: 100%;
  max-width: 400px;
  background: var(--aa-white);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius);
  padding: 30px;
  box-shadow: var(--aa-shadow);
}

.aa-panel--lebar { max-width: 640px; }

.aa-panel__merek {
  font-family: var(--aa-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--aa-teal-dark);
  margin-bottom: 4px;
}
.aa-panel__merek span { color: var(--aa-gold); }

.aa-panel__sub { color: var(--aa-ink-soft); font-size: 14px; margin: 0 0 22px; }

.aa-pesan { max-width: 560px; text-align: left; }
.aa-pesan__judul { font-family: var(--aa-serif); font-size: 22px; margin: 0 0 10px; color: var(--aa-teal-dark); }
.aa-pesan__teks { color: var(--aa-ink-soft); margin: 0 0 18px; }
.aa-pesan__kecil { color: var(--aa-ink-soft); font-size: 13px; }
.aa-pesan__detail {
  background: var(--aa-white);
  border: 1px solid var(--aa-line);
  border-left: 3px solid var(--aa-danger);
  border-radius: var(--aa-radius-sm);
  padding: 14px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1000px) {
  .aa-dua-kolom { grid-template-columns: 1fr; }
  .aa-dua-kolom > .aa-kartu + .aa-kartu { margin-top: 0; }
}

@media (max-width: 900px) {
  .aa-grid--3, .aa-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .aa-shell { flex-direction: column; }
  .aa-sidebar { width: 100%; flex: none; padding-bottom: 8px; }
  .aa-sidebar__kaki { display: none; }
  .aa-nav { flex-direction: row; overflow-x: auto; padding: 0 10px 8px; }
  .aa-nav__item { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .aa-nav__item--aktif { border-left: none; border-bottom-color: var(--aa-gold); }
  .aa-nav__tanda { display: none; }
  .aa-topbar { flex-wrap: wrap; padding: 12px 16px; }
  .aa-isi { padding: 18px 16px 48px; }
  .aa-grid--3, .aa-grid--4 { grid-template-columns: 1fr; }
  .aa-aksi { justify-content: flex-start; }
  .aa-field-duo { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Print — used for PDF output (print-to-PDF from the browser)        */
/* ---------------------------------------------------------------- */

@media print {
  .aa-sidebar, .aa-topbar, .aa-btn, .aa-tab-bar { display: none !important; }
  body.aa-body { background: #FFF; }
  .aa-isi { padding: 0; max-width: none; }
  .aa-kartu { box-shadow: none; border-color: #CCC; break-inside: avoid; }
  .aa-dua-kolom { grid-template-columns: 1fr; }
}
.aa-logo-klien { height: 30px; width: auto; flex: none; }