/* ══ ui.css — sistem reka bentuk kongsi ═══════════════════════════════
   Satu fail untuk kelima-lima halaman. Sebelum ni setiap HTML bawa salinan
   sendiri @font-face, token, .btn, .card, borang — lima salinan yang sudah
   mula hanyut antara satu sama lain.

   Fasa 1 = pemindahan sahaja. Nilai di sini ialah nilai yang sudah wujud,
   supaya tiada apa berubah rupa. Token baharu (jarak, saiz teks, sasaran
   sentuh) ditakrifkan sekarang tetapi belum dipakai di mana-mana — fasa
   seterusnya yang memakainya.

   Mobile dulu: peraturan asas ialah peraturan telefon. Media query hanya
   untuk skrin lebih besar (min-width), tak pernah max-width. */

@font-face{
  font-family:"Instrument Sans";
  src:url(/fonts/instrument-sans.woff2) format("woff2");
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
}

/* ── Token ───────────────────────────────────────────────────────── */
:root{
  /* Permukaan. --card kekal sebagai alias sebab lima fail sudah pakai nama tu. */
  --bg:#0e1014;
  --surface:#171b21;  --card:#171b21;
  --raise:#212630;                   /* butang, tag, tab aktif */
  --sunk:#12151a;                    /* item bersarang, bar kod */
  --line:#262b33;    --line-soft:#1c2027;
  --line-hi:#39404d;                 /* sempadan hover */

  /* Teks */
  --head:#eef1f5;  --text:#c6ccd6;  --mut:#9aa3b0;

  /* Aksen & status */
  /* Limau jenama (favicon.svg). Atas gelap ia dipakai terus — 14.9:1.
     Atas kertas ia 1.2:1 dan hilang sama sekali, jadi tema terang memakai
     limau yang digelapkan, bukan warna lain. Lihat blok tema terang. */
  --acc:#c6f27f;   --acc-hi:#d4f79b;
  --ok:#7fc99a;    --warn:#e0b658;   --err:#e8918f;

  /* Jarak — skala tetap. Tiada 13px, 17px, 23px. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px;
  --pad:20px; --gap:16px;            /* nama lama, dipakai index.html */

  /* Saiz teks */
  --t-label:12px; --t-sm:13px; --t-body:14px; --t-lg:16px;
  --t-title:20px; --t-h1:26px;

  /* Bentuk */
  --r:8px; --r-sm:6px; --r-pill:20px;
  --shadow:0 1px 2px #0006, 0 8px 24px #0004;
  --btn-fill:#fff;   --btn-fill-fg:#0e1014;   /* .btn.primary */
  --on-fill:#2b313c;                          /* .btn.on      */

  /* Susun atur */
  --tap:44px;                        /* sasaran sentuh minimum */
  --tap-lg:48px;
  --container:900px;

  color-scheme:dark;
}

/* ── Tema terang ─────────────────────────────────────────────────────
   Hanya token yang ditulis semula. Setiap peraturan lain dalam fail ini
   tidak tahu tema mana yang aktif, dan itu memang tujuannya.
   data-theme ditetapkan oleh /theme.js sebelum paint pertama. */
