/* assets/css/intranet.css
   Cleaned + deduplicated + fixed mobile sidebar scroll
   - LOGIN: body.intranet (dark ether)
   - HUB:   body.hub (light mode) + off-canvas sidebar
*/

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

  /* Brand accent */
  --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;

  /* Topbar height used to align sidebar content on desktop */
  --hub-topbar-h: 64px;
  --hub-sidebar-pad-top: 14px;

  /* Mobile sidebar header height (the row with close/menu) */
  --hub-sidebar-top-h: 56px;
}
/* Default = USER (green) */
.hub-user.role-user .hub-role-badge{
  background-color: #16a34a;
  color: #ffffff;
}

/* ADMIN (blue) */
.hub-user.role-admin .hub-role-badge{
  background-color: #2563eb;
  color: #ffffff;
}

/* SUPERADMIN (red) */
.hub-user.role-superadmin .hub-role-badge{
  background-color: #dc2626;
  color: #ffffff;
}

/* Optional polish */
.hub-role-badge{
  padding: .35rem .6rem;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 999px;
}

/* Avatar dropdown: remove Bootstrap caret so the circle feels centered */
.hub-avatar.dropdown-toggle::after{
  display:none !important;
}
.hub-avatar img{
  width:100%;
  height:100%;
  display:block;

  object-fit: cover;
  object-position: var(--ax, 50%) var(--ay, 18%);
  transform: scale(var(--az, 1.28));
  transform-origin: var(--ax, 50%) var(--ay, 18%);
}

*{ box-sizing:border-box; }
.hub-user.role-user .hub-user-name{
  color: #15803d;
}

.hub-user.role-admin .hub-user-name{
  color: #1d4ed8;
}

.hub-user.role-superadmin .hub-user-name{
  color: #b91c1c;
}

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 container */
#root{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Content above ether */
body.intranet .scene,
body.intranet #glass{
  position: relative;
  z-index: 2;
}

/* Center login layout */
body.intranet .scene{
  min-height: 100svh;
  width: 100%;
  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 */
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%);
}
body.intranet .glass::before,
body.intranet .glass::after{ display:none !important; }

@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 */
body.intranet .visual{
  position:relative;
  overflow:hidden;
  min-height: 380px;
  background:
    radial-gradient(620px 340px at 100% 0%, rgba(255,255,255,.08), transparent 40%),
    url('/assets/img/intranet/login-bg.jpg') center/cover no-repeat;
}
body.intranet .visual::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,10,18,.08), rgba(7,10,18,.65));
}

/* 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;
}

/* =========================
   HUB SIDEBAR (desktop base)
   ========================= */
.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;

  /* IMPORTANT: sidebar itself should not scroll */
  overflow: hidden;
}
.hub-sidebar-inner{
  padding: 14px 14px 18px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Optional top row (shown on mobile) */
.hub-sidebar-top{
  display:none;
  padding:10px 12px;
  border-bottom:1px solid rgba(17,24,39,.10);
}

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

/* 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 submenu
   ========================================================= */
.hub-nav-collapsible{ margin: 4px 0 0; }

.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);
}
.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);
}
.hub-nav-caret{
  margin-left:auto;
  font-size:.9rem;
  opacity:.75;
  transition: transform .18s ease;
}
.hub-nav-sub{
  margin: 6px 0 0 0;
  padding: 6px 0 6px 10px;
  border-left: 1px solid rgba(17,24,39,.10);
  display: none;
}
.hub-nav-collapsible.open .hub-nav-sub{ display:block; }
.hub-nav-collapsible.open .hub-nav-caret{ transform: rotate(180deg); }

.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);
}
.hub-nav-subitem.active{
  background: rgba(209,26,42,.10);
  border-color: rgba(209,26,42,.22);
  color:#111827;
}

@media (max-width: 991.98px){
  .hub-nav-sub{ padding-left: 8px; }
}

/* =========================
   HUB MAIN CONTENT
   ========================= */
.hub-main{
  margin-left: var(--hub-sidebar-w);
  min-height:100vh;
  padding: var(--hub-pad) var(--hub-pad) 40px;
  background: transparent;
}

/* 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 */
.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 -
 aligned
   ========================================================= */
