/*
 * App Shell Layout
 * =================
 * Used by tracking/dashboard pages where the user is doing focused work and
 * needs persistent navigation context.
 *
 * Layout (desktop ≥ 900 px):
 *   +------------------------------------------------+
 *   | topbar (logo, search, user)                    |  48 px
 *   +---------+--------------------------------------+
 *   | rail    |                                      |
 *   |  icons  |          main content                |
 *   |  list   |                                      |
 *   |         |                                      |
 *   +---------+--------------------------------------+
 *     240 px              fluid
 *
 * Layout (mobile < 900 px): rail is off-canvas, slides in from left.
 */

body.app-shell {
  overflow: hidden;  /* main scroll happens inside .main */
  height: 100vh;
}

.app {
  display: grid;
  grid-template-columns: var(--rail-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100vh;
}

/* ---------- Top bar ---------- */
.topbar {
  grid-column: 1 / 3;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  gap: var(--space-3);
  z-index: var(--z-topbar);
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text);
  flex-shrink: 0;
}
.topbar-brand img {
  height: 48px;
  width: auto;
  display: block;
}

/* Primary icon nav — lives in the topbar on both app and reader shells so
   navigation is in the same spot regardless of page type. */
.topbar-nav-icons {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-3);
}
.topbar-nav-icons .icon-item {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  position: relative;
  text-decoration: none;
}
.topbar-nav-icons .icon-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.topbar-nav-icons .icon-item.active { background: var(--accent-soft); color: var(--accent); }
.topbar-nav-icons .icon-item.hurricane-active { color: var(--danger); }
.topbar-nav-icons .icon-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--surface-3); color: var(--text);
  padding: 4px 8px; border-radius: var(--radius);
  font-size: var(--fs-xs); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s;
  box-shadow: var(--shadow);
  z-index: var(--z-tooltip);
}
.topbar-nav-icons .icon-item:hover[data-tip]::after { opacity: 1; transition-delay: 0.3s; }

.topbar-search {
  flex: 1;
  max-width: 360px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px var(--space-3);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-3);
}
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-2);
}
.topbar-actions .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
}

/* Hamburger button (mobile only — shows the rail drawer) */
.topbar-hamburger {
  display: none;
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-size: 22px;
  padding: 0 var(--space-2);
}

/* ---------- Single-column collapsed rail (Option B) ---------- */
.rail {
  background: var(--surface-1);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-rail);
}

/* Section column: context-aware navigation for the current top-level area.
   (The primary icon strip moved to the topbar — see .topbar-nav-icons above —
   so the rail now contains only this context-specific section navigation.) */
.rail-section {
  flex: 1;
  overflow-y: auto;
}
.rail-section-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.rail-section-header .title {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.rail-section-header .subtitle {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-top: 2px;
}
.rail-section-body { padding: var(--space-2) 0; }

.rail-group { padding: var(--space-1) 0; }
.rail-group-label {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.rail-item {
  padding: 7px var(--space-4) 7px var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.rail-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.rail-item.active {
  background: var(--accent-soft);
  color: var(--text);
  border-left-color: var(--accent);
}
.rail-item i,
.rail-item .hurricane-icon { width: 14px; color: var(--text-muted); }
.rail-item.active i,
.rail-item.active .hurricane-icon { color: var(--accent); }
.rail-item .badge {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 6px;
  background: var(--surface-3);
  border-radius: 8px;
  color: var(--text-muted);
}
.rail-item .badge.pro { background: rgba(163,113,247,0.18); color: var(--purple); }

/* ---------- Main content ---------- */
.main {
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
}

.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb .chevron { font-size: 10px; }

/* Page hero (title + meta line) */
.page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
}
.page-hero h1 {
  margin: 0 0 6px;
  font-size: var(--fs-2xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.page-hero .meta { color: var(--text-2); font-size: 13px; }
.page-hero .meta strong { color: var(--text); }

/* Key stats grid — moved to design-system.css so both shells (app + reader)
   pick it up. Kept here as a pointer to avoid future re-duplication. */

/* Hero card — used for location-specific insights (paid value-add surface) */
.hero-card {
  background: linear-gradient(135deg, #1e2a4a 0%, var(--surface-2) 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius-xl);
  padding: 20px var(--space-5);
  margin-bottom: var(--space-5);
}
.hero-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero-card h3 .star { color: var(--warn); }
.hero-card p { margin: 0 0 var(--space-2); line-height: 1.6; }
.hero-card .pill-meta { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--space-3); }

/* Content panel — moved to design-system.css so both shells (app + reader)
   pick it up. Kept here as a pointer to avoid future re-duplication. */

/* ---------- Mobile drawer behavior (< 900 px) ---------- */
/* Mobile-only labeled primary menu injected at the top of the rail drawer.
   On desktop the topbar icon strip is the menu and this stays hidden; on phones
   the icon strip (unlabeled, hover-only tooltips that don't work on touch) is
   hidden and this labeled list becomes the main menu. */
.rail-primary { display: none; }
.rail-primary .rail-item { font-size: var(--fs-md); padding: 12px var(--space-4); }
.rail-primary .rail-item i,
.rail-primary .rail-item .hurricane-icon { width: 20px; font-size: 18px; }

@media (max-width: 899px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
  }
  .topbar { grid-column: 1; }
  .topbar-hamburger { display: inline-flex; }
  /* The cramped, unlabeled primary icon strip is unusable on touch — hide it;
     the labeled .rail-primary menu (in the hamburger drawer) replaces it. */
  .topbar-nav-icons { display: none; }
  /* The flex:1 "Find your city" search grows and shoves the account avatar +
     logout off the right edge on phones — hide it (Hurricane Risk is in the
     menu). Also drop the secondary ?/bell icons (both in the drawer) so the
     account + logout always fit. */
  .topbar-search { display: none; }
  .topbar-secondary-icon { display: none; }
  .rail-primary {
    display: block;
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .rail {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: min(86vw, 300px);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
    /* Above Leaflet (its control corners are z-index 1000) so an on-page map
       (e.g. Impact Timeline) doesn't overlay the open menu. */
    z-index: calc(var(--z-modal) + 101);
  }
  body.rail-open .rail { transform: translateX(0); }
  .main {
    padding: var(--space-4);
  }
  /* Backdrop when rail is open */
  body.rail-open::after {
    content: '';
    position: fixed;
    top: var(--topbar-height);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: calc(var(--z-modal) + 100);
  }
  .page-hero { flex-direction: column; }
}