/* EV DIGITAL / NEON R3: world-to-world visual continuity.
   Presentation only. No generated business data or alterations to workflows. */

/* The current world carries its own light signature everywhere, including
   shared pages opened from a world (clients, budgets, documents and details). */
body[data-nav-context="development"] { --portal-color:#3aabff; --portal-rgb:58,171,255; }
body[data-nav-context="marketing"]   { --portal-color:#d37aff; --portal-rgb:211,122,255; }
body[data-nav-context="finance"]     { --portal-color:#ffd25b; --portal-rgb:255,210,91; }
body[data-nav-context="hardware"]    { --portal-color:#31f0b5; --portal-rgb:49,240,181; }
body[data-nav-context="construction"]{ --portal-color:#55cbff; --portal-rgb:85,203,255; }
body[data-nav-context="psychology"]  { --portal-color:#bd9fff; --portal-rgb:189,159,255; }

/* Intentionally do NOT touch the approved R2 home. */
body:is([data-nav-context="development"],[data-nav-context="marketing"],
 [data-nav-context="finance"],[data-nav-context="hardware"],
 [data-nav-context="construction"],[data-nav-context="psychology"]) .app main {
  background-color:#030d23!important;
  background-image:
   radial-gradient(ellipse 65% 37% at 18% 3%,rgba(var(--portal-rgb),.24),transparent 77%),
   radial-gradient(ellipse 30% 30% at 90% 50%,rgba(var(--portal-rgb),.14),transparent 88%),
   url('/admin/assets/neon-atmosphere-r2.svg'),
   linear-gradient(165deg,#030d23 0%,#071a35 49%,#031126 100%)!important;
  background-repeat:no-repeat!important;
  background-position:left top,right center,right -195px top 12px,center!important;
  background-size:100% 780px,70% 760px,min(83vw,1140px) auto,100% 100%!important;
}
/* A colored active section in the existing sidebar, but no extra navigation. */
body[data-nav-context] .sidebar nav button.active {
  border:1px solid rgba(var(--portal-rgb,50,170,255),.78)!important;
  background:linear-gradient(100deg,rgba(var(--portal-rgb,50,170,255),.30),rgba(3,17,37,.86))!important;
  box-shadow:inset 3px 0 var(--portal-color,#36aeff),0 0 20px rgba(var(--portal-rgb,50,170,255),.29)!important;
}

/* World headline as luminous anchor instead of a flat heading on empty space. */
body:not([data-nav-context="home"]) .app main > .view:not(#dashboardView) > .section-head,
body:not([data-nav-context="home"]) .app main > .view:not(#dashboardView) > .category-route-bar + .section-head {
  position:relative;isolation:isolate;
  padding:20px 22px!important;margin:0 0 15px!important;
  min-height:96px;border-radius:18px;
  border:1px solid rgba(var(--portal-rgb,48,167,255),.52);
  background:linear-gradient(108deg,rgba(var(--portal-rgb,48,167,255),.22),rgba(4,24,49,.91) 45%,rgba(3,13,32,.83))!important;
  box-shadow:0 0 25px rgba(var(--portal-rgb,48,167,255),.21),inset 4px 0 0 rgba(var(--portal-rgb,48,167,255),.78);
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) > .section-head h2 {
  color:#f1fcff!important;line-height:1.13!important;
  text-shadow:0 0 19px rgba(var(--portal-rgb,58,171,255),.45)!important;
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) > .section-head .muted {
  color:#b7cfe1!important;
}

/* MAIN ACTION: same strength as the home circle, appropriate for touch UI. */
body:not([data-nav-context="home"]) .category-view .world-guide {
  border:1px solid rgba(var(--portal-rgb),.88)!important;
  background:
    radial-gradient(circle at 4% 80%,rgba(var(--portal-rgb),.19),transparent 50%),
    linear-gradient(113deg,rgba(var(--portal-rgb),.28),rgba(2,13,37,.89) 62%)!important;
  box-shadow:0 0 0 1px rgba(var(--portal-rgb),.18),0 0 31px rgba(var(--portal-rgb),.31),inset 4px 0 17px rgba(var(--portal-rgb),.14)!important;
}
body:not([data-nav-context="home"]) .category-view .world-guide h3 {
  color:#f3fbff;text-shadow:0 0 17px rgba(var(--portal-rgb),.38);
}
body:not([data-nav-context="home"]) .category-view .world-guide-actions button.primary {
  background:linear-gradient(118deg,rgba(var(--portal-rgb),.52),rgba(var(--portal-rgb),.22))!important;
  border:1.5px solid var(--portal-color)!important;color:#fff!important;
  box-shadow:0 0 15px rgba(var(--portal-rgb),.45),0 0 31px rgba(var(--portal-rgb),.16),inset 0 0 12px rgba(var(--portal-rgb),.15)!important;
}
body:not([data-nav-context="home"]) .category-view .world-guide-actions button:not(.primary) {
  border-color:rgba(var(--portal-rgb),.55)!important;
  background:linear-gradient(125deg,rgba(var(--portal-rgb),.13),rgba(4,19,43,.91))!important;
}

/* Expressive panels, restrained at the paragraph and field level for legibility. */
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) :is(
 .panel,.hardware-order-card,.dev-simple-card,.client-card,.project-card,.user-card,
 .detail-panel,.kanban-column,.task-card,.summary-box) {
  border-color:rgba(var(--portal-rgb),.43)!important;
  background:
    radial-gradient(ellipse 45% 75% at 100% 0%,rgba(var(--portal-rgb),.14),transparent 85%),
    linear-gradient(148deg,rgba(8,34,65,.96),rgba(3,14,32,.97))!important;
  box-shadow:0 0 18px rgba(var(--portal-rgb),.13),inset 0 1px 0 rgba(var(--portal-rgb),.21),0 9px 25px rgba(1,7,18,.23)!important;
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) .panel {
  position:relative;
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) .panel::before {
  content:"";position:absolute;top:0;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--portal-rgb),.9),transparent);
  box-shadow:0 0 8px rgba(var(--portal-rgb),.44);pointer-events:none;
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) .panel-head h2 {
  color:#eefaff!important;
  text-shadow:0 0 12px rgba(var(--portal-rgb),.23);
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) :is(
 .world-stats>div,.finance-simple-stats>div,.hardware-money-summary>div,.next-action,.hardware-order-next) {
  border:1px solid rgba(var(--portal-rgb),.43)!important;
  background:linear-gradient(132deg,rgba(var(--portal-rgb),.17),rgba(3,18,37,.92))!important;
  box-shadow:inset 0 0 15px rgba(var(--portal-rgb),.075),0 0 12px rgba(var(--portal-rgb),.10)!important;
}

/* Inner steps and advanced controls no longer look pasted from another theme. */
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) :is(
 .world-tools,.flow-help,.finance-movements-detail,.hardware-advanced,.category-route-bar,
 .commercial-status-strip) {
  border:1px solid rgba(var(--portal-rgb),.31)!important;
  border-radius:13px;
  background:linear-gradient(145deg,rgba(var(--portal-rgb),.115),rgba(3,15,35,.87))!important;
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) :is(
 .world-tools>summary,.flow-help>summary,.finance-movements-detail>summary,.hardware-advanced>summary) {
  color:#cdeafb!important;
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) .process-cycle span {
  border:1px solid rgba(var(--portal-rgb),.42)!important;
  background:linear-gradient(132deg,rgba(var(--portal-rgb),.14),rgba(2,16,35,.89))!important;
  color:#d3eaff!important;
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) .category-route-bar button:first-child {
  border-color:rgba(var(--portal-rgb),.75)!important;
  box-shadow:0 0 12px rgba(var(--portal-rgb),.26)!important;
}
body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) :is(
 button.primary,.tabbar button.active) {
  border:1px solid rgba(var(--portal-rgb),.79);
  box-shadow:0 0 15px rgba(var(--portal-rgb),.28);
}
/* Dialogs are mounted outside their world section, so carry the body context. */
body:not([data-nav-context="home"]) :is(.modal,.detail-dialog) {
  border-color:rgba(var(--portal-rgb),.7)!important;
  background:linear-gradient(150deg,#0c2849,#041227 68%)!important;
  box-shadow:0 0 36px rgba(var(--portal-rgb),.27),0 20px 65px rgba(0,0,0,.6)!important;
}
body:not([data-nav-context="home"]) :is(.modal-head,.detail-head) {
  border-bottom-color:rgba(var(--portal-rgb),.42)!important;
  box-shadow:inset 0 -1px 0 rgba(var(--portal-rgb),.12);
}
body:not([data-nav-context="home"]) :is(.modal,.detail-dialog) input:focus-visible,
body:not([data-nav-context="home"]) :is(.modal,.detail-dialog) select:focus-visible,
body:not([data-nav-context="home"]) :is(.modal,.detail-dialog) textarea:focus-visible {
  border-color:var(--portal-color)!important;
  box-shadow:0 0 0 2px rgba(var(--portal-rgb),.18),0 0 13px rgba(var(--portal-rgb),.28)!important;
}

/* Same design on actual phones, not only desktop devtools. */
@media(max-width:820px) {
 body:not([data-nav-context="home"]) .app main {
   background-position:left top,right 0 top 0,right -400px top 32px,center!important;
   background-size:100% 570px,100% 470px,920px auto,100% 100%!important;
 }
 body:not([data-nav-context="home"]) .app main > .view:not(#dashboardView) > .section-head {
   min-height:0;padding:16px!important;
 }
 body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) :is(
   .panel,.hardware-order-card,.dev-simple-card,.client-card,.project-card,.user-card) {
    box-shadow:0 0 12px rgba(var(--portal-rgb),.19),inset 0 1px 0 rgba(var(--portal-rgb),.16)!important;
 }
}
@media(max-width:560px) {
 body:not([data-nav-context="home"]) .category-view .world-guide {padding:15px!important}
 body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) > .section-head h2 {font-size:clamp(25px,7vw,34px)!important}
 body:not([data-nav-context="home"]) :is(.modal,.detail-dialog) {
  max-width:calc(100vw - 14px);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 14px);
 }
 body:not([data-nav-context="home"]) .modal-body {min-width:0}
 body:not([data-nav-context="home"]) :is(.modal,.detail-dialog) input,
 body:not([data-nav-context="home"]) :is(.modal,.detail-dialog) select,
 body:not([data-nav-context="home"]) :is(.modal,.detail-dialog) textarea {font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 body:not([data-nav-context="home"]) .app main .view:not(#dashboardView) * {transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* R3.1: one scrolling region per form. Keep the header and actions in view. */
html:has(dialog[open]),
body:has(dialog[open]) {
  overflow:hidden!important;
  overscroll-behavior:none;
}
#modal {
  --modal-frame-height:calc(var(--dialog-viewport-height,100dvh) - 32px);
  box-sizing:border-box;
  width:min(850px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:var(--modal-frame-height)!important;
  overflow:clip!important;
  margin:auto!important;
  top:var(--dialog-viewport-top,0px);
}
#modal[open] {display:grid;grid-template-rows:minmax(0,1fr)}
#modal > #modalForm {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  max-height:calc(var(--modal-frame-height) - 2px)!important;
  min-height:0;
  min-width:0;
  margin:0;
  overflow:clip;
}
#modal .modal-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:16px 22px!important;
  background:#0a2440;
}
#modal .modal-head .eyebrow {margin:0 0 6px;font-size:11px}
#modal .modal-head h2 {margin:0;line-height:1.25!important;overflow-wrap:anywhere}
#modal .modal-head .icon {min-width:44px;min-height:44px;align-self:start}
#modalTitle:focus {outline:none}
#modal > form > #modalBody {
  min-height:0;
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scroll-padding-block:18px;
  grid-auto-rows:max-content;
  align-content:start;
}
#modalBody > *, #modalBody input, #modalBody select, #modalBody textarea {min-width:0;max-width:100%}
#modalBody textarea.dialog-autogrow {
  box-sizing:border-box;
  max-height:none;
  overflow:hidden;
  resize:none;
}
#modal .modal-error {overflow-wrap:anywhere;background:#081e35}
#modal .modal-error:empty {display:none}
#modal .modal-error:not(:empty) {padding:10px 18px;margin:0}
#modal .modal-actions {
  display:flex;
  flex-wrap:wrap;
  padding:14px 22px!important;
  gap:10px;
  background:#0a2440;
  border-top-color:rgba(var(--portal-rgb,58,171,255),.42);
}
#modal .modal-actions button {min-height:48px;line-height:1.3;white-space:normal}
/* When a form opens over a detail, only its uppermost body scrolls. */
body:has(#modal[open]) #detailBody {overflow:hidden}

@media(max-width:720px) {
  #modal {
    --modal-frame-height:var(--dialog-viewport-height,100dvh);
    width:100%!important;
    max-width:100%!important;
    height:var(--modal-frame-height);
    max-height:var(--modal-frame-height)!important;
    inset:var(--dialog-viewport-top,0px) 0 auto;
    margin:0!important;
    border:0;
    border-radius:0;
  }
  #modal > #modalForm {height:100%;max-height:100%!important}
  #modal .modal-head {
    padding:calc(12px + env(safe-area-inset-top)) 14px 12px!important;
  }
  #modal .modal-head h2 {font-size:24px!important}
  #modal > form > #modalBody {padding:16px!important;gap:14px!important}
  #modal .modal-actions {
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom))!important;
  }
  #modal .modal-actions button {width:100%;min-width:0!important;padding:10px;font-size:15px}
}