body.hub .hub-footer{
  margin-left: 0;
  background: transparent;
  border: 0;
  padding: 0 var(--hub-pad) var(--hub-pad);
}
@media (min-width: 992px){
  body.hub .hub-footer{
    padding-left: calc(var(--hub-sidebar-w) + var(--hub-pad));
    padding-right: var(--hub-pad);
  }
}
body.hub .hub-footer-inner{ overflow: hidden; }
body.hub .hub-footer-accent{
  display:block;
  height: 4px;
  width: calc(100% + 36px);
  margin: -18px -18px 16px;
}
body.hub .hub-footer .text-muted{ color: rgba(17,24,39,.65) !important; }

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;
}
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);
}
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 + SCROLL FIX
   ========================================================= */
@media (max-width: 991.98px){
  .hub-main{ margin-left:0; }

  .hub-sidebar{
    width: 280px;
    max-width: 86vw;
    transform: translateX(-110%);
    top: 0;
    bottom: 0;
    height: auto;                 /* use top/bottom */
    overflow: hidden;             /* sidebar clips */
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  body.hub-sidebar-open .hub-sidebar{ transform: translateX(0); }

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

  /* Lock page behind the menu */
  body.hub-sidebar-open{
    overflow: hidden;
    height: 100%;
  }

  /* Show mobile header inside sidebar */
  .hub-sidebar-top{
    display:block;
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* ONLY scroll container */
  .hub-sidebar-inner{
    height: calc(100dvh - var(--hub-sidebar-top-h));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }

  /* Footer padding on mobile */
  body.hub .hub-footer{
    padding-left: 12px;
    padding-right: 12px;
  }
  body.hub .hub-footer-inner{ border-radius: 16px; }
}

/* =========================================================
   Helpful overrides when dark utility classes exist
   ========================================================= */
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 .text-white-60{ color: rgba(200,214,246,0.90) !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 readable even if dark utilities exist */
body.hub .hub-footer,
body.hub .hub-footer *{ color: inherit; }
body.hub .hub-footer-inner{ color: #111827; }
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 (dark panels)
   ========================================================= */
body.hub .dash-section,
body.hub .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%) !important;
  color: #e5e7eb !important;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
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; }

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

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 panels */
body.hub .hub-panel{
  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);
}
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; }

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;
}
body.hub .hub-panel .small.text-uppercase{
  letter-spacing: .18em;
  color: rgba(226,232,240,.9) !important;
}

/* Reader (document view) */
.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); }

/* Scheduler */
.slot{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  pointer-events:none; /* let the <td> receive mouse events */
}
table.scheduler{ user-select: none; }

/* Optional search styling helper */
.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);
}

/* =========================================================
   BSA DASHBOARD (public-homepage vibe)
   Scope: body.hub .bsa-dashboard ...
   ========================================================= */
body.hub .bsa-dashboard{
  --dash-bg: #fbf7f2;
  --dash-card: rgba(255,255,255,.86);
  --dash-border: rgba(17,24,39,.12);
  --dash-ink: #0f172a;
  --dash-muted: rgba(15,23,42,.70);
  --dash-shadow: 0 20px 60px rgba(15,23,42,.14);
  --dash-radius: 22px;
  --dash-accent: var(--in-brand);
}

/* warm background only when wrapped in .bsa-dashboard */
body.hub .bsa-dashboard .hub-main{ background: var(--dash-bg); }

/* dashboard hero as pure image */
body.hub .bsa-dashboard .hub-hero{
  min-height: min(70vh, 560px);
  background: url('/assets/img/intranet/e2.jpg') center/cover no-repeat !important;
}
body.hub .bsa-dashboard .hub-hero::before,
body.hub .bsa-dashboard .hub-hero::after{
  display:none !important;
  content:none !important;
}
body.hub .bsa-dashboard .hub-hero .hero-card{
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* light “website style” panels on dashboard */
body.hub .bsa-dashboard .hub-panel,
body.hub .bsa-dashboard .dash-section,
body.hub .bsa-dashboard .dash-events-card{
  background: var(--dash-card) !important;
  color: var(--dash-ink) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius);
  box-shadow: var(--dash-shadow);
}

/* undo dark text overrides inside dashboard panels */
body.hub .bsa-dashboard .hub-panel .text-white-50,
body.hub .bsa-dashboard .hub-panel .muted,
body.hub .bsa-dashboard .hub-panel small,
body.hub .bsa-dashboard .hub-panel p,
body.hub .bsa-dashboard .hub-panel li{
  color: var(--dash-muted) !important;
}

