/* Login screen (login.php): a rangoli 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;
}
.lg-rangoli{
  position:absolute; width:118%; max-width:780px; aspect-ratio:1; left:50%; top:42%;
  transform:translate(-50%, -50%); fill:none; stroke:var(--lg-marigold); stroke-width:1.2;
  stroke-linecap:round; opacity:.9; pointer-events:none;
}
.lg-rangoli path, .lg-rangoli circle[pathLength]{ stroke-dasharray:1; stroke-dashoffset:1; animation:lgDraw 1.8s cubic-bezier(.55,.1,.3,1) forwards; }
.lg-rangoli .r-mid path, .lg-rangoli .r-mid circle{ animation-delay:.35s; }
.lg-rangoli .r-outer path{ animation-delay:.7s; stroke-width:.9; }
.lg-rangoli .r-dots circle{ fill:var(--lg-sindoor); stroke:none; opacity:0; animation:lgDot .6s 1.9s forwards; }
.lg-rangoli .r-outer{ transform-origin:0 0; animation:lgTurn 160s linear 2.4s infinite; }
.lg-rangoli .r-core circle:last-child{ fill:var(--lg-sindoor); stroke:none; }
@keyframes lgDraw{ to{ stroke-dashoffset:0; } }
@keyframes lgDot{ to{ opacity:.95; } }
@keyframes lgTurn{ to{ transform:rotate(360deg); } }

.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); }

/* Security guard: the panel turns marigold, the rangoli indigo */
.lg-wrap[data-mode="guard"] .lg-art{ background:var(--lg-marigold); color:var(--lg-ink); }
.lg-wrap[data-mode="guard"] .lg-rangoli{ stroke:var(--lg-neel); opacity:.55; }
.lg-wrap[data-mode="guard"] .lg-namaste{ color:var(--lg-ink); }
.lg-wrap[data-mode="guard"] .lg-line{ color:rgba(22,32,58,.85); }
.lg-wrap[data-mode="guard"] .lg-art-foot{ color:rgba(22,32,58,.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-input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.lg-keypad{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:6px; }
.lg-keypad button{
  font:inherit; font-size:26px; font-weight:700; height:60px; border-radius:14px; cursor:pointer;
  border:1px solid var(--border); background:#fff; color:var(--lg-ink); display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:transform .08s, background-color .15s;
}
.lg-keypad button:active{ transform:scale(.96); background:#FEF5E7; }
.lg-keypad button svg{ width:26px; height:26px; }
.lg-keypad button.go{ background:var(--lg-ink); border-color:var(--lg-ink); color:#fff; }
.lg-keypad button.go:disabled{ opacity:.5; }
.lg-keypad button:focus-visible, .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:190px; padding:22px 20px; }
  .lg-rangoli{ width:150%; top:20%; left:80%; }
  .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; }
  .lg-keypad button{ height:54px; }
}
@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, :root:not([data-theme="light"]) .lg-keypad button{ 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:not([data-theme="light"]) .lg-keypad button.go{ background:var(--lg-marigold); border-color:var(--lg-marigold); color:#16203A; }
}
: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, :root[data-theme="dark"] .lg-keypad button{ 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); }
:root[data-theme="dark"] .lg-keypad button.go{ background:var(--lg-marigold); border-color:var(--lg-marigold); color:#16203A; }
@media (prefers-reduced-motion: reduce){
  .lg-rangoli path, .lg-rangoli circle{ stroke-dashoffset:0 !important; }
  .lg-rangoli .r-dots circle{ opacity:.95; }
}
/* 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; } }