/* ⚠️ Блок :root нижче продубльовано в apps/ok-web/public/style.css СВІДОМО:
 * тему віддає Keycloak власним томом, і посилатися на статику ok-edge вона не
 * може — інакше сторінка входу залежала б від доступності кабінету.
 * Джерело істини для значень — docs/design/kc-login.html. Правити в обох.
 */
/* ─────────────────────────────────────────────────────────────
   Тема входу ОК. Кольори — з логотипа «Нафтогаз Трейдинг»
   (#0C375E знято піпеткою з файлу знака).

   ⚠️ Селектори Keycloak нижче звірені з базовою темою і можуть
   різнитися між версіями (PatternFly 4 → 5 перейменував класи).
   Перед правкою — подивитись реальну розмітку сторінки входу
   розгорнутого Keycloak, а не покладатись на цей файл.
   ───────────────────────────────────────────────────────────── */
:root{
  --ng-navy:#0C375E;        /* фірмовий синій: заголовки, наведення */
  --ng-blue:#12558F;        /* дія: кнопка, посилання, фокус */
  --ng-accent:#FFC20E;      /* єдиний акцент: риска у верхньому куті */
  --ng-sky:#EDF2F8;         /* заливка полів і підказок */
  --ng-ink:#16202B;
  --ng-muted:#5D6B7A;
  --ng-line:#D9E1EA;
  --ng-danger:#B3261E;
  --ng-danger-bg:#FDECEA;
  --r-sm:6px;

  /* ⚠️ Інтернету в периметрі замовника немає (CLAUDE.md §10).
     Або файли шрифту лежать у resources/fonts і підключаються
     через @font-face, або лишається системний стек. CDN — ні. */
  --font:"Inter","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:var(--font); color:var(--ng-ink); background:#fff;
     -webkit-font-smoothing:antialiased}

/* ── каркас сторінки ───────────────────────────────────────── */
.ok-page{min-height:100vh; display:grid; grid-template-columns:.84fr 1fr}

/* ── банер ─────────────────────────────────────────────────────
   Фон двома шарами background-image: оверлей поверх графіки.
   Щоб поставити фото з шапки сайта — замінити banner.svg на
   banner.jpg у другому url(); оверлей тримає контраст сам. */
.ok-brand{
  align-self:start; height:100vh; position:sticky; top:0;
  overflow:hidden; color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:0 40px 48px;
  background-color:#12507F;
  background-image:
    linear-gradient(180deg,rgba(10,44,74,.42) 0%,rgba(10,44,74,.20) 45%,rgba(10,44,74,.66) 100%),
    url("../img/banner.svg");
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
/* ⚠️ Риска — звичайний елемент, не ::before. Псевдоелемент із
   position:absolute рахує координати від позиціонованого предка,
   і там, де sticky не підтримується, відлітає у верх сторінки. */
.ok-accent{width:56px; height:4px; background:var(--ng-accent); margin-bottom:34px}

.ok-logo{display:flex; align-items:center; gap:14px}
.ok-mark{
  width:44px !important; height:44px !important; flex:0 0 44px;
  border-radius:var(--r-sm); overflow:hidden; display:block;
  box-shadow:0 2px 10px rgba(6,32,56,.28);
}
/* ⚠️ Розмір знака прибитий і тут, і атрибутами width/height у
   розмітці: деякі оболонки підставляють власне img{width:100%}. */
.ok-mark img{width:44px !important; height:44px !important; max-width:44px !important;
             display:block; object-fit:contain}
.ok-logo-text{font-weight:700; letter-spacing:.14em; font-size:12px;
              text-transform:uppercase; line-height:1.5}
.ok-logo-text span{display:block; font-weight:400; letter-spacing:.06em; opacity:.72}

.ok-brand-mid{padding:27px 0 52px}
.ok-brand-mid h1{font-size:clamp(32px,3.6vw,46px); line-height:1.1; font-weight:700;
                 margin:0 0 16px; letter-spacing:-.01em; max-width:13ch}
.ok-brand-mid p{margin:0; max-width:44ch; color:rgba(255,255,255,.82);
                line-height:1.6; font-size:15px}

.ok-brand-foot{font-size:13px; color:rgba(255,255,255,.68); line-height:1.9}
.ok-brand-foot a{color:#fff; text-decoration:none;
                 border-bottom:1px solid rgba(255,255,255,.3)}

/* ── колонка з формою ──────────────────────────────────────── */
.ok-pane{display:flex; flex-direction:column; padding:28px 40px 40px; background:#fff}
.ok-pane-top{display:flex; justify-content:flex-end}
.ok-card{width:100%; max-width:400px; margin:auto}
.ok-eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase;
            color:var(--ng-blue); font-weight:600; margin:0 0 10px}
.ok-pane h1, #kc-page-title{
  font-size:clamp(22px,2.2vw,26px); line-height:1.25; margin:0 0 8px;
  font-weight:700; letter-spacing:-.01em; color:var(--ng-navy);
}
.ok-lede{margin:0 0 26px; color:var(--ng-muted); font-size:14px; line-height:1.6}
.ok-pane-foot{margin-top:32px; padding-top:18px; border-top:1px solid var(--ng-line);
              font-size:12px; color:var(--ng-muted); display:flex;
              justify-content:space-between; gap:12px; flex-wrap:wrap}
