/* DELAD UR style-admin.css (KAN-388 CSS-1): rad 4629-5082, byte-exakt; login screen. Laddas direkt efter föregående del i index.html. */
/* =============================================================================
PREMIUM LOGIN SCREEN  (.ln-* prefix = login namespace)
============================================================================= */

.ln-overlay {
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 22%, rgba(0,212,180,0.09) 0%, transparent 66%),
linear-gradient(160deg, rgba(6,9,15,0.88) 0%, rgba(6,10,18,0.94) 52%, rgba(4,8,15,0.98) 100%),
var(--bg-image);
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
z-index: 99998;
overflow: hidden;
padding: clamp(18px, 4vh, 42px);
box-sizing: border-box;
}

.ln-blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(80px);
}
.ln-blob1 {
width: 400px; height: 400px;
top: -100px; left: -100px;
background: radial-gradient(circle, rgba(0,212,180,0.05) 0%, transparent 70%);
}
.ln-blob2 {
width: 350px; height: 350px;
bottom: -80px; right: -60px;
background: radial-gradient(circle, rgba(0,100,255,0.04) 0%, transparent 70%);
}

.ln-card {
width: min(372px, calc(100vw - 42px));
max-width: 92vw;
background: linear-gradient(160deg, #0d1422 0%, #080c14 55%, #0a0e1a 100%);
border-radius: 26px;
border: 1px solid rgba(0,212,180,0.12);
box-shadow:
0 32px 90px rgba(0,0,0,0.75),
0 0 0 1px rgba(255,255,255,0.03),
inset 0 1px 0 rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
padding: 34px 0 26px;
animation: lnCardIn 0.55s cubic-bezier(0.34, 1.52, 0.64, 1) both;
}

html.atlas-light-theme #login-modal .ln-card {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}

html.atlas-light-theme #login-modal .ln-input {
transition: none !important;
}

@keyframes lnCardIn {
from { opacity: 0; transform: scale(0.82) translateY(16px); }
to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ln-card-glow {
position: absolute;
top: -80px; left: 50%;
transform: translateX(-50%);
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(0,212,180,0.07) 0%, transparent 68%);
pointer-events: none;
}

/* Logo */
.ln-logo-wrap {
position: relative;
width: 100px; height: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
margin-bottom: 16px;
}
.ln-ring-pulse {
position: absolute;
inset: -12px;
border-radius: 50%;
border: 1.5px solid rgba(0,212,180,0.32);
box-shadow:
0 0 26px rgba(0,212,180,0.12),
inset 0 0 18px rgba(0,212,180,0.06);
animation: lnRingPulse 2.8s ease-in-out infinite;
}
.ln-ring-pulse.ln-delay {
inset: -22px;
border-color: rgba(0,212,180,0.14);
animation-delay: 0.7s;
}
@keyframes lnRingPulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50%       { opacity: 1;   transform: scale(1.03); }
}
.ln-ring-spin {
position: absolute;
inset: -5px;
border-radius: 50%;
border: 2.5px solid transparent;
border-top-color: #00d4b4;
border-right-color: rgba(0,212,180,0.2);
filter: drop-shadow(0 0 8px rgba(0,212,180,0.45));
animation: lnSpin 1.8s linear infinite;
}
@keyframes lnSpin { to { transform: rotate(360deg); } }

