/* ============================================================
   Сторінки входу і реєстрації (гостьові). Дві колонки: ліворуч дія,
   праворуч — що це за система. Вантажиться лише для незалогінених
   (layout.php), тож на робочі сторінки нічого не важить.
   Кольори — лише токенами: працює в усіх денних темах і в ночі.
   ============================================================ */

.lg-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--surface, #fff);
}

/* ---------- ліва колонка: форма ---------- */
.lg-form-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.lg-form {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.lg-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text, #0f172a);
}
/* Марка продукту = favicon.svg (він уже зі своїм фоном і скругленням). */
.lg-brand-mark {
    width: 30px; height: 30px;
    display: block;
    border-radius: 7px;
    flex: 0 0 auto;
}
.lg-title { font-size: 22px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.lg-sub   { font-size: 13.5px; color: var(--muted, #64748b); margin: 4px 0 0; }

.lg-field { display: flex; flex-direction: column; gap: 5px; }
.lg-label { font-size: 12.5px; font-weight: 500; color: var(--muted, #64748b); }
.lg-wrap .form-control { font-size: 14px; padding: 9px 12px; }

.lg-tenant-toggle {
    align-self: flex-start;
    background: none; border: 0; padding: 0;
    font-size: 12.5px; color: var(--muted, #64748b);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.lg-tenant-toggle:hover { color: var(--text, #0f172a); }

/* Головна дія. НЕ btn-dark: у нічній темі темна кнопка на темному тлі
   зливалась. --color-info — акцент платформи, він читається в обох темах. */
/* ПАСТКА Bootstrap: у голого .btn (без btn-primary тощо) змінна
   --bs-btn-hover-bg порожня, і правило .btn:hover робить фон ПРОЗОРИМ —
   кнопка зникала під курсором. Тому колір задаємо для всіх станів явно
   через background-color (не shorthand), інакше hover-правило бутстрапа
   перекриває його. */
.lg-submit,
.lg-submit:hover,
.lg-submit:focus,
.lg-submit:active,
.lg-submit:disabled {
    background-color: var(--color-info, #378ADD);
    border: 1px solid var(--color-info, #378ADD);
    color: #fff;
}
.lg-submit {
    width: 100%; padding: 10px 14px;
    font-size: 14px; font-weight: 600;
    border-radius: var(--radius-md, 6px);
    transition: filter .12s ease;
}
.lg-submit:hover { filter: brightness(1.07); }
.lg-submit:active { filter: brightness(.95); }
.lg-submit:focus-visible { outline: 2px solid var(--color-info, #378ADD); outline-offset: 2px; }
.lg-alt {
    font-size: 13px; color: var(--muted, #64748b);
    text-align: center; margin: 0;
}
.lg-alt a { font-weight: 600; }
/* Підпис авторства й версія — найтихіший рядок на сторінці: він має бути,
   але не сперечатись за увагу з формою входу. */
.lg-foot {
    font-size: 11.5px;
    color: var(--muted, #64748b);
    opacity: .8;
    text-align: center;
    margin: 4px 0 0;
    line-height: 1.5;
    letter-spacing: .01em;
    text-wrap: balance;        /* імена не мають ламатись посередині */
}
/* «Developed by» — службове, тому ще тихіше за самі імена. */
.lg-foot-by { opacity: .7; }


/* ---------- права колонка: про продукт ---------- */
.lg-pitch-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    padding: 48px 44px;
    background: var(--bg-soft, #f1f5f9);
    border-left: 1px solid var(--border, #e2e8f0);
}
.lg-pitch-title {
    font-size: clamp(21px, 2.4vw, 27px);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.015em;
    margin: 0;
    /* 26ch, а не 22: на 22 заголовок ламався так, що «в одному місці» їхало
       окремим рядком-хвостом. balance розкладає рядки рівномірно. */
    max-width: 26ch;
    text-wrap: balance;
}
.lg-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 40ch; }
.lg-point { display: flex; gap: 12px; align-items: flex-start; }
.lg-point i {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    color: var(--primary, #0f172a);
    font-size: 14px;
}
.lg-point-t { font-size: 14px; font-weight: 600; margin: 0 0 1px; }
.lg-point-d { font-size: 13px; color: var(--muted, #64748b); margin: 0; line-height: 1.5; }

/* ---------- мобільний: панель продукту зникає, лишається дія ---------- */
@media (max-width: 860px) {
    .lg-wrap { grid-template-columns: 1fr; }
    .lg-pitch-col { display: none; }
    .lg-form-col { padding: 32px 20px; }
}


/* Вибір мови — тихий службовий рядок під формою. */
.lg-lang { margin: 0; text-align: center; font-size: 12.5px; letter-spacing: .02em; }
.lg-lang a {
    color: var(--muted, #64748b);
    text-decoration: none;
    padding: 0 2px;
}
.lg-lang a:hover { color: var(--text, #0f172a); text-decoration: underline; }