/* Tema "Kawung Kang gelap" — tipografi + warna saja, di atas Pico v2.
   Dimuat SETELAH pico.min.css. Layout tidak diubah. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Matikan scaling 106–131% bawaan Pico (breakpoint memakai spesifisitas sama, tapi file ini lebih akhir). */
:root {
  --pico-font-size: 100%;
}

:root[data-theme="dark"] {
  --pico-font-family: "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pico-line-height: 1.625;
  --pico-border-radius: 1rem;

  --pico-background-color: #123B2C;
  --pico-color: #F6F1E4;
  --pico-h1-color: #F6F1E4;
  --pico-h2-color: #F6F1E4;
  --pico-h3-color: #F6F1E4;
  --pico-h4-color: #F6F1E4;
  --pico-h5-color: #F6F1E4;
  --pico-h6-color: #F6F1E4;
  --pico-muted-color: rgba(246, 241, 228, 0.8);
  --pico-muted-border-color: rgba(246, 241, 228, 0.12);
  --pico-text-selection-color: rgba(197, 232, 108, 0.3);
  --pico-mark-background-color: rgba(197, 232, 108, 0.25);
  --pico-mark-color: #F6F1E4;
  --pico-ins-color: #C5E86C;
  --pico-blockquote-border-color: rgba(246, 241, 228, 0.12);
  --pico-blockquote-footer-color: rgba(246, 241, 228, 0.7);

  /* Primary (Daun Muda) */
  --pico-primary: #C5E86C;
  --pico-primary-background: #C5E86C;
  --pico-primary-border: #C5E86C;
  --pico-primary-underline: rgba(197, 232, 108, 0.5);
  --pico-primary-hover: #D3EE8C;
  --pico-primary-hover-background: #D3EE8C;
  --pico-primary-hover-border: #D3EE8C;
  --pico-primary-hover-underline: #D3EE8C;
  --pico-primary-focus: rgba(197, 232, 108, 0.35);
  --pico-primary-inverse: #123B2C;

  /* Secondary (Krem, teks gelap di atasnya) */
  --pico-secondary: #CFC8B2;
  --pico-secondary-background: #CFC8B2;
  --pico-secondary-border: #CFC8B2;
  --pico-secondary-underline: rgba(207, 200, 178, 0.5);
  --pico-secondary-hover: #E4DEC9;
  --pico-secondary-hover-background: #E4DEC9;
  --pico-secondary-hover-border: #E4DEC9;
  --pico-secondary-hover-underline: #E4DEC9;
  --pico-secondary-focus: rgba(207, 200, 178, 0.35);
  --pico-secondary-inverse: #123B2C;

  /* Contrast (Krem terang) */
  --pico-contrast: #F6F1E4;
  --pico-contrast-background: #F6F1E4;
  --pico-contrast-border: #F6F1E4;
  --pico-contrast-underline: rgba(246, 241, 228, 0.5);
  --pico-contrast-hover: #FFFFFF;
  --pico-contrast-hover-background: #FFFFFF;
  --pico-contrast-hover-border: #FFFFFF;
  --pico-contrast-hover-underline: #FFFFFF;
  --pico-contrast-focus: rgba(246, 241, 228, 0.35);
  --pico-contrast-inverse: #123B2C;

  /* Surface */
  --pico-card-background-color: #244A3B;
  --pico-card-border-color: rgba(246, 241, 228, 0.12);
  --pico-card-sectioning-background-color: #2D5142;
  --pico-card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.25);
  --pico-form-element-background-color: #244A3B;
  --pico-form-element-selected-background-color: #2D5142;
  --pico-form-element-border-color: rgba(246, 241, 228, 0.25);
  --pico-form-element-color: #F6F1E4;
  --pico-form-element-placeholder-color: rgba(246, 241, 228, 0.8);
  --pico-form-element-active-background-color: #2D5142;
  --pico-form-element-active-border-color: #C5E86C;
  --pico-form-element-focus-color: #C5E86C;
  --pico-form-element-disabled-background-color: #2D5142;
  --pico-form-element-disabled-border-color: rgba(246, 241, 228, 0.25);
  --pico-form-element-invalid-border-color: #dc2626;
  --pico-form-element-invalid-active-border-color: #ef4444;
  --pico-form-element-invalid-focus-color: #ef4444;
  --pico-form-element-valid-border-color: #16a34a;
  --pico-form-element-valid-active-border-color: #22c55e;
  --pico-form-element-valid-focus-color: #22c55e;
  --pico-switch-background-color: rgba(246, 241, 228, 0.35);
  --pico-switch-checked-background-color: #C5E86C;
  --pico-switch-color: #123B2C;
  --pico-range-border-color: rgba(246, 241, 228, 0.2);
  --pico-range-active-border-color: rgba(246, 241, 228, 0.35);
  --pico-range-thumb-border-color: #123B2C;
  --pico-range-thumb-color: #C5E86C;
  --pico-range-thumb-active-color: #D3EE8C;
  --pico-table-border-color: rgba(246, 241, 228, 0.12);
  --pico-table-row-stripped-background-color: rgba(246, 241, 228, 0.04);
  --pico-code-background-color: #244A3B;
  --pico-code-color: rgba(246, 241, 228, 0.85);
  --pico-code-kbd-background-color: #F6F1E4;
  --pico-code-kbd-color: #123B2C;
  --pico-accordion-border-color: rgba(246, 241, 228, 0.12);
  --pico-accordion-active-summary-color: #C5E86C;
  --pico-accordion-close-summary-color: #F6F1E4;
  --pico-accordion-open-summary-color: rgba(246, 241, 228, 0.7);
  --pico-dropdown-background-color: #244A3B;
  --pico-dropdown-border-color: rgba(246, 241, 228, 0.12);
  --pico-dropdown-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.3);
  --pico-dropdown-color: #F6F1E4;
  --pico-dropdown-hover-background-color: #2D5142;
  --pico-modal-overlay-background-color: rgba(10, 36, 27, 0.75);
  --pico-progress-background-color: rgba(246, 241, 228, 0.15);
  --pico-progress-color: #C5E86C;
  --pico-tooltip-background-color: #F6F1E4;
  --pico-tooltip-color: #123B2C;
  --pico-loading-spinner-opacity: 0.6;
}