body.hub .bsa-dashboard .hub-title,
body.hub .bsa-dashboard .hub-panel h2,
body.hub .bsa-dashboard .hub-panel h3{
  color: var(--dash-ink) !important;
}

/* buttons in dashboard */
body.hub .bsa-dashboard .btnx{
  border-radius: 999px;
  font-weight: 900;
}
body.hub .bsa-dashboard .btn-outline-light{
  color: var(--dash-ink) !important;
  border-color: rgba(17,24,39,.18) !important;
  background: rgba(255,255,255,.92) !important;
}
body.hub .bsa-dashboard .btn-outline-light:hover{
  background: rgba(17,24,39,.04) !important;
}
body.hub .bsa-dashboard .btn-light{
  background: linear-gradient(135deg, var(--dash-accent), var(--in-brand-2));
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 16px 40px rgba(209,26,42,.82);
}
body.hub .bsa-dashboard .btn-light:hover{ filter: saturate(110%); }

/* dashboard chips */
body.hub .bsa-dashboard .hub-chip,
body.hub .bsa-dashboard .cal-chip,
body.hub .bsa-dashboard .event-tag{
  background: rgba(209,26,42,.38);
  border-color: rgba(209,26,42,.22);
  color: rgba(15,23,42,.86);
}

/* stats bar */
body.hub .bsa-statsbar{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:0;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
}
body.hub .bsa-statsbar .bsa-stat{
  padding: 16px 18px;
  min-width:0;
  position: relative;
}
body.hub .bsa-statsbar .bsa-stat:not(:first-child){
  border-left: 1px solid rgba(17,24,39,.10);
}
body.hub .bsa-statsbar .k{
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(15,23,42,.60);
  margin-bottom: 6px;
  font-weight: 800;
}
body.hub .bsa-statsbar .v{
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 950;
  line-height: 1.05;
  color: #0b1220;
}
body.hub .bsa-statsbar .s{
  margin-top: 6px;
  font-size: .9rem;
  color: rgba(15,23,42,.70);
}
@media (max-width: 991.98px){
  body.hub .bsa-statsbar{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hub .bsa-statsbar .bsa-stat:not(:first-child){ border-left: 0; }
  body.hub .bsa-statsbar .bsa-stat:nth-child(n+3){ border-top: 1px solid rgba(17,24,39,.10); }
  body.hub .bsa-statsbar .bsa-stat:nth-child(2n){ border-left: 1px solid rgba(17,24,39,.10); }
}

/* premium list rows / action list / events list */
body.hub .bsa-dashboard .hub-panel{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 22px;
  box-shadow:
    0 22px 70px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
  overflow:hidden;
}
body.hub .bsa-dashboard .hub-panel-h{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background:
    radial-gradient(800px 280px at 20% 0%, rgba(209,26,42,.06), transparent 55%),
    rgba(255,255,255,.72);
}
body.hub .bsa-dashboard .hub-title{
  margin:0;
  font-weight: 950;
  letter-spacing: -.02em;
  color: #0b1220 !important;
}
body.hub .bsa-dashboard .hub-sub{
  margin-top: 4px;
  color: rgba(15,23,42,.68);
  font-size: .95rem;
}
body.hub .bsa-dashboard .hub-panel .panel-body{ padding: 18px 20px; }

body.hub .bsa-dashboard .dash-list,
body.hub .bsa-dashboard .action-list,
body.hub .bsa-dashboard .events-list{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.72);
}

body.hub .bsa-dashboard .dash-row,
body.hub .bsa-dashboard .action-link,
body.hub .bsa-dashboard .event-row{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 14px 14px;
}
body.hub .bsa-dashboard .dash-row + .dash-row,
body.hub .bsa-dashboard .action-link + .action-link,
body.hub .bsa-dashboard .event-row + .event-row{
  border-top: 1px solid rgba(15,23,42,.08);
}

