/* ============================================================
   FAKTUUR client portal — theme overlay
   Loads AFTER portal.css and the header inline styles, so it wins.
   Retints the portal to match the marketing theme. Admin untouched.
   ============================================================ */

/* ---- Retint design tokens (portal.css is variable-driven) ---- */
:root{
  --bg-body:#f4f8fd;
  --bg-hover:#eef4fb;
  --bg-light:#f6f9fc;
  --border-color:#e6edf5;
  --sidebar-bg:#0a1730;
  --sidebar-active-bg:linear-gradient(135deg,#38bdf8,#1565c0);
  --sidebar-text:rgba(255,255,255,0.72);
  --sidebar-text-hover:#ffffff;
  --sidebar-border:rgba(255,255,255,0.08);
  --t-sky:#38bdf8; --t-indigo:#6366f1; --t-brand:#1565c0; --t-brand-d:#0d3a8f;
  --t-shadow:0 1px 2px rgba(16,42,82,.04),0 8px 24px rgba(16,42,82,.06);
  --t-shadow-lg:0 24px 60px rgba(16,42,82,.16);
}
body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}

/* ---- Sidebar: deep navy gradient to match the marketing ink ---- */
.portal-sidebar,.sidebar{background:linear-gradient(180deg,#0a1730 0%,#0f2247 100%);}
.nav-item{border-radius:10px;transition:background .2s ease,color .2s ease;}
.nav-item:hover{background:rgba(56,189,248,0.10);color:#fff;}
.nav-item.active{box-shadow:0 8px 20px rgba(21,101,192,0.35);}

/* ---- Buttons ---- */
.btn{border-radius:12px;font-weight:600;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
.btn-primary{background:linear-gradient(135deg,#38bdf8 0%,#1565c0 55%,#0d3a8f 100%);border:none;color:#fff;box-shadow:0 10px 26px rgba(56,189,248,0.30);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(56,189,248,0.44);}

/* ---- Cards ---- */
.card,.stat-card,.download-card,.doc-card,.quick-link-card,.video-card{border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--t-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.stat-card:hover,.download-card:hover,.doc-card:hover,.quick-link-card:hover,.video-card:hover{transform:translateY(-4px);border-color:rgba(56,189,248,0.45);box-shadow:var(--t-shadow-lg);}
.stat-icon,.doc-icon{border-radius:13px;}
.stat-value{font-weight:700;}
.card-header{border-bottom:1px solid var(--border-color);}

/* ---- Top header ---- */
.top-header{background:#fff;border-bottom:1px solid var(--border-color);}
.top-header h1{font-weight:700;color:var(--text-primary);}

/* ---- Tables ---- */
.table thead th{background:var(--bg-light);color:var(--text-secondary);font-weight:600;}
.table tbody tr{transition:background .15s ease;}
.table tbody tr:hover{background:var(--bg-hover);}

/* ---- Forms ---- */
.form-control{border-radius:10px;border:1px solid var(--border-color);transition:border-color .2s ease,box-shadow .2s ease;}
.form-control:focus{border-color:var(--t-sky);box-shadow:0 0 0 3px rgba(56,189,248,0.18);outline:none;}

/* ============================================================
   Aurora — identical to the main site (4 animated bands)
   ============================================================ */
.aurora{position:absolute;inset:-25% -15%;z-index:0;filter:blur(72px) saturate(135%);pointer-events:none;overflow:hidden;}
.aurora-band{position:absolute;border-radius:48% 52% 60% 40% / 50% 45% 55% 50%;mix-blend-mode:screen;opacity:.6;will-change:transform,opacity;}
.aurora-1{width:clamp(360px,52vw,880px);height:clamp(300px,42vw,700px);left:-8%;top:-22%;background:radial-gradient(circle at 35% 35%,#38bdf8 0%,rgba(56,189,248,0) 62%);animation:auroraDrift1 22s ease-in-out infinite alternate;}
.aurora-2{width:clamp(340px,48vw,820px);height:clamp(300px,44vw,720px);right:-10%;top:-14%;background:radial-gradient(circle at 60% 40%,#6366f1 0%,rgba(99,102,241,0) 60%);animation:auroraDrift2 27s ease-in-out infinite alternate;}
.aurora-3{width:clamp(420px,60vw,1000px);height:clamp(320px,40vw,680px);left:8%;bottom:-34%;background:radial-gradient(circle at 50% 50%,#22d3ee 0%,rgba(34,211,238,0) 64%);animation:auroraDrift3 31s ease-in-out infinite alternate;}
.aurora-4{width:clamp(320px,44vw,760px);height:clamp(300px,40vw,640px);right:4%;bottom:-22%;background:radial-gradient(circle at 45% 55%,#1d4ed8 0%,rgba(29,78,216,0) 60%);animation:auroraDrift4 25s ease-in-out infinite alternate;}
@keyframes auroraDrift1{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:.45;}100%{transform:translate3d(8%,6%,0) rotate(18deg) scale(1.18);opacity:.72;}}
@keyframes auroraDrift2{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1.05);opacity:.5;}100%{transform:translate3d(-7%,8%,0) rotate(-16deg) scale(.9);opacity:.7;}}
@keyframes auroraDrift3{0%{transform:translate3d(0,0,0) rotate(0deg) scale(.95);opacity:.4;}100%{transform:translate3d(6%,-7%,0) rotate(14deg) scale(1.2);opacity:.65;}}
@keyframes auroraDrift4{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:.45;}100%{transform:translate3d(-9%,-6%,0) rotate(-12deg) scale(1.12);opacity:.6;}}

/* ---- App top bar: app-matching "glass" aurora (same palette + animation as the login screens) ---- */
.top-header{position:relative;overflow:visible;isolation:isolate;background:radial-gradient(130% 260% at 50% 0%, #07172B 0%, #04101F 72%);border-bottom:1px solid rgba(255,255,255,.08);}
.top-header > *{position:relative;z-index:1;}
.top-header h1{color:#fff;font-weight:700;}
.top-header .welcome-text{color:rgba(255,255,255,.82);}
.top-header .welcome-text strong{color:#fff;}
.top-header .lang-dropdown-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);}
.top-header .lang-dropdown-btn:hover{background:rgba(255,255,255,.2);}
.top-header .fk-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit;}
.top-header .fk-aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:.6;will-change:transform,opacity;filter:blur(70px) saturate(120%);}
.top-header .fk-aurora span:nth-child(1){width:clamp(360px,52vw,880px);height:clamp(300px,42vw,700px);left:-8%;top:-22%;background:radial-gradient(circle at 40% 40%,#2563EB 0%,rgba(37,99,235,0) 62%);animation:fkA 18s ease-in-out infinite;}
.top-header .fk-aurora span:nth-child(2){width:clamp(340px,48vw,820px);height:clamp(300px,44vw,720px);right:-10%;top:-14%;background:radial-gradient(circle at 60% 40%,#22D3EE 0%,rgba(34,211,238,0) 60%);animation:fkB 22s ease-in-out infinite;}
.top-header .fk-aurora span:nth-child(3){width:clamp(420px,60vw,1000px);height:clamp(320px,40vw,680px);left:8%;bottom:-34%;background:radial-gradient(circle at 50% 50%,#3B82F6 0%,rgba(59,130,246,0) 64%);opacity:.5;animation:fkC 26s ease-in-out infinite;}
.top-header .fk-aurora span:nth-child(4){width:clamp(320px,44vw,760px);height:clamp(300px,40vw,640px);right:4%;bottom:-22%;background:radial-gradient(circle at 45% 55%,#5B8CFF 0%,rgba(91,140,255,0) 60%);animation:fkA 20s ease-in-out infinite reverse;}
@keyframes fkA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,8%) scale(1.12)}}
@keyframes fkB{0%,100%{transform:translate(0,0) scale(1.08)}50%{transform:translate(-3%,10%) scale(.95)}}
@keyframes fkC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-9%) scale(1.16)}}

/* ---- Auth pages host the full aurora ---- */
.login-wrapper{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,#050b1a 0%,#0a1f3c 46%,#0d2b53 100%) !important;}
.login-card{position:relative;z-index:2;border-radius:20px;box-shadow:0 30px 70px rgba(2,8,28,.45);overflow:hidden;}
.login-header{background:linear-gradient(135deg,#38bdf8 0%,#1565c0 60%,#0d3a8f 100%) !important;}
.login-card .btn,.login-card .btn-primary{background:linear-gradient(135deg,#38bdf8,#1565c0) !important;border:none;}
.login-card .form-control:focus{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.18);}

@media (prefers-reduced-motion: reduce){ .aurora-band,.top-header .fk-aurora span{animation:none !important;} }