:root {
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-text: #1c1c1e;
  --color-divider: #e2e4e9;
  --color-accent: #2563eb;
  --color-accent-100: #dbeafe;
  --color-accent-700: #1d4ed8;
  --color-accent-800: #1e3a8a;
  --color-danger: #dc2626;
  --color-fury: #ea580c;
  --color-prefered: #4f46e5;
  /* Warna siri kategori untuk carta. Diuji dengan pengesah palet:
     lulus jalur kecerahan, lantai kroma, pemisahan buta warna dan lantai
     penglihatan normal pada permukaan putih. Jangan tukar satu nilai tanpa
     menjalankan semula pengesahan itu. Slot 4-6 di bawah 3:1 kontras, jadi
     ia mesti sentiasa disertai label langsung atau jadual - kedua-duanya ada
     pada kad yang menggunakannya. */
  --color-series-1: #2563eb;
  --color-series-2: #ea580c;
  --color-series-3: #0f9d63;
  --color-series-4: #eda100;
  --color-series-5: #9333ea;
  --color-series-6: #e87ba4;
  /* Baki "tiada kategori" - neutral dengan sengaja, bukan hue ketujuh. */
  --color-series-none: #71717a;
  --color-neutral-100: #f4f4f5;
  --color-neutral-200: #e4e4e7;
  --color-neutral-600: #71717a;
  --color-neutral-700: #52525b;
  --color-neutral-800: #3f3f46;
  --color-neutral-900: #18181b;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-md: 10px; --radius-sm: 6px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-heading-weight: 700;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); margin: 0; }
::-webkit-scrollbar { height: 6px; width: 6px; }

.container { max-width: 680px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-8); display: grid; gap: var(--space-5); }
.container-wide { max-width: none; }
.hr { height: 1px; background: var(--color-divider); border: none; margin: var(--space-2) 0; }
.stack { display: grid; gap: var(--space-3); }