body.hub .bsa-dashboard .dash-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  background: rgba(209,26,42,.08);
  border: 1px solid rgba(209,26,42,.16);
  color: rgba(15,23,42,.85);
}
body.hub .bsa-dashboard .dash-row h3{
  font-size: 1rem;
  margin: 0;
  font-weight: 900;
  color: #0b1220;
}
body.hub .bsa-dashboard .dash-row p{
  margin: 4px 0 0;
  color: rgba(15,23,42,.70);
  font-size: .95rem;
}
body.hub .bsa-dashboard .action-link{
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  color:#0b1220;
  font-weight: 850;
}
body.hub .bsa-dashboard .action-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
body.hub .bsa-dashboard .action-left i{ opacity:.9; }
body.hub .bsa-dashboard .action-meta{
  font-weight: 650;
  color: rgba(15,23,42,.65);
  font-size: .9rem;
  white-space: nowrap;
}
body.hub .bsa-dashboard .action-link:hover{
  background: rgba(15,23,42,.03);
}
body.hub .bsa-dashboard .status-strip{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(15,23,42,.20);
  background: rgba(255,255,255,.68);
  color: rgba(15,23,42,.78);
  font-weight: 750;
  font-size: .9rem;
}
body.hub .bsa-dashboard .event-when{
  color: rgba(15,23,42,.62);
  font-size: .9rem;
  margin-bottom: 2px;
}
body.hub .bsa-dashboard .event-title{
  font-weight: 900;
  margin: 0;
  color:#0b1220;
}
body.hub .bsa-dashboard .event-sub{
  color: rgba(15,23,42,.70);
  font-size: .92rem;
  margin-top: 4px;
}
body.hub .bsa-dashboard .event-tag{
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 850;
}
/* === Address Book hero: photo background instead of gradient (Option B) === */
/* Tip: scope this to the address book page if possible (e.g. body.page-addressbook .hub-hero) */
.hub-hero{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  padding: 54px 18px; /* space around the hero card */
  min-height: 260px;
  display: grid;
  place-items: center;

  /* hero image */
  background: url("/assets/img/photos/bg2.jpg") center / cover no-repeat;

  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 18px 40px rgba(17,24,39,.08);
}
/* kill the old gradient overlay from the earlier .hub-hero */
.hub-hero::after{
  display:none !important;
  content:none !important;
}

/* darken + tint for readability (LESS wash, more photo clarity) */
.hub-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 520px at 20% 15%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.25), rgba(2,6,23,.60));
  pointer-events:none;
}

/* ensure hero content sits above overlay */
.hub-hero > *{
  position: relative;
  z-index: 1;
}

/* crisp glass card on top of photo */
.hub-hero .hero-card{
  background: rgba(20,20,24,.45);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(4px) saturate(110%);
  -webkit-backdrop-filter: blur(4px) saturate(110%);
}

/* make text readable on glass */
.hub-hero h1{
  color: rgba(255,255,255,.96) !important;
}
.hub-hero p,
.hub-hero .text-white-50{
  color: rgba(226,232,240,.82) !important;
}
.hub-hero .hero-pill{
  background: rgba(2,6,23,.42) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}
/* ==============================
   Sidebar separators (DO-style)
   ============================== */

:root{
  /* tweak these once and the whole sidebar updates */
  --hub-divider: rgba(255,255,255,.12);
  --hub-divider-strong: rgba(255,255,255,.16);
}

/* Group → group separators (the main “DigitalOcean” effect) */
.hub-nav .hub-nav-group{
  padding: 14px 0;         /* breathing room inside each group */
  margin: 0;               /* keep it tight/consistent */
}

.hub-nav .hub-nav-group + .hub-nav-group{
  border-top: 1px solid var(--hub-divider);
}

/* Optional: a subtle line under each label (looks very “SaaS dashboard”) */
.hub-nav .hub-nav-label{
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Standalone items that are direct children of nav (your Emergency Recovery link)
   Give them their own separator so they don’t feel “floating” between groups */
.hub-nav > .hub-nav-item{
  display: flex; /* in case you rely on flex alignment */
}

.hub-nav > .hub-nav-item{
  margin: 14px 0;
  padding-top: 14px;
  border-top: 1px solid var(--hub-divider);
}

/* If the first direct-child item appears (rare), don’t add a line above it */
.hub-nav > .hub-nav-item:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Optional: dividers inside submenus (very subtle, only between blocks) */
.hub-nav .hub-nav-sub{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Optional: slightly stronger divider before "Links" (last group) */
.hub-nav .hub-nav-group:last-of-type{
  border-top: 1px solid var(--hub-divider-strong);
}
.text-white-502{ color: rgba(226,232,240) !important; }