:root{
    --bg:#f6f8fb;
    --card:#ffffff;
    --ink:#0f172a;
    --muted:#64748b;
    --line:#e5e7eb;
    --shadow: 0px 4px 10px 0px rgba(102, 148, 255, 0.25);
    --radius-xl:10px;
    --radius-md:8px;
    --border-card: 1px solid rgba(204, 219, 255, 1);
    --up-color: rgba(52, 199, 89, 1);
    --down-color: rgba(255, 56, 60, 1);


    /* Blue header for table */
    --head-a:#2563EB;   /* blue */
    --head-b:#1E3A8A;   /* deep blue */
    --head-ink:#ffffff;

    /* Status chips (no red) */
    --ok-bg:#DCFCE7; --ok-ink:#15803D;
    --neg-bg:#FFEFD5; --neg-ink:#B45309;
    --neu-bg:#F1F5F9; --neu-ink:#334155;

    --accent:#2563EB;
    --ring: rgba(37,99,235,.15);

    /* Chart colors */
    --ch-revenue:#2563EB;   /* blue */
    --ch-expense:#F59E0B;   /* amber */
    --ch-profit:#059669;    /* teal/green */

    /* Sticky header heights */
    --thead-h1: 44px;
    --thead-h2: 36px;
  }

  *{ box-sizing:border-box !important }
  
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

  .wrap{ 
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    letter-spacing:.2px !important;
    margin:28px auto 56px !important; 
    padding:0 15px !important; 
  }
  .success-text{
    color: var(--ok-ink);
    font-weight: 700;
  }
  .name-lembaga{
    cursor: pointer;
  }
  .headline{
    display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:10px;
  }
  .title{ font-size:24px; font-weight:700; letter-spacing:.3px; }
  .meta{ color:var(--muted); font-size:12px; }

  .toolbar{ display:flex; gap:10px; align-items:center; }
  .select{
    appearance:none; border:1px solid #e7ebf3;
    background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#dbe7ff,#f5f7ff) border-box;
    color:var(--ink); padding:10px 36px 10px 12px; border-radius:12px; box-shadow:var(--shadow); border: var(--border-card) !important;outline:none;
  }
  .select:focus{ box-shadow:0 0 0 8px var(--ring), var(--shadow) }

  .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:15px; }
  .grid .col-1{ grid-column:span 1 !important } .grid .col-2{ grid-column:span 2 !important } .grid .col-3{ grid-column:span 3 !important } 
  .grid .col-4{ grid-column:span 4 !important } .grid .col-5{ grid-column:span 5 !important } .grid .col-6{ grid-column:span 6 !important } 
  .grid .col-7{ grid-column:span 7 !important } .grid .col-8{ grid-column:span 8 !important } .grid .col-9{ grid-column:span 9 !important }
  .grid .col-10{ grid-column:span 10 !important } .grid .col-11{ grid-column:span 11 !important } .grid .col-12{ grid-column:span 12 !important }

  .grid .col-1, .grid .col-2, .grid .col-3, .grid .col-4, .grid .col-5, .grid .col-6, .grid .col-7, .grid .col-8, .grid .col-9, .grid .col-10, .grid .col-11, .grid .col-12{ 
    -webkit-box-flex: unset !important;
    -ms-flex: unset !important;
    flex: unset !important;
    max-width: unset !important;
    padding: 0px !important;
  }

  @media (max-width: 1100px) { 
    .grid .col-3{ grid-column:span 6 !important }
    .grid .col-4{ grid-column:span 6 !important }
    .grid .col-9{ grid-column:span 12 !important }
  }

  @media (max-width: 720px) {
    .grid .col-2, .grid .col-3, .grid .col-4, .grid .col-6, .grid .col-8, .grid .col-12{ grid-column:span 12 !important }
  }

  @media (max-width: 480px) {
    .grid .col-1, .grid .col-2, .grid .col-3, .grid .col-4, .grid .col-5, .grid .col-6, .grid .col-7, .grid .col-8, .grid .col-9, .grid .col-10, .grid .col-11, .grid .col-12 {
      grid-column:span 12 !important 
    }
  }

  .card{
    background:var(--card) !important; border:var(--border-card) !important; border-radius:var(--radius-xl) !important;
    box-shadow:var(--shadow) !important; padding:10px 15px !important; position:relative !important;
  }
  .card.kpi, .card.chart-lembaga, .card.card-dash{
    border-radius:var(--radius-xl) !important;
  }
  
  /* KPI */
  .kpi{ display:flex !important; flex-direction:column !important; gap:0px !important; cursor: pointer; }
  .kpi .kpi-head{ display:flex !important; align-items:center !important; justify-content:space-between !important; color:var(--ink) !important; font-weight:600 !important; font-size: 16px; }
  .kpi .kpi-value{ font-size:26px !important; font-weight:700 !important; }
  .kpi-rka-label{
    max-width: 120px;line-height: 1;
  }
  .kpi-rka-label span{
    font-size: 9px;
  }
  .kpi-rka-nom{
    font-size:10px;font-weight:600 !important;
  }
  .card-dash .header-card, .title-chart{ font-weight:700; font-size:18px; }

  .chip{
    display:inline-block; 
    padding:0px 10px; 
    font-size:11px; font-weight:700;
    border:1px solid #eef1f6; background:#f9fafb;
    min-width:46px; text-align:center; /* consistent width across rows */
  }
  .chip.ok{ background: var(--up-color);color: white;border-radius: 4px;padding: 3px 5px;border: 1px solid var(--up-color);}
  .chip.neg{ background:var(--down-color); color: white; border-radius: 4px;padding: 3px 5px;border: 1px solid var(--down-color) }
  .chip.neu{ background:var(--neu-bg); color:var(--neu-ink); border-color:#e2e8f0 }

  .badge{ display:inline-flex; align-items:center; gap:5px; font-size:10px; color:var(--muted); font-weight: normal !important; padding:2px;font-style: italic; }

  /* Table block */
  .table-block .head{ font-weight:700; font-size:18px; margin-bottom:12px; }

  /* Scroll container so sticky headers can stick */
  .table-scroll{
    overflow: auto;
    border-radius: 16px;
    box-shadow: var(--shadow);
    position:relative;
    width:100%;
  }

  /* ===== Sticky header rows ===== */
  .tbl thead th{
    position:sticky;
    background:var(--head-b);
    color:var(--head-ink);
    font-weight:700;
    text-align:center;
    padding:4px 8px;
    border-right:1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
  }

  /* First header row */
  .tbl thead tr:first-child th{
    top:0;
    height:var(--thead-h1);
    z-index:8;
  }

  /* Second header row */
  .tbl thead tr:nth-child(2) th{
    top:var(--thead-h1);
    height:var(--thead-h2);
    z-index:7;
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.3);
    padding:4px 8px;
  }

  /* ===== Sticky first column ===== */
  .tbl th:first-child,
  .tbl td:first-child{
    position:sticky;
    left:0;
    background:#fff;
    z-index:9;
  }

  /* Make first column header cells stay above everything */
  .tbl thead tr:first-child th:first-child{
    z-index:11;
    background:var(--head-b);
  }
  .tbl thead tr:nth-child(2) th:first-child{
    z-index:10;
    background:var(--head-b);
  }

  /* ===== Table Body ===== */
  .tbl tbody td{
    padding:4px 8px;
    border-bottom:1px solid #eef1f6;
    text-align:center;
    font-variant-numeric:tabular-nums;
  }
  .tbl tbody td:first-child{ text-align:left; }
  .tbl tbody tr:nth-child(odd) td{ background:#fbfdff; }
  .tbl tbody tr:nth-child(even) td{ background:#fff; }
  .tbl tbody tr:hover td{ background:#eef6ff; }

  /* Tree indentation */
  .tbl tbody tr[data-level="1"] td:first-child{ padding-left:16px; font-weight:700; }
  .tbl tbody tr[data-level="2"] td:first-child{ padding-left:36px; }
  .tbl tbody tr[data-level="3"] td:first-child{ padding-left:56px; }

  /* Toggle buttons */
  .toggle{
    display:inline-flex; align-items:center; gap:8px;
    cursor:pointer; color:var(--head-a); font-weight:700;
  }
  .carret{
    width:20px; height:20px;
    border:1px solid #e7ebf3; border-radius:50%;
    display:grid; place-items:center;
    background:#fff; font-size:12px;
    transition:transform .18s ease;
  }
  .toggle[aria-expanded="true"] .carret{ transform:rotate(90deg); }

  /* Shadow when horizontally scrolled */
  .table-scroll.scrolled-x th:first-child,
  .table-scroll.scrolled-x td:first-child{
    box-shadow:4px 0 6px rgba(0,0,0,.08);
  }

  /* YTM Dropdown */
  .ytm-dropdown {
    position: relative;
    display: inline-block;
  }

  .ytm-btn {
    background:var(--card) !important; 
    border:var(--border-card) !important; 
    border-radius:var(--radius-md) !important;
    box-shadow:var(--shadow) !important; 
    padding: 8px 16px;
    cursor: pointer;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 210px;
  }

  .ytm-btn:hover {
    background: #f5f5f5;
  }

  .ytm-menu {
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    z-index: 10;
    width: 420px;
    display: flex;
    margin-left: -210px;
  }

  .ytm-left {
    width: 130px;
    border-right: 1px solid #eee;
    padding: 12px;
  }

  .ytm-title,
  .ytm-subtitle {
    cursor: pointer;
    font-size: 15px;
    margin-bottom: 8px;
  }

  .ytm-title {
    font-weight: bold;
  }

  .ytm-subtitle {
    color: #333;
  }

  .ytm-left .active {
    color: var(--head-b) !important;
    font-weight: bold;
  }

  .ytm-right {
    flex: 1;
    padding: 12px;
  }

  .ytm-header {
    text-align: center;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  .ytm-header i {
    cursor: pointer;
    color: var(--head-b) !important;
    margin: 0 12px;
  }

  .ytm-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .ytm-month {
    text-align: center;
    padding: 6px 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
  }

  .ytm-month:hover {
    border-color: var(--head-b);
    color: var(--head-b);
  }

  .ytm-month.active {
    border-color: var(--head-b);
    color: var(--head-b);
    font-weight: bold;
  }
  .hidden{
    visibility: hidden;
  }
  
  /* MENU CHART CUSTOM */
   .menu-chart-custom {
       min-height: 260px;
       width: 200px;
       background-color: #ffffff;
       border: 1px solid rgb(153, 153, 153);
       border-radius: 4px;
       position: absolute;
       z-index: 10;
       top: 28px;
       right: 20px;
   }
   .menu-chart-custom ul {
       list-style: none;
       margin: 0;
       padding: 5px 0;
   }
   .menu-chart-custom ul li {
       cursor: pointer;
       padding: 4px 16px;
   }
   .menu-chart-custom ul li:hover {
       background-color: rgb(51, 92, 173);
       color: #ffffff;
   }
   /* END MENU CHART CUSTOM */
  .scroll-hide{
    overflow: hidden !important;
  }

  .icon-down-red {
    width: 10px;
    height: 10px;
    background-color: var(--down-color); /* warna yang bisa diganti */
    mask: url('../../img/fi-ss-triangle-down.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../img/fi-ss-triangle-down.svg') no-repeat center;
    -webkit-mask-size: contain;
  }

  .icon-down-green {
    width: 10px;
    height: 10px;
    background-color: var(--up-color); /* warna yang bisa diganti */
    mask: url('../../img/fi-ss-triangle-down.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../img/fi-ss-triangle-down.svg') no-repeat center;
    -webkit-mask-size: contain;
  }

  
  .icon-up-red {
    width: 10px;
    height: 10px;
    background-color: var(--down-color); /* warna yang bisa diganti */
    mask: url('../../img/fi-ss-triangle-up.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../img/fi-ss-triangle-up.svg') no-repeat center;
    -webkit-mask-size: contain;
  }

  .icon-up-green {
    width: 10px;
    height: 10px;
    background-color: var(--up-color); /* warna yang bisa diganti */
    mask: url('../../img/fi-ss-triangle-up.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../img/fi-ss-triangle-up.svg') no-repeat center;
    -webkit-mask-size: contain;
  }

  .up-color{
    color: var(--up-color);
  }
  .down-color{
    color: var(--down-color);
  }

  /* LIST */
  .list-head{
    font-size: 14px !important;
    color: rgba(55, 92, 180, 1) !important;
  }
  .list-body{
    padding-left: 0px;
    margin-bottom: 1.5rem;
  }
  .list-body:last-child{
    margin-bottom: 0px;
  }
  .list-body li::marker{
    content: "";
  }
  .list-body .separator{
    border-bottom: 1px solid rgba(217, 217, 217, 1);
    margin: 8px 0px;
  }
  .list-body .list-text{
    font-size: 10px !important;
  }