/* ORBITCODE LAB V7 — explicit Light, Dark, and System themes.
   Loaded last so it can safely correct the compiled application and the
   mobile navigation without changing the React build. */

:root{
  --orbit-transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease,filter .28s ease;
}

html{color-scheme:dark}
html.light{color-scheme:light}
html.dark{color-scheme:dark}

/* Explicit Dark: cinematic midnight + cyan/orange. */
html.dark:not(.system){
  --background:226 48% 5%;
  --foreground:201 45% 96%;
  --card:224 42% 8%;
  --card-foreground:201 45% 96%;
  --popover:224 42% 7%;
  --popover-foreground:201 45% 96%;
  --primary:190 100% 50%;
  --primary-foreground:226 48% 5%;
  --secondary:22 100% 55%;
  --secondary-foreground:0 0% 100%;
  --muted:223 30% 14%;
  --muted-foreground:210 18% 72%;
  --accent:266 86% 65%;
  --accent-foreground:0 0% 100%;
  --border:219 30% 23%;
  --input:222 32% 13%;
  --ring:190 100% 50%;
}

/* Explicit Light: bright porcelain + high-contrast ink. */
html.light:not(.system){
  --background:210 38% 98%;
  --foreground:222 52% 12%;
  --card:0 0% 100%;
  --card-foreground:222 52% 12%;
  --popover:0 0% 100%;
  --popover-foreground:222 52% 12%;
  --primary:193 100% 32%;
  --primary-foreground:0 0% 100%;
  --secondary:19 95% 48%;
  --secondary-foreground:0 0% 100%;
  --muted:211 32% 91%;
  --muted-foreground:218 27% 29%;
  --accent:252 77% 55%;
  --accent-foreground:0 0% 100%;
  --border:214 28% 76%;
  --input:214 34% 91%;
  --ring:193 100% 32%;
}

/* System Light: a distinct cool-silver adaptive theme. */
html.system.light{
  --background:190 24% 93%;
  --foreground:194 48% 13%;
  --card:180 24% 98%;
  --card-foreground:221 45% 13%;
  --popover:210 40% 99%;
  --popover-foreground:221 45% 13%;
  --primary:173 80% 27%;
  --primary-foreground:0 0% 100%;
  --secondary:216 88% 52%;
  --secondary-foreground:222 48% 10%;
  --muted:214 25% 86%;
  --muted-foreground:217 25% 31%;
  --accent:35 92% 44%;
  --accent-foreground:0 0% 100%;
  --border:214 24% 69%;
  --input:214 28% 87%;
  --ring:174 84% 28%;
}

/* System Dark: graphite + teal/amber, clearly different from explicit Dark. */
html.system.dark{
  --background:193 25% 8%;
  --foreground:186 30% 95%;
  --card:190 24% 12%;
  --card-foreground:186 30% 95%;
  --popover:210 18% 12%;
  --popover-foreground:186 30% 95%;
  --primary:160 72% 48%;
  --primary-foreground:210 22% 7%;
  --secondary:199 92% 62%;
  --secondary-foreground:220 40% 10%;
  --muted:211 15% 19%;
  --muted-foreground:203 13% 72%;
  --accent:39 96% 56%;
  --accent-foreground:218 45% 10%;
  --border:207 15% 28%;
  --input:210 16% 18%;
  --ring:167 78% 44%;
}

