/* TEMA PUBLIK — biru netral (token OpenUI, thesysdev/openui, MIT)
   ------------------------------------------------------------
   Pembeda disengaja: halaman UMUM biru, halaman /admin* teal hijau.

   Cara kerja: HANYA menimpa nilai variabel tema (warna/radius/shadow)
   dari `packages/react-ui/src/openui-defaults.scss`, dikonversi
   oklch -> hex (browser stasiun belum tentu dukung oklch).
   Struktur/komponen tetap milik `style.css` — bukan framework baru.

   Dipakai 5 halaman umum via `<body class="tema-publik">` + 1 <link>:
   /cek, / (dashboard), /scan/*, /buat, /display.
   TIDAK dipakai halaman /admin* (itu wilayah flat.css, teal).
*/
body.tema-publik {
  /* --- permukaan (OpenUI: background / foreground) --- */
  --bg:       #f5f5f5;
  --surface:  #fdfdfd;
  --border:   rgba(3, 3, 3, .10);
  --hover:    rgba(3, 3, 3, .04);
  /* --- teks (text-neutral-primary / -secondary) --- */
  --text:     #030303;
  --text-dim: rgba(3, 3, 3, .55);
  /* --- aksen (interactive-accent-default) --- */
  --accent:       #2563eb;
  --accent-hover: #1d4ed8;
  --accent-dark:  #1d4ed8;
  --accent-light: rgba(37, 99, 235, .12);
  /* --- semantik (text-{success,danger,alert,info}-primary) --- */
  --success: #166534;
  --danger:  #b91c1c;
  --warning: #854d0f;
  --info:    #1e40af;
  /* --- bentuk: OpenUI radius-l 10px / m 8px, shadow-s --- */
  --radius: 8px;
  --shadow: 0 1px 3px -2px rgba(0, 0, 0, .02), 0 2px 5px -2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 6px -2px rgba(0, 0, 0, .025), 0 2px 2px -2px rgba(0, 0, 0, .05);
}

/* --- gelap abu Google (background #202124, surface #303134, teks #e8eaed,
   sekunder #9aa0a6 — blok prefers-color-scheme OpenUI -> remap ke toggle tema repo) --- */
[data-theme="dark"] body.tema-publik {
  --bg:       #202124;
  --surface:  #303134;
  --border:   #3c4043;
  --hover:    rgba(232, 234, 237, .08);
  --text:     #e8eaed;
  --text-dim: #9aa0a6;
  --accent:       #3b82f6;
  --accent-hover: #60a5fa;
  --accent-dark:  #60a5fa;
  --accent-light: rgba(59, 130, 246, .16);
  --success: #4ade80;
  --danger:  #f87171;
  --warning: #fbbf24;
  --info:    #60a5fa;
  --shadow: 0 1px 3px -2px rgba(0, 0, 0, .06), 0 2px 5px -2px rgba(0, 0, 0, .10);
  --shadow-md: 0 4px 6px -2px rgba(0, 0, 0, .08), 0 2px 2px -2px rgba(0, 0, 0, .12);
}

/* Tombol sukses: di dark `--success` = hijau TERANG (dipakai teks/ikon di atas
   latar gelap), tapi .btn--success memaksa teks putih -> putih di hijau terang
   = 1.7:1, tidak terbaca. Di dark, teks tombolnya dibalik jadi gelap. */
