/* =====================================================================
   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; }

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;
    grid-template-columns: var(--sidebar-width) 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__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; }

.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; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 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-dim); font-size: 0.78rem; 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"],
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); }
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-dim); font-size: 0.78rem; margin-top: 0.3rem; }

.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); }
.alert strong { 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;
}

.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;
    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-dim); 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;
}

/* Bar tindakan melekit pada telefon */
@media (max-width: 720px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0.75rem 0;
    }
    .brand { padding: 0 1rem 0.75rem; }
    .nav { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0 0.75rem; }
    .nav__item { margin: 0; }
    .nav__link { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
    .nav__section { display: none; }
    .main { padding: 1.25rem 1rem 3rem; }
    .page-head h1 { font-size: 1.25rem; }
    .stat__value { font-size: 1.5rem; }
    table.data { font-size: 0.82rem; }
    table.data th, table.data td { padding: 0.55rem 0.6rem; }
}

@media print {
    .sidebar, .page-head__actions, .btn { display: none !important; }
    body { background: var(--accent-contrast); color: var(--bg-subtle); }
    .card { border-color: #ccc; background: var(--accent-contrast); }
}

/* ---------------------------------------------------------------------
   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

   Diletakkan pada bar sisi dan bukan dalam kandungan halaman: tema ialah
   pilihan peranti, bukan tindakan pada data semasa. Melekat pada bawah
   bar sisi bermakna ia sentiasa kelihatan tanpa mengambil ruang kandungan.
   --------------------------------------------------------------------- */
.theme-switch {
    position: fixed;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    display: flex;
    gap: 0.3rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    z-index: 20;
}

.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.35rem 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;
}

/* Pada telefon bar sisi menjadi bar mendatar, jadi suis kembali ke dalam
   aliran dokumen dan menjadi baris penuh. */
@media (max-width: 720px) {
    .theme-switch {
        position: static;
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        border-top: none;
    }
}

@media print {
    .theme-switch { display: none !important; }
}
/* 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);
    }
}