/* ============================================================================
   signin-v2.css — Sign In (mobile) dressed in the Client Dashboard v2 language.

   Phase 1 was CSS ONLY. Phase 2 (step 2 of sign-in: eyebrow, account chip,
   OR divider, password shortcut, expiry line) DID add markup and JS to
   public/signin/index.html, and the base styling for those new blocks lives in
   that file's inline <style> so desktop gets it too -- this file only carries
   the phone-sized overrides. Nothing here or there touches a class or id that
   `src/signin-page.contract.test.ts` pins. Every rule below lives inside
   `@media (max-width: 991.98px)`, so desktop is untouched.

   Tokens: src/components/ClientDashboardV2/tokens.ts
   Load it in public/signin/index.html AFTER the inline <style> block that ends
   on line 234 — that block holds `#recoverform .col-lg-7 { margin-top: -6rem
   !important }` and `#recoverform .card-body { padding: 2rem !important }`, and
   an equal-specificity rule only wins on source order:
     <link rel="stylesheet" href="./../static/assets/css/signin-v2.css">

   Overrides carry `#recoverform` / `#loginform` prefixes wherever the inline
   block uses them, and `!important` throughout, because the theme's style.css
   ships minified and leans on `!important` itself. That is the price of not
   touching the markup.
   ============================================================================ */

:root {
  --sv2-orange: #ff8000;
  --sv2-orange-hover: #e87400;
  --sv2-orange-soft: #fff1e3;
  --sv2-orange-soft-border: #ffe3c7;
  --sv2-orange-deep: #a95b10;
  --sv2-ink: #172033;
  --sv2-blue: #395590;
  --sv2-success: #12a150;
  --sv2-danger: #a9343a;
  --sv2-page-bg: #f5f7fa;
  --sv2-border: #dfe4ea;
  --sv2-border-strong: #cbd3de;
  --sv2-muted: #697386;
  --sv2-faint: #8a94a5;
  --sv2-disabled: #eef1f5;
}

