/* SkyKloud sign-in branding for self-hosted Twenty.
   Active only when brand.js puts .sk-auth on <html> (auth routes only).
   Unlayered on purpose: beats Twenty's @layer twenty-ui styles. */
@font-face{font-family:"SK Jakarta";src:url(/skykloud-brand/fonts/plus-jakarta-sans.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"SK Plex Mono";src:url(/skykloud-brand/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"SK Fraunces";src:url(/skykloud-brand/fonts/fraunces-italic.woff2) format("woff2");font-style:italic;font-weight:400 600;font-display:swap}

:root{
  --sk-navy:#0a1222; --sk-navy-2:#0f1a2e; --sk-line:rgba(148,163,184,.10);
  --sk-sky:#0284c7; --sk-sky-hi:#38bdf8; --sk-amber:#f59e0b; --sk-amber-hi:#fbbf24;
  --sk-ink:#0f172a; --sk-muted:#64748b; --sk-slate:#94a3b8; --sk-panel-w:46vw;
}

html.sk-auth, html.sk-auth body{background:#f4f7fb !important}

/* Left brand panel (injected by brand.js) */
#sk-brand-panel{display:none}
html.sk-auth #sk-brand-panel{
  display:flex; flex-direction:column; justify-content:space-between;
  position:fixed; inset:0 auto 0 0; width:var(--sk-panel-w); z-index:0;
  padding:56px 64px; box-sizing:border-box; overflow:hidden;
  color:#e2e8f0; font-family:"SK Jakarta",system-ui,sans-serif;
  background:
    radial-gradient(600px 400px at 85% 15%, rgba(245,158,11,.14), transparent 70%),
    radial-gradient(700px 500px at 10% 90%, rgba(2,132,199,.22), transparent 70%),
    linear-gradient(var(--sk-line) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--sk-line) 1px, transparent 1px) 0 0/48px 48px,
    var(--sk-navy);
}
#sk-brand-panel .sk-logo-full{width:220px;height:60px;background:url(/skykloud-brand/logo.svg) left center/contain no-repeat}
#sk-brand-panel .sk-eyebrow{
  display:inline-block; font:500 11px/1 "SK Plex Mono",ui-monospace,monospace; letter-spacing:.22em;
  color:var(--sk-sky-hi); border:1px solid rgba(56,189,248,.25); background:rgba(15,26,46,.7);
  padding:9px 14px; border-radius:999px; margin-bottom:28px; text-transform:uppercase}
#sk-brand-panel h1{font-weight:800; font-size:clamp(34px,3.6vw,52px); line-height:1.06; letter-spacing:-.02em; margin:0 0 22px; color:#fff}
#sk-brand-panel h1 em{font-family:"SK Fraunces",Georgia,serif; font-style:italic; font-weight:500; color:var(--sk-amber-hi)}
#sk-brand-panel p{font-size:17px; line-height:1.6; color:#cbd5e1; max-width:30em; margin:0}
#sk-brand-panel .sk-foot{display:flex; gap:10px; align-items:center; font:500 11px/1 "SK Plex Mono",ui-monospace,monospace; letter-spacing:.14em; color:var(--sk-slate); text-transform:uppercase}
#sk-brand-panel .sk-dot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.15)}

/* Shift Twenty's app into the right-hand side; transform makes fixed children position inside #root */
html.sk-auth body{overflow:hidden !important}
html.sk-auth #root{position:relative; z-index:1; margin-left:var(--sk-panel-w); width:auto; height:100vh; transform:translateZ(0); overflow-x:hidden; overflow-y:auto}

/* The sign-in column: no boxed card, so Twenty's own layout and centering stay untouched */
html.sk-auth .sk-card{color-scheme:light}
html.sk-auth .sk-card :is(div,span,label,p,h1,h2,h3,a){color:var(--sk-ink)}
html.sk-auth .sk-logo{width:56px !important;height:56px !important;background:url(/skykloud-brand/logo-mark.svg) center/contain no-repeat !important;border:0 !important}
html.sk-auth .sk-logo > *{visibility:hidden !important}
html.sk-auth .sk-title{font-family:"SK Jakarta",system-ui,sans-serif !important; font-size:0 !important; line-height:1.2; text-align:center}
html.sk-auth .sk-title::before{content:"Sign in to SkyKloud CRM"; display:block; font-size:24px; font-weight:800; letter-spacing:-.01em; color:var(--sk-ink)}
html.sk-auth .sk-title::after{content:"Use your SkyKloud Microsoft 365 account or email"; display:block; margin-top:8px; font-size:14px; font-weight:500; color:var(--sk-muted)}

html.sk-auth .sk-btn{height:44px !important; border-radius:10px !important; font-family:"SK Jakarta",system-ui,sans-serif !important; font-weight:700 !important; font-size:14px !important; transition:background .15s, box-shadow .15s}
html.sk-auth .sk-btn-primary{background:linear-gradient(180deg,#0ea5e9,var(--sk-sky)) !important; border:1px solid #0369a1 !important; box-shadow:0 6px 18px rgba(2,132,199,.28) !important}
html.sk-auth .sk-btn-primary, html.sk-auth .sk-btn-primary *{color:#fff !important}
html.sk-auth .sk-btn-primary:hover{background:linear-gradient(180deg,#38bdf8,#0369a1) !important}
html.sk-auth .sk-btn-secondary{background:#fff !important; border:1px solid #cbd5e1 !important; box-shadow:none !important}
html.sk-auth .sk-btn-secondary, html.sk-auth .sk-btn-secondary *{color:var(--sk-ink) !important}
html.sk-auth .sk-btn-secondary:hover{border-color:var(--sk-sky) !important; background:#f0f9ff !important}
html.sk-auth .sk-card input{background:#fff !important; color:var(--sk-ink) !important; border-radius:10px !important}
html.sk-auth .sk-card input:focus{outline:2px solid rgba(2,132,199,.35) !important; outline-offset:1px}

/* Twenty Cloud's privacy/terms links don't apply to a self-hosted workspace */
html.sk-auth .sk-legal{font-size:0 !important}
html.sk-auth .sk-legal > *{display:none !important}
html.sk-auth .sk-legal::after{content:"Private workspace \00B7  Authorized SkyKloud users only"; font:500 10.5px/1 "SK Plex Mono",ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--sk-slate)}

/* Phones and narrow windows: brand band on top */
@media (max-width:900px){
  html.sk-auth{--sk-panel-w:0px}
  html.sk-auth #sk-brand-panel{inset:0 0 auto 0; width:100%; height:168px; padding:24px}
  html.sk-auth #sk-brand-panel h1{font-size:24px; margin:12px 0 0}
  html.sk-auth #sk-brand-panel :is(p,.sk-eyebrow,.sk-foot){display:none}
  html.sk-auth #root{margin:168px 0 0; height:calc(100vh - 168px)}
}