/* Jadual portal muat lebar kandungan & butang tindakan berlapis (Okt 2026) — standard sama dengan
   CMS (salinan public/css/jadual-muat.css repo admin, dimuat layouts.default).

   - Isi sel: teks panjang tanpa ruang boleh dipecah bila ruang tidak cukup; tajuk lajur pecah
     pada ruang sahaja. Lencana & butang turun baris tanpa dipecah dalam perkataan.
   - < 1600px fon & pad sel dirapatkan; < 1400px .text-nowrap / min-width sebaris dilonggarkan;
     < 1200px lebih rapat lagi.
   - .tindakan-tegak (public/js/tindakan-jadual.js): butang lajur terakhir berlapis, saiz sama;
     di tengah bagi sel text-center. */
.content-area .table {
    width: 100% !important;
}

.content-area .table > :not(caption) > * > td {
    overflow-wrap: anywhere;
}

.content-area .table > :not(caption) > * > th {
    overflow-wrap: normal;
    hyphens: auto;
}

/* Lencana & butang boleh turun baris pada ruang / sengkang, tetapi tidak dipecah dalam perkataan. */
.content-area .table .badge,
.content-area .table .btn {
    white-space: normal;
    overflow-wrap: normal;
}

/* Laptop (< 1600px): fon & pad sel jadual dirapatkan sedikit supaya lebih banyak muat sebaris. */
@media (max-width: 1599.98px) {
    .content-area .table {
        font-size: 0.875rem;
    }

    .content-area .table > :not(caption) > * > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Matriks (cth. peranan x kebenaran): tajuk lajur menegak, pad sel dirapatkan. */
.content-area .jadual-matriks > :not(caption) > * > * {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.content-area .jadual-matriks th.jadual-matriks-tegak {
    vertical-align: bottom;
}

.content-area .jadual-matriks th.jadual-matriks-tegak > span {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Laptop (< 1400px): teks nowrap dan min-width sebaris dalam jadual dilonggarkan. */
@media (max-width: 1399.98px) {
    .content-area .table .text-nowrap,
    .content-area .table.text-nowrap {
        white-space: normal !important;
    }

    .content-area .table > :not(caption) > * > [style*="min-width"] {
        min-width: 0 !important;
    }
}

/* Skrin kecil (< 1200px): fon & pad sel lebih rapat, lencana lebih kecil. */
@media (max-width: 1199.98px) {
    .content-area .table {
        font-size: 0.8125rem;
    }

    .content-area .table > :not(caption) > * > * {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

    .content-area .table .badge {
        font-size: 0.6875rem;
    }

    .content-area .jadual-matriks > :not(caption) > * > * {
        padding-left: 0.125rem;
        padding-right: 0.125rem;
    }
}

/* DataTables (autoWidth) menetapkan lebar th / td sebaris yang boleh menghimpit lajur tertentu;
   biar pelayar agih lebar ikut kandungan. */
.content-area table.dataTable > thead > tr > th,
.content-area table.dataTable > tbody > tr > td {
    width: auto !important;
}

/* Lajur tindakan berlapis atas ke bawah, semua butang sama saiz: <div class="tindakan-tegak">
   (ditambah oleh public/js/tindakan-jadual.js pada lajur terakhir setiap jadual CMS). Lebar
   sekurang-kurangnya 6rem atau ikut label terpanjang dalam sel; butang padat (fon 0.75rem). */
.content-area .tindakan-tegak {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 0.2rem !important;
    width: max-content;
    min-width: 6rem;
    max-width: 100%;
    margin-left: auto;
}

.content-area .tindakan-tegak > form {
    margin: 0;
}

.content-area .table .tindakan-tegak .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    padding: 0.2rem 0.6rem !important;
}

.content-area .table .tindakan-tegak .btn > svg {
    width: 12px;
    height: 12px;
    margin: 0 !important;
}

.content-area .table .tindakan-tegak .btn > i {
    font-size: 0.75rem;
    margin: 0 !important;
}

.content-area td.text-center .tindakan-tegak {
    margin-right: auto;
}

/* Butang tindakan sentiasa melengkung (pil), walaupun tetapan tema "Border Radius" dimatikan
   (body.radius-0 menjadikan semua .btn petak) — rupa sama di semua pelayar / domain. */
body.radius-0 .content-area .table .tindakan-tegak .btn {
    border-radius: 50rem !important;
}