/* =====================================================================
   Gaya panel admin Pengurus Media Sosial AI

   Reka bentuk: CSS tulen, tiada rangka kerja. Sasaran ialah shared host:
   setiap permintaan rangkaian tambahan memperlambat panel, dan CDN sering
   disekat oleh dasar CSP host.

   Dua tema: cerah (lalai) dan gelap. Dipilih dengan atribut data-theme
   pada elemen <html>:

       <html data-theme="light">   atau   <html data-theme="dark">

   Setiap warna di bawah ialah pemboleh ubah. Tiada warna keras di tempat
   lain dalam fail ini, supaya menukar tema hanya menukar pemboleh ubah.

   Saiz fon menggunakan unit relatif supaya panel boleh digunakan pada
   telefon - admin selalunya perlu meluluskan kandungan dari telefon.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TEMA CERAH (lalai)
   --------------------------------------------------------------------- */
:root,
[data-theme="light"] {
    /* Permukaan */
    --bg:             #f4f6fa;
    --bg-elevated:    #ffffff;
    --bg-input:       #ffffff;
    --bg-subtle:      #f8fafc;
    --hover-bg:       #f1f5f9;

    /* Sempadan */
    --border:         #e3e8ef;
    --border-strong:  #cbd5e1;

    /* Teks */
    --text:           #0f172a;
    --text-muted:     #526581;
    --text-dim:       #7c8aa0;

    /* Aksen korporat */
    --accent:         #1d4ed8;
    --accent-hover:   #1e40af;
    --accent-subtle:  #eef2ff;
    --accent-contrast: #ffffff;
    --accent-border:  rgba(29, 78, 216, 0.35);
    --accent-ring:    rgba(29, 78, 216, 0.15);

    /* Status */
    --success:        #15803d;
    --success-bg:     #f0fdf4;
    --success-text:   #14532d;
    --success-strong: #166534;
    --success-border: rgba(21, 128, 61, 0.30);

    --warning:        #b45309;
    --warning-bg:     #fffbeb;
    --warning-text:   #78350f;
    --warning-border: rgba(180, 83, 9, 0.30);
    --warning-border-strong: rgba(180, 83, 9, 0.40);

    --danger:         #b91c1c;
    --danger-bg:      #fef2f2;
    --danger-text:    #7f1d1d;
    --danger-border:  rgba(185, 28, 28, 0.30);
    --danger-border-strong: rgba(185, 28, 28, 0.40);
    --danger-fill:    rgba(185, 28, 28, 0.10);

    --info:           #0e7490;
    --info-bg:        #ecfeff;
    --info-text:      #164e63;
    --info-border:    rgba(14, 116, 144, 0.35);

    /* Isyarat latar - hover baris, jalur jadual, kod sebaris */
    --signal-faint:       rgba(15, 23, 42, 0.02);
    --signal-strong:      rgba(15, 23, 42, 0.06);
    --signal-muted:       rgba(100, 116, 139, 0.12);
    --signal-muted-faint: rgba(100, 116, 139, 0.10);

    /* Warna jenama platform */
    --brand-facebook:        #1877f2;
    --brand-facebook-border: rgba(24, 119, 242, 0.35);
    --brand-instagram:        #c13584;
    --brand-instagram-border: rgba(193, 53, 132, 0.35);
    --brand-threads:          #334155;
    --brand-threads-border:   rgba(51, 65, 85, 0.28);

    /* Bentuk dan bayang */
    --radius:    10px;
    --radius-sm: 8px;
    --shadow:    0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);

    --sidebar-width: 250px;
}

/* ---------------------------------------------------------------------
   TEMA GELAP

   Nilai status di sini lebih terang daripada tema cerah: warna yang cukup
   gelap untuk latar putih menjadi tidak terbaca pada latar gelap. Latar
   status juga menjadi gelap supaya kad kekal sebagai satu permukaan.
   --------------------------------------------------------------------- */
