:root{
  /* Theme */
  --green-700:#0f766e;
  --green-500:#10b981;

  /* App neutrals */
  --bg:#f7f7fb;
  --panel:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --bd:#e5e7eb;
  --icon:#6b7280;

  /* Sizing */
  --title:24px;
  --ctl:44px;

  /* Shadows */
  --shadow-1:0 1px 2px rgba(15,23,42,.06),0 8px 16px rgba(15,23,42,.05);
  --shadow-2:0 8px 22px rgba(2,6,23,.14);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* ======= Header (page rail is same as grid rail) ======= */
.ph{
  max-width:1100px;
  margin:16px auto 8px;
  padding:0 14px;
}
.ph h1{margin:0;font-size:var(--title);font-weight:800}
.ph p{margin:6px 0 0;color:var(--muted);font-size:13px}

/* Top row: back + search */
.topnav{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  margin-bottom:10px;
}

/* Icon-only back button (desktop & mobile) */
.backlink{
  height:var(--ctl);
  border:1px solid #d1d5db;
  border-radius:12px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  font-weight:700;
  display:flex; align-items:center; gap:8px;
  width:44px; justify-content:center; padding:0; /* icon only */
}
.backlink:hover{ box-shadow:0 0 0 4px rgba(16,185,129,.15) }
.backlink .ico{ width:18px; height:18px; color:#0f172a }
.backlink .lbl{ display:none }

/* Search bar */
.searchbar{ flex:1; display:flex; gap:10px; position:relative }
.searchbar input{
  flex:1; height:var(--ctl);
  border-radius:12px; border:1px solid #d1d5db;
  padding:0 14px; font-size:15px; background:#fff;
  box-shadow:var(--shadow-1)
}

/* Ghost back button inside the searchbar — same size as search button */
.searchbar .btn-ghost{
  background:#fff;                 /* stay light */
  color:#0f172a;                   /* dark icon */
  border:1px solid #d1d5db;        /* subtle grey border */
  box-shadow:var(--shadow-1);      /* same base shadow as tiles */
}

/* Hover: teal halo ring (like akses.html .backlink:hover), keep fill grey */
.searchbar .btn-ghost:hover{
  background:#fff;                 /* DO NOT turn teal */
  border-color:#d1d5db;
  box-shadow:0 0 0 4px rgba(16,185,129,.15), var(--shadow-1);
}

/* Focus-visible: keyboard users get the same halo */
.searchbar .btn-ghost:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(16,185,129,.15), var(--shadow-1);
}

/* Make the arrow weight pop on light bg */
.searchbar .btn-ghost .ico{
  color:#0f172a;
  width:18px; height:18px;
  stroke-width:2.25;
}


.searchbar button{
  height:var(--ctl); width:44px; padding:0; display:grid; place-items:center;
  border-radius:12px; border:1px solid #0ea5a0; background:#0ea5a0;
  color:#fff; font-weight:800; cursor:pointer;
}
.searchbar button:hover{ filter:brightness(.96) }
.searchbar button .lbl{ display:none } /* icon only everywhere */
.searchbar .ico{ width:18px; height:18px; color:#fff }

/* Suggestion dropdown for search */
.gs-suggest{
  position:absolute; left:0; right:54px; top:calc(var(--ctl) + 6px);
  background:#fff; border:1px solid var(--bd); border-radius:12px;
  box-shadow:0 16px 32px rgba(2,6,23,.18);
  max-height:260px; overflow:auto; z-index:60;
}
.gs-suggest .opt{
  padding:10px 12px; font-size:14px; color:#0f172a; cursor:pointer;
}
.gs-suggest .opt em{
  font-style:normal; background:#f0fdf4; border:1px solid #bbf7d0;
  border-radius:6px; padding:0 4px
}
.gs-suggest .opt:hover, .gs-suggest .opt.active{ background:#f3f4f6 }

/* ======= Grid / tiles ======= */
.grid{
  max-width:1100px; margin:8px auto 22px; padding:0 14px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
}
@media (max-width:980px){ :root{--title:20px} .grid{grid-template-columns:1fr} }

.tile{
  background:var(--panel); border:1px solid var(--bd); border-radius:16px;
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; min-height:0;
}
.tile.wide{ grid-column:1 / -1 }

.th{
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start;
  padding:12px 14px; border-bottom:1px solid var(--bd);
}
.ttl{ margin:0 0 2px; font-weight:800; font-size:20px }
.sub{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px }
.ico{ width:18px; height:18px; color:var(--icon) }

/* NEW: keep tile action buttons in a single row */
.act{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
}
.act .btn, .act .dd .btn{ height:36px; }

/* Table / chart / legends */
.tb{ padding:10px 14px; border-bottom:1px solid var(--bd); font-size:13px; color:#334155; overflow:auto }
.chart{ padding:10px 14px }
.legend{ padding:0 14px 12px; font-size:12px; color:#334155 }
.legend .lg{ margin-right:10px }
.legend .dot{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px }

.err{ padding:0 14px 12px; color:#b91c1c; display:none }

/* Filters / dropdowns */
.dd{ position:relative }
.btn{
  height:36px; border:1px solid #d1d5db; background:#fff; border-radius:10px;
  padding:8px 10px; display:inline-flex; align-items:center; gap:8px;
  font-weight:700; cursor:pointer;
}
.btn:hover{ background:#f3f4f6 }
.dd .btn{ height:36px }
.dd-trigger{ position:relative }

.menu{
  position:absolute; right:0; top:calc(100% + 8px); background:#fff;
  border:1px solid var(--bd); border-radius:14px; box-shadow:0 20px 40px rgba(2,6,23,.20);
  width:320px; display:none; z-index:50;
}
.menu.open{ display:block }
.menu-body{ max-height:260px; overflow:auto; padding:8px }
.row{ display:flex; align-items:center; gap:8px; padding:8px; border-radius:10px }
.row:hover{ background:#f3f4f6 }
.row input{ width:18px; height:18px }
.mfoot{ display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--bd); padding:8px; background:#fafafa }
.icbtn{
  width:36px; height:36px; border:1px solid #d1d5db; border-radius:10px;
  background:#fff; display:grid; place-items:center; cursor:pointer
}
.icbtn:hover{ background:#f3f4f6 }

/* --- Dropdown (dd) — ensure the popup shows on .open --- */
.dd{ position:relative; }
.dd .menu{
  position:absolute; right:0; top:44px;
  display:none; z-index:50;
  width:280px; background:#fff;
  border:1px solid #e3e8f0; border-radius:12px;
  box-shadow:0 16px 36px rgba(15,27,45,.14);
}
.dd.open .menu{ display:block; }

.dd .menu .menu-body{ max-height:320px; overflow:auto; padding:10px 12px; }
.dd .menu .mfoot{
  display:flex; gap:8px; justify-content:flex-end;
  padding:10px 12px; border-top:1px solid #eef2f7;
}
.dd .menu .menu-body .opt{ display:flex; align-items:center; gap:.6rem; padding:.4rem .2rem; }
.dd .menu .menu-body .opt:hover{ background:#f7fafc; border-radius:8px; }


/* Goals box (Warga Emas) */
.goals{
  display:block; border:1px dashed var(--bd); border-radius:12px;
  padding:8px 10px; margin:4px 0 8px; background:#fafafa
}
.goals ul{ margin:6px 0 0 18px; padding:0; font-size:12px; color:#334155 }
.goals strong{ font-size:12px }

/* Search jump flash effect */
.tile.flash{
  box-shadow:0 0 0 4px rgba(16,185,129,.35), 0 8px 22px rgba(2,6,23,.14);
}

/* ======= Modal ======= */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,6,23,.55); z-index:9999 }
.modal.open{ display:flex }
.modal-inner{
  background:#fff; border:1px solid var(--bd); border-radius:16px; box-shadow:0 20px 40px rgba(2,6,23,.30);
  width:min(1200px,96vw); height:min(90vh,820px); display:flex; flex-direction:column
}
.mh{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--bd) }
.mb{ padding:12px 14px; flex:1; display:flex }
.mchart{ width:100%; height:100% }
.close{ border:1px solid #d1d5db; background:#fff; border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer }
.close:hover{ border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.15) }



/* --- Global page + footer layout (match index.html) --- */
:root{
  --page-max: 1200px;
  --content-max: 1100px;
  --gap: 20px;
}

/* Make pages use flex so footer sits at the bottom */
body{
  display:flex;
  min-height:100vh;
  flex-direction:column;
}

/* Let <main> (or your grid) take the available height */
main, .grid{ flex: 1; }

/* Same containers index.html used */
.wrap{ max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gap); width:100%; }
.wrap .content{ max-width: var(--content-max); margin: 0 auto; text-align: center; }

/* Footer look */
footer{ margin: 8px 0 20px; color:#94a3b8; font-size:12px; }

/* ---------- Shared page width ---------- */
:root{
  --page-max: 1200px;   /* same width you want for the first tile row */
  --gap: 20px;
}

/* Header and grid use the SAME container width & side padding */
header.ph,
.grid{
  max-width: var(--page-max);
  margin: 0 auto;          /* center the container block itself */
  padding: 0 var(--gap);   /* same side gutters as tiles */
  width: 100%;
}

/* Header layout: left-aligned, not centered */
header.ph{
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* so content spans full container width */
  gap: 8px;
  text-align: left;
}

header.ph h1{ margin: 0 0 4px; }
header.ph p{ margin: 0 0 8px; color:#5b6b83; }

/* Search bar stretches to both edges of the header container */
.ph .searchbar{
  width: 100%;
}

/* Footer remains centered (keep this if you added earlier) */
footer.wrap{ max-width: var(--page-max); margin: 8px auto 20px; padding: 0 var(--gap); }
footer.wrap .content{ text-align:center; }

/* Give the header some breathing room from the very top */
header.ph{
  padding-top: 28px;     /* was too tight to the top edge */
}

/* Make title & subtitle sit a bit closer together (akses + sekolah) */
header.ph h1{
  margin: 0 0 2px;       /* tighter gap to subtitle */
}
header.ph p{
  margin: 0 0 8px;       /* small space under subtitle */
}

/* Keep the search row comfortable below the top edge on both layouts */
.ph .topnav,
.ph .searchbar{
  margin-top: 6px;       /* slight offset from header top */
}

/* Space between the search bar row and the first tile row */
header.ph .searchbar{
  margin-top: 8px;        /* slight gap under subtitle */
  margin-bottom: 22px;    /* <-- add air before tiles */
}

/* (Optional) add a touch more space on wide screens */
@media (min-width: 1024px){
  header.ph .searchbar{ margin-bottom: 26px; }
}

/* If you still see tiles hugging the header, add a tiny buffer on the grid */
.ph + .grid{ margin-top: 4px; }

.icbtn .ico{ width:18px; height:18px; display:block; }

/* Dropdown menu must sit above everything and accept clicks */
.dd{ position:relative; }
.dd .menu{
  position:absolute; right:0; top:44px;
  display:none;
  z-index: 1000;           /* <-- higher than headers/cards */
  width:280px; background:#fff;
  border:1px solid #e3e8f0; border-radius:12px;
  box-shadow:0 16px 36px rgba(15,27,45,.14);
  pointer-events: auto;    /* ensure clicks register */
}
.dd.open .menu{ display:block; }

/* (optional) keep it comfy to click */
.dd .menu .menu-body{ max-height:320px; overflow:auto; padding:10px 12px; }
.dd .menu .menu-body .opt{ display:flex; align-items:center; gap:.6rem; padding:.4rem .2rem; cursor:pointer; user-select:none; }
.dd .menu .menu-body .opt:hover{ background:#f7fafc; border-radius:8px; }


/* === Floating radial nav (below the floating filter) === */
:root { --fab-bg:#0b1220; } /* JS syncs this to the filter bar’s bg */

.fab { position:fixed; z-index:999; }

.fab .fab-main,
.fab .fab-child{
  width:62px; height:62px;                 /* main is larger than children; we’ll scale children */
  border-radius:999px;
  background:var(--fab-bg);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-2);
  display:grid; place-items:center;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s;
  will-change:transform, opacity;
}
.fab .fab-child{
  width:56px; height:56px;
  position:absolute; top:0; left:0;
  opacity:0; pointer-events:none;
  transform:translate(0,0) scale(.92);
}

.fab img{               /* icons = white + a bit larger */
  width:30px; height:30px;
  filter:brightness(0) invert(1);           /* force white for dark SVGs/PNGs */
}
.fab .fab-child img{
  width:26px; height:26px;
}

/* keep children interactive while open */
.fab.open .fab-child{ pointer-events:auto; }

/* vertical stack controls (children slide downward from the main button) */
:root{
  --fab-step: 68px; /* spacing between child buttons (56px button + ~12px gap) */
}

/* when open, each child moves down by (index * step) */
.fab.open .fab-child{
  transform: translate(0, calc(var(--i) * var(--fab-step))) scale(1);
  opacity: 1;
}





/* subtle hover scale on the main button */
.fab .fab-main{ transition:transform .18s ease; }
.fab .fab-main:hover{ transform:scale(1.06); }

/* --------- tooltips (for main + children) ---------- */
.fab a{ position:relative; }
.fab-tip{
  position:absolute; top:50%; left:-10px; transform:translate(-100%, -50%) scale(.96);
  background:var(--fab-bg);
  color:#fff; font-size:12px; line-height:1; white-space:nowrap;
  padding:8px 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-2);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.fab a:hover .fab-tip,
.fab a:focus-visible .fab-tip{
  opacity:1; transform:translate(-100%, -50%) scale(1);
}

/* Charts should expand to fill the tile; legend sits at the bottom */
.tile { display:flex; flex-direction:column; } /* you already have this */

/* Let the chart area take leftover space between header and legend */
.tile .chart,
.chart,
.canvas-wrap{
  flex: 1 1 auto;
  height: auto;           /* no fixed height */
  min-height: 260px;      /* safety floor so small tiles still look OK */
  padding-bottom: 0;      /* remove any extra bottom padding */
  display: flex;          /* so inner canvas/svg can stretch */
}

/* Make the actual drawing surface fill its container */
.tile .chart > canvas,
.canvas-wrap > canvas,
.tile .chart svg,
.canvas-wrap svg{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Keep the legend attached to the bottom edge of the tile */
.legend{ margin-top: auto; }   /* pushes legend down; chart grows above */

/* Fill the chart area without changing tile height */
.tile{ display:flex; flex-direction:column; }
.tile .chart{ 
  flex: 1 1 auto;            /* take all leftover space */
  height: auto;              /* no fixed height */
  padding: 10px 14px 0;      /* keep top/side padding, no bottom gap */
}
.legend{ margin-top: auto; } /* legend hugs tile bottom */

/* Chart.js canvas should stretch fully */
.tile .chart canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ApexCharts also needs its wrappers to be 100% height */
.tile .chart > div{ height: 100%; }
.tile .chart .apexcharts-canvas,
.tile .chart .apexcharts-svg{
  width: 100% !important;
  height: 100% !important;
}