/* ── Dashboard layout ─────────────────────────────────────────────────── */
#dashboard.active ~ #footer-gate { display:none; }
#dashboard { display:none; padding-top:var(--nav-h); height:100vh; overflow:hidden; }
#dashboard.active { display:flex; flex-direction:column; }
.dash-body { display:flex; flex:1; overflow:hidden; }

/* Sidebar */
#sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--dark-sidebar);
  border-right:1px solid rgba(255,255,255,0.08);
  height:100%; overflow-y:auto; overflow-x:hidden;
  padding:20px 0 40px; display:flex; flex-direction:column;
  transition:transform 0.3s var(--ease);
}
.sidebar-section-label { font-size:0.58rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); padding:0 16px; margin:16px 0 6px; }
.sidebar-divider { height:1px; background:rgba(255,255,255,0.08); margin:8px 0; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; border-radius:8px; margin:1px 8px; transition:background 0.15s; min-width:0; }
.sidebar-item:hover { background:rgba(255,255,255,0.08); }
.sidebar-item.active { background:rgba(21,101,192,0.25); }
.sidebar-item.active .si-label { color:#fff; }
.sidebar-item.soon { opacity:0.5; cursor:default; }
/* si-icon: always fully white so text-character icons (runes, symbols)
   are as visible as emoji icons on the dark sidebar background */
.si-icon {
  font-size:1.1rem; flex-shrink:0; width:24px;
  text-align:center; line-height:1;
  color:#fff;           /* explicit white — emoji ignore this, rune text obeys it */
}
.si-text { min-width:0; flex:1; overflow:hidden; }
.si-label { font-size:0.84rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-tagline { font-size:0.63rem; color:rgba(255,255,255,0.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.si-badge { font-size:0.54rem; font-weight:700; color:var(--teal-light); border:1px solid rgba(0,137,123,0.4); border-radius:4px; padding:2px 6px; margin-left:auto; flex-shrink:0; }

/* Mobile grid card icon — rune characters need explicit colour there too */
.card-icon { font-size:1.4rem; margin-bottom:8px; color:var(--text); }

/* Sidebar overlay */
.sidebar-overlay { display:none; position:fixed; inset:0; z-index:900; background:rgba(4,13,26,0.6); }
.sidebar-overlay.open { display:block; }

/* iFrame pane */
.iframe-pane { flex:1; position:relative; overflow:hidden; background:var(--warm-bg); min-width:0; }
.dash-cs-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:14px; padding:40px; text-align:center; }
.dash-cs-icon { font-size:3rem; opacity:0.25; line-height:1; }
.dash-cs-h { font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--muted); }
.dash-cs-sub { font-size:0.8rem; color:var(--muted); line-height:1.65; max-width:300px; }

/* Mobile product grid */
#mobile-grid { display:none; padding:16px 16px 80px; overflow-y:auto; background:var(--cream); }
#mobile-grid.visible { display:block; }
.mobile-grid-title { font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--dark); margin-bottom:4px; }
.mobile-grid-sub { font-size:0.78rem; color:var(--muted); margin-bottom:18px; }
#product-grid-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.product-card { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:14px 12px; cursor:pointer; transition:all 0.2s; }
.product-card:hover { border-color:var(--blue); box-shadow:0 3px 12px rgba(21,101,192,0.1); }
.product-card.soon { opacity:0.5; cursor:default; }
.product-card.soon:hover { border-color:var(--border); box-shadow:none; }
.card-label { font-size:0.82rem; font-weight:600; color:var(--dark); margin-bottom:3px; }
.card-tagline { font-size:0.7rem; color:var(--muted); line-height:1.35; }
.card-soon-badge { display:inline-block; margin-top:6px; font-size:0.58rem; font-weight:600; color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:2px 7px; }

/* ── Mobile full-screen product view ── */
#mobile-product-view {
  display: none; position: fixed;
  top: var(--nav-h); left: 0; right: 0; bottom: 0;
  z-index: 400; flex-direction: column;
  background: transparent;
  margin-top: 0;
}
#mobile-product-view.open { display: flex; }

/* Black ribbon removed — back button lives in nav */
.mobile-product-nav { display: none !important; }

