/* ======================================================================
   RuangKitha Global Shell v1.0.1
   Patch: v2.0.0a48a — Home + Global Shell

   Scope: visual shell only. No routing, Supabase, Calendar projection,
   notification scheduler, finance logic, or Catatan persistence changes.
   ====================================================================== */

/* App frame ---------------------------------------------------------- */
.aplikasi,
.superapp-shell,
.superapp-global-nav-page {
  color: var(--rk-text);
}

.aplikasi {
  width: min(100%, var(--rk-app-max-width, 430px));
  margin-inline: auto;
  background: var(--rk-background);
}

@media (min-width: 500px) {
  .aplikasi,
  .superapp-shell,
  .superapp-global-nav-page {
    border-inline: 1px solid color-mix(in srgb, var(--rk-border) 64%, transparent);
  }
}

/* Shared page headers ------------------------------------------------ */
.header-halaman,
.superapp-shell-header {
  color: var(--rk-text);
}

.header-halaman h1,
.superapp-shell-header h1 {
  color: var(--rk-text);
  letter-spacing: -.018em;
}

.header-halaman :where(.tombol-ikon, a, button),
.superapp-shell-back,
.superapp-shell-action {
  border-color: var(--rk-border);
}

.superapp-shell-back,
.superapp-shell-action {
  background: var(--rk-surface);
  color: var(--rk-primary);
  box-shadow: var(--rk-shadow-sm);
}

.shell-card {
  border-color: var(--rk-border);
  border-radius: var(--rk-radius-xl);
  background: var(--rk-surface);
  color: var(--rk-text);
  box-shadow: var(--rk-shadow-sm);
}

.shell-intro h2 { color: var(--rk-text); }
.shell-intro p { color: var(--rk-text-secondary); }

/* Common icon controls ---------------------------------------------- */
:where(.tombol-profil, .tombol-ikon, .module-order-close) {
  background: var(--rk-surface-soft) !important;
  color: var(--rk-primary) !important;
}

/* Shared settings/list surfaces ------------------------------------- */
:where(.kartu-pengaturan, .profile-shell-link, .kartu-list) {
  border-color: var(--rk-border);
  background: var(--rk-surface);
  color: var(--rk-text);
  box-shadow: var(--rk-shadow-sm);
}

.profile-shell-link > span:first-child {
  background: var(--rk-primary-soft);
  color: var(--rk-primary);
}

.profile-foundation-note,
.calendar-note {
  background: var(--rk-surface-soft);
  color: var(--rk-text-secondary);
}

