/* =========================================================
   TRUSTYBULL OS — VISUAL LAW v1.1 (INSTITUTIONAL CALM)
========================================================= */

/* -------------------------------
   ROOT TOKENS (MINIMAL & SAFE)
-------------------------------- */

:root {
  --tb-bg-main: #f8fafc;
  --tb-bg-soft: #eef2f7;
  --tb-surface: #ffffff;

  --tb-text-main: #0f172a;
  --tb-text-muted: #64748b;
  --tb-text-soft: #94a3b8;

  --tb-border-light: #e5e7eb;
  --tb-border-soft: #e2e8f0;

  --tb-accent-main: #334155;        /* slate */
  --tb-accent-soft: #cbd5e1;
  --tb-accent-ink: #0f172a;

  --tb-positive: #16a34a;
  --tb-danger: #b91c1c;
}

/* -------------------------------
   GLOBAL RESET
-------------------------------- */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#05070d;
  font-family:Inter,system-ui,sans-serif;
  color:#4D4D4D;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE & Edge */
}
/* Chrome, Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none;
}

/* -------------------------------
   APP SHELL
-------------------------------- */

.app-shell{
  width:100%;
  min-height:100vh;
  display:block;
  background: var(--tb-bg-main);
  overflow:hidden;
}

/* -------------------------------
   MAIN CONTENT (DESKTOP)
-------------------------------- */

.main{
  margin-left:70px;                     /* icon rail width */
  width: calc(100% - 70px);
  min-height:100vh;
  padding: 48px 0 40px 0;          /* Netflix style breathing room */
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
  background: #000;
}

@media (max-width: 768px){

.main{
    margin-left:0 !important;
    width:100% !important;
    min-height: calc(100vh);
    padding: 65px 0px 50px 0px;
    box-sizing:border-box;
    overflow-y:auto;
    overflow-x:hidden;
  }
}

/* -------------------------------
   ICON RAIL (DESKTOP)
-------------------------------- */

.icon-rail{
  background:linear-gradient(
  to bottom,
  #020617,
  #000
);
  border-right:1px solid rgba(255,255,255,.08);
  padding:10px 0;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;

  width:70px;
  height:100vh;

  position:fixed;
  top:0;
  left:0;

  overflow:hidden;
  z-index:1000;
}

.icon-rail *{
  text-shadow:0 2px 6px rgba(0,0,0,.9);
}

/* base logo */
.icon-rail .tb-logo{
  width:48px;
  height:48px;
  margin:0 0 4px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;
  text-decoration:none;

  color:#e5e7eb;
  font-size:20px;

  position:relative;
  isolation:isolate;

  transition:all .25s ease;
}

/* subtle AI aura */
.icon-rail .tb-logo::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;



  opacity:.7;
  z-index:-1;
  transition:opacity .25s ease;
}

/* hover — intelligence wakes up */
.icon-rail .tb-logo:hover{
  color:#ffffff;
  transform:translateY(-1px);
}

.icon-rail .tb-logo:hover::before{
  opacity:1;
}

/* robot icon */
.icon-rail .tb-logo i{
  position:relative;
  z-index:1;
  text-shadow:
    0 0 12px rgba(255,255,255,.35),
    0 0 30px rgba(255,255,255,.15);

}

/* ===============================
   AI LIFE DOT (SUBTLE PULSE)
================================ */

/* tiny "AI dot" — always alive */
.icon-rail .tb-logo::after{
  content:"";
  position:absolute;
  bottom:6px;
  right:8px;

  width:6px;
  height:6px;
  border-radius:50%;

  background:#e5e7eb;
box-shadow:
  0 0 0 2px #000,
  0 0 12px rgba(255,255,255,.6);
  animation: tb-ai-pulse 1.6s ease-in-out infinite;
}

/* breathing pulse — NOT notification blink */
@keyframes tb-ai-pulse{
  0%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.35;
    transform:scale(.85);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}

.icon-rail .rail-bottom{ display:flex; flex-direction:column; gap:6px; align-items:center; }


/* Rail divider */
.rail-divider{
  width:38px;
  height:1px;
  background:rgba(255,255,255,.08);
  margin:8px 0;
}

/* -------------------------------
   ICON RAIL ITEM
-------------------------------- */

.icon-rail .rail-icon{
  width:56px;
  height:56px;
  border-radius:14px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  font-size:16px;
  text-decoration:none;

  color:rgba(255,255,255,.55);
  cursor:pointer;

  background:transparent;
  transition:.25s cubic-bezier(.4,0,.2,1);
}


.icon-rail .rail-icon span{
  font-size:9px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.icon-rail .rail-icon.active{
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.14),
    rgba(255,255,255,.04)
  );
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}

.icon-rail .rail-icon:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
  transform:translateY(-1px);
}


.icon-rail .logout{ color: var(--tb-danger); }

/* Desktop default: hide mobile-only icons */
.nav-mobile-only{ display:none !important; }

/* PREMIUM RAIL ICON — Muted  Red */
.rail-icon.premium i{
  color:#fff; /* muted red */
  text-shadow:0 0 10px rgba(229,9,20,.25);
}

/* Active state */
.rail-icon.premium.active{
  background:linear-gradient(135deg,#7f1d1d,#b91c1c); /* deeper, calmer red */
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(229,9,20,.25),
    0 10px 24px rgba(229,9,20,.30);
}

/* =========================================================
   ✅ MOBILE — ICON RAIL BOTTOM NAV MODE (KEEP THIS)
========================================================= */

@media (max-width: 900px){

  .icon-rail{
    position:fixed;
    top:auto !important;
    bottom:0;
    left:0;
    right:0;

    width:100%;
    height:69px;
    padding:10px 12px;

    flex-direction:row;
    justify-content:space-around;
    align-items:center;
    border-right:none;
    border-top:1px solid var(--tb-border-light);
    overflow:hidden;

    z-index:99999;
  }

  /* Hide desktop-only rail parts */
  .icon-rail .tb-logo,
  .icon-rail .rail-divider,
  .icon-rail .rail-bottom{
    display:none !important;
  }

  .icon-rail .rail-icon{
    width:58px;
    height:52px;
    font-size:22px;
    border-radius:16px;
  }

  .icon-rail .rail-icon span{ font-size:9px; }

  /* Show mobile-only icons */
  .nav-mobile-only{
    display:flex !important;
  }
}







#page-container{
  position:relative;
  overflow:hidden;
}

#page-content{
  position:relative;
  transition:
    transform .45s cubic-bezier(.4,0,.2,1),
    opacity .35s ease;
  will-change:transform, opacity;
}

.page-exit{
  transform:translateX(-12%);
  opacity:.4;
}

.page-enter{
  transform:translateX(100%);
  opacity:0;
}

.page-enter-active{
  transform:translateX(0);
  opacity:1;
}