/* ═══════════════════════════════════════════════════════════════
   vibutame-shell.css — header · footer · sidebar · tabs · mobile
   Requires vibutame-brand.css (tokens, font-faces, base components)
   Location: /public_html/assets/vibutame-shell.css
   ═══════════════════════════════════════════════════════════════ */


/* ── Shared reset & body scaffold ─────────────────────────────── */
.vbs-page{margin:0;min-height:100dvh;display:flex;flex-direction:column;
  font-family:var(--vb-font-body,'Work Sans',system-ui,sans-serif);
  line-height:1.6}
.vbs-page--sidebar{flex-direction:row}

/* When using sidebar mode the main area is a column that fills the rest */
.vbs-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* Content area — always fills available height so footer is pushed down */
.vbs-content{flex:1}


/* ══════════════════════════════════════════════════════════════════
   MODE 1 — HERO HEADER  (public / landing pages)
   Full purple band, wordmark + slug + title, crest, right slot
   ══════════════════════════════════════════════════════════════════ */

.vbs-hero{background:var(--vb-purple);padding:36px 0 28px}
.vbs-hero-inner{max-width:1100px;margin:0 auto;padding:0 40px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.vbs-hero-inner--wide{max-width:none}
.vbs-hero-content{flex:1;min-width:0}
.vbs-hero-crest{flex:none;width:140px;height:140px;
  background:url('https://assets.vibuta.me/vibutame-crest.svg') top right/contain no-repeat;
  pointer-events:none;user-select:none}
.vbs-hero-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}

/* Brand lockup inside hero */
.vbs-brand{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .45em;margin-bottom:14px}
.vbs-wordmark{font-family:var(--vb-font-display);font-weight:400;color:var(--vb-gold);
  font-size:clamp(18px,5.5vw,24px);letter-spacing:.05em;text-decoration:none;white-space:nowrap}
.vbs-wordmark:hover{text-decoration:none;filter:brightness(1.12)}
.vbs-slug{font-family:var(--vb-font-display);font-weight:400;
  font-size:clamp(18px,5.5vw,24px);letter-spacing:.05em;
  color:var(--vb-purple-300);text-decoration:none;transition:color .15s}
.vbs-slug:hover{color:var(--vb-gold);text-decoration:none}
.vbs-hero-title{font-family:var(--vb-font-display);font-weight:400;
  font-size:34px;line-height:1.1;color:#fff;margin-bottom:16px;letter-spacing:-.01em}
.vbs-hero-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center}

@media(max-width:680px){
  .vbs-hero{padding:24px 0 20px}
  .vbs-hero-inner{padding:0 20px}
  .vbs-hero-crest{display:none}
  .vbs-hero-title{font-size:26px}
}


/* ══════════════════════════════════════════════════════════════════
   MODE 2 — TOPBAR HEADER  (logged-in, lightweight pages)
   Compact purple-900 strip: brand left, user/actions right
   ══════════════════════════════════════════════════════════════════ */

.vbs-topbar{background:var(--vb-purple-900);border-bottom:1px solid var(--vb-line);
  padding:.65rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;min-height:48px;flex-wrap:wrap;position:sticky;top:0;z-index:50}
