/*
 * Takwinx look for Frappe's own sign-in page, /login (specs/019-client-branding,
 * FR-016). The SAME frame as the Keycloak `takwinx` login theme
 * (platforms/keycloak/themes/takwinx/login/resources/css/takwinx.css), so a learner
 * sees one style: the dark side panel with the logo and headline, the form column
 * with the FR / EN / عربي switch, the orange (or client) main button. Markup comes
 * from takwinx-login-frame.html, put into login.html by patch-login-template.py.
 *
 * Loaded after Frappe's login.bundle.css, then /files/takwinx-brand.css overrides
 * the --tx-* defaults below with the client's colours. A site with no such file
 * (the academy) keeps the Takwinx colours.
 *
 * ⚠ The email-and-password form stays visible: learners created in the LMS have
 *   only a Frappe password, and it is Administrator's break-glass path
 *   (scripts/RESTORE.md §9). Do not hide or collapse it here.
 *
 * DIRECTION follows the language Frappe renders the page in (<html dir>), so
 * everything uses logical properties. Email and password stay left-to-right.
 *
 * Selectors on Frappe's form start with the sections' :is(...) so they match
 * Frappe's own (.btn:not(...):not(...):not(...), .for-login .page-card
 * .page-card-actions .btn-login) in specificity and win by coming later.
 */
@import url(takwinx-fonts/fonts.css);

:root{
  --tx-brand:#16506b; --tx-brand-night:#0f3d52; --tx-on-night:#ffffff; --tx-brand-ink:#16506b;
  --tx-brand-soft:#eaf4f9; --tx-on-brand:#ffffff; --tx-cta:#f58220; --tx-on-cta:#1b1206;
  --txl-orange:#f58220; --txl-sky:#eaf4f9; --txl-paper:#f7fbfd; --txl-ink:#122a36;
  --txl-muted:#4a6070; --txl-line:#dbe8ef;
  --txl-font:"Readex Pro","Segoe UI",Tahoma,sans-serif;
}

/* --- page: no Frappe chrome around the frame --------------------------------- */
html, body, body .btn, body .form-control{font-family:var(--txl-font)}
body{background:var(--txl-paper);color:var(--txl-ink);font-size:16px}
body .page-content-wrapper{padding:0;min-height:0}
body .page-content-wrapper main.container{max-width:none;padding:0;margin:0}
body .page-breadcrumbs, body .page-header-wrapper, body .page-footer{display:none}

/* --- frame (as the Keycloak theme) ------------------------------------------- */
.tx-stage{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.tx-side{background:var(--tx-brand-night);color:var(--tx-on-night);padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;position:relative;overflow:hidden}
.tx-ring{position:absolute;inset-inline-end:-100px;bottom:-100px;width:340px;height:340px;border-radius:50%;border:36px solid color-mix(in srgb,var(--tx-on-night) 7%,transparent)}
.tx-ring2{position:absolute;inset-inline-end:-10px;bottom:-10px;width:160px;height:160px;border-radius:50%;border:20px solid rgba(245,130,32,.18)}
.tx-company .tx-ring2{border-color:color-mix(in srgb,var(--tx-on-night) 10%,transparent)}
.tx-pitch{position:relative}
.tx-pitch h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;max-width:26rem;line-height:1.25;margin:0;color:inherit;text-wrap:balance}
.tx-pitch p{opacity:.8;max-width:26rem;margin:12px 0 0}
.tx-foot{font-size:.82rem;opacity:.75;display:flex;align-items:center;gap:8px;position:relative}
.tx-foot svg{width:20px;height:20px}