#mobile-product-iframe { flex:1; width:100%; border:none; display:block; min-height:0; }

/* Nav back-mode — shown when an app is open on mobile */
#nav-app-back { display:none; align-items:center; gap:8px; }
#nav-app-back.visible { display:flex; }
.btn-nav-back { background:transparent; border:none; color:var(--peacock-light); font-family:var(--font-body); font-size:0.8rem; font-weight:500; cursor:pointer; padding:4px 8px 4px 2px; display:flex; align-items:center; gap:4px; white-space:nowrap; }
#nav-app-label { font-family:var(--font-display); font-size:0.95rem; font-weight:500; color:rgba(255,255,255,0.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }

/* Dashboard compact footer */
#footer-dash { background:var(--dark); border-top:1px solid rgba(255,255,255,0.05); flex-shrink:0; }
@media(max-width:767px){ #footer-dash { display:none; } }
.compact-footer { max-width:1000px; margin:0 auto; padding:14px 20px; display:flex; flex-direction:column; gap:5px; text-align:center; }
.cf-copy { font-size:0.69rem; color:rgba(255,255,255,0.25); }
.cf-disclaimer { font-size:0.67rem; color:rgba(255,255,255,0.18); }
.cf-contact { font-size:0.69rem; color:rgba(255,255,255,0.3); display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; }
.cf-contact a { color:rgba(255,255,255,0.38); text-decoration:none; transition:color 0.15s; }
.cf-contact a:hover { color:var(--blue-light); }
.cf-sep { color:rgba(255,255,255,0.12); }

/* Mobile footer */
.mobile-footer { margin-top:32px; padding:18px 0 8px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:5px; text-align:center; }
.mobile-footer .mf-text { font-size:0.68rem; color:var(--muted); line-height:1.5; }
.mobile-footer a { color:var(--muted); text-decoration:none; }
.mobile-footer a:hover { color:var(--blue); }

/* ── Place autocomplete dropdown (profile editor) ──────────────────── */
.place-autocomplete-wrap { position:relative; }
.place-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:200;
  background:#1A2E2C; border:1px solid rgba(18,169,157,0.35);
  border-radius:8px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
.place-option {
  padding:10px 14px;
  font-size:0.84rem; font-family:var(--font-body);
  color:#D8F0E8;                          /* bright enough on dark bg */
  cursor:pointer; line-height:1.4;
  transition:background 0.12s;
  border-bottom:1px solid rgba(18,169,157,0.1);
}
.place-option:last-child { border-bottom:none; }
.place-option:hover,
.place-option.active { background:rgba(18,169,157,0.18); color:#fff; }
.place-option-loading {
  color:rgba(216,240,232,0.45); cursor:default; font-style:italic;
}
.place-option-loading:hover { background:transparent; color:rgba(216,240,232,0.45); }
.place-option-empty {
  color:rgba(216,240,232,0.4); cursor:default; font-style:italic;
}
.place-option-empty:hover { background:transparent; color:rgba(216,240,232,0.4); }

/* ── Responsive ── */
@media(max-width:767px) {
  .dash-body { display:none !important; }
  #sidebar {
    display: flex !important;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 280px;
    height: 100% !important;
    z-index: 910;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    padding-top: calc(var(--nav-h) + 16px);
    overflow-y: auto; overflow-x: hidden;
  }
  #sidebar.open { transform: translateX(0); }
  .hamburger { display: block; }
}
@media(min-width:768px) {
  #dashboard.active .dash-body { display:flex; }
  #mobile-grid { display:none !important; }
  #mobile-product-view { display:none !important; }
  #sidebar {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    height: auto !important;
    z-index: 1;
    transform: none !important;
    padding-top: 20px;
  }
  .iframe-pane {
    margin-left: var(--sidebar-w);
  }
}
@media(max-width:600px) {
  #mobile-product-view { top: 112px; }
  #sidebar { padding-top: 128px; }
  #mobile-grid.visible {
    position: fixed; top: 112px; left: 0; right: 0; bottom: 0;
    overflow-y: auto; padding: 16px 16px 80px; z-index: 350;
  }
}