[data-theme="dark"] {
    /* Permukaan */
    --bg:             #0f1419;
    --bg-elevated:    #161b22;
    --bg-input:       #0d1117;
    --bg-subtle:      #11161d;
    --hover-bg:       #1f2630;

    /* Sempadan */
    --border:         #26303d;
    --border-strong:  #38434f;

    /* Teks */
    --text:           #e6edf3;
    --text-muted:     #9aa7b4;
    --text-dim:       #7d8896;

    /* Aksen */
    --accent:         #4a95f9;
    --accent-hover:   #6ba8ff;
    --accent-subtle:  #12283f;
    --accent-contrast: #0b1017;
    --accent-border:  rgba(74, 149, 249, 0.40);
    --accent-ring:    rgba(74, 149, 249, 0.25);

    /* Status */
    --success:        #3fb950;
    --success-bg:     #12261a;
    --success-text:   #7ee787;
    --success-strong: #4ac95c;
    --success-border: rgba(63, 185, 80, 0.35);

    --warning:        #d29922;
    --warning-bg:     #2a2113;
    --warning-text:   #e3b341;
    --warning-border: rgba(210, 153, 34, 0.40);
    --warning-border-strong: rgba(210, 153, 34, 0.55);

    --danger:         #f85149;
    --danger-bg:      #2d1618;
    --danger-text:    #ff9d95;
    --danger-border:  rgba(248, 81, 73, 0.40);
    --danger-border-strong: rgba(248, 81, 73, 0.55);
    --danger-fill:    rgba(248, 81, 73, 0.20);

    --info:           #58a6ff;
    --info-bg:        #122436;
    --info-text:      #9cc9ff;
    --info-border:    rgba(88, 166, 255, 0.40);

    /* Isyarat latar */
    --signal-faint:       rgba(255, 255, 255, 0.02);
    --signal-strong:      rgba(255, 255, 255, 0.06);
    --signal-muted:       rgba(139, 148, 158, 0.15);
    --signal-muted-faint: rgba(139, 148, 158, 0.12);

    /* Warna jenama platform */
    --brand-facebook:        #6ba8ff;
    --brand-facebook-border: rgba(107, 168, 255, 0.40);
    --brand-instagram:        #f77fa8;
    --brand-instagram-border: rgba(247, 127, 168, 0.40);
    --brand-threads:          #cfd8e3;
    --brand-threads-border:   rgba(207, 216, 227, 0.35);

    /* Bentuk dan bayang */
    --radius:    8px;
    --radius-sm: 6px;
    --shadow:    0 4px 16px rgba(0, 0, 0, 0.4);

    --sidebar-width: 240px;
}

* { box-sizing: border-box; }

/* Pautan mengikut warna aksen tema: biru lalai pelayar tidak terbaca pada
   latar gelap. Butang, nav, dan kad statistik menetapkan warna sendiri. */
a { color: var(--accent); }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
}

/* ---------------------------------------------------------------------
   Susun atur
   --------------------------------------------------------------------- */
.layout {
    display: grid;
    /* minmax(0, 1fr): tanpa ini, kandungan panjang yang tidak boleh
       dipecahkan (arahan cron, URL) menolak lajur melebihi skrin dan
       seluruh halaman boleh diskrol ke tepi. */
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    /* Ruang bawah untuk suis tema, yang dilekatkan pada bawah bar sisi.
       Tanpa ini, item menu terakhir tersembunyi di belakangnya. */
    padding: 1.25rem 0 4.25rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.brand__name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.brand__version {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 0.15rem 0 0;
}

.nav { list-style: none; margin: 0; padding: 0; }

.nav__item { margin: 0.1rem 0.6rem; }

.nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.12s, color 0.12s;
}

.nav__link:hover { background: var(--signal-strong); color: var(--text); }

.nav__link.is-active {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 500;
}

.nav__label { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.nav__link .icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; opacity: 0.85; }
.nav__link.is-active .icon { opacity: 1; }

.nav__count {
    background: var(--danger);
    color: var(--accent-contrast);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    min-width: 1.3rem;
    text-align: center;
}

.nav__count--muted { background: var(--border-strong); color: var(--text-muted); }

.nav__section {
    padding: 1rem 1.25rem 0.4rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
}

