/* AngelBoard Oracle CRM v3.0 — per-screen layout */

/* ---------- auth ---------- */
#auth{position:fixed;inset:0;overflow:auto;background:var(--bg);display:grid;place-items:center;padding:48px 16px}
#auth.hidden{display:none}
.auth-wrap{width:100%;max-width:428px;display:flex;flex-direction:column;align-items:center;gap:22px}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.auth-logo img{display:block;width:min(300px,80vw);height:auto}
.auth-logo small{display:block;font-weight:500;color:var(--text-3);font-size:12px}
.auth-card{width:100%;padding:30px 30px 26px;border-radius:24px}
.auth-card h1{margin:0;font-size:19px;font-weight:600}
.auth-card .sub{margin-top:6px;font-size:14px;color:var(--text-3)}
.auth-card form{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.auth-card .inp{height:40px}
.auth-card .btn{height:40px;margin-top:6px}
.auth-card .links{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-top:4px;flex-wrap:wrap}
.auth-card .links a{text-decoration:none}
.auth-card .foot{margin-top:14px;font-size:12px;color:var(--text-3)}
.auth-card .okbox{padding:10px 12px;border-radius:var(--r-md);background:var(--ok-bg);color:var(--ok);font-size:13px}
.auth-card .okbox:empty{display:none}

/* ---------- dashboard ---------- */
.dash-kpis{margin-top:0}
.dash-ctx{padding:12px 18px}
.dash-map{width:100%;height:auto;display:block;border-radius:10px;background:var(--map-bg)}
.cb-table td.num{white-space:nowrap}

/* ---------- pipeline ---------- */
.pipe-search{width:220px}
.pipe-count{font-size:12px;color:var(--text-3);margin-left:auto}
.tbl .co-cell{min-width:180px}
.tbl .co-sub{font-size:11.5px;color:var(--text-3);margin-top:2px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.tbl td.acts{text-align:right}

/* ---------- inbox ---------- */
.inbox-kpis{margin-bottom:16px}
.tbl .subj b{display:block}
.tbl .subj .snip{font-size:12px;color:var(--text-3);white-space:normal;max-width:420px}
.tbl td.dir{width:48px}

/* ---------- record drawer ---------- */
.rec-section{display:flex;flex-direction:column;gap:8px}
.rec-signals{display:flex;gap:4px;flex-wrap:wrap}
.rec-signals .chip{margin:0}
.qual-head{display:flex;align-items:center;gap:16px}
.qual-head .muted{margin-top:2px;white-space:normal}
.ai-box{border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);background:var(--violet-soft);border-radius:var(--r-md);padding:12px 14px;font-size:13px}
.ai-box .ai-h{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-text);font-weight:700;margin-bottom:6px}
.ai-box ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.rec-links{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px}
.chan-list{display:flex;flex-direction:column;gap:6px}
.chan-row{display:grid;grid-template-columns:120px 1fr 1fr auto;gap:6px;align-items:center}
@media(max-width:600px){.chan-row{grid-template-columns:1fr}}

/* ---------- angel AI (sim visual; used by screens/ai.js) ---------- */
.ai-wrap{display:grid;grid-template-columns:230px 1fr;gap:0;min-height:560px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.ai-side{border-right:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface-2);overflow:auto}
.ai-side .th{padding:9px 10px;border-radius:var(--r-md);font-size:12.5px;color:var(--text-2);cursor:pointer;text-align:left;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-side .th.on,.ai-side .th[aria-current="true"]{background:var(--surface);color:var(--text);font-weight:600}
.ai-main{display:flex;flex-direction:column;min-width:0}
.ai-welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;text-align:center}
/* Iridescent glass bubble — replaces the old flat violet circle + person glyph. Pure abstract sphere: a dark
   base, a blurred rotating conic-gradient for the color-shift, and a glossy highlight ellipse for the
   glass reflection. Works at every size (96/64/26px) since it's layered gradients, not a raster image. */
.orb{width:96px;height:96px;border-radius:50%;position:relative;overflow:hidden;isolation:isolate;flex:none;
  background:radial-gradient(120% 120% at 42% 34%,#14131c 0%,#07060b 55%,#000 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.07),inset 0 -18px 30px rgba(0,0,0,.85),0 20px 44px rgba(0,0,0,.55);
  animation:orb-float 4.5s ease-in-out infinite}
.orb::before{content:"";position:absolute;inset:-6%;border-radius:50%;padding:14%;
  background:conic-gradient(from 210deg,transparent 0deg,transparent 185deg,rgba(255,95,109,.95) 215deg,rgba(255,255,255,1) 245deg,rgba(120,220,255,.95) 275deg,rgba(185,139,255,.85) 305deg,transparent 335deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:blur(5px) saturate(1.3);mix-blend-mode:screen;z-index:1;animation:orb-spin 17s linear infinite}
@keyframes orb-spin{to{transform:rotate(360deg)}}
@keyframes orb-float{50%{transform:translateY(-3px) scale(1.015)}}

/* Angel AI avatar (v3.1) — the generated video loop on a glowing, theme-coloured stage. Every colour here comes
   from the active theme's --accent, so the glow and ring follow whichever of the themes (or a "Surprise me"
   generated one) the user has picked. .orb.avatar only clips the video to the circle; the glow and rotating
   ring live on the unclipped .ai-avatar wrapper so they can sit outside the circle. (v3.1a dropped the wing
   corner badge — see public/js/screens/ai.js.) */
.ai-welcome{background:radial-gradient(ellipse 55% 42% at 50% 36%,color-mix(in srgb,var(--accent) 11%,transparent) 0%,transparent 72%)}
.ai-avatar{--av:112px;position:relative;width:var(--av);height:var(--av);flex:none;display:grid;place-items:center;margin-bottom:6px}
.ai-avatar-glow{position:absolute;inset:-32%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 48%,transparent) 0%,color-mix(in srgb,var(--accent) 20%,transparent) 42%,transparent 70%);
  filter:blur(10px);animation:av-glow 3.6s ease-in-out infinite}