html,body,#root{background-color:hsl(var(--background));color:hsl(var(--foreground));transition:var(--orbit-transition)}
body{position:relative;isolation:isolate}
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-size:cover;background-position:center;background-attachment:fixed;
  transition:opacity .35s ease,background .35s ease;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:46px 46px;mask-image:linear-gradient(to bottom,#000,transparent 82%);
}
html.dark:not(.system) body::before{background:radial-gradient(circle at 12% 8%,rgba(0,214,255,.17),transparent 30%),radial-gradient(circle at 88% 82%,rgba(139,92,246,.17),transparent 34%),linear-gradient(145deg,#02050d,#050a18 58%,#090418)}
html.light:not(.system) body::before{background:radial-gradient(circle at 10% 5%,rgba(14,165,233,.18),transparent 31%),radial-gradient(circle at 88% 85%,rgba(139,92,246,.13),transparent 34%),linear-gradient(145deg,#f8fbff,#eef6ff 54%,#faf7ff)}
html.system.light body::before{background:radial-gradient(circle at 8% 10%,rgba(20,184,166,.16),transparent 30%),radial-gradient(circle at 88% 82%,rgba(59,130,246,.13),transparent 36%),linear-gradient(145deg,#e8eef5,#f5f8fb 54%,#e8f3f4)}
html.system.dark body::before{background:radial-gradient(circle at 10% 8%,rgba(45,212,191,.15),transparent 29%),radial-gradient(circle at 90% 80%,rgba(245,158,11,.11),transparent 35%),linear-gradient(145deg,#0b1014,#111a20 56%,#15130e)}
html.light body::after{opacity:.34;background-image:linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px)}

/* Theme-aware fixed navigation. */
nav.fixed{transition:var(--orbit-transition);border-bottom-width:1px!important}
html.dark:not(.system) nav.fixed{background:rgba(2,7,18,.82)!important;border-color:rgba(34,211,238,.18)!important;box-shadow:0 12px 40px rgba(0,0,0,.24)!important}
html.light:not(.system) nav.fixed{background:rgba(250,253,255,.88)!important;border-color:rgba(15,118,150,.22)!important;box-shadow:0 12px 40px rgba(15,23,42,.10)!important}
html.system.light nav.fixed{background:rgba(232,241,246,.9)!important;border-color:rgba(15,118,110,.24)!important;box-shadow:0 12px 40px rgba(30,41,59,.12)!important}
html.system.dark nav.fixed{background:rgba(12,19,24,.88)!important;border-color:rgba(45,212,191,.20)!important;box-shadow:0 12px 40px rgba(0,0,0,.30)!important}
html.light nav.fixed [class*="text-foreground"],html.light nav.fixed [class*="text-muted-foreground"]{color:hsl(var(--foreground))!important}
html.light nav.fixed button{color:hsl(var(--foreground))!important;border-color:hsl(var(--border))!important;background-color:hsl(var(--card)/.72)!important}
html.light nav.fixed button:hover{background-color:hsl(var(--primary)/.11)!important;border-color:hsl(var(--primary)/.44)!important}

/* Mobile sidebar / drawer — readable in every theme. */
#navbar-sidebar{position:fixed!important;isolation:isolate;transition:var(--orbit-transition)}
#navbar-sidebar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.8;background:radial-gradient(circle at 18% 8%,hsl(var(--primary)/.13),transparent 31%),radial-gradient(circle at 90% 86%,hsl(var(--accent)/.11),transparent 36%)}
#navbar-sidebar::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)),hsl(var(--secondary)));box-shadow:0 0 20px hsl(var(--primary)/.35)}

html.dark:not(.system) #navbar-sidebar{background:linear-gradient(180deg,rgba(3,9,22,.985),rgba(7,13,28,.99))!important;border-color:rgba(34,211,238,.25)!important;color:#f4fbff!important;box-shadow:24px 0 80px rgba(0,0,0,.72)!important}
html.light:not(.system) #navbar-sidebar{background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(241,248,255,.985))!important;border-color:rgba(8,145,178,.30)!important;color:#0f172a!important;box-shadow:24px 0 72px rgba(15,23,42,.22)!important}
html.system.light #navbar-sidebar{background:linear-gradient(180deg,rgba(238,246,249,.985),rgba(219,232,239,.99))!important;border-color:rgba(13,148,136,.32)!important;color:#101827!important;box-shadow:24px 0 72px rgba(30,41,59,.25)!important}
html.system.dark #navbar-sidebar{background:linear-gradient(180deg,rgba(13,21,26,.99),rgba(17,28,32,.99))!important;border-color:rgba(45,212,191,.28)!important;color:#eefcf9!important;box-shadow:24px 0 80px rgba(0,0,0,.64)!important}

html.light #navbar-sidebar [class*="text-foreground"],
html.light #navbar-sidebar [class*="text-muted-foreground"],
html.light #navbar-sidebar a,
html.light #navbar-sidebar button,
html.light #navbar-sidebar span,
html.light #navbar-sidebar p{color:hsl(var(--foreground))!important;opacity:1!important}
html.light #navbar-sidebar [class*="text-primary"]{color:hsl(var(--primary))!important}
html.light #navbar-sidebar [class*="text-orange"]{color:#ea580c!important}
html.light #navbar-sidebar [class*="border-border"]{border-color:hsl(var(--border))!important}
html.light #navbar-sidebar [class*="bg-primary\/5"],
html.light #navbar-sidebar [class*="bg-primary\/10"]{background-color:hsl(var(--primary)/.12)!important}
html.light #navbar-sidebar [class*="hover\:bg-muted"]:hover,
html.light #navbar-sidebar a:hover,
html.light #navbar-sidebar button:hover{background-color:hsl(var(--primary)/.10)!important;color:hsl(var(--foreground))!important}
html.light #navbar-sidebar .custom-scrollbar{scrollbar-color:hsl(var(--primary)) hsl(var(--muted))}

#navbar-sidebar button,#navbar-sidebar a{transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
#navbar-sidebar a:hover,#navbar-sidebar button:hover{transform:translateX(2px)}
#navbar-sidebar button:focus-visible,#navbar-sidebar a:focus-visible{outline:3px solid hsl(var(--ring)/.65)!important;outline-offset:2px!important}

/* Cards, menus and form surfaces in light-adaptive themes. */
html.light [role="menu"],html.light [role="listbox"],html.light [data-radix-menu-content],html.light [data-radix-dropdown-menu-content]{background:hsl(var(--popover)/.98)!important;color:hsl(var(--popover-foreground))!important;border-color:hsl(var(--border))!important;box-shadow:0 20px 55px rgba(15,23,42,.18)!important}
html.light [role="menuitem"]{color:hsl(var(--foreground))!important}
html.light [role="menuitem"]:hover,html.light [role="menuitem"][data-highlighted]{background:hsl(var(--primary)/.12)!important;color:hsl(var(--foreground))!important}
html.light input,html.light textarea,html.light select{color:hsl(var(--foreground))!important;background:hsl(var(--card)/.94)!important;border-color:hsl(var(--border))!important}
html.light input::placeholder,html.light textarea::placeholder{color:hsl(var(--muted-foreground))!important;opacity:.86}
html.light [class*="text-muted-foreground"]{color:hsl(var(--muted-foreground))!important}
html.light [class*="border-border"]{border-color:hsl(var(--border))!important}
html.light [class*="bg-card"]{background-color:hsl(var(--card)/.96)!important}
html.light [class*="bg-popover"]{background-color:hsl(var(--popover)/.98)!important}

/* Notification centre follows the selected theme instead of remaining dark. */
html.light .portfolio-notification-panel{background:radial-gradient(circle at 82% 0,hsl(var(--primary)/.12),transparent 31%),linear-gradient(180deg,hsl(var(--card)/.99),hsl(var(--background)/.99))!important;color:hsl(var(--foreground))!important;border-color:hsl(var(--primary)/.35)!important;box-shadow:0 28px 80px rgba(15,23,42,.24),0 0 0 1px rgba(255,255,255,.75) inset!important}
html.light .portfolio-notification-head{background:hsl(var(--card)/.94)!important;color:hsl(var(--foreground))!important;border-color:hsl(var(--border))!important}
html.light .portfolio-notification-title-wrap h4,html.light .portfolio-notification-subtitle,html.light .portfolio-notification-unread{color:hsl(var(--foreground))!important}
html.light .portfolio-notification-scroll{background:hsl(var(--background)/.72)!important}
html.light .portfolio-notification-item{background:hsl(var(--card)/.96)!important;color:hsl(var(--foreground))!important;border-color:hsl(var(--border))!important;box-shadow:0 8px 28px rgba(15,23,42,.08)!important}
html.light .portfolio-notification-item p,html.light .portfolio-notification-item span{color:hsl(var(--foreground))!important}
html.light .portfolio-notification-actions button{color:hsl(var(--foreground))!important;border-color:hsl(var(--border))!important;background:hsl(var(--muted)/.78)!important}
html.light .portfolio-notification-actions button:hover{background:hsl(var(--primary)/.14)!important;border-color:hsl(var(--primary)/.45)!important}
html.light .portfolio-notification-chat-footer{background:hsl(var(--card)/.95)!important;border-color:hsl(var(--border))!important;color:hsl(var(--muted-foreground))!important}
html.light .portfolio-notification-close,html.light .portfolio-notification-footer-close{color:hsl(var(--foreground))!important;background:hsl(var(--muted)/.9)!important;border-color:hsl(var(--border))!important}
html.light .portfolio-notification-empty{color:hsl(var(--muted-foreground))!important}

/* Give System a visible identity badge without modifying the React source. */
html.system nav.fixed::after{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);z-index:3;padding:2px 9px;border:1px solid hsl(var(--primary)/.34);border-radius:999px;background:hsl(var(--card)/.94);color:hsl(var(--primary));font:700 8px/1.4 "Fira Code",monospace;letter-spacing:.12em;box-shadow:0 6px 18px rgba(0,0,0,.15);pointer-events:none}
html.system.light nav.fixed::after{content:"SYSTEM • AURORA FROST"}
html.system.dark nav.fixed::after{content:"SYSTEM • AURORA GRAPHITE"}
html:not(.system) nav.fixed::after{content:none}

/* Smooth, deliberate transitions without harming reduced-motion users. */
nav.fixed,#navbar-sidebar,.portfolio-notification-panel,[role="menu"],input,textarea,select,button,a{transition:var(--orbit-transition)}
@media (prefers-reduced-motion:reduce){nav.fixed,#navbar-sidebar,.portfolio-notification-panel,[role="menu"],input,textarea,select,button,a{transition:none!important}}

@media(max-width:640px){
  #navbar-sidebar{width:min(92vw,390px)!important;max-width:calc(100vw - 10px)!important}
  #navbar-sidebar [class*="font-heading"]{font-weight:700!important;letter-spacing:.12em!important}
  html.light #navbar-sidebar{border-radius:0 20px 20px 0!important}
  html.system nav.fixed::after{bottom:-10px;font-size:7px;padding:2px 7px}
}