:root[data-theme="light"]{
  --bg:#f6f7f9;
  --surface:#ffffff;  --card:#ffffff;
  --raise:#eceff3;
  --sunk:#f1f3f7;
  --line:#e0e4ea;    --line-soft:#edeff3;
  --line-hi:#c0c7d1;

  --head:#14161a;  --text:#3d434d;  --mut:#69707d;

  --acc:#487819;   --acc-hi:#375c12;   /* limau digelapkan: 4.9:1 atas --bg */
  --ok:#1a7f4b;    --warn:#8a6100;   --err:#c0392b;

  --shadow:0 1px 2px #0000000f, 0 8px 24px #00000012;
  --btn-fill:#14161a;  --btn-fill-fg:#ffffff;
  --on-fill:#dfe4ec;

  color-scheme:light;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:400 14px/28px "Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%}
p{margin:0}
a{color:inherit}

/* Telefon dahulu. Skrin lebar ditambah di hujung fail. */
main{max-width:var(--container);margin:0 auto;padding:20px 16px 48px}

h1{font-size:30px;line-height:40px;letter-spacing:-.75px;font-weight:400;color:var(--head);margin:0 0 8px}
h2{font-size:20px;line-height:28px;letter-spacing:-.4px;font-weight:400;color:var(--head);margin:0}

.mut{color:var(--mut);font-size:12px;line-height:20px}
.eyebrow{font-size:12px;line-height:16px;letter-spacing:1.68px;text-transform:uppercase;
  color:var(--mut);margin:0 0 12px}

/* ── Butang ──────────────────────────────────────────────────────── */
/* `font:500 14px/20px inherit` — bentuk yang dipakai kelima-lima fail sebelum
   ni — CSS tak sah: singkatan `font` tak terima `inherit` sebagai nama
   keluarga, jadi seluruh baris digugurkan senyap. Kesannya butang, tab dan
   kotak input dipapar dalam fon lalai pelayar pada 13.33px/400, bukan
   Instrument Sans 14px/500. Longhand di sini betulkannya. */
/* inline-flex + min-height, bukan padding menegak: teks kekal di tengah
   walaupun butang lebih tinggi daripada barisnya. Butang admin dulu 32px,
   ikon 30px — di bawah paras yang ibu jari boleh kena dengan yakin. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);
  border:1px solid var(--line);background:var(--raise);color:var(--head);
  border-radius:var(--r-sm);padding:6px 14px;
  font-family:inherit;font-size:14px;font-weight:500;line-height:20px;
  text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--line-hi)}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.btn.primary{background:var(--btn-fill);color:var(--btn-fill-fg);border-color:var(--btn-fill)}
.btn.primary:disabled,.btn:disabled{opacity:.4;cursor:default}
/* 44px pada telefon, 36px pada desktop. Fasa 7 menetapkan 36 di mana-mana atas
   alasan kepadatan — kemudian QA menjumpai `Delete` pada baris halaman landing
   dan `✕` (buang blok) dalam editor, kedua-duanya `sm`. Kawalan yang memusnah
   kerja orang tak sepatutnya jadi sasaran terkecil di skrin. Kepadatan
   dikembalikan pada desktop, di mana ada tetikus. */
.btn.sm{min-height:var(--tap);padding:4px 10px;font-size:12px;line-height:18px;color:var(--text)}
/* Butang ikon segi empat sama penuh: 30px × 26px dulu, terlalu kecil untuk
   pensel/tong sampah yang memadam kerja orang. */
.btn.icon{min-width:var(--tap);padding:4px 8px;font-size:16px}
.theme-toggle{min-width:40px;padding:4px 10px;font-size:15px;line-height:1;flex:none}
.btn.danger{color:var(--err)}
.btn.on{background:var(--on-fill);border-color:var(--mut)}

/* ── Susun atur ──────────────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:10px}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 28px;align-items:center}
.grow{flex:1;min-width:0}
.name{color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Jadual/kandungan lebar menatal dalam bekas sendiri, bukan tolak halaman. */
.scroll{overflow-x:auto}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:12px}
.card.click{cursor:pointer}
.card.click:hover{border-color:var(--line-hi)}
.card.on{border-color:var(--mut)}

/* Tajuk baris yang boleh diklik ialah <button>, bukan <span> dengan
   cursor:pointer. Span tak boleh difokus — pemilih blok landing dan baris
   produk kedua-duanya langsung tak boleh dicapai dengan papan kekunci. Gaya
   butang UA dibuang, jadi rupanya tak berubah. */
.rowbtn{display:block;width:100%;min-height:var(--tap);text-align:left;
  background:none;border:0;padding:0;color:var(--head);font:inherit;cursor:pointer}
.rowbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── Tab ─────────────────────────────────────────────────────────── */
/* Menatal ke sisi, bukan membalut. Diukur pada 375px: empat tab dialog jatuh
   ke 2 baris dan lapan tab produk ke 3 baris, yang menolak medan borang keluar
   skrin sebelum orang sempat menaip apa-apa. Menatal dalam bekas sendiri —
   halaman tak bergerak. */
