/* ARA-HUNTER Dashboard V2 — app shell layout.
   UX final decision: TOP navigation on desktop AND mobile — no left
   sidebar, no bottom tab bar.
     desktop : brand bar + horizontal top nav + scrolling content
     mobile  : compact brand bar (with a menu button) + scrolling content;
               the menu button opens the compact nav menu (nav-menu.mjs). */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  overflow-x: clip;
}

/* ---- brand bar (desktop) ---- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--topbar-h);
  padding: 0 var(--sp-6);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.topbar > * { min-width: 0; }
.topbar__brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.topbar__logo { width: 26px; height: 26px; }
.topbar__wordmark { display: inline-flex; align-items: baseline; gap: 8px; }
.topbar__name { font-weight: var(--fw-bold); font-size: var(--fs-16); letter-spacing: .01em; }
.topbar__tag  { font-size: var(--fs-11); color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase; }
.topbar__search { flex: 1; max-width: 460px; }
.topbar__searchbtn { display: none; }
.topbar__spacer { flex: 1; }
.topbar__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.topbar__metalabel { display: none; }
.topbar__date { font-size: var(--fs-12); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.topbar__date::before { content: "Tanggal Analisis: "; }
.topbar__freshpill { font-size: var(--fs-11); }
.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.topbar__menu { display: none; }

/* ---- primary top navigation (desktop) ----
   Compact by design: one horizontal row for all 10 items at laptop
   widths (≥1180px). Compaction levers, in order: text-only items,
   tight padding, 1px gap, slim separators, tiny "SOON" chips. Wrapping
   stays as a last-resort safety net, not a normal state. */
.topnav {
  position: sticky; top: var(--topbar-h); z-index: 39;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-5);
}
.topnav__list {
  display: flex; align-items: stretch; flex-wrap: wrap;
  column-gap: 1px; row-gap: 0;
  max-width: var(--content-max); margin: 0 auto;
}
.topnav__sep { width: 1px; align-self: stretch; margin: 7px var(--sp-2); background: var(--border); }
.topnav__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 9px;
  font-size: var(--fs-13); font-weight: var(--fw-medium);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.topnav__item .icon { display: none; }        /* text-only top nav — compact, fits one row */
.topnav__item.is-active .icon,
.topnav__item:first-child .icon { display: inline-block; }
.topnav__item:hover { color: var(--text); }
.topnav__item.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.topnav__item.is-active .icon { stroke: var(--accent); }
.topnav__soon {
  font-size: 7.5px; letter-spacing: .03em; color: var(--text-faint);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 0 3px;
  margin-left: 1px;
}
/* wide desktop only: room to bring the icons back without wrapping */
@media (min-width: 1560px) { .topnav__item .icon { display: inline-block; } }

/* the VISIBLE compact mobile nav + the relocated meta strip exist only
   at <=900px — hidden on desktop (desktop uses .topnav + header meta). */
.mnav { display: none; }
.mobile-meta { display: none; }

/* sticky stack = brand bar (var(--topbar-h)) + one nav row (~38px);
   any programmatic scroll / anchor / find-in-page must clear it so a
   section's first row never lands under the header. */
html { scroll-padding-top: calc(var(--topbar-h) + 40px); }

/* ---- content column ---- */
.content { min-width: 0; flex: 1; }
.content__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-8);
}
.page-head { margin-bottom: var(--sp-4); }
.page-head__title { font-size: var(--fs-22); font-weight: var(--fw-bold); }
.page-head__sub { color: var(--text-muted); font-size: var(--fs-13); margin-top: 2px; }

