/* [FIX UTAMA] Override padding #content dari Template.html
     agar sticky header menempel sempurna di tepi atas viewport */
  #content {
    padding: 0 !important;
  }

  :root{
    /* tema */
    --brand:#A8BBA3; --paper:#F7F4EA; --tint:#EBD9D1; --ink:#B87C4C; --rose:#F0CAD6;
    --surface:#fff; --border:rgba(17,17,17,.12); --text:#0f172a; --text-muted:#6b7280; --danger:#b42318;

    /* ukuran */
    --radius:12px;
    --name-col:172px;     /* kolom nama (sticky kiri) */
    --col-w:120px;        /* lebar kolom nilai */

    /* z-index layering */
    --z-colmenu:900; --z-dropdown:1200; --z-popover:1300; --z-modal-base:1400; --z-modal-top:1500;

    --surface-soft:  color-mix(in srgb, var(--tint) 20%, var(--surface));
    --surface-softer: color-mix(in srgb, var(--tint) 32%, var(--surface));

    /* preferensi lebar kolom tabel ringkasan */
    --repcol-tanggal: 100px;
    --repcol-judul:   200px;
    --repcol-kat:     120px;
    --repcol-nilai:    56px;
    --repcol-grade:    52px;
    --repcol-ket:     140px;
    --repcol-koment:  220px;

    /* batas min/max */
    --repmin-tanggal:  84px;  --repmax-tanggal: 120px;
    --repmin-judul:   140px;  --repmax-judul:   260px;
    --repmin-kat:      90px;  --repmax-kat:     160px;
    --repmin-nilai:    44px;  --repmax-nilai:    64px;
    --repmin-grade:    40px;  --repmax-grade:    60px;
    --repmin-ket:     120px;  --repmax-ket:     200px;
    --repmin-koment:  160px;  --repmax-koment:  320px;

    /* ukuran font header tanggal (baris sub) - samakan dengan Absensi.html */
    --th-date-sub-fs: 11px;
    --th-date-sub-lh: 1.2;

    /* offset sticky header (0 karena topbar desktop disembunyikan) */
    --sticky-top-offset: 0px;
    
    /* tinggi header date */
    --th-date-h: 45px;
    --th-date-title-lines: 1;
    
    /* Tinggi grafik laporan siswa */
    --rep-chart-h: 240px;
  }

  /* ===== Layout & basics ===== */
  html,body{
    margin:0; padding:0; background:var(--paper); color:var(--text);
    font:500 14px/1.35 Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,.04); padding:12px;
  }

  /* [FIX] Margin manual pengganti padding #content */
  .card-topbar{ 
    margin: 20px 20px 12px 20px;
    background: var(--surface-soft); 
  }
  
  .card-table{ 
    margin: 0 20px 20px 20px;
    padding: 0; 
    background: var(--surface-soft);
    border-radius: 8px;
    /* PENTING: Visible agar sticky header bisa menempel di viewport */
    overflow: visible; 
  }

  /* Responsif margin */
  @media (max-width: 600px){
    .card-topbar { margin: 12px 12px 8px 12px; }
    .card-table { margin: 0 12px 12px 12px; }
  }

  .tbl-tip{ padding:8px 12px; }
  
  .toolbar{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
  .field{ min-width:260px; display:block; }
  .field>label{ display:block; font:600 12px/1 Poppins, sans-serif; margin-bottom:6px; color:#111827; }
  .toolbar-actions{ margin-left:auto; display:flex; gap:8px; align-items:flex-end; }
  .muted{ color:var(--text-muted); }
  .small{ font-size:12px; }

  /* ===== Scroll wrap ===== */
  .scroll-wrap{
    overflow: auto !important;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    background: var(--surface-softer);
  }
  #scrollWrap{
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
  }
  @media (pointer: coarse), (hover: none) {
    #scrollWrap{ touch-action: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; }
  }

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--ink); color:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
    padding:8px 12px; font:600 13px/1 Poppins, sans-serif; cursor:pointer;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
    transition:transform .08s, box-shadow .18s, background .18s, opacity .18s;
  }
  .btn:hover{ background:#a0643f; box-shadow:0 6px 18px rgba(0,0,0,.10); }
  .btn:active{ transform:translateY(1px); }
  .btn:focus{ outline:3px solid rgba(184,124,76,.25); outline-offset:2px; }
  .btn[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }

  .btn-ghost{
    background:#fff; color:#0f172a; border:1px solid var(--border);
    border-radius:10px; padding:6px 10px; cursor:pointer; font:600 13px/1 Poppins, sans-serif;
    transition:background .18s, box-shadow .18s, border-color .18s, transform .08s;
  }
  .btn-ghost:hover{ background:#fafafa; box-shadow:0 3px 10px rgba(0,0,0,.06); }
  .btn-ghost:active{ transform:translateY(1px); }
  
  .btn-danger{ background:var(--danger); color:#fff; border:1px solid rgba(0,0,0,.06) }

  #addAsmBtn .material-icons{ font-size:16px; color:currentColor; }

  /* ===== Combobox ===== */
  .combo{ position:relative; }
  .combo input[type="text"]{
    font-size:13px; height:42px; border-radius:12px; border:1px solid #e5e7eb; padding:8px 36px 8px 12px; width:100%;
    outline:none; background:#fff; color:#0f172a;
  }
  .combo input.is-placeholder{ color:#94a3b8; }
  .combo input.is-selected{ color:#0f172a; }
  .combo input:focus{ border-color:#cbd5e1; box-shadow:0 0 0 4px rgba(182,172,212,.15); }
  .combo .dd-icon{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
    border:0; background:transparent; border-radius:8px; cursor:pointer; color:#64748b;
  }
  .combo .dd-icon:hover{ background:#f1f5f9; }
  .combo .dd-icon .material-icons{ font-size:20px; transition:transform .18s; }
  .combo.open .dd-icon .material-icons{ transform:rotate(180deg); }
  .combo-list{
    position:absolute; z-index:calc(var(--z-dropdown) + 1);
    left:0; right:0; margin-top:2px; background:#fff; border:1px solid #eef2f7;
    border-radius:8px; box-shadow:0 16px 30px rgba(0,0,0,.08);
    max-height:300px; overflow-y:auto; padding:6px 0;
  }
  .combo-list[hidden]{ display:none; }
  .combo-item{ padding:10px 12px; font-size:13px; cursor:pointer; white-space:normal; }
  .combo-item:hover, .combo-item[aria-selected="true"]{ background:#f1f5f9; }
  .combo-empty{ padding:10px 12px; font-size:13px; color:#9ca3af; cursor:default; }

  /* ===== Table ===== */
  .tbl{ width:max-content; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:13px; }
  .tbl th,.tbl td{ white-space:nowrap; vertical-align:top; box-sizing:border-box; }
  
  /* Font baris sub (tanggal) di header tabel asesmen */
  .tbl thead .th-date-sub{
    font-size: var(--th-date-sub-fs);
    line-height: var(--th-date-sub-lh);
    font-weight: 600;
    color: var(--text-muted);
    padding-top: 2px;
    padding-bottom: 6px;
  }
  .tbl thead .th-date-sub .muted{
    font-size: inherit;
    line-height: inherit;
  }

  /* Fixed height header & ellipsis */
  .tbl th.th-date { padding: 0 6px; }
  .tbl th.th-date .pick-col{
    box-sizing: border-box;
    height: auto;
    min-height: var(--th-date-h);
    max-height: var(--th-date-h);
    padding: 4px 6px; 
    overflow: hidden;
  }
  .tbl th.th-date .pick-col .h-title{
    display: -webkit-box;
    -webkit-line-clamp: var(--th-date-title-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
    max-width: 100%;
    white-space: nowrap;
  }
  @media (max-width: 480px){ :root{ --th-date-h: 84px; } }

  .tbl-hint{ padding:16px; color:var(--text-muted); }

  /* Sticky kiri (kolom nama) */
  .tbl .sticky-left,
  .tbl thead th:first-child,
  .tbl tbody td:first-child{
    position:sticky; left:0; background:var(--surface-soft); z-index:7; /* z-index 7 agar di atas kolom nilai */
    width:var(--name-col)!important; min-width:var(--name-col)!important; max-width:var(--name-col)!important;
    backface-visibility:hidden; transform:translateZ(0); contain:layout paint size;
  }
  .tbl thead .sticky-left{ z-index:8; } /* header nama di atas body nama */
  
  /* garis pemisah vertikal halus */
  .tbl .sticky-left::after{
    content: ''; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background: #eef2f7;
  }
  /* saat row hover, jaga background kolom nama */
  .tbl tbody tr:hover td.sticky-left{ background: var(--surface-soft) !important; }

  .tbl .hdr-nama,.tbl .cell-nama{
    width:var(--name-col)!important; min-width:var(--name-col)!important; max-width:var(--name-col)!important;
  }
  .tbl .cell-nama{ position:relative; padding:4px 36px 4px 34px; white-space:normal; }
  .tbl .cell-nama .nama{ display:block; overflow-wrap:anywhere; word-break:break-word; line-height:1.25; }

  /* Badge nilai akhir di kolom nama */
  .final-badge{
    margin-top: 2px;
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 10.5px/1.2 Poppins, sans-serif;
    color: var(--text-muted);
    opacity: .55; font-style: italic;
  }
  .final-badge .label{ opacity: .9; }
  .final-badge .val{ color: inherit; font-weight: 700; }
  tr:hover .final-badge{ opacity: .72; }

  /* Kolom tanggal/nilai */
  .tbl th.th-date,
  .tbl th.th-date-sub,
  .tbl td:not(.sticky-left){
    width:var(--col-w); min-width:var(--col-w); max-width:var(--col-w);
    text-align:center!important; vertical-align: middle; padding:4px 6px; overflow:visible;
  }
  .tbl .th-date.active{ outline:2px solid var(--ink); outline-offset:-4px; border-radius:12px; }
  .tbl .th-date .pick-col{ font:600 12px/1 Poppins, sans-serif; }

  .cell-wrap{ display:flex; gap:4px; align-items:flex-start; justify-content:flex-start; flex-direction:column; }
  .cell-input{ width:100%; min-width:58px; font-size:12px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:#fff; transition:background .12s ease; }
  .cell-comment{ width:100%; min-width:58px; font-size:11px; padding:4px 6px; border:1px solid var(--border); border-radius:8px; background:#fff; }
  .cell-comment::placeholder{ font-family:Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; font-size:11px; font-style:italic; color:var(--text-muted); opacity:.85; }

  .tbl .spacer{ padding:0!important; border:0!important; background:transparent!important; width:0; min-width:0; }

  .report-btn{
    position:absolute; right:6px; top:6px; width:28px; height:28px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer;
    transition:background .18s, transform .08s, border-color .18s;
  }
  .report-btn .material-icons{ font-size:18px; color:#475569; }
  .report-btn:hover{ background:#f3f4f6; transform:translateY(-1px); border-color:#d1d5db; }

  /* ===== Menu kolom aktif ===== */
  .col-menu{
    position:absolute; z-index:var(--z-colmenu); background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.12); padding:6px; width:max-content; max-width:min(420px, calc(100vw - 24px));
  }
  .menu-item{
    display:flex; gap:8px; align-items:center; width:100%; text-align:left; background:#fff; border:1px solid transparent;
    border-radius:10px; padding:8px 10px; cursor:pointer; font:600 13px/1.1 Poppins, sans-serif;
    transition:background .18s, border-color .18s, transform .08s;
  }
  .menu-item span.material-icons{ font-size:18px; }
  .menu-item:hover{ background:#fafafa; transform:translateY(-1px); }
  .menu-item.danger{ color:#b42318; }
  .menu-sep{ height:1px; background:#eef2f7; margin:6px 4px; }

  /* ===== Modal ===== */
  .modal[hidden]{ display:none; }
  .modal{ position:fixed; inset:0; z-index:var(--z-modal-base); }
  .modal-backdrop{ position:absolute; inset:0; background:color-mix(in srgb, #000 40%, transparent); opacity:0; transition:opacity .12s ease; }
  .modal-dialog{
    position:absolute; left:50%; top:50%; transform:translate(-50%, calc(-50% + 8px)) scale(.98);
    width:min(860px, calc(100vw - 32px)); background:#fff; border:1px solid var(--border); border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.18); opacity:0; transition:opacity .12s, transform .12s;
    max-height:min(92dvh, calc(100vh - 24px)); display:flex; flex-direction:column; overflow:hidden; content-visibility:auto;
  }
  .modal.show .modal-backdrop{ opacity:1; }
  .modal.show .modal-dialog{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eef2f7; }
  .modal-title{ font:700 14px/1.2 Poppins, sans-serif; }
  .modal-close{ width:32px; height:32px; border:0; background:transparent; border-radius:8px; cursor:pointer; font-size:20px; line-height:1; }
  .modal-close:hover{ background:#f3f4f6; }
  .modal-body{ padding:14px; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .modal-foot{ display:flex; gap:8px; justify-content:flex-end; padding:12px 14px; border-top:1px solid #eef2f7; }
  #asmModal.modal{ z-index:var(--z-modal-base); }
  #studentReportModal.modal{ z-index:var(--z-modal-top); }

  .modal-label{ margin:6px 0; font:600 12px/1 Poppins, sans-serif; color:#111827; }
  .modal-input{ width:100%; height:38px; font:600 13px/1 Poppins, sans-serif; border:1px solid var(--border); border-radius:8px; padding:6px 8px; background:#fff; }
  .modal-textarea{ width:100%; min-height:72px; font:600 13px/1.2 Poppins, sans-serif; border:1px solid var(--border); border-radius:8px; padding:8px; background:#fff; }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .chk{ display:flex; align-items:center; gap:8px; font:600 12px/1.2 Poppins, sans-serif; }

  /* ===== Ringkasan laporan siswa ===== */
  .rep-sum{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  @media (max-width: 560px){ .rep-sum{ grid-template-columns:1fr; } }

  .rep-chip{
    border:1px solid var(--border); border-radius:12px; padding:8px 10px;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:3px; background:#fff; min-height:52px; color:var(--text);
  }
  .rep-chip .k, .rep-chip .v, .rep-chip .p{ font-family:Poppins, sans-serif; }
  .rep-chip .k{ font-weight:600; font-size:11px; line-height:1.2; opacity:.8; }
  .rep-chip .v{ font-weight:700; font-size:15px; line-height:1.1; }
  .rep-chip .p{ font-weight:600; font-size:11px; line-height:1.2; opacity:.86; }

  .rep-detail{ width:100%; border-collapse:collapse; font:500 12px/1.4 Poppins, sans-serif; margin-top:6px; white-space:nowrap; }

  .modal-head{ gap: 10px; }
  .rep-head-main{ flex: 1 1 auto; min-width: 0; }
  .rep-head-name{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:220px; }
  .rep-name-label{ font:600 11px/1 Poppins, sans-serif; color: var(--text-muted); }
  .rep-name-combo input[type="text"]{ height:36px; font-size:12px; }
  
  @media (max-width: 640px){
    .modal-head{ flex-wrap:wrap; align-items:flex-start; }
    .rep-head-name{ width:100%; }
  }

  /* ===== Responsiveness ===== */
  @supports (-webkit-overflow-scrolling:touch){ .tbl .sticky-left{ transform:translate3d(0,0,0); } }
  @media (min-width: 1024px) { :root { --name-col: 200px; } }
  @media (min-width: 1280px) { :root { --name-col: 220px; } }
  @media (min-width: 1600px) { :root { --name-col: 300px; } }
  @media (max-width:625px){
    .tbl{ table-layout:fixed; }
    .modal-body{ padding:10px; }
  }

  /* ===== Paritas tampilan ===== */
  .card.card-topbar{ background: color-mix(in srgb, var(--tint) 22%, #fff); }
  .card.card-table{ background: color-mix(in srgb, var(--paper) 88%, #fff); }

  .card[aria-busy="true"]{ --ph:'Memuat data ...'; }
  .card[data-empty="1"]{ --ph:'Belum ada data asesmen'; }

  .tbl thead .pick-col:hover{ background:#f8fafc; border-radius:10px; outline:1px solid #e5e7eb; }
  .tbl tbody tr:hover td{ background: color-mix(in srgb, #000 3%, transparent); }

  .save-badge{ margin-left:6px; padding:2px 6px; border-radius:10px; border:1px solid var(--border); font:700 11px/1 Poppins; background:#fff; color:#0f172a; }

  .row-no{
    position:absolute; left:6px; top:6px; width:20px; height:20px; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    font:700 11px/1 Poppins, sans-serif; color:#fff; background:var(--ink); opacity:.95;
  }

  /* Placeholder umum */
  .abs-placeholder{ display:none; padding:18px; text-align:center; color: var(--text-muted); }
  .abs-placeholder[hidden]{ display:none !important; }
  #asmTableCard[data-empty="true"] #asmPlaceholderEmpty:not([hidden]){ display:block; }
  #asmTableCard[data-empty="true"] .scroll-wrap{ display:none !important; }
  #asmTableCard[data-empty="true"] .tbl-tip{ display:none !important; }
  #asmTableCard[data-empty="true"] .head-scroller{ display:none !important; }
  #asmTableCard[aria-busy="true"] #asmPlaceholderLoading:not([hidden]){ display:block; }
  #asmTableCard[aria-busy="true"] .scroll-wrap{ display:none !important; }
  #asmTableCard[aria-busy="true"] .tbl-tip{ display:none !important; }

  .mi{ font-size:18px; color:currentColor; vertical-align:-4px; }
  .btn-ghost-ink{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--ink); background:#fff; border:1px solid rgba(184,124,76,.45);
    border-radius:10px; padding:6px 10px; cursor:pointer; font:600 13px/1 Poppins, sans-serif;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
    transition:background .18s, box-shadow .18s, border-color .18s, transform .08s;
  }
  .btn-ghost-ink:hover{
    background: color-mix(in srgb, var(--ink) 6%, #ffffff);
    border-color: rgba(184,124,76,.6); box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }

  /* ===== Head scroller (sticky header) ===== */
  .head-scroller{
    position: sticky;
    top: var(--sticky-top-offset); /* top:0 karena desktop header hidden */
    z-index: 10;
    background: var(--surface-soft);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .head-scroller .tbl{ width: max-content; }

  /* Pastikan header benar-benar sticky di viewport */
  #asmHeadTable thead, #asmHeadTable thead th{
    position: sticky; top: 0; z-index: 11; background: var(--surface-soft);
  }

  #asmHeadTable, #asmBodyTable{
    table-layout: fixed; width: auto; display: inline-table;
  }
  @supports (width: max-content){
    #asmHeadTable, #asmBodyTable{ width: max-content; display: table; }
  }

  /* Layering: kolom sticky kiri di header selalu di atas */
  #asmHeadTable thead th { z-index: 5; }
  #asmHeadTable thead th.th-date,
  #asmHeadTable thead th.th-date-sub { z-index: 5; }
  #asmHeadTable thead th.sticky-left,
  #asmHeadTable thead .sticky-left{
    z-index: 7 !important; background: var(--surface-soft);
  }
  #asmHeadTable .th-date.active{ z-index: 5; }

  /* Dark mode */
  @media (prefers-color-scheme:dark){
    body{ background:#0b1324; color:#e5e7eb; }
    .card{ background:#0f172a; border-color:#253047; }
    .toolbar .field>label{ color:#e5e7eb; }
    .btn-ghost{ background:#0f172a; color:#e5e7eb; border-color:#253047; }
    .combo input[type="text"]{ background:#0f172a; color:#e5e7eb; border-color:#253047; }
    .combo-list{ background:#0f172a; border-color:#253047; box-shadow:0 16px 30px rgba(0,0,0,.45); }
    .combo-item:hover{ background:#1a2336; }
    .scroll-wrap{ background:#0f172a; }
    .modal-dialog{ background:#0f172a; border-color:#253047; }
    .modal-head,.modal-foot{ border-color:#1f2937; }
    .rep-chip{ background:#0b1324; border-color:#253047; }
    .rep-chip .v{ color:inherit; }
    .rep-detail th{ background:#111827; }
    .tbl tbody tr:hover td{ background: color-mix(in srgb, #fff 4%, transparent); }
    .save-badge{ background:#0f172a; color:#e5e7eb; border-color:#253047; }
    .row-no{ background: var(--ink); color:#fff; opacity:.98; }
    .abs-placeholder{ color:#94a3b8; }
    .topbar-head .topbar-icon{ color:#e5e7eb; opacity:.95; }
    .topbar-head .topbar-title{ color:#e5e7eb; }
    .topbar-head .head-divider{ background:#1f2937; }
    .head-scroller{ background: color-mix(in srgb, #1a2336 60%, transparent); box-shadow: 0 2px 0 rgba(0,0,0,.28); }
  }

  /* Kecilkan ikon simpan */
  #saveAllBtn .material-icons{ font-size:16px !important; }
  #menuSaveActive .material-icons{ font-size:16px !important; }
  #exportCsvBtn .material-icons{ font-size:16px !important; }

  /* ========== Topbar Head ========== */
  .topbar-head{
    display:block;
    margin: -4px 0 10px;
    background: transparent;
  }
  .topbar-head .head-row{ display:flex; align-items:center; gap:8px; padding: 2px 2px 8px 2px; }
  .topbar-head .topbar-icon{ font-size:20px; line-height:1; color:#0f172a; opacity:.9; }
  .topbar-head .topbar-title{ margin:0; font:700 18px/1 Poppins, sans-serif; color:#0f172a; }
  .topbar-head .head-divider{ height:1px; background:var(--border); margin:0; border:0; }

  /* ====== Rincian Nilai (Tabel di Modal Ringkasan) ====== */
  .rep-detail-scroll{ overflow-x: auto; max-width: 100%; }
  .rep-detail-table{ width: 100%; border-collapse: collapse; min-width: 720px; table-layout: auto; }
  .rep-detail-table th, .rep-detail-table td{
    border: 1px solid rgba(15, 23, 42, 0.16);
    padding: 6px 8px; text-align: center; vertical-align: middle; font-size: 12px;
  }
  .rep-detail-table thead th{ background: var(--tint, #EBD9D1); color: var(--ink, #B87C4C); font-weight: 600; white-space: nowrap; }
  .rep-detail-table td .c{ display: inline-block; width: 100%; }
  
  /* Pastikan wrapper memberi tinggi yang pasti untuk Chart.js */
  #repChartWrap{
    height: var(--rep-chart-h) !important;
    min-height: 240px;
  }
  #repChartWrap canvas{
    height: 100% !important; width: 100% !important; display: block;
  }


  /* === TWB UNIFIED UI TYPOGRAPHY & SPINNER MESSAGE === */
  :root{ --twb-ui-font: Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
  body, input, button, select, textarea, table{
    font-family: var(--twb-ui-font) !important;
  }
  body{ font-size:14px; font-weight:500; line-height:1.35; }
  .btn, .btn-ghost, .btn-danger, .mg-btn, .mg-btn-ghost, .btn-ghost-ink,
  button.menu-item, .combo-item{ font-size:13px !important; font-weight:600 !important; }
  .field > label, .modal-label, .rep-name-label{ font-size:12px !important; font-weight:600 !important; }
  .topbar-h2, .topbar-title h2, .topbar-head .topbar-title{ font-size:16px !important; font-weight:700 !important; line-height:1.2 !important; }
  .tbl, .rep-detail{ font-size:13px !important; font-weight:500 !important; }
  #twbBusyText, .twb-busy-text{ font:600 13px/1.25 var(--twb-ui-font) !important; }