/**
 * BATCH 6 / TAHAP 2 (2026-09-22) — Portal Supplier.
 *
 * Memakai token sistem desain repo (sr-design-system.css): putih, #20231F,
 * #60665F, oranye identitas #F48C14, latar #F7F6F2, garis #E6E4DC.
 * NOL warna biru, NOL emoji. Logo memakai gambar public/images/logo.png.
 *
 * Dua bagian:
 *   1. .sr-supplier-tamu  -> halaman sebelum masuk (kartu putih di tengah).
 *      Menimpa gaya lama .sr-login-* tanpa mengubah satu baris HTML-nya,
 *      supaya tidak ada kolom/tombol yang hilang.
 *   2. .sp-*              -> halaman setelah masuk (sidebar kiri + isi).
 */

:root {
  --sp-bg: #F7F6F2;
  --sp-surface: #FFFFFF;
  --sp-text: #20231F;
  --sp-muted: #60665F;
  --sp-line: #E6E4DC;
  --sp-orange: #F48C14;
  --sp-orange-soft: #FDF2E5;
  --sp-orange-dark: #AE6108;
  --sp-draf-bg: #EFEEE9;      --sp-draf-fg: #4B4F49;
  --sp-tunggu-bg: #FFF4DB;    --sp-tunggu-fg: #7A5608;
  --sp-setuju-bg: #E6F3E9;    --sp-setuju-fg: #1F6B3A;
  --sp-perbaiki-bg: #FBEDEB;  --sp-perbaiki-fg: #96291F;
}

/* ==========================================================================
   1. HALAMAN TAMU — satu kartu putih di tengah
   ========================================================================== */

body.sr-supplier-tamu {
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.sr-supplier-tamu .sr-login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 16px;
  background: var(--sp-bg);
}

body.sr-supplier-tamu .sr-back-link {
  width: 100%;
  max-width: 440px;
  color: var(--sp-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

body.sr-supplier-tamu .sr-back-link:hover { color: var(--sp-orange-dark); }

body.sr-supplier-tamu .sr-login-card {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  padding: 28px 26px 30px;
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  background: var(--sp-surface);
  box-shadow: 0 10px 30px rgba(32, 35, 31, .05);
}

body.sr-supplier-tamu .sr-login-logo { margin: 0 0 14px; }
body.sr-supplier-tamu .sr-login-logo a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
body.sr-supplier-tamu .sr-login-logo img { display: block; height: 34px; width: auto; }
/* Teks "ID" bawaan lama disembunyikan: identitasnya gambar logo, bukan tulisan. */
body.sr-supplier-tamu .sr-login-logo span { display: none; }

body.sr-supplier-tamu .sr-login-subtitle {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sp-orange-soft);
  color: var(--sp-orange-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.sr-supplier-tamu .sr-login-subtitle i { display: none; }

body.sr-supplier-tamu .sr-login-card h1 {
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--sp-text);
}

body.sr-supplier-tamu .sr-login-desc {
  margin: 0 0 18px;
  color: var(--sp-muted);
  font-size: 13.5px;
  line-height: 1.6;
}
body.sr-supplier-tamu .sr-login-desc a { color: var(--sp-orange-dark); font-weight: 700; }

body.sr-supplier-tamu .sr-form-group { margin: 0 0 14px; }

body.sr-supplier-tamu .sr-form-group > label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sp-text);
}

body.sr-supplier-tamu .sr-form-group small,
body.sr-supplier-tamu .sr-field-note {
  display: block;
  margin-top: 5px;
  color: var(--sp-muted);
  font-size: 12px;
  line-height: 1.5;
}

body.sr-supplier-tamu .sr-input-wrap { position: relative; }

/* Hiasan bawaan lama: bola latar dan ikon kecil di dalam kolom. Disembunyikan
   supaya kartunya bersih dan tidak ada gambar kecil yang menimpa teks. */
body.sr-supplier-tamu .sr-bg-orb { display: none; }
body.sr-supplier-tamu .sr-input-wrap > span { display: none; }

body.sr-supplier-tamu .sr-toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 5px 9px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: var(--sp-surface);
  color: var(--sp-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
  min-height: 0;
  margin: 0;
}
body.sr-supplier-tamu .sr-toggle-password:hover { border-color: var(--sp-orange); background: var(--sp-surface); }

