/* assets/css/intranet.css
   Cleaned + deduplicated
   - LOGIN: body.intranet (dark ether)
   - HUB:   body.hub (light mode)
*/

/* =========================
   THEME TOKENS
   ========================= */
:root{
  --in-bg-1:#070A12;
  --in-bg-2:#0E1426;

  /* SCS vibe: red accent + cool dark base */
  --in-brand:#d11a2a;
  --in-brand-2:#ff4d5e;

  --in-text:#eef2ff;
  --in-muted:#b8c2dd;
  --in-focus:#7cc4ff;

  --in-radius: 22px;
  --in-shadow: 0 20px 60px rgba(0,0,0,.45);

  --hub-sidebar-w: 260px;
  --hub-pad: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* =========================================================
   LOGIN PAGE (body.intranet) — Dark Ether Mode
   ========================================================= */

body.intranet{
  margin:0;
  min-height:100svh;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#e5e7eb;
  background:#000;
  overflow-x:hidden;
}

/* Ether background layers: never affect layout */
body.intranet #root,
body.intranet #etherTint{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Ensure login content sits above ether layers */
body.intranet .scene,
body.intranet #glass{
  position: relative;
  z-index: 2;
}

/* Center the login layout properly */
body.intranet .scene{
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    calc(16px + env(safe-area-inset-top))
    16px
    calc(16px + env(safe-area-inset-bottom))
    16px;
}

/* Disable old effects if they still exist */
body.intranet .fog,
body.intranet .grid,
body.intranet .orb,
body.intranet .scene::before,
body.intranet .scene::after{
  display:none !important;
}

/* Glass card */
body.intranet .glass{
  width:min(980px, 100%);
  margin:0 auto;
  border-radius: 18px;
  overflow:hidden;

  display:grid;
  grid-template-columns: 1fr 1fr;

  background: rgba(15, 15, 18, 0.75);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.75);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);

  transform-origin: center center;
  will-change: transform;
}


@media (max-width: 991.98px){
  body.intranet .glass{ grid-template-columns: 1fr; }
  body.intranet .visual{ display:none !important; }
}

/* Panels */
body.intranet .panel{ padding: 42px; }

/* Brand */
body.intranet .brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}
body.intranet .logo-wrap{
  position:relative;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
body.intranet .logo{
  height:46px;
  width:auto;
  transform-origin:center;
  animation: logoFloat 6s ease-in-out infinite;
}
body.intranet .logo-wrap::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.18) 25%,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,.25) 75%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(6px) saturate(120%);
  animation: logoRing 8s linear infinite;
  pointer-events:none;
}
@keyframes logoFloat{ 0%{transform:translateY(0)} 50%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
@keyframes logoRing{ to{ transform: rotate(360deg);} }

body.intranet .brand h1{
  margin:0;
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing:.2px;
  background: linear-gradient(90deg, #fff 0%, #fff 35%, rgba(255,210,214,.95) 50%, #fff 65%, #fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size: 200% 100%;
}
body.intranet .brand h1.sweep{
  animation: shimmer 1.8s cubic-bezier(.2,.6,.2,1) 1 forwards;
}
@keyframes shimmer{ 0%{ background-position:-60% 50% } 100%{ background-position:160% 50% } }

body.intranet .tagline{
  color: rgba(184,194,221,.92);
  margin: 0 0 26px;
  font-size: 14px;

}

/* Inputs */
body.intranet .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
body.intranet .label{ font-weight:650; font-size:13px; color: rgba(184,194,221,.92); }

body.intranet .control{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
body.intranet .control input{
  width:100%;
  border:0;
  outline:0;
  padding: 14px 54px 14px 14px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  height: 52px;
}
body.intranet .control:focus-within{
  border-color: var(--in-focus);
  box-shadow: 0 0 0 3px rgba(124,196,255,.22), inset 0 1px 0 rgba(255,255,255,.10);
}

/* Password eye */
body.intranet .toggle-pass{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  width:40px;
  height:40px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  cursor:pointer;
  padding:0;
}
body.intranet .toggle-pass:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
body.intranet .toggle-pass:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}
body.intranet .toggle-pass.is-showing{
  background: rgba(255,255,255,.12);
}

/* Button */
body.intranet .btn-brand{
  width:100%;
  border:0;
  border-radius:14px;
  padding: 14px 18px;
  font-weight: 800;
  color:#fff;
  background: linear-gradient(135deg, var(--in-brand), var(--in-brand-2));
  box-shadow: 0 10px 28px rgba(209,26,42,.35), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .14s ease, filter .2s ease, box-shadow .2s ease;
}
body.intranet .btn-brand:hover{
  transform: translateY(-1px);
  filter:saturate(112%);
  box-shadow: 0 14px 34px rgba(209,26,42,.40);
}
body.intranet .btn-brand:active{ transform: translateY(0); }

body.intranet .mini{ color: rgba(184,194,221,.92); font-size: 12px; margin-top: 20px; }

/* Right-side visual (desktop only) */
body.intranet .visual{
  position: relative;
  overflow: hidden;

  /* IMPORTANT: make it fill the glass height */
  min-height: 100%;
  height: 100%;
  align-self: stretch;

  /* Match BSA-style photo treatment */
  background-image: url('/assets/img/intranet/login-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;

  /* 👇 This is the key: push the crop UP a bit like the BSA page */
  background-position: 50% 28%;
}

/* Dark vignette + soft gradient like your other site */
body.intranet .visual::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 520px at 30% 30%, rgba(255,255,255,.10), transparent 55%);
  pointer-events:none;
}

body.intranet .visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(7,10,18,.10) 0%, rgba(7,10,18,.65) 100%);
  pointer-events:none;
}