.ok-pane-foot a{color:var(--ng-muted); text-decoration:none}
.ok-pane-foot a:hover{color:var(--ng-blue)}

/* перемикач мови (Keycloak: #kc-locale) */
#kc-locale{display:inline-flex; border:1px solid var(--ng-line);
           border-radius:99px; overflow:hidden}
#kc-locale a{font-size:12px; letter-spacing:.06em; text-transform:uppercase;
             padding:6px 12px; color:var(--ng-muted); text-decoration:none}
#kc-locale a[aria-current="true"]{background:var(--ng-sky); color:var(--ng-navy); font-weight:600}

/* ── поля форми ────────────────────────────────────────────────
   Keycloak малює їх класом .pf-c-form-control (у новіших збірках
   .pf-v5-c-form-control), тож ловимо і клас, і сам тип поля. */
.ok-pane label, .ok-pane .pf-c-form__label{
  display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ng-ink);
}
.ok-pane input[type="text"], .ok-pane input[type="password"],
.ok-pane input[type="email"], .ok-pane input[type="number"],
.ok-pane .pf-c-form-control, .ok-pane .pf-v5-c-form-control{
  width:100%; font:inherit; font-size:15px; padding:12px 14px; color:var(--ng-ink);
  background:var(--ng-sky); border:1px solid transparent; border-radius:var(--r-sm);
  transition:background .15s, border-color .15s;
}
.ok-pane input:hover{background:#E4EBF4}
.ok-pane input:focus{outline:none; background:#fff; border-color:var(--ng-blue);
                     box-shadow:0 0 0 3px rgba(18,85,143,.18)}
.ok-pane .pf-c-form__group, .ok-pane .form-group{margin-bottom:16px}

/* кнопка «показати пароль» — у Keycloak це .pf-c-button.pf-m-control */
.ok-pw{position:relative}
.ok-pw input{padding-right:96px}
.ok-pw button, .ok-pane button.pf-c-button.pf-m-control{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font:inherit; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  background:none; border:0; color:var(--ng-blue); cursor:pointer;
  padding:8px; border-radius:var(--r-sm);
}

/* головна кнопка (Keycloak: #kc-login, input[type=submit]) */
.ok-pane input[type="submit"], .ok-pane .ok-btn, #kc-login{
  width:100%; font:inherit; font-size:15px; font-weight:600; padding:13px 20px;
  color:#fff; background:var(--ng-blue); border:0; border-radius:var(--r-sm);
  cursor:pointer; transition:background .15s, transform .06s;
}
.ok-pane input[type="submit"]:hover, #kc-login:hover{background:var(--ng-navy)}
.ok-pane input[type="submit"]:active{transform:translateY(1px)}
.ok-pane input[type="submit"]:focus-visible{outline:3px solid rgba(18,85,143,.35); outline-offset:2px}
.ok-btn-ghost{width:100%; background:none; border:0; color:var(--ng-blue);
              font:inherit; font-weight:600; padding:12px; cursor:pointer;
              border-radius:var(--r-sm)}
.ok-btn-ghost:hover{background:var(--ng-sky)}

.ok-link, #kc-form-options a, #kc-registration a{
  color:var(--ng-blue); font-size:13px; text-decoration:none;
}
.ok-link:hover{color:var(--ng-navy); text-decoration:underline}
.ok-row{display:flex; align-items:center; justify-content:flex-end; gap:12px; margin:-4px 0 22px}

/* ── повідомлення (Keycloak: .alert-error / .alert-warning / …) ── */
.ok-pane .alert, .ok-pane .pf-c-alert, #kc-error-message{
  display:block; padding:12px 14px; border-radius:var(--r-sm);
  font-size:13.5px; line-height:1.5; margin-bottom:20px;
  background:var(--ng-danger-bg); color:var(--ng-danger);
  border-left:3px solid var(--ng-danger);
}
.ok-pane .alert-success{background:#E9F5EE; color:#1E7B45; border-left-color:#1E7B45}
.ok-pane .alert-warning{background:#FFF6E0; color:#8A5B00; border-left-color:var(--ng-accent)}
.ok-note{background:var(--ng-sky); border-radius:var(--r-sm); padding:14px 16px;
         font-size:13px; line-height:1.6; color:var(--ng-muted); margin:0 0 22px}
.ok-note b{color:var(--ng-ink)}

/* ── другий фактор ─────────────────────────────────────────── */
.ok-code, .ok-pane input[name="otp"], .ok-pane input[name="totp"]{
  text-align:center; font-family:var(--mono); font-size:26px;
  letter-spacing:.42em; text-indent:.42em; padding:14px;
}
.ok-secret, #kc-totp-secret-key{
  font-family:var(--mono); font-size:13px; word-break:break-all;
  background:var(--ng-sky); padding:10px 12px; border-radius:var(--r-sm); color:var(--ng-navy);
}
#kc-totp-secret-qr-code{display:block; margin:0 auto 18px; border-radius:var(--r-sm);
                        border:1px solid var(--ng-line)}
