/*!
 * ============================================================================
 *  UMK ACADEMIC ANALYTICS - TEMA KANONIKAL (SATU SUMBER WARNA)
 *  Fail    : css/umk-theme.css
 *  Tujuan  : Menyeragamkan token warna, ruang, jejari dan bayang untuk
 *            SEMUA halaman - landing awam (index.cfm) dan admin (admin/*.cfm).
 *
 *  Cara guna
 *  ---------
 *  1) Halaman yang memuatkan fail ini mendapat token di dalam :root sahaja
 *     (tidak mengganggu gaya lama). Untuk gaya halaman penuh, letak kelas
 *     "umk-theme" pada <body> - contoh: <body class="umk-theme">.
 *  2) JANGAN tulis warna hard-code (#1a73e8, rgba(...)) di dalam CSS/CFM
 *     halaman. Guna token di bawah supaya pertukaran warna masa depan hanya
 *     perlu dibuat di SATU tempat (fail ini).
 *  3) admin/ui/dashboard.css memetakan token lamanya (--ui-*, --primary-*,
 *     --accent-*) kepada token fail ini. Halaman lama tidak perlu diubah.
 *
 *  Susunan fail
 *  ------------
 *   1. Token warna & ukuran (palet rasmi)
 *   2. Jambatan (bridge) token lama -> token baharu
 *   3. Tipografi Roboto
 *   4. Asas halaman (body.umk-theme)
 *   5. Komponen kongsi: butang, kad, jadual, borang, pill status
 *   6. Butang "naik ke atas" (back-to-top) + bar progres bacaan
 *   7. Utiliti responsif (mobile friendly)
 *   8. Cetakan & penghormatan prefers-reduced-motion
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * 1. TOKEN WARNA & UKURAN
 *    Palet rasmi yang ditetapkan pengurusan sistem (6 warna + 3 neutral).
 * ------------------------------------------------------------------------- */
