/* ============================================================
   SentinelCRM – přihlašovací stránka
   Kompozice: levý tmavý panel (brand → hero → features → preview)
              pravá světlá karta „Vítejte zpět“.
   Login je záměrně MIMO přepínač motivu: levý panel je vždy tmavý,
   pravá karta vždy světlá → barvy jsou tady explicitní (ne tokeny).
   Poloměry a časy berou tokeny z app.css, fallback = hodnota ze specu.
   ============================================================ */
.login-wrapper, .login-wrapper * { margin: 0; padding: 0; box-sizing: border-box; }

.login-wrapper {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh; /* mobil: karta nepodskakuje pod adresní lištu */
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: #f8fafc;
}

/* ---------------- LEVÝ PANEL ---------------- */
.left-panel {
    --col: 580px; /* společná šířka sloupce: hero = features = preview karta */
    flex: 0 0 52%;
    position: relative;
    overflow: hidden;
    padding: 46px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    color: #fff;
    background:
        radial-gradient(120% 90% at 100% 0%, #123a7d 0%, transparent 55%),
        radial-gradient(80% 70% at 0% 100%, #10265a 0%, transparent 60%),
        linear-gradient(160deg, #050b1c 0%, #0a1628 55%, #071022 100%);
}
/* hvězdy */
.left-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.2px 1.2px at 62% 12%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.6px 1.6px at 41% 47%, rgba(147,197,253,.55), transparent),
        radial-gradient(1.2px 1.2px at 76% 58%, rgba(255,255,255,.35), transparent),
        radial-gradient(1.4px 1.4px at 88% 30%, rgba(255,255,255,.4), transparent),
        radial-gradient(1.2px 1.2px at 30% 74%, rgba(255,255,255,.3), transparent);
}
/* velká zářící koule vpravo nahoře */
.orb-main {
    position: absolute; top: -110px; right: -90px; width: 420px; height: 420px; border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(147,197,253,.55) 0%, rgba(59,130,246,.42) 32%, rgba(29,78,216,.30) 55%, rgba(12,32,80,0) 72%);
    filter: blur(2px);
    pointer-events: none;
}
.orb-soft {
    position: absolute; bottom: -120px; left: -110px; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(37,99,235,.22), transparent 70%);
    pointer-events: none;
}