/* Nav */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-divider); position: sticky; top: 0; z-index: 10; }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; margin-right: var(--space-2); }
.nav a { color: var(--color-text); opacity: 0.65; font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a[aria-current="page"] { opacity: 1; color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 600; }
.nav-spacer { flex: 1; }

/* Cards */
.card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.elev-sm { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.elev-md { box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.card-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.card-title { font-weight: 600; font-size: 15px; }
.card-body { font-size: 13px; opacity: .75; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .6; margin-top: 4px; }
.rowcard { cursor: pointer; transition: background .15s; }
.rowcard:hover { background: rgba(0,0,0,.03); }

/* Tags */
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tag-delivered { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-transit { border: 1px solid var(--color-accent); color: var(--color-accent-700); background: transparent; }
.tag-issue { border: 1px solid var(--color-neutral-800); color: var(--color-neutral-900); background: var(--color-neutral-200); }
.tag-cancelled { background: var(--color-neutral-100); color: var(--color-neutral-600); text-decoration: line-through; }
.tag-pending { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.tag-claimed { background: #fef3c7; color: #92400e; }
/* Delivery type ticked when the DO was keyed in. */
.tag-fury { background: #ffedd5; color: #9a3412; font-size: 9px; padding: 1px 6px; }
.tag-prefered { background: #e0e7ff; color: #3730a3; font-size: 9px; padding: 1px 6px; }
/* "D" marker on a DO number that already exists elsewhere in the system. */
.tag-dup { background: #fee2e2; color: #991b1b; min-width: 18px; padding: 1px 0; font-size: 10px; line-height: 16px; text-align: center; cursor: help; }

/* Jenis biometrik yang didaftarkan pemandu pada peranti. Dua warna berbeza
   supaya cap jari dan wajah dapat dibezakan sekali pandang, bukan dibaca
   sebagai satu rentetan teks. */
.tag-bio { font-size: 10px; padding: 1px 7px; }
.tag-bio-finger { background: #ffedd5; color: #9a3412; }
.tag-bio-face { background: #d1fae5; color: #065f46; }
.tag-bio-none { background: transparent; border: 1px dashed var(--color-neutral-400); color: var(--color-neutral-600); font-weight: 400; }

/* Jam kehadiran berbanding jam yang diperlukan. Hijau bermakna sudah
   cukup, merah bermakna belum - dibaca sebagai warna dahulu, nombor
   kemudian. */
.tag-hours { font-variant-numeric: tabular-nums; }
.tag-hours-ok { background: #d1fae5; color: #065f46; }
.tag-hours-short { background: #fee2e2; color: #991b1b; }

.text-danger { color: var(--color-danger); font-weight: 600; }

/* Forms */
.field { display: grid; gap: 4px; }
/* display:grid di atas mengatasi atribut [hidden]; medan bersyarat (cth.
   Sub Kontraktor dalam borang pengguna) mesti benar-benar hilang. */
.field[hidden] { display: none; }
.field label { font-size: 12px; opacity: .65; font-weight: 600; }
.input { font: inherit; padding: 9px 11px; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); width: 100%; }
.input:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
textarea.input { resize: vertical; }

.seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); overflow: hidden; }
.seg-opt { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; cursor: pointer; background: var(--color-surface); }
.seg-opt:not(:last-child) { border-right: 1px solid var(--color-divider); }
.seg-opt input { display: none; }
.seg-opt input[type="checkbox"] { display: inline-block; margin: 0; accent-color: var(--color-accent); }
.seg-opt:has(input[type="checkbox"]) { user-select: none; }
.seg-opt.active input[type="checkbox"] { accent-color: #fff; }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; }
.seg-opt.active { background: var(--color-accent); color: #fff; }

/* Buttons */
.btn { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-700); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondary { background: var(--color-surface); border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-neutral-100); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text); }
.btn-ghost:hover { background: var(--color-neutral-100); }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-divider); }
.table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .55; font-weight: 600; }

/* Invoice sheet: printable spreadsheet-style table */
.invoice-header-bar { display: flex; flex-wrap: wrap; border: 1px solid var(--color-neutral-800); font-weight: 700; font-size: 13px; margin-bottom: var(--space-3); }
.invoice-header-bar > div { padding: 8px 10px; border-right: 1px solid var(--color-neutral-800); }
.invoice-header-bar > div:last-child { border-right: none; flex: 1; }
.invoice-sheet-table { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--color-neutral-800); }
.invoice-sheet-table th, .invoice-sheet-table td { border: 1px solid var(--color-neutral-800); padding: 6px 8px; text-align: left; vertical-align: middle; }
.invoice-sheet-table th { background: var(--color-neutral-200); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; text-align: center; }
.invoice-sheet-table td.inv-num { text-align: center; }
.invoice-sheet-table td.inv-amt { text-align: right; }
.invoice-sheet-table tr.inv-total-row td { font-weight: 700; text-align: right; background: var(--color-neutral-100); }
.invoice-sheet-table tr.inv-total-row td:first-child { text-align: center; }
.invoice-sheet-table tr.inv-trip-row td { font-weight: 700; }

@media print {
  .nav, .no-print { display: none !important; }
  .container-wide { max-width: none; padding: 0; }
  .invoice-sheet-layout { display: block !important; }
  .invoice-header-bar, .invoice-sheet-table th, .invoice-sheet-table tr.inv-total-row td {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  @page { size: portrait; margin: 12mm; }
}

/* Dialog */
.dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 100; }
.dialog { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5); width: min(420px, 100%); max-height: 90vh; overflow-y: auto; display: grid; gap: var(--space-3); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* Photo slots */
.photo-slot { width: 110px; height: 140px; border-radius: 8px; object-fit: cover; background: var(--color-neutral-100); border: 1px solid var(--color-divider); }
.photo-add-btn { width: 110px; height: 140px; flex-direction: column; }
/* Butang padam bertindih di sudut lakaran kecil gambar DO. */
.photo-thumb { position: relative; display: inline-block; line-height: 0; }
.photo-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 999px; border: none; cursor: pointer; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.photo-del:hover { background: var(--color-danger); }
.photo-del:disabled { opacity: .5; cursor: default; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.login-card { width: min(420px, 100%); padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-4); }
.login-brand { text-align: center; }
.login-brand .name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; }
.login-brand .sub { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin-top: 4px; }
.login-demo { font-size: 11px; opacity: .55; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); line-height: 1.6; }
.login-error { font-size: 12px; color: var(--color-accent-800); }

/* Progress */
.progress-track { height: 6px; border-radius: 4px; background: var(--color-neutral-200); overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-accent); border-radius: 4px; }

.empty-state { text-align: center; padding: var(--space-6) 0; opacity: .6; font-size: 14px; }
.section-title { margin-bottom: 2px; }
.section-sub { font-size: 13px; opacity: .65; }
.filters-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.filters-row .field { min-width: 150px; }
.table-scroll { overflow-x: auto; }
/* Lajur tindakan (Edit/Padam) kekal nampak walaupun jadual perlu scroll ke tepi */
.table-sticky-actions th:last-child,
.table-sticky-actions td:last-child {
  position: sticky; right: 0; background: var(--color-surface);
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .18);
}

/* Monospace block for raw payloads (Admin > Log API detail). */
.code-block { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); padding: var(--space-3); margin: 0; max-height: 320px; overflow: auto; white-space: pre; }

/* Kad jumlah yang membawa makna baik/buruk (cth. Balance pada laporan
   Penggunaan PTT): hijau jika positif, merah jika negatif. */
.card-positive { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.card-negative { background: #fee2e2; border-color: var(--color-danger); color: #7f1d1d; }
.card-positive .card-kicker, .card-negative .card-kicker { color: inherit; opacity: .8; }

/* Lajur Lokasi Semasa (Laporan DO): alamat panjang, jadi ia diberi lebar
   minimum supaya tidak terpecah satu perkataan sebaris. */
.cell-location { font-size: 13px; min-width: 160px; max-width: 320px; }

/* Select2 diselaraskan dengan .input: ketinggian, sempadan, jejari dan
   warna fokus yang sama, supaya ia tidak kelihatan asing di sebelah medan
   lain dalam baris tapisan. */
.select2-container { font: inherit; }
.select2-container--default .select2-selection--single { height: auto; padding: 10px 30px 10px 11px; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-surface); }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: inherit; color: var(--color-text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 6px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.select2-dropdown { border: 1px solid var(--color-divider); border-radius: var(--radius-sm); font-size: 14px; }
.select2-container--default .select2-search--dropdown .select2-search__field { font: inherit; padding: 7px 9px; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--color-accent); }

/* Jadual lebar (Urus Lori, Minyak) memakai paparan kad pada skrin sempit
   untuk SEMUA peranan: tandakan <table> dengan .table-cards-wide.
   Baris yang disembunyikan oleh carian atau butang GPS mesti kekal
   tersembunyi: display:flex pada kad mengatasi atribut [hidden]. */
.table-cards-wide tr[hidden] { display: none; }
/* Jadual ini memerlukan kira-kira 1000px, jadi paparan kad bermula lebih
   awal (1080px) daripada .table-cards peranan penyelia (640px) - jika
   tidak, tablet dan tetingkap sempit perlu menatal ke kanan. Peraturannya
   sama dengan kad .table-cards itu. */
@media (max-width: 1080px) {
  #adminLorries { display: grid; gap: var(--space-3); }
  #adminLorries > *, #adminMinyak > *, #adminMinyakLaporan > * { min-width: 0; }
  .table-cards-wide,
  .table-cards-wide tbody,
  .table-cards-wide tfoot { display: block; }
  .table-cards-wide thead { display: none; }
  .table-cards-wide tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }
  .table-cards-wide td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-basis: 100%; border: none; padding: 3px 0; text-align: right; }
  .table-cards-wide td::before { content: attr(data-label); font-size: 12px; font-weight: 400; opacity: .6; text-align: left; flex-shrink: 0; }
  .table-cards-wide td.cell-title { order: -2; display: block; flex: 1 1 auto; font-weight: 600; font-size: 15px; text-align: left; padding-bottom: var(--space-1); }
  .table-cards-wide td.cell-badge { order: -1; flex-basis: auto; }
  .table-cards-wide td.cell-actions { order: 10; justify-content: flex-end; border-top: 1px solid var(--color-divider); margin-top: var(--space-2); padding-top: var(--space-2); }
  .table-cards-wide td.cell-title::before,
  .table-cards-wide td.cell-badge::before,
  .table-cards-wide td.cell-actions::before { content: none; }
  .table-cards-wide td.cell-empty { display: none; }
  .table-cards-wide td.cell-location { min-width: 0; max-width: none; }
}
@media (max-width: 640px) {
  /* Had lebar lajur alamat hanya untuk jadual; dalam kad ia mengisi baris. */
  .table-cards td.cell-location { min-width: 0; max-width: none; }
}

