/* Shared icon-btn family + app-header/breadcrumb chrome for the sibling pages
   (admin, bd-feed, portfolio-scout, scout-report, import).

   Design tokens (palette, brand --ib-*, light-mode) now live in the single
   source of truth, css/tokens.css, linked before this file on every page.
   Consume them via var(); do not redefine them here. */

/* Icon-btn family — mirrors css/app.css. */
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  text-decoration: none;
  font-family: inherit;
  padding: 0;
}
.icon-btn:hover { color: var(--text); border-color: var(--border2); background: var(--bg); }
.icon-btn svg { width: 16px; height: 16px; display: block; }

.icon-btn--bd { background: linear-gradient(135deg, #0c2a3d, #0c3347); border-color: #164e63; color: #7dd3fc; }
.icon-btn--bd:hover { background: linear-gradient(135deg, #0e3247, #0e3a52); border-color: #1e6889; color: #bae6fd; }
.icon-btn--scout { background: linear-gradient(135deg, #052e16, #0c3d20); border-color: #166534; color: #86efac; }
.icon-btn--scout:hover { background: linear-gradient(135deg, #073a1c, #0e4a26); border-color: #1d8040; color: #bbf7d0; }
.icon-btn--admin { background: linear-gradient(135deg, #2a1810, #3d2418); border-color: #78350f; color: #fbbf24; }
.icon-btn--admin:hover { background: linear-gradient(135deg, #321e14, #46291c); border-color: #92450e; color: #fef3c7; }
.icon-btn--import { background: linear-gradient(135deg, #1e1a3a, #2a234f); border-color: #4c1d95; color: #c4b5fd; }
.icon-btn--import:hover { background: linear-gradient(135deg, #2a234a, #382c63); border-color: #6d28d9; color: #ddd6fe; }

body.light-mode .icon-btn--bd { background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; }
body.light-mode .icon-btn--bd:hover { background: #bae6fd; border-color: #38bdf8; color: #075985; }
body.light-mode .icon-btn--scout { background: #dcfce7; border-color: #86efac; color: #15803d; }
body.light-mode .icon-btn--scout:hover { background: #bbf7d0; border-color: #4ade80; color: #166534; }
body.light-mode .icon-btn--admin { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
body.light-mode .icon-btn--admin:hover { background: #fde68a; border-color: #f59e0b; color: #92400e; }
body.light-mode .icon-btn--import { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
body.light-mode .icon-btn--import:hover { background: #ddd6fe; border-color: #a78bfa; color: #5b21b6; }

/* Breadcrumb — expresses the Scout › Admin › <page> hierarchy on the admin
   sibling pages. Variable-driven, so it adapts to light mode automatically. */
.breadcrumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--text3); margin-bottom: 12px; }
.breadcrumb a { color: var(--text2); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb .bc-sep { color: var(--text3); opacity: .7; }
.breadcrumb .bc-current { color: var(--text); font-weight: 600; }
/* Home affordance — 🏠 on the root (Scout) crumb so it reads as "go home". */
.breadcrumb a:first-child::before { content: "🏠 "; }

/* Unified app header (brand bar) — shared across the sibling pages so every
   page leads with the same IB Scout branding + breadcrumb, matching the main
   Scout app. Page title + intro live below it as a body heading. */
.app-header {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
  /* Lean bar — matches the Cockpit's flat top strip rather than a chunky brand
     card: a flat surface with just the IB-orange keyline at the bottom edge as
     the brand cue. The logo + breadcrumb carry identity, so the wordmark is
     dropped (below). Far less vertical chrome on every sibling page. */
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ib-orange);
  border-radius: 0;
  padding: 8px 2px;
}
.app-brand { display: flex; align-items: center; gap: 10px; margin-right: 8px; }
.app-logo { width: 30px; height: 30px; flex-shrink: 0; }
/* Flyover mark carries its own navy tile — no white chrome behind it. */
.app-logo img { width: 100%; height: 100%; border-radius: 7px; display: block; object-fit: cover; }
.app-brand-text { display: flex; flex-direction: column; min-width: 0; }
/* Wordmark dropped — logo + "Scout › <page>" breadcrumb carry the brand, matching
   the Cockpit (which shows no wordmark). Hidden, not removed, so the markup that
   every sibling page already ships stays valid. */
.app-wordmark { display: none; }
.app-header .breadcrumb { margin: 0; }
.app-header .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* In DARK mode the bar is navy, so the breadcrumb inside it reads light; the
   current page pops in IB Orange. Light mode overrides these below. */
.app-header .breadcrumb { color: rgba(255,255,255,0.55); }
.app-header .breadcrumb a { color: rgba(255,255,255,0.72); }
.app-header .breadcrumb a:hover { color: #fff; }
.app-header .breadcrumb .bc-sep { color: rgba(255,255,255,0.4); }
.app-header .breadcrumb .bc-current { color: var(--ib-orange); }

/* Light mode — the sibling header follows the theme like the main app's
   header (a light surface), instead of staying navy. Keep the IB-Orange
   bottom keyline as the brand cue, and flip the wordmark + breadcrumb to dark
   ink so they stay legible on the light bar. */
body.light-mode .app-header {
  /* Lean bar in light mode too — flat, just the orange keyline (no card). */
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ib-orange);
}
body.light-mode .app-wordmark { color: var(--text); }
body.light-mode .app-header .breadcrumb { color: var(--text3); }
body.light-mode .app-header .breadcrumb a { color: var(--text2); }
body.light-mode .app-header .breadcrumb a:hover { color: var(--text); }
body.light-mode .app-header .breadcrumb .bc-sep { color: var(--text3); }
body.light-mode .app-header .breadcrumb .bc-current { color: var(--ib-orange); }
/* Mobile: the brand + action chips don't fit a phone row, so drop the actions
   to their own full-width line below the brand (left-aligned, not floating at
   the right edge) and let them wrap. */
@media (max-width: 640px) {
  /* Lean bar on phones: keep it a single tight row — actions stay to the right
     (wrapping only if they truly don't fit) rather than dropping to a full-width
     line, and the low-value status meta is hidden. */
  .app-header { gap: 8px; margin-bottom: 10px; padding: 6px 2px; }
  .app-header .header-right { margin-left: auto; width: auto; gap: 6px; }
  .app-header .hdr-meta { display: none; }
  /* Comfortable thumb targets on touch screens. The .header-right descendant
     selectors (specificity 0,2,0) out-rank each sibling page's bare
     .back-link / .btn-refresh (0,1,0), so this lands without having to edit
     every page that defines those chips in its own inline <style>. */
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .header-right .back-link,
  .header-right .btn-refresh {
    min-height: 38px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
  }
}

/* Narrowest phones: keep the brand compact so the breadcrumb + action chips
   don't overflow the viewport edge. */
@media (max-width: 420px) {
  .app-wordmark { font-size: 12px; }
  .breadcrumb { font-size: 10px; gap: 5px; }
  .header-right { gap: 6px; }
  .header-right .back-link,
  .header-right .btn-refresh { font-size: 11px; padding: 8px 10px; }
}

/* Stop iOS Safari from auto-inflating body text in landscape, which otherwise
   breaks the carefully sized mobile type scale on these pages. */
html { -webkit-text-size-adjust: 100%; }