/* Login screen (login.php): a photo panel and the sign-in card.
   Office and client logins use email + password; security guards get their own
   simple screen with big number keys. The panel colour follows the agency brand. */

.lg-body{
  --lg-neel: color-mix(in srgb, var(--primary) 88%, #04201d);   /* deep teal, from the brand colour */
  --lg-marigold: #F2A33A;
  --lg-sindoor: #C8412B;
  --lg-ink: #16203A;
  margin:0; background:#fff; color:var(--lg-ink);
}
.lg-wrap{ min-height:100vh; display:grid; grid-template-columns:minmax(0, 44fr) minmax(0, 56fr); }

/* ---------- art panel ---------- */
.lg-art{
  position:relative; overflow:hidden; background:var(--lg-neel); color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end; padding:40px 44px;
  transition:background-color .6s ease;
}
/* Photo for each kind of login (assets/img/login/), darkened at the bottom so the text reads */
.lg-photo{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .5s ease; }
.lg-photo.has-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(4,20,24,.85) 0%, rgba(4,20,24,.45) 45%, rgba(4,20,24,.1) 100%); }
.lg-wrap[data-mode="office"] .lg-photo.office, .lg-wrap[data-mode="guard"] .lg-photo.guard{ opacity:1; }

.lg-greet{ position:relative; max-width:420px; }
.lg-namaste{
  font-family:'Mukta', var(--font-body); font-weight:800; font-size:76px; line-height:.95;
  margin:0 0 14px; letter-spacing:-.01em; color:#fff;
}
.lg-line{ font-family:'Mukta', var(--font-body); font-weight:500; font-size:21px; line-height:1.35; margin:0; color:rgba(255,255,255,.88); }
.lg-art-foot{ position:relative; margin-top:28px; font-size:13px; color:rgba(255,255,255,.6); }


