/* ============================================================================
   Pultrack Make — auth pages (login / start / setup) branded shell.
   Ported from Pultrack POS's login-split design so Make's sign-in and
   account-creation match the rest of the Pultrack family. Loaded ONLY on the
   auth pages (base.html head_extra), so nothing here touches the in-app chrome.
   Loads AFTER bootstrap so its tokens win.
   ============================================================================ */

@import url('/static/fonts/plex.css');

:root{
  --green:#1B5739; --green-2:#103A26; --green-line:#CDE0D4;
  --ink:#13211B; --gold:#C28A2C; --paper:#F4F1E9;
  --muted:#6E685B; --line:#E3DDD0;
  --app-bg:#EEECE3; --app-card:#FFFFFF; --app-ink:#1A241F; --app-line:#E0DACC;
  --shadow:0 1px 2px rgba(20,30,24,.05),0 8px 28px rgba(20,30,24,.07);
  --text-2xs:10.5px; --text-xs:11.5px; --text-sm:12.5px;
  --text-base:13.5px; --text-lg:15px; --text-xl:16px;
}

body{
  background:var(--app-bg); color:var(--app-ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Brand palette on the primary button + rounded controls, scoped to these pages
   by virtue of auth.css only loading here. */
.btn-primary{
  --bs-btn-bg:var(--green); --bs-btn-border-color:var(--green);
  --bs-btn-hover-bg:var(--green-2); --bs-btn-hover-border-color:var(--green-2);
  --bs-btn-active-bg:var(--green-2); --bs-btn-active-border-color:var(--green-2);
  --bs-btn-disabled-bg:var(--green); --bs-btn-disabled-border-color:var(--green);
}
.btn{ border-radius:9px; }
a{ --bs-link-color:var(--green); --bs-link-hover-color:var(--green-2); }
.form-control, .form-select{ border-radius:9px; border-color:var(--app-line); color:var(--app-ink); }
.form-control:focus, .form-select:focus{
  border-color:var(--green); box-shadow:0 0 0 .25rem rgba(27,87,57,.15);
}

/* Show/hide password eye — sits inside the field; input gets right padding so
   the typed value never slides under the icon. */
.pw-eye{ position:absolute; top:0; right:0; height:100%; width:2.6rem; z-index:5;
  display:flex; align-items:center; justify-content:center; border:0; background:transparent;
  color:var(--muted); cursor:pointer; }
.pw-eye:hover{ color:var(--ink); }
.pw-field{ position:relative; }
.pw-field .form-control{ padding-right:2.6rem; }

/* ----------------------------------------------------------------- split */
.login-split{ display:flex; min-height:100vh; }

.login-brand{
  width:44%; max-width:560px; flex:none;
  background:var(--green-2); color:var(--paper);
  display:flex; flex-direction:column;
  padding:40px 44px; position:relative; overflow:hidden;
}
.login-brand .lb-top{ display:flex; align-items:center; gap:11px; cursor:default;
  text-decoration:none; color:inherit; }
.login-brand .lb-top .pl-mark{ width:44px; height:44px; flex:none; }
.login-brand .lb-top .wm{ font-size:21px; font-weight:700; letter-spacing:-.015em; }

/* Brand-mark entrance: the rail draws, then the coin (ring riding with it) rolls
   in from the left and rocks right-left until it settles. Replays on hover. */
@keyframes pl-railGrow{ 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
@keyframes pl-coinRock{
  0%{transform:translateX(-66px)} 46%{transform:translateX(9px)}
  64%{transform:translateX(-6px)} 79%{transform:translateX(4px)}
  90%{transform:translateX(-2px)} 100%{transform:translateX(0)}
}
.pl-anim .rail{ transform-origin:left center; transform-box:fill-box;
  animation:pl-railGrow .5s cubic-bezier(.4,0,.2,1) both; }
.pl-anim .coin-g{ animation:pl-coinRock 1.8s cubic-bezier(.45,.05,.35,1) .15s both; }
@media (prefers-reduced-motion: reduce){
  .pl-anim .rail, .pl-anim .coin-g{ animation:none; }
}

.login-brand .lb-mid{ margin:auto 0; position:relative; z-index:1; }
.login-brand .lb-tag{
  font-size:clamp(26px, 2.6vw, 34px); font-weight:700; letter-spacing:-.02em;
  line-height:1.15; margin-bottom:26px;
}
.login-brand .lb-pillars{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:13px; }
.login-brand .lb-pillars li{
  display:flex; align-items:center; gap:12px;
  font-size:var(--text-base); font-weight:500; color:#cfdcd2;
}
.login-brand .lb-pillars i{
  width:34px; height:34px; flex:none; border-radius:9px;
  background:rgba(255,255,255,.08); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:var(--text-xl);
}
.login-brand .lb-mark{
  position:absolute; right:-90px; bottom:-70px; width:340px; height:340px;
  color:var(--paper); opacity:.07; pointer-events:none;
}
.login-brand .lb-foot{
  font-family:'IBM Plex Mono',monospace; font-size:var(--text-xs);
  letter-spacing:.14em; color:#94ab95; position:relative; z-index:1;
}

.login-side{
  flex:1; min-width:0; display:flex; flex-direction:column;
  background:var(--app-bg); padding:22px 26px;
}
.login-side .ls-head{ display:flex; justify-content:flex-end; flex:none; }
.login-side .ls-body{ flex:1; display:flex; align-items:center; justify-content:center;
  padding:20px 0; }
.login-card{
  width:100%; max-width:400px;
  background:var(--app-card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:34px 34px 30px;
}
.login-card .lc-brand{
  display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:14px;
}
.login-card .lc-brand img{ width:30px; height:30px; border-radius:8px; }
.login-card .lc-brand span{ font-weight:700; font-size:17px; }
.login-card .lc-title{
  font-size:19px; font-weight:700; letter-spacing:-.01em;
  text-align:center; margin:0 0 22px; color:var(--app-ink);
}
.login-side .ls-foot{
  flex:none; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:var(--text-xs); color:var(--muted); padding-top:14px;
}
.login-side .ls-foot svg{ width:13px; height:13px; color:var(--muted); }

/* Field cells: the label lives INSIDE the box and shrinks to its top edge once
   the field is focused or filled. Bootstrap .form-floating does the mechanics;
   this only re-skins it to tokens. Scoped to the auth card. */
.login-card .form-floating > .form-control,
.login-card .form-floating > .form-select{
  background-color:var(--app-bg);      /* NOT the shorthand — keeps the select chevron */
  border:1px solid transparent; border-radius:11px;
  color:var(--app-ink); font-weight:500;
  padding-left:.9rem; padding-right:.9rem;
}
.login-card .form-floating > .form-control:focus,
.login-card .form-floating > .form-select:focus{
  background-color:var(--app-card);
  border-color:var(--green); box-shadow:0 0 0 .2rem rgba(27,87,57,.15);
}
.login-card .form-floating > label{ padding:1rem .9rem; color:var(--muted); font-weight:500; }
.login-card .form-floating > label::after{ background-color:transparent; }
.login-card .form-floating > .form-control:focus::placeholder{ color:var(--muted); opacity:.5; }
.login-card .form-text{ padding:0 .2rem; }

/* Field help as a FOCUS BUBBLE, not a paragraph under every cell. */
.login-card .field-tip{
  position:absolute; left:0; right:0; bottom:calc(100% + 8px);
  background:var(--app-ink); color:var(--app-card);
  font-size:var(--text-sm); line-height:1.45; font-weight:500;
  padding:.55rem .7rem; border-radius:10px;
  box-shadow:0 6px 20px rgba(20,30,24,.22);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .13s ease, transform .13s ease;
  pointer-events:none; z-index:20;
}
.login-card .field-tip p{ margin:0; }
.login-card .field-tip p + p{ margin-top:.4rem; }
.login-card .field-tip::after{
  content:""; position:absolute; top:100%; left:1.4rem;
  border:6px solid transparent; border-top-color:var(--app-ink);
}
.login-card .form-floating:focus-within .field-tip{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* Language picker: compact dropdown */
.lang-pick{ display:flex; align-items:center; gap:6px; margin:0; color:var(--muted); }
.lang-pick .bi{ font-size:var(--text-lg); opacity:.7; }
.lang-pick select{ width:auto; min-width:150px; }

@media (max-width: 991px){
  .login-brand{ display:none; }
  .login-side{ padding:18px 16px; }
}

/* Bootstrap's floated-label state selectors (specificity 0,3,1) otherwise win
   over the rules above: cool-grey label text and a beige chip on a white field. */
.login-card .form-floating > .form-control:focus ~ label,
.login-card .form-floating > .form-control:not(:placeholder-shown) ~ label,
.login-card .form-floating > .form-select ~ label{ color:var(--muted); }
.login-card .form-floating > .form-control:focus ~ label::after,
.login-card .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.login-card .form-floating > .form-select ~ label::after{ background-color:transparent; }

/* Same focus treatment as the app (pultrack.css): a visible 2px ring. */
.form-control:focus, .form-select:focus,
.login-card .form-floating > .form-control:focus,
.login-card .form-floating > .form-select:focus{ box-shadow:0 0 0 1px var(--green), 0 0 0 .2rem rgba(27,87,57,.15); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.login-brand a:focus-visible, .login-brand button:focus-visible{ outline-color:var(--paper); }