.login-wrapper .brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.login-wrapper .brand svg { width: 40px; height: 40px; flex: none; display: block; }
.login-wrapper .brand .word { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1; }
.login-wrapper .brand .word b { color: #3b82f6; font-weight: 800; }

.hero { position: relative; z-index: 2; max-width: var(--col); }
.hero h1 { font-size: 52px; line-height: 1.06; font-weight: 800; letter-spacing: -.032em; color: #fff; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: #3b82f6; }
.hero p { font-size: 16px; line-height: 1.65; color: #94a3b8; max-width: 520px; }

.features { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; max-width: var(--col); }
.feature-item { display: flex; align-items: flex-start; gap: 16px; }
.feature-icon {
    width: 44px; height: 44px; border-radius: var(--r-md, 8px); flex: none;
    background: rgba(59,130,246,.12); border: 1px solid rgba(148,163,184,.16);
    display: flex; align-items: center; justify-content: center; color: #cbd5e1;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-item h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; letter-spacing: -.01em; }
.feature-item p { font-size: 14px; line-height: 1.5; color: #94a3b8; }

/* ---- preview karta ---- */
.preview-card {
    position: relative; z-index: 2; display: flex; overflow: hidden;
    border-radius: var(--r-xl, 14px); border: 1px solid rgba(96,165,250,.18);
    background: rgba(10,22,42,.72); backdrop-filter: blur(18px);
    box-shadow: 0 12px 32px rgba(2,6,23,.5); /* neutrální elevace, ne barevná záře */
    /* Karta je ZÁMĚRNĚ širší než hero i features (ty drží --col). Do 580 px se čtyři
       dlaždice nevejdou – popisky se ořežou na „Otevřené příležit…“. Viz předloha. */
    max-width: 680px;
}
.preview-rail {
    width: 56px; flex: none; padding: 14px 0; background: rgba(255,255,255,.03);
    border-right: 1px solid rgba(148,163,184,.10);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.preview-rail svg { width: 18px; height: 18px; color: #94a3b8; } /* kontrast 7:1 na skle */
.preview-rail .rail-logo svg { width: 26px; height: 26px; color: inherit; }
.preview-rail .on svg { color: #3b82f6; }
.preview-body { flex: 1; min-width: 0; padding: 16px 18px 18px; }
.preview-body h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -.01em; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { padding: 12px; border-radius: var(--r-md, 8px); background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.10); }
/* jen popisek nad hodnotou – selektor nesmí chytit i .trend (taky <span>) */
.stat > span:first-child { display: block; color: #94a3b8; font-size: 11px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* nowrap: bez něj se „320 000 Kč“ zalomí na dva řádky a dlaždice si přestanou být rovné */
.stat strong { font-size: 19px; font-weight: 700; color: #fff; display: block; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat .trend { font-size: 11px; font-weight: 600; margin: 4px 0 0; display: inline-block; font-variant-numeric: tabular-nums; }
.trend.up { color: #22c55e; } .trend.down { color: #ef4444; }

.pipe-title { font-size: 12px; font-weight: 700; color: #cbd5e1; margin: 4px 0 10px; }
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pipe span.nm { display: block; font-size: 11px; color: #cbd5e1; font-weight: 600; margin-bottom: 6px; white-space: nowrap; }
.pipe strong { display: block; font-size: 19px; font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.pipe em { display: block; font-style: normal; font-size: 10px; color: #94a3b8; margin: 3px 0 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pipe i { display: block; height: 3px; border-radius: var(--r-xs, 4px); }

/* ---------------- PRAVÝ PANEL ---------------- */
.right-panel {
    flex: 1; background: #f8fafc;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 32px;
}
.login-wrapper .login-card {
    width: 100%; max-width: 460px; background: #fff; border: 1px solid #e6eaf0;
    border-radius: var(--r-xl, 14px); padding: 44px 44px 40px;
    box-shadow: 0 12px 32px rgba(15,23,42,.10); /* neutrální elevace */
}
.login-head { text-align: center; margin-bottom: 30px; }
/* obrysové logo: žádný drop-shadow – sledoval by alfu a udělal z každé čáry modrého ducha */
.login-head .logo-lg { width: 64px; height: 64px; margin: 0 auto 18px; display: block; }
.login-head .logo-lg svg { width: 100%; height: 100%; display: block; }
.login-head h2 { font-size: 28px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; margin-bottom: 8px; line-height: 1.2; }
.login-head p { color: #64748b; font-size: 14px; }

.login-wrapper .form-group { margin-bottom: 18px; }
.login-wrapper .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #334155; font-size: 13px; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper .ic {
    position: absolute; left: 16px; width: 18px; height: 18px; color: #94a3b8; pointer-events: none;
    transition: color var(--dur-base, 180ms) var(--ease, cubic-bezier(.22,.61,.36,1));
}
.input-wrapper:focus-within .ic { color: #2563eb; } /* fokus se propíše celým polem */
.input-wrapper input {
    width: 100%; height: 48px; padding: 0 46px;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 8px); font-size: 14px; font-family: inherit;
    background: #fff; color: #0f172a;
    transition: border-color var(--dur-base, 180ms) var(--ease, cubic-bezier(.22,.61,.36,1)),
                box-shadow var(--dur-base, 180ms) var(--ease, cubic-bezier(.22,.61,.36,1));
}
.input-wrapper input::placeholder { color: #94a3b8; }
.input-wrapper input:hover:not(:focus) { border-color: #cbd5e1; }
.input-wrapper input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.20); }
.input-wrapper input:focus-visible { outline: none; } /* pole má vlastní prstenec */
.eye-btn {
    position: absolute; right: 10px; width: 32px; height: 32px; border: 0; background: transparent;
    color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm, 6px);
    transition: color var(--dur-fast, 120ms) var(--ease, cubic-bezier(.22,.61,.36,1)),
                background var(--dur-fast, 120ms) var(--ease, cubic-bezier(.22,.61,.36,1));
}
.eye-btn:hover { color: #475569; background: #f1f5f9; }
.eye-btn:active { color: #334155; background: #e2e8f0; }
.eye-btn svg { width: 18px; height: 18px; }

.form-options { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 22px; font-size: 13px; }
.login-wrapper .checkbox { display: flex; align-items: center; gap: 9px; color: #475569; cursor: pointer; }
.login-wrapper .checkbox input { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; }
.forgot-link { color: #2563eb; text-decoration: none; font-weight: 600; transition: color var(--dur-fast, 120ms) var(--ease, cubic-bezier(.22,.61,.36,1)); }
.forgot-link:hover { color: #1d4ed8; text-decoration: underline; }

.login-btn {
    width: 100%; height: 48px; border: 0; border-radius: var(--r-md, 8px); cursor: pointer; font-family: inherit;
    background: #2563eb; color: #fff; font-size: 15px; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14); /* jediná povolená „hloubka“ */
    transition: background var(--dur-fast, 120ms) var(--ease, cubic-bezier(.22,.61,.36,1));
}
.login-btn:hover { background: #1d4ed8; }
.login-btn:active { background: #1e40af; }
.login-btn:disabled { opacity: .6; cursor: not-allowed; background: #2563eb; }

.login-foot { text-align: center; margin-top: 28px; color: #64748b; font-size: 13px; }
.login-foot a { color: #2563eb; text-decoration: none; font-weight: 600; transition: color var(--dur-fast, 120ms) var(--ease, cubic-bezier(.22,.61,.36,1)); }
.login-foot a:hover { color: #1d4ed8; text-decoration: underline; }
.copyright { margin-top: 22px; color: #94a3b8; font-size: 12px; }

.login-error {
    background: #fdecec; border: 1px solid #fecaca; color: #b91c1c;
    padding: 11px 14px; border-radius: var(--r-lg, 10px); font-size: 13px; margin-bottom: 18px; text-align: center;
}

/* ---------------- FOKUS ---------------- */
/* jeden fokusový jazyk pro celou stránku, vždy :focus-visible (ne :focus).
   Rádius se tu ZÁMĚRNĚ nenastavuje – přebil by vlastní rádius tlačítka i polí
   a prvky by při průchodu Tabem viditelně skákaly. */
.login-wrapper :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.left-panel :focus-visible { outline-color: #93c5fd; } /* na tmavém podkladu */

/* ---------------- AUTOFILL ---------------- */
/* Bez tohohle maluje Chrome vyplněná pole olivově žlutě. Karta je vždy bílá. */
.login-wrapper input:-webkit-autofill,
.login-wrapper input:-webkit-autofill:hover,
.login-wrapper input:-webkit-autofill:focus,
.login-wrapper input:-webkit-autofill:active {
    -webkit-text-fill-color: #0f172a;
    -webkit-background-clip: text;
    background-clip: text;
    caret-color: #0f172a;
    box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 100000s ease-in-out 0s,
                border-color var(--dur-base, 180ms) var(--ease, cubic-bezier(.22,.61,.36,1)),
                box-shadow var(--dur-base, 180ms) var(--ease, cubic-bezier(.22,.61,.36,1));
}
/* fokusový prstenec musí přežít i na vyplněném poli */
.login-wrapper input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(37,99,235,.20);
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1250px) {
    .left-panel { display: none; }
    .right-panel { flex: 1; }
}
@media (max-width: 640px) {
    .right-panel { padding: 20px; }
    .login-wrapper .login-card { padding: 28px 22px; border-radius: var(--r-lg, 10px); box-shadow: none; border: 1px solid #e2e8f0; }
    .form-options { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* 4 dlaždice se sem nevejdou – „Otevřené přílež…“ není výchozí stav */
@media (min-width: 1251px) and (max-width: 1440px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 900px) and (min-width: 1251px) {
    .hero h1 { font-size: 42px; }
    .left-panel { padding: 34px 44px; gap: 22px; }
}
/* Na nízkých displejích (typicky notebook 768 px) se preview karta nevejde a levý panel
   ji kvůli overflow:hidden uřízne v půlce – to vypadá rozbitě. Radši ji schovat celou:
   hero a feature list nesou sdělení sami. */
@media (max-height: 840px) and (min-width: 1251px) {
    .preview-card { display: none; }
}
/* dotyk: cíle min. 44×44 */
@media (pointer: coarse) {
    .eye-btn { min-width: 44px; min-height: 44px; right: 6px; }
    .input-wrapper input { padding-right: 58px; }
}

/* ---------------- OMEZENÝ POHYB ---------------- */
@media (prefers-reduced-motion: reduce) {
    .login-wrapper *, .login-wrapper *::before, .login-wrapper *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}