/*
  HAPAKAT prototipe: tata letak bingkai aplikasi dan dashboard.
  Komponen dari components.css; file ini hanya mengatur letak, dan hanya memakai token.
*/
html, body { height: 100%; }
body { display: flex; flex-direction: column; background: var(--surface-card); font: var(--text-body); }

#root { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ===== Bar demo di atas bingkai ===== */
.demo-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
  background: var(--surface);
}
.demo-bar__links { display: flex; align-items: center; gap: var(--space-1); }

/* ===== Bingkai aplikasi: penuh layar di ponsel, bingkai ponsel di layar lebar ===== */
.app-frame {
  flex: 1; min-height: 0;
  width: 100%; max-width: var(--width-app);
  margin: 0 auto;
  background: var(--surface);
}
@media (min-width: 600px) {
  .app-frame {
    flex: none;
    width: calc(var(--width-app) + var(--frame-bezel) * 2); max-width: none;
    height: min(calc(var(--height-app) + var(--frame-bezel) * 2), calc(100dvh - var(--space-16)));
    margin: var(--space-4) auto;
    overflow: hidden;
    border: var(--frame-bezel) solid var(--ink);
    border-radius: var(--radius-device);
  }
}
/* Layar pendek (ponsel mendatar): halaman bergulir utuh, bar bawah tetap menempel */
@media (max-height: 560px) {
  #root, .app-frame, .hd-app { flex: none; height: auto; }
  .hd-app__body { overflow: visible; }
  .hd-bottom-nav { position: sticky; bottom: 0; }
}
.hd-app-header__greeting, .hd-appbar__title, .hd-page-head__title, .hd-result__title, .hd-status-hero__title { outline-offset: var(--space-1); }
.app-section-title { margin: var(--space-2) 0 0; font: var(--text-label); color: var(--ink-60); }
.app-file { display: none; }
a.hd-doc-row { text-decoration: none; }

/* ===== Dashboard pemda ===== */
body.is-dash { height: auto; background: var(--surface); }
body.is-dash .demo-bar { display: none; }
.dash { width: 100%; max-width: var(--width-dashboard); margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-16); }
.dash__main { display: flex; flex-direction: column; gap: var(--space-6); }
.dash__grid { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .dash__grid { grid-template-columns: 3fr 2fr; } }
.dash .hd-card { min-width: 0; }
.hd-result > .hd-alert { width: 100%; text-align: left; }
.app-nowrap { white-space: nowrap; }