/* ================================================================
   INDEX'SUN — Hub Switcher (top navbar)
   Sticky bar at the top of every hub page
   ================================================================ */

.index-sun-bar{
  position:sticky;
  top:0;
  z-index:200;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:.5rem 1rem;
  display:flex;
  align-items:center;
  gap:1rem;
  font-family:var(--font-thai,'IBM Plex Sans Thai',sans-serif);
  min-height:48px;
  backdrop-filter:blur(8px);
}

/* Brand (left side) */
.is-brand{
  display:flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.01em;
  flex-shrink:0;
}
.is-brand:hover{opacity:.85}

.is-brand-mark{
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--master);
  color:#fff;
  border-radius:50%;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.02em;
  flex-shrink:0;
  position:relative;
}

/* 8-ray sunburst effect via pseudo-element */
.is-brand-mark::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:conic-gradient(var(--master) 0 10deg,transparent 10deg 45deg,
                            var(--master) 45deg 55deg,transparent 55deg 90deg,
                            var(--master) 90deg 100deg,transparent 100deg 135deg,
                            var(--master) 135deg 145deg,transparent 145deg 180deg,
                            var(--master) 180deg 190deg,transparent 190deg 225deg,
                            var(--master) 225deg 235deg,transparent 235deg 270deg,
                            var(--master) 270deg 280deg,transparent 280deg 315deg,
                            var(--master) 315deg 325deg,transparent 325deg 360deg);
  opacity:.28;
  z-index:-1;
}

.is-brand-text{
  font-family:var(--font-mono,monospace);
  letter-spacing:.06em;
  font-weight:700;
}
.is-brand-sub{
  font-size:.7rem;
  color:var(--text2);
  font-weight:500;
  margin-left:.3rem;
}

.is-sep{
  color:var(--border);
  font-weight:300;
  opacity:.6;
  flex-shrink:0;
}

/* Tabs (center/right) */
.is-tabs{
  display:flex;
  gap:.25rem;
  margin-left:auto;
  flex-wrap:wrap;
  align-items:center;
}

.is-tab{
  padding:.4rem .8rem;
  border-radius:var(--r-md,8px);
  font-size:.82rem;
  font-weight:500;
  text-decoration:none;
  color:var(--text2);
  border:1px solid transparent;
  background:transparent;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:all .15s;
  cursor:pointer;
  font-family:inherit;
  line-height:1.2;
}

.is-tab:hover{
  color:var(--text);
  background:var(--surface-2,rgba(0,0,0,.04));
}

.is-tab.active{
  color:#fff;
  background:var(--tab-accent,var(--accent));
  border-color:var(--tab-accent,var(--accent));
  box-shadow:var(--shadow-sm);
}

.is-tab-mono{
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;
  font-size:.62rem;
  font-weight:700;
  background:var(--tab-accent,var(--text2));
  color:#fff;
  flex-shrink:0;
  transition:background .15s;
}

.is-tab.active .is-tab-mono{
  background:rgba(255,255,255,.25);
}
.is-tab:not(.active) .is-tab-mono{
  opacity:.85;
}

/* Per-tab accent colors */
.is-tab[data-hub="mtl"]{--tab-accent:#7a4aa2}
.is-tab[data-hub="law"]{--tab-accent:#c85a3a}
.is-tab[data-hub="invest"]{--tab-accent:#1a5f3e}
.is-tab[data-hub="health"]{--tab-accent:#c94f6d}

html.dark .is-tab[data-hub="mtl"]{--tab-accent:#b68fd0}
html.dark .is-tab[data-hub="law"]{--tab-accent:#e09070}
html.dark .is-tab[data-hub="invest"]{--tab-accent:#4d9874}
html.dark .is-tab[data-hub="health"]{--tab-accent:#e68aa0}

/* Right-side utility actions (theme toggle etc.) */
.is-actions{
  display:flex;
  gap:.3rem;
  align-items:center;
  margin-left:.8rem;
  padding-left:.8rem;
  border-left:1px solid var(--border);
}

.is-icon-btn{
  width:32px;height:32px;
  border:1px solid var(--border);
  background:transparent;
  border-radius:var(--r-md,8px);
  color:var(--text2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
  font-size:.95rem;
}
.is-icon-btn:hover{color:var(--text);border-color:var(--text2);background:var(--bg)}

/* Layout helper: page has switcher → reserve full column */
body.has-switcher{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}
body.has-switcher .app{
  flex:1;
  min-height:0;
  height:auto;
  overflow:hidden;
}

/* Portal page has no internal-scroll .app — needs natural document scroll */
body.has-switcher.hub-portal,
body.has-switcher.hub-health{
  display:block;
  height:auto;
  min-height:100vh;
  overflow:visible;
}

/* Mobile */
@media (max-width:640px){
  .index-sun-bar{padding:.4rem .6rem;gap:.5rem}
  .is-brand-sub{display:none}
  .is-tab-label{display:none}
  .is-tab{padding:.4rem .55rem}
  .is-actions{margin-left:.3rem;padding-left:.3rem}
}

@media (max-width:420px){
  .is-brand-text{display:none}
}

/* Print — hide switcher */
@media print{
  .index-sun-bar{display:none !important}
  body.has-switcher{display:block;height:auto;overflow:visible}
  body.has-switcher .app{height:auto;overflow:visible}
}