:root {
    /* --- Warna asas rasmi ------------------------------------------------- */
    --bg:         #f4f7fc;   /* latar halaman */
    --panel:      #ffffff;   /* latar kad / panel */
    --panel2:     #e8f0fe;   /* latar panel sekunder, header jadual, tint biru */
    --text:       #102a43;   /* teks utama (kontras 14.6:1 atas --panel) */
    --muted:      #5b6b7c;   /* teks sekunder (kontras 5.4:1 atas --panel) */
    --line:       #d7e0ee;   /* garis sempadan */
    --blue:       #1a73e8;   /* biru tindakan / pautan (4.5:1 atas --panel) */
    --blue-dark:  #0b3d91;   /* biru institusi: header, tajuk (10:1) */
    --green:      #178a4c;   /* kejayaan / aktif (guna --green-dark utk teks) */
    --amber:      #b45309;   /* amaran (5:1) */
    --danger:     #c5221f;   /* ralat / padam (5.7:1) */
    --radius:     16px;      /* jejari bucu standard */
    --shadow:     0 4px 24px rgba(16, 42, 67, .08);

    /* --- Token terbitan (tin/keadaan) - supaya konsisten di seluruh sistem --
     *     Tambahan ini tidak mengubah palet rasmi, hanya menyediakan
     *     versi lembut untuk latar, hover, dan teks yang lulus kontras AA. */
    --panel3:       #f9fbff;   /* latar baris genap / jalur halus */
    --line-soft:    #e6edf7;   /* garis lebih halus (dalam kad) */
    --muted-soft:   #8194a8;   /* teks bantuan sangat kecil */
    --blue-hover:   #1663c7;   /* biru hover butang */
    --blue-ink:     #0b3d91;   /* teks biru atas putih (sama --blue-dark) */
    --blue-soft:    #e8f0fe;   /* tin biru (sama --panel2) */
    --blue-line:    #c7dbf7;   /* garis tin biru */
    --green-dark:   #0f7a42;   /* teks hijau atas putih (5.4:1 - guna ini utk teks) */
    --green-soft:   #e6f4ec;
    --green-line:   #b9e0c9;
    --amber-soft:   #fdf3e3;
    --amber-line:   #f3d9ad;
    --danger-soft:  #fdecec;
    --danger-line:  #f6c9c7;

    /* --- Jejari, bayang, jarak -------------------------------------------- */
    --radius-lg:   22px;
    --radius-sm:   10px;
    --radius-xs:   8px;
    --radius-pill: 999px;
    --space:       16px;
    --shadow-sm:   0 1px 3px rgba(16, 42, 67, .06);
    --shadow-md:   0 4px 24px rgba(16, 42, 67, .08);
    --shadow-lg:   0 18px 44px rgba(11, 61, 145, .16);
    --ring:        0 0 0 3px rgba(26, 115, 232, .25);
    --trans:       .22s cubic-bezier(.4, 0, .2, 1);

    /* --- Gradien (hanya dua, dikongsi semua halaman) ---------------------- */
    --grad-blue:   linear-gradient(135deg, #0b3d91 0%, #1a73e8 100%);
    --grad-header: linear-gradient(120deg, #0b3d91 0%, #14509f 55%, #1a73e8 100%);

    /* --- Susun atur ------------------------------------------------------- */
    --maxw:        1200px;
    --header-h:    64px;

    /* --- Tipografi -------------------------------------------------------- */
    --font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-num: "Roboto", "Segoe UI", Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
 * 2. JAMBATAN TOKEN LAMA -> TOKEN BAHARU
 *    Nama lama masih digunakan oleh ratusan baris CSS/CFM sedia ada.
 *    Kita hanya tukar NILAI di sini, bukan nama, supaya tiada halaman rosak.
 * ------------------------------------------------------------------------- */
:root {
    --primary-900: var(--blue-dark);
    --primary-800: var(--blue-dark);
    --primary-700: var(--blue-dark);
    --primary-600: var(--blue);
    --primary-500: var(--blue);
    --primary-400: #4a8ff0;
    --primary-300: #8ab6f5;
    --primary-200: var(--blue-line);
    --primary-100: var(--blue-soft);
    --primary-50:  var(--panel3);

    --accent-900: var(--green-dark);
    --accent-700: var(--green-dark);
    --accent-600: var(--green);
    --accent-500: var(--green);
    --accent-400: #46a974;
    --accent-300: var(--green-line);
    --accent-200: var(--green-soft);
    --accent-100: var(--green-soft);

    --neutral-900: var(--text);
    --neutral-800: #1d3a56;
    --neutral-700: #2f4a63;
    --neutral-600: var(--muted);
    --neutral-500: var(--muted);
    --neutral-400: var(--muted-soft);
    --neutral-300: var(--line);
    --neutral-200: var(--line-soft);
    --neutral-100: var(--panel3);
    --neutral-50:  var(--bg);
    --white:       var(--panel);

    --status-success: var(--green-dark);
    --status-success-tint: var(--green-soft);
    --status-warning: var(--amber);
    --status-warning-tint: var(--amber-soft);
    --status-danger: var(--danger);
    --status-danger-tint: var(--danger-soft);

    --grad-primary: var(--grad-blue);
    --grad-hero:    var(--grad-header);
    --grad-accent:  linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    --grad-sidebar: var(--grad-header);
    /* NOTA: --grad-header ditakrifkan SEKALI di bahagian 1 di atas. Jangan
     * tetapkan semula pemboleh ubah yang merujuk kepada dirinya sendiri —
     * rujukan sebegitu menjadikan pemboleh ubah itu tidak sah dan semua latar
     * gradien akan menjadi kosong. */
}

/* ---------------------------------------------------------------------------
 * 3. TIPOGRAFI ROBOTO (fail tempatan - tiada panggilan internet)
 * ------------------------------------------------------------------------- */
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../admin/ui/fonts/Roboto-Regular.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("../admin/ui/fonts/Roboto-Medium.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 600; font-style: normal; font-display: swap; src: url("../admin/ui/fonts/Roboto-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../admin/ui/fonts/Roboto-Bold.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 900; font-style: normal; font-display: swap; src: url("../admin/ui/fonts/Roboto-Black.ttf") format("truetype"); }

/* ---------------------------------------------------------------------------
 * 4. ASAS HALAMAN - hanya aktif apabila <body class="umk-theme">
 *    (Skop kelas digunakan supaya gaya lama admin tidak terjejas.)
 * ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

.umk-theme {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.umk-theme *,
.umk-theme *::before,
.umk-theme *::after { box-sizing: border-box; }

.umk-theme img,
.umk-theme video { max-width: 100%; height: auto; }

.umk-theme h1, .umk-theme h2, .umk-theme h3, .umk-theme h4 {
    margin: 0 0 .5em;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
}

.umk-theme p { margin: 0 0 1em; }

.umk-theme a { color: var(--blue-ink); text-decoration: none; }
.umk-theme a:hover { color: var(--blue-hover); text-decoration: underline; }

.umk-theme :focus-visible,
.umk-theme a:focus-visible,
.umk-theme button:focus-visible,
.umk-theme input:focus-visible,
.umk-theme select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Bekas kandungan standard - sentiasa ada jarak sisi pada skrin kecil. */
.umk-wrap { width: min(var(--maxw), calc(100% - 32px)); margin-inline: auto; }

/* ---------------------------------------------------------------------------
 * 5. KOMPONEN KONGSI
 * ------------------------------------------------------------------------- */

/* Kad / panel ------------------------------------------------------------- */
.umk-card {
    padding: 22px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.umk-card--pad { padding: 26px; }
.umk-card__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1.06rem; font-weight: 700; }
.umk-card__title i, .umk-card__title svg { color: var(--blue); }

/* Butang ------------------------------------------------------------------ */
.umk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;               /* sasaran sentuh mudah alih (>=44px) */
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    font: 600 .95rem/1 var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--trans), color var(--trans), border-color var(--trans), transform var(--trans);
}
.umk-btn:hover { text-decoration: none; transform: translateY(-1px); }
.umk-btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.umk-btn--primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.umk-btn--dark { background: var(--blue-dark); color: #fff; border-color: var(--blue-dark); }
.umk-btn--dark:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.umk-btn--ghost { background: var(--panel); color: var(--blue-ink); border-color: var(--line); }
.umk-btn--ghost:hover { background: var(--panel2); border-color: var(--blue-line); }
.umk-btn--full { width: 100%; }
.umk-btn[disabled], .umk-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Pill status ------------------------------------------------------------- */
.umk-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--panel2);
    color: var(--blue-ink);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.umk-pill--green  { background: var(--green-soft);  border-color: var(--green-line);  color: var(--green-dark); }
.umk-pill--amber  { background: var(--amber-soft);  border-color: var(--amber-line);  color: var(--amber); }
.umk-pill--danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }

/* Nombor / KPI ------------------------------------------------------------ */
.umk-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.umk-kpi {
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.umk-kpi__label { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; }
.umk-kpi__value { display: block; margin-top: 6px; color: var(--blue-dark); font-family: var(--font-num); font-size: 1.65rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.umk-kpi__note { display: block; margin-top: 6px; color: var(--muted); font-size: .78rem; }

/* Jadual ------------------------------------------------------------------ */
.umk-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.umk-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.umk-table thead th {
    padding: 11px 12px;
    background: var(--panel2);
    color: var(--blue-ink);
    border-bottom: 1px solid var(--line);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.umk-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.umk-table tbody tr:nth-child(even) td { background: var(--panel3); }
.umk-table tbody tr:hover td { background: var(--blue-soft); }
.umk-table tbody tr:last-child td { border-bottom: 0; }

/* Borang ------------------------------------------------------------------ */
.umk-field { display: block; margin-bottom: 14px; }
.umk-field__label { display: block; margin-bottom: 7px; color: var(--text); font-size: .84rem; font-weight: 600; }
.umk-input, .umk-select, .umk-textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: 400 .95rem var(--font);
}
.umk-input:focus, .umk-select:focus, .umk-textarea:focus { border-color: var(--blue); box-shadow: var(--ring); outline: none; }
.umk-input::placeholder { color: var(--muted-soft); }

/* Nota / makluman --------------------------------------------------------- */
.umk-note {
    padding: 12px 14px;
    background: var(--panel2);
    border: 1px solid var(--blue-line);
    border-left: 4px solid var(--blue);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: .86rem;
}
.umk-note--warn   { background: var(--amber-soft);  border-color: var(--amber-line);  border-left-color: var(--amber); }
.umk-note--danger { background: var(--danger-soft); border-color: var(--danger-line); border-left-color: var(--danger); }
.umk-note--ok     { background: var(--green-soft);  border-color: var(--green-line);  border-left-color: var(--green-dark); }

/* ---------------------------------------------------------------------------
 * 6. BUTANG "NAIK KE ATAS" + BAR PROGRES BACAAN
 *    Dijana oleh js/umk-ui.js - dipakai oleh landing DAN semua halaman admin.
 * ------------------------------------------------------------------------- */
.umk-back-top {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 1300;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--blue-dark);
    border-radius: 50%;
    background: var(--blue-dark);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--trans), transform var(--trans), background var(--trans), visibility var(--trans);
    box-shadow: 0 10px 26px rgba(11, 61, 145, .32);
}
.umk-back-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.umk-back-top:hover, .umk-back-top:focus-visible { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
.umk-back-top__ring {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(var(--green) var(--umk-read, 0turn), transparent 0);
    opacity: .85;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    pointer-events: none;
}
.umk-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1310;
    width: 0;
    height: 3px;
    background: var(--grad-blue);
    transition: width .1s linear;
    pointer-events: none;
}

