/* JH Office — light theme, JH Gallery logo ke rang: H laal, J kesariya, lace aqua, GALLERY hara. Poppins. */
:root{
  --rose:#B01F1D; --saffron:#B85600; --aqua:#0F7C80; --green:#557D0C;
  --j-orange:#ED8106; --lace-aqua:#5ABABC; --gallery-green:#9BB31D; /* logo ke asli chamakdar rang: sirf patti/sajawat ke liye */
  --rose-soft:#FCE9E6; --saffron-soft:#FFF0DC; --aqua-soft:#E2F5F5; --green-soft:#EEF6DA;
  --bg:#FFF9F1; --surface:#FFFFFF; --ink:#2B1A14; --muted:#7A6559; --line:#F0E2D3; --chip:#FBF1E6;
  --bad:#C62828; --bad-soft:#FDE7E7; --ok:#2E7D32; --ok-soft:#E5F4E6;
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px;
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:12.5px}

/* splash + login */
.splash,.center{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;align-content:center;gap:12px;padding:24px 16px;text-align:center}
.center .row-c{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;margin-top:18px}
.logo{width:44px;height:44px;flex:none;object-fit:contain;display:block}
.logo.big{width:120px;height:120px}
.brandstrip{height:4px;background:linear-gradient(90deg,var(--j-orange) 0 25%,var(--rose) 25% 50%,var(--lace-aqua) 50% 75%,var(--gallery-green) 75%)}
.langbtn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:500;color:var(--aqua)}
.card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--j-orange);border-radius:16px;box-shadow:0 6px 24px rgba(176,31,29,.06);padding:28px 24px;max-width:380px;width:100%;display:flex;flex-direction:column;gap:14px;align-items:center}
.card h1{margin:0;font-size:21px}
.card p{margin:0;color:var(--muted);font-size:13px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px;font-weight:500}

/* app shell */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px;min-width:0}
.brand b{display:block;font-size:16px;line-height:1.1}
.brand small{color:var(--muted);font-size:11.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;flex-direction:column;gap:4px}
.nav button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:10px 12px;border-radius:10px;text-align:left;color:var(--muted);font-weight:500}
.nav button svg{width:20px;height:20px;flex:none}
.nav button:hover{background:var(--chip);color:var(--ink)}
.nav button[aria-current="true"]{background:var(--c-soft,var(--chip));color:var(--c,var(--ink))}
.rail .who{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.who b{font-size:13.5px}
.linkbtn{background:none;border:0;color:var(--aqua);font-weight:500;padding:0;text-align:left;font-size:13px}

.main{min-width:0;padding-block:20px 40px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.topbar{display:none}
.shiftbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--aqua-soft);border-radius:var(--r);padding:10px 14px;margin-bottom:16px}
.shiftbar b{color:var(--aqua);font-size:15px}
.shiftbar .sp{flex:1}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pagehead h1{margin:0;font-size:24px;line-height:1.2;text-wrap:balance}
.pagehead p{margin:2px 0 0;color:var(--muted)}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:4px;border-top:3px solid var(--c)}
.tile span{color:var(--muted);font-size:12.5px}
.tile b{font-size:22px;line-height:1.15}
.tile small{color:var(--muted);font-size:12px}
.grid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0;margin-bottom:16px}
.panel h2{margin:0 0 10px;font-size:15.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel h2 .count{color:var(--muted);font-weight:500;font-size:13px}
.alert{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.alert:first-of-type{border-top:0}
.dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:6px;background:var(--c,var(--line))}
.alert p{margin:0}
.alert small{color:var(--muted)}
.empty{color:var(--muted);padding:8px 0}

.btn{border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:10px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px}
.btn.primary{background:var(--c,var(--aqua));border-color:var(--c,var(--aqua));color:#fff}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn svg{width:16px;height:16px}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;background:var(--chip);color:var(--muted);white-space:nowrap}
.pill.g{background:var(--ok-soft);color:var(--ok)}
.pill.s{background:var(--saffron-soft);color:var(--saffron)}
.pill.r{background:var(--bad-soft);color:var(--bad)}
.pill.a{background:var(--aqua-soft);color:var(--aqua)}
.pill.p{background:var(--rose-soft);color:var(--rose)}

form.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
form.row input,form.row select{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);min-width:0;flex:1 1 140px}
form.row button{flex:none}
select.inline{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.switch{width:42px;height:24px;border-radius:999px;border:0;background:var(--line);position:relative;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.switch[aria-checked="true"]{background:var(--ok)}
.switch[aria-checked="true"]::after{left:21px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chipbtn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--muted)}
.chipbtn[aria-pressed="true"]{background:var(--aqua);border-color:var(--aqua);color:#fff}

/* Kaun kaam kar raha hai */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:12px;width:100%;max-width:640px}
.person{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:600;font-size:16px}
.person .av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:22px;background:var(--c)}
.person:active{transform:scale(.98)}

/* PIN pad */
.overlay{position:fixed;inset:0;background:rgba(20,12,16,.55);display:grid;place-items:center;z-index:60;padding:16px}
.sheet{background:var(--surface);border-radius:18px;padding:22px;max-width:360px;width:100%;display:flex;flex-direction:column;gap:14px;align-items:center}
.sheet h2{margin:0;font-size:18px;text-align:center}
.pindots{display:flex;gap:14px;margin:4px 0}
.pindots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted)}
.pindots i.on{background:var(--ink);border-color:var(--ink)}
.pinpad{display:grid;grid-template-columns:repeat(3,72px);gap:12px}
.pinpad button{height:64px;border-radius:16px;border:1px solid var(--line);background:var(--bg);font-size:24px;font-weight:600}
.pinpad button.k{font-size:14px;font-weight:500;color:var(--muted)}
.err{color:var(--bad);font-size:13px;min-height:20px;text-align:center}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13.5px;z-index:80;max-width:90vw;text-align:center}

.bottombar{display:none}

@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:720px){
  .app{display:block}
  .rail{display:none}
  .main{padding-block:0 110px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:var(--bg);padding:calc(12px + env(safe-area-inset-top,0px)) 0 12px;margin-bottom:6px}
  .topbar .sp{flex:1}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);
    padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .bottombar button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:11px;color:var(--muted);border-radius:10px;font-weight:500}
  .bottombar svg{width:22px;height:22px}
  .bottombar button[aria-current="true"]{color:var(--c);background:var(--c-soft)}
  .pagehead h1{font-size:21px}
  .hide-m{display:none}
}
@media (min-width:721px){.hide-d{display:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}