.vbs-topbar-inner{max-width:1100px;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.vbs-topbar-inner--wide{max-width:none}

/* Brand inside topbar — single line, never wraps */
.vbs-topbar .vbs-brand{margin-bottom:0;gap:.35rem;flex-wrap:nowrap}
.vbs-topbar .vbs-wordmark{font-size:1.25rem;letter-spacing:-.01em}
.vbs-topbar .vbs-slug{font-size:1.25rem;letter-spacing:-.01em}

/* Page context title inline after brand (optional) */
.vbs-topbar-title{font-family:var(--vb-font-display);font-weight:400;
  font-size:.92rem;color:rgba(255,255,255,.7);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* Right cluster: user info + actions */
.vbs-topbar-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.vbs-user{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--vb-ink-soft)}
.vbs-user-name{color:var(--vb-ink, #F3ECFA)}
/* Role badge — uses chip sizing, just different colors */
.vbs-user-role{font-family:var(--vb-font-display);font-weight:400;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:6px 10px 4px;border-radius:999px;
  background:rgba(252,228,48,.12);color:var(--vb-gold)}
.vbs-user-role--member{background:rgba(154,111,182,.18);color:var(--vb-purple-300)}
.vbs-logout{font-family:var(--vb-font-display);font-weight:400;font-size:.74rem;
  color:var(--vb-ink-soft,#B7A4CB);
  text-decoration:none;border:1px solid var(--vb-line,#36234C);border-radius:999px;
  padding:6px 13px 4px;transition:all .14s;white-space:nowrap}
.vbs-logout:hover{color:var(--vb-gold);border-color:var(--vb-gold)}

@media(max-width:680px){
  .vbs-topbar{padding:.55rem 1rem;gap:.5rem}
  .vbs-topbar-inner{flex-wrap:wrap}
  /* Line 1: brand (wordmark + slug) stays together */
  .vbs-topbar-inner>div:first-child{flex:1;min-width:0}
  .vbs-topbar .vbs-brand{flex-wrap:nowrap}
  /* Line 2: role + logout */
  .vbs-topbar-right{flex:0 0 auto}
  .vbs-user-name{display:none}
}


/* ══════════════════════════════════════════════════════════════════
   MODE 3 — SIDEBAR  (heavy admin: BiBLi, auth admin)
   Imperial Purple sidebar, thin topbar for page title + user
   ══════════════════════════════════════════════════════════════════ */

.vbs-sidebar{width:210px;min-width:210px;background:var(--vb-purple-700,#380A55);
  border-right:1px solid var(--vb-line,#36234C);display:flex;flex-direction:column;
  height:100dvh;position:sticky;top:0}

/* Sidebar brand block */
.vbs-sidebar-brand{padding:18px 18px 14px;border-bottom:1px solid rgba(252,228,48,.18)}
.vbs-sidebar .vbs-brand{margin-bottom:6px;gap:.3rem}
.vbs-sidebar .vbs-wordmark{font-size:1.05rem}
.vbs-sidebar .vbs-slug{font-size:1.05rem}
.vbs-sidebar-desc{font-size:.82rem;font-weight:500;color:#fff}
.vbs-sidebar-sub{font-size:.68rem;color:rgba(252,228,48,.7);
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}

/* Sidebar navigation */
.vbs-sidebar-nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.vbs-nav-section{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(252,228,48,.6);padding:10px 10px 4px}
.vbs-nav-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:5px;
  border:none;background:none;color:rgba(255,255,255,.62);font-size:.82rem;
  font-family:var(--vb-font-body);cursor:pointer;width:100%;text-align:left;
  transition:background .14s,color .14s;position:relative;text-decoration:none}
a.vbs-nav-item{text-decoration:none}
.vbs-nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.vbs-nav-item.is-active{background:rgba(252,228,48,.12);color:#fff}
.vbs-nav-item.is-active::before{content:'';position:absolute;left:0;top:20%;height:60%;
  width:3px;background:var(--vb-gold);border-radius:0 2px 2px 0}
.vbs-nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.vbs-nav-badge{margin-left:auto;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.58rem;background:var(--vb-gold);color:var(--vb-purple);font-weight:600;
  padding:1px 6px;border-radius:10px}

/* Sidebar footer — motto (matches .vbs-footer-motto) */
.vbs-sidebar-foot{padding:14px 16px;background:var(--vb-purple-900,#2A0741);
  border-top:1px solid rgba(252,228,48,.18);text-align:center}
.vbs-sidebar-motto{font-family:var(--vb-font-motto);font-style:italic;
  font-size:12px;color:rgba(252,228,48,.55)}

/* Sidebar topbar — thin bar above content area */
.vbs-sidebar-topbar{height:50px;min-height:50px;border-bottom:1px solid var(--vb-line,#36234C);
  display:flex;align-items:center;padding:0 22px;gap:14px;background:var(--vb-purple-900,#2A0741)}
.vbs-sidebar-topbar .vbs-topbar-title{font-size:.88rem;font-weight:600;flex:1;
  font-family:var(--vb-font-display);color:var(--vb-ink,#F3ECFA)}

/* Hamburger — visible only on mobile */
.vbs-hamburger{display:none;align-items:center;justify-content:center;background:none;border:none;
  color:var(--vb-ink,#F3ECFA);font-size:1.4rem;line-height:1;cursor:pointer;padding:2px 6px}

/* Sidebar backdrop (mobile overlay) */
.vbs-sidebar-backdrop{display:none;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5)}

@media(max-width:760px){
  .vbs-hamburger{display:inline-flex}
  .vbs-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:60;width:248px;min-width:248px;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:2px 0 22px rgba(0,0,0,.45)}
  .vbs-sidebar.is-open{transform:translateX(0)}
  .vbs-sidebar-topbar{padding:0 12px;gap:10px}
  .vbs-sidebar-topbar .vbs-topbar-title{font-size:.92rem}
  .vbs-sidebar-topbar .vbs-user-name{display:none}
}


/* ══════════════════════════════════════════════════════════════════
   TABS  (diplom-style: solid row, rounded-top active)
   ══════════════════════════════════════════════════════════════════ */

.vbs-tabs{padding:0;
  background:var(--vb-purple-700);border-bottom:1px solid rgba(255,255,255,.10)}
.vbs-tabs--light{background:var(--vb-purple-100);border-bottom:1px solid var(--vb-line)}
.vbs-tabs-inner{display:flex;gap:.25rem;padding:.4rem 1.5rem 0;
  max-width:calc(1100px + 3rem);margin:0 auto}
.vbs-tab{appearance:none;border:0;background:transparent;color:#e7dbf5;
  font-family:var(--vb-font-body);font-size:.82rem;font-weight:600;
  padding:.45rem .85rem;border-radius:9px 9px 0 0;cursor:pointer;opacity:.65;
  text-decoration:none;transition:opacity .12s,background .12s}
.vbs-tab:hover{opacity:1}
/* Dark theme active tab */
.vbs-tab.is-active{opacity:1;background:var(--vb-paper,#160A20);color:var(--vb-ink,#F3ECFA)}
/* Light theme active tab — purple text on light surface */
.vbs-tabs--light .vbs-tab{color:var(--vb-purple);opacity:.6}
.vbs-tabs--light .vbs-tab:hover{opacity:1}
.vbs-tabs--light .vbs-tab.is-active{background:var(--vb-paper,#F6F2F9);color:var(--vb-purple);opacity:1}

/* Right-aligned slot inside tab bar (e.g. save chip, lang toggle) */
.vbs-tabs-right{margin-left:auto;display:flex;align-items:center;gap:.5rem;
  align-self:center;margin-bottom:.35rem}

@media(max-width:680px){
  .vbs-tabs-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    flex-wrap:nowrap;padding:.4rem 1rem 0}
  .vbs-tabs-inner::-webkit-scrollbar{display:none}
  .vbs-tab{white-space:nowrap;flex-shrink:0}
}


/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */

.vbs-footer{background:var(--vb-purple-900);text-align:center;padding:20px 24px;margin-top:auto}
.vbs-footer-motto{font-family:var(--vb-font-motto);font-style:italic;
  font-size:12px;color:rgba(252,228,48,.55)}
/* Links row (optional service links in footer) */
.vbs-footer-links{display:flex;justify-content:center;gap:1rem;margin-top:8px;flex-wrap:wrap}
.vbs-footer-links a{font-size:.76rem;color:rgba(255,255,255,.45);text-decoration:none;
  transition:color .14s}
.vbs-footer-links a:hover{color:var(--vb-gold)}


/* ══════════════════════════════════════════════════════════════════
   ANCHOR-CASCADE GUARDS
   Prevents body-level link colors from overriding brand elements.
   The classic trap: `body a{color:X}` beats `.vbs-wordmark{color:gold}`
   because the tag selector adds specificity.
   ══════════════════════════════════════════════════════════════════ */

/* !important is intentional — these are identity elements that must
   never inherit a service's link color, even from body a{color:X}. */
a.vbs-wordmark,a.vbs-wordmark:visited{color:var(--vb-gold) !important}
a.vbs-wordmark:hover{color:var(--vb-gold) !important;filter:brightness(1.12)}
a.vbs-slug,a.vbs-slug:visited{color:var(--vb-purple-300) !important}
a.vbs-slug:hover{color:var(--vb-gold) !important}
a.vbs-nav-item,a.vbs-nav-item:visited{color:rgba(255,255,255,.62) !important}
a.vbs-nav-item:hover{color:#fff !important}
a.vbs-nav-item.is-active,a.vbs-nav-item.is-active:visited{color:#fff !important}
a.vbs-logout,a.vbs-logout:visited{color:var(--vb-ink-soft,#B7A4CB) !important}
a.vbs-logout:hover{color:var(--vb-gold) !important;border-color:var(--vb-gold) !important}
.vbs-footer-links a,.vbs-footer-links a:visited{color:rgba(255,255,255,.45) !important}
.vbs-footer-links a:hover{color:var(--vb-gold) !important}


/* ══════════════════════════════════════════════════════════════════
   UTILITY / SHARED HELPERS
   ══════════════════════════════════════════════════════════════════ */

/* Chip (reusable inline badge — used in hero meta, etc.)
   Fonarto baseline compensation: the font's ascenders are taller than
   its descenders, so text sits visually ~1px high. Asymmetric padding
   (more top, less bottom) pushes the glyphs down to optical center. */
.vbs-chip{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--vb-font-display);font-size:11px;font-weight:400;
  padding:6px 10px 4px;border-radius:var(--vb-pill,999px);
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);
  letter-spacing:.04em}

/* Language toggle chip */
.vbs-lang{padding:3px 3px 2px;gap:1px}
.vbs-lang-btn{font-family:var(--vb-font-display);font-size:11px;font-weight:400;
  letter-spacing:.04em;
  padding:4px 8px 2px;color:rgba(255,255,255,.8);text-decoration:none;
  border-radius:var(--vb-pill,999px);border:none;background:none;cursor:pointer}
.vbs-lang-btn.is-active{background:var(--vb-gold);color:var(--vb-purple-900)}

/* Content wrapper with standard max-width */
.vbs-wrap{max-width:1100px;margin:0 auto;padding:0 24px;width:100%}
.vbs-wrap--narrow{max-width:860px}
.vbs-wrap--wide{max-width:none}

/* ══════════════════════════════════════════════════════════════════
   SHELL BUTTONS
   Buttons used in the shell chrome (header actions, login, etc.)
   These supplement vibutame-brand.css .vb-btn-* classes with
   hover highlights that must always be present.
   ══════════════════════════════════════════════════════════════════ */

.vbs-btn{display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--vb-font-display);font-weight:400;font-size:.92rem;
  padding:.7em 1.15em .55em;border-radius:var(--vb-pill,999px);
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  line-height:1;white-space:nowrap;transition:background .15s,border-color .15s,filter .15s,transform .1s}
.vbs-btn:active{transform:translateY(1px)}
/* Gold primary — the main action button */
.vbs-btn--primary{background:var(--vb-gold);color:var(--vb-purple-900);border-color:var(--vb-gold)}
.vbs-btn--primary:hover{background:var(--vb-gold-600,#E4C800);border-color:var(--vb-gold-600,#E4C800)}
/* Ghost gold — outlined button on purple/dark backgrounds ONLY */
.vbs-btn--ghost-gold{background:transparent;color:var(--vb-gold);border-color:var(--vb-gold)}
.vbs-btn--ghost-gold:hover{background:rgba(252,228,48,.12)}
/* Ghost purple — outlined button on light backgrounds */
.vbs-btn--ghost{background:transparent;color:var(--vb-purple);border-color:var(--vb-purple)}
.vbs-btn--ghost:hover{background:var(--vb-purple-100,#E9DEF1)}
/* Small variant */
.vbs-btn--sm{padding:.5em .85em .35em;font-size:.8rem}