@media (max-width: 991.98px) {

  /* ---------- 1. page background ---------- */
  body {
    background: var(--sv2-page-bg) !important;
  }

  /* ---------- 2. drop the hero band ----------
     bg3.jpg plus its orange overlay eats ~200px at the top of the screen, and
     then `mt-n20` drags the card back up over it. The top half of a phone
     screen does no work. */
  .content-wrapper > section.image-wrapper.bg-image {
    display: none !important;
  }

  /* `angled upper-end` draws a skewed wedge with a pseudo-element; there is no
     hero left for it to cut into. Both pseudos, since the class uses either. */
  #recoverform.angled::before,
  #recoverform.angled::after,
  #loginform.angled::before,
  #loginform.angled::after {
    display: none !important;
  }

  #recoverform,
  #loginform {
    background: var(--sv2-page-bg) !important;
  }

  #recoverform .container,
  #loginform .container {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }

  /* Cancels the -6rem pull-up from the inline block (index.html:225-227). Same
     selector, same !important — this file must load after that <style>. */
  #recoverform .col-lg-7,
  #loginform .col-lg-7 {
    margin-top: 0 !important;
  }

  /* ---------- 3. header: SKELETON UNCHANGED ----------
     Real logo-dark.png on the left, hamburger on the right, exactly as today.
     `.navbar-brand img` is deliberately NOT overridden, so the logo keeps its
     50px height from the markup. Only the polish is new: a rule under it and a
     40px tap target on the burger.

     NO `position: sticky` here. theme.js runs
     `new Headhesive(".navbar", { offset: 350, classes: { clone: "navbar-clone
     fixed" } })`, which clones the whole navbar to `body.firstChild` and
     fixes THAT on scroll. Making the original sticky too would put two
     headers on screen. The clone lives outside `header.wrapper`, so it needs
     its own rule to match — see `.navbar-clone` below.

     The 3px orange rule is a DESIGN CHOICE, not a token — CDv2's own header is
     `1px solid #DFE4EA`. It keeps a hint of the orange band that used to sit
     here. To go strictly CDv2, swap both for the commented line. */
  header.wrapper,
  .navbar-clone {
    background: #fff !important;
    border-bottom: 3px solid var(--sv2-orange) !important;
    /* border-bottom: 1px solid var(--sv2-border) !important; */
  }

  header.wrapper .navbar.classic,
  .navbar.navbar-clone {
    padding: 10px 0 12px !important;
  }

  /* 40x40 tap target, r8, #F5F7FA hover — same vocabulary as .cdv2-bell-btn.
     The theme positions the bars as <span>s, so only the box is restyled; the
     bars themselves are left alone. */
  .navbar .hamburger.offcanvas-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }
  .navbar .hamburger.offcanvas-nav-btn:hover {
    background: var(--sv2-page-bg);
  }

  /* ---------- 4. card ---------- */
  #recoverform .signin-card,
  #loginform .card {
    background: #fff !important;
    border: 1px solid var(--sv2-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(23, 32, 51, 0.05) !important;
  }

  /* id-prefixed: the inline block's `#recoverform .card-body { padding: 2rem }`
     outranks a plain class selector no matter the order. */
  #recoverform .signin-card > .card-body,
  #loginform .card > .card-body {
    padding: 20px 18px !important;
  }

  /* ---------- 5. typography: a title, not a display heading ---------- */
  #recoverform .signin-card h1,
  #recoverform .signin-card h2,
  #loginform .card h1 {
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 700 !important;
    color: var(--sv2-ink) !important;
    margin-bottom: 6px !important;
  }

  #recoverform .signin-card .lead,
  #loginform .card .lead {
    font-size: 13.5px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: var(--sv2-muted) !important;
    margin-bottom: 16px !important;
  }
  #recoverform .signin-card .lead strong {
    color: var(--sv2-ink);
    font-weight: 600;
    word-break: break-all;
  }

  /* ---------- 6. tabs -> 3px orange underline (.cdv2-tab) ----------
     The #EBF4FA segmented pill goes. Applies to both tab groups: the
     email/phone pair in step 1 and the code/password pair in step 2. */
  .input-method-tabs,
  .auth-method-tabs {
    display: flex;
    gap: 4px;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--sv2-border);
    margin-bottom: 16px !important;
  }

  /* `flex: 1 1 0` + `min-width: 0`, NOT CDv2's `flex: 1 0 auto`. CDv2 pairs
     that with `overflow-x: auto` because it has many tabs; here there are
     exactly two, and a non-shrinking "Email or Username" overflowed the card
     right off the screen. */
  .input-method-tab,
  .auth-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0 !important;
    padding: 12px 8px 9px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 3px solid transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--sv2-muted) !important;
    white-space: nowrap;
  }

  .input-method-tab.active,
  .auth-tab.active {
    background: transparent !important;
    color: var(--sv2-ink) !important;
    font-weight: 600 !important;
    border-bottom-color: var(--sv2-orange) !important;
    box-shadow: none !important;
  }

  /* Step-2 tabs size to their content instead of splitting the row in half.
     Measured in Chrome at a 400px viewport: the card gives the tab row 332px.
     At `flex: 1 1 0` each tab got 166px, but "Verification Code" plus the
     EASIEST pill measures 185.8px, and `white-space: nowrap` spilled the
     excess out through BOTH sides of a centred button -- so the label hung
     past the card's left padding. Content-sized, the pair takes
     185.8 + 20 gap + 63.3 = 269.1px of the 332px, and the underline hugs its
     own label the way the design shows.

     Step 1 (.input-method-tab) deliberately keeps `flex: 1 1 0`; see the note
     on that rule. */
  .auth-method-tabs {
    gap: 20px;
    justify-content: flex-start;
  }
  .auth-tab {
    flex: 0 1 auto;
    padding: 12px 0 9px !important;
  }

  .auth-tab-copy {
    gap: 7px;
  }

  .auth-tab-badge {
    background: var(--sv2-orange-soft) !important;
    color: var(--sv2-orange-deep) !important;
    padding: 4px 9px !important;
    font-size: 10px !important;
  }

  /* ---------- 7. inputs: #CBD3DE, r8, blue focus ----------
     Orange focus is the wrong token — orange is the action colour, blue
     (#395590) is the focus colour everywhere in CDv2.

     Height and padding are deliberately NOT touched on `.form-control`: every
     real input sits in a Bootstrap `.form-floating`, which positions its
     <label> against the control's own padding. Forcing `padding: 0 12px` there
     dropped the label on top of the placeholder and both rendered at once.
     Only the plain inputs (phone, country) get the 46px box. */
  #recoverform .signin-card .form-control,
  #loginform .card .form-control,
  .phone-number-input,
  .country-select {
    border: 1px solid var(--sv2-border-strong) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--sv2-ink) !important;
    box-shadow: none !important;
  }

  .phone-number-input,
  .country-select {
    min-height: 46px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
  }

  /* The floating label is the field's visible name — mute it, and let it keep
     the theme's own float transform. */
  #recoverform .signin-card .form-floating > label {
    color: var(--sv2-faint) !important;
    font-weight: 400 !important;
  }

  #recoverform .signin-card .form-control:focus,
  #loginform .card .form-control:focus,
  .phone-number-input:focus,
  .country-select:focus {
    border-color: var(--sv2-blue) !important;
    box-shadow: 0 0 0 3px rgba(57, 85, 144, 0.1) !important;
    outline: none !important;
  }

  #recoverform .signin-card .form-control::placeholder,
  .phone-number-input::placeholder {
    color: var(--sv2-faint) !important;
  }

  .phone-input-group {
    gap: 8px;
  }
  .country-select {
    width: 104px !important;
    flex: none;
  }

  /* ---------- 8. buttons: radius 8, never a pill, INK text on orange ----------
     tokens.ts: "Text on the orange accent is ALWAYS ink, never white." */
  #recoverform .signin-card .btn.rounded-pill,
  #loginform .card .btn.rounded-pill {
    border-radius: 8px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  #recoverform .signin-card .btn-primary,
  #loginform .card .btn-primary {
    background: var(--sv2-orange) !important;
    border-color: var(--sv2-orange) !important;
    color: var(--sv2-ink) !important;
  }
  #recoverform .signin-card .btn-primary:hover:not(:disabled),
  #recoverform .signin-card .btn-primary:focus:not(:disabled) {
    background: var(--sv2-orange-hover) !important;
    border-color: var(--sv2-orange-hover) !important;
    color: var(--sv2-ink) !important;
  }
  #recoverform .signin-card .btn-primary:disabled {
    background: var(--sv2-disabled) !important;
    border-color: var(--sv2-disabled) !important;
    color: var(--sv2-faint) !important;
    opacity: 1 !important;
  }

  #recoverform .signin-card .btn-outline-primary {
    background: #fff !important;
    border: 1px solid var(--sv2-border-strong) !important;
    color: var(--sv2-ink) !important;
  }
  #recoverform .signin-card .btn-outline-primary:hover:not(:disabled) {
    background: var(--sv2-page-bg) !important;
    border-color: var(--sv2-border-strong) !important;
    color: var(--sv2-ink) !important;
  }

  /* Resend code -> .cdv2-link-btn */
  #recoverform .signin-card .btn-link {
    color: var(--sv2-blue) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-height: 0 !important;
    text-decoration: none !important;
  }

  /* ---------- 8b. step-2 account block and send-step footer ----------
     Base styling is in index.html's inline <style> (it has to reach desktop
     too). Only the token swaps and the tighter phone spacing are here. */
  .auth-eyebrow {
    color: var(--sv2-muted) !important;
    margin-bottom: 2px !important;
  }
  .auth-account-chip {
    background: var(--sv2-page-bg) !important;
    border-color: var(--sv2-border) !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }
  .auth-account-avatar {
    border-color: var(--sv2-orange) !important;
    color: var(--sv2-orange-deep) !important;
  }
  .auth-account-copy strong {
    color: var(--sv2-ink) !important;
  }
  .auth-account-copy span {
    color: var(--sv2-muted) !important;
  }
  .auth-account-switch,
  .auth-alt-link {
    color: var(--sv2-blue) !important;
  }
  .auth-account-switch {
    border-color: var(--sv2-border-strong) !important;
    background: #fff !important;
  }
  .auth-or-divider {
    margin: 18px 0 12px !important;
    color: var(--sv2-faint) !important;
  }
  .auth-expiry-note {
    color: var(--sv2-faint) !important;
  }

  /* The send step ends with the divider/expiry stack, so its error line no
     longer needs to reserve a 20px gap of its own. */
  #otpSendSection .auth-error:empty {
    min-height: 0 !important;
    margin: 0 !important;
  }

  /* ---------- 9. callout and status lines ---------- */
  .method-note {
    background: var(--sv2-orange-soft);
    border: 1px solid var(--sv2-orange-soft-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px !important;
    line-height: 18px !important;
    color: var(--sv2-orange-deep) !important;
    margin-bottom: 14px !important;
  }

  .auth-status {
    color: var(--sv2-success) !important;
    font-size: 12.5px !important;
    text-align: left !important;
  }
  .auth-error {
    color: var(--sv2-danger) !important;
    font-size: 12.5px !important;
    text-align: left !important;
  }

  /* ---------- 10. OTP field ----------
     One input, on purpose: it lets the browser autofill the whole code. */
  .otp-code-input {
    height: 60px !important;
    background: var(--sv2-page-bg) !important;
    border: 1.5px solid var(--sv2-border-strong) !important;
    border-radius: 12px !important;
    color: var(--sv2-ink) !important;
    font-family: inherit !important;
    font-size: 26px !important;
    letter-spacing: 0.44em !important;
  }
  .otp-code-input:focus {
    border-color: var(--sv2-blue) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(57, 85, 144, 0.1) !important;
  }

  /* ---------- 11. social: outline rows, no brand-coloured blocks ---------- */
  .social-login-options {
    gap: 10px;
  }
  .btnFbn {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--sv2-border-strong) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--sv2-ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* ---------- 12. "Don't have an account?" ---------- */
  #signup-text {
    font-size: 13px !important;
    color: var(--sv2-muted) !important;
    text-align: center;
  }
  #signup-text a {
    color: var(--sv2-blue) !important;
    font-weight: 600;
  }

  /* ---------- 13. marketing footer + newsletter: hidden on phones ----------
     Sign-in is a task screen, not a marketing page. Every link it carries is
     still reachable through the hamburger menu (section 14), so nothing is
     lost. Not a sibling selector: the <footer> sits at index.html:661 and the
     nesting is not worth depending on. */
  body footer.bg-dark {
    display: none !important;
  }

  /* ---------- 14. HAMBURGER MENU — KEPT, only re-skinned ----------
     This is the way out of sign-in, so it stays and it has to be easy to hit.
     Bootstrap's data-bs-* wiring is untouched; the menu markup is hardcoded in
     index.html as `<li class="nav-item"><a class="nav-link">` (it used to be
     injected by setupNavigation(), dropped in 8cad2c439), and only those
     selectors are styled here.
     The theme's dark panel becomes a white CDv2 panel whose links are 52px
     rows, the same shape as .cdv2-sheet-row. */
  .offcanvas-nav {
    background: #fff !important;
    width: min(320px, 86vw) !important;
    box-shadow: 0 18px 50px rgba(13, 22, 41, 0.22);
  }

  .offcanvas-nav .offcanvas-header {
    padding: 14px 18px 12px !important;
    border-bottom: 1px solid var(--sv2-border);
  }
  /* The panel uses the theme's "Lavni" wordmark. Putting the real logo in here
     would mean editing markup, so that waits for phase 2. */
  .offcanvas-nav .offcanvas-header h3 {
    color: var(--sv2-ink) !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
  }
  /* The markup is `btn-close btn-close-white`. This theme does NOT use
     Bootstrap's background-image X — it draws a Unicons glyph ("\ed3b") in a
     `::before` circle tinted by the button's `color`, and `.btn-close-white`
     sets that to #fff. On the re-skinned white panel it was white on white,
     i.e. invisible.
     The theme also gives it `margin-right: -.75rem` (plus top/bottom), which
     pushed the button past the panel's right edge where it was clipped away —
     hence "close button missing" rather than "close button mis-coloured".
     Neutralise the negative margins and give it an explicit 32px box. */
  .offcanvas-nav .offcanvas-header .btn-close,
  .offcanvas-nav .offcanvas-header .btn-close-white {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--sv2-muted) !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }
  /* The theme's glyph itself is left alone: it is a Unicons codepoint, which
     does not render in a headless browser, so replacing it here could not be
     verified. With the colour fixed it shows as ink in a real browser. */
  .offcanvas-nav .offcanvas-body {
    padding: 8px 12px 16px !important;
  }

  .offcanvas-nav .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 8px 8px !important;
    border-top: 1px solid #e6eaf0;
    color: var(--sv2-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  .offcanvas-nav .navbar-nav > .nav-item:first-child > .nav-link {
    border-top: 0;
  }
  .offcanvas-nav .navbar-nav .nav-link:hover {
    background: #f8f9fb;
  }

  /* The two phone-only entries (Sign In / Client Sign Up) read as actions
     rather than as navigation. */
  .offcanvas-nav .navbar-nav .nav-item.d-lg-none .nav-link {
    color: var(--sv2-blue) !important;
  }

  .offcanvas-nav .dropdown-menu.blogs-dropdown {
    border: 0;
    box-shadow: none;
    padding: 0 0 0 12px;
  }
  .offcanvas-nav .dropdown-menu .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--sv2-muted) !important;
    font-size: 14px;
    font-weight: 500;
  }

  .offcanvas-nav .offcanvas-footer {
    border-top: 1px solid var(--sv2-border);
    margin-top: 12px;
    padding-top: 14px;
  }
  .offcanvas-nav .offcanvas-footer .link-inverse {
    display: block;
    color: var(--sv2-muted) !important;
    font-size: 13px;
    font-weight: 500;
  }
  .offcanvas-nav .social-white a {
    color: var(--sv2-muted) !important;
  }
}