/* ═══════════════════════════════════════════════════════════════
   CASHMEREUM LAYOUT — layout.css
   Topnav + Sidebar + App Shell structure
   ═══════════════════════════════════════════════════════════════ */

/* ── APP SHELL ── */
.app-shell {
  display: grid;
  grid-template-rows: var(--nav-h) 1fr;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-areas:
    "nav nav"
    "sidebar main";
  min-height: 100vh;
}

/* ── FLUID PAGE TRANSITIONS ──
   Cross-document View Transitions: the browser cross-fades between pages and
   keeps the named bars in place, so launching the app (and moving between app
   pages) feels like one continuous surface rather than separate page loads.
   Pure CSS → CSP-safe. Browsers without support just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── TOP NAV ── */
.topnav {
  grid-area: nav;
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(10,10,15,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
  view-transition-name: site-topbar;   /* persists across navigations → bar stays put */
}

.topnav-logo {
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px; letter-spacing: -0.5px;
  /* Plain inline text (NOT flex): a flex container turns each text run —
     CASH / MERE / UM / the badge — into a separate item, and `gap` would
     insert spaces inside the "CASHMEREUM" wordmark. Matches the landing nav. */
  white-space: nowrap; min-width: calc(var(--sidebar-w) - 32px);
  color: inherit; text-decoration: none;   /* it is now a link back to the main site */
}

/* Main-site links carried into the app top bar so the user never feels they left. */
.topnav-links {
  display: flex; align-items: center; gap: 22px; list-style: none;
  margin: 0 0 0 8px; padding: 0;
}
.topnav-links a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--smoke); text-decoration: none;
  transition: color var(--duration); white-space: nowrap;
}
.topnav-links a:hover { color: var(--gold); }
/* Collapse the site links on narrower viewports (the sidebar covers app nav). */
@media (max-width: 1180px) { .topnav-links { display: none; } }
.topnav-logo .accent { color: var(--gold); }
.topnav-logo .version {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--smoke); background: var(--obsidian-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1px 6px; font-weight: 400; letter-spacing: 0.08em;
  vertical-align: middle; margin-left: 4px;
}

.topnav-search {
  flex: 1; max-width: 420px;
  position: relative;
}
.topnav-search input {
  width: 100%; height: 36px;
  background: var(--obsidian-4); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0 12px 0 36px;
  color: var(--white); font-size: 13px; outline: none;
  transition: border-color var(--duration);
}
.topnav-search input:focus { border-color: var(--gold); }
.topnav-search input::placeholder { color: var(--smoke); }
.topnav-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--smoke); font-size: 15px; pointer-events: none;
}

.topnav-actions {
  display: flex; align-items: center; gap: var(--space-3); margin-left: auto;
}

.topnav-net-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-full);
  background: rgba(46,207,168,0.1); border: 1px solid rgba(46,207,168,0.2);
  font-family: var(--font-mono); font-size: 11px; color: var(--teal);
}
.topnav-net-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  animation: pulse-dot 2s ease-in-out infinite;
}

.topnav-icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--obsidian-4); border: 1px solid var(--border);
  color: var(--smoke-light); font-size: 16px; position: relative;
  transition: all var(--duration);
}
.topnav-icon-btn:hover { color: var(--white); border-color: var(--border-mid); }
.topnav-icon-btn .notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); border: 1.5px solid var(--obsidian-2);
}

.topnav-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  color: var(--obsidian); border: 1px solid var(--border-mid); cursor: pointer;
}

/* ── SIDEBAR ── */
.sidebar {
  grid-area: sidebar;
  position: fixed; top: var(--nav-h); left: 0; bottom: 0;
  width: var(--sidebar-w); z-index: 100;
  view-transition-name: app-sidebar;   /* stays put while app pages cross-fade */
  background: var(--obsidian-2);
  border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: var(--space-4) 0;
}