.ok-steps{margin:0 0 22px; padding-left:18px; font-size:13.5px;
          line-height:1.7; color:var(--ng-muted)}
.ok-steps b{color:var(--ng-ink); font-weight:600}

/* ── вузький екран: банер стає шапкою за вмістом ───────────── */
@media (max-width:880px){
  .ok-page{grid-template-columns:1fr}
  .ok-brand{padding:0 20px 28px; height:auto; position:static}
  .ok-accent{width:40px; margin-bottom:22px}
  .ok-brand-mid{padding:24px 0 0}
  .ok-brand-mid h1{font-size:26px; max-width:none; margin-bottom:0}
  .ok-brand-mid p, .ok-brand-foot{display:none}
  .ok-mark, .ok-mark img{width:38px !important; height:38px !important; max-width:38px !important}
  .ok-mark{flex:0 0 38px}
  .ok-pane{padding:20px 20px 32px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* Надзаголовок і підзаголовок екрана — значення з макета (kc-login.html) */
.ok-eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ng-blue); font-weight:600; margin:0 0 10px;
}
.ok-lede{margin:0 0 26px; color:var(--ng-muted); font-size:14px; line-height:1.6}

/* Стилів екрана вибору автентифікатора (.select-auth-*) тут навмисно немає:
   посилання «Спробувати інший спосіб» прибрано (див. template.ftl), тож той
   екран недосяжний. Спосіб обирається на формі входу. Якщо колись знадобиться
   повернути — правила є в батьківській темі keycloak/login/css/login.css. */

/* ── кнопка входу зі способом підтвердження й перемикачем ─────────────────
   Кнопка несе дію і спосіб одночасно: знак «увійти» + «Код безпеки» або
   «Ключ доступу». Поряд — вузький перемикач. Кольори — наявні токени. */
.ok-login-row{display:flex; gap:8px; align-items:stretch}
.ok-login-btn{
  flex:1; display:flex; align-items:center; gap:12px; text-align:left;
  padding-top:10px; padding-bottom:10px}
.ok-login-ico{display:flex; align-items:center; flex:0 0 22px}
.ok-login-ico svg{width:22px; height:22px; display:block}
.ok-login-text{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.ok-login-verb{font-weight:600}
.ok-login-way{font-size:12px; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ok-2fa-switch{
  flex:0 0 44px; display:grid; place-items:center; cursor:pointer;
  background:#fff; color:var(--ng-blue);
  border:1px solid var(--ng-line); border-radius:var(--r-sm)}
.ok-2fa-switch:hover{background:var(--ng-sky); border-color:var(--ng-blue)}
.ok-2fa-switch:focus-visible{outline:2px solid var(--ng-blue); outline-offset:2px}
.ok-2fa-switch svg{width:20px; height:20px; display:block}
.ok-2fa-switch[aria-pressed="true"]{background:var(--ng-sky); border-color:var(--ng-blue)}
.ok-2fa-hint{margin:8px 0 0; font-size:12px; color:var(--ng-muted); line-height:1.5}

/* ── екран підтвердження ключем ───────────────────────────────────────────
   Підтвердження запускається автоматично, і поверх сторінки одразу стає
   діалог браузера. Усе, що лишається за ним, — недосяжне для фокуса й лише
   миготить на тлі, тому ховаємо: перелік ключів (він у нас завжди один) і
   штатну кнопку «Увійти ключем безпеки».

   ⚠️ Кнопка ховається, але лишається в DOM: саме її натискає автозапуск.
      Якщо браузер відмовить у виклику без жесту користувача, спрацює
      штатний шлях — Keycloak покаже екран помилки з «Спробувати знову». */
/* ⚠️ Без :has() — селектор новий, а тут важлива передбачуваність:
   ховаємо саму кнопку офскріном (працює скрізь) і перелік ключів. */
.ok-pane #kc-webauthn-authenticate-form .select-auth-container{display:none}
#authenticateWebAuthnButton{position:absolute; left:-9999px; width:1px; height:1px}

/* кнопка «Спробувати знову» на екрані помилки — у загальному вигляді */
.ok-pane #kc-try-again{
  width:100%; font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  padding:11px 16px; border-radius:var(--r-sm);
  border:1px solid var(--ng-blue); background:var(--ng-blue); color:#fff}
.ok-pane #kc-try-again:hover{background:var(--ng-navy); border-color:var(--ng-navy)}
.ok-pane #kc-try-again:focus-visible{outline:2px solid var(--ng-accent); outline-offset:2px}