h1, h2, h3, h4, h5, h6 {
  --pico-font-weight: 700;
  --pico-line-height: 1.15;
  font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { --pico-font-size: 2.25rem; }
h2 { --pico-font-size: 1.75rem; }
h3 { --pico-font-size: 1.5rem; }
h4 { --pico-font-size: 1.25rem; }
h5 { --pico-font-size: 1.125rem; }
h6 { --pico-font-size: 1rem; }
small { --pico-font-size: 0.875rem; }

/* Navbar: bungkus ke baris baru di layar sempit (tanpa ubah markup). */
nav,
nav ul {
  flex-wrap: wrap;
}

nav ul {
  row-gap: 0.25rem;
}

/* Sel tabel boleh patah di mana saja (mis. timestamp ISO panjang) agar tidak memicu scroll horizontal. */
td {
  overflow-wrap: anywhere;
}

/* Badge status. Teks terang agar kontras ≥4.5:1 di latar gelap; tint latar
   tetap dari warna status. Dipakai base.html dan login.html. */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
}
.badge-lg { font-size: 1.1em; }
.status-pending, .status-scheduled { color: var(--pico-muted-color); background: color-mix(in srgb, var(--pico-muted-color) 15%, transparent); }
.status-publishing { color: #fbbf24; background: color-mix(in srgb, #d97706 15%, transparent); }
.status-done { color: #4ade80; background: color-mix(in srgb, #16a34a 15%, transparent); }
.status-failed { color: #fca5a5; background: color-mix(in srgb, #dc2626 15%, transparent); }
.status-dryrun { color: #fcd34d; background: color-mix(in srgb, #d97706 18%, transparent); }
.status-cancelled { color: var(--pico-muted-color); background: color-mix(in srgb, var(--pico-muted-color) 15%, transparent); text-decoration: line-through; }

/* Kosakata 8 status Mission Dashboard (Pending/Running/Waiting Approval/
   Approved/Publishing/Scheduled/Completed/Failed): pending/scheduled/
   publishing/failed sudah tercakup di atas, sisanya di sini. */
.status-running { color: #fbbf24; background: color-mix(in srgb, #d97706 15%, transparent); }
.status-waiting-approval { color: #fbbf24; background: color-mix(in srgb, #d97706 15%, transparent); }
.status-approved { color: #93c5fd; background: color-mix(in srgb, #2563eb 15%, transparent); }
.status-completed { color: #4ade80; background: color-mix(in srgb, #16a34a 15%, transparent); }

/* Logo Kawung Kang. Ruang kosong >= 1 kelopak (~1/3 tinggi lockup); tanpa border/bayangan. */
.brand-link { display: inline-block; padding: 0; line-height: 0; margin: 0; }
.brand-lockup { display: block; height: 32px; width: auto; max-width: 100%; margin: 0; border: 0; box-shadow: none; }
.login-lockup { display: block; height: 48px; width: auto; max-width: 100%; margin: 0 auto 1.25rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 575px) {
  .brand-lockup { height: 28px; }
  .login-lockup { height: 40px; }
}

/* Hamburger nav (≤767px, hanya bila JS aktif — tanpa JS menu tetap terlihat dan membungkus).
   Di desktop #nav-menu "tembus" sehingga layout sama dengan sebelum ada kontainer. */
#nav-menu { display: contents; }
.nav-toggle { display: none; }
.nav-toggle-close { display: none; }
@media (max-width: 767px) {
  .js nav { align-items: center; }
  .js nav > ul.nav-brand li { padding-block: 0.5rem; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0; padding: 0;
    font-size: 1.5rem; line-height: 1;
    background: transparent; color: var(--pico-h1-color); /* Pico menimpa --pico-color pada button */
    border: 1px solid var(--pico-muted-border-color);
  }
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline; }
  .js #nav-menu { display: none; flex-basis: 100%; width: 100%; }
  .js #nav-menu.open { display: block; }
  .js #nav-menu ul { display: flex; flex-direction: column; align-items: stretch; width: 100%; row-gap: 0; margin: 0; }
  .js #nav-menu li { padding: 0; }
  .js #nav-menu a,
  .js #nav-menu button { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; }
  .js #nav-menu button { justify-content: center; }
}
.publish-warning-banner { border-left: 4px solid #d97706; background: color-mix(in srgb, #d97706 12%, transparent); }