/* ==========================================================================
   Skyflow — login (core/login/default_index.php)
   Ny design: mörkt tema, animerad moln-ikon, scopad .stack så .btn m.fl.
   inte krockar med Bootstrap i modaler. Tidigare inline i default_index.php.
   ========================================================================== */
:root{
  --primary:#3f84d2; --primary-rgb:63,132,210; --primary-lite:#7fb0e6;
  --success:#79b08f; --danger:#d27a6c;
  --ink:#F3F0E9; --ink-dim:#9b968a; --ink-faint:rgba(243,240,233,.55);
  --line:rgba(243,240,233,.11); --line-strong:rgba(243,240,233,.18);
  --field:rgba(243,240,233,.045);
  --radius:.625rem; --radius-sm:.5rem; --radius-lg:1rem;
  --icon:#C96442;
  --serif:"Newsreader","Copernicus",Georgia,"Times New Roman",ui-serif,serif;
  --sans:"Inter",-apple-system,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5;
  min-height:100vh; display:flex; padding:40px 20px;
  background:
    radial-gradient(58% 42% at 50% 14%, rgba(201,100,66,.18), transparent 60%),
    radial-gradient(70% 55% at 50% 120%, rgba(63,132,210,.10), transparent 60%),
    linear-gradient(165deg,#2b2926 0%,#222120 55%,#191817 100%);
}
.bgrings{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.bgrings circle{ fill:none; stroke:rgba(243,240,233,.04); stroke-width:1; }

/* ===== Login-stack (scopad så .btn m.fl. inte krockar med Bootstrap i modaler) ===== */
.stack{ position:relative; z-index:1; margin:auto; width:100%; max-width:392px; display:flex; flex-direction:column; align-items:center; }

/* background/padding:0 — neutralisera Bootstraps .mark (text-highlight #fff3cd). */
.stack .mark{ display:flex; flex-direction:column; align-items:center; gap:15px; margin-bottom:30px; background:transparent; padding:0; color:inherit; }
.stack .mark .icon{ width:84px; height:84px; }
.stack .mark .wm{ font-family:var(--serif); font-weight:600; font-size:25px; letter-spacing:-.01em; }

/* animerad status-ikon */
.stack .ring, .stack .content{ transform-box:view-box; transform-origin:50px 50px; }
.stack .cloud{ opacity:1; }
.stack .check path, .stack .cross path{ stroke-dasharray:1; stroke-dashoffset:1; }
.stack .icon .ring path, .stack .icon .check path, .stack .icon .cross path{ stroke:var(--icon); }
.stack .icon .cloud path{ fill:var(--icon); }
.stack .icon.is-success{ --icon:var(--success); }
.stack .icon.is-error{   --icon:var(--danger);  }
.stack .icon.processing .ring{ animation:spinLoop .85s linear infinite; }
@keyframes spinLoop{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.stack .icon.resolve .content{ animation:morph 940ms forwards; }
.stack .icon.resolve .cloud  { animation:fade  260ms ease-in forwards; }
@keyframes morph{
  0%  { transform:scale(1);      animation-timing-function:cubic-bezier(.6,.04,.98,.34); }
  32% { transform:scale(0.0001); }
  47% { transform:scale(0.0001); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  100%{ transform:scale(1); }
}
@keyframes fade{ to{ opacity:0; } }
.stack .icon.resolve.is-success .check path{ animation:draw 440ms 430ms cubic-bezier(.2,.7,.2,1) forwards; }
.stack .icon.resolve.is-error   .cross path{ animation:draw 360ms 430ms cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .stack .icon.processing .ring,.stack .icon.resolve .content,.stack .icon.resolve .cloud{ animation:none; }
  .stack .icon.resolve.is-success .check path,.stack .icon.resolve.is-error .cross path{ stroke-dashoffset:0; animation:none; }
  .stack .icon.resolve .cloud{ opacity:0; }
}

/* formulär-panel */
.stack .panel{
  width:100%; background:var(--field); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:34px 32px 30px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6), inset 0 1px 0 rgba(243,240,233,.04);
  backdrop-filter:blur(8px);
}
.stack .panel.shake{ animation:shakeX .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shakeX{ 10%,90%{ transform:translateX(-1px);} 20%,80%{ transform:translateX(2px);} 30%,50%,70%{ transform:translateX(-5px);} 40%,60%{ transform:translateX(5px);} }

.stack .panel h2{ font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:-.01em; margin:0 0 22px; }

.stack .field{ margin-bottom:15px; }
.stack .field > label{ display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 7px; }
.stack .inputwrap{ position:relative; }
.stack .field input{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  background:rgba(243,240,233,.05); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:11px 13px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.stack .field input::placeholder{ color:rgba(243,240,233,.32); }
.stack .field input:focus{ outline:none; border-color:var(--primary); background:rgba(243,240,233,.07); box-shadow:0 0 0 .2rem rgba(var(--primary-rgb),.22); }
.stack .field input:disabled{ opacity:.6; }
.stack .field.pw input{ padding-right:46px; }
.stack .password-toggle{ position:absolute; top:50%; right:6px; transform:translateY(-50%);
         color:var(--ink-dim); background:transparent; border:0; padding:7px 9px; border-radius:6px; cursor:pointer; line-height:1; }
.stack .password-toggle i{ font-size:17px; }
.stack .password-toggle:hover{ color:var(--ink); background:rgba(243,240,233,.07); }

.stack .meta{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 22px; font-size:13px; }
.stack .remember{ display:flex; align-items:center; gap:8px; color:var(--ink-dim); cursor:pointer; user-select:none; margin:0; }
/* Custom-stylad checkbox (default native-rutan passade inte dark-temat) */
.stack .remember input{
  appearance:none; -webkit-appearance:none; flex:none; position:relative;
  width:17px; height:17px; border:1px solid var(--line-strong); border-radius:5px;
  background:rgba(243,240,233,.05); cursor:pointer; transition:background .15s, border-color .15s;
}
.stack .remember input:hover{ border-color:rgba(243,240,233,.32); }
.stack .remember input:checked{ background:var(--primary); border-color:var(--primary); }
.stack .remember input:checked::after{ content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.stack .remember input:focus-visible{ outline:none; box-shadow:0 0 0 .2rem rgba(var(--primary-rgb),.25); }

/* Locked-panel — centrerad rubrik + lite luft under hint före knappen */
.stack .panel.locked{ text-align:center; }
.stack .panel.locked h2{ text-align:center; margin-bottom:10px; }
.stack .panel.locked .hint{ margin-bottom:22px; }

/* MFA-panel — centrerad rubrik + hint */
.stack #form2fa h2{ text-align:center; margin-bottom:8px; }
.stack .hint{ font-size:13px; color:var(--ink-dim); margin:0 0 18px; text-align:center; }
.stack .backlink{ display:block; text-align:center; margin-top:16px; font-size:13px; color:var(--ink-dim); text-decoration:none; }
.stack .backlink:hover{ color:var(--ink); }
/* MFA-kod + token-PIN: centrerad OTP-stil med luft mellan siffrorna */
.stack #code, .stack #pin{ text-align:center; font-size:22px; font-weight:600; letter-spacing:.55em; text-indent:.55em; font-variant-numeric:tabular-nums; padding:13px; }
.stack #code::placeholder, .stack #pin::placeholder{ font-weight:400; color:rgba(243,240,233,.22); }
/* PIN-panelens rubrik + hint — samma centrering som MFA-panelen */
.stack #pinForm h2{ text-align:center; margin-bottom:8px; }
.stack .link{ color:var(--primary-lite); text-decoration:none; font-weight:500; }
.stack .link:hover{ text-decoration:underline; }

.stack .btn{
  width:100%; font-family:inherit; font-size:15px; font-weight:500; color:#fff;
  background:var(--primary); border:1px solid var(--primary); border-radius:var(--radius-sm);
  padding:12px 16px; cursor:pointer; transition:background .15s, opacity .15s, transform .1s, box-shadow .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 6px 18px -6px rgba(var(--primary-rgb),.6);
}
.stack .btn:hover{ background:color-mix(in srgb,var(--primary) 88%,#fff 12%); }
.stack .btn:active{ transform:translateY(1px); }
.stack .btn[disabled]{ cursor:default; opacity:.7; box-shadow:none; }
.stack .btn .spinner-border{ width:16px; height:16px; border-width:2px; }

.stack .divider{ display:flex; align-items:center; gap:14px; margin:18px 0; color:var(--ink-dim); font-size:12px; text-transform:lowercase; }
.stack .divider::before,.stack .divider::after{ content:""; flex:1; height:1px; background:var(--line); }

.stack .btn-ghost{
  width:100%; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink);
  background:transparent; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:11px 16px; cursor:pointer; transition:border-color .15s, background .15s; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
}
.stack .btn-ghost:hover{ border-color:rgba(243,240,233,.32); background:rgba(243,240,233,.05); color:var(--ink); }
.stack .btn-ghost .key{ width:15px; height:15px; }

/* Status-text — den NYA notifieringen (subtil, färgkodad). Kollapsar när tom.
   Används i login-panelen (#loginStatus) och 2FA-modalen (#2fa_status). */
.status{ font-size:13px; text-align:center; color:var(--ink-dim); opacity:0; max-height:0; overflow:hidden; margin:0; transition:opacity .2s, max-height .2s, margin .2s; }
.status.show{ opacity:1; max-height:64px; margin:0 0 16px; }
.status.ok{ color:var(--success); }
.status.err{ color:var(--danger); }
.modal .status.show{ margin:0 0 12px; }

.stack .legal{ font-size:11.5px; color:var(--ink-dim); text-align:center; margin-top:18px; line-height:1.55; }
.stack .legal a{ color:var(--primary-lite); text-decoration:none; }
.stack .legal a:hover{ text-decoration:underline; }

/* ===== Bootstrap-overrides så modaler/alerts passar dark-temat ===== */
.bg-primary{ background-color:var(--primary)!important; }
.btn-primary{ --bs-btn-bg:var(--primary); --bs-btn-border-color:var(--primary); --bs-btn-hover-bg:#3873b9; --bs-btn-hover-border-color:#3873b9; }
.modal-content{ background:#26241f; color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius-lg); }
.modal-header{ border-bottom:1px solid var(--line); }
.modal-footer{ border-top:1px solid var(--line); }
.modal .form-control{ background:rgba(243,240,233,.05); border:1px solid var(--line-strong); color:var(--ink); }
.modal .form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(var(--primary-rgb),.22); background:rgba(243,240,233,.07); color:var(--ink); }
.modal .form-label{ color:var(--ink-faint); }
.modal .table{ --bs-table-color:var(--ink); --bs-table-bg:transparent; --bs-table-border-color:var(--line); }
.modal .bg-light{ background:rgba(243,240,233,.05)!important; color:var(--ink)!important; }
.modal .alert-info{ background:rgba(var(--primary-rgb),.12); border-color:rgba(var(--primary-rgb),.3); color:var(--ink); }

/* ===== Legal-modaler (Terms & Conditions / Cookie Policy) — matchar login-temat =====
   Egen, lugn typografi i samma serif/ink-stil som login-panelerna i stället för
   Bootstraps blå header + bg-light-boxar. */
.legal-modal .modal-content{ overflow:hidden; }
.legal-modal .modal-header{ background:transparent; border-bottom:1px solid var(--line); padding:20px 26px; }
.legal-modal .modal-title{ font-family:var(--serif); font-weight:500; font-size:20px; letter-spacing:-.01em; color:var(--ink); }
.legal-modal .modal-body{ padding:26px; font-size:14px; line-height:1.6; color:var(--ink-dim); }
.legal-modal .modal-body h6{ font-family:var(--serif); font-weight:600; font-size:15.5px; color:var(--ink); margin:24px 0 8px; }
.legal-modal .modal-body h6:first-child{ margin-top:0; }
.legal-modal .modal-body p{ margin:0 0 12px; }
.legal-modal .modal-body ul{ margin:0 0 14px; padding-left:20px; }
.legal-modal .modal-body li{ margin-bottom:5px; }
.legal-modal .modal-body strong{ color:var(--ink); font-weight:600; }
.legal-modal .legal-box{ background:var(--field); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:0 0 16px; }
.legal-modal .legal-box ul{ margin-bottom:0; }
.legal-modal .legal-box .box-title{ font-family:var(--serif); font-weight:600; font-size:14.5px; color:var(--primary-lite); margin:0 0 8px; }
.legal-modal .last-updated{ color:var(--ink-faint); font-size:12px; margin:22px 0 0; }
.legal-modal .modal-footer{ border-top:1px solid var(--line); padding:16px 26px; }
.legal-modal .modal-footer .btn-close-text{
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink);
  background:transparent; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:9px 20px; cursor:pointer; transition:border-color .15s, background .15s;
}
.legal-modal .modal-footer .btn-close-text:hover{ border-color:rgba(243,240,233,.32); background:rgba(243,240,233,.05); }

@media (max-width:480px){ .stack .panel{ padding:28px 22px 24px; } }
</content>
</invoke>