/* Error alert */
body.intranet .alert-glass{
  background: rgba(255,94,108,.12);
  color:#fff;
  border: 1px solid rgba(255,94,108,.35);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  backdrop-filter: blur(6px);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  body.intranet .logo,
  body.intranet .logo-wrap::after,
  body.intranet .brand h1.sweep{
    animation:none !important;
  }
}

/* =========================================================
   HUB (body.hub) — Light Mode
   ========================================================= */
body.hub{
  background:#f6f7fb;
  color:#111827;
  overflow-x:hidden;
}

/* Sidebar (desktop fixed, mobile off-canvas) */
.hub-sidebar{
  position:fixed;
  top:0; left:0;
  height:100vh;
  width: var(--hub-sidebar-w);
  z-index:1050;

  background: rgba(255,255,255,.82);
  border-right: 1px solid rgba(17,24,39,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transform: translateX(0);
  transition: transform .2s ease;
  overflow:hidden;
}
.hub-sidebar-inner{
  padding:14px 14px 18px;
  height:100%;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.hub-sidebar-top{
  display:none;
  padding:10px 12px;
  border-bottom:1px solid rgba(17,24,39,.10);
}

/* Sidebar brand/user/nav */
.hub-brand{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(17,24,39,.10);
}
.hub-brand-logo{ width:36px; height:36px; object-fit:contain; }
.hub-brand-title{ font-weight:900; letter-spacing:.3px; color:#111827; }
.hub-brand-sub{ font-size:.85rem; color: rgba(17,24,39,.60); }

.hub-user{ padding:12px 10px 0; }
.hub-user-name{ font-weight:800; }
.hub-user-meta{ display:flex; align-items:center; gap:10px; margin-top:8px; color: rgba(17,24,39,.60); }
.hub-logout{ color:#b91c1c; text-decoration:none; font-weight:700; }
.hub-logout:hover{ text-decoration:underline; }

/* Nav */
.hub-nav{ margin-top:14px; }
.hub-nav-group{ margin-top:14px; }
.hub-nav-label{
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(17,24,39,.55);
  margin:10px 8px;
}
.hub-nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#111827;
  text-decoration:none;
  border:1px solid transparent;
}
.hub-nav-item:hover{
  background: rgba(17,24,39,.04);
  border-color: rgba(17,24,39,.08);
}
.hub-nav-item.active{
  background: linear-gradient(90deg, rgba(209,26,42,.16), rgba(255,255,255,0));
  border-color: rgba(209,26,42,.28);
}
/* =========================================================
   HUB SIDEBAR — Collapsible "Guides" submenu
   ========================================================= */
/* --- Align sidebar content with topbar on desktop --- */
:root{
  --hub-topbar-h: 64px;     /* adjust if your topbar is taller */
  --hub-sidebar-pad-top: 14px;
}

@media (min-width: 992px){ /* lg+ */
  .hub-sidebar .hub-sidebar-inner{
    padding-top: calc(var(--hub-topbar-h) + var(--hub-sidebar-pad-top));
  }
}

.hub-nav-collapsible{
  margin: 4px 0 0;
}

/* The toggle looks like a normal nav item */
.hub-nav-toggle{
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#111827;
  border:1px solid transparent;
}

.hub-nav-toggle:hover{
  background: rgba(17,24,39,.04);
  border-color: rgba(17,24,39,.08);
}

/* When "Guides" is active (any child page active) */
.hub-nav-toggle.active{
  background: linear-gradient(90deg, rgba(209,26,42,.16), rgba(255,255,255,0));
  border-color: rgba(209,26,42,.28);
}

/* caret on the right */
.hub-nav-caret{
  margin-left:auto;
  font-size:.9rem;
  opacity:.75;
  transition: transform .18s ease;
}

/* Submenu container */
.hub-nav-sub{
  margin: 6px 0 0 0;
  padding: 6px 0 6px 10px;
  border-left: 1px solid rgba(17,24,39,.10);
  display: none;
}

/* Open state shows submenu */
.hub-nav-collapsible.open .hub-nav-sub{
  display:block;
}
.hub-nav-collapsible.open .hub-nav-caret{
  transform: rotate(180deg);
}

/* Sub items */
.hub-nav-subitem{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  margin: 4px 0;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(17,24,39,.88);
  border: 1px solid transparent;
}

.hub-nav-subitem i{
  width: 18px;
  text-align:center;
  opacity:.85;
}

.hub-nav-subitem:hover{
  background: rgba(17,24,39,.035);
  border-color: rgba(17,24,39,.07);
}

/* Active sub item */
.hub-nav-subitem.active{
  background: rgba(209,26,42,.10);
  border-color: rgba(209,26,42,.22);
  color:#111827;
}

/* Slightly tighter on very small screens */
@media (max-width: 991.98px){
  .hub-nav-sub{
    padding-left: 8px;
  }
}

/* Main content area */
.hub-main{
  margin-left: var(--hub-sidebar-w);
  min-height:100vh;
  padding: var(--hub-pad) var(--hub-pad) 40px;
  background: transparent;
}

/* Mobile topbar */
.hub-topbar{
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(17,24,39,.10);
}
.hub-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: .75rem 1rem;
}
.hub-topbar-title{
  font-weight: 900;
  letter-spacing: -.02em;
  color: #111827;
  font-size: .95rem;
}

/* Burger button */
.hub-burger{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(17,24,39,.03);
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.35rem;
  cursor:pointer;
}
.hub-burger:active{ transform: scale(.96); }

/* Hero (light vibe) */
.hub-hero{
  border-radius:18px;
  overflow:hidden;
  position:relative;
  min-height:260px;
  display:grid;
  place-items:center;

  background:
    radial-gradient(900px 420px at 30% 20%, rgba(209,26,42,.18), transparent 60%),
    radial-gradient(900px 420px at 70% 0%, rgba(76,110,245,.14), transparent 60%),
    linear-gradient(135deg, #ffffff, #f6f7fb 65%, #ffffff);

  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 18px 40px rgba(17,24,39,.08);
}
.hub-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,.65));
}
.hub-hero .hero-card{
  position:relative; z-index:1;
  max-width:720px;
  text-align:center;
  padding:22px 22px;
  border-radius:16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,24,39,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hub-hero .hero-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(17,24,39,.04);
  border: 1px solid rgba(17,24,39,.10);
  margin-bottom:10px;
  color:#111827;
}
.hub-hero h1{ font-weight:900; margin:0 0 8px; color:#111827; }
.hub-hero p{ margin:0 0 14px; color: rgba(17,24,39,.75); opacity:1; }

/* =========================================================
   HUB FOOTER — Perfectly aligned + centered
   ========================================================= */

/* Outer footer area matches hub column */
body.hub .hub-footer{
  margin-left: 0;                  /* IMPORTANT: do not shift the footer box */
  background: transparent;
  border: 0;
  padding: 0 var(--hub-pad) var(--hub-pad);
}

/* On desktop, mimic the main column offset via padding */
@media (min-width: 992px){
  body.hub .hub-footer{
    padding-left: calc(var(--hub-sidebar-w) + var(--hub-pad));
    padding-right: var(--hub-pad);
  }
}

/* Footer “card” */
body.hub .hub-footer-inner{
  overflow: hidden;              /* keep accent clipped to rounded corners */
}

body.hub .hub-footer-accent{
  display:block;
  height: 4px;
  width: calc(100% + 36px);      /* 18px left + 18px right padding */
  margin: -18px -18px 16px;      /* pull it to the card edges */
}

/* Text helpers inside footer */
body.hub .hub-footer .text-muted{ color: rgba(17,24,39,.65) !important; }

/* Footer links */
body.hub .hub-footer-links li{ margin:.28rem 0; }
body.hub .hub-footer-links a{
  color: rgba(17,24,39,.78);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.22rem .25rem;
  border-radius:10px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  min-width:0;
}
body.hub .hub-footer-links a:hover{
  color: rgba(17,24,39,1);
  background: rgba(17,24,39,.04);
  transform: translateX(2px);
}
body.hub .hub-footer-links .bi{
  font-size: 1rem;
  opacity:.9;
  color: rgba(209,26,42,.90);
}
body.hub .hub-footer-links a .link-text{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Muted mail link */
body.hub .hub-footer-mutedlink{
  color: rgba(209,26,42,.92);
  text-decoration:none;
  border-bottom: 1px dashed rgba(209,26,42,.35);
}
body.hub .hub-footer-mutedlink:hover{
  color: rgba(209,26,42,1);
  border-bottom-color: rgba(209,26,42,.6);
}

/* Back-to-top link */
body.hub .hub-footer-toplink{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  text-decoration:none;
}
body.hub .hub-footer-toplink:hover{ text-decoration: underline; }

/* =========================================================
   MOBILE: sidebar off-canvas + content full width
   ========================================================= */
@media (max-width: 991.98px){
  .hub-main{ margin-left:0; }

  .hub-sidebar{
    width:280px;
    max-width:86vw;
    transform: translateX(-110%);
  }
  body.hub-sidebar-open .hub-sidebar{
    transform: translateX(0);
  }

  body.hub-sidebar-open::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
  }
  body.hub-sidebar-open{
    overflow: hidden;
  }

  .hub-sidebar-top{ display:block; }

  body.hub .hub-footer{
    padding-left: 12px;
    padding-right: 12px;
  }
  body.hub .hub-footer-inner{
    border-radius: 16px;
  }
}

/* =========================================================
   Helpful overrides when you used dark utility classes
   ========================================================= */
body.hub .bg-black{ background-color: transparent !important; }
body.hub .bg-opacity-50,
body.hub .bg-opacity-25{
  background-color: rgba(255,255,255,.72) !important;
}
body.hub .border-light{ border-color: rgba(17,24,39,.10) !important; }
body.hub .border-opacity-10{ border-opacity: 1 !important; }

body.hub .text-white-50{ color: rgba(17,24,39,.65) !important; }
body.hub .link-light{ color: rgba(17,24,39,.92) !important; }

body.hub .btn-outline-light{
  color:#111827 !important;
  border-color: rgba(17,24,39,.18) !important;
}
body.hub .btn-outline-light:hover{
  background: rgba(17,24,39,.04) !important;
}

/* Tables */
body.hub .table-dark{
  --bs-table-bg: rgba(255,255,255,.85) !important;
  --bs-table-striped-bg: rgba(17,24,39,.03) !important;
  --bs-table-hover-bg: rgba(17,24,39,.04) !important;
  color:#111827 !important;
}
body.hub .table-dark thead th{
  color: rgba(17,24,39,.7) !important;
}
body.hub .table-dark td,
body.hub .table-dark th{ border-color: rgba(17,24,39,.0) !important; }
/* Force footer text to be readable even if old dark-theme utility classes exist */
body.hub .hub-footer,
body.hub .hub-footer *{
  color: inherit;
}

body.hub .hub-footer-inner{
  color: #111827; /* slate-900 */
}

body.hub .hub-footer .text-white,
body.hub .hub-footer .text-white-50,
body.hub .hub-footer .link-light{
  color: rgba(17,24,39,.75) !important;
}
body.hub .hub-footer a{
  color: rgba(17,24,39,.78);
}
body.hub .hub-footer a:hover{
  color: rgba(17,24,39,1);
}

/* === Dashboard contrast fixes === */

/* Main dark panels */
.dash-section,
.dash-events-card {
  background: radial-gradient(circle at top, rgba(255,255,255,.06) 0, rgba(5,10,25,.96) 40%, rgba(3,7,18,1) 100%);
  color: #e5e7eb;
}

/* Section headings */
.dash-section h3,
.dash-section-title,
.dash-events-title {
  color: #f9fafb;
}

/* Body text inside the cards */
.dash-section .text-body,
.dash-section p,
.dash-section li,
.dash-events-card p {
  color: rgba(226,232,240,.92);
}

/* “Empty state” messages like
   “No upcoming events in the intranet calendar yet…” */
.dash-empty,
.dash-section .muted,
.dash-events-card .muted {
  color: rgba(148,163,184,.9);
}

/* The little table-name hint at the bottom was too neon – make it softer */
.dash-empty code {
  color: #f97373;          /* softer pink */
  opacity: .9;
}

/* Tabs */
.dash-tab-pill {
  color: rgba(226,232,240,.9);
  border-color: rgba(148,163,184,.6);
}
.dash-tab-pill.active {
  background: rgba(248,250,252,.98);
  color: #020617;
  border-color: transparent;
}
/* === Dashboard: dark cards override the global light helpers === */
body.hub .dash-section,
body.hub .dash-events-card {
  /* beat .bg-black/.bg-opacity-50 + !important */
  background: radial-gradient(circle at top,
              rgba(255,255,255,.06) 0,
              rgba(5,10,25,.96) 40%,
              rgba(3,7,18,1) 100%) !important;
  color: #e5e7eb !important;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
/* Text inside dark dashboard panels */
body.hub .dash-section h2,
body.hub .dash-section h3,
body.hub .dash-section-title,
body.hub .dash-events-title {
  color: #f9fafb !important;
}

body.hub .dash-section p,
body.hub .dash-section .text-white-50,
body.hub .dash-section .muted,
body.hub .dash-section li,
body.hub .dash-events-card p,
body.hub .dash-events-card .text-white-50,
body.hub .dash-events-card .muted {
  color: rgba(226,232,240,.92) !important;
}

/* Empty state lines */
body.hub .dash-empty {
  color: rgba(148,163,184,.9) !important;
}
body.hub .dash-empty code {
  color: #f97373 !important;
  opacity: .9;
}

/* Tabs for dashboard section */
body.hub .dash-tab-pill {
  color: rgba(226,232,240,.9);
  border-color: rgba(148,163,184,.6);
}
body.hub .dash-tab-pill.active {
  background: rgba(248,250,252,.98);
  color: #020617;
  border-color: transparent;
}
/* === Dark hub-panel fixes (dashboard, quick links, events) === */

body.hub .hub-panel {
  /* make it explicit these are dark cards */
  background:rgba(3,7,18,1) 100%) !important;
  color: #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

/* Any muted/secondary text inside dark panels should be light */
body.hub .hub-panel .text-white-50,
body.hub .hub-panel .text-muted,
body.hub .hub-panel .text-body-secondary,
body.hub .hub-panel .muted,
body.hub .hub-panel small {
  color: rgba(226,232,240,.86) !important;
}

/* Buttons inside dark panels need to be light, not slate */
body.hub .hub-panel .btn-outline-light {
  color: #e5e7eb !important;
  border-color: rgba(148,163,184,.7) !important;
  background: rgba(15,23,42,.6) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
}

body.hub .hub-panel .btn-outline-light:hover {
  background: rgba(30,64,175,.85) !important;
  border-color: rgba(191,219,254,.9) !important;
}

/* Make the tiny all-caps section labels readable too */
body.hub .hub-panel .small.text-uppercase {
  letter-spacing: .18em;
  color: rgba(226,232,240,.9) !important;
}
.reader {
  max-width: 880px;
  margin: 0 auto;
  line-height: 1.65;
  font-size: 0.98rem;
}

.reader h1, .reader h2, .reader h3 {
  margin-top: 1.2rem;
  margin-bottom: .6rem;
  font-weight: 700;
}

.reader p { margin: .6rem 0; }
.reader ul, .reader ol { padding-left: 1.2rem; }
.reader li { margin: .25rem 0; }

.reader hr {
  border: 0;
  border-top: 1px solid rgba(0,0,0,.08);
  margin: 1.2rem 0;
}

.reader blockquote {
  border-left: 3px solid rgba(0,0,0,.15);
  padding-left: .9rem;
  color: rgba(0,0,0,.75);
}

.reader code {
  padding: .15rem .35rem;
  border-radius: 6px;
  background: rgba(0,0,0,.05);
}

.reader pre {
  background: rgba(0,0,0,.05);
  padding: 1rem;
  border-radius: 12px;
  overflow: auto;
}

.reader table {
  width: 100%;
  border-collapse: collapse;
  margin: .8rem 0;
}
.reader th, .reader td {
  border: 1px solid rgba(0,0,0,.08);
  padding: .5rem .6rem;
  vertical-align: top;
}
.reader th { background: rgba(0,0,0,.03); }
.slot {
  width:100%; height:100%;
  border:0; background:transparent;
  pointer-events:none; /* ✅ IMPORTANT: let the <td> receive mouse events */
}
table.scheduler { user-select: none; }

  .hub-search{ margin:.9rem 0 1rem; }
  .hub-search .form-control::placeholder{ color: rgba(226,232,240,.55); }
  .hub-search .form-control:focus{
    box-shadow:none;
    border-color: rgba(248,250,252,.35);
  }