[data-theme="dark"] body.tema-publik .btn--success,
[data-theme="dark"] body.tema-publik .btn--success:hover { color: #06240f; }

/* --- bentuk kontrol: OpenUI = radius 8px, garis tipis, tanpa shadow --- */
body.tema-publik .btn { border-radius: 8px; font-weight: 600; }
body.tema-publik .btn--primary { background: var(--accent); color: #fff; }
body.tema-publik .search-row input,
body.tema-publik .filter-bar input,
body.tema-publik .filter-date { border-radius: 8px; }

/* Sisa tema lama di style.css pakai warna hardcode di luar token
   (cokelat #5b5145, beige #f5efe3/#f0e9da) -> netral di halaman publik.
   Dipakai: tombol CARI /scan + SCAN QR/PRINT /cek, hover outline, chip tipe order.
   Hover = langkah turun HALUS dari base (bukan lompat hampir hitam): #404040 ->
   #333333 terang, #525252 -> #454545 gelap. Teks putih tetap >=9:1 (WCAG AA). */
body.tema-publik .btn--secondary { background: #404040; color: #fff; }
body.tema-publik .btn--secondary:hover { background: #333333; }
[data-theme="dark"] body.tema-publik .btn--secondary { background: #525252; }
[data-theme="dark"] body.tema-publik .btn--secondary:hover { background: #454545; }
body.tema-publik .btn--outline:hover { background: var(--hover); }
body.tema-publik .badge--default {
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  color: var(--text);
}

/* pill filter + chip status: OpenUI chip lebih kecil & kotak (6px) */
body.tema-publik .filter-btn { border-radius: 8px; }
body.tema-publik .seg { border-radius: 8px; }
body.tema-publik .badge { border-radius: 6px; letter-spacing: .2px; }

/* kartu: OpenUI shadow halus, border tipis, tanpa bar judul abu */
body.tema-publik .card#cekInfoCard {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
body.tema-publik .card#cekInfoCard .card__header {
  border-bottom: 1px solid var(--border);
}
body.tema-publik .jo-info-body .job-grid .jg-value { border-left-color: var(--border); }

/* meja item: header tint tipis aksen (lihat style.css .item-table thead th),
   sekat baris garis tipis */
body.tema-publik .item-table thead th {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
body.tema-publik .item-table td { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }

/* baris list (/cek flat list): hover ala OpenUI (tint sangat halus) */
body.tema-publik .cek-flat-row:hover { background: var(--hover); }
body.tema-publik .cek-flat-row.active { background: color-mix(in srgb, var(--accent) 10%, transparent); border-left-color: var(--accent); }

/* TABEL DAFTAR JO (gaya spreadsheet) -- BERSAMA /cek & /scan.
   Grid: SO|CUSTOMER|DS rapat KIRI, TANGGAL di TENGAH, lalu
   STATUS|TIPE rapat KANAN (dipisah kolom `gap` yg menyerap sisa).
   Template kolom (--cek-cols) dihitung di ui-common.js: jobTableLayout()
   supaya header & baris PASTI sejajar.
*/
  /* --- TABEL LIST FILTER /cek (gaya spreadsheet) ---
     Grid kolom: SO|CUSTOMER|DS rapat KIRI, lalu STATUS|JOB ID|TIPE rapat KANAN
     (dipisah kolom `gap` yg menyerap sisa). Header (.cek-flat-head) & baris
     pakai template kolom SAMA (--cek-cols dari cekjo.js). */
  .cek-table { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .cek-flat-head,
  .cek-table .cek-flat-row {
    display:grid;
    grid-template-columns: var(--cek-cols);
    align-items:center;
    column-gap:10px;
    padding:8px 14px;
  }
  .cek-flat-head {
    background:var(--hover);
    border-bottom:1px solid var(--border);
    font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--text-dim);
  }
  .cek-flat-head .cft-gap { border:0; }
  .cek-table .cek-flat-row { padding:8px 14px; min-height:38px; }
  /* Sel: teks ellipsis; kolom kanan rata KANAN. */
  .cek-table .cft-so { font-weight:700; color:var(--text); }
  .cek-table .cft-cust { color:var(--text); font-weight:600; }
  .cek-table .cft-ds { color:var(--text-dim); font-weight:600; }
  .cek-table .cft-so, .cek-table .cft-cust, .cek-table .cft-ds,
  .cek-table .cft-tgl, .cek-table .cft-status, .cek-table .cft-cat, .cek-table .cft-tipe,
  .cek-flat-head span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Kolom STATUS/TIPE: kolomnya di sisi KANAN tabel, tapi isi (judul header +
     nilai tiap baris) rata TENGAH -> judul sejajar di atas nilainya. */
  .cek-table .cft-status, .cek-table .cft-tipe,
  .cek-flat-head .cft-status, .cek-flat-head .cft-tipe { text-align:center; }
  /* Tanggal JO di TENGAH (hasil pencarian): mono, tabular, center. */
  .cek-table .cft-tgl, .cek-flat-head .cft-tgl {
    text-align:center; font-family:var(--mono); font-weight:600; font-size:12px;
    color:var(--text-dim); font-variant-numeric:tabular-nums;
  }
  /* Catatan: teks pendek redup kiri (bukan mono — isian bebas dari Excel);
     ellipsis dari selektor di atas + title tooltip berisi teks penuh. */
  .cek-table .cft-cat { color:var(--text-dim); font-size:11.5px; font-weight:500; }
  .cek-table .cft-status .badge { display:inline-flex; justify-content:center; font-size:10px; font-weight:600; padding:1px 5px; border-radius:3px; min-width:62px; }
  .cek-table .cft-tipe { text-align:center; }
  /* Bagikan tautan lacak per baris list /cek: overlay kanan (tanpa kolom grid
     baru, jadi template kolom tak berubah). #result hanya ada di /cek. */
  #result .cek-flat-row { position:relative; padding-right:42px; }
  #result .cek-share { position:absolute; right:6px; top:50%; transform:translateY(-50%);
    display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
    border:none; border-radius:8px; background:transparent; color:var(--text-dim); cursor:pointer; }
  #result .cek-share:hover { color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
  #result .cek-share:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  #result .cek-share svg { display:block; }

/* HP: kolom lebih rapat supaya nama customer lega. */
@media (max-width:560px) {
  .cek-table .cek-flat-head, .cek-table .cek-flat-row { padding:8px 10px; column-gap:8px; }
}