body.sr-supplier-tamu .sr-remember-row { margin: 0 0 14px; font-size: 13px; color: var(--sp-muted); }
body.sr-supplier-tamu .sr-remember-row a { color: var(--sp-orange-dark); font-weight: 700; }

body.sr-supplier-tamu input[type="text"],
body.sr-supplier-tamu input[type="email"],
body.sr-supplier-tamu input[type="tel"],
body.sr-supplier-tamu input[type="url"],
body.sr-supplier-tamu input[type="password"],
body.sr-supplier-tamu input[type="number"],
body.sr-supplier-tamu input[type="date"],
body.sr-supplier-tamu select,
body.sr-supplier-tamu textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  background: var(--sp-surface);
  color: var(--sp-text);
  font: inherit;
  font-size: 14px;
}

body.sr-supplier-tamu textarea { min-height: 84px; resize: vertical; }

body.sr-supplier-tamu input:focus,
body.sr-supplier-tamu select:focus,
body.sr-supplier-tamu textarea:focus {
  outline: none;
  border-color: var(--sp-orange);
  box-shadow: 0 0 0 3px rgba(244, 140, 20, .18);
}

body.sr-supplier-tamu input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin-right: 7px;
  accent-color: var(--sp-orange);
}

body.sr-supplier-tamu .sr-btn-login,
body.sr-supplier-tamu button[type="submit"] {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--sp-orange);
  color: var(--sp-text);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

body.sr-supplier-tamu .sr-btn-login:hover,
body.sr-supplier-tamu button[type="submit"]:hover { background: #E07F0B; }

body.sr-supplier-tamu .sr-alert,
body.sr-supplier-tamu .sr-auth-alert {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
}
body.sr-supplier-tamu .sr-alert-error,
body.sr-supplier-tamu .sr-auth-alert-error {
  background: var(--sp-perbaiki-bg);
  color: var(--sp-perbaiki-fg);
}
body.sr-supplier-tamu .sr-alert-success,
body.sr-supplier-tamu .sr-auth-alert-success {
  background: var(--sp-setuju-bg);
  color: var(--sp-setuju-fg);
}

/* ==========================================================================
   2. HALAMAN SETELAH MASUK — sidebar kiri 240px + isi
   ========================================================================== */

.sp-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sp-side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  background: var(--sp-surface);
  border-right: 1px solid var(--sp-line);
  overflow-y: auto;
}

.sp-side-logo { display: block; margin: 0 4px 16px; }
.sp-side-logo img { display: block; height: 32px; width: auto; }