.main { padding: 1.5rem 2rem 4rem; max-width: 1500px; min-width: 0; }

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-head h1 { font-size: 1.5rem; margin: 0 0 0.25rem; letter-spacing: -0.02em; }
.page-head p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }

.page-head__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------------
   Kad
   --------------------------------------------------------------------- */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.25rem;
}

.card--flush { padding: 0; overflow: hidden; }
.card--danger { border-color: var(--danger); background: var(--danger-bg); }
.card--warning { border-color: var(--warning); background: var(--warning-bg); }

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.card__title { font-size: 1rem; margin: 0; font-weight: 600; }
.card__subtitle { margin: 0.15rem 0 0; color: var(--text-muted); font-size: 0.85rem; }
.card__body > *:last-child { margin-bottom: 0; }

.grid { display: grid; gap: 1.25rem; }
/* Item grid lalai min-width: auto, jadi kandungan panjang meregangkan lajur. */
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Kad statistik */
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat__label { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.stat__value { font-size: 1.9rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.stat__hint { color: var(--text-dim); font-size: 0.78rem; }
.stat__value--warning { color: var(--warning); }
.stat__value--danger { color: var(--danger); }
.stat__value--success { color: var(--success); }
.stat__value--accent { color: var(--accent); }

.stat__link { text-decoration: none; color: inherit; display: block; }
.stat__link:hover .stat__value { color: var(--accent); }

/* ---------------------------------------------------------------------
   Jadual
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

table.data th {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background: var(--signal-faint);
}

table.data td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--signal-faint); }
table.data td.nowrap, table.data th.nowrap { white-space: nowrap; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

.cell-excerpt {
    max-width: 34rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cell-muted { color: var(--text-muted); font-size: 0.82rem; }

/* ---------------------------------------------------------------------
   Lencana status
   --------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge--draft, .badge--pending, .badge--queued, .badge--received {
    background: var(--signal-muted); color: var(--text-muted); border-color: var(--border-strong);
}
.badge--pending_review, .badge--generating {
    background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border);
}
.badge--approved, .badge--scheduled {
    background: var(--info-bg); color: var(--info); border-color: var(--info-border);
}
.badge--publishing, .badge--posting { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-border); }
.badge--posted, .badge--ok, .badge--active, .badge--processed {
    background: var(--success-bg); color: var(--success); border-color: var(--success-border);
}
.badge--failed, .badge--error, .badge--needs_reauth, .badge--rejected {
    background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border);
}
.badge--partial, .badge--stale, .badge--skipped, .badge--warning, .badge--skipped_overlap, .badge--skipped_budget, .badge--skipped_disabled, .badge--ignored {
    background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border);
}
.badge--cancelled, .badge--disabled {
    background: var(--signal-muted-faint); color: var(--text-dim); border-color: var(--border);
}
.badge--positive { background: var(--success-bg); color: var(--success); }
.badge--negative { background: var(--danger-bg); color: var(--danger); }
.badge--neutral, .badge--unknown { background: var(--signal-muted); color: var(--text-muted); }

.badge--platform { background: var(--signal-strong); color: var(--text); border-color: var(--border-strong); font-weight: 500; }
.badge--facebook  { color: var(--brand-facebook); border-color: var(--brand-facebook-border); }
.badge--instagram { color: var(--brand-instagram); border-color: var(--brand-instagram-border); }
.badge--threads   { color: var(--brand-threads); border-color: var(--brand-threads-border); }

/* ---------------------------------------------------------------------
   Borang
   --------------------------------------------------------------------- */
.form-row { margin-bottom: 1rem; }
.form-row--inline { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }

label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.3rem; }
.label-hint { display: block; color: var(--text-muted); font-size: 0.8rem; font-weight: 400; margin-top: 0.2rem; }

input[type="text"], input[type="password"], input[type="number"], input[type="url"],
input[type="email"], input[type="datetime-local"], input[type="date"], input[type="time"],
input[type="search"], select, textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 0.5rem 0.65rem;
    font: inherit;
    font-size: 0.9rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

input[readonly] { color: var(--text-muted); background: var(--signal-faint); }
input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 1; }