.tx-brandline{position:relative;display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.2rem}
.tx-logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.3rem;letter-spacing:-.01em;color:#fff}
.tx-logo small{font-weight:500;color:#c9dbe4;font-size:.85rem}
.tx-x{color:var(--txl-orange)}
/* A white tile: client logos are drawn for light backgrounds. */
.tx-colog-img{background:#fff;border-radius:12px;padding:8px 12px;display:inline-flex;max-width:240px}
.tx-colog-img img{display:block;max-height:48px;max-width:100%;width:auto;height:auto}

.tx-main{padding:40px 48px;display:flex;flex-direction:column;gap:22px;justify-content:center;max-width:32rem;width:100%;margin-inline:auto}
.tx-top{display:flex;justify-content:flex-end}
.tx-lang{display:flex;gap:4px;font-size:.8rem;background:var(--txl-sky);border-radius:999px;padding:3px}
.tx-lang a{padding:4px 10px;border-radius:999px;color:var(--tx-brand-ink);font-weight:500;text-decoration:none}
.tx-lang a:hover{text-decoration:none;background:#fff}
.tx-lang a.on{background:#fff;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tx-title{font-size:1.75rem;font-weight:700;line-height:1.25;margin:0 0 6px;color:var(--txl-ink)}

.tx-powered{font-size:.78rem;color:var(--txl-muted);display:flex;align-items:center;gap:6px;justify-content:center;border-top:1px solid var(--txl-line);padding-top:16px}
.tx-powered-mark{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--txl-ink)}

[dir=rtl] .tx-main,[dir=rtl] .tx-side{line-height:1.8}
[dir=rtl] .tx-title,[dir=rtl] .tx-pitch h2{line-height:1.4}

/* --- Frappe's sections, inside the form column -------------------------------- */
:is(.for-login,.for-email-login,.for-forgot,.for-signup,.for-login-with-email-link) .page-card{
  background:none; max-width:none; padding:0; margin:0; border:0; border-radius:0; box-shadow:none;
  min-height:0; gap:16px;
}
/* The logo is in the side panel; the sign-in sections carry our own title. */
:is(.for-login,.for-email-login,.for-forgot,.for-signup,.for-login-with-email-link) .page-card-head .app-logo{display:none}
:is(.for-login,.for-email-login) .page-card-head{display:none}
:is(.for-forgot,.for-signup,.for-login-with-email-link) .page-card-head h4{font-size:1.75rem;font-weight:700;color:var(--txl-ink)}
:is(.for-login,.for-email-login,.for-forgot,.for-signup,.for-login-with-email-link) .page-card form{gap:16px}

/* single sign-on: the main action, as "Se connecter" on the Keycloak page */
.takwinx-sso-first, .takwinx-sso-first .social-login-buttons{margin:0;padding:0;width:100%}
.takwinx-sso-first .login-button-wrapper{margin:0 0 10px}
.takwinx-sso-first .login-button-wrapper:last-child{margin-bottom:0}
:is(.for-login,.for-email-login) .page-card .takwinx-sso-first .btn-login-option{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--tx-cta); color:var(--tx-on-cta); border:0; box-shadow:none;
  font-size:1rem; font-weight:700; line-height:1.2; padding:13px 18px; border-radius:10px;
}
:is(.for-login,.for-email-login) .page-card .takwinx-sso-first .btn-login-option:hover{filter:brightness(1.06)}

/* "Received an invitation by email? Use this button.": right under it, so an invited learner,
   whose password is in Keycloak, does not type it into Frappe's form below. */
.takwinx-invite{margin:-4px 0 0;font-size:.88rem;font-weight:600;color:var(--tx-brand-ink);text-align:center}

/* "No invitation? Sign in with your email and password:": a rule, then the
   words, introducing Frappe's form as the other way in. */
.takwinx-or{margin:10px 0 0;padding-top:16px;border-top:1px solid var(--txl-line);font-size:.88rem;color:var(--txl-muted)}

/* the email-and-password form: visible and working, in the Keycloak field style */
:is(.for-login,.for-email-login,.for-forgot,.for-signup,.for-login-with-email-link) .page-card .form-label{color:var(--txl-ink);font-size:.88rem;font-weight:600}
:is(.for-login,.for-email-login,.for-forgot,.for-signup,.for-login-with-email-link) .page-card .form-control{
  background:#fff; border:1.5px solid var(--txl-line); border-radius:10px;
  min-height:46px; font-size:.95rem; color:var(--txl-ink); box-shadow:none;
}
:is(.for-login,.for-email-login,.for-forgot,.for-signup,.for-login-with-email-link) .page-card .form-control:focus{
  border-color:var(--tx-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--tx-brand) 18%,transparent);
}
:is(.for-login,.for-email-login,.for-forgot,.for-login-with-email-link) :is(#login_email,#login_password,#forgot_email,#login_with_email_link_email){direction:ltr}
[dir=rtl] :is(.for-login,.for-email-login,.for-forgot,.for-login-with-email-link) :is(#login_email,#login_password,#forgot_email,#login_with_email_link_email){text-align:right}
:is(.for-login,.for-email-login,.for-forgot,.for-login-with-email-link) .page-card :is(.email-field,.password-field){width:100%}
:is(.for-login,.for-email-login,.for-forgot,.for-login-with-email-link) .page-card .field-icon{top:50%;transform:translateY(-50%)}
:is(.for-login,.for-email-login) .page-card .forgot-password-message{margin:2px 0 0;align-self:flex-start;font-size:.88rem}

:is(.for-login,.for-email-login) .page-card .page-card-actions .btn-login{
  background:none; color:var(--txl-ink); border:1.5px solid var(--txl-line);
  font-weight:600; font-size:1rem; padding:12px 18px; border-radius:10px;
}
:is(.for-login,.for-email-login) .page-card .page-card-actions .btn-login:is(:hover,:focus,:active){
  background:var(--tx-brand-soft); color:var(--tx-brand-ink); border:1.5px solid var(--tx-brand);
}
:is(.for-login,.for-email-login) .page-card .page-card-actions .btn-login-with-email-link{
  background:none; color:var(--tx-brand-ink); font-weight:600; padding:6px; border-radius:8px;
}
/* the other forms' submit buttons (forgot password, email link): the main action there */
:is(.for-forgot,.for-login-with-email-link,.for-signup) .page-card .page-card-actions .btn{
  background:var(--tx-cta); color:var(--tx-on-cta); border:0; border-radius:10px; font-weight:700; padding:12px 18px;
}
:is(.for-forgot,.for-login-with-email-link,.for-signup) .page-card .page-card-actions .btn:disabled{opacity:.55}

:is(.for-login,.for-email-login,.for-forgot,.for-signup,.for-login-with-email-link) .page-card a:not(.btn){color:var(--tx-brand-ink);font-weight:600}
.tx-main :is(a,button,input):focus-visible{outline:3px solid var(--tx-brand);outline-offset:2px}

/* --- phone: the side panel becomes a band, as on the Keycloak page ------------- */
@media (max-width:860px){
  .tx-stage{grid-template-columns:1fr;min-height:auto}
  .tx-side{padding:20px 16px;gap:14px}
  .tx-pitch p,.tx-foot,.tx-ring,.tx-ring2{display:none}
  .tx-pitch h2{font-size:1.25rem}
  .tx-main{padding:24px 16px 32px;justify-content:flex-start}
  .tx-title{font-size:1.45rem}
}