/* Elemen hanya untuk pembaca skrin. */
.umk-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.umk-skip {
    position: fixed;
    top: -80px;
    left: 12px;
    z-index: 1400;
    padding: 10px 14px;
    background: var(--blue-dark);
    color: #fff;
    border-radius: var(--radius-xs);
    transition: top var(--trans);
}
.umk-skip:focus { top: 12px; color: #fff; }

/* ---------------------------------------------------------------------------
 * 6b. INTERAKTIF: tajuk jadual melekit, palet arahan (Ctrl+K), amaran sesi
 *     Diuruskan oleh js/umk-ui.js — ditambah secara automatik pada semua
 *     halaman, tiada perubahan diperlukan pada halaman individu.
 * ------------------------------------------------------------------------- */

/* Tajuk jadual kekal di atas skrin semasa skrol jadual panjang. */
body table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}
body table thead tr { background: var(--panel2, #e8f0fe); }

/* Butang pembuka palet arahan (kiri bawah, supaya tidak bertindih dengan
   butang "naik ke atas" di kanan bawah). */
.umk-palette-btn {
    position: fixed;
    left: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 1290;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--line, #d7e0ee);
    border-radius: var(--radius-pill, 999px);
    background: var(--panel, #fff);
    color: var(--muted, #5b6b7c);
    font: 600 .82rem var(--font, Roboto, Arial, sans-serif);
    cursor: pointer;
    box-shadow: var(--shadow, 0 4px 24px rgba(16, 42, 67, .08));
    transition: var(--trans, .22s ease);
}
.umk-palette-btn:hover { color: var(--blue-dark, #0b3d91); border-color: var(--blue-line, #c7dbf7); }
.umk-palette-btn kbd {
    padding: 2px 6px;
    border: 1px solid var(--line, #d7e0ee);
    border-radius: 5px;
    background: var(--panel3, #f9fbff);
    font: 600 .72rem ui-monospace, Consolas, monospace;
    color: var(--muted, #5b6b7c);
}
@media (max-width: 760px) { .umk-palette-btn { display: none; } }

/* Butang kongsi ke WhatsApp (warna jenama WhatsApp: #25d366 — satu-satunya
   warna luar palet, dikekalkan supaya butang itu dikenali pengguna). */
.umk-kongsi-btn {
    position: fixed;
    left: 18px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    z-index: 1290;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid #25d366;
    border-radius: var(--radius-pill, 999px);
    background: #25d366;
    color: #fff;
    font: 600 .82rem var(--font, Roboto, Arial, sans-serif);
    cursor: pointer;
    box-shadow: var(--shadow, 0 4px 24px rgba(16, 42, 67, .08));
    transition: var(--trans, .22s ease);
}
.umk-kongsi-btn:hover { background: #1da851; border-color: #1da851; }
@media (max-width: 760px) { .umk-kongsi-btn { left: 12px; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); padding: 9px 12px; } }

/* Lapisan palet arahan. */
.umk-palette {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: none;
    padding: 12vh 16px 16px;
    background: rgba(16, 42, 67, .45);
    backdrop-filter: blur(3px);
}
.umk-palette.is-open { display: block; }
.umk-palette__box {
    max-width: 620px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #d7e0ee);
    border-radius: var(--radius, 16px);
    box-shadow: 0 18px 44px rgba(11, 61, 145, .28);
}
.umk-palette__input {
    width: 100%;
    min-height: 56px;
    padding: 15px 18px;
    border: 0;
    border-bottom: 1px solid var(--line, #d7e0ee);
    color: var(--text, #102a43);
    font: 500 1rem var(--font, Roboto, Arial, sans-serif);
}
.umk-palette__input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--blue, #1a73e8); }
.umk-palette__list { max-height: 52vh; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.umk-palette__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--text, #102a43);
    cursor: pointer;
    font-size: .92rem;
}
.umk-palette__item i { width: 18px; color: var(--blue, #1a73e8); }
.umk-palette__item small { margin-left: auto; color: var(--muted, #5b6b7c); font-size: .74rem; }
.umk-palette__item.is-aktif, .umk-palette__item:hover { background: var(--blue-soft, #e8f0fe); text-decoration: none; }
.umk-palette__note { margin: 0; padding: 10px 16px 14px; color: var(--muted, #5b6b7c); font-size: .76rem; border-top: 1px solid var(--line, #d7e0ee); }
.umk-palette__note kbd { padding: 1px 5px; border: 1px solid var(--line, #d7e0ee); border-radius: 4px; font: 600 .7rem ui-monospace, Consolas, monospace; }

/* Pemberitahuan sesi (amaran tamat masa). */
.umk-sesi {
    position: fixed;
    right: 18px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 1350;
    display: none;
    max-width: 320px;
    padding: 14px 16px;
    background: var(--amber-soft, #fdf3e3);
    border: 1px solid var(--amber-line, #f3d9ad);
    border-left: 4px solid var(--amber, #b45309);
    border-radius: 12px;
    box-shadow: var(--shadow, 0 4px 24px rgba(16, 42, 67, .08));
    color: var(--text, #102a43);
    font-size: .86rem;
}
.umk-sesi.is-open { display: block; }
.umk-sesi button {
    margin-top: 10px;
    padding: 8px 14px;
    border: 1px solid var(--blue, #1a73e8);
    border-radius: 8px;
    background: var(--blue, #1a73e8);
    color: #fff;
    font: 600 .84rem var(--font, Roboto, Arial, sans-serif);
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * 7. UTILITI RESPONSIF (mobile friendly)
 * ------------------------------------------------------------------------- */
.umk-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space); }
.umk-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space); }
.umk-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space); }
.umk-flex  { display: flex; flex-wrap: wrap; gap: var(--space); align-items: center; }
.umk-tr     { text-align: right; }

/* Jadual besar: beri bayang tepi supaya jelas ia boleh diskrol. */
.umk-table-wrap { position: relative; }

@media (max-width: 1024px) {
    .umk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .umk-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .umk-theme { font-size: 15.5px; }
    .umk-grid-2, .umk-grid-3, .umk-grid-4 { grid-template-columns: minmax(0, 1fr); }
    .umk-wrap { width: calc(100% - 24px); }
    .umk-card, .umk-card--pad { padding: 18px; }
    .umk-back-top { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
    .umk-btn, .umk-input, .umk-select { min-height: 48px; }
    .umk-hide-sm { display: none !important; }
    /* Jadual: baris jadi kad supaya tidak perlu skrol sisi. */
    .umk-table--stack thead { display: none; }
    .umk-table--stack tbody tr { display: block; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
    .umk-table--stack tbody td { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); }
    .umk-table--stack tbody td::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
}
@media (min-width: 761px) { .umk-show-sm { display: none !important; } }

/* ---------------------------------------------------------------------------
 * 8. CETAKAN & PREFERS-REDUCED-MOTION
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .umk-theme { scroll-behavior: auto; }
    .umk-theme *, .umk-theme *::before, .umk-theme *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
    .umk-back-top, .umk-progress, .umk-skip { display: none !important; }
    .umk-theme { background: #fff; color: #000; }
    .umk-card { box-shadow: none; break-inside: avoid; }
}