/* Medan muat naik: butang pilih fail digayakan seperti .btn. */
input[type="file"] {
    width: 100%;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.4rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}
input[type="file"]::file-selector-button {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    margin-right: 0.75rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
}
textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
select { cursor: pointer; }

.field-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem; }
.field-help { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.3rem; line-height: 1.45; }
.field-help strong { color: var(--text); font-weight: 600; }

/* Penanda wajib / pilihan dalam label. */
.req { color: var(--danger); font-weight: 600; }
.opt { color: var(--text-dim); font-weight: 400; font-size: 0.78rem; }

.checkbox-row { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.6rem; }
.checkbox-row input { width: auto; margin-top: 0.2rem; flex-shrink: 0; }
.checkbox-row label { margin: 0; font-weight: 400; }

/* Butiran lanjutan */
details.advanced { margin: 0.75rem 0; }
details.advanced > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0.35rem 0;
    user-select: none;
}
details.advanced > summary:hover { color: var(--text); }
details.advanced[open] > summary { color: var(--text); margin-bottom: 0.6rem; }

/* ---------------------------------------------------------------------
   Butang
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.87rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.btn:hover { background: var(--hover-bg); border-color: var(--border-strong); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--success { background: var(--success); border-color: var(--success); color: var(--accent-contrast); }
.btn--success:hover { background: var(--success-strong); border-color: var(--success-strong); }

.btn--danger { background: var(--danger-bg); border-color: var(--danger-border-strong); color: var(--danger); }
.btn--danger:hover { background: var(--danger-fill); }

.btn--warning { background: var(--warning-bg); border-color: var(--warning-border-strong); color: var(--warning); }

.btn--sm { padding: 0.28rem 0.6rem; font-size: 0.8rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--signal-strong); color: var(--text); border-color: transparent; }

.btn-group { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.btn-group form { display: inline; }

/* ---------------------------------------------------------------------
   Mesej sekejap (flash)
   --------------------------------------------------------------------- */
.flash-stack { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }

.flash {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: 0.88rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.flash--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.flash--error   { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.flash--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.flash--info    { background: var(--info-bg);    border-color: var(--info-border); color: var(--info-text); }

/* ---------------------------------------------------------------------
   Amaran sistem
   --------------------------------------------------------------------- */
.alert {
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 0.87rem;
}
.alert--error   { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert--info    { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
/* Hanya tajuk amaran (anak langsung) menjadi blok; <strong> dalam ayat kekal sebaris. */
.alert > strong:first-child { display: block; margin-bottom: 0.2rem; }

/* ---------------------------------------------------------------------
   Kekosongan (empty state)
   --------------------------------------------------------------------- */
.empty {
    text-align: center;
    padding: 2.75rem 1.5rem;
    color: var(--text-muted);
}
.empty__title { font-size: 1rem; color: var(--text); margin: 0 0 0.4rem; font-weight: 600; }
.empty p { margin: 0 auto 1rem; max-width: 34rem; font-size: 0.88rem; }

/* Kod / teks monospace */
code, .mono {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
    font-size: 0.85em;
    background: var(--signal-strong);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    /* Senarai panjang tanpa ruang (skop OAuth, ID, URL) mesti boleh dipecahkan. */
    overflow-wrap: anywhere;
}

.code-block {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    overflow-x: auto;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text);
}

.copy-row { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 0.6rem; }
.copy-row input { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; }

/* Imej pratonton */
.thumb {
    width: 100%;
    max-width: 22rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: block;
    background: var(--bg-subtle);
}
.thumb--sm { max-width: 4.5rem; }

/* Senarai definisi */
dl.meta { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; font-size: 0.85rem; }
dl.meta dt { color: var(--text-muted); }
dl.meta dd { margin: 0; word-break: break-word; }

/* Bar kemajuan mudah */
.meter { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.meter__bar { flex: 1; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; min-width: 4rem; }
.meter__fill { height: 100%; background: var(--accent); border-radius: 999px; }
.meter__fill--warning { background: var(--warning); }
.meter__fill--danger { background: var(--danger); }

/* Penapis */
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filters .form-row { margin: 0; min-width: 9rem; }

/* Pilihan platform (kotak semak berkotak) */
.platform-choice { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.platform-choice label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.7rem;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    font-size: 0.85rem;
    background: var(--bg-input);
}
.platform-choice label:hover { border-color: var(--accent); }
.platform-choice input { width: auto; margin: 0; }
.platform-choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }

/* Halaman log masuk */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}
.login-card { width: 100%; max-width: 24rem; }
.login-card .brand { border: none; padding: 0; margin-bottom: 1.25rem; text-align: center; }

/* Kolum pratonton platform */
.preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    background: var(--bg-input);
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 18rem;
    overflow-y: auto;
}
.preview__meta { color: var(--text-dim); font-size: 0.75rem; margin-top: 0.5rem; }

/* Nota kecil */
.note { color: var(--text-muted); font-size: 0.8rem; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =====================================================================
   MUDAH ALIH

   Bar sisi menjadi laci luar skrin dengan bar atas dan butang menu.
   Susunan mendatar sebelumnya menyebabkan item menu membalut ke beberapa
   baris dan mengambil sebahagian besar skrin telefon.

   Laci dikawal oleh kotak semak (lihat .nav-toggle dalam markup), jadi ia
   berfungsi TANPA JavaScript.
   ===================================================================== */

/* Kotak semak tersembunyi yang mengawal laci. `hidden` dalam HTML
   dikalahkan oleh display: none di sini supaya :checked masih berfungsi. */
.nav-toggle { display: none; }

/* Bar atas: telefon sahaja. */
.mobile-bar {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
}

.mobile-bar__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    cursor: pointer;
    margin: 0;
}

/* Ikon hamburger dilukis dengan CSS: tiga bar. */
.mobile-bar__icon,
.mobile-bar__icon::before,
.mobile-bar__icon::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    content: '';
}

