/* ===== Monochrome Wide • Sidebar kiri + Power BI full body (RESPONSIVE FOOTER) ===== */
:root{
  /* tema */
  --bg-0:#121624; --bg-1:#161b2d; --bg-2:#1a2034;
  --panel:#121827; --panel-2:#0f1524;
  --border:rgba(255,255,255,.10);
  --muted:#c6cbda; --text:#f3f5fb;
  --accent:#8fa8ff; --accent-2:#6f90ff;
  --ring:rgba(143,168,255,.35);
  --shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  --radius:16px;

  /* ukuran layout */
  --sidebar-w: 300px;     /* lebar sidebar */
  --brand-logo: 52px;     /* tinggi logo brand */
  --brand-gap: 12px;      /* jarak logo ↔ teks */
  --brand-title: 16px;    /* font judul brand */
  --brand-addr: 12px;     /* font alamat brand */
}

/* === Reset dasar + layout untuk sticky footer natural (bukan fixed) === */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background:
    radial-gradient(1200px 1200px at 10% -20%, #222944 0%, transparent 60%),
    radial-gradient(900px 900px at 120% 10%, #1c2340 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2) 100%);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
a{color:var(--text); text-decoration:none}

/* ===== GRID APP: sidebar | content ===== */
.app{
  flex:1; min-height:0;
  padding:16px; gap:16px;
  display:grid; grid-template-columns:var(--sidebar-w) 1fr;
  /* yang scroll itu app (halaman), bukan sidebar */
  overflow:auto;
}

/* ===== SIDEBAR ===== */
.side{
  border:1px solid var(--border);
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:var(--radius); padding:14px;
  display:flex; flex-direction:column; gap:12px;
  /* MATIKAN inner scroll di sidebar */
  overflow:visible;
  min-width:0;
}

/* ===== Brand (logo + judul + alamat) ===== */
.side-brand{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:var(--brand-gap);
  padding:6px 4px 10px;
  border-bottom:1px dashed var(--border);
  margin-bottom:8px;
}

/* Logo tanpa box */
.side-logo{ background:none; border:0; box-shadow:none; border-radius:0; overflow:visible; }
.side-logo img{
  height:var(--brand-logo);
  width:auto; display:block;
  object-fit:contain; object-position:left center;
  /* logo hitam → jadi putih; hapus jika file sudah putih */
  filter:invert(1) brightness(1.15);
}

/* Judul + alamat */
.side-title{ line-height:1.15; min-width:0; }
.side-title b{
  font-size:var(--brand-title);
  font-weight:800; color:#f1f4ff;
  text-transform:uppercase; letter-spacing:.15px;
}
.side-title span{
  font-size:var(--brand-addr);
  line-height:1.3; color:#b9c0d7; display:block;
}

/* ===== Nav ===== */
.side-nav{display:flex; flex-direction:column; gap:6px; margin-top:6px}
.side-nav a{
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:13px;
  padding:10px 12px; border-radius:10px; border:1px solid transparent;
}
.side-nav a:hover{ background:#1b2143; border-color:var(--border); filter:brightness(1.03); }
.side-nav .active{ background:linear-gradient(180deg,#1b2346,#18203d); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.dot{width:10px;height:10px;border-radius:999px;background:var(--accent)}

/* ===== Cards/info ===== */
.card{
  border:1px solid var(--border); background:var(--panel);
  border-radius:14px; padding:12px;                 /* sedikit dipadatkan */
  box-shadow:var(--shadow);
}
.card h3{margin:0 0 8px; font-size:13px; color:#b9bfd0; font-weight:600; letter-spacing:.25px}
.card .value{font-size:14px}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.card.ghost{display:flex; align-items:center; justify-content:center; color:#b8bed0; border-style:dashed}

/* ===== Buttons ===== */
.btn, .btn-outline, .btn-min{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; border-radius:12px; font-weight:600;
}
.btn{
  color:var(--text); font-size:13px; padding:9px 14px;
  border:1px solid var(--border); background:linear-gradient(180deg, #232a45, #18203a);
  box-shadow:var(--shadow);
}
.btn:hover{filter:brightness(1.06)}
.btn-outline{
  color:var(--text); font-size:13px; padding:9px 14px; border:1px solid var(--border); background:transparent;
}
.btn-min{
  font-size:12px; padding:6px 10px; border-radius:8px;
  background:#1a2140; border:1px solid var(--border); color:#d6dbeb;
}
.btn-min:hover{color:var(--text)}

/* ===== KONTEN KANAN (Power BI full) ===== */
.content{
  border:1px solid var(--border);
  background:linear-gradient(145deg, var(--panel), var(--panel-2));
  border-radius:var(--radius); padding:16px;
  display:flex; flex-direction:column; gap:12px;
  min-width:0; min-height:0;
}
.embed-head{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 10px; border:1px dashed var(--border);
  border-radius:12px; background:rgba(255,255,255,.02);
}
.badge{font-weight:700; font-size:13px}

.report{
  position:relative; flex:1; min-height:0; width:100%;
  border:1px solid var(--border); border-radius:14px;
  overflow:hidden; background:linear-gradient(145deg, #151b2f, #111729);
  box-shadow:var(--shadow);
}
/* Iframe isi penuh panel kanan */
.report iframe, .embed-empty{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* ===== Empty ===== */
.embed-empty{display:grid; place-items:center; padding:24px; text-align:center; color:#c4cae0}
.embed-empty-title{font-weight:700; margin-bottom:6px}
.embed-empty-desc{font-size:13px}

/* ===== FOOTER RESPONSIF (bukan fixed) ===== */
.footer{
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(18,22,36,.92), rgba(18,22,36,.92));
}
.footer-inner{
  max-width:1440px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-size:12px; color:#aeb5c9;
}

/* ===== Responsif ===== */
@media (max-width: 1280px){
  /* ringkas alamat agar tidak kepanjangan */
  .side-title span{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden;
  }
}
@media (max-width: 1024px){
  .app{ grid-template-columns:90px 1fr; }
  .side-logo img{ height:42px; }
  .side-title{ display:none; }
  .embed-head{ display:none; }
}
@media (max-width: 640px){
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:6px; }
}