/* ==========================================
     DESIGN TOKENS — Figma-grade system
     ========================================== */
  :root{
    /* Base palette */
    --bg: #FAFBFC;
    --bg-subtle: #F4F6F8;
    --surface: #FFFFFF;
    --surface-hover: #F9FAFB;
    --surface-active: #F1F4F8;
    --surface-elevated: #FFFFFF;

    /* Navy/Brand */
    --navy-950:#0A1628;
    --navy-900:#0F1E36;
    --navy-800:#152844;
    --navy-700:#1E365C;
    --navy-600:#2C4670;
    --navy-500:#3F5A89;
    --navy-400:#6B82A8;
    --navy-300:#9CADC8;
    --navy-200:#C5D1E2;
    --navy-100:#E1E8F2;
    --navy-50:#F1F5FA;

    /* Royal accent */
    --royal-900:#1E3A8A;
    --royal-800:#1E40AF;
    --royal-700:#2147BD;
    --royal-600:#2D55D4;
    --royal-500:#3B6FE4;
    --royal-400:#5B8DEF;
    --royal-300:#86ACF4;
    --royal-100:#DBE7FB;
    --royal-50:#EFF4FE;

    /* Semantic */
    --success-700:#15683E;
    --success-600:#1F7A4D;
    --success-500:#23925C;
    --success-100:#D7EEDF;
    --success-50:#EDF7F1;

    --warning-700:#8A5A05;
    --warning-600:#C2810B;
    --warning-500:#D89712;
    --warning-100:#FBE9C2;
    --warning-50:#FDF6E3;

    --danger-700:#8B2419;
    --danger-600:#B43A2C;
    --danger-500:#C84A3B;
    --danger-100:#F7D9D4;
    --danger-50:#FBEEEB;

    --gold-700:#8E6620;
    --gold-600:#B8893E;
    --gold-500:#C99956;
    --gold-100:#F2E6D0;

    /* Text */
    --ink-1: #0A1628;
    --ink-2: #1F2937;
    --ink-3: #4B5563;
    --ink-4: #6B7280;
    --ink-5: #9CA3AF;
    --ink-6: #D1D5DB;

    /* Borders */
    --border-1: #E5E7EB;
    --border-2: #EDF0F4;
    --border-3: #F3F4F6;
    --border-strong: #D1D5DB;

    /* Elevation - subtle layered shadows */
    --elev-0: 0 0 0 1px rgba(15,30,54,0.04);
    --elev-1: 0 1px 2px rgba(15,30,54,0.04), 0 0 0 1px rgba(15,30,54,0.04);
    --elev-2: 0 2px 4px rgba(15,30,54,0.04), 0 1px 2px rgba(15,30,54,0.06), 0 0 0 1px rgba(15,30,54,0.04);
    --elev-3: 0 8px 16px -4px rgba(15,30,54,0.06), 0 4px 8px -2px rgba(15,30,54,0.04), 0 0 0 1px rgba(15,30,54,0.04);
    --elev-4: 0 16px 32px -8px rgba(15,30,54,0.08), 0 8px 16px -4px rgba(15,30,54,0.06), 0 0 0 1px rgba(15,30,54,0.04);

    /* Radii (Figma standard 4/8/12/16) */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;

    /* Spacing (8pt grid) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
    --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;

    /* Motion */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 150ms;
    --t-base: 250ms;
    --t-slow: 400ms;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html,body{background:var(--bg);color:var(--ink-1);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-feature-settings:"ss01","cv11","cv03";font-size:14px;line-height:1.5;}

  /* Typography utilities */
  .font-display{font-family:'Fraunces',ui-serif,Georgia,serif;font-feature-settings:"ss01";letter-spacing:-0.015em;}
  .font-mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
  .num{font-family:'Fraunces',serif;font-variant-numeric:tabular-nums;letter-spacing:-0.025em;}
  .num-mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}

  /* Eyebrow / label */
  .eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--ink-4);font-weight:500;
  }
  .eyebrow-dark{color:rgba(255,255,255,0.5);}

  /* Background utilities */
  .bg-grid{
    background-image:
      linear-gradient(to right, rgba(15,30,54,0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,30,54,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .bg-dots{
    background-image: radial-gradient(rgba(15,30,54,0.06) 1px, transparent 1px);
    background-size: 16px 16px;
  }
  .bg-mesh{
    background:
      radial-gradient(at 27% 37%, rgba(59,111,228,0.06) 0px, transparent 50%),
      radial-gradient(at 97% 21%, rgba(184,137,62,0.05) 0px, transparent 50%),
      radial-gradient(at 52% 99%, rgba(31,122,77,0.05) 0px, transparent 50%);
  }
  .bg-paper{
    background-color: #FAFBFC;
    background-image:
      linear-gradient(rgba(15,30,54,0.012) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,30,54,0.012) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  /* Cards */
  .card{
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--elev-1);
  }
  .card-elev{
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--elev-2);
  }
  .card-outline{
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-1);
  }
  .card-ink{
    background: var(--navy-950);
    color: #E1E8F2;
    border-radius: var(--r-lg);
  }
  .card-tinted{
    background: var(--royal-50);
    border-radius: var(--r-lg);
    border: 1px solid var(--royal-100);
  }

  /* Sidebar */
  .sidebar{
    background: var(--surface);
    border-right: 1px solid var(--border-2);
  }
  .nav-item{
    display:flex;align-items:center;gap:12px;padding:9px 12px;
    border-radius: var(--r-md);font-size:13px;font-weight:500;
    color:var(--ink-3);transition:all var(--t-fast) var(--ease-out-quart);
    position:relative;cursor:pointer;user-select:none;
  }
  .nav-item:hover{background:var(--surface-hover);color:var(--ink-1);}
  .nav-item[data-active="true"]{
    background:var(--navy-950);color:#fff;
  }
  .nav-item[data-active="true"] .nav-num{color:rgba(255,255,255,0.5);}
  .nav-item[data-active="true"]::before{
    content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
    width:3px;height:18px;background:var(--gold-600);border-radius:0 2px 2px 0;
  }
  .nav-num{
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;
    color:var(--ink-5);min-width:20px;
  }

  /* Buttons */
  .btn{
    display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
    font-size:12.5px;font-weight:550;border-radius:var(--r-md);
    border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-1);
    transition:all var(--t-fast) var(--ease-out-quart);cursor:pointer;
  }
  .btn:hover{background:var(--navy-50);border-color:var(--navy-700);}
  .btn-primary{background:var(--navy-950);color:#fff;border-color:var(--navy-950);}
  .btn-primary:hover{background:var(--navy-800);}
  .btn-ghost{border-color:transparent;background:transparent;}
  .btn-ghost:hover{background:var(--surface-hover);}

  /* Pills */
  .pill{
    display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
    border-radius:99px;font-size:10.5px;font-weight:600;letter-spacing:0.06em;
    text-transform:uppercase;line-height:1.4;
  }
  .pill-neutral{background:var(--navy-50);color:var(--navy-700);}
  .pill-good{background:var(--success-50);color:var(--success-700);}
  .pill-warn{background:var(--warning-50);color:var(--warning-700);}
  .pill-alarm{background:var(--danger-50);color:var(--danger-700);}
  .pill-dark{background:var(--navy-950);color:#fff;}
  .pill-gold{background:var(--gold-100);color:var(--gold-700);}

  /* Chip / tag */
  .chip{
    display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
    border-radius:var(--r-sm);font-size:12px;font-weight:500;
    background:var(--navy-50);color:var(--navy-700);
  }

  /* Slider — Figma-style */
  input[type=range].slider-figma{
    -webkit-appearance:none;appearance:none;width:100%;height:4px;
    background:linear-gradient(90deg,var(--navy-900) var(--p,50%),var(--border-1) var(--p,50%));
    outline:none;border-radius:99px;cursor:pointer;
  }
  input[type=range].slider-figma::-webkit-slider-thumb{
    -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
    background:#fff;border:2px solid var(--navy-900);cursor:grab;
    box-shadow:0 1px 4px rgba(0,0,0,0.15);
    transition:transform var(--t-fast) var(--ease-out-quart);
  }
  input[type=range].slider-figma::-webkit-slider-thumb:hover{transform:scale(1.1);}
  input[type=range].slider-figma::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15);}
  input[type=range].slider-figma::-moz-range-thumb{
    width:18px;height:18px;border-radius:50%;background:#fff;
    border:2px solid var(--navy-900);cursor:grab;
  }

  /* Stamp */
  .stamp{
    border:1.5px solid currentColor;padding:2px 8px;
    font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.14em;
    text-transform:uppercase;display:inline-block;font-weight:600;
  }

  /* Live indicator */
  @keyframes pulse-soft{0%,100%{opacity:0.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
  .live-dot{
    width:6px;height:6px;border-radius:50%;background:var(--success-500);
    box-shadow:0 0 0 4px rgba(35,146,92,0.15);
    animation:pulse-soft 2.4s ease-in-out infinite;
  }

  /* Heatmap cells */
  .heat-cell{transition:transform var(--t-fast) var(--ease-out-quart);border-radius:4px;}
  .heat-cell:hover{transform:scale(1.06);z-index:5;box-shadow:var(--elev-2);}

  /* Divider with text */
  .divider-dot::after{content:"·";margin:0 7px;color:var(--ink-5);}

  /* Quote / insight */
  .insight-quote{font-family:'Fraunces',serif;font-style:italic;line-height:1.4;}

  /* Decoration */
  .accent-bar{background:linear-gradient(90deg,var(--navy-950) 0%,var(--royal-700) 50%,var(--royal-500) 100%);}

  /* Scrollbar */
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--border-1);border-radius:99px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--border-strong);}

  /* Tooltip */
  .tip{
    background:var(--navy-950);color:#fff;padding:6px 10px;
    border-radius:var(--r-sm);font-size:11.5px;font-weight:500;
    box-shadow:var(--elev-3);
  }

  /* Animations on mount */
  @keyframes fade-up{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
  }
  .anim-in{animation:fade-up var(--t-slow) var(--ease-out-expo) both;}

  /* Focus states */
  *:focus-visible{outline:2px solid var(--royal-500);outline-offset:2px;border-radius:var(--r-xs);}
  input[type=range]:focus-visible{outline:none;}
  input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(59,111,228,0.2);}

  /* Tab bar (secondary nav for tabs within views) */
  .tab-pill{
    padding:6px 12px;border-radius:99px;font-size:12px;font-weight:550;
    color:var(--ink-3);transition:all var(--t-fast);cursor:pointer;user-select:none;
  }
  .tab-pill:hover{background:var(--surface-hover);}
  .tab-pill[data-active="true"]{background:var(--navy-950);color:#fff;}

  /* Bento separators */
  .h-rule{height:1px;background:linear-gradient(to right,transparent,var(--border-1) 20%,var(--border-1) 80%,transparent);}

  /* Print */
  @media print{
    .no-print{display:none!important;}
    body{background:#fff;}
    .card,.card-outline,.card-elev{box-shadow:none;border:1px solid #E5E7EB;}
  }

/* ===================================================================
   ✦ RESPONSIVE — DASHBOARD-FIRST APPROACH
   ===================================================================
   Dashboard punya struktur:
     <div class="flex">
       <aside class="sidebar w-[260px] h-screen sticky">  ← problem di mobile
       <main class="max-w-[1600px]">                       ← problem di mobile
     </div>
   Solusi: di mobile, sidebar jadi top-bar (bukan fixed 260px), 
           main pakai full-width.
   =================================================================== */

/* === TABLET (≤ 1024px) === */
@media (max-width: 1024px){
  /* Sidebar tetap ada tapi lebih sempit */
  .sidebar{
    width:220px !important;
    min-width:220px !important;
  }

  /* Grid columns: 12-col turun ke 6-col */
  .grid-cols-12{ grid-template-columns:repeat(6, minmax(0, 1fr)) !important; }
  .grid-cols-7,
  .grid-cols-6,
  .grid-cols-5,
  .grid-cols-4 { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
  .grid-cols-3,
  .grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }

  /* Setengah-kan col-span di tablet */
  .col-span-8, .col-span-7, .col-span-6, .col-span-5, .col-span-4 {
    grid-column:span 6 / span 6 !important;
  }
  .col-span-3 { grid-column:span 3 / span 3 !important; }

  /* Padding main content dikurangi */
  main.max-w-\[1600px\]{
    padding-left:20px !important;
    padding-right:20px !important;
    max-width:100% !important;
  }
  .px-8{ padding-left:20px !important; padding-right:20px !important; }

  /* Chart Recharts boleh shrink */
  .recharts-responsive-container{ min-width:0 !important; }
}

/* === MOBILE / HP (≤ 768px) === */
@media (max-width: 768px){

  /* === FIX UTAMA: sidebar dari fixed-width jadi top-bar === */
  /* Container utama (flex row → flex column di mobile) */
  body > div#root > div.flex,
  #root .flex.min-h-screen,
  div.flex.min-h-screen{
    flex-direction:column !important;
  }

  .sidebar{
    /* Hentikan jadi 260px tinggi screen yang sticky */
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    position:static !important;
    flex-shrink:1 !important;
    border-right:none !important;
    border-bottom:1px solid var(--border-1, #E5E9F0) !important;
  }

  /* Sidebar isi: NAV yg awalnya vertikal jadi horizontal scrollable */
  .sidebar > nav,
  .sidebar nav{
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch;
    display:flex !important;
    flex-direction:row !important;
    gap:0 !important;
    padding:8px 12px !important;
    border-top:1px solid var(--border-1, #E5E9F0);
  }
  .sidebar > nav > div,
  .sidebar nav > div{
    flex-shrink:0 !important;
    min-width:max-content;
    margin-right:14px;
  }
  /* "Section" label di nav: kompak */
  .sidebar nav .label-eyebrow,
  .sidebar nav [class*="font-mono"][class*="text-[9"],
  .sidebar nav [class*="font-mono"][class*="text-[10"]{
    font-size:8.5px !important;
    margin-bottom:4px !important;
    white-space:nowrap;
  }
  /* Tombol nav item */
  .sidebar nav button{
    white-space:nowrap !important;
    padding:6px 10px !important;
    font-size:12px !important;
  }

  /* Brand header sidebar: lebih ringkas */
  .sidebar > div:first-child,
  .sidebar [class*="border-b"]{
    padding:14px 16px !important;
  }

  /* Container utama main */
  main.max-w-\[1600px\]{
    padding:18px 14px !important;
    max-width:100% !important;
  }

  /* === SEMUA GRID KOLAPS KE 1 KOLOM === */
  .grid-cols-12,
  .grid-cols-7,
  .grid-cols-6,
  .grid-cols-5,
  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  [class*="col-span-"]{ grid-column:span 1 / span 1 !important; }

  /* Padding card lebih kompak */
  .px-8{ padding-left:16px !important; padding-right:16px !important; }
  .px-5{ padding-left:14px !important; padding-right:14px !important; }
  .py-8{ padding-top:16px !important; padding-bottom:16px !important; }
  .py-7{ padding-top:14px !important; padding-bottom:14px !important; }
  .py-6{ padding-top:14px !important; padding-bottom:14px !important; }

  /* Typography: shrink */
  .font-display{
    letter-spacing:-0.005em;
  }
  /* Heading display besar */
  [class*="text-[40px]"],
  [class*="text-[44px]"],
  [class*="text-[48px]"],
  [class*="text-[56px]"]{
    font-size:28px !important;
    line-height:1.15 !important;
  }
  [class*="text-[32px]"],
  [class*="text-[36px]"]{
    font-size:22px !important;
    line-height:1.2 !important;
  }
  [class*="text-[24px]"],
  [class*="text-[26px]"],
  [class*="text-[28px]"]{
    font-size:18px !important;
  }
  [class*="text-[20px]"]{
    font-size:16px !important;
  }

  /* Chart Recharts wajib responsif */
  .recharts-wrapper,
  .recharts-responsive-container,
  .recharts-surface{
    max-width:100% !important;
    width:100% !important;
  }
  .recharts-responsive-container{
    min-width:0 !important;
  }

  /* Width fixed yg ada di komponen: paksa fluid */
  [class*="w-[280px]"]{ width:100% !important; max-width:100% !important; }
  [class*="w-[260px]"]{ width:100% !important; max-width:100% !important; }
  [class*="w-[1600px]"]{ width:100% !important; max-width:100% !important; }
  [class*="min-w-[110px]"]{ min-width:0 !important; }

  /* Table & scroll horizontal */
  .scroll-x,
  [class*="overflow-x"]{
    -webkit-overflow-scrolling:touch;
    overflow-x:auto !important;
  }

  /* Tabs/pills */
  .tab-pill{ font-size:11px !important; padding:5px 9px !important; }
  .pill, .chip{ font-size:10px !important; }
  .btn{ padding:6px 10px !important; font-size:11.5px !important; }

  /* Loading screen di mobile */
  #loading-screen img{ height:44px !important; margin-bottom:18px !important; }
  #loading-screen > div{ max-width:90% !important; padding:24px !important; }
  #loading-screen [style*="font-size:24px"]{ font-size:17px !important; }
  #loading-screen [style*="font-size:10.5px"]{ font-size:9.5px !important; }

  /* Prevent any horizontal overflow on body */
  html, body{
    overflow-x:hidden !important;
    max-width:100vw !important;
  }
}

/* === SMALL MOBILE (≤ 480px) === */
@media (max-width: 480px){
  main.max-w-\[1600px\]{
    padding:14px 10px !important;
  }
  .px-8{ padding-left:12px !important; padding-right:12px !important; }
  .px-5{ padding-left:12px !important; padding-right:12px !important; }
  .px-4{ padding-left:10px !important; padding-right:10px !important; }

  /* Heading lebih kecil lagi */
  [class*="text-[40px]"],
  [class*="text-[44px]"],
  [class*="text-[48px]"],
  [class*="text-[56px]"]{
    font-size:24px !important;
  }

  /* Card dalam grid: padding minimal */
  .card,
  .card-outline,
  .card-elev{
    padding:14px !important;
  }

  /* Sidebar nav lebih kompak */
  .sidebar nav button{
    padding:5px 8px !important;
    font-size:11.5px !important;
  }
}

/* ===================================================================
   ✦ FIX MOBILE — Tab 05 Scenario Planning & Tab 06 Risk Heatmap
   =================================================================== */

@media (max-width: 768px){

  /* ---------- TAB 05: SCENARIO QUADRANT ----------
     Problem: card h-[220px] terlalu sempit di HP, badge "MOST LIKELY"
     dan teks body bertumpukan. Label "RENDAH/TINGGI" rotated juga 
     menabrak konten.
  */

  /* Quadrant card: tinggi jadi auto (bukan 220px), padding bawah lega */
  [class*="h-[220px]"]{
    height:auto !important;
    min-height:auto !important;
  }
  /* Spesifik card scenario yang p-5 h-[220px] */
  div.relative.p-5[class*="h-[220px]"],
  div.relative[class*="p-5"][class*="h-[220px]"]{
    padding:18px 16px 48px 16px !important;
    min-height:200px !important;
  }

  /* Angka persen besar (text-[34px]) di pojok kanan atas: shrink agar tidak nabrak title */
  [class*="text-[34px]"]{
    font-size:24px !important;
  }
  /* Container persennya (top-3 right-3) */
  .absolute[class*="top-3"][class*="right-3"][class*="text-[34px]"]{
    top:14px !important;
    right:14px !important;
  }

  /* Body teks scenario: hapus pr-12 (yg paksa text terdorong, jadi narrow) */
  p[class*="pr-12"]{
    padding-right:0 !important;
    margin-top:10px !important;
  }

  /* Title scenario "Reformasi Triumph" dll: lebih kecil di HP */
  div.font-display[class*="text-[20px]"]{
    font-size:17px !important;
  }

  /* Badge "MOST LIKELY" stamp: pindah ke posisi normal (bukan absolute)
     supaya tidak menimpa konten */
  .stamp{
    position:static !important;
    display:inline-block !important;
    margin-top:14px !important;
    transform:rotate(0deg) !important;
    font-size:9px !important;
    padding:3px 8px !important;
  }
  /* Override absolute pada stamp di card scenario */
  div.absolute.bottom-3.left-5.stamp,
  .stamp.absolute{
    position:static !important;
    bottom:auto !important;
    left:auto !important;
    margin-top:12px !important;
  }

  /* Container quadrant: mx-12 my-4 terlalu lebar di HP, bikin sumpek */
  .grid.grid-cols-2[class*="mx-12"]{
    margin-left:8px !important;
    margin-right:8px !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* Quadrant outer container: padding ringan, label luar di-hide
     (label "RENDAH/TINGGI" rotated tidak relevan di mobile 1-kolom) */
  div.relative.p-8.pb-12.bg-paper,
  div.relative[class*="p-8"][class*="pb-12"]{
    padding:8px !important;
  }
  /* Hide rotated labels di mobile - tidak masuk akal di layout 1-kolom */
  div.absolute.left-1\/2[class*="-translate-x-1/2"][class*="top-2"],
  div.absolute.left-1\/2[class*="-translate-x-1/2"][class*="bottom-2"],
  div.absolute.left-2[class*="-rotate-90"],
  div.absolute.right-2[class*="rotate-90"]{
    display:none !important;
  }

  /* ---------- TAB 06: RISK HEATMAP 5×5 ----------
     Problem: cell h-[60px] dengan label I-1..I-5 di kiri yg sempit,
     dan ID risiko (R1, R2...) dalam cell tertumpuk di HP.
  */

  /* Heatmap container: hilangkan padding 'col-span-5' (sudah 1-col),
     ukuran cell diperbesar agar label terbaca */
  
  /* Cell heatmap h-[60px]: di HP butuh aspect-ratio supaya tetap square */
  div.heat-cell[class*="h-[60px]"]{
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    min-height:50px !important;
  }

  /* Label angka di kiri (I 1..5) yg h-[60px] flex: samakan tinggi dengan cell */
  div.flex.flex-col.justify-around > div[class*="h-[60px]"]{
    height:auto !important;
    aspect-ratio:auto !important;
    min-height:50px !important;
    flex:1 1 auto !important;
    font-size:9px !important;
    padding-right:4px !important;
  }

  /* Cell heatmap interior: angka skor di pojok kiri-atas lebih kecil */
  div.heat-cell .absolute.top-1.left-1\.5{
    top:2px !important;
    left:3px !important;
    font-size:8px !important;
  }
  /* ID risiko di pojok kanan-bawah dalam cell heatmap */
  div.heat-cell .absolute.bottom-1.right-1\.5{
    bottom:2px !important;
    right:3px !important;
    max-width:90% !important;
    gap:1px !important;
  }
  div.heat-cell .absolute.bottom-1.right-1\.5 span{
    font-size:7.5px !important;
    padding:0 2px !important;
  }

  /* Heatmap grid container parent: kurangi padding kiri (label I) */
  .grid.grid-cols-5.gap-1{
    gap:2px !important;
  }
  /* Label "L 1..L 5" di bawah heatmap */
  .grid.grid-cols-5.gap-1.mt-1\.5 > div{
    font-size:9px !important;
  }

  /* Legend 4-kolom "Low/Medium/High/Critical": jadi 2-kolom di HP */
  .grid.grid-cols-4.gap-2{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:8px !important;
  }
  .grid.grid-cols-4.gap-2 > div .text-\[10px\]{
    font-size:9.5px !important;
  }

  /* Top 3 Critical Risks: dari 3-col jadi 1-col */
  .grid.grid-cols-3.gap-3{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}

/* === SMALL MOBILE (≤ 480px) — heatmap & quadrant lebih kompak === */
@media (max-width: 480px){

  /* Heatmap cell jadi sedikit lebih kecil supaya tidak overflow */
  div.heat-cell[class*="h-[60px]"]{
    min-height:42px !important;
  }
  div.heat-cell .absolute.bottom-1.right-1\.5 span{
    font-size:7px !important;
  }
  div.flex.flex-col.justify-around > div[class*="h-[60px]"]{
    min-height:42px !important;
    font-size:8.5px !important;
  }

  /* Quadrant card lebih kompak */
  div.relative.p-5[class*="h-[220px]"]{
    padding:14px 12px 40px 12px !important;
    min-height:180px !important;
  }
  [class*="text-[34px]"]{
    font-size:22px !important;
  }
  div.font-display[class*="text-[20px]"]{
    font-size:16px !important;
  }
}