.ln-logo-circle {
width: 90px; height: 90px;
border-radius: 50%;
background: linear-gradient(145deg, #101826, #070b11);
border: 1.5px solid rgba(0,212,180,0.18);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
overflow: hidden;
}
.ln-logo-wrap.tenant-logo-mode {
width: 110px;
height: 100px;
margin-bottom: 18px;
}
.ln-logo-wrap.tenant-logo-mode ~ .ln-app-name {
display: none !important;
}
.ln-logo-circle.has-tenant-logo {
width: 90px;
height: 90px;
border-radius: 50%;
background: radial-gradient(circle at 50% 42%, rgba(0,212,180,0.12) 0%, rgba(7,11,17,0.86) 58%, #060a10 100%);
box-shadow:
0 16px 34px rgba(0,0,0,0.34),
0 0 0 1px rgba(0,212,180,0.2),
0 0 30px rgba(0,212,180,0.14);
padding: 6px;
box-sizing: border-box;
}
.ln-logo-img {
width: 54px; height: 54px;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(0,212,180,0.5));
animation: lnLogoPulse 3s ease-in-out infinite;
}
.ln-logo-circle.has-tenant-logo .ln-logo-img {
width: 100%;
height: 100%;
filter:
drop-shadow(0 0 10px rgba(255,255,255,0.18))
drop-shadow(0 0 14px rgba(0,212,180,0.28));
animation: none;
opacity: 1;
}
@keyframes lnLogoPulse {
0%, 100% { filter: drop-shadow(0 0 8px  rgba(0,212,180,0.45)); }
50%       { filter: drop-shadow(0 0 18px rgba(0,212,180,0.75)); }
}
.ln-logo-fallback {
display: none;
font-size: 26px;
font-weight: 900;
letter-spacing: 4px;
color: #fff;
text-shadow: 0 0 16px rgba(0,212,180,0.7);
}

/* Text */
.ln-app-name {
font-size: 17px;
font-weight: 800;
letter-spacing: 6px;
color: #ffffff;
text-shadow: 0 0 24px rgba(0,212,180,0.35);
margin-bottom: 4px;
}
.ln-tagline {
font-size: var(--text-badge-min-size);
letter-spacing: 2.5px;
color: rgba(0,212,180,0.5);
text-transform: uppercase;
margin-bottom: 20px;
}
.ln-tagline.tenant-brand {
width: 230px;
max-width: 86%;
font-size: 10.5px;
line-height: 1.35;
letter-spacing: 0.8px;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
color: rgba(0,212,180,0.72);
margin-bottom: 14px;
}

/* "Logga in för att fortsätta"-prompt */
.ln-prompt {
display: none;
}

/* Divider */
.ln-divider {
width: 200px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,212,180,0.18), transparent);
margin-bottom: 14px;
}

/* Form */
.ln-form {
width: 100%;
box-sizing: border-box;
max-width: 286px;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ln-field { position: relative; }
.ln-field-icon {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
color: rgba(255,255,255,0.48);
pointer-events: none;
}
#login-modal .ln-input,
#login-form .ln-input {
width: 100%;
box-sizing: border-box;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
height: 40px;
line-height: 40px;
padding: 0 12px 0 52px !important;
color: rgba(255,255,255,0.9);
font-size: 12px;
font-family: inherit;
letter-spacing: 0.2px;
outline: none;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ln-input::placeholder { color: rgba(255,255,255,0.48); font-size: 11.5px; }
.ln-input:-webkit-autofill,
.ln-input:-webkit-autofill:hover,
.ln-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #0d1422 inset !important;
-webkit-text-fill-color: rgba(255,255,255,0.9) !important;
border-color: rgba(255,255,255,0.08) !important;
}
.ln-input:focus {
border-color: rgba(0,212,180,0.4);
background: rgba(0,212,180,0.05);
box-shadow: 0 0 0 3px rgba(0,212,180,0.08);
}

/* Felmeddelande */
.ln-error {
font-size: 10px;
color: #ff6b6b;
min-height: 0;
height: 0;
margin: 0;
opacity: 0;
overflow: hidden;
transition: opacity 0.2s ease;
text-align: center;
}
.ln-error.visible {
height: auto;
min-height: 14px;
opacity: 1;
}

.ln-company-name {
min-height: 14px;
margin: -2px 0 -2px;
font-size: 10.5px;
line-height: 1.2;
letter-spacing: 0.8px;
text-align: center;
text-transform: uppercase;
color: rgba(0,212,180,0.72);
white-space: normal;
overflow-wrap: anywhere;
}
.ln-company-name:empty {
display: none;
}