.ai-avatar-ring{position:absolute;inset:-6px;border-radius:50%;padding:2px;pointer-events:none;opacity:.85;
  background:conic-gradient(from 0deg,transparent 0deg,var(--accent) 60deg,transparent 150deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:orb-spin 3.2s linear infinite}
.ai-avatar .orb.avatar{width:100%;height:100%;background:var(--surface-3);animation:none;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 75%,transparent),0 0 26px color-mix(in srgb,var(--accent) 45%,transparent),0 10px 24px rgba(0,0,0,.18)}
.ai-avatar .orb.avatar::before{display:none}
.ai-avatar .orb.avatar video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
@keyframes av-glow{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.ai-avatar-glow,.ai-avatar-ring{animation:none}}

.ai-welcome h2{margin:0;font-size:22px}
.ai-welcome p{margin:0;color:var(--text-2)}
.sug{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:680px}
.sug button{padding:12px 14px;text-align:left;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);font-size:12.5px;color:var(--text-2);transition:all var(--dur-fast)}
.sug button:hover{border-color:var(--violet);color:var(--text);box-shadow:0 0 0 3px var(--violet-glow)}
.ai-thread{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:78%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.u{align-self:flex-end;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.msg.a{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border)}
.msg.a::before{content:"Angel AI";display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-text);margin-bottom:4px;font-weight:700}
.tray{margin:0 20px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--violet);background:var(--violet-soft);display:flex;flex-direction:column;gap:8px}
.tray .tt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-text);font-weight:700}
.tray .ti{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.ai-in{display:flex;gap:8px;align-items:center;padding:14px 20px 18px}
.pill{flex:1;display:flex;align-items:center;gap:8px;height:46px;padding:0 8px 0 16px;border-radius:var(--r-pill);border:1px solid var(--violet);background:var(--surface-2);box-shadow:0 0 0 4px rgba(139,92,246,.1);min-width:0}
.pill input{flex:1;border:0;background:transparent;outline:none;font-size:14px;min-width:0;color:var(--text)}
.pill .ib{width:32px;height:32px}
.pill .send{background:var(--violet);color:#fff}
@media(max-width:900px){.ai-wrap{grid-template-columns:1fr}.ai-side{display:none}.sug{grid-template-columns:1fr}}

/* ---------- time & shifts ---------- */
.tc{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:24px 28px}
.tc .st{font-size:13px;color:var(--text-2)}
.tc .big{font-family:var(--font-num);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.clockbtn{height:48px;padding:0 26px;border-radius:var(--r-pill);font-weight:800;font-size:14px;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 24px var(--accent-shadow);transition:transform var(--dur-fast),background var(--dur-fast)}
.clockbtn:active{transform:scale(.97)}
.clockbtn.out{background:var(--danger);color:#fff;box-shadow:0 8px 24px rgba(224,90,90,.3)}
.cal{display:grid;grid-template-columns:120px repeat(7,minmax(90px,1fr));font-size:12px;min-width:800px}
.cal .hd{padding:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border);text-align:center}
.cal .nm{padding:12px 10px;font-weight:600;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.cal .c{padding:6px;border-bottom:1px solid var(--border);border-left:1px solid var(--border);min-height:52px;cursor:pointer;transition:background var(--dur-fast);text-align:left;width:100%;display:block}
.cal .c:hover{background:var(--surface-2)}
.sh-pill{display:block;padding:5px 7px;border-radius:7px;font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--text);border-left:3px solid var(--accent)}
.sh-pill.req{background:var(--warn-bg);border-color:var(--warn)}.sh-pill.live{background:var(--ok-bg);border-color:var(--ok)}
@media(max-width:900px){.tc{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* ---------- scout map wrapper (legacy scout.js markup lives inside #screen-scout) ---------- */
.mapwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--map-bg);min-height:460px}
.mapwrap svg{width:100%;height:100%;display:block;position:absolute;inset:0}
.map-fab{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2}
.map-panel{position:absolute;left:14px;top:14px;width:250px;z-index:2;padding:12px}

/* ---------- settings ---------- */
.set{display:grid;grid-template-columns:200px 1fr;gap:var(--s5)}
.setnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;align-self:start}
.setnav button{text-align:left;padding:9px 12px;border-radius:var(--r-md);color:var(--text-2);font-weight:500;font-size:13px}
.setnav button[aria-selected="true"]{background:var(--accent-soft);color:var(--text);font-weight:600}
.set .row .inp{width:120px}
@media(max-width:900px){.set{grid-template-columns:1fr}.setnav{flex-direction:row;flex-wrap:wrap;position:static}}

/* ---------- insights / commissions ---------- */
.ins-bars{display:flex;align-items:flex-end;gap:6px;height:120px}
.ins-bars i{flex:1;background:var(--accent);border-radius:3px 3px 0 0;display:block}

@media(max-width:900px){.pipe-search{width:100%}.ph .acts .tabs{flex:1}}