/* Nav tab group (keeps the same spacing the tabs had as direct nav children). */
.nav-tabs { display: flex; align-items: center; gap: var(--space-4); }

/* ---------------------------------------------------------------------
   Menu responsif. Jenama dan tab tidak dibenarkan membalut baris; apabila
   ia tidak muat, skrip dalam layout.php menambah .nav-collapsed dan tab
   berpindah ke panel di bawah bar, dibuka oleh butang menu (.nav-open).
   --------------------------------------------------------------------- */
.nav-brand, .nav-tabs a { white-space: nowrap; }
.nav-toggle { display: none; }
.nav-collapsed .nav-toggle { display: inline-flex; }
.nav-collapsed .nav-tabs { display: none; }
.nav-collapsed.nav-open .nav-tabs {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100vh - 100%); max-height: calc(100dvh - 56px); overflow-y: auto;
  background: var(--color-surface); border-bottom: 1px solid var(--color-divider);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .25); padding: var(--space-2) 0;
}
.nav-collapsed .nav-tabs a { padding: 12px var(--space-4); border-bottom: none; border-left: 3px solid transparent; font-size: 15px; }
.nav-collapsed .nav-tabs a[aria-current="page"] { border-left-color: var(--color-accent); background: var(--color-neutral-100); }
@media (max-width: 640px) {
  .nav-collapsed { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .nav-collapsed .nav-session { display: none; }
}

/* ---------------------------------------------------------------------
   Supervisor, maincon and subcon on mobile: two-row nav and tables shown
   as stacked cards. Scoped to these roles so admin and akaun keep their
   current layout on the Laporan page they share. (Subcon shares the
   supervisor's selectors: it sees the same #reportPage.)
   --------------------------------------------------------------------- */
/* Let wide tables scroll/shrink inside the page instead of widening it. */
body.role-supervisor .container > *,
body.role-subcon .container > *,
body.role-maincon .container > * { min-width: 0; }

@media (max-width: 640px) {
  body.role-supervisor .nav,
  body.role-subcon .nav,
  body.role-maincon .nav { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); }
  body.role-supervisor .nav-brand,
  body.role-subcon .nav-brand,
  body.role-maincon .nav-brand { white-space: nowrap; margin-right: 0; }
  body.role-supervisor .nav-session,
  body.role-subcon .nav-session,
  body.role-maincon .nav-session { display: none; }
  body.role-supervisor .nav-tabs,
  body.role-subcon .nav-tabs,
  body.role-maincon .nav-tabs { order: 3; flex-basis: 100%; gap: var(--space-2); overflow-x: auto; }
  body.role-supervisor .nav-tabs a,
  body.role-subcon .nav-tabs a,
  body.role-maincon .nav-tabs a { flex: 1; text-align: center; white-space: nowrap; padding: 8px 4px; }

  body.role-supervisor .container,
  body.role-subcon .container,
  body.role-maincon .container { padding: var(--space-4) var(--space-3) var(--space-6); gap: var(--space-4); }
  body.role-supervisor #supervisorAssign,
  body.role-subcon #supervisorAssign,
  body.role-supervisor #reportPage,
  body.role-subcon #reportPage,
  body.role-maincon #reportMainconPage { display: grid; gap: var(--space-3); }
  body.role-supervisor .filters-row .field,
  body.role-subcon .filters-row .field,
  body.role-maincon .filters-row .field { flex: 1 1 140px; min-width: 0; }
  body.role-supervisor .filters-row .field:first-child,
  body.role-subcon .filters-row .field:first-child,
  body.role-maincon .filters-row .field:first-child { flex-basis: 100%; }
  body.role-supervisor .btn-icon,
  body.role-subcon .btn-icon,
  body.role-maincon .btn-icon { padding: 11px; }

  /* table.table-cards -> one card per row; cells carry data-label */
  body.role-supervisor .table-cards,
  body.role-subcon .table-cards,
  body.role-maincon .table-cards,
  body.role-supervisor .table-cards tbody,
  body.role-subcon .table-cards tbody,
  body.role-maincon .table-cards tbody,
  body.role-supervisor .table-cards tfoot,
  body.role-subcon .table-cards tfoot,
  body.role-maincon .table-cards tfoot { display: block; }
  body.role-supervisor .table-cards thead,
  body.role-subcon .table-cards thead,
  body.role-maincon .table-cards thead { display: none; }
  body.role-supervisor .table-cards tr,
  body.role-subcon .table-cards tr,
  body.role-maincon .table-cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }
  body.role-supervisor .table-cards td,
  body.role-subcon .table-cards td,
  body.role-maincon .table-cards td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-basis: 100%; border: none; padding: 3px 0; text-align: right; }
  body.role-supervisor .table-cards td::before,
  body.role-subcon .table-cards td::before,
  body.role-maincon .table-cards td::before { content: attr(data-label); font-size: 12px; font-weight: 400; opacity: .6; text-align: left; flex-shrink: 0; }
  body.role-supervisor .table-cards td.cell-title,
  body.role-subcon .table-cards td.cell-title,
  body.role-maincon .table-cards td.cell-title { order: -2; display: block; flex: 1 1 auto; font-weight: 600; font-size: 15px; text-align: left; padding-bottom: var(--space-1); }
  body.role-supervisor .table-cards td.cell-badge,
  body.role-subcon .table-cards td.cell-badge,
  body.role-maincon .table-cards td.cell-badge { order: -1; flex-basis: auto; }
  body.role-supervisor .table-cards td.cell-actions,
  body.role-subcon .table-cards td.cell-actions,
  body.role-maincon .table-cards td.cell-actions { order: 10; justify-content: flex-end; border-top: 1px solid var(--color-divider); margin-top: var(--space-2); padding-top: var(--space-2); }
  body.role-supervisor .table-cards td.cell-title::before,
  body.role-subcon .table-cards td.cell-title::before,
  body.role-maincon .table-cards td.cell-title::before,
  body.role-supervisor .table-cards td.cell-badge::before,
  body.role-subcon .table-cards td.cell-badge::before,
  body.role-maincon .table-cards td.cell-badge::before,
  body.role-supervisor .table-cards td.cell-actions::before,
  body.role-subcon .table-cards td.cell-actions::before,
  body.role-maincon .table-cards td.cell-actions::before { content: none; }
  /* Kad Laporan DO boleh diketik untuk membuka butiran (lihat app.js). */
  body.role-supervisor #reportPage .table-cards tbody tr,
  body.role-subcon #reportPage .table-cards tbody tr { cursor: pointer; }
  body.role-supervisor .table-cards td.cell-empty,
  body.role-subcon .table-cards td.cell-empty,
  body.role-maincon .table-cards td.cell-empty { display: none; }

  /* Gambar DO: label on its own line, then full-width thumbnails that stay
     legible on a phone (tapping still opens the original). */
  body.role-maincon .table-cards td.cell-photos { display: block; text-align: left; }
  body.role-maincon .table-cards td.cell-photos::before { display: block; margin-bottom: var(--space-1); }
  body.role-maincon .table-cards td.cell-photos .photo-link { flex: 1 1 100%; }
  body.role-maincon .table-cards td.cell-photos .photo-slot { width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
}