/* ---- responsive grids used by pages ---- */
.grid { display: grid; gap: var(--sp-4); align-items: start; }
.grid--stats  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--main   { grid-template-columns: 1fr; }
@media (min-width: 1180px) {
  .grid--main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* ============================================================
   MOBILE (<=900px) — reference-fidelity navigation.

     [ brand bar : brand ................. search reload theme menu ]
     [ VISIBLE compact primary nav — icon+label tiles ]
     [ Tanggal Analisis · <date> · <freshness pill> ]
     [ page content ]

   Primary navigation is visible on load — the hamburger ("Menu
   Lengkap") is overflow, not the only entry point. No bottom nav.
   ============================================================ */
@media (max-width: 900px) {
  /* mobile sticky = brand bar only (56); the tile nav is sticky too but
     clearing its full height on every jump would push content too far. */
  html { scroll-padding-top: 60px; }

  /* ---- brand bar: ONE row (meta is relocated below the nav) ---- */
  .topbar {
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-4);
    min-height: 56px;
  }
  .topbar__brand { flex: 1 1 auto; min-width: 0; }
  .topbar__wordmark { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
  .topbar__name { font-size: var(--fs-15); }
  .topbar__tag { display: none; }
  .topbar__search { display: none; }            /* desktop field → mobile icon */
  .topbar__spacer { flex: 1; }
  .topbar__actions { flex: none; gap: 4px; }
  .topbar__actions .topbar__searchbtn { display: inline-flex; order: -1; }
  .topbar__actions .btn--icon,
  .topbar__actions .btn--ghost {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .topbar__reloadlabel { display: none; }
  .topbar__menu { display: inline-flex; }

  .topnav { display: none; }

  /* ---- VISIBLE compact primary navigation (reference concept) ---- */
  .mnav {
    display: block;
    position: sticky; top: 56px; z-index: 38;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3);
  }
  .mnav__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
  }
  .mnav__item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px 7px;
    min-height: 58px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-muted);
    text-align: center;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
  }
  .mnav__item .icon { width: 18px; height: 18px; }
  .mnav__label {
    font-size: 10px; line-height: 1.15; font-weight: var(--fw-medium);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: break-word;
  }
  .mnav__item:active { background: var(--surface-3); }
  .mnav__item.is-active {
    background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent);
  }
  .mnav__item.is-active .icon { stroke: var(--accent); }
  .mnav__item.is-soon { opacity: .62; }

  /* ---- relocated date/freshness strip (below the nav) ---- */
  .mobile-meta { display: block; padding: var(--sp-2) var(--sp-4); background: var(--bg); }
  .mobile-meta .topbar__meta {
    display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap;
    gap: 4px 8px;
  }
  .topbar__metalabel { display: inline; }
  .topbar__date { font-size: var(--fs-13); color: var(--text); font-weight: var(--fw-medium); }
  .topbar__date::before { content: none; }
  .topbar__freshpill { flex: 0 1 auto; max-width: 100%; white-space: normal; }

  .content__inner { padding: var(--sp-3) var(--sp-4) var(--sp-8); }
  .grid, .grid--stats, .grid--2, .grid--3, .grid--main { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* very narrow phones: 3 tiles per row keeps labels readable */
@media (max-width: 360px) {
  .mnav__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- mobile compact nav menu (drops from the top) ---- */
.navmenu-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.5);
  display: block;
}
.navmenu {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  padding: var(--sp-4);
  max-height: 88vh; overflow-y: auto;
  animation: navdrop 150ms ease;
}
@keyframes navdrop { from { transform: translateY(-8px); opacity: .4; } to { transform: none; opacity: 1; } }
.navmenu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.navmenu__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.navmenu__search { margin-bottom: var(--sp-4); }
.navmenu__search .searchbox__input { padding-left: 34px; }
.navmenu__grouplabel { margin: var(--sp-3) 0 var(--sp-2); }
.navmenu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.navmenu__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-13); color: var(--text-muted);
}
.navmenu__item.is-active { border-color: var(--accent-border); color: var(--accent); background: var(--accent-bg); }
.navmenu__item.is-active .icon { stroke: var(--accent); }
.navmenu__soon { margin-left: auto; font-size: 9px; color: var(--text-faint); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 0 5px; }

/* ---- mobile search panel (opened from the top-bar search icon) ---- */
.searchpanel-scrim {
  position: fixed; inset: 0; z-index: 61;
  background: rgba(0,0,0,.5);
}
.searchpanel {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  padding: var(--sp-4);
  animation: navdrop 150ms ease;
}
.searchpanel__head { display: flex; align-items: center; gap: var(--sp-2); }
.searchpanel__box { flex: 1; position: relative; }
.searchpanel__input { padding-left: 34px; }
.searchpanel__hint { margin-top: var(--sp-2); font-size: var(--fs-12); color: var(--text-faint); }
.searchpanel__hint.is-err { color: var(--crit); }