.sidebar-section { margin-bottom: var(--space-2); }
.sidebar-section-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--smoke); letter-spacing: 0.2em; text-transform: uppercase;
  padding: var(--space-3) var(--space-5) var(--space-2);
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--space-5); border-radius: 0;
  font-size: 13.5px; font-weight: 500; color: var(--smoke-light);
  transition: all var(--duration); position: relative;
  cursor: pointer;
}
.nav-item:hover { color: var(--white); background: var(--obsidian-3); }
.nav-item.active {
  color: var(--gold); background: rgba(200,169,110,0.07);
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--gold); border-radius: 0 2px 2px 0;
}
.nav-item .icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-item .badge-count {
  margin-left: auto; background: var(--red);
  color: white; font-size: 10px; font-weight: 700;
  border-radius: var(--radius-full); padding: 1px 6px; min-width: 18px; text-align: center;
}

.sidebar-wallet {
  margin: var(--space-4) var(--space-4) var(--space-3);
  background: var(--obsidian-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.sidebar-wallet-label {
  font-family: var(--font-mono); font-size: 10px; color: var(--smoke);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px;
}
.sidebar-wallet-balance {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  letter-spacing: -0.3px; white-space: nowrap;
  color: var(--gold); line-height: 1.1; margin-bottom: 4px;
}
.sidebar-wallet-sub {
  font-size: 12px; color: var(--smoke);
  font-family: var(--font-mono);
}
.sidebar-wallet-addr {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--smoke);
  word-break: break-all; line-height: 1.5;
}

.sidebar-footer {
  margin-top: auto; padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
}
.sidebar-footer-text {
  font-family: var(--font-mono); font-size: 10px; color: var(--smoke);
  line-height: 1.6;
}

/* ── MAIN CONTENT ── */
.main-content {
  grid-area: main;
  /* No margin-top/-left: the app-shell grid already reserves the nav row and
     sidebar column (grid-template-rows: var(--nav-h) 1fr; -columns: var(--sidebar-w) 1fr).
     Margins here would double the offset and leave empty gaps between the
     top nav / sidebar and the content. */
  min-height: calc(100vh - var(--nav-h));
  background: var(--obsidian);
}

.page-header {
  padding: var(--space-8) var(--space-10) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--obsidian-2);
}
.page-title {
  font-family: var(--font-display); font-size: 28px; font-weight: 800;
  letter-spacing: -1px; margin-bottom: 4px;
}
.page-subtitle { font-size: 14px; color: var(--smoke); }

.page-body { padding: var(--space-8) var(--space-10); }

/* ── PAGE TABS ── */
.page-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-10);
  background: var(--obsidian-2);
}
.tab-btn {
  padding: 14px 20px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--smoke); border-bottom: 2px solid transparent;
  transition: all var(--duration); white-space: nowrap;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--white); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ── DROPDOWNS ── */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 500;
  background: var(--obsidian-3); border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg); overflow: hidden;
  min-width: 200px; box-shadow: var(--shadow-card);
  animation: slideInUp 0.2s var(--ease);
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 13.5px; color: var(--smoke-light);
  transition: all var(--duration); cursor: pointer;
}
.dropdown-item:hover { background: var(--obsidian-4); color: var(--white); }
.dropdown-item.danger:hover { color: var(--red); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── MOBILE SIDEBAR TOGGLE ── */
.sidebar-toggle {
  display: none; width: 36px; height: 36px;
  border-radius: var(--radius-md); background: var(--obsidian-4);
  border: 1px solid var(--border); align-items: center; justify-content: center;
  color: var(--white); font-size: 18px;
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
  .app-shell { grid-template-areas: "nav" "main"; grid-template-columns: 1fr; }
  .main-content { margin-left: 0; }
  .sidebar {
    transform: translateX(-100%); transition: transform var(--duration-lg) var(--ease);
    z-index: 150;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .sidebar-toggle { display: flex; }
  .page-body { padding: var(--space-4); }
  .page-header { padding: var(--space-5) var(--space-4) var(--space-4); }
  .page-tabs { padding: 0 var(--space-4); overflow-x: auto; }
}