.tabs{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);padding-bottom:10px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:inline-flex;align-items:center;min-height:40px;
  background:none;border:1px solid transparent;border-radius:var(--r-sm);color:var(--mut);
  padding:5px 12px;font-family:inherit;font-size:13px;font-weight:500;line-height:20px;
  white-space:nowrap;cursor:pointer}
.tab:hover{color:var(--head)}
.tab.on{background:var(--raise);border-color:var(--line);color:var(--head)}

/* ── Pil status ──────────────────────────────────────────────────── */
.pill{font-size:11px;line-height:18px;letter-spacing:1px;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:0 10px;color:var(--mut)}
.pill.active,.pill.published{color:var(--ok);border-color:#7fc99a55}
.pill.draft{color:var(--warn);border-color:#e0b65855}
.pill.archived{color:var(--mut)}

/* ── Lencana keadaan ─────────────────────────────────────────────
   Warna sahaja tak memadai: setiap lencana bawa ikon DAN teks, supaya ia
   masih terbaca oleh mata yang tak bezakan biru dari kelabu. */
.status{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  font-size:11px;line-height:18px;font-weight:500;letter-spacing:.4px;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 10px;color:var(--mut)}
.status svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.status-owned{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 33%,transparent);
  background:color-mix(in srgb,var(--acc) 8%,transparent)}
.status-public{color:var(--ok);border-color:#7fc99a55}
.status-locked{color:var(--mut)}
.status-published{color:var(--ok);border-color:#7fc99a55}
.status-draft{color:var(--warn);border-color:#e0b65855}

/* ── Keadaan kosong ──────────────────────────────────────────────
   Bukan kawasan lompang: sebuah kotak yang mengaku ia memang kosong.
   `.empty` sudah dipakai dashboard untuk maksud lain, jadi nama lain. */
.emptystate{border:1px dashed var(--line);border-radius:var(--r);
  padding:28px 20px;text-align:center}
.emptystate .et{color:var(--head);font-size:15px;line-height:24px}
.emptystate .eb{color:var(--mut);font-size:13px;line-height:22px;
  margin:6px auto 0;max-width:44ch}
.emptystate .btn{margin-top:16px}

/* ── Rangka muat ─────────────────────────────────────────────────
   CSS sahaja. Skrin kosong semasa menunggu Supabase nampak macam rosak;
   ini nampak macam sedang memuat. */
@keyframes sk{0%,100%{opacity:.45}50%{opacity:.85}}
.sk{background:var(--sunk);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  animation:sk 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* ── Borang ──────────────────────────────────────────────────────── */
label{display:block;margin-top:14px}
label span{display:block;font-size:12px;line-height:20px;color:var(--mut);
  text-transform:uppercase;letter-spacing:1px}
/* 16px, bukan 14px. Safari iOS mengezum masuk secara automatik apabila kotak
   yang difokus lebih kecil daripada 16px — borang admin melompat dan orang
   terpaksa mencubit balik selepas setiap medan. Kembali ke 14px pada desktop,
   di hujung fail, di mana kepadatan lebih berguna. */
input,textarea,select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px;resize:vertical;min-height:var(--tap);
  font-family:inherit;font-size:16px;font-weight:400;line-height:24px}
textarea{min-height:auto}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc)}
input:disabled{color:var(--mut);cursor:not-allowed}
.check{display:flex;align-items:center;gap:10px}
.check input{width:auto;flex:none}
.check span{display:inline;text-transform:none;letter-spacing:0;font-size:14px;color:var(--text)}

/* ── Mesej ───────────────────────────────────────────────────────── */
.err:not(:empty){border:1px solid #e8918f55;color:var(--err);border-radius:var(--r-sm);
  padding:8px 12px;font-size:12px;line-height:20px;margin-top:12px}
.ok:not(:empty){border:1px solid #7fc99a55;color:var(--ok);border-radius:var(--r-sm);
  padding:8px 12px;font-size:12px;line-height:20px;margin-top:12px}
.warn{border:1px solid #e0b65855;color:var(--warn);border-radius:var(--r-sm);
  padding:8px 12px;font-size:12px;line-height:20px;margin-top:12px}

/* ── Cangkerang admin ────────────────────────────────────────────
   Satu bar untuk empat halaman admin. Sebelum ni tiada navigasi langsung
   antara mereka: Produk ada pautan ke Dashboard, Landing ada pautan ke
   Produk, dan Content tiada pautan ke mana-mana. Sekarang keempat-empat
   destinasi ada di setiap halaman.

   Tanpa langkah bina, HTML tak boleh di-include — jadi markupnya berulang
   dalam empat fail dan CSS-nya yang dikongsi di sini. Itu had sebenar
   susunan ni, bukan pilihan. */
.adminbar{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.adminbar[hidden]{display:none}
.adminbar-in{max-width:var(--container);margin:0 auto;min-height:52px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.adminbrand{display:flex;align-items:baseline;gap:8px;min-width:0;text-decoration:none}
.adminbrand > *{min-width:0}
.adminbrand b{color:var(--head);font-size:14px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminbrand i{color:var(--mut);font-size:11px;font-style:normal;flex:none;
  letter-spacing:1.4px;text-transform:uppercase}
.adminbar-r{display:flex;align-items:center;gap:8px;flex:none}

/* Tab menatal mendatar, bukan membalut: empat destinasi tak muat pada 320px,
   dan membalut ke dua baris memakan tinggi skrin yang halaman admin perlukan
   untuk borang. Menatal ke sisi dalam bekasnya sendiri — halaman tak bergerak. */
.adminnav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  max-width:var(--container);margin:0 auto;
  padding:0 max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
.adminnav::-webkit-scrollbar{display:none}
.anav{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 14px;border-radius:var(--r-sm);border:1px solid transparent;
  color:var(--mut);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.anav:hover{color:var(--head)}
.anav:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.anav[aria-current="page"]{background:var(--raise);border-color:var(--line);color:var(--head)}

/* ── Gate log masuk (tiga halaman admin) ─────────────────────────── */
/* Berpusat: jenama, eyebrow, tajuk, sub. Medan sahaja rata kiri — label di
   atas kotak berpusat tak ada tepi untuk mata ikut. */
#gate{max-width:400px;margin:56px auto 0;text-align:center}
.gate-logo{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);
  color:var(--head);font-size:16px;letter-spacing:-.3px;text-decoration:none}
.gate-mark{width:24px;height:24px;flex:none;
  background:url(/favicon.svg) center/contain no-repeat}
#gate .eyebrow{margin:18px 0 20px}
#gate h1{font-size:32px;line-height:40px;font-weight:500;margin-bottom:10px}
.gate-sub{font-size:14px;line-height:24px;color:var(--mut)}
#signin{display:grid;gap:6px;margin-top:30px;text-align:left}
#signin label{font-size:13px;line-height:20px;color:var(--text)}
#signin label+input{margin-bottom:6px}
#signin input{width:100%;min-height:48px;background:var(--surface);border-color:var(--line-hi)}
#signin button{width:100%;min-height:48px;margin-top:12px;padding:11px 18px}
#gateMsg:not(:empty){display:block;margin-top:20px;padding:8px 12px;font-size:12px;
  line-height:20px;color:var(--err);border:1px solid #e8918f55;border-radius:var(--r-sm)}

/* ── Skrin besar ─────────────────────────────────────────────────
   Satu-satunya media query dalam fail ni, dan ia min-width. */
@media(min-width:768px){
  main{padding:32px 24px 96px}
  /* Tiada zum-atas-fokus pada desktop, jadi kepadatan menang semula. */
  input,select{font-size:14px;padding:8px 10px;min-height:auto}
  textarea{font-size:14px;padding:8px 10px}
  .btn.sm{min-height:36px}
}