.mobile-bar__icon { position: relative; }
.mobile-bar__icon::before { position: absolute; top: -5px; }
.mobile-bar__icon::after { position: absolute; top: 5px; }

.mobile-bar__title {
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lapisan gelap di belakang laci. */
.nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 40;
    cursor: pointer;
    margin: 0;
}

@media (max-width: 900px) {
    /* Bar sisi keluar dari aliran dan menjadi laci. */
    .layout { display: block; }

    .mobile-bar { display: flex; }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(19rem, 84vw);
        height: auto;
        padding: 1rem 0;
        border-right: 1px solid var(--border);
        border-bottom: none;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 50;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* .sidebar berada DI DALAM .layout, jadi ia bukan adik-beradik kotak
       semak. Pemilih "~ .sidebar" tidak pernah sepadan: lapisan gelap
       muncul tetapi laci kekal di luar skrin. */
    .nav-toggle:checked ~ .layout .sidebar { transform: translateX(0); }
    .nav-toggle:checked ~ .nav-scrim { display: block; }

    /* Bar sisi laci bukan skrol sendiri - ia mengambil tinggi penuh. */
    .main { padding: 1rem 1rem 3rem; }

    /* Sasaran ketuk: sekurang-kurangnya 44px tinggi, disyorkan untuk
       sentuhan oleh garis panduan kebolehcapaian. */
    .nav__link {
        padding: 0.7rem 0.8rem;
        font-size: 0.95rem;
    }

    .nav__item { margin: 0.1rem 0.75rem; }
    .nav__section { padding: 1.1rem 1.1rem 0.4rem; }

    /* Jangan biarkan halaman di belakang laci skrol. Yang diskrol ialah
       body, jadi kunci mesti diletakkan pada body. */
    body:has(.nav-toggle:checked) { overflow: hidden; }
}