/* Global quick navigation ------------------------------------------ */
.global-quick-nav {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: max(9px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
  align-items: stretch;
  width: min(calc(100vw - 24px), 406px);
  max-width: 406px;
  min-height: 68px;
  padding: 7px 8px;
  border: 1px solid var(--rk-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--rk-surface) 92%, transparent);
  box-shadow: var(--rk-shadow-float);
  transform: translateX(-50%);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.global-quick-nav > a {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  border-radius: 16px;
  color: var(--rk-text-secondary);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: var(--rk-font-weight-semibold);
  white-space: nowrap;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

.global-quick-nav > a ion-icon {
  font-size: 23px;
  transition: transform .16s ease;
}

.global-quick-nav > a:active {
  transform: scale(.97);
}

.global-quick-nav > a.is-active {
  background: var(--rk-primary-soft);
  color: var(--rk-primary);
}

.global-quick-nav > a.is-active ion-icon {
  transform: translateY(-1px);
}

.superapp-shell,
.superapp-global-nav-page,
.aplikasi.dengan-nav {
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

/* Bottom nav variants used by modules ------------------------------- */
:where(.navigasi-bawah, .bottom-nav, .finance-bottom-nav, .catatan-bottom-nav) {
  color: var(--rk-text-secondary);
}

/* Sheets / overlays ------------------------------------------------- */
.module-order-layer,
.lapisan {
  background: rgba(12, 18, 14, .43) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.module-order-sheet,
.bottom-sheet {
  border-color: var(--rk-border) !important;
  background: var(--rk-surface) !important;
  color: var(--rk-text) !important;
  box-shadow: var(--rk-shadow-float) !important;
}

/* Desktop outer canvas --------------------------------------------- */
@media (min-width: 700px) {
  body {
    background:
      radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--rk-primary) 7%, transparent), transparent 30%),
      radial-gradient(circle at 84% 90%, color-mix(in srgb, var(--rk-accent) 6%, transparent), transparent 28%),
      var(--rk-outer-background);
  }
}

html[data-theme="dark"] .global-quick-nav {
  border-color: var(--rk-border-strong);
  background: color-mix(in srgb, var(--rk-surface-raised) 96%, transparent);
  box-shadow: var(--rk-shadow-float);
}

@media (max-width: 360px) {
  .global-quick-nav {
    width: calc(100vw - 16px);
    min-height: 64px;
    border-radius: 20px;
  }
  .global-quick-nav > a { font-size: 10px; }
  .global-quick-nav > a ion-icon { font-size: 22px; }
}

/* Override legacy dark-mode nav colors with Brand Identity v1 tokens. */
html[data-theme="dark"] .global-quick-nav > a {
  color: var(--rk-text-secondary);
}
html[data-theme="dark"] .global-quick-nav > a.is-active {
  background: var(--rk-primary-soft);
  color: var(--rk-primary);
}
\n\n/* ======================================================================\n   P4A1 — iPhone PWA Foundation\n   Applied only when pwa.js confirms iOS + installed standalone mode.\n   Android native/WebView layout remains unchanged.\n   ====================================================================== */\nhtml[data-rk-ios-standalone="true"],\nhtml[data-rk-ios-standalone="true"] body {\n  min-height: 100%;\n  min-height: 100dvh;\n}\n\nhtml[data-rk-ios-standalone="true"] {\n  --rk-ios-safe-top: env(safe-area-inset-top, 0px);\n  --rk-ios-safe-right: env(safe-area-inset-right, 0px);\n  --rk-ios-safe-bottom: env(safe-area-inset-bottom, 0px);\n  --rk-ios-safe-left: env(safe-area-inset-left, 0px);\n}\n\n/* black-translucent status bar uses the full viewport on iPhone. Keep the\n   root app frame below the notch / Dynamic Island without double-padding\n   nested module shells. */\nhtml[data-rk-ios-standalone="true"] body > :where(.aplikasi, .superapp-shell, .superapp-global-nav-page) {\n  min-height: 100dvh;\n  padding-top: var(--rk-ios-safe-top);\n}\n\n/* Legacy bottom navigation predates safe-area CSS. Increase its physical\n   height instead of moving it upward, so the Home Indicator area remains\n   part of the navigation surface. */\nhtml[data-rk-ios-standalone="true"] .navigasi-bawah {\n  height: calc(var(--bottom-nav-height) + var(--rk-ios-safe-bottom));\n  padding-bottom: calc(var(--space-2) + var(--rk-ios-safe-bottom));\n}\n\n/* Shared floating navigation already uses safe-area-inset-bottom for its\n   position. Add horizontal insets for landscape / zoomed display modes. */\nhtml[data-rk-ios-standalone="true"] .global-quick-nav {\n  max-width: calc(100vw - var(--rk-ios-safe-left) - var(--rk-ios-safe-right) - 24px);\n}\n\n/* Sheets may extend to the physical screen edge in standalone mode. Give\n   controls breathing room above the Home Indicator without changing the\n   Android sheet baseline. */\nhtml[data-rk-ios-standalone="true"] .bottom-sheet {\n  padding-bottom: max(var(--space-6, 24px), calc(var(--rk-ios-safe-bottom) + 16px));\n}\n

/* P4B1 — iPhone/iPad form-control compatibility.
   Safari zooms the page when a focused form control renders below 16px.
   Keep installed/browser iOS controls at 16px without changing Android. */
html[data-rk-platform="ios"] :where(input, select, textarea) {
  font-size: 16px !important;
}

/* Keep fixed app chrome above the Home Indicator in installed iOS mode. */
html[data-rk-ios-standalone="true"] :where(.bottom-sheet, .module-order-sheet) {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}