/* ---------- sign-in card ---------- */
.lg-panel{ display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.lg-card{ width:100%; max-width:400px; }
.lg-card .login-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:26px; }
.lg-card .login-top select{ width:auto; flex:none; font-size:13.5px; padding:6px 8px; }
.lg-card .login-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.lg-card .brand-mark{ width:38px; height:38px; border-radius:10px; font-size:15px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; overflow:hidden; }
.lg-card .brand-text{ min-width:0; }
.lg-card .word{ font-family:'Mukta', var(--font-body); font-weight:800; font-size:21px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-card .sub{ font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Who is signing in */
.lg-who{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.lg-who-btn{
  display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; font:inherit;
  padding:12px; border-radius:12px; border:1.5px solid var(--border); background:#fff; color:var(--lg-ink);
  transition:border-color .2s, background-color .2s;
}
.lg-who-btn svg{ width:26px; height:26px; flex:none; }
.lg-who-btn b{ display:block; font-size:14.5px; line-height:1.2; }
.lg-who-btn small{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.lg-who-btn:hover{ border-color:var(--primary); }
.lg-who-btn.guard svg{ color:var(--lg-sindoor); }
.lg-who-btn.office svg{ color:var(--primary); }
.lg-wrap[data-mode="guard"] .lg-who-btn.guard{ border-color:var(--lg-marigold); background:#FEF5E7; }
.lg-wrap[data-mode="office"] .lg-who-btn.office{ border-color:var(--primary); background:var(--primary-tint); }

/* Office roles: a quiet row of choices */
.login-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.lg-wrap[data-mode="guard"] .login-tabs{ display:none; }
.lg-tab{
  font:inherit; font-size:13.5px; font-weight:600; padding:6px 12px; border-radius:99px; cursor:pointer;
  border:1px solid var(--border); background:#fff; color:var(--muted);
}
.lg-tab:hover{ color:var(--lg-ink); }
.lg-tab.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.lg-tab.login-tab-super{ margin-left:auto; border-style:dashed; font-weight:500; font-size:12.5px; }

.login-hint{ font-size:13.5px; color:var(--muted); margin:0 0 14px; }
.lg-card .field{ margin-bottom:12px; }
.lg-card input[type=email], .lg-card input[type=password], .lg-card input[type=tel]{ font-size:16px; padding:10px 12px; border-radius:9px; }
.login-form .btn.primary{ width:100%; justify-content:center; padding:11px 13px; font-size:15px; border-radius:9px; }
.login-row{ display:flex; justify-content:flex-end; margin:-4px 0 14px; }
.login-row.lg-center{ justify-content:center; margin:14px 0 0; }
.login-link{ background:none; border:0; padding:0; font:inherit; font-size:14px; color:var(--primary); cursor:pointer; }
.login-link:hover{ text-decoration:underline; }
.login-msg{ font-size:14px; padding:9px 12px; border-radius:8px; margin-bottom:12px; }
.login-msg.err{ background:var(--crit-tint); color:var(--crit); }
.login-msg.ok{ background:var(--accent-tint); color:var(--accent); }
.lg-test{ margin-top:18px; font-size:12.5px; }
.lg-test summary{ cursor:pointer; }

/* ---------- security guard screen: big and simple ---------- */
.lg-guard-form label{ font-size:14px; }
.lg-big{ font-size:22px !important; letter-spacing:.06em; padding:12px 14px !important; font-weight:600; }
.lg-pin{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.lg-pin span{
  height:58px; border-radius:12px; border:1.5px solid var(--border); background:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; color:var(--lg-ink);
  transition:border-color .15s, transform .15s;
}
.lg-pin span.on{ border-color:var(--lg-marigold); }
.lg-pin span.on::after{ content:""; width:14px; height:14px; border-radius:50%; background:var(--lg-ink); }
.lg-pin span.next{ border-color:var(--lg-ink); }
.lg-pin-wrap{ position:relative; }
/* the real field sits over the four boxes: tapping them opens the phone's number keyboard */
.lg-pin-input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; font-size:16px; color:transparent; caret-color:transparent; border:0; padding:0; cursor:text; }
.lg-pin:not(.focus) span.next{ border-color:var(--border); }
.lg-pin-go{ width:100%; height:56px; font-size:18px; margin-top:4px; }
.lg-who-btn:focus-visible, .lg-tab:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---------- phones: the art becomes a short band on top ---------- */
@media (max-width:860px){
  .lg-wrap{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; }
  .lg-art{ min-height:270px; padding:22px 20px; }
  .lg-photo{ background-position:center 30%; }   /* faces stay above the "Hello" text */
  .lg-namaste{ font-size:48px; margin-bottom:8px; }
  .lg-line{ font-size:17px; }
  .lg-art-foot{ display:none; }
  .lg-panel{ align-items:flex-start; padding:22px 16px 32px; }
  .lg-card .login-top{ margin-bottom:18px; }
}
@media (max-width:380px){
  .lg-who{ grid-template-columns:1fr; }
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lg-body{ background:var(--paper); color:var(--ink); }
  :root:not([data-theme="light"]) .lg-who-btn, :root:not([data-theme="light"]) .lg-tab{ background:var(--surface); color:var(--ink); }
  :root:not([data-theme="light"]) .lg-wrap[data-mode="guard"] .lg-who-btn.guard{ background:#3a2a10; }
  :root:not([data-theme="light"]) .lg-tab.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
  :root:not([data-theme="light"]) .lg-pin span.on::after{ background:var(--ink); }
}
:root[data-theme="dark"] .lg-body{ background:var(--paper); color:var(--ink); }
:root[data-theme="dark"] .lg-who-btn, :root[data-theme="dark"] .lg-tab{ background:var(--surface); color:var(--ink); }
:root[data-theme="dark"] .lg-wrap[data-mode="guard"] .lg-who-btn.guard{ background:#3a2a10; }
:root[data-theme="dark"] .lg-tab.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
:root[data-theme="dark"] .lg-pin span.on::after{ background:var(--ink); }
/* style.css still styles #loginScreen for the old card; the new layout wins here */
#loginScreen.lg-wrap{ display:grid; align-items:stretch; justify-content:stretch; padding:0; background:transparent; }
@media (max-width:860px){ #loginScreen.lg-wrap{ display:grid; } }

/* Footer: Terms, Privacy, Contact */
.lg-foot{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; margin-top:22px; padding-top:14px; border-top:1px solid var(--border); font-size:13px; }
.lg-foot a, .lg-foot button{ color:var(--muted); text-decoration:none; background:none; border:0; padding:4px 2px; font:inherit; cursor:pointer; }
.lg-foot a:hover, .lg-foot button:hover{ color:var(--primary); text-decoration:underline; }
.go-modal[hidden]{ display:none !important; }
.lg-contact{ width:min(460px, 100%); max-height:calc(100vh - 32px); overflow-y:auto; }
.lg-contact .field{ margin-bottom:10px; }
.lg-contact textarea{ width:100%; }
.lg-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.lg-row-split{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.lg-remember{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink); cursor:pointer; text-transform:none; letter-spacing:normal; font-weight:500; margin:0; }
.lg-remember input{ width:17px; height:17px; accent-color:var(--primary); margin:0; }
.lg-guard-form .lg-row-split{ margin-top:20px; }
#formPassword .lg-row-split{ margin-top:4px; margin-bottom:6px; }
.login-home{ display:inline-flex; text-decoration:none; color:inherit; border-radius:10px; }
.login-home:focus-visible{ outline:2px solid var(--primary); outline-offset:4px; }