/* Knapp */
.ln-btn {
display: block;
width: 100%;
max-width: 240px;
height: 36px;
background: linear-gradient(135deg, #00b89d 0%, #00d4b4 100%) !important;
border: none !important;
border-radius: 10px;
color: #040d12 !important;
font-weight: 700;
font-size: 12px;
letter-spacing: 1.5px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: opacity 0.2s, transform 0.15s;
margin: 2px auto 0;
text-transform: uppercase;
}
.ln-btn:hover  { opacity: 0.88; }
.ln-btn:active  { transform: scale(0.98); }
.ln-btn:disabled {
opacity: 0.28;
cursor: not-allowed;
}
.ln-btn-shimmer {
position: absolute;
top: 0; left: -80px;
width: 50px; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
animation: lnShimmer 2.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes lnShimmer {
0%   { left: -80px; opacity: 0; }
30%  { opacity: 1; }
100% { left: 110%; opacity: 0; }
}

/* Progress-rad + "Redo." — visuell statusindikator under login-knappen */
.ln-progress-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin-top: 6px;
}
.ln-progress-bar {
width: 100%;
max-width: 160px;
height: 2px;
background: linear-gradient(90deg, rgba(0,212,180,0.65), rgba(0,212,180,0.35));
border-radius: 1px;
}
.ln-progress-bar::after {
content: none;
}
.ln-progress-label {
font-size: var(--text-badge-min-size);
color: rgba(255,255,255,0.44);
letter-spacing: 1.5px;
}

/* Footer */
.ln-version {
font-size: var(--text-badge-min-size);
color: rgba(255,255,255,0.3);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 22px;
margin-bottom: 4px;
}
.ln-dots { display: flex; gap: 7px; margin-top: 10px; }
.ln-dot  { width: 6px; height: 6px; border-radius: 50%; }
.ln-dot.ln-red    { background: #ff3b30; box-shadow: 0 0 6px rgba(255,59,48,0.7); }
.ln-dot.ln-yellow { background: #ffd60a; box-shadow: 0 0 6px rgba(255,214,10,0.7); }
.ln-dot.ln-green  { background: #30d158; box-shadow: 0 0 6px rgba(48,209,88,0.7); }

body.capacitor-client .ln-overlay {
align-items: stretch;
padding: 0;
background:
radial-gradient(ellipse 95% 52% at 50% 14%, rgba(0,212,180,0.14) 0%, transparent 68%),
linear-gradient(180deg, rgba(7,12,20,0.98) 0%, rgba(6,10,18,0.98) 56%, rgba(3,7,13,1) 100%),
var(--bg-image);
background-position: center;
background-size: cover;
}

body.capacitor-client .ln-blob {
display: none;
}

body.capacitor-client .ln-card {
width: 100%;
max-width: none;
min-height: 100dvh;
border-radius: 0;
border: 0;
border-top: 3px solid rgba(0,212,180,0.72);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
justify-content: center;
padding: max(34px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
}

body.capacitor-client .ln-logo-wrap {
width: 124px;
height: 118px;
margin-top: 0;
margin-bottom: 18px;
}

body.capacitor-client .ln-logo-wrap.tenant-logo-mode {
width: 132px;
height: 124px;
}

body.capacitor-client .ln-ring-pulse {
inset: -18px;
}

body.capacitor-client .ln-ring-pulse.ln-delay {
inset: -31px;
}

body.capacitor-client .ln-ring-spin {
inset: -8px;
border-width: 3px;
}

body.capacitor-client .ln-logo-circle,
body.capacitor-client .ln-logo-circle.has-tenant-logo {
width: 100px;
height: 100px;
}

body.capacitor-client .ln-form {
max-width: 328px;
}

body.capacitor-client .ln-version {
margin-top: 28px;
}