.sp-side-perusahaan {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-bg);
}
.sp-side-perusahaan strong {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.sp-side-perusahaan .sp-lencana { margin-top: 7px; }

.sp-nav { display: grid; gap: 2px; }

.sp-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.sp-nav a:hover { background: var(--sp-orange-soft); }
.sp-nav a.is-aktif {
  background: var(--sp-orange);
  color: var(--sp-text);
  font-weight: 800;
}

.sp-nav-angka {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sp-perbaiki-bg);
  color: var(--sp-perbaiki-fg);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.sp-nav a.is-aktif .sp-nav-angka { background: var(--sp-surface); }

.sp-side-keluar { margin-top: auto; padding-top: 14px; }
.sp-side-keluar button {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--sp-line);
  border-radius: 9px;
  background: var(--sp-surface);
  color: var(--sp-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.sp-side-keluar button:hover { border-color: var(--sp-orange); }

.sp-main { min-width: 0; }
.sp-isi { max-width: 1080px; padding: 26px 26px 48px; }

.sp-judul { margin: 0 0 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-judul h1 { margin: 0 0 5px; font-size: 25px; letter-spacing: -.02em; }
.sp-judul p { margin: 0; color: var(--sp-muted); font-size: 13.5px; line-height: 1.6; max-width: 620px; }
.sp-judul-aksi { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- panel --- */

.sp-panel {
  margin: 0 0 18px;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: var(--sp-surface);
  overflow: hidden;
}
.sp-panel-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-bottom: 1px solid var(--sp-line);
}
.sp-panel-kepala h2 { margin: 0; font-size: 16px; }
.sp-panel-kepala p { margin: 4px 0 0; color: var(--sp-muted); font-size: 12.5px; }
.sp-panel-isi { padding: 18px; }
.sp-panel-isi > :first-child { margin-top: 0; }
.sp-panel-isi > :last-child { margin-bottom: 0; }

.sp-kosong { padding: 26px 18px; text-align: center; color: var(--sp-muted); font-size: 13.5px; }

/* --- tombol --- */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--sp-orange);
  color: var(--sp-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.sp-btn:hover { background: #E07F0B; }
.sp-btn.is-kedua {
  background: var(--sp-surface);
  border-color: var(--sp-line);
  color: var(--sp-text);
  font-weight: 700;
}
.sp-btn.is-kedua:hover { border-color: var(--sp-orange); background: var(--sp-surface); }
.sp-btn.is-kecil { min-height: 32px; padding: 6px 11px; font-size: 12.5px; }
.sp-btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- lencana status --- */

.sp-lencana {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.sp-lencana.is-draf { background: var(--sp-draf-bg); color: var(--sp-draf-fg); }
.sp-lencana.is-tunggu { background: var(--sp-tunggu-bg); color: var(--sp-tunggu-fg); }
.sp-lencana.is-setuju { background: var(--sp-setuju-bg); color: var(--sp-setuju-fg); }
.sp-lencana.is-perbaiki { background: var(--sp-perbaiki-bg); color: var(--sp-perbaiki-fg); }

/* --- spanduk --- */

.sp-spanduk {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 15px 18px;
  border: 1px solid #F2DFAE;
  border-radius: 14px;
  background: #FFF9EB;
}
.sp-spanduk strong { display: block; font-size: 14px; margin-bottom: 4px; }
.sp-spanduk p { margin: 0; color: #7A5608; font-size: 13px; line-height: 1.55; }

/* --- strip angka --- */

.sp-angka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.sp-angka > div {
  padding: 15px 16px;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: var(--sp-surface);
}
.sp-angka strong { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
.sp-angka span { display: block; margin-top: 5px; color: var(--sp-muted); font-size: 12.5px; font-weight: 600; }

/* --- langkah awal --- */

.sp-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-langkah li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-bg);
}
.sp-langkah .sp-langkah-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sp-draf-bg);
  color: var(--sp-draf-fg);
  font-size: 12.5px;
  font-weight: 800;
}
.sp-langkah li.is-selesai { border-color: #BEDFC8; background: var(--sp-setuju-bg); }
.sp-langkah li.is-selesai .sp-langkah-no { background: var(--sp-setuju-fg); color: #fff; }
.sp-langkah strong { display: block; font-size: 13.5px; }
.sp-langkah span { display: block; margin-top: 3px; color: var(--sp-muted); font-size: 12.5px; line-height: 1.5; }
.sp-langkah li.is-selesai span { color: var(--sp-setuju-fg); }

/* --- tabel --- */

.sp-tabel-bungkus { overflow-x: auto; }
.sp-tabel { width: 100%; min-width: 720px; border-collapse: collapse; }
.sp-tabel th, .sp-tabel td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sp-line);
  text-align: left;
  vertical-align: top;
  font-size: 13.5px;
}
.sp-tabel th {
  color: var(--sp-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--sp-bg);
}
.sp-tabel tr:last-child td { border-bottom: 0; }
.sp-tabel td strong { display: block; }
.sp-tabel td small { display: block; margin-top: 3px; color: var(--sp-muted); font-size: 12px; }
.sp-tabel-aksi { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-angka-kanan { text-align: right; font-variant-numeric: tabular-nums; }

/* --- formulir --- */

.sp-bagian { margin: 0 0 22px; }
.sp-bagian > h3 { margin: 0 0 3px; font-size: 14.5px; }
.sp-bagian > p { margin: 0 0 14px; color: var(--sp-muted); font-size: 12.5px; line-height: 1.55; }

.sp-kolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sp-kolom .sp-penuh { grid-column: 1 / -1; }

.sp-isian { margin: 0; }
.sp-isian > label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.sp-isian > small { display: block; margin-top: 5px; color: var(--sp-muted); font-size: 12px; line-height: 1.5; }

.sp-isian input[type="text"],
.sp-isian input[type="email"],
.sp-isian input[type="tel"],
.sp-isian input[type="url"],
.sp-isian input[type="number"],
.sp-isian input[type="date"],
.sp-isian select,
.sp-isian textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  background: var(--sp-surface);
  color: var(--sp-text);
  font: inherit;
  font-size: 14px;
}
.sp-isian textarea { min-height: 96px; resize: vertical; }
.sp-isian input:focus, .sp-isian select:focus, .sp-isian textarea:focus {
  outline: none;
  border-color: var(--sp-orange);
  box-shadow: 0 0 0 3px rgba(244, 140, 20, .18);
}
.sp-isian input:disabled, .sp-isian select:disabled, .sp-isian textarea:disabled {
  background: var(--sp-bg);
  color: var(--sp-muted);
  cursor: not-allowed;
}

.sp-unggah {
  padding: 20px;
  border: 2px dashed var(--sp-line);
  border-radius: 12px;
  background: var(--sp-bg);
  text-align: center;
}
.sp-unggah:hover { border-color: var(--sp-orange); }
.sp-unggah input[type="file"] { display: block; margin: 10px auto 0; max-width: 100%; font-size: 13px; }
.sp-unggah label { display: block; font-size: 13px; font-weight: 700; }
.sp-unggah small { display: block; margin-top: 5px; color: var(--sp-muted); font-size: 12px; }

.sp-bilah {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 18px -18px -18px;
  padding: 14px 18px;
  border-top: 1px solid var(--sp-line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
}

.sp-alasan {
  margin: 0 0 18px;
  padding: 15px 18px;
  border: 1px solid #F0C8C2;
  border-left: 4px solid var(--sp-perbaiki-fg);
  border-radius: 12px;
  background: var(--sp-perbaiki-bg);
  color: var(--sp-perbaiki-fg);
}
.sp-alasan strong { display: block; margin-bottom: 4px; font-size: 14px; }
.sp-alasan p { margin: 0; font-size: 13px; line-height: 1.6; }

.sp-catatan {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--sp-orange-soft);
  color: #7A4A05;
  font-size: 13px;
  line-height: 1.6;
}

.sp-daftar-aturan { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.75; }

.sp-pesan { margin: 0 0 18px; padding: 12px 15px; border-radius: 10px; font-size: 13.5px; line-height: 1.55; }
.sp-pesan.is-sukses { background: var(--sp-setuju-bg); color: var(--sp-setuju-fg); }
.sp-pesan.is-galat { background: var(--sp-perbaiki-bg); color: var(--sp-perbaiki-fg); }

.sp-menu-tombol { display: none; }

/* --- layar kecil: sidebar pindah ke atas --- */

@media (max-width: 900px) {
  .sp-shell { display: block; }
  .sp-side {
    position: static;
    height: auto;
    flex-direction: column;
    border-right: 0;
    border-bottom: 1px solid var(--sp-line);
    padding: 12px 14px;
  }
  .sp-side-logo { margin-bottom: 12px; }
  .sp-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .sp-nav a { white-space: nowrap; }
  .sp-side-keluar { margin-top: 12px; padding-top: 0; }
  .sp-side-keluar button { width: auto; }
  .sp-isi { padding: 18px 14px 40px; }
  .sp-angka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-kolom { grid-template-columns: 1fr; }
  .sp-bilah { margin: 16px -14px -14px; padding: 12px 14px; }
}

@media (max-width: 520px) {
  .sp-judul h1 { font-size: 21px; }
  .sp-angka strong { font-size: 22px; }
}

/* ==========================================================================
   3. HALAMAN ADMIN PENINJAU SUPPLIER — samakan dengan ruang kerja, tanpa biru
   ========================================================================== */

[data-sr-supplier-admin] .sr-ma-status.is-info {
  background: var(--sp-orange-soft);
  color: var(--sp-orange-dark);
}

[data-sr-supplier-admin] {
  --admin-accent-500: #F48C14;
  --admin-accent-600: #E07F0B;
  --admin-accent-700: #AE6108;
}