@media (max-width: 640px) {
    /* Grid bertindan. Nilai asas dahulunya minmax(340px), yang
       melimpah pada telefon 360px dan menyebabkan skrol mendatar. */
    .grid,
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .main { padding: 0.9rem 0.8rem 3rem; }

    .card { padding: 0.9rem 1rem; border-radius: var(--radius-sm); }

    .page-head { margin-bottom: 1rem; gap: 0.6rem; }
    .page-head h1 { font-size: 1.15rem; }
    .page-head p { font-size: 0.85rem; }

    /* Butang penuh lebar: lebih mudah ditekan dengan ibu jari. */
    .page-head__actions .btn { flex: 1; justify-content: center; }

    .btn { min-height: 2.5rem; }

    .stat__value { font-size: 1.45rem; }

    /* Jadual: skrol mendatar terkandung, dengan bayang di tepi supaya
       jelas ada lebih kandungan. */
    .table-wrap {
        margin: 0 -1rem;
        padding: 0 1rem;
        -webkit-overflow-scrolling: touch;
    }

    table.data { font-size: 0.82rem; }
    table.data th, table.data td { padding: 0.5rem 0.55rem; }

    /* Lajur pertama melekat supaya baris kekal boleh dikenal pasti
       semasa skrol mendatar. */
    table.data th:first-child,
    table.data td:first-child {
        position: sticky;
        left: 0;
        background: var(--bg-elevated);
        z-index: 1;
    }

    table.data th:first-child { background: var(--bg-subtle); }

    /* Bar sisi gelap pada lajur lekat perlu sempadan pemisah. */
    table.data td:first-child { box-shadow: 1px 0 0 var(--border); }
    table.data th:first-child { box-shadow: 1px 0 0 var(--border); }

    /* Elak zum automatik iOS pada medan borang: fon mesti >= 16px. */
    input[type="text"], input[type="password"], input[type="number"],
    input[type="url"], input[type="email"], input[type="datetime-local"],
    input[type="date"], input[type="time"], input[type="search"], select, textarea {
        font-size: 16px;
    }

    .btn-group { flex-direction: column; align-items: stretch; }
    .btn-group .btn { width: 100%; justify-content: center; }

    .form-row--inline { flex-direction: column; align-items: stretch; }
    .filters { flex-direction: column; align-items: stretch; }
    .filters .form-row { min-width: 0; }

    .copy-row { flex-direction: column; }
    .copy-row .btn { width: 100%; }

    dl.meta { grid-template-columns: 1fr; gap: 0.15rem 0; }
    dl.meta dt { margin-top: 0.5rem; font-weight: 600; }

    .theme-switch { position: static; }

    .platform-choice label { flex: 1 1 auto; justify-content: center; }
}

