:root{
    --bg:#f6f8fb;
    --card:#ffffff;
    --ink:#0f172a;
    --muted:#64748b;
    --line:#e5e7eb;
    --shadow:0 10px 28px rgba(2,8,23,.08), 0 2px 8px rgba(2,8,23,.06);
    --radius-xl:15px;
    --radius-md:10px;

    /* 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 }
  
  .wrap{ 
    font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial !important;
    letter-spacing:.2px !important;
    /* max-width:1280px !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); 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:1px solid #eef1f6 !important; border-radius:var(--radius-xl) !important;
    box-shadow:var(--shadow) !important; padding:15px !important; position:relative !important;
  }
  .card.kpi, .card.chart-lembaga, .card.card-dash{
    border-radius:var(--radius-xl) !important;
  }
  /* .card:hover{ transform:translateY(-1px) !important; transition:transform .2s ease } */

  /* KPI */
  .kpi{ display:flex !important; flex-direction:column !important; gap:0px !important; max-height:149px !important; cursor: pointer; }
  .kpi .kpi-head{ display:flex !important; align-items:center !important; justify-content:space-between !important; color:var(--muted) !important; font-weight:600 !important; }
  .kpi .kpi-value{ font-size:32px !important; font-weight:700 !important; letter-spacing:.5px !important; }

  .card-dash .header-card, .title-chart{ font-weight:700; font-size:18px; }

  .chip{
    display:inline-block; padding:0px 10px; border-radius:999px; 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(--ok-bg); color:var(--ok-ink); border-color:rgba(21,128,61,.15) }
  .chip.neg{ background:var(--neg-bg); color:var(--neg-ink); border-color:rgba(180,83,9,.18) }
  .chip.neu{ background:var(--neu-bg); color:var(--neu-ink); border-color:#e2e8f0 }

  /* Nominal pill (RKA / Last Year) */
  .nom{
    display:inline-block; padding:3px 8px; border-radius:999px;
    background:#f1f5f9; color:#334155; font-weight:700; font-size:11px;
    border:1px solid #e2e8f0;
  }

  /* Trend chips w/ arrows */
  .chip.trend{
    display:inline-flex; align-items:center; gap:6px;
    padding:1px 10px; border-radius:999px; font-weight:700; font-size:11px;
    min-width:auto; /* allow content to size */
  }
  .chip .arr{
    width:14px; height:14px; display:grid; place-items:center;
    border-radius:999px; font-size:10px; font-weight:800; line-height:1;
  }
  .trend.up   { background:var(--ok-bg);  color:var(--ok-ink);  border-color:rgba(21,128,61,.15) }
  .trend.up .arr{ background:rgba(22,163,74,.12); color:var(--ok-ink) }
  .trend.down { background:var(--neg-bg); color:var(--neg-ink); border-color:rgba(180,83,9,.18) }
  .trend.down .arr{ background:rgba(180,83,9,.12); color:var(--neg-ink) }
  .trend.flat { background:var(--neu-bg); color:var(--neu-ink); border-color:#e2e8f0 }
  .trend.flat .arr{ background:#e2e8f0; color:#475569 }

  .badges{ margin-top:4px; }
  .badge{ display:inline-flex; align-items:center; gap:8px; font-size:10px; color:var(--muted); font-weight: normal !important; padding:2px; }

  /* 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:12px 10px;
    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);
  }

  /* ===== 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:10px;
    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:1px solid #eef1f6 !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: #a00;
    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: #a00;
    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: #a00;
    color: #a00;
  }

  .ytm-month.active {
    border-color: #a00;
    color: #a00;
    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 */