@media print {
    /* Warna cetak ditetapkan secara eksplisit. Menggunakan pemboleh ubah
       tema di sini menghasilkan teks gelap pada latar gelap apabila tema
       gelap aktif - halaman bercetak menjadi tidak terbaca. */
    .sidebar, .mobile-bar, .nav-scrim, .page-head__actions, .btn, .theme-switch {
        display: none !important;
    }

    body { background: #fff; color: #000; }

    .card {
        border-color: #ccc;
        background: #fff;
        box-shadow: none;
    }

    table.data th, table.data td { border-color: #ccc; }
    a { color: #000; text-decoration: underline; }
}

/* ---------------------------------------------------------------------
   Halaman undang-undang awam (Dasar Privasi, Terma Perkhidmatan)

   Berbeza daripada halaman log masuk: ini prosa panjang yang dibaca, bukan
   papan pemuka yang dipindai. Lebar lajur dihadkan supaya baris teks tidak
   terlalu panjang untuk dibaca dengan selesa.
   --------------------------------------------------------------------- */
.legal-page {
    max-width: 54rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.legal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.85rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
}

.legal-head__brand {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.legal-head__nav { display: flex; gap: 1rem; font-size: 0.88rem; }
.legal-head__nav a { color: var(--text-muted); text-decoration: none; }
.legal-head__nav a:hover { color: var(--text); text-decoration: underline; }
.legal-head__nav a.is-active { color: var(--accent); font-weight: 600; }

.legal-doc { line-height: 1.7; font-size: 0.94rem; }
.legal-doc h1 { font-size: 1.6rem; margin: 0 0 0.35rem; letter-spacing: -0.02em; }
.legal-doc h2 {
    font-size: 1.1rem;
    margin: 2rem 0 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    letter-spacing: -0.01em;
}
.legal-doc h3 { font-size: 0.97rem; margin: 1.35rem 0 0.4rem; }
.legal-doc p { margin: 0 0 0.85rem; }
.legal-doc ul { margin: 0 0 0.85rem; padding-left: 1.35rem; }
.legal-doc li { margin-bottom: 0.35rem; }
.legal-doc a { color: var(--accent); }

.legal-meta { color: var(--text-muted); font-size: 0.83rem; margin: 0 0 1.5rem; }

.legal-note {
    background: var(--accent-subtle);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.legal-facts { list-style: none; padding-left: 0; }
.legal-facts li { padding: 0.3rem 0; border-bottom: 1px dashed var(--border); }
.legal-facts li:last-child { border-bottom: none; }

.legal-foot {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.83rem;
}
.legal-foot p { margin: 0; }
.legal-foot a { color: var(--text-muted); }

@media (max-width: 720px) {
    .legal-page { padding: 1.25rem 1rem 3rem; }
    .legal-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
/* ---------------------------------------------------------------------
   Suis tema

   Di dalam bar sisi dan bukan terapung: ia halaman berkaitan paparan,
   bukan tindakan pada data, dan meletakkannya dalam bar sisi bermakna ia
   tidak menutupi kandungan pada telefon.

   Halaman log masuk tiada bar sisi, jadi ia menggunakan .theme-switch--floating.
   --------------------------------------------------------------------- */
.theme-switch {
    display: flex;
    gap: 0.3rem;
    margin: 1.25rem 0.85rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.theme-switch form { flex: 1; display: flex; margin: 0; }

.theme-switch__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.5rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.theme-switch__btn:hover { color: var(--text); border-color: var(--border-strong); }

.theme-switch__btn.is-active {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-subtle);
    font-weight: 600;
}
/* Pautan undang-undang pada kad log masuk.
   Diletakkan di bawah borang dan dipisahkan dengan garis halus: cukup
   kelihatan untuk memenuhi keperluan Meta dan untuk pengguna membacanya
   sebelum memberi akses akaun, tetapi tidak bersaing dengan borang. */
.login-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.login-legal a {
    color: var(--text-muted);
    text-decoration: none;
}

.login-legal a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.login-legal span { color: var(--text-dim); }
/* Suis tema pada halaman log masuk.
   Halaman itu tiada bar sisi, jadi suis terapung di penjuru atas kanan.
   Ia keluar dari aliran dokumen supaya kad log masuk kekal di tengah. */
.theme-switch--floating {
    position: fixed;
    top: 1rem;
    right: 1rem;
    left: auto;
    bottom: auto;
    width: auto;
    padding: 0.25rem;
    gap: 0.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.theme-switch--floating form { flex: 0 0 auto; }

.theme-switch--floating .theme-switch__btn {
    padding: 0.3rem 0.7rem;
    background: transparent;
    border-color: transparent;
}

.theme-switch--floating .theme-switch__btn:hover {
    background: var(--hover-bg);
    border-color: transparent;
}

.theme-switch--floating .theme-switch__btn.is-active {
    background: var(--accent-subtle);
    border-color: var(--accent-border);
}

@media (max-width: 720px) {
    .theme-switch--floating {
        position: static;
        margin: 1rem auto 0;
        width: fit-content;
        border-radius: var(--radius);
    }
}
/* Kotak bayang hanya untuk suis terapung (halaman log masuk); suis dalam
   bar sisi sudah dipisahkan dengan garis sempadan. */
.theme-switch--floating { box-shadow: var(--shadow); }

/* Sasaran ketuk pada telefon: sekurang-kurangnya 44px, seperti disyorkan
   garis panduan kebolehcapaian. */
@media (max-width: 900px) {
    .theme-switch__btn { min-height: 2.5rem; font-size: 0.85rem; }
}

/* Ikon hamburger perlu kontras pada kedua-dua tema: ia menggunakan
   --text, yang bertukar bersama tema. */ 
.mobile-bar__menu:hover { border-color: var(--border-strong); }

/* Bar sisi laci tidak perlu ruang bawah untuk suis tema kerana suis kini
   berada dalam aliran dokumen, bukan terapung. */
@media (max-width: 900px) {
    .sidebar { padding-bottom: 2rem; }
}
/* =====================================================================
   IKON
   ===================================================================== */
.icon { width: 1rem; height: 1rem; flex: 0 0 auto; vertical-align: -0.15em; }
.icon--md { width: 1.25rem; height: 1.25rem; }

/* =====================================================================
   PENGGUNA DI BAR SISI
   Log keluar diletakkan di sini (bukan di kaki halaman) supaya mudah
   ditemui pada setiap halaman, termasuk di telefon.
   ===================================================================== */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0.85rem 0;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}
.sidebar-user__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--accent);
    flex: 0 0 auto;
}
.sidebar-user__meta { min-width: 0; flex: 1; line-height: 1.25; color: inherit; text-decoration: none; }
.sidebar-user__meta:hover .sidebar-user__name { color: var(--accent); }
.sidebar-user__name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user__role { display: block; font-size: 0.72rem; color: var(--text-muted); }
.sidebar-user form { margin: 0; }
.sidebar-user .btn { padding: 0.4rem; min-height: 0; }

/* =====================================================================
   KOTAK PANDUAN ("Cara guna halaman ini")
   ===================================================================== */
.guide {
    background: var(--accent-subtle);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}
.guide__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.guide__summary::-webkit-details-marker { display: none; }
.guide__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--accent);
    flex: 0 0 auto;
}
.guide__heading { flex: 1; min-width: 0; font-size: 0.9rem; }
.guide__heading strong { display: block; color: var(--text); }
.guide__lead { display: block; color: var(--text-muted); font-size: 0.84rem; }
.guide__toggle { color: var(--accent); transition: transform 0.15s; display: inline-flex; }
.guide[open] .guide__toggle { transform: rotate(90deg); }
.guide__steps {
    margin: 0;
    padding: 0 1.25rem 0.9rem 3.9rem;
    font-size: 0.88rem;
    line-height: 1.55;
}
.guide__steps li { margin-bottom: 0.35rem; padding-left: 0.2rem; }
.guide__steps li::marker { color: var(--accent); font-weight: 700; }
.guide__tip {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0 1rem 0.9rem 3.1rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    color: var(--text-muted);
}
.guide__tip .icon { color: var(--warning); margin-top: 0.15rem; }

/* =====================================================================
   TAB (halaman Tetapan)
   ===================================================================== */
.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
}
.tabs__link {
    padding: 0.6rem 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.tabs__link:hover { color: var(--text); }
.tabs__link.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* =====================================================================
   HALAMAN PANDUAN
   ===================================================================== */
.flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    counter-reset: flow;
    margin: 0;
    padding: 0;
    list-style: none;
}
.flow li {
    counter-increment: flow;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.8rem 0.9rem;
    font-size: 0.86rem;
    color: var(--text-muted);
}
.flow li::before {
    content: counter(flow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}
.flow li strong { display: block; color: var(--text); margin-bottom: 0.15rem; }

.help-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }

.help-section { scroll-margin-top: 4.5rem; }
.help-section p, .help-section li { font-size: 0.9rem; line-height: 1.6; }
.help-section h3 { font-size: 0.93rem; margin: 1rem 0 0.35rem; }
.help-section ul, .help-section ol { padding-left: 1.25rem; margin: 0.35rem 0 0.75rem; }

.faq details { border-top: 1px solid var(--border); padding: 0.65rem 0; }
.faq details:first-child { border-top: none; padding-top: 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.faq details p { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.88rem; }

/* Baris butang simpan di hujung borang: dipisahkan supaya jelas ia
   menyimpan SEMUA medan di atasnya, termasuk bahagian yang boleh dilipat. */
.form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Tindakan pantas di papan pemuka */
.quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 640px) {
    .guide__steps { padding-left: 2.6rem; padding-right: 0.9rem; }
    .guide__tip { margin-left: 0.9rem; }
    .guide__summary { padding: 0.7rem 0.85rem; }
    .tabs { margin-left: -0.8rem; margin-right: -0.8rem; padding: 0 0.8rem; }
}