:root{
  --navy:#0b2857;--blue:#1f5fae;--blue2:#2b73c9;--bg:#f4f7fb;
  --card:#fff;--text:#172033;--muted:#6b778d;--line:#dce4ef;
  --soft:#edf3fb;--green:#16734a;--greenbg:#e8f7ef;
  --saffron:#d87900;--red:#b3261e;--redbg:#fdeceb;
  --shadow:0 14px 34px rgba(18,44,87,.11)
}
[data-theme=dark]{
  --bg:#08111f;--card:#111e32;--text:#edf4ff;--muted:#9dadc0;
  --line:#263852;--soft:#17263d;--greenbg:#123425;--redbg:#3a1717;
  --shadow:0 14px 34px rgba(0,0,0,.3)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
button,input{font:inherit}button{border:0;cursor:pointer}
.hidden, [hidden], .portal-modal.hidden, .modal.hidden{display:none!important}

/* Pure SVG Icon Styling - 100% Failure-Proof & Instant Render */
.portal-icon, svg.portal-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.25em;
  height:1.25em;
  fill:currentColor;
  stroke:none;
  vertical-align:middle;
  flex-shrink:0;
  line-height:1;
  pointer-events:none;
}
.material-symbols-rounded{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  flex-shrink:0;
  line-height:1;
  font-size:20px;
}
.material-symbols-rounded svg.portal-icon{
  width:1em;
  height:1em;
}

.loading{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
align-content:center;gap:14px;color:#fff;background:rgba(5,18,40,.75);backdrop-filter:blur(7px)}
.spinner{width:44px;height:44px;border:4px solid rgba(255,255,255,.25);
border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.header{position:sticky;top:0;z-index:40;min-height:86px;padding:12px clamp(12px,3vw,32px);
display:flex;align-items:center;justify-content:space-between;color:#fff;
background:radial-gradient(circle at 90% 0,rgba(255,255,255,.13),transparent 28%),
linear-gradient(120deg,#06152f,var(--blue));box-shadow:0 10px 28px rgba(7,26,61,.24)}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.logo{width:60px;height:60px;flex:0 0 60px;display:grid;place-items:center;overflow:hidden;
border-radius:18px;background:#fff;color:var(--navy);font-size:12px;font-weight:900}
.logo img{width:100%;height:100%;object-fit:contain}
.brand h1{margin:0;font-size:clamp(18px,2.5vw,25px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand p,.brand small{display:block;margin:3px 0 0;opacity:.85}
.header-actions{display:flex;align-items:center;gap:7px}
.icon-btn,.profile-btn{min-height:45px;border-radius:14px;color:#fff;background:rgba(255,255,255,.12)}
.icon-btn{position:relative;width:45px;display:grid;place-items:center}
.profile-btn{padding:5px 10px 5px 6px;display:flex;align-items:center;gap:8px}
.profile-btn>span:first-child,.profile-summary>span:first-child{display:grid;place-items:center;
border-radius:50%;background:#fff;color:var(--navy);font-weight:900}
.profile-btn>span:first-child{width:35px;height:35px;font-size:12px}
.profile-btn .desktop-only{display:grid;text-align:left}.profile-btn strong{font-size:12px}
.profile-btn small{font-size:10px;opacity:.8}.menu-btn{display:none}
.badge{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;
display:grid;place-items:center;border-radius:999px;background:#ff6755;font-size:10px}

.floating{position:fixed;top:75px;right:16px;z-index:60;width:min(380px,calc(100vw - 24px));
padding:17px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow)}
.floating-head{display:flex;align-items:center;justify-content:space-between}
.floating-head h3{margin:4px 0 0}.floating-head button{width:36px;height:36px;border-radius:12px;
background:var(--soft);color:var(--text)}
.profile-summary{display:flex;align-items:center;gap:12px}.profile-summary>span:first-child{width:56px;height:56px}
.profile-summary strong,.profile-summary small{display:block}.profile-summary small{margin-top:3px;color:var(--muted)}
.theme-grid{margin-top:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.theme-grid button{min-height:45px;border-radius:13px;background:var(--soft);color:var(--text);font-weight:750}

.layout{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 86px)}
.sidebar{padding:17px 13px;border-right:1px solid var(--line);background:var(--card)}
.user-card{margin-bottom:14px;padding:14px;border-radius:16px;background:var(--soft)}
.user-card strong,.user-card span{display:block}.user-card span{margin-top:4px;color:var(--muted);font-size:12px}
#staffNavigation{display:grid;gap:5px}.nav-item{width:100%;min-height:46px;padding:10px 12px;
display:flex;align-items:center;gap:10px;border-radius:13px;background:transparent;color:var(--text);
font-weight:750;text-align:left}.nav-item:hover,.nav-item.active{color:var(--blue);background:var(--soft)}
.nav-icon{width:24px;display:grid;place-items:center;font-size:20px}
.support{margin-top:20px;padding:13px;display:flex;gap:9px;border-radius:15px;background:var(--soft)}
.support strong,.support small{display:block}.support small{margin-top:3px;color:var(--muted);font-size:10px}
.version{margin-top:12px;padding:8px;color:var(--muted);font-size:10px}

.content{padding:clamp(14px,3vw,30px);overflow:hidden}
.hero{min-height:285px;padding:clamp(27px,5vw,55px);display:flex;flex-direction:column;justify-content:center;
border-radius:28px;color:#fff;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.15),transparent 27%),
linear-gradient(135deg,#06152f,rgba(31,95,174,.95));box-shadow:var(--shadow)}
.hero-label{display:inline-flex;align-items:center;gap:6px;color:#ffbd65;font-size:11px;font-weight:900;
letter-spacing:.09em;text-transform:uppercase}.hero h2{max-width:820px;margin:14px 0 10px;
font-size:clamp(31px,5vw,54px);line-height:1.04;letter-spacing:-.035em}.hero p{max-width:700px;margin:0;
font-size:16px;line-height:1.6;opacity:.88}.trust{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.trust span{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.1);font-size:11px;font-weight:700}

.access-grid{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.card,.dash-card,.resident-summary,.resident-grid article,.placeholder{border:1px solid var(--line);
background:var(--card);box-shadow:var(--shadow)}
.card{padding:22px;border-radius:22px}.card-title{display:flex;align-items:center;gap:12px}
.card-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;color:var(--blue);background:var(--soft)}
.card h3{margin:4px 0 0;font-size:21px}.card>p{color:var(--muted);line-height:1.55}
.eyebrow{color:var(--saffron);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.card label{display:block;margin:10px 0 6px;color:var(--text);font-size:11px;font-weight:800}
.input{min-height:49px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid #c9d3e2;
border-radius:14px;background:var(--card)}.input:focus-within{border-color:var(--blue);
box-shadow:0 0 0 4px rgba(31,95,174,.12)}.input span{color:var(--muted)}
.input input{width:100%;min-height:46px;border:0;outline:0;background:transparent;color:var(--text);font-size:16px}
.primary,.secondary,.outline{min-height:49px;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center;
gap:7px;border-radius:14px;font-weight:850}.primary{width:100%;margin-top:12px;color:#fff;background:var(--blue)}
.secondary{width:100%;color:var(--blue);background:var(--soft)}.outline{color:var(--text);background:transparent;border:1px solid var(--line)}
.privacy{display:block;margin-top:12px;color:var(--muted)}.benefits{margin:18px 0;display:grid;gap:10px;color:var(--text)}
.message{margin-top:10px;padding:12px;border-radius:13px;color:var(--red);background:var(--redbg);font-size:12px;font-weight:700}

.notices-section{margin-top:23px}.notices-section h3{margin:5px 0 12px;font-size:26px}
.notice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.notice-card{padding:16px;border:1px solid var(--line);border-radius:17px;background:var(--card)}
.notice-card span{color:var(--blue);font-size:10px;font-weight:850;text-transform:uppercase}
.notice-card h4{margin:8px 0 5px}.notice-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}

.page-head{margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.page-head h2{margin:6px 0 4px;font-size:clamp(29px,4vw,42px);letter-spacing:-.025em}
.page-head p{margin:0;color:var(--muted)}.date-pill{padding:8px 11px;border-radius:999px;background:var(--soft);
color:var(--text);font-size:11px;font-weight:750}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.kpi .material-symbols-rounded{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
color:var(--blue);background:var(--soft)}.kpi label{display:block;margin-top:13px;color:var(--muted);font-size:10px;
font-weight:850;text-transform:uppercase}.kpi strong{display:block;margin-top:5px;font-size:25px}
.dashboard-grid{margin-top:14px;display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.dash-card{padding:19px;border-radius:21px}.dash-card h3{margin:5px 0 0}
.quick-grid{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.quick{min-height:96px;padding:12px;display:grid;place-items:center;gap:6px;border-radius:15px;background:var(--soft);
color:var(--text);font-size:11px;font-weight:800;text-align:center}.quick .material-symbols-rounded{color:var(--blue);font-size:26px}
.notice-item{padding:11px;border-radius:13px;background:var(--soft);margin-top:8px}
.notice-item strong,.notice-item span{display:block}.notice-item span{margin-top:3px;color:var(--muted);font-size:10px}
.placeholder{min-height:340px;padding:28px;display:grid;place-items:center;align-content:center;border-radius:25px;text-align:center}
.placeholder>.material-symbols-rounded{font-size:48px;color:var(--blue)}.placeholder h3{margin:12px 0 5px;font-size:24px}
.placeholder p{max-width:550px;margin:0;color:var(--muted);line-height:1.55}.placeholder b{margin-top:13px;padding:7px 10px;
border-radius:999px;color:var(--saffron);background:#fff2df;font-size:10px}

.resident-summary{padding:19px;display:flex;align-items:center;gap:13px;border-radius:21px}
.resident-home{width:56px;height:56px;display:grid;place-items:center;border-radius:17px;color:var(--blue);background:var(--soft)}
.resident-summary strong{font-size:20px}.resident-summary p{margin:4px 0 0;color:var(--muted)}
.resident-summary b{margin-left:auto;padding:7px 10px;border-radius:999px;color:var(--green);background:var(--greenbg);font-size:10px}
.resident-grid{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.resident-grid article{padding:19px;border-radius:18px}.resident-grid article>.material-symbols-rounded{color:var(--blue);font-size:27px}
.resident-grid h3{margin:11px 0 5px}.resident-grid p{margin:0;color:var(--muted);line-height:1.45}

footer{margin-top:22px;padding:15px 3px 5px;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:10px}
.mobile-nav{display:none}
#toasts{position:fixed;right:18px;bottom:18px;z-index:999999!important;width:min(380px,calc(100vw - 28px));display:grid;gap:10px;pointer-events:none}
.toast{padding:12px 14px;border-radius:13px;color:#fff;background:var(--navy);box-shadow:0 20px 45px rgba(15,23,42,.35);pointer-events:auto;border:1px solid rgba(255,255,255,.15);font-size:13px;font-weight:500;line-height:1.4}
.toast.success{background:var(--green)}.toast.error{background:var(--red)}

@media(max-width:930px){
  .layout{grid-template-columns:1fr}.sidebar{position:fixed;top:86px;left:0;bottom:0;z-index:50;width:min(86vw,285px);
  transform:translateX(-105%);transition:.22s;box-shadow:15px 0 40px rgba(7,26,61,.18)}
  .sidebar.open{transform:translateX(0)}.menu-btn{display:grid}.dashboard-grid{grid-template-columns:1fr}
  .mobile-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:45;padding:7px;display:grid;
  grid-template-columns:repeat(5,1fr);gap:4px;border:1px solid var(--line);border-radius:19px;background:var(--card);box-shadow:var(--shadow)}
  .mobile-nav button{min-height:47px;padding:5px;display:grid;place-items:center;gap:2px;border-radius:12px;
  color:var(--muted);background:transparent;font-size:9px;font-weight:800}.mobile-nav button.active{color:var(--blue);background:var(--soft)}
  .content{padding-bottom:88px}
}
@media(max-width:700px){
  .access-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notice-grid{grid-template-columns:1fr}.resident-grid{grid-template-columns:1fr}
}
@media(max-width:540px){
  .header{min-height:81px;padding:10px}.logo{width:53px;height:53px;flex-basis:53px}
  .brand p{display:none}.brand small{font-size:9px}.desktop-only{display:none!important}.profile-btn{padding:5px}
  .sidebar{top:81px}.content{padding:11px 9px 88px}.hero{min-height:260px;border-radius:21px}.hero h2{font-size:34px}
  .card{padding:18px;border-radius:19px}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer{display:grid}.resident-summary{flex-wrap:wrap}.resident-summary b{margin-left:0}
}


/* =========================================================
   Mobile Header Fix
   Prevents the portal title and action buttons from overlapping.
   ========================================================= */

.brand-copy{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}

.brand-copy h1,
.brand-copy p,
.brand-copy small{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.header-actions{
  flex:0 0 auto;
}

.profile-copy{
  display:grid;
  text-align:left;
}

@media(max-width:780px){
  .header{gap:10px}
  .brand{flex:1 1 auto;min-width:0}
  .brand-copy h1{font-size:clamp(17px,4.4vw,22px);line-height:1.12}
  .brand-copy p{display:none}
  .brand-copy small{font-size:10px;white-space:nowrap}
  .header-actions{gap:6px}
  .icon-btn{width:42px;min-height:42px;border-radius:13px}
  .profile-btn{min-height:42px;padding:4px;border-radius:13px}
  .profile-btn>span:first-child{width:34px;height:34px}
  .profile-copy{display:none}
}

@media(max-width:560px){
  .header{min-height:78px;padding:10px 9px;align-items:center}
  .brand{gap:9px}
  .logo{width:50px;height:50px;flex-basis:50px;border-radius:15px}
  .brand-copy h1{font-size:16px;line-height:1.2;white-space:normal;overflow-wrap:break-word}
  .brand-copy small{font-size:9px}
  .header-actions{gap:5px}
  .icon-btn,.profile-btn{min-height:40px}
  .icon-btn{width:40px}
  .profile-btn>span:first-child{width:32px;height:32px;font-size:11px}
  .header-actions .material-symbols-rounded{font-size:22px}
}

@media(max-width:430px){
  .header{min-height:74px;padding:9px 8px}
  .logo{width:46px;height:46px;flex-basis:46px;border-radius:14px}
  .brand{gap:8px}
  .brand-copy h1{font-size:14px;line-height:1.2;white-space:normal}
  .brand-copy small{font-size:8px}
  .header-actions{gap:4px}
  .icon-btn{width:36px;min-height:36px;border-radius:11px}
  .profile-btn{min-height:36px;border-radius:11px}
  .profile-btn>span:first-child{width:29px;height:29px;font-size:10px}
  .header-actions .material-symbols-rounded{font-size:20px}
}

@media(max-width:370px){
  .brand-copy small{display:none}
  .brand-copy h1{font-size:14px}
  .icon-btn{width:34px}
  .profile-btn>span:first-child{width:28px;height:28px}
}


/* Collector Module v4.0.0-dev.3 */
.collector-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px
}
.collector-stat,.collector-card,.collector-resident-card{
  border:1px solid var(--line);
  border-radius:19px;
  background:var(--card);
  box-shadow:var(--shadow)
}
.collector-stat{padding:17px}
.collector-stat>.material-symbols-rounded{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:12px;color:var(--blue);background:var(--soft)
}
.collector-stat small{display:block;margin-top:12px;color:var(--muted);font-weight:800;text-transform:uppercase}
.collector-stat strong{display:block;margin-top:5px;font-size:23px}
.collector-card{padding:20px;margin-bottom:14px}
.collector-card h3{margin:5px 0 4px;font-size:22px}
.collector-card p{margin:0;color:var(--muted)}
.collector-search-row{margin-top:15px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.collector-search-button{width:auto;margin-top:0}
.collector-search-results{margin-top:12px;display:grid;gap:8px}
.collector-result{
  width:100%;padding:13px;display:flex;align-items:center;gap:11px;
  border-radius:14px;background:var(--soft);color:var(--text);text-align:left
}
.collector-result:hover{outline:2px solid rgba(31,95,174,.18)}
.collector-result-icon{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:13px;color:var(--blue);background:var(--card)
}
.collector-result strong,.collector-result span{display:block}
.collector-result span{margin-top:3px;color:var(--muted);font-size:11px}
.collector-resident-card{padding:20px;margin-bottom:14px}
.collector-resident-head{display:flex;align-items:center;gap:13px}
.collector-resident-avatar{
  width:56px;height:56px;display:grid;place-items:center;
  border-radius:17px;color:var(--blue);background:var(--soft)
}
.collector-resident-head h3{margin:4px 0 3px;font-size:23px}
.collector-resident-head p{margin:0;color:var(--muted)}
.collector-outstanding-badge{
  margin-left:auto;padding:9px 12px;border-radius:14px;
  color:var(--red);background:var(--redbg);font-weight:900;text-align:right
}
.collector-invoice-list{margin-top:16px;display:grid;gap:8px}
.collector-invoice-item{
  padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-radius:13px;background:var(--soft)
}
.collector-invoice-item strong,.collector-invoice-item span{display:block}
.collector-invoice-item span{margin-top:3px;color:var(--muted);font-size:10px}
.collector-two-column{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.collector-card label{
  display:block;margin:12px 0 6px;color:var(--text);font-size:11px;font-weight:800
}
.collector-card select{
  width:100%;min-height:46px;border:0;outline:0;background:transparent;color:var(--text);font-size:15px
}
.collector-card textarea{
  width:100%;min-height:90px;padding:12px;border:1px solid #c9d3e2;
  border-radius:14px;background:var(--card);color:var(--text);font:inherit;resize:vertical
}
.collector-card .primary{margin-top:12px}
.collector-history-item{padding:12px;border-radius:13px;background:var(--soft);margin-top:8px}
.collector-history-item>div:first-child{display:flex;justify-content:space-between;gap:10px}
.collector-history-item strong{font-size:13px}
.collector-history-item p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.collector-success{
  margin-top:11px;padding:14px;border-radius:14px;color:var(--green);background:var(--greenbg)
}
.collector-success strong,.collector-success span{display:block}
.collector-success span{margin-top:4px;font-size:11px}

@media(max-width:800px){
  .collector-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collector-two-column{grid-template-columns:1fr}
}
@media(max-width:540px){
  .collector-search-row{grid-template-columns:1fr}
  .collector-search-button{width:100%}
  .collector-resident-head{align-items:flex-start;flex-wrap:wrap}
  .collector-outstanding-badge{margin-left:0;width:100%;text-align:left}
  .collector-invoice-item{align-items:flex-start}
}


/* Resident Module v4.0.0-dev.4 */
.resident-kpi-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.resident-kpi-card,.resident-data-card,.resident-contact-card{
  border:1px solid var(--line);
  border-radius:19px;
  background:var(--card);
  box-shadow:var(--shadow)
}
.resident-kpi-card{padding:18px}
.resident-kpi-card>.material-symbols-rounded{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:13px;color:var(--blue);background:var(--soft)
}
.resident-kpi-card small{
  display:block;margin-top:13px;color:var(--muted);
  font-size:10px;font-weight:850;text-transform:uppercase
}
.resident-kpi-card strong{
  display:block;margin-top:6px;font-size:24px
}
.resident-kpi-card em{
  display:block;margin-top:5px;color:var(--muted);
  font-size:10px;font-style:normal
}
.resident-data-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.resident-data-card{padding:19px}
.resident-card-heading h3{margin:5px 0 0}
.resident-invoice-item,.resident-payment-item{
  padding:12px;
  border-radius:13px;
  background:var(--soft);
  margin-top:8px
}
.resident-invoice-item>div:first-child,
.resident-payment-item>div:first-child{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px
}
.resident-invoice-item strong,
.resident-payment-item strong{
  font-size:13px
}
.resident-invoice-item p,
.resident-payment-item p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.5
}
.resident-status-paid{color:var(--green)}
.resident-status-due{color:var(--red)}
.resident-document-link{
  display:inline-flex;
  margin-top:7px;
  color:var(--blue);
  font-size:10px;
  font-weight:800;
  text-decoration:none
}
.resident-contact-card{
  margin-top:14px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:13px
}
.resident-contact-card>.material-symbols-rounded{
  width:50px;height:50px;display:grid;place-items:center;
  border-radius:15px;color:var(--blue);background:var(--soft)
}
.resident-contact-card h3{margin:5px 0 3px}
.resident-contact-card p{margin:0;color:var(--muted)}

@media(max-width:800px){
  .resident-kpi-grid{grid-template-columns:1fr 1fr}
  .resident-data-grid{grid-template-columns:1fr}
}
@media(max-width:540px){
  .resident-kpi-grid{grid-template-columns:1fr}
}

.staff-login-button{margin-top:12px}
.staff-logout-button{width:100%;min-height:45px;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:13px;color:var(--red);background:var(--redbg);font-weight:850}
button:disabled{cursor:not-allowed;opacity:.5}

/* Operations Console v4.0.0-dev.6 */
.operations-toolbar{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;margin-bottom:14px
}
.operations-button{width:auto;margin-top:0}
.operations-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.operations-card{
  padding:20px;border:1px solid var(--line);border-radius:20px;
  background:var(--card);box-shadow:var(--shadow);margin-bottom:14px
}
.operations-card h3{margin:5px 0 12px;font-size:22px}
.operations-card label{display:block;margin:11px 0 6px;font-size:11px;font-weight:800}
.operations-card select,.operations-card textarea{
  width:100%;border:1px solid #c9d3e2;border-radius:14px;
  background:var(--card);color:var(--text);font:inherit
}
.operations-card select{min-height:46px;padding:0 11px}
.operations-card textarea{min-height:110px;padding:12px;resize:vertical}
.operations-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.operations-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.operations-list-item{
  padding:12px;margin-top:8px;display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;border-radius:14px;background:var(--soft)
}
.operations-list-item strong,.operations-list-item span{display:block}
.operations-list-item span{margin-top:4px;color:var(--muted);font-size:10px;line-height:1.45}
.operations-list-actions{display:flex;gap:6px;flex-wrap:wrap}
.operations-list-actions button{
  min-height:34px;padding:6px 10px;border-radius:10px;
  color:var(--blue);background:var(--card);font-size:10px;font-weight:800
}
.report-date-row{display:flex;gap:7px;flex-wrap:wrap}
.report-date-row input{
  min-height:42px;padding:0 10px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--text)
}
.report-kpi-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0
}
.report-kpi-grid>div{
  padding:15px;border-radius:16px;background:var(--soft)
}
.report-kpi-grid small{display:block;color:var(--muted);font-weight:800;text-transform:uppercase}
.report-kpi-grid strong{display:block;margin-top:5px;font-size:21px}
.report-bar{
  margin-top:8px;padding:11px;border-radius:12px;background:var(--soft);
  display:flex;justify-content:space-between;gap:10px
}
.operations-table-wrap{overflow:auto;margin-top:10px}
.operations-table{
  width:100%;border-collapse:collapse;min-width:720px
}
.operations-table th,.operations-table td{
  padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:11px
}
.operations-table th{color:var(--muted);text-transform:uppercase;font-size:9px}
.centre-tabs{display:flex;gap:7px;margin-bottom:12px}
.centre-tabs button{
  min-height:40px;padding:8px 14px;border-radius:12px;
  color:var(--muted);background:var(--soft);font-weight:800
}
.centre-tabs button.active{color:#fff;background:var(--blue)}
.document-status-paid{color:var(--green)}
.document-status-due{color:var(--red)}
.document-link{
  color:var(--blue);font-weight:800;text-decoration:none
}

@media(max-width:850px){
  .operations-grid{grid-template-columns:1fr}
  .report-kpi-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .operations-toolbar{grid-template-columns:1fr}
  .operations-button{width:100%}
  .operations-form-grid{grid-template-columns:1fr}
  .operations-heading{align-items:flex-start;flex-direction:column}
  .report-kpi-grid{grid-template-columns:1fr 1fr}
  .operations-list-item{flex-direction:column}
}


.system-health-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.health-row{padding:11px;margin-top:8px;display:flex;justify-content:space-between;gap:12px;
border-radius:13px;background:var(--soft)}
.health-warning{margin-top:8px;padding:11px;border-radius:13px;color:var(--red);background:var(--redbg)}
@media(max-width:800px){.system-health-grid{grid-template-columns:1fr}}


/* v4.1.0 Automation & Analytics */
.analytics-kpi-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px
}
.analytics-kpi{
  padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)
}
.analytics-kpi small{display:block;color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase}
.analytics-kpi strong{display:block;margin-top:6px;font-size:24px}
.analytics-dashboard-grid{
  margin-top:14px;display:grid;grid-template-columns:1fr 1.4fr;gap:14px
}
.analytics-activity-card{margin-top:14px}
.analytics-mode-row,.analytics-activity-item{
  margin-top:8px;padding:11px;border-radius:13px;background:var(--soft)
}
.analytics-mode-row{display:flex;justify-content:space-between;gap:12px}
.analytics-activity-item strong,.analytics-activity-item span{display:block}
.analytics-activity-item span{margin-top:3px;color:var(--muted);font-size:10px}
.analytics-trend{
  min-height:180px;display:flex;align-items:flex-end;gap:7px;padding-top:18px;overflow-x:auto
}
.trend-column{
  min-width:34px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px
}
.trend-bar{
  width:100%;min-height:4px;border-radius:8px 8px 3px 3px;background:var(--blue)
}
.trend-column small{font-size:8px;color:var(--muted);transform:rotate(-45deg);white-space:nowrap}
.automation-mode-banner{
  margin-bottom:14px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:15px;
  border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow)
}
.automation-mode-banner h3{margin:4px 0}.automation-mode-banner p{margin:0;color:var(--muted)}
.defaulters-toolbar{grid-template-columns:minmax(0,1fr) 180px auto}
.defaulters-toolbar select,.operations-heading select,#automationInvoiceMonth{
  min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--text)
}
.queue-item,.reminder-item,.scheduler-item{
  margin-top:8px;padding:12px;border-radius:14px;background:var(--soft)
}
.queue-item>div:first-child,.reminder-item>div:first-child,.scheduler-item{
  display:flex;justify-content:space-between;gap:12px
}
.queue-item strong,.queue-item span,.reminder-item strong,.reminder-item span{
  display:block
}
.queue-item span,.reminder-item span{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.45}
.reminder-actions{display:flex;flex-wrap:wrap;gap:8px}
.automation-note{color:var(--muted);font-size:11px;line-height:1.5}
.schedule-list{display:grid;gap:8px}
.schedule-list>div{padding:11px;border-radius:13px;background:var(--soft)}
.schedule-list strong,.schedule-list span{display:block}
.schedule-list span{margin-top:3px;color:var(--muted);font-size:10px}
.status-good{color:var(--green)}
.status-bad{color:var(--red)}
.status-warn{color:var(--saffron)}

@media(max-width:900px){
  .analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analytics-dashboard-grid{grid-template-columns:1fr}
  .defaulters-toolbar{grid-template-columns:1fr}
}
@media(max-width:560px){
  .analytics-kpi-grid{grid-template-columns:1fr}
  .automation-mode-banner{align-items:flex-start;flex-direction:column}
  .reminder-actions{display:grid}
}


/* v4.2.0 Attendance & Expense Management */
.attendance-kpi-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px
}
.attendance-kpi{
  padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)
}
.attendance-kpi small{display:block;color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase}
.attendance-kpi strong{display:block;margin-top:5px;font-size:23px}
.attendance-tabs{margin-bottom:14px}
.attendance-row{
  margin-top:8px;padding:13px;border-radius:14px;background:var(--soft);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px
}
.attendance-row strong,.attendance-row span{display:block}
.attendance-row span{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.45}
.attendance-actions{display:flex;flex-wrap:wrap;gap:6px}
.attendance-actions button{
  min-height:34px;padding:6px 10px;border-radius:10px;background:var(--card);
  color:var(--blue);font-size:10px;font-weight:800
}
.attendance-status-present{color:var(--green)}
.attendance-status-absent{color:var(--red)}
.attendance-status-leave{color:var(--saffron)}
.attendance-status-off{color:var(--muted)}
.salary-action{
  min-height:32px;padding:5px 9px;border-radius:9px;background:var(--card);
  color:var(--blue);font-size:10px;font-weight:800
}
.expense-summary-row{
  margin-top:8px;padding:11px;border-radius:13px;background:var(--soft);
  display:flex;justify-content:space-between;gap:10px
}
@media(max-width:850px){
  .attendance-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attendance-row{flex-direction:column}
}
@media(max-width:560px){
  .attendance-kpi-grid{grid-template-columns:1fr}
  .attendance-actions{display:grid;width:100%}
  .attendance-actions button{width:100%}
}


/* v4.2.3 Expense register and detail view */
.expense-list-item{
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease
}
.expense-list-item:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
  background:var(--card)
}
.expense-list-item:focus{
  outline:3px solid rgba(37,99,235,.18);
  outline-offset:2px
}
.portal-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(6,18,40,.66);
  backdrop-filter:blur(6px)
}
.portal-modal-card{
  width:min(720px,100%);
  max-height:90vh;
  overflow:auto;
  padding:20px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--card);
  box-shadow:0 24px 70px rgba(0,0,0,.25)
}
.portal-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px
}
.portal-modal-head h3{
  margin:4px 0 0;
  font-size:24px
}
.expense-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.expense-detail-field{
  padding:12px;
  border-radius:14px;
  background:var(--soft)
}
.expense-detail-field.full{
  grid-column:1/-1
}
.expense-detail-field small{
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase
}
.expense-detail-field strong,
.expense-detail-field span{
  display:block;
  margin-top:5px;
  word-break:break-word
}
.portal-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px
}
@media(max-width:560px){
  .expense-detail-grid{grid-template-columns:1fr}
  .expense-detail-field.full{grid-column:auto}
  .portal-modal-card{padding:16px}
  .portal-modal-actions{display:grid}
}


/* v5.0.0 Performance & UX */
.sidebar{
  min-height:0;
  max-height:calc(100vh - var(--header-height,92px));
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch
}
#staffNavigation{
  padding-bottom:24px
}
.section-loader{
  min-height:110px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(
    90deg,
    var(--soft) 25%,
    var(--card) 37%,
    var(--soft) 63%
  );
  background-size:400% 100%;
  animation:portalSkeleton 1.2s ease infinite;
  color:var(--muted);
  font-size:11px;
  font-weight:800
}
@keyframes portalSkeleton{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}
.loading{
  pointer-events:none
}
.loading:not(.hidden){
  background:rgba(4,18,42,.35);
  backdrop-filter:blur(2px)
}
.toast{
  animation:toastIn .18s ease;
  max-width:min(390px,calc(100vw - 28px))
}
.toast.persistent{
  padding-right:42px
}
.toast-close{
  position:absolute;
  top:6px;
  right:7px;
  width:28px;
  height:28px;
  border-radius:9px;
  color:inherit;
  background:rgba(255,255,255,.16)
}
.activity-centre-list{
  display:grid;
  gap:9px;
  margin-top:12px
}
.activity-centre-item{
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card)
}
.activity-centre-item strong,
.activity-centre-item span{
  display:block
}
.activity-centre-item span{
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5
}
.activity-centre-top{
  display:flex;
  justify-content:space-between;
  gap:12px
}
.activity-module-pill{
  padding:4px 8px;
  border-radius:999px;
  color:var(--blue);
  background:var(--soft);
  font-size:9px;
  font-weight:850;
  white-space:nowrap
}
.system-activity-toolbar{
  grid-template-columns:minmax(0,1fr) 190px 140px
}
.section-meta{
  margin-top:8px;
  color:var(--muted);
  font-size:10px
}
@media(max-width:900px){
  .system-activity-toolbar{
    grid-template-columns:1fr
  }
}
@media(max-width:780px){
  .sidebar{
    position:fixed;
    top:var(--header-height,78px);
    bottom:0;
    left:0;
    height:auto;
    max-height:none;
    overflow-y:auto;
    padding-bottom:max(28px,env(safe-area-inset-bottom))
  }
}


/* v5.0.1 Collector simplicity */
#collectorSearchQuery:disabled{
  opacity:.72;
  cursor:wait
}
.collector-result{
  scroll-margin-top:110px
}
@media(max-width:560px){
  .collector-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .collector-search-row{
    grid-template-columns:1fr
  }
  .collector-search-button{
    width:100%;
    min-height:48px
  }
}


/* v5.0.2 Search, notices and on-demand documents */
.collector-search-mode{
  display:inline-flex;
  gap:5px;
  padding:5px;
  margin-bottom:10px;
  border-radius:14px;
  background:var(--soft)
}
.collector-search-mode button{
  min-height:38px;
  padding:7px 12px;
  border-radius:10px;
  color:var(--muted);
  font-size:11px;
  font-weight:850
}
.collector-search-mode button.active{
  color:var(--blue);
  background:var(--card);
  box-shadow:var(--shadow)
}
.notice-clickable{
  cursor:pointer;
  text-align:left
}
button.notice-item{
  width:100%;
  border:0
}
.notice-modal-card{
  width:min(680px,100%)
}
.notice-detail-body{
  padding:17px;
  border-radius:16px;
  background:var(--soft);
  white-space:pre-wrap;
  font-size:14px;
  line-height:1.7
}
.notice-all-button{
  width:100%;
  margin-top:9px
}
.document-centre-note{
  margin-bottom:12px;
  padding:12px;
  border-radius:14px;
  color:var(--muted);
  background:var(--soft);
  font-size:11px;
  line-height:1.55
}
.pdf-bulk-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px
}
.pdf-bulk-toolbar input{
  min-height:44px;
  flex:1;
  min-width:180px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--text)
}
@media(max-width:560px){
  .collector-search-mode{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%
  }
  .pdf-bulk-toolbar{
    display:grid
  }
}


/* v5.1.0 local resident search */
.collector-search-results{
  contain:content
}
.collector-result,
.operations-list-item{
  content-visibility:auto;
  contain-intrinsic-size:70px
}


/* v5.2.0 Feature Control and update requests */
.feature-control-row,
.request-card{
  margin-top:9px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card)
}
.feature-control-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px
}
.feature-control-row strong,
.feature-control-row span,
.request-card strong,
.request-card span{
  display:block
}
.feature-control-row span,
.request-card span{
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5
}
.feature-switch{
  position:relative;
  flex:0 0 auto
}
.feature-switch input{
  position:absolute;
  opacity:0
}
.feature-switch span{
  width:48px;
  height:27px;
  border-radius:999px;
  background:var(--line);
  cursor:pointer;
  transition:.2s
}
.feature-switch span:after{
  content:'';
  position:absolute;
  top:4px;
  left:4px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
  box-shadow:0 2px 7px rgba(0,0,0,.18)
}
.feature-switch input:checked+span{
  background:var(--green)
}
.feature-switch input:checked+span:after{
  transform:translateX(21px)
}
.request-card{
  display:flex;
  justify-content:space-between;
  gap:14px
}
.request-card-main{
  min-width:0
}
.request-card-side{
  flex:0 0 auto;
  text-align:right
}
.resident-update-content{
  width:100%
}
.resident-update-grid{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:8px;
  margin:10px 0
}
.resident-update-content textarea{
  width:100%;
  margin-bottom:9px
}
#collectorVisitCard,
#collectorUpdateCard{
  margin-bottom:14px
}
@media(max-width:650px){
  .request-card{
    flex-direction:column
  }
  .request-card-side{
    text-align:left
  }
  .resident-update-grid{
    grid-template-columns:1fr
  }
}


/* v5.2.1 Unified collection, branding and legal pages */
.hero h2{
  font-size:clamp(27px,4.2vw,48px);
  max-width:920px
}
.collector-workflow-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:14px
}
.collector-primary-card{
  grid-row:span 1
}
.collector-correction-card{
  grid-column:1/-1
}
.portal-select-wrap{
  position:relative
}
.portal-select-wrap:after{
  content:'';
  position:absolute;
  right:16px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.portal-select-wrap select,
#collectorUpdateField{
  width:100%;
  min-height:48px;
  padding:0 42px 0 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--card);
  color:var(--text);
  font:inherit;
  appearance:none;
  -webkit-appearance:none
}
.visit-outstanding-note,
.last-visit-summary{
  margin:10px 0;
  padding:12px;
  border-radius:13px;
  background:var(--soft)
}
.last-visit-summary strong,
.last-visit-summary span{
  display:block
}
.last-visit-summary span{
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5
}
.resident-visit-notification{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-top:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  text-align:left
}
.resident-visit-notification strong,
.resident-visit-notification small{
  display:block
}
.resident-visit-notification small{
  margin-top:4px;
  color:var(--muted)
}
.portal-footer{
  display:grid;
  gap:8px;
  justify-items:center;
  text-align:center
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 13px
}
.footer-links button{
  padding:0;
  color:var(--blue);
  background:transparent;
  font-size:10px;
  font-weight:750
}
.information-modal-card{
  width:min(760px,100%)
}
.information-body{
  font-size:13px;
  line-height:1.7
}
.information-body h4{
  margin:16px 0 4px
}
.information-body p{
  margin:7px 0
}
.information-body ul{
  padding-left:20px
}
.legal-disclaimer{
  margin:14px 0;
  padding:14px;
  border-left:4px solid var(--saffron);
  border-radius:12px;
  background:var(--soft)
}
@media(max-width:780px){
  .collector-workflow-grid{
    grid-template-columns:1fr
  }
  .collector-correction-card{
    grid-column:auto
  }
}


/* v5.2.3 embedded RWA logo */
.logo{
  overflow:hidden;
  background:#fff;
}
.logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  padding:3px;
}
@media(max-width:560px){
  .logo img{padding:2px}
}


/* v5.2.4 resident update form UI */
.update-field-control,
.update-value-host{
  position:relative;
  min-width:0
}
.update-field-control:after,
.update-value-host:has(select):after{
  content:'';
  position:absolute;
  right:16px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.update-field-control select,
.update-value-host select,
.update-value-host input,
.operations-form-grid select{
  width:100%;
  min-height:48px;
  padding:0 42px 0 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--card);
  color:var(--text);
  font:inherit;
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box
}
.update-value-host input{
  padding-right:13px
}
.update-value-host input:disabled{
  opacity:.65;
  cursor:not-allowed;
  background:var(--soft)
}
.resident-update-grid{
  align-items:end
}
.resident-update-content select,
.resident-update-content input,
.resident-update-content textarea{
  font-size:16px
}
@media(max-width:650px){
  .resident-update-grid{
    grid-template-columns:1fr;
    gap:10px
  }
  .resident-update-content{
    min-width:0
  }
}


/* v6.1.0 unified login, resident UX and lazy loading */
.landing-experience-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);
  gap:18px;
  margin-top:18px
}
.unified-login-card{
  max-width:none
}
.login-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin:12px 0 18px;
  padding:5px;
  border-radius:14px;
  background:var(--soft)
}
.login-tabs button{
  min-height:42px;
  border-radius:10px;
  color:var(--muted);
  font-weight:850
}
.login-tabs button.active{
  color:var(--blue);
  background:var(--card);
  box-shadow:var(--shadow)
}
.public-service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px
}
.public-service-grid button{
  min-height:128px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  padding:18px;
  border-radius:17px;
  background:var(--soft);
  text-align:left
}
.public-service-grid .material-symbols-rounded{
  color:var(--blue);
  font-size:29px
}
.public-service-grid small{
  color:var(--muted)
}
.resident-quick-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.resident-quick-actions button{
  min-height:104px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  border-radius:16px;
  background:var(--soft);
  text-align:center
}
.resident-quick-actions .material-symbols-rounded{
  color:var(--blue);
  font-size:28px
}
.portal-textarea{
  width:100%;
  min-height:110px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--card);
  color:var(--text);
  font:inherit;
  resize:vertical;
  box-sizing:border-box
}
.notification-inbox-item.unread{
  border-left:4px solid var(--blue);
  background:var(--soft)
}
.directory-search-row{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:9px;
  margin-bottom:12px
}
.directory-search-row select{
  min-height:48px;
  padding:0 38px 0 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--card);
  color:var(--text)
}
.directory-result-card{
  display:flex;
  gap:12px;
  margin-top:9px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card)
}
.directory-result-card>.material-symbols-rounded{
  color:var(--blue)
}
.directory-result-card strong,
.directory-result-card small{
  display:block
}
.directory-result-card small,
.directory-result-card p{
  margin-top:3px;
  color:var(--muted);
  font-size:10px
}
.directory-result-actions{
  display:flex;
  gap:8px;
  margin-top:8px
}
.directory-result-actions a{
  padding:7px 11px;
  border-radius:9px;
  color:var(--blue);
  background:var(--soft);
  font-size:10px;
  font-weight:800
}
#defaultersLoadMore{
  margin-top:12px
}
@media(max-width:780px){
  .landing-experience-grid{
    grid-template-columns:1fr
  }
  .resident-quick-actions{
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:560px){
  .public-service-grid{
    grid-template-columns:1fr 1fr
  }
  .public-service-grid button{
    min-height:112px;
    padding:14px
  }
  .directory-search-row{
    grid-template-columns:1fr
  }
}


/* v6.2.0 community services */
.resident-community-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.resident-community-actions button{
  min-height:105px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  border-radius:16px;
  background:var(--soft);
  text-align:center
}
.resident-community-actions .material-symbols-rounded{
  color:var(--blue);
  font-size:29px
}
.community-services-modal-card{
  width:min(920px,100%)
}
#communityServicesSearch{
  display:grid;
  grid-template-columns:1fr 210px;
  gap:9px;
  margin-bottom:14px
}
#communityServicesSearch select,
.community-cms-tabs button{
  min-height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--text)
}
.community-content-card,
.community-map-card{
  margin-top:10px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card)
}
.community-category{
  display:inline-block;
  margin-bottom:7px;
  padding:4px 8px;
  border-radius:999px;
  color:var(--blue);
  background:var(--soft);
  font-size:9px;
  font-weight:850
}
.community-content-card h4,
.community-map-card h4{
  margin:0 0 6px
}
.community-content-card p,
.community-map-card p,
.knowledge-content{
  color:var(--muted);
  font-size:12px;
  line-height:1.65
}
.community-timing{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0
}
.community-timing span{
  padding:10px;
  border-radius:12px;
  background:var(--soft);
  font-size:10px
}
.community-timing strong{
  display:block;
  margin-top:4px;
  color:var(--text)
}
.knowledge-card details{
  margin-top:10px
}
.knowledge-card summary{
  color:var(--blue);
  font-weight:800;
  cursor:pointer
}
.community-map-card img{
  width:100%;
  max-height:520px;
  margin-top:10px;
  border-radius:13px;
  object-fit:contain;
  background:var(--soft)
}
.community-map-placeholder{
  display:grid;
  place-items:center;
  min-height:190px;
  margin-top:10px;
  border-radius:13px;
  background:var(--soft);
  color:var(--muted)
}
.community-cms-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:14px 0
}
.community-cms-tabs button{
  padding:0 14px;
  font-weight:800
}
.community-cms-tabs button.active{
  color:#fff;
  border-color:var(--blue);
  background:var(--blue)
}
#communityCmsDynamicForm input,
#communityCmsDynamicForm select,
#communityCmsDynamicForm textarea{
  width:100%;
  min-height:46px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--text);
  font:inherit;
  box-sizing:border-box
}
#communityCmsDynamicForm textarea{
  min-height:100px;
  resize:vertical
}
@media(max-width:760px){
  .resident-community-actions{
    grid-template-columns:1fr 1fr
  }
  #communityServicesSearch{
    grid-template-columns:1fr
  }
}


/* v6.2.1 UI/UX modernization */
:root{
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --touch:48px;
  --focus:0 0 0 3px rgba(37,99,235,.22);
  --shadow-soft:0 8px 24px rgba(15,23,42,.08);
  --shadow-dialog:0 24px 70px rgba(15,23,42,.22)
}
button,
input,
select,
textarea{
  font:inherit
}
button{
  min-height:var(--touch)
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:var(--focus)
}
.card,
.dash-card,
.operations-card,
.resident-data-card,
.collector-card{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft)
}
input,
select,
textarea,
.input{
  border-radius:var(--radius-md)
}
.sidebar-mobile-head{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:8px 4px 16px
}
.sidebar-backdrop{
  position:fixed;
  inset:0;
  z-index:38;
  border:0;
  background:rgba(15,23,42,.48);
  backdrop-filter:none
}
.portal-modal{
  padding:18px;
  overflow:auto
}
.portal-modal-card{
  max-height:calc(100vh - 36px);
  overflow:auto;
  border-radius:22px;
  box-shadow:var(--shadow-dialog);
  animation:portalModalIn .16s ease-out
}
.portal-modal-head{
  position:sticky;
  top:0;
  z-index:3;
  padding-bottom:10px;
  background:var(--card)
}
.portal-modal-head .icon-btn{
  flex:0 0 var(--touch)
}
@keyframes portalModalIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
/* ---- Community Information — Redesigned ---- */
.public-community-section{
  margin-top:20px
}
.section-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px
}
.section-heading-row h3{
  margin:3px 0 0;
  font-size:18px;
  font-weight:700
}
.text-button{
  min-height:36px;
  padding:0 10px;
  color:var(--blue);
  background:transparent;
  font-weight:800;
  font-size:13px
}

/* Action quick-access buttons (Local Contacts, Public Notices) */
.public-community-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px
}
.public-community-actions button{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  text-align:left;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease,box-shadow .15s ease
}
.public-community-actions button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(32,169,206,.12)
}
.public-community-actions .action-icon-wrap{
  flex:0 0 38px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--soft);
  color:var(--blue)
}
.public-community-actions .material-symbols-rounded{
  color:var(--blue);
  font-size:22px
}
.public-community-actions strong{
  display:block;
  font-size:13px;
  font-weight:700;
  line-height:1.25
}
.public-community-actions small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4
}

/* Community info card grid */
.public-community-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.public-info-card{
  min-height:100px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  text-align:left;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease,box-shadow .15s ease
}
.public-info-card:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(32,169,206,.1)
}
.public-info-card>.material-symbols-rounded{
  flex:0 0 32px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:10px;
  color:var(--blue);
  background:var(--soft)
}
/* Category colour themes for info cards */
.public-info-card.cat-water>.material-symbols-rounded{color:#0284c7;background:#e0f2fe}
.public-info-card.cat-electricity>.material-symbols-rounded{color:#d97706;background:#fef3c7}
.public-info-card.cat-events>.material-symbols-rounded{color:#7c3aed;background:#ede9fe}
.public-info-card.cat-emergency>.material-symbols-rounded{color:#dc2626;background:#fee2e2}
.public-info-card.cat-water{border-color:#bae6fd}
.public-info-card.cat-electricity{border-color:#fde68a}
.public-info-card.cat-events{border-color:#ddd6fe}
.public-info-card.cat-emergency{border-color:#fecaca}

.public-info-card small,
.public-info-card strong,
.public-info-card em,
.public-info-card b{
  display:block
}
.public-info-card small{
  color:var(--blue);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em
}
.public-info-card.cat-water small{color:#0284c7}
.public-info-card.cat-electricity small{color:#d97706}
.public-info-card.cat-events small{color:#7c3aed}
.public-info-card.cat-emergency small{color:#dc2626}
.public-info-card strong{
  margin-top:4px;
  font-size:13px;
  font-weight:700;
  line-height:1.25
}
.public-info-card em{
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  font-style:normal;
  line-height:1.45
}
.public-info-card b{
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:8px;
  font-size:9px;
  font-weight:700;
  color:#0284c7
}

/* Skeleton cards match new height */
.skeleton-card{
  min-height:100px;
  border-radius:14px;
  background:linear-gradient(
    90deg,
    var(--soft) 25%,
    rgba(148,163,184,.18) 50%,
    var(--soft) 75%
  );
  background-size:200% 100%;
  animation:skeletonMove 1.2s infinite
}

/* Responsive: on ≥980px show 4-col info grid */
@media(min-width:981px){
  .public-community-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
}
@media(max-width:980px){
  .public-community-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .sidebar-mobile-head{
    display:flex
  }
  body.drawer-open{
    overflow:hidden
  }
}
@media(max-width:620px){
  .public-community-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .public-info-card{
    min-height:90px;
    padding:11px;
    gap:8px
  }
  .public-info-card>.material-symbols-rounded{
    flex:0 0 28px;
    width:28px;
    height:28px;
    border-radius:8px
  }
  .public-info-card strong{font-size:12px}
  .section-heading-row{
    align-items:center
  }
  .public-community-actions button{
    min-height:64px;
    padding:10px 12px;
    gap:9px
  }
  .public-community-actions .material-symbols-rounded{
    font-size:20px
  }
}
@media(max-width:380px){
  .public-community-grid{
    grid-template-columns:1fr
  }
}
@media(prefers-reduced-motion:reduce){
  *,
  *:before,
  *:after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}

/* Utility components */
.portal-empty-state{
  grid-column:1/-1;
  min-height:150px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:20px;
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
  color:var(--muted);
  text-align:center
}
.portal-empty-state .material-symbols-rounded{
  font-size:34px
}
@keyframes skeletonMove{
  to{background-position:-200% 0}
}
.skeleton-loader{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  align-items:center;
  padding:16px
}
.skeleton-loader span{
  height:10px;
  border-radius:999px;
  background:var(--soft);
  animation:skeletonPulse 1.1s infinite alternate
}
.skeleton-loader span:nth-child(2){animation-delay:.15s}
.skeleton-loader span:nth-child(3){animation-delay:.3s}
.skeleton-loader strong{
  grid-column:1/-1;
  color:var(--muted);
  font-size:10px
}
@keyframes skeletonPulse{
  to{opacity:.35}
}
.search-clear-button{
  flex:0 0 34px;
  min-height:34px;
  width:34px;
  padding:0;
  border-radius:50%;
  color:var(--muted);
  background:transparent
}
.search-clear-button .material-symbols-rounded{
  font-size:18px
}
.operations-table-wrap{
  scrollbar-width:thin
}
.operations-table tbody tr:hover{
  background:var(--soft)
}
.toast{
  border-radius:14px;
  box-shadow:var(--shadow-dialog)
}
/* Portal modal mobile */
@media(max-width:620px){
  .portal-modal{padding:8px}
  .portal-modal-card{
    width:100%;
    max-height:calc(100vh - 16px);
    border-radius:18px
  }
}


/* v6.2.2 public information, notice expiry and spacing */

.notice-schedule-card{
  margin:14px 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--soft)
}
#residentView>article,
#residentView>.resident-data-grid,
#residentView>.resident-kpi-grid,
#residentView>.resident-summary{
  margin-bottom:18px
}
.login-tabs button.active{
  color:#fff;
  background:var(--blue);
  box-shadow:0 8px 22px rgba(37,99,235,.25)
}
[data-theme="dark"] .login-tabs{
  background:rgba(148,163,184,.11)
}
[data-theme="dark"] .login-tabs button{
  color:var(--muted)
}
[data-theme="dark"] .login-tabs button.active{
  color:#fff;
  background:var(--blue);
  border:1px solid rgba(255,255,255,.18)
}
.community-timing{
  grid-template-columns:repeat(3,1fr)
}
@media(max-width:620px){
  .public-community-actions{
    grid-template-columns:1fr
  }
  .community-timing{
    grid-template-columns:1fr
  }
  #residentView>article,
  #residentView>.resident-data-grid,
  #residentView>.resident-kpi-grid,
  #residentView>.resident-summary{
    margin-bottom:16px
  }
}


/* v6.2.3 popup consistency and CMS categories */
.floating-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}
.floating-close{
  flex:0 0 40px;
  width:40px;
  min-height:40px;
  padding:0;
  border-radius:50%;
  background:var(--soft)
}
.floating-close .material-symbols-rounded{
  font-size:20px
}
.profile-floating-head{
  margin-bottom:12px
}
.portal-action-dialog-card{
  width:min(520px,100%)
}
.portal-action-message{
  margin:5px 0 16px;
  color:var(--muted);
  line-height:1.6
}
#portalActionInputWrap,
#portalActionSelectWrap{
  margin-bottom:16px
}
#portalActionInput,
#portalActionSelect{
  width:100%;
  min-height:48px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card);
  color:var(--text);
  box-sizing:border-box
}
#communityCmsDynamicForm select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:40px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:
    calc(100% - 17px) 20px,
    calc(100% - 12px) 20px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat
}
@media(max-width:620px){
  .floating{
    max-height:calc(100vh - 86px);
    overflow:auto
  }
  .portal-action-dialog-card{
    align-self:center
  }
}


/* v6.3.0 stability, paging and portal blueprint */
.manual-load-bar{
  display:flex;
  justify-content:center;
  margin:14px 0
}
.result-meta{
  margin:8px 0 10px;
  color:var(--muted);
  font-size:11px
}
.date-time-control{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card)
}
.date-time-control .material-symbols-rounded{
  color:var(--blue);
  font-size:20px
}
.date-time-control input{
  flex:1;
  min-width:0;
  border:0!important;
  background:transparent!important;
  color:var(--text);
  box-shadow:none!important
}
.portal-blueprint-card{
  width:min(1180px,100%)
}
.blueprint-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:13px
}
.blueprint-meta span{
  padding:8px 11px;
  border-radius:999px;
  background:var(--soft);
  color:var(--muted);
  font-size:10px
}
.blueprint-meta strong{
  color:var(--text)
}
.blueprint-filter-row{
  display:grid;
  grid-template-columns:180px minmax(220px,360px);
  align-items:center;
  gap:10px;
  margin-bottom:14px
}
.blueprint-filter-row select{
  min-height:48px;
  padding:0 40px 0 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card);
  color:var(--text)
}
.blueprint-table{
  min-width:850px
}
.blueprint-details{
  display:grid;
  gap:10px;
  margin-top:18px
}
.blueprint-module{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--card);
  overflow:hidden
}
.blueprint-module summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  cursor:pointer;
  font-weight:850;
  background:var(--soft)
}
.blueprint-module summary small{
  color:var(--muted)
}
.blueprint-module>p{
  margin:0;
  padding:13px 16px;
  color:var(--muted);
  line-height:1.6
}
.blueprint-feature-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:0 16px 16px
}
.blueprint-feature-list article{
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px
}
.blueprint-feature-list strong,
.blueprint-feature-list span,
.blueprint-feature-list small{
  display:block
}
.blueprint-feature-list span{
  margin-top:4px;
  color:var(--blue);
  font-size:10px;
  font-weight:800
}
.blueprint-feature-list small{
  margin-top:5px;
  color:var(--muted);
  line-height:1.45
}
@media(max-width:700px){
  .blueprint-filter-row{
    grid-template-columns:1fr
  }
  .blueprint-feature-list{
    grid-template-columns:1fr
  }
}


/* v6.3.1 production stability */
.portal-modal-head .icon-btn,
.floating-close,
.sidebar-mobile-head .icon-btn{
  color:#1f2937!important;
  background:#e5e7eb!important;
  border:1px solid #cbd5e1!important
}
.portal-modal-head .icon-btn .material-symbols-rounded,
.floating-close .material-symbols-rounded,
.sidebar-mobile-head .icon-btn .material-symbols-rounded{
  color:inherit!important
}
.portal-modal-head .icon-btn:hover,
.floating-close:hover,
.sidebar-mobile-head .icon-btn:hover{
  color:#fff!important;
  background:var(--blue)!important;
  border-color:var(--blue)!important
}
[data-theme="dark"] .portal-modal-head .icon-btn,
[data-theme="dark"] .floating-close,
[data-theme="dark"] .sidebar-mobile-head .icon-btn{
  color:#f8fafc!important;
  background:#334155!important;
  border-color:#475569!important
}
.sidebar-status{
  margin:0 0 8px;
  padding:9px 10px;
  border-radius:11px;
  font-size:10px;
  line-height:1.45
}
.sidebar-status.info{color:var(--muted);background:var(--soft)}
.sidebar-status.warning{color:#92400e;background:#fef3c7}
.sidebar-status.error{color:#991b1b;background:#fee2e2}
.inline-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin:5px 0;
  padding:6px 9px;
  border-radius:10px;
  font-size:10px;
  font-weight:750
}
.inline-status.info{color:var(--muted);background:var(--soft)}
.inline-status.success{color:#166534;background:#dcfce7}
.inline-status.error{color:#991b1b;background:#fee2e2}
.button-busy{
  cursor:wait!important;
  opacity:.82
}
.button-spinner{
  display:inline-block;
  width:15px;
  height:15px;
  margin-right:8px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  vertical-align:-3px;
  animation:buttonSpin .7s linear infinite
}
@keyframes buttonSpin{to{transform:rotate(360deg)}}
.portal-date-control{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card)
}
.portal-date-control>.material-symbols-rounded{
  flex:0 0 25px;
  color:var(--blue)
}
.portal-date-control>input{
  flex:1;
  min-width:0;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important
}
#adminResidentFormCard{
  border-top:4px solid var(--blue)
}
#adminResidentFormCard .section-copy{
  margin:-4px 0 12px;
  color:var(--muted)
}
.resident-editor-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}
.resident-editor-heading h3{margin-bottom:4px}
.resident-editor-close{flex:0 0 auto}

/* Keep the resident directory and editor aligned as a fixed-height workspace.
   Additional records extend the internal list instead of the page. */
#adminResidentResults{
  min-width:0
}
#adminResidentResults .operations-list-item>div:first-child{
  min-width:0
}
#adminResidentDirectoryCard,
#adminResidentFormCard:not(.hidden){
  height:clamp(480px,calc(100vh - 210px),720px);
  min-height:0
}
#adminResidentDirectoryCard{
  display:flex;
  flex-direction:column;
  overflow:hidden
}
#adminResidentDirectoryCard>h3{flex:0 0 auto}
#adminResidentResults{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
  scrollbar-gutter:stable
}
#adminResidentFormCard:not(.hidden){
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable
}
@media(max-width:930px){
  #adminResidentResults{
    max-height:none
  }
  #adminResidentResults .operations-list-item{
    min-height:64px;
    padding:11px
  }
  #adminResidentResults .operations-list-actions{
    width:100%
  }
  #adminResidentResults .operations-list-actions button{
    width:100%;
    min-height:38px
  }
  body.resident-editor-open{overflow:hidden}
  #adminResidentFormCard:not(.hidden){
    position:fixed;
    inset:76px 12px 12px;
    width:auto;
    height:auto;
    min-height:0;
    max-height:none;
    z-index:120;
    overflow-y:auto;
    margin:0;
    padding:18px;
    border:1px solid var(--line);
    box-shadow:0 18px 48px rgba(15,31,47,.22)
  }
}


/* v6.3.2 Staff Management */
.staff-management-toolbar{margin-bottom:12px}
.staff-management-toolbar .input{flex:1}
.staff-account-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card)}
.staff-account-main{display:flex;align-items:flex-start;gap:11px}
.staff-avatar{flex:0 0 40px;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;color:#fff;background:var(--blue);font-weight:900}
.staff-account-main strong,.staff-account-main span,.staff-account-main small{display:block}
.staff-account-main span{margin-top:3px;color:var(--muted);font-size:11px}
.staff-account-main small{margin-top:6px;color:var(--muted);line-height:1.5}
.staff-account-status{display:flex;align-items:flex-start;gap:5px}
.status-chip{display:inline-flex;align-items:center;min-height:25px;padding:3px 8px;border-radius:999px;color:var(--muted);background:var(--soft);font-size:9px;font-weight:850}
.status-chip.success{color:#166534;background:#dcfce7}.status-chip.warning{color:#92400e;background:#fef3c7}
.staff-account-actions{grid-column:1/-1;justify-content:flex-end;flex-wrap:wrap}
.danger-button{color:#b91c1c!important;border-color:#fecaca!important;background:#fff1f2!important}
.staff-form-actions{justify-content:flex-end;margin-top:15px}
@media(max-width:680px){.staff-account-card{grid-template-columns:1fr}.staff-account-status{justify-content:flex-start}.staff-account-actions{justify-content:flex-start}}


/* v6.4.0 Async UX and Security Team self service */
.loading{
  inset:auto 16px 16px auto!important;
  z-index:95;
  min-width:150px;
  max-width:calc(100vw - 32px);
  padding:10px 13px;
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--text)!important;
  background:var(--card)!important;
  box-shadow:var(--shadow-dialog);
  backdrop-filter:none!important;
  pointer-events:none
}
.loading.hidden{display:none!important}
.loading .spinner{
  width:18px;
  height:18px;
  border-width:2px;
  border-color:var(--line);
  border-top-color:var(--blue)
}
.loading span{font-size:10px;font-weight:800}
.widget-skeleton-card{
  min-height:105px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--card);
  overflow:hidden
}
.widget-skeleton-card span,
.widget-skeleton-card b{
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg,var(--soft),rgba(148,163,184,.2),var(--soft));
  background-size:250% 100%;
  animation:skeletonMove 1.2s infinite
}
.widget-skeleton-card span{width:48%;height:10px}
.widget-skeleton-card b{width:72%;height:25px;margin-top:15px}
.widget-skeleton-card small{display:block;margin-top:14px;color:var(--muted)}
.security-self-card{max-width:760px;margin:0 auto}
.admin-ocr-usage-card{margin:14px 0}
.security-self-status{margin:14px 0}
.security-self-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.security-self-summary span{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--soft)
}
.security-self-summary small,
.security-self-summary strong{display:block}
.security-self-summary small{color:var(--muted);font-size:9px}
.security-self-summary strong{margin-top:5px;font-size:13px}
.security-self-actions{display:flex;gap:10px;flex-wrap:wrap}
.security-self-actions button{flex:1;min-width:150px}
@media(max-width:620px){
  .loading{left:10px;right:10px;bottom:82px;max-width:none}
  .security-self-summary{grid-template-columns:1fr}
}


/* v6.4.1 consolidated performance foundation */
.collector-search-row input[inputmode="numeric"]{
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em
}
.nav-item[data-module="Attendance"]{
  margin-top:10px;
  border-top:1px solid var(--line)
}
.widget-skeleton-card{
  overflow:hidden;
  position:relative
}
.widget-skeleton-card::after,
.section-loader::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  animation:portalSkeletonSweep 1.35s infinite
}
@keyframes portalSkeletonSweep{to{transform:translateX(100%)}}
[data-theme="dark"] .widget-skeleton-card::after,
[data-theme="dark"] .section-loader::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)
}


/* v6.4.2 Offline-ready Security Attendance */
.security-offline-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  font-size:11px;
  font-weight:750
}
.security-offline-status .material-symbols-rounded{
  font-size:20px
}
.security-offline-status.online{
  color:#166534;
  background:#ecfdf5;
  border-color:#bbf7d0
}
.security-offline-status.offline{
  color:#92400e;
  background:#fffbeb;
  border-color:#fde68a
}
[data-theme="dark"] .security-offline-status.online{
  color:#86efac;
  background:rgba(22,101,52,.22);
  border-color:rgba(134,239,172,.3)
}
[data-theme="dark"] .security-offline-status.offline{
  color:#fcd34d;
  background:rgba(146,64,14,.22);
  border-color:rgba(252,211,77,.3)
}
.security-self-actions button{
  min-height:68px;
  font-size:16px;
  font-weight:950;
  letter-spacing:.04em
}
.security-self-actions button .material-symbols-rounded{
  font-size:25px
}
@media(max-width:680px){
  .security-self-actions{
    grid-template-columns:1fr
  }
  .security-self-actions button{
    width:100%;
    min-height:76px;
    font-size:17px
  }
}


/* v6.4.2 responsive landing and guard duty */
.landing-experience-grid{
  grid-template-columns:minmax(0,1fr)!important;
  width:100%
}
.unified-login-card{
  width:100%;
  max-width:980px;
  margin:0 auto
}
.portal-footer{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  justify-items:center;
  text-align:center
}
.guard-duty-widget{
  width:100%;
  max-width:1180px;
  margin:24px auto 16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--card);
  box-shadow:var(--shadow)
}
.guard-duty-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px
}
.guard-duty-heading h3{
  margin:3px 0
}
.guard-duty-heading small{
  color:var(--muted)
}
.guard-duty-header-actions{
  display:flex;
  align-items:center;
  gap:8px
}
.guard-duty-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:15px 0 12px;
  padding:5px;
  border-radius:14px;
  background:var(--soft)
}
.guard-duty-tabs button{
  min-height:40px;
  border-radius:10px;
  color:var(--muted);
  font-weight:850
}
.guard-duty-tabs button.active{
  color:var(--blue);
  background:var(--card);
  box-shadow:var(--shadow)
}
.guard-duty-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:9px
}
.guard-duty-person{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--soft)
}
.guard-duty-person strong,
.guard-duty-person small{
  display:block
}
.guard-duty-person small{
  margin-top:3px;
  color:var(--muted);
  line-height:1.45
}
.guard-duty-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(148,163,184,.15)
}
.guard-duty-dot.present{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.15)
}
.guard-duty-dot.planned{
  background:#94a3b8
}
.guard-duty-dot.checked-in,
.guard-duty-dot.present{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.15)
}
.guard-duty-dot.checked-out{
  background:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.15)
}
.guard-duty-dot.absent{
  background:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.15)
}
.guard-duty-dot.leave{
  background:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.15)
}
.guard-duty-dot.weekly-off{
  background:#8b5cf6;
  box-shadow:0 0 0 4px rgba(139,92,246,.15)
}
.guard-duty-status-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:0 0 12px;
  color:var(--muted);
  font-size:12px;
  font-weight:750
}
.guard-duty-status-legend span{
  display:inline-flex;
  align-items:center;
  gap:7px
}
.guard-duty-status-legend .guard-duty-dot{
  display:inline-block;
  width:9px;
  height:9px;
  box-shadow:none
}
.guard-duty-lazy-placeholder{
  grid-column:1/-1;
  min-height:74px;
  display:grid;
  place-items:center;
  padding:16px;
  border:1px dashed var(--line);
  border-radius:14px;
  color:var(--muted);
  text-align:center;
  background:var(--soft)
}
.guard-call-button{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:36px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--blue);
  background:var(--card);
  font-weight:800
}
.guard-call-button .material-symbols-rounded{
  font-size:18px
}
.guard-duty-note{
  display:block;
  margin-top:11px;
  color:var(--muted);
  line-height:1.5
}
.guard-duty-skeleton{
  min-height:68px;
  border-radius:14px;
  background:linear-gradient(90deg,var(--soft),var(--card),var(--soft));
  background-size:200% 100%;
  animation:guardDutyShimmer 1.2s linear infinite
}
@keyframes guardDutyShimmer{
  to{background-position:-200% 0}
}
.guard-duty-share-card{
  width:min(520px,100%)
}
.resident-whatsapp-group-box{
  margin:14px 0 16px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--soft)
}
.resident-whatsapp-group-option{
  align-items:flex-start;
  margin:0
}
.resident-whatsapp-group-option span{
  display:grid;
  gap:4px;
  min-width:0
}
.resident-whatsapp-group-option strong{
  color:var(--text)
}
.resident-whatsapp-group-option small{
  color:var(--muted);
  line-height:1.45
}
.resident-whatsapp-group-option input:disabled+span{
  opacity:.58
}
.resident-copy-mobile{
  align-items:flex-start;
  color:var(--muted);
  font-size:13px
}

.checkbox-row{
  display:flex;
  align-items:center;
  gap:9px;
  margin:14px 0
}
.checkbox-row input{
  width:18px;
  height:18px
}
@media(max-width:700px){
  .guard-duty-heading{
    flex-direction:column
  }
  .guard-duty-header-actions{
    width:100%;
    justify-content:space-between
  }
  .guard-duty-person{
    grid-template-columns:auto minmax(0,1fr)
  }
  .guard-call-button{
    grid-column:2;
    justify-self:start
  }
}


.security-self-assignment{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  align-items:end;
  gap:10px;
  margin:12px 0
}
.guard-duty-row-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px
}
.guard-edit-button{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:36px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--muted);
  background:var(--card);
  font-weight:800
}
.guard-edit-button .material-symbols-rounded{
  font-size:18px
}
@media(max-width:700px){
  .security-self-assignment{
    grid-template-columns:1fr
  }
  .guard-duty-row-actions{
    grid-column:2;
    justify-content:flex-start
  }
}


/* v6.4.3 payment performance and operational UX */
.collector-resident-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px
}
.collector-correction-trigger{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--blue);
  background:var(--soft)
}
.collector-correction-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px
}
.portal-footer{
  grid-column:1 / -1!important;
  justify-self:center!important;
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important
}
.portal-footer>*{
  width:100%;
  text-align:center
}
#adminResidentFormCard{
  scroll-margin-top:80px
}
@media(max-width:680px){
  .collector-resident-head{align-items:flex-start}
  .collector-resident-actions{flex-direction:column;align-items:flex-end}
}


/* v7.0.3 Resident master and collection eligibility */
.collector-launch-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:24px;
  background:linear-gradient(135deg,var(--card),var(--soft))
}
.collector-launch-copy{max-width:620px}
.collector-launch-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:230px;
  margin-top:0!important
}
.collector-quick-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px
}
.collector-quick-actions button{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-height:112px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:16px;
  color:var(--text);
  background:var(--soft);
  text-align:left
}
.collector-quick-actions button:hover{
  outline:2px solid rgba(37,99,235,.16)
}
.collector-quick-actions .material-symbols-rounded{
  color:var(--blue);
  font-size:26px
}
.collector-quick-actions strong{font-size:13px}
.collector-quick-actions small{
  color:var(--muted);
  font-size:10px;
  line-height:1.45
}
@media(max-width:720px){
  .collector-launch-card{display:block}
  .collector-launch-button{width:100%;margin-top:16px!important}
  .collector-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
  .collector-quick-actions{grid-template-columns:1fr}
  .collector-quick-actions button{min-height:92px}
}
/* v7.0.3 Resident master and collection eligibility */
.resident-profile-card{margin:0 0 18px}
.resident-profile-grid,
.resident-security-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.resident-profile-grid>div,
.resident-security-summary>div{
  border:1px solid var(--line,#e5e7eb);
  border-radius:14px;
  padding:14px;
  background:var(--surface-soft,#f8fafc);
}
.resident-profile-grid small,
.resident-security-summary small{display:block;margin-bottom:5px;color:var(--muted,#64748b)}
.resident-profile-grid strong,
.resident-security-summary strong{font-size:1rem}
.resident-security-setup{margin:16px 0}
.resident-security-setup .operations-list-actions{justify-content:flex-start;margin:12px 0}
.resident-security-fields{margin-top:14px}
@media(max-width:720px){
  .resident-profile-grid,
  .resident-security-summary{grid-template-columns:1fr 1fr}
  .resident-master-extra-grid,
  .resident-security-fields{grid-template-columns:1fr}
}

@media(max-width:640px){
  .guard-duty-widget{
    margin:18px auto 12px;
    padding:14px
  }
  .guard-duty-heading{
    align-items:center;
    flex-wrap:wrap;
    gap:10px
  }
  .guard-duty-header-actions{
    width:auto;
    display:flex;
    align-items:center;
    gap:6px
  }
  .guard-duty-header-actions .secondary{
    display:inline-flex!important;
    align-items:center;
    gap:4px;
    font-size:12px;
    padding:6px 10px;
    border-radius:8px
  }
  .guard-duty-list{
    grid-template-columns:1fr
  }
  .guard-duty-person{
    grid-template-columns:auto minmax(0,1fr)
  }
  .guard-duty-row-actions{
    grid-column:1/-1;
    justify-content:flex-end
  }
  .guard-call-button{
    width:100%;
    justify-content:center
  }
}

/* Phase 5.3: resident update UI and registered-mobile selector */
.resident-page-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap
}
.resident-edit-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px
}
.resident-edit-action .material-symbols-rounded{font-size:20px}
.resident-current-whatsapp{
  min-height:82px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid rgba(22,163,74,.22);
  border-radius:16px;
  background:rgba(22,163,74,.07)
}
.resident-current-whatsapp>.material-symbols-rounded{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:13px;
  color:#15803d;
  background:rgba(22,163,74,.12)
}
.resident-current-whatsapp span:last-child{display:grid;gap:3px}
.resident-current-whatsapp small,
.resident-current-whatsapp em{
  color:var(--muted);
  font-size:12px;
  font-style:normal
}
.resident-current-whatsapp strong{font-size:17px}
.resident-whatsapp-missing-note{
  margin-bottom:12px;
  padding:12px 14px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--text);
  background:var(--soft)
}
.resident-whatsapp-missing-note .material-symbols-rounded{
  color:var(--blue);
  font-size:21px
}
/* Phase 5.3: compact accessible registered-mobile selector */
.resident-copy-mobile{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:14px 0 4px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--text);
  background:var(--card);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  cursor:pointer;
  user-select:none;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease
}
.resident-copy-mobile:hover{
  border-color:rgba(31,95,174,.55);
  background:var(--soft)
}
.resident-copy-mobile:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(31,95,174,.14)
}
.resident-copy-mobile input[type="checkbox"]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0!important;
  opacity:0
}
.resident-copy-mobile-check{
  position:relative;
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  border:2px solid #8ba0ba;
  border-radius:6px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  transition:background .16s ease,border-color .16s ease,transform .16s ease
}
.resident-copy-mobile-check::after{
  content:"✓";
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  transform:scale(0);
  transform-origin:center;
  transition:transform .14s ease
}
.resident-copy-mobile input[type="checkbox"]:checked + .resident-copy-mobile-check{
  border-color:var(--blue);
  background:var(--blue)
}
.resident-copy-mobile input[type="checkbox"]:checked + .resident-copy-mobile-check::after{
  transform:scale(1)
}
.resident-copy-mobile input[type="checkbox"]:focus-visible + .resident-copy-mobile-check{
  outline:3px solid rgba(31,95,174,.2);
  outline-offset:3px
}
.resident-copy-mobile input[type="checkbox"]:active + .resident-copy-mobile-check{
  transform:scale(.94)
}
.resident-copy-mobile-text{
  min-width:0;
  color:var(--text)
}
@media(max-width:640px){
  #residentView>.page-head{align-items:flex-start}
  .resident-page-actions{width:100%;justify-content:flex-start}
  .resident-page-actions .outline{min-height:44px}
  .resident-edit-action{flex:1 1 auto}
  .resident-copy-mobile{padding:11px 12px;font-size:13px}
}



/* PHASE6_ADMIN_SETTINGS_CSS_START */
.admin-settings-console{display:grid;gap:16px}
.admin-settings-heading{align-items:flex-start;gap:18px}
.admin-settings-heading p,.admin-settings-section .operations-heading p{margin:5px 0 0;color:var(--muted);line-height:1.5}
.admin-settings-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.admin-settings-actions .outline,.admin-settings-actions .primary{width:auto;margin:0;min-height:44px}
.admin-settings-health-summary{margin:0}
.admin-settings-warnings{display:grid;gap:8px}
.admin-settings-warnings>div{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border:1px solid #f1c27d;border-radius:14px;background:#fff5e5;color:#7d4b00;font-size:13px}
[data-theme=dark] .admin-settings-warnings>div{background:#32240d;color:#ffd394;border-color:#674d1d}
.admin-settings-layout{display:grid;grid-template-columns:minmax(210px,250px) minmax(0,1fr);gap:15px;align-items:start}
.admin-settings-sidebar{position:sticky;top:104px;padding:13px;border:1px solid var(--line);border-radius:19px;background:var(--card);box-shadow:var(--shadow)}
.admin-settings-search{margin-bottom:10px}
.admin-settings-tabs{display:grid;gap:5px}
.admin-settings-tabs button{width:100%;min-height:44px;padding:9px 11px;display:flex;align-items:center;gap:9px;border-radius:12px;background:transparent;color:var(--text);font-weight:750;text-align:left}
.admin-settings-tabs button:hover,.admin-settings-tabs button.active{color:var(--blue);background:var(--soft)}
.admin-settings-tabs .material-symbols-rounded{font-size:20px}
.admin-settings-main{min-width:0;display:grid;gap:15px}
.admin-settings-section{scroll-margin-top:110px}
.admin-settings-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.admin-setting-field{position:relative;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:.18s}
.admin-setting-field.changed{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,95,174,.11)}
.admin-setting-label{min-height:25px;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.admin-setting-label label{margin:0;font-size:12px;font-weight:850;color:var(--text)}
.admin-setting-label b{color:var(--red)}
.admin-setting-field input,.admin-setting-field select,.admin-setting-field textarea,.admin-settings-import-card textarea{width:100%;margin-top:8px;padding:11px 12px;border:1px solid #c9d3e2;border-radius:12px;outline:0;background:var(--card);color:var(--text);font:inherit}
.admin-setting-field input,.admin-setting-field select{min-height:45px}
.admin-setting-field textarea,.admin-settings-import-card textarea{resize:vertical;line-height:1.5}
.admin-setting-field input:focus,.admin-setting-field select:focus,.admin-setting-field textarea:focus,.admin-settings-import-card textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,95,174,.12)}
.admin-setting-field>small{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.45}
.admin-setting-reset{margin-top:8px;padding:0;background:transparent;color:var(--blue);font-size:11px;font-weight:750}
.admin-setting-readonly{min-height:45px;margin-top:8px;padding:10px 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.admin-setting-readonly.configured{color:var(--green)}.admin-setting-readonly.missing{color:var(--saffron)}
.admin-setting-readonly .material-symbols-rounded{font-size:20px}
.admin-settings-section-actions{margin-top:16px;display:flex;justify-content:flex-end}
.admin-settings-section-actions .primary{width:auto;margin:0}
.admin-settings-history-card{overflow:hidden}
.admin-settings-history-card table small{display:block;margin-top:3px;color:var(--muted)}
.admin-settings-import-card{position:fixed;z-index:85;inset:100px max(18px,calc((100vw - 860px)/2)) auto;max-height:calc(100vh - 125px);overflow:auto;box-shadow:0 26px 70px rgba(5,18,40,.28)}
.admin-settings-import-card>p{color:var(--muted);line-height:1.5}
.admin-settings-import-actions{margin-top:10px;display:flex;justify-content:flex-end}
.admin-settings-import-actions .primary{width:auto}
@media(max-width:980px){
  .admin-settings-layout{grid-template-columns:1fr}
  .admin-settings-sidebar{position:static}
  .admin-settings-tabs{display:flex;overflow-x:auto;padding-bottom:3px}
  .admin-settings-tabs button{min-width:max-content;width:auto}
}
@media(max-width:720px){
  .admin-settings-heading{display:grid}
  .admin-settings-actions{justify-content:flex-start}
  .admin-settings-actions .outline,.admin-settings-actions .primary{flex:1 1 calc(50% - 8px)}
  .admin-settings-field-grid{grid-template-columns:1fr}
  .admin-settings-import-card{inset:88px 10px auto}
}
/* PHASE6_ADMIN_SETTINGS_CSS_END */


/* PHASE7_PRODUCTION_BILLING_CSS_START */
.billing-cleanup-card{border-color:#f1c27d;background:linear-gradient(180deg,var(--card),rgba(255,247,232,.72))}
[data-theme=dark] .billing-cleanup-card{background:linear-gradient(180deg,var(--card),rgba(83,55,9,.22));border-color:#674d1d}
.billing-cleanup-summary{margin:16px 0}
.billing-cleanup-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.billing-cleanup-actions button{width:auto;margin:0}
button.danger{background:#b42318;color:#fff;border:1px solid #b42318}
button.danger:hover{background:#8f1c13}
button.danger:disabled{opacity:.45;cursor:not-allowed}
.billing-cleanup-ack{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:var(--card);cursor:pointer}
.billing-cleanup-ack input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;width:18px!important;height:18px!important;min-width:18px;margin:1px 0 0!important;padding:0!important;accent-color:#b42318}
.billing-cleanup-ack span{font-size:13px;line-height:1.45;font-weight:650}
.billing-cleanup-card>small{display:block;margin-top:10px;color:var(--muted);line-height:1.5}
@media(max-width:620px){.billing-cleanup-actions{display:grid}.billing-cleanup-actions button{width:100%}}
/* PHASE7_PRODUCTION_BILLING_CSS_END */


/* =========================================================
   UI MIGRATION — SLATE + AQUA FOUNDATION
   Shared shell and dashboard treatment. Business logic stays unchanged.
   ========================================================= */
:root{
  --navy:#303647;
  --blue:#20a9ce;
  --blue2:#1689ab;
  --bg:#f2f5f8;
  --card:#ffffff;
  --text:#303946;
  --muted:#728091;
  --line:#dbe3e9;
  --soft:#e5f4f8;
  --green:#298e76;
  --greenbg:#e2f5ef;
  --saffron:#407fd4;
  --red:#c94e61;
  --redbg:#fae8eb;
  --shadow:0 10px 28px rgba(40,62,82,.09)
}
[data-theme=dark]{
  --navy:#171f2c;
  --blue:#58c6e5;
  --blue2:#30a2c5;
  --bg:#10171f;
  --card:#19232e;
  --text:#eef5fb;
  --muted:#a8b5c4;
  --line:#2f3b48;
  --soft:#173d4a;
  --green:#64cfb2;
  --greenbg:#1f443a;
  --saffron:#78aaf0;
  --red:#ff8392;
  --redbg:#4b292f;
  --shadow:0 10px 28px rgba(0,0,0,.28)
}

.header{
  min-height:68px;
  padding:0 20px 0 0;
  color:var(--text);
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:0 5px 18px rgba(40,62,82,.08)
}
.brand{
  align-self:stretch;
  flex:0 0 260px;
  padding:8px 15px;
  color:var(--text);
  background:var(--card);
  border-right:1px solid var(--line)
}
.logo{
  width:48px;
  height:48px;
  flex-basis:48px;
  border-radius:12px;
  padding:3px;
  box-sizing:border-box;
  background:var(--bg);
  border:1px solid var(--line)
}
.brand h1{font-size:16px;font-weight:600;color:var(--text)}
.brand p{font-size:11px;font-weight:400;color:var(--muted);opacity:1}
.brand small{display:none}
.header .icon-btn,.header .profile-btn{
  min-height:39px;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:9px
}
.header .icon-btn{width:39px}
.profile-btn>span:first-child{background:var(--soft);color:var(--blue2)}
.profile-btn small{color:var(--muted);opacity:1}
.menu-btn{color:var(--text)!important}
.badge{background:var(--red);color:#fff}

.layout{grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 68px)}
.sidebar{
  padding:15px 12px;
  border-right:0;
  background:var(--navy);
  color:#f4f8fc
}
.user-card{background:rgba(255,255,255,.075);color:#f4f8fc}
.user-card strong{font-weight:500}
.user-card span{font-weight:400;color:#aebbd0}
.nav-item{min-height:42px;color:#bdc8d7;border-radius:9px;font-size:14px;font-weight:500}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-item.active{color:#092531;background:var(--blue)}
.support{color:#f4f8fc;background:rgba(255,255,255,.08)}
.support small,.version{color:#9fadc0}
.sidebar-status{color:#bdc8d7}
.content{padding:22px}
.page-head{margin-bottom:15px}
.page-head .eyebrow{color:var(--blue2);font-weight:500;letter-spacing:.06em}
.page-head h2{margin-top:3px;font-size:clamp(25px,3vw,34px);font-weight:500}
.page-head p{font-weight:400}
.date-pill{border:1px solid var(--line);border-radius:8px;background:var(--card)}
.eyebrow{color:var(--blue2);font-weight:500}

.kpi-grid,.analytics-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0
}
.analytics-kpi-grid{margin-top:10px}
.kpi{
  min-width:0;
  padding:13px;
  border-radius:11px;
  box-shadow:none
}
.kpi .material-symbols-rounded,.kpi-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:var(--blue2);
  background:var(--soft)
}
.kpi-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi label{
  margin-top:10px;
  color:var(--muted);
  font-size:10px;
  font-weight:500;
  letter-spacing:.035em;
  line-height:1.2;
  min-height:24px
}
.kpi strong{margin-top:4px;font-size:clamp(18px,2vw,24px);font-weight:500;white-space:nowrap}
.kpi.kpi-danger strong{color:var(--red)}
.kpi.kpi-danger .kpi-icon{color:var(--red);background:var(--redbg)}
.analytics-dashboard-grid{margin-top:14px;grid-template-columns:.8fr 1.4fr;gap:12px}
.analytics-dashboard-grid.single-card,.dashboard-grid.single-card{grid-template-columns:1fr}
.dashboard-grid{gap:12px}
.dash-card{padding:16px;border-radius:11px;box-shadow:none}
.dash-card h3{font-size:17px;font-weight:500}
.dash-card .eyebrow{font-weight:500}
.analytics-mode-row,.analytics-activity-item,.notice-item{border-radius:8px;background:var(--bg)}
.analytics-mode-row{font-weight:400}
.analytics-mode-row strong{font-weight:500}
.trend-bar{background:var(--blue)}
.quick{border-radius:9px;background:var(--bg);font-weight:500}
.quick .material-symbols-rounded{color:var(--blue2)}
.primary{background:var(--blue2)}
.secondary{color:var(--blue2);background:var(--soft)}
.card,.resident-summary,.resident-grid article,.placeholder{box-shadow:none}
.local-preview-badge{
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--blue2);
  background:var(--soft);
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em
}

@media(max-width:930px){
  .header{padding-left:0}
  .brand{flex-basis:auto;min-width:0;background:transparent;color:var(--text)}
  .brand h1{color:var(--text)}
  .brand p{color:var(--muted)}
  .layout{grid-template-columns:1fr}
  .sidebar{top:68px}
  .analytics-dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .kpi-grid,.analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){
  .header{min-height:68px;padding:8px}
  .logo{width:45px;height:45px;flex-basis:45px}
  .brand{padding:0 7px}
  .brand-copy h1{min-width:0;white-space:normal;line-height:1.2;overflow-wrap:break-word}
  .header-actions{gap:4px}
  .header-actions>.icon-btn:first-of-type{display:none}
  .sidebar{top:68px}
  .content{padding:12px 9px 88px}
  .local-preview-badge{display:none}
}


/* =========================================================
   UI MIGRATION PHASE 2 — SHARED PORTAL COMPONENTS
   Public, staff, collector, resident, security and admin surfaces.
   ========================================================= */
html{scroll-behavior:smooth}
body{line-height:1.45}
::selection{color:#092531;background:rgba(32,169,206,.28)}
button,a,input,select,textarea{transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
button:not(:disabled):active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(32,169,206,.2)
}

/* Public landing and authentication */
.hero{
  min-height:245px;
  padding:clamp(28px,5vw,48px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  color:#f6fbfd;
  background:
    radial-gradient(circle at 86% 18%,rgba(32,169,206,.35),transparent 26%),
    linear-gradient(125deg,#272d3d,#303647 64%,#25566a);
  box-shadow:none
}
.hero-label{color:#77d8ed;font-weight:500;letter-spacing:.08em}
.hero h2{font-weight:500;letter-spacing:-.03em}
.hero p{color:#cfdae5;opacity:1}
.trust span{border:1px solid rgba(255,255,255,.13);border-radius:8px;background:rgba(255,255,255,.07);font-weight:500}
.access-grid{gap:12px}
.card{
  padding:20px;
  border-radius:12px
}
.card-title{align-items:flex-start}
.card-icon{
  width:44px;
  height:44px;
  border-radius:10px;
  color:var(--blue2);
  background:var(--soft)
}
.card h3{font-size:20px;font-weight:500}
.card label,.collector-card label,.operations-card label{font-weight:500;color:var(--muted)}
.input{
  min-height:46px;
  border-color:var(--line);
  border-radius:9px;
  background:var(--bg)
}
.input:focus-within{border-color:var(--blue);background:var(--card);box-shadow:0 0 0 3px rgba(32,169,206,.14)}
.input input{min-height:43px;font-size:14px}
.primary,.secondary,.outline{
  min-height:44px;
  padding:10px 15px;
  border-radius:9px;
  font-weight:500
}
.primary{background:var(--blue2)}
.primary:not(:disabled):hover{background:#117b9b}
.secondary:not(:disabled):hover,.outline:not(:disabled):hover{border-color:#b8dce6;background:#daf0f5}
.message{border:1px solid rgba(201,78,97,.2);border-radius:9px;font-weight:500}
.login-tabs{padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.login-tabs button{min-height:39px;border-radius:7px;font-weight:500}
.login-tabs button.active{color:#092531;background:var(--blue);box-shadow:none}
.public-service-grid button,.public-community-actions button,.resident-community-actions button,.resident-quick-actions button{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card);
  box-shadow:none
}
.public-service-grid button:hover,.public-community-actions button:hover,.resident-community-actions button:hover,.resident-quick-actions button:hover{
  border-color:#b8dce6;background:var(--soft)
}
.notice-card,.public-info-card,.community-content-card,.community-map-card{
  border-radius:11px;
  box-shadow:none
}
.notice-card span,.public-info-card>.material-symbols-rounded,.public-service-grid .material-symbols-rounded{
  color:var(--blue2)
}
.public-community-section{padding-top:3px}
.section-heading-row h3{font-weight:500}

/* Shared content and operations */
.operations-card,.collector-card,.collector-resident-card,.resident-data-card,.resident-kpi-card,
.resident-contact-card,.attendance-kpi,.automation-mode-banner,.staff-account-card,.admin-settings-sidebar{
  border-color:var(--line);
  border-radius:11px;
  background:var(--card);
  box-shadow:none
}
.operations-card,.collector-card,.collector-resident-card,.resident-data-card{padding:16px}
.operations-card h3,.collector-card h3,.resident-card-heading h3,.automation-mode-banner h3{
  font-size:18px;
  font-weight:500
}
.operations-heading{align-items:flex-start}
.operations-toolbar{gap:8px}
.operations-form-grid{gap:9px}
.operations-card select,.operations-card textarea,.collector-card textarea,
.report-date-row input,.defaulters-toolbar select,.operations-heading select,#automationInvoiceMonth,
.admin-setting-field input,.admin-setting-field select,.admin-setting-field textarea,.admin-settings-import-card textarea{
  border-color:var(--line);
  border-radius:9px;
  background:var(--bg)
}
.operations-card select:focus,.operations-card textarea:focus,.collector-card textarea:focus,
.admin-setting-field input:focus,.admin-setting-field select:focus,.admin-setting-field textarea:focus,
.admin-settings-import-card textarea:focus{
  border-color:var(--blue);background:var(--card);box-shadow:0 0 0 3px rgba(32,169,206,.14)
}
.operations-list-item,.queue-item,.reminder-item,.schedule-list>div,.attendance-row,.expense-summary-row,
.collector-history-item,.collector-invoice-item,.resident-invoice-item,.resident-payment-item,.request-card{
  border:1px solid transparent;
  border-radius:9px;
  background:var(--bg)
}
.operations-list-item:hover,.request-card:hover,.collector-result:hover{
  border-color:#b8dce6;
  outline:0;
  background:var(--soft)
}
.operations-list-actions button,.attendance-actions button,.salary-action{
  min-height:32px;
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--blue2);
  background:var(--card);
  font-weight:500
}
.centre-tabs,.attendance-tabs,.community-cms-tabs{
  padding:3px;
  gap:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg)
}
.centre-tabs button,.attendance-tabs button,.community-cms-tabs button{
  min-height:38px;
  border-radius:7px;
  font-weight:500
}
.centre-tabs button.active,.attendance-tabs button.active,.community-cms-tabs button.active{
  color:#092531;
  background:var(--blue)
}

/* Tables and compact metrics */
.operations-table-wrap{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card)
}
.operations-table{border-collapse:separate;border-spacing:0}
.operations-table th{
  position:sticky;
  top:0;
  z-index:1;
  padding:11px 10px;
  color:#617183;
  background:var(--bg);
  font-weight:500;
  letter-spacing:.04em
}
.operations-table td{padding:11px 10px}
.operations-table tbody tr:hover td{background:rgba(229,244,248,.55)}
.report-kpi-grid,.attendance-kpi-grid,.collector-summary-grid{gap:9px}
.report-kpi-grid>div,.attendance-kpi,.collector-stat{
  padding:13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card);
  box-shadow:none
}
.report-kpi-grid small,.attendance-kpi small,.collector-stat small,.resident-kpi-card small{
  color:var(--muted);
  font-size:9px;
  font-weight:500;
  letter-spacing:.04em
}
.report-kpi-grid strong,.attendance-kpi strong,.collector-stat strong,.resident-kpi-card strong{
  font-weight:500
}
.collector-stat>.material-symbols-rounded,.resident-kpi-card>.material-symbols-rounded{
  width:34px;height:34px;border-radius:8px;color:var(--blue2);background:var(--soft)
}

/* Collector and payment workflow */
.collector-launch-card{
  border-color:#b8dce6;
  background:linear-gradient(105deg,var(--card),var(--soft))
}
.collector-launch-button{border-radius:9px;background:var(--blue2)}
.collector-result{border:1px solid transparent;border-radius:9px;background:var(--bg)}
.collector-result-icon,.collector-resident-avatar{border-radius:9px;color:var(--blue2);background:var(--soft)}
.collector-outstanding-badge{border-radius:8px;font-weight:500}
.collector-search-mode{padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.collector-search-mode button{border-radius:7px;font-weight:500}
.collector-search-mode button.active{color:#092531;background:var(--blue)}
.collector-quick-actions button{border:1px solid var(--line);border-radius:9px;background:var(--card);box-shadow:none}
.collector-quick-actions button:hover{border-color:#b8dce6;background:var(--soft);transform:none}
.collector-success{border:1px solid rgba(41,142,118,.2);border-radius:9px}

/* Resident and security experiences */
.resident-profile-card{border-color:#b8dce6}
.resident-profile-grid>div,.resident-security-summary>div,.expense-detail-field{
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg)
}
.resident-current-whatsapp,.resident-whatsapp-missing-note,.resident-whatsapp-group-box{
  border-radius:9px
}
.resident-edit-action,.resident-copy-mobile,.guard-call-button,.guard-edit-button{
  border-radius:8px;
  font-weight:500
}

/* v7.4.2 Resident self-service profile */
.resident-profile-form{display:grid;gap:15px}
.resident-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.resident-profile-grid>div{min-width:0}.resident-profile-grid label{display:block;margin-bottom:6px}
.resident-profile-wide{grid-column:1/-1}
.resident-profile-readonly{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.resident-profile-readonly input:disabled{color:var(--text);opacity:1;background:var(--card)}
.resident-communication-preferences{display:grid;gap:8px;padding:13px;border:1px solid var(--line);border-radius:14px}
.resident-preference{display:flex;align-items:flex-start;gap:11px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.resident-preference input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--blue)}
.resident-preference span,.resident-preference strong,.resident-preference small{display:block}
.resident-preference strong{font-size:12px}.resident-preference small{margin-top:3px;color:var(--muted);line-height:1.35}
.resident-preference.locked{cursor:not-allowed;background:var(--soft)}
@media(max-width:560px){.resident-profile-grid{grid-template-columns:1fr}.resident-profile-wide{grid-column:auto}.resident-update-modal-card{max-height:82vh;overflow-y:auto}}
.handover-alert{display:flex;align-items:center;gap:11px;margin:12px 0;padding:12px 14px;border:1px solid #f2c66d;border-radius:12px;background:#fff8e7;color:#704b00}
.handover-alert>span{font-size:25px}.handover-alert>div{flex:1;min-width:0}.handover-alert strong,.handover-alert span{display:block}.handover-alert div span{margin-top:3px;font-size:11px;line-height:1.4}
.guard-handover-balances{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:14px 0 20px}
.guard-balance-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.guard-balance-card strong,.guard-balance-card small{display:block}.guard-balance-card small{margin-top:4px;color:var(--muted)}
.operations-table td small{display:block;margin-top:3px;color:var(--muted);font-size:9px}
@media(max-width:560px){.handover-alert{align-items:flex-start;flex-wrap:wrap}.handover-alert button{width:100%}}
.guard-duty-widget{
  border-color:var(--line);
  border-radius:11px;
  box-shadow:none
}
.guard-duty-summary{
  margin-top:12px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg)
}
.guard-duty-summary>div{display:flex;align-items:center;gap:11px}
.guard-duty-summary strong,.guard-duty-summary small{display:block}
.guard-duty-summary strong{font-size:14px;font-weight:600}
.guard-duty-summary small{margin-top:2px;color:var(--muted);font-size:11px}
.guard-duty-summary-loading{color:var(--muted);font-size:12px}
.guard-duty-details-toggle{
  width:100%;
  min-height:40px;
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--blue2);
  background:var(--card);
  font-weight:500
}
.guard-duty-details-toggle .material-symbols-rounded{font-size:19px}
.guard-duty-details{padding-top:2px}
.guard-duty-tabs{padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.guard-duty-tabs button{border-radius:6px;font-weight:500}
.guard-duty-tabs button.active{color:#092531;background:var(--blue)}
.guard-duty-person{border:1px solid transparent;border-radius:8px;background:var(--bg)}

/* Admin settings, dialogs and floating surfaces */
.admin-settings-tabs button{border-radius:8px;font-weight:500}
.admin-settings-tabs button:hover,.admin-settings-tabs button.active{color:#092531;background:var(--blue)}
.admin-setting-field{padding:12px;border-radius:10px}
.admin-setting-label label{font-weight:500}
.admin-setting-field.changed{border-color:var(--blue);box-shadow:0 0 0 3px rgba(32,169,206,.12)}
.admin-setting-readonly{border-radius:8px}
.billing-cleanup-card{border-color:#efc7cd;background:linear-gradient(180deg,var(--card),rgba(250,232,235,.65))}
.admin-settings-warnings>div{border-radius:9px}
.floating{
  top:76px;
  padding:15px;
  border-radius:11px;
  box-shadow:0 18px 50px rgba(29,45,61,.16)
}
.floating-head button,.theme-grid button{border-radius:8px}
.portal-modal{background:rgba(25,32,43,.64);backdrop-filter:blur(4px)}
.portal-modal-card{
  padding:18px;
  border-radius:12px;
  box-shadow:0 24px 70px rgba(18,28,38,.24)
}
.portal-modal-head h3{font-size:21px;font-weight:500}
.portal-modal-head .icon-btn{color:var(--text);background:var(--bg);border:1px solid var(--line)}
.toast{border-radius:9px;background:var(--navy)}

/* Compact, progressive Admin navigation */
.staff-nav-group{margin-top:7px;border-top:1px solid rgba(255,255,255,.1);padding-top:7px}
.staff-nav-group summary{
  min-height:40px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 20px;
  align-items:center;
  gap:9px;
  border-radius:8px;
  color:#bdc8d7;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  list-style:none
}
.staff-nav-group summary::-webkit-details-marker{display:none}
.staff-nav-group summary:hover{color:#fff;background:rgba(255,255,255,.08)}
.staff-nav-group summary .material-symbols-rounded{font-size:20px}
.staff-nav-group summary .material-symbols-rounded:last-child{transition:transform .2s ease}
.staff-nav-group[open] summary .material-symbols-rounded:last-child{transform:rotate(180deg)}
.staff-nav-group>div{display:grid;gap:4px;margin-top:4px;padding-left:8px}

/* Minimum readable metadata sizing across role surfaces */
.kpi label,.report-kpi-grid small,.attendance-kpi small,.collector-stat small,
.resident-kpi-card small,.operations-table th{font-size:11px}
.notice-item span,.operations-list-item span,.collector-history-item p,
.resident-invoice-item p,.resident-payment-item p{font-size:11px}
.resident-directory-progress{
  position:sticky;
  bottom:0;
  z-index:2;
  margin-top:8px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--muted);
  background:var(--card);
  box-shadow:0 -7px 18px rgba(40,62,82,.07);
  font-size:11px
}
.resident-directory-progress button{min-height:36px;padding:7px 11px;white-space:nowrap}

/* Dark theme refinements */
[data-theme=dark] .hero{border-color:#354252}
[data-theme=dark] .operations-table tbody tr:hover td{background:rgba(23,61,74,.55)}
[data-theme=dark] .primary:not(:disabled):hover{background:#45b8d8}
[data-theme=dark] .login-tabs button.active,
[data-theme=dark] .centre-tabs button.active,
[data-theme=dark] .attendance-tabs button.active,
[data-theme=dark] .community-cms-tabs button.active,
[data-theme=dark] .collector-search-mode button.active,
[data-theme=dark] .guard-duty-tabs button.active,
[data-theme=dark] .admin-settings-tabs button.active{color:#092531}

@media(max-width:930px){
  .sidebar{border-right:1px solid #3b4656;box-shadow:18px 0 45px rgba(17,24,34,.24)}
  .mobile-nav{border-radius:13px;box-shadow:0 12px 35px rgba(29,45,61,.18)}
  .mobile-nav button{border-radius:8px;font-weight:500}
  .mobile-nav button.active{color:#092531;background:var(--blue)}
}
@media(max-width:700px){
  .hero{min-height:220px;padding:25px 20px}
  .hero h2{font-size:clamp(30px,9vw,40px)}
  .operations-card,.collector-card,.collector-resident-card,.resident-data-card{padding:14px}
  .operations-table th,.operations-table td{padding:10px 9px}
}
@media(max-width:540px){
  .page-head{align-items:flex-start;flex-wrap:wrap}
  .page-head h2{font-size:28px}
  .date-pill{border-radius:8px}
  .card{padding:16px}
  .portal-modal{padding:8px}
  .portal-modal-card{max-height:calc(100vh - 16px);padding:15px;border-radius:11px}
  .report-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attendance-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collector-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .resident-directory-progress{align-items:stretch;flex-direction:column}
  .resident-directory-progress button{width:100%}
}
@media(max-width:370px){
  .header{padding:7px 6px}
  .brand{max-width:calc(100% - 82px);padding:0 3px;border-right:0}
  .brand-copy{min-width:0;flex:1 1 auto}
  .brand-copy h1{font-size:13px;white-space:normal;line-height:1.2}
  .header-actions{gap:3px;max-width:76px}
  .header-actions>.icon-btn:not(.menu-btn){display:none}
  .header .icon-btn,.header .profile-btn{
    width:34px;
    min-width:34px;
    min-height:34px;
    padding:0
  }
  .profile-btn>span:first-child{width:28px;height:28px}
  .guard-duty-heading h3{font-size:17px}
}
.payment-signatures-card{max-width:760px}.payment-signature-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.payment-signature-row span{display:block;margin-top:3px;color:var(--muted);font-size:12px}.payment-signature-viewer{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:10px;text-align:center;background:var(--bg)}.payment-signature-viewer img{display:block;max-width:100%;max-height:360px;margin:auto;background:#fff}.payment-signature-viewer div{margin-top:8px;color:var(--muted);font-size:12px}
.collector-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.collector-panel-head h2{margin:0 0 5px;font-size:25px;font-weight:500}.collector-refresh-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;border:1px solid #9bd8e7;border-radius:9px;padding:8px 14px;color:#086c87;background:#dff5fa;font-weight:600}.collector-payment-tile{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:112px;margin:14px 0;padding:18px;border:0;border-left:4px solid #20a9ce;border-radius:11px;color:#fff;background:linear-gradient(125deg,#263247,#1689ab);text-align:left}.collector-payment-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:9px;color:#075f78;background:#dff5fa}.collector-payment-tile strong,.collector-payment-tile small{display:block}.collector-payment-tile strong{font-size:17px;font-weight:600}.collector-payment-tile small{margin-top:5px;color:#c7edf5}.collector-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.collector-quick-actions button{min-height:116px;border-radius:10px}.collector-quick-actions button.self{border-color:#b9e2d6;background:linear-gradient(145deg,#fff,#e8f7f1)}.collector-quick-actions button.team{border-color:#d7c6f1;background:linear-gradient(145deg,#fff,#f2ebfb)}.collector-quick-actions button.self .material-symbols-rounded{color:#247a66}.collector-quick-actions button.team .material-symbols-rounded{color:#7452a3}.collector-quick-actions strong{font-size:15px;font-weight:600}
@media(max-width:520px){.collector-panel-head h2{font-size:22px}.collector-refresh-button{padding:7px 10px}.collector-payment-tile{min-height:104px;padding:15px}.collector-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.collector-quick-actions button{min-height:108px;padding:13px}}
.resident-identity-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;margin-bottom:12px;padding:15px 16px;border-radius:16px;box-shadow:none}.resident-identity-card .resident-home{width:48px;height:48px;flex:0 0 48px;border-radius:13px}.resident-identity-copy{min-width:0}.resident-name-row,.resident-flat-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.resident-name-row>strong{font-size:22px}.resident-flat-line{margin-top:6px}.resident-flat-line>strong{font-size:15px}.resident-flat-line>span{color:var(--muted);font-size:12px}.resident-flat-line>b{margin:0;padding:4px 7px;font-size:9px}.resident-identity-card p{margin-top:5px;font-size:12px}.resident-inline-edit{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border:1px solid #9bd8e7;border-radius:10px;color:var(--blue);background:#dff5fa}.resident-inline-edit .material-symbols-rounded{font-size:22px}.resident-flat-edit{margin-left:auto}.resident-identity-card .resident-profile-grid{grid-column:1/-1;gap:9px;width:100%}.resident-profile-grid>div{padding:11px 12px;border-radius:10px}.resident-billing-card{margin-bottom:12px;padding:15px;box-shadow:none}.resident-billing-grid{grid-template-columns:1fr;gap:9px;margin-top:12px}.resident-billing-grid .resident-kpi-card{min-width:0;padding:12px;border:0;border-radius:11px;background:var(--soft);box-shadow:none}.resident-billing-grid .resident-kpi-card>.material-symbols-rounded{width:34px;height:34px;border-radius:9px;font-size:20px}.resident-billing-grid .resident-kpi-card small{margin-top:8px}.resident-billing-grid .resident-kpi-card strong{overflow-wrap:anywhere;margin-top:4px;font-size:17px}.resident-billing-grid .resident-kpi-card em{line-height:1.35}.resident-billing-grid .resident-kpi-card:first-child{border:1px solid #f2bec6;background:#fff0f2}.resident-billing-grid .resident-kpi-card:first-child>.material-symbols-rounded,.resident-billing-grid .resident-kpi-card:first-child strong,.resident-billing-grid .resident-kpi-card:first-child em{color:var(--red)}.resident-data-grid{gap:12px;margin-top:0}.resident-data-card{box-shadow:none}.resident-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.resident-quick-actions button{min-height:88px}.hero h2{max-width:760px}.hero h2 span{display:block;white-space:nowrap}.hero.hero-compact{min-height:190px;padding-block:25px}.hero.hero-compact h2{margin-top:10px}.hero.hero-compact p{max-width:620px}
@media(max-width:620px){.resident-identity-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px}.resident-identity-card .resident-home{width:42px;height:42px;flex-basis:42px}.resident-name-row>strong{font-size:20px}.resident-name-row .resident-inline-edit{display:none}.resident-billing-grid .resident-kpi-card{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.resident-billing-grid .resident-kpi-card>.material-symbols-rounded{grid-row:1/4}.resident-billing-grid .resident-kpi-card small,.resident-billing-grid .resident-kpi-card strong,.resident-billing-grid .resident-kpi-card em{margin:0}.resident-billing-grid .resident-kpi-card strong{font-size:15px}.hero h2{font-size:clamp(21px,6.6vw,36px);line-height:1.08}.hero.hero-compact{min-height:175px}}
@media(max-width:380px){.resident-identity-card{grid-template-columns:auto minmax(0,1fr)}.resident-flat-edit{position:absolute;right:12px;top:12px}.resident-identity-copy{padding-right:34px}.resident-billing-grid{grid-template-columns:1fr}.resident-billing-grid .resident-kpi-card:first-child{grid-column:auto}}
.admin-vision-ocr-control{display:grid;gap:10px}.admin-vision-ocr-control>label{color:var(--muted);font-size:11px;font-weight:600}.admin-vision-ocr-control .admin-settings-section-actions{justify-content:flex-start;margin-top:4px}.admin-vision-ocr-control .admin-settings-section-actions button{min-height:42px}
.bulk-upload-console{display:grid;gap:14px;max-width:100%;overflow:hidden}.bulk-upload-console>*{min-width:0}.bulk-ocr-usage{display:flex;align-items:center;gap:6px;margin-top:10px;padding:7px 9px;border-radius:8px;color:#496176;background:#f3f8fb;font-size:11px}.bulk-ocr-usage .material-symbols-rounded{font-size:15px;color:var(--blue)}.bulk-ocr-usage i{width:1px;height:13px;background:#cbd9e2}.bulk-ocr-usage small{margin-left:auto;color:var(--muted);font-size:10px}.bulk-handover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.bulk-handover-grid label{display:block;margin:0 0 6px;color:#5f7187;font-size:11px;font-weight:600}.bulk-handover-grid input,.bulk-handover-grid select{width:100%;max-width:100%;min-height:46px;box-sizing:border-box;border:1px solid #cfdee8!important;border-radius:9px!important;background:#f7fafc!important;box-shadow:none!important}.bulk-money-input{display:flex;align-items:center;min-height:46px;border:1px solid #cfdee8;border-radius:9px;background:#f7fafc}.bulk-money-input span{padding:0 0 0 13px;color:var(--blue);font-weight:700}.bulk-money-input input{border:0!important;background:transparent!important}.bulk-file-drop{display:grid;place-items:center;gap:4px;width:100%;min-height:138px;padding:18px;border:2px dashed #9bd8e7;border-radius:12px;color:var(--blue);background:var(--soft);cursor:pointer;text-align:center;box-sizing:border-box}.bulk-file-drop strong,.bulk-file-drop small{display:block}.bulk-file-drop .material-symbols-rounded{font-size:34px}.bulk-file-drop small{color:var(--muted)}.bulk-file-drop input{position:absolute;width:1px;height:1px;opacity:0}.bulk-reconciliation-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}.bulk-reconciliation-summary>div{min-width:0;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.bulk-reconciliation-summary small,.bulk-reconciliation-summary strong{display:block}.bulk-reconciliation-summary small{color:var(--muted);font-size:10px;text-transform:uppercase}.bulk-reconciliation-summary strong{margin-top:5px;font-size:19px;overflow-wrap:anywhere}.bulk-reconciliation-summary .variance-ok{color:#16835f}.bulk-reconciliation-summary .variance-bad{color:var(--red)}.bulk-review-card{min-width:0;overflow:hidden}.bulk-batch-navigator{display:grid;grid-template-columns:minmax(130px,1fr) auto minmax(130px,1fr);align-items:center;gap:10px;margin:0 0 12px;padding:9px;border:1px solid #cfe1ea;border-radius:10px;background:#f5fafc}.bulk-batch-navigator>div{text-align:center}.bulk-batch-navigator strong,.bulk-batch-navigator small{display:block}.bulk-batch-navigator small{margin-top:2px;color:var(--muted);font-size:10px}.bulk-batch-navigator button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:38px}.bulk-batch-navigator button:last-child{justify-self:end}.bulk-review-table input,.bulk-review-table select{min-width:96px;min-height:38px;padding:7px 8px}.bulk-review-table .bulk-flat{min-width:76px}.bulk-review-table .bulk-utr{min-width:220px}.bulk-amount-editor{min-width:188px}.bulk-amount-editor>div{display:grid;grid-template-columns:42px minmax(64px,1fr) 42px}.bulk-amount-editor input{min-width:0!important;width:100%;border-radius:0!important;text-align:center}.bulk-amount-editor button{border:1px solid #b9dce7;border-radius:8px;color:#087e9f;background:#e8f7fb;font-weight:700}.bulk-amount-editor>div button:first-child{border-radius:8px 0 0 8px}.bulk-amount-editor>div button:last-child{border-radius:0 8px 8px 0}.bulk-amount-editor nav{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:5px}.bulk-amount-editor nav button{min-height:25px;font-size:10px}.bulk-amount-editor nav button.active{color:#fff;background:#138cac;border-color:#138cac}.bulk-row-error{color:var(--red);font-size:11px}.bulk-row-ok{color:#16835f;font-size:11px}.bulk-review-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.bulk-review-actions button{min-height:44px}.bulk-review-table-wrap{width:100%;max-width:100%;max-height:470px;overflow:auto}.bulk-review-table thead{position:sticky;top:0;z-index:2}
@media(max-width:900px){.bulk-handover-grid,.bulk-reconciliation-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.bulk-upload-console .operations-heading{display:flex;flex-direction:column;align-items:flex-start}.bulk-upload-console .operations-heading>div{min-width:0;max-width:100%}.bulk-upload-console .operations-heading h3,.bulk-upload-console .operations-heading p{max-width:100%;overflow-wrap:anywhere}.bulk-ocr-usage{flex-wrap:wrap}.bulk-ocr-usage small{width:100%;margin-left:21px}.bulk-handover-grid{grid-template-columns:1fr}.bulk-reconciliation-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.bulk-batch-navigator{grid-template-columns:1fr 1fr}.bulk-batch-navigator>div{grid-column:1/-1;grid-row:1}.bulk-batch-navigator button{grid-row:2;width:100%}.bulk-review-actions{flex-direction:column}.bulk-review-actions button{width:100%}.bulk-file-drop{min-height:116px}}
.bulk-existing-row{background:#fffaf0}.bulk-row-existing{color:#a76a00;font-size:11px;font-weight:700}.message.success{display:grid;gap:4px;border:1px solid #a9dfc7;color:#176b4b;background:#e9f8ef}.message.success strong{display:flex;align-items:center;gap:7px}.message.success .material-symbols-rounded{font-size:19px}.message.success small{color:#397860}
.dashboard-period-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}.dashboard-period-bar>div{display:flex;align-items:center;gap:7px}.dashboard-period-bar .material-symbols-rounded{color:var(--blue);font-size:19px}.dashboard-period-bar label{font-size:11px;font-weight:700;color:var(--muted)}.dashboard-period-bar select{min-height:34px;padding:5px 30px 5px 9px;border:1px solid #cfe0e9;border-radius:8px;background:#f5fafc}.dashboard-period-bar small{color:var(--muted);font-size:10px}.bulk-ocr-progress{display:grid;gap:5px;margin-top:9px;padding:8px 10px;border:1px solid #cce5ed;border-radius:9px;background:#f6fbfd}.bulk-ocr-progress>div{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#4e6578;font-size:11px}.bulk-ocr-progress>div strong{color:var(--blue)}.bulk-ocr-progress>i{display:block;height:4px;overflow:hidden;border-radius:999px;background:#dcecf1}.bulk-ocr-progress>i>b{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1594b4,#55c5d9);transition:width .25s ease}.bulk-ocr-progress.is-reading>i>b{min-width:12%;animation:bulkOcrPulse 1.25s ease-in-out infinite}@keyframes bulkOcrPulse{0%,100%{opacity:.65}50%{opacity:1}}
.dashboard-reconciliation{margin-top:10px;border:1px solid var(--line);border-radius:11px;background:var(--card);overflow:hidden}.dashboard-reconciliation-strip{display:flex;align-items:center;gap:13px;min-height:58px;padding:9px 11px}.dashboard-reconciliation-strip>div:not(.dashboard-reconciliation-secondary){display:grid;gap:2px}.dashboard-reconciliation-strip small{color:var(--muted);font-size:9px;font-weight:600;text-transform:uppercase}.dashboard-reconciliation-strip strong{font-size:16px;font-weight:600}.dashboard-reconciliation-strip>i{color:#95a7b6;font-style:normal}.dashboard-reconciliation-secondary{display:flex;gap:10px;margin-left:auto;color:var(--muted);font-size:11px}.dashboard-reconciliation-secondary b{color:var(--text)}.dashboard-reconciliation-status{padding:5px 8px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap}.dashboard-reconciliation-status.is-ok{color:#16724f;background:#e5f6ed}.dashboard-reconciliation-status.is-warning{color:#946100;background:#fff3d2}.dashboard-reconciliation-toggle{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border:1px solid #cfe0e9;border-radius:9px;color:var(--blue);background:var(--soft)}.dashboard-reconciliation-toggle span{transition:transform .18s ease}.dashboard-reconciliation-toggle.open span{transform:rotate(180deg)}.dashboard-reconciliation-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px;border-top:1px solid var(--line);background:#f7fafc}.dashboard-exclusion-group{min-width:0;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--card)}.dashboard-exclusion-group header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.dashboard-exclusion-group header strong,.dashboard-exclusion-group header span{display:block}.dashboard-exclusion-group header strong{font-size:13px}.dashboard-exclusion-group header span{margin-top:2px;color:var(--muted);font-size:10px}.dashboard-exclusion-group header>b{padding:3px 7px;border-radius:999px;color:var(--blue);background:var(--soft);font-size:10px}.dashboard-exclusion-flats{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.dashboard-exclusion-flats button{display:grid;gap:1px;min-width:92px;padding:6px 8px;border:1px solid #d7e3ea;border-radius:7px;background:#fff;text-align:left}.dashboard-exclusion-flats button strong{font-size:11px}.dashboard-exclusion-flats button small{max-width:125px;overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.dashboard-exclusion-more{margin-top:8px;color:var(--blue);background:transparent;font-size:10px;font-weight:700}.dashboard-reconciliation-details>.loading-state{grid-column:1/-1}
.dashboard-payment-distribution,.payment-distribution{padding:10px;border-top:1px solid var(--line);background:#fbfdfe}.payment-distribution{border:1px solid var(--line);border-radius:11px}.payment-distribution-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.payment-distribution-head strong,.payment-distribution-head small{display:block}.payment-distribution-head strong{font-size:12px}.payment-distribution-head small{margin-top:2px;color:var(--muted);font-size:9px}.payment-distribution-head button{display:flex;align-items:center;gap:5px;min-height:34px;padding:6px 10px;font-size:10px}.payment-distribution-head button .material-symbols-rounded{font-size:16px}.payment-distribution-buckets{display:flex;gap:7px;overflow-x:auto;margin-top:8px;padding-bottom:2px}.payment-distribution-buckets label,.payment-distribution-buckets>span{display:flex;align-items:center;gap:6px;min-width:max-content;padding:7px 9px;border:1px solid #cfe0e9;border-radius:8px;color:var(--text);background:#fff;font-size:11px}.payment-distribution-buckets label{cursor:pointer}.payment-distribution-buckets input{width:16px;height:16px;accent-color:var(--blue)}.payment-distribution-buckets b{margin-left:3px;color:var(--blue);font-size:10px}.payment-distribution-buckets em{margin-left:4px;color:#9b6808;font-size:9px;font-style:normal}.payment-distribution-empty{color:var(--muted)!important}.dashboard-payment-export-card{width:min(920px,calc(100vw - 24px))}.payment-export-summary{display:flex;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:8px;background:var(--soft)}.payment-export-summary strong{font-size:13px}.payment-export-summary span{color:var(--muted);font-size:10px}.payment-export-table-wrap{max-height:55vh;margin-top:10px}.payment-export-table-wrap thead{position:sticky;top:0;z-index:1}.dashboard-payment-export-card .portal-modal-actions button{display:flex;align-items:center;justify-content:center;gap:6px}.dashboard-payment-export-card .portal-modal-actions .material-symbols-rounded{font-size:18px}
.bulk-handover-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:600px){.dashboard-period-bar{align-items:flex-start;flex-direction:column}.dashboard-period-bar>div{width:100%}.dashboard-period-bar select{flex:1}.dashboard-period-bar small{line-height:1.35}.dashboard-reconciliation-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto;gap:7px}.dashboard-reconciliation-secondary{grid-column:1/5;margin:2px 0 0}.dashboard-reconciliation-status{grid-column:5/7;justify-self:end}.dashboard-reconciliation-toggle{grid-column:6;grid-row:1}.dashboard-reconciliation-strip>div:nth-child(5){padding-right:38px}.dashboard-reconciliation-details{grid-template-columns:1fr}.payment-distribution-head{align-items:flex-start}.payment-distribution-head button{flex:0 0 auto}.payment-export-summary{align-items:flex-start;flex-direction:column}.dashboard-payment-export-card .portal-modal-actions{display:grid;grid-template-columns:1fr 1fr}.bulk-handover-grid{grid-template-columns:1fr}}
.bulk-review-heading-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:8px}.bulk-review-heading-actions button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px}.bulk-review-fullscreen-button{width:42px;min-width:42px!important;padding:0!important}.bulk-review-fullscreen-button .material-symbols-rounded{font-size:22px}.bulk-review-card.bulk-review-fullscreen{position:fixed;inset:0;z-index:2400;display:flex;flex-direction:column;width:100vw;height:100dvh;max-width:none;margin:0;padding:14px;border:0;border-radius:0;background:var(--card);box-sizing:border-box}.bulk-review-fullscreen>.operations-heading{flex:0 0 auto;margin-bottom:8px}.bulk-review-fullscreen .bulk-batch-navigator{flex:0 0 auto;margin-bottom:8px}.bulk-review-fullscreen .bulk-review-table-wrap{flex:1 1 auto;max-height:none;min-height:0}.bulk-review-fullscreen .bulk-review-actions{flex:0 0 auto;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);background:var(--card)}.bulk-review-fullscreen #bulkUploadMessage{flex:0 0 auto;margin-top:6px}.bulk-review-mode{overflow:hidden!important}
.bulk-format-helper{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:-7px;color:var(--muted);font-size:9px}.bulk-format-helper button{display:grid;place-items:center;width:28px;height:28px;border:1px solid #cfe0e9;border-radius:7px;color:var(--blue);background:var(--soft)}.bulk-format-helper .material-symbols-rounded{font-size:16px}
.bulk-process-modal{z-index:4000!important;cursor:wait}.bulk-process-card{width:min(520px,calc(100vw - 24px));pointer-events:none}.bulk-process-lock{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:#087e9f;background:#e5f6fa}.bulk-process-card>p{margin:6px 0 14px;color:var(--muted);font-size:13px}.bulk-process-counts{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;font-size:11px}.bulk-process-counts strong{color:var(--blue)}.bulk-process-counts span:nth-child(2){overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.bulk-process-counts span:last-child{color:var(--muted)}.bulk-process-track{height:8px;overflow:hidden;margin:10px 0;border-radius:999px;background:#dcecf1}.bulk-process-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#148cab,#54c4d8);transition:width .25s ease}.bulk-process-card>small{display:block;color:#9a6500;line-height:1.4}.bulk-process-active{overflow:hidden!important}
@media(max-width:600px){.bulk-review-heading-actions{display:grid!important;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);width:100%;max-width:none!important}.bulk-review-heading-actions button:not(.bulk-review-fullscreen-button){width:100%}.bulk-remove-existing{padding-inline:8px;font-size:10px}.bulk-review-card.bulk-review-fullscreen{padding:8px}.bulk-review-fullscreen>.operations-heading>div:first-child p{display:none}.bulk-review-fullscreen>.operations-heading{gap:7px}.bulk-review-fullscreen .bulk-review-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.bulk-review-fullscreen .bulk-review-actions button{width:100%}}
.dashboard-payment-distribution{padding:8px 10px}.dashboard-payment-distribution .payment-distribution-head>div{display:flex;align-items:center;gap:8px;min-width:0}.dashboard-payment-distribution .payment-distribution-head strong{white-space:nowrap}.dashboard-payment-distribution .payment-distribution-head small{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-payment-distribution .payment-distribution-head button{min-height:30px;padding:4px 9px;white-space:nowrap}.dashboard-payment-distribution .payment-distribution-buckets{margin-top:6px}.dashboard-payment-distribution .payment-distribution-buckets label{min-height:32px;padding:5px 8px}.bulk-delete-pending{background:#ffeaed!important;box-shadow:inset 4px 0 #d54d61}.bulk-delete-pending td{border-color:#efbac2!important}.bulk-delete-pending .icon-btn{color:#fff;background:#d54d61}.bulk-process-console{display:grid;gap:3px;max-height:62px;overflow:hidden;margin:10px 0;padding:8px 10px;border:1px solid #c9dfe8;border-radius:8px;color:#3d5a6b;background:#f4fafc;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.3}.bulk-process-console span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bulk-process-console span:nth-child(2){color:#087e9f;font-weight:700}.bulk-process-summary{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 9px;border:1px solid #b8dfce;border-radius:8px;color:#176b4b;background:#edf9f2}.bulk-process-summary.warning{border-color:#f0d38d;color:#8b5b00;background:#fff8e6}.bulk-process-summary .material-symbols-rounded{font-size:19px}.bulk-process-summary strong,.bulk-process-summary small{display:block}.bulk-process-summary strong{font-size:11px}.bulk-process-summary small{margin-top:1px;color:inherit;font-size:9px}
@media(max-width:600px){.dashboard-payment-distribution .payment-distribution-head{align-items:center}.dashboard-payment-distribution .payment-distribution-head>div{display:block}.dashboard-payment-distribution .payment-distribution-head small{display:block;max-width:54vw}.dashboard-payment-distribution .payment-distribution-buckets{flex-wrap:nowrap}.dashboard-payment-distribution .payment-distribution-head button{font-size:0}.dashboard-payment-distribution .payment-distribution-head button .material-symbols-rounded{font-size:18px}.bulk-process-counts{grid-template-columns:1fr auto}.bulk-process-counts span:nth-child(2){grid-column:1/-1;grid-row:2;text-align:left}.bulk-process-summary small{line-height:1.35}}
/* Color-coded Export Modal Table Rows */
.payment-export-table-wrap table tbody tr.recon-row-paid td,
.payment-export-table-wrap table tbody tr.recon-row-paid th,
#dashboardPaymentExportRows tr.recon-row-paid td {
  background-color: #e6f4ea !important;
  color: #137333 !important;
}
.payment-export-table-wrap table tbody tr.recon-row-partial td,
.payment-export-table-wrap table tbody tr.recon-row-partial th,
#dashboardPaymentExportRows tr.recon-row-partial td {
  background-color: #fef7e0 !important;
  color: #b06000 !important;
}
.payment-export-table-wrap table tbody tr.recon-row-unpaid td,
.payment-export-table-wrap table tbody tr.recon-row-unpaid th,
#dashboardPaymentExportRows tr.recon-row-unpaid td {
  background-color: #fce8e6 !important;
  color: #c5221f !important;
}
/* Executive Dashboard Redesign */
.dashboard-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted, #617087);
  margin: 16px 0 10px;
}

.dashboard-global-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.dashboard-period-bar-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #dce8ef);
  border-radius: 12px;
  margin-bottom: 14px;
}

.dashboard-filter-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-filter-control .material-symbols-rounded {
  font-size: 20px;
  color: #0b6b47;
}

.dashboard-filter-control label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text, #172033);
}

.dashboard-filter-control select {
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
}

.dashboard-filter-hint {
  font-size: 11px;
  color: var(--muted, #64748b);
  font-style: italic;
}

.dashboard-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

/* Executive Cards */
.exec-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.exec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.exec-card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
}

.exec-card-icon .material-symbols-rounded {
  font-size: 24px;
}

.exec-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.exec-card-content small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exec-card-content strong {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Color Themes matching Mockup */
.exec-theme-blue {
  background: #eef6ff !important;
  border: 1px solid #bfdbfe !important;
}
.exec-theme-blue .exec-card-icon {
  background: #dbeafe;
  color: #1d4ed8;
}
.exec-theme-blue small {
  color: #3b82f6;
}
.exec-theme-blue strong {
  color: #1e3a8a;
}

.exec-theme-green {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}
.exec-theme-green .exec-card-icon {
  background: #dcfce7;
  color: #15803d;
}
.exec-theme-green small {
  color: #16a34a;
}
.exec-theme-green strong {
  color: #14532d;
}

.exec-theme-amber {
  background: #fffbeb !important;
  border: 1px solid #fef3c7 !important;
}
.exec-theme-amber .exec-card-icon {
  background: #fef3c7;
  color: #b45309;
}
.exec-theme-amber small {
  color: #d97706;
}
.exec-theme-amber strong {
  color: #78350f;
}

.exec-theme-red {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
}
.exec-theme-red .exec-card-icon {
  background: #fee2e2;
  color: #b91c1c;
}
.exec-theme-red small {
  color: #dc2626;
}
.exec-theme-red strong {
  color: #7f1d1d;
}

.exec-theme-slate {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
.exec-theme-slate .exec-card-icon {
  background: #e2e8f0;
  color: #475569;
}
.exec-theme-slate small {
  color: #64748b;
}
.exec-theme-slate strong {
  color: #1e293b;
}

@media (max-width: 1024px) {
  .dashboard-global-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dashboard-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  /* 2-col metric grid still fine on medium phones/tablets */
  .handover-field-group {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .dashboard-global-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-period-bar-modern {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .dashboard-filter-hint {
    margin-top: 2px;
  }
}

@media (max-width: 480px) {
  .dashboard-global-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Dashboard Toolbar & Welcome Banner Responsive CSS ---- */
.dashboard-unified-toolbar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}
.dashboard-unified-toolbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-welcome-banner {
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dashboard-welcome-banner h2 {
  margin: 4px 0 2px;
  font-size: clamp(19px, 3vw, 26px);
  font-weight: 800;
  color: #0f172a;
}
/* FY toolbar action cards: graceful on all phones */
#dashboardFyToolbarActions {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}
/* FY mode controls wrap on narrow viewports */
#dashboardFyControlsWrap {
  gap: 8px;
}
@media (max-width: 600px) {
  .dashboard-unified-toolbar {
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 14px;
  }
  #dashboardFyToolbarActions {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
  .dashboard-welcome-banner {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
  }
  #dashboardFyControlsWrap {
    width: 100%;
  }
}
@media (max-width: 430px) {
  .dashboard-unified-toolbar-top {
    gap: 8px;
  }
}

/* ========================================================
   HANDOVER & ADVANCE MODAL HIGH-POLISH STYLING
   ======================================================== */
.handover-modal-card {
  width: min(620px, calc(100vw - 28px)) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.25) !important;
  border: 1px solid #e2e8f0 !important;
}

.handover-head-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.handover-head-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #eff6ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.handover-head-icon.is-debit {
  background: #fef2f2;
  color: #dc2626;
}

.handover-head-icon .material-symbols-rounded {
  font-size: 24px;
}

.handover-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #f1f5f9;
  padding: 5px;
  border-radius: 12px;
  margin-bottom: 18px;
}

.handover-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 9px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  color: #64748b;
  width: 100% !important;
  margin: 0 !important;
}

.handover-type-btn.active-credit {
  background: #ffffff !important;
  color: #0b6b47 !important;
  box-shadow: 0 2px 8px rgba(11, 107, 71, 0.12) !important;
}

.handover-type-btn.active-debit {
  background: #ffffff !important;
  color: #dc2626 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12) !important;
}

.handover-field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.handover-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.handover-field label {
  font-size: 11px !important;
  font-weight: 750 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  display: block !important;
}

.handover-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  transition: all 0.2s ease;
}

.handover-input-wrap:focus-within {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12);
}

.handover-input-wrap .material-symbols-rounded {
  color: #94a3b8;
  font-size: 20px;
  flex-shrink: 0;
}

.handover-input-wrap:focus-within .material-symbols-rounded {
  color: #2563eb;
}

.handover-input-wrap select,
.handover-input-wrap input {
  width: 100% !important;
  min-height: 44px !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.handover-textarea-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.handover-textarea-wrap label {
  font-size: 11px !important;
  font-weight: 750 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  display: block !important;
}

.handover-textarea-wrap textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  resize: vertical !important;
  min-height: 64px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.handover-textarea-wrap textarea:focus {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12) !important;
}

.handover-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.handover-modal-actions button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto !important;
  margin: 0 !important;
}
/* =========================================================
   Permission Tag Picker
   Smart multi-select for Additional Permissions in Staff Management
   ========================================================= */

.perm-picker{
  border:1.5px solid var(--border,#d1d5db);
  border-radius:12px;
  padding:8px 10px 6px;
  background:var(--surface,#fff);
  cursor:text;
  transition:border-color .15s;
  position:relative;
}
.perm-picker:focus-within{
  border-color:var(--accent,#1a73e8);
  box-shadow:0 0 0 3px rgba(26,115,232,.1);
}
.perm-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}
.perm-chips:empty{margin-bottom:0}
.perm-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--accent-light,#e8f0fe);
  color:var(--accent,#1a73e8);
  border:1px solid rgba(26,115,232,.25);
  border-radius:20px;
  padding:3px 10px 3px 10px;
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
}
.perm-chip-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  width:16px;height:16px;
  border-radius:50%;
  font-size:14px;
  line-height:1;
  color:var(--accent,#1a73e8);
  background:none;
  border:none;
  padding:0;
  transition:background .15s;
}
.perm-chip-remove:hover{background:rgba(26,115,232,.2)}
.perm-search-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
.perm-search-input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:14px;
  color:var(--text,#111);
  padding:4px 0;
  min-width:120px;
}
.perm-dropdown{
  position:absolute;
  left:0;right:0;
  top:calc(100% + 4px);
  background:var(--surface,#fff);
  border:1.5px solid var(--border,#d1d5db);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:9999;
  max-height:260px;
  overflow-y:auto;
  padding:6px;
}
.perm-dropdown-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  color:var(--text,#111);
  transition:background .12s;
  user-select:none;
}
.perm-dropdown-item:hover{background:var(--hover-bg,#f3f4f6)}
.perm-dropdown-item.selected{
  background:var(--accent-light,#e8f0fe);
  color:var(--accent,#1a73e8);
  font-weight:600;
}
.perm-dropdown-item .perm-check{
  font-size:16px;
  color:var(--accent,#1a73e8);
}
.perm-dropdown-empty{
  padding:12px;
  font-size:13px;
  color:var(--text-muted,#888);
  text-align:center;
}
.perm-item-label{display:flex;flex-direction:column;gap:1px}
.perm-item-desc{font-size:11px;color:var(--text-muted,#888);font-weight:400}
@media(max-width:540px){
  .perm-dropdown{max-height:200px}
  .perm-chip{font-size:11px;padding:3px 8px}
}
/* =========================================================
   Duty Roster Redesign
   ========================================================= */
.roster-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.roster-toolbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.roster-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.roster-shift-pills{
  display:flex;
  gap:6px;
  margin-bottom:10px;
  overflow-x:auto;
  padding-bottom:2px;
}
.roster-shift-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  border:1px solid var(--border,#d1d5db);
  background:var(--surface,#fff);
  color:var(--text-muted,#6b7280);
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.roster-shift-pill .material-symbols-rounded{
  font-size:16px;
}
.roster-shift-pill.active{
  background:var(--accent,#1a73e8);
  color:#fff;
  border-color:var(--accent,#1a73e8);
  box-shadow:0 2px 6px rgba(26,115,232,.25);
}
.roster-shift-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.roster-shift-toggle-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 12px;
  border-radius:8px;
  border:1.5px solid var(--border,#d1d5db);
  background:var(--surface,#fff);
  font-size:13px;
  font-weight:600;
  color:var(--text,#374151);
  cursor:pointer;
  transition:all .15s;
}
.roster-shift-toggle-btn .material-symbols-rounded{
  font-size:18px;
}
.roster-shift-toggle-btn.active{
  border-color:var(--accent,#1a73e8);
  background:var(--accent-light,#e8f0fe);
  color:var(--accent,#1a73e8);
}
.roster-guard-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border,#e5e7eb);
  background:var(--surface,#fff);
  border-radius:12px;
  margin-bottom:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
  transition:transform .12s, box-shadow .12s;
}
.roster-guard-card:hover{
  box-shadow:0 3px 8px rgba(0,0,0,.06);
}
.roster-guard-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
  flex-shrink:0;
}
.avatar-day{
  background:#fef3c7;
  color:#b45309;
}
.avatar-night{
  background:#e0e7ff;
  color:#4338ca;
}
.roster-guard-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.roster-guard-header{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.roster-guard-name{
  font-size:14px;
  font-weight:700;
  color:var(--text,#111827);
}
.roster-shift-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
}
.roster-shift-tag .material-symbols-rounded{
  font-size:13px;
}
.tag-day{
  background:#fffbeb;
  color:#d97706;
  border:1px solid #fde68a;
}
.tag-night{
  background:#eff6ff;
  color:#2563eb;
  border:1px solid #bfdbfe;
}
.roster-guard-meta{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.roster-meta-pill{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:11px;
  color:var(--text-muted,#6b7280);
}
.roster-meta-pill .material-symbols-rounded{
  font-size:13px;
}
.roster-note-pill{
  background:var(--surface-subtle,#f3f4f6);
  padding:1px 6px;
  border-radius:4px;
  color:var(--text,#374151);
}
.roster-checkin-bar{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:#059669;
  background:#ecfdf5;
  padding:3px 8px;
  border-radius:6px;
  width:fit-content;
  margin-top:2px;
}
.roster-checkin-bar .material-symbols-rounded{
  font-size:13px;
}
.roster-guard-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex-shrink:0;
}
.roster-status-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:700;
  text-align:center;
}
.roster-status-planned{
  background:#f3f4f6;
  color:#4b5563;
}
.roster-status-in{
  background:#d1fae5;
  color:#065f46;
}
.roster-status-out{
  background:#f3f4f6;
  color:#9ca3af;
}
.roster-status-absent{
  background:#fee2e2;
  color:#991b1b;
}
.roster-status-leave{
  background:#fef3c7;
  color:#92400e;
}
.roster-btn-group{
  display:flex;
  gap:4px;
}
.roster-mini-btn{
  width:28px;
  height:28px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid var(--border,#d1d5db);
  background:var(--surface,#fff);
  color:var(--text-muted,#6b7280);
  cursor:pointer;
}
.roster-mini-btn .material-symbols-rounded{
  font-size:15px;
}
.roster-mini-btn:hover{
  background:var(--surface-subtle,#f3f4f6);
  color:var(--text,#111);
}
.roster-mini-btn.danger:hover{
  background:#fee2e2;
  color:#b91c1c;
  border-color:#fca5a5;
}
.roster-assign-card{
  border:1.5px solid var(--accent-light,#d2e3fc);
  box-shadow:0 4px 12px rgba(26,115,232,.08);
}
.roster-week-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  overflow-x:auto;
}
.roster-week-day{
  background:var(--surface,#fff);
  border:1.5px solid var(--border,#d1d5db);
  border-radius:10px;
  padding:8px;
  min-height:85px;
}
.roster-week-day.roster-today{
  border-color:var(--accent,#1a73e8);
  background:var(--accent-light,#e8f0fe);
}
.roster-day-label{
  font-size:11px;
  font-weight:700;
  color:var(--text-muted,#888);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:6px;
}
.roster-day-entry{
  border-radius:6px;
  padding:4px 6px;
  margin-bottom:4px;
  font-size:11px;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.roster-day-entry.roster-day-shift{
  background:rgba(251,188,4,.15);
  border-left:3px solid #fbbc04;
}
.roster-day-entry.roster-night-shift{
  background:rgba(66,133,244,.12);
  border-left:3px solid #4285f4;
}
.roster-day-empty{
  font-size:11px;
  color:var(--text-muted,#888);
  text-align:center;
  padding-top:12px;
}
@media(max-width:700px){
  .roster-week-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .roster-guard-card{flex-direction:column;align-items:flex-start}
  .roster-guard-actions{flex-direction:row;width:100%;justify-content:space-between;align-items:center;margin-top:6px}
}
/* Attendance Status Badges */
.attendance-badge-checked-in{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  background:#d1fae5;
  color:#065f46;
  border:1px solid #a7f3d0;
}
.attendance-badge-checked-out{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  background:#f3f4f6;
  color:#6b7280;
  border:1px solid #e5e7eb;
}
.attendance-badge-present{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  background:#ecfdf5;
  color:#047857;
}
.attendance-badge-absent{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  background:#fee2e2;
  color:#991b1b;
}
.attendance-badge-leave{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  background:#fef3c7;
  color:#92400e;
}
.attendance-badge-off{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  background:#f3f4f6;
  color:#4b5563;
}
.attendance-badge-not-marked{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  background:#f9fafb;
  color:#9ca3af;
  border:1px solid #e5e7eb;
}
/* Attendance Shift Groups & Redesigned Cards */
.attendance-shift-group{
  margin-bottom:20px;
  background:var(--surface,#fff);
  border:1px solid var(--border,#e5e7eb);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.attendance-shift-group.supervisor-group{
  border-left:4px solid #1a73e8;
}
.attendance-shift-group.day-group{
  border-left:4px solid #f59e0b;
}
.attendance-shift-group.night-group{
  border-left:4px solid #6366f1;
}
.attendance-shift-header{
  padding:12px 16px;
  background:var(--surface-subtle,#f8fafc);
  border-bottom:1px solid var(--border,#e5e7eb);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.attendance-shift-title{
  font-size:14px;
  font-weight:700;
  color:var(--text,#1f2937);
  display:flex;
  align-items:center;
  gap:6px;
}
.attendance-shift-title .material-symbols-rounded{
  font-size:18px;
}
.supervisor-group .attendance-shift-title .material-symbols-rounded{color:#1a73e8}
.day-group .attendance-shift-title .material-symbols-rounded{color:#f59e0b}
.night-group .attendance-shift-title .material-symbols-rounded{color:#6366f1}
.attendance-shift-subtitle{
  font-size:12px;
  color:var(--text-muted,#6b7280);
  font-weight:500;
}
.attendance-card{
  padding:14px 16px;
  border-bottom:1px solid var(--border-subtle,#f1f5f9);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  transition:background .15s ease;
}
.attendance-card:last-child{
  border-bottom:none;
}
.attendance-card:hover{
  background:rgba(0,0,0,.01);
}
.attendance-card-main{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.attendance-card-header{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
}
.attendance-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}
.attendance-card-title .supervisor-icon{
  color:#1a73e8;
  font-size:18px;
}
.attendance-card-title .guard-icon{
  color:#6b7280;
  font-size:18px;
}
.attendance-id-tag{
  font-size:11px;
  font-family:monospace;
  color:var(--text-muted,#9ca3af);
  background:var(--surface-subtle,#f3f4f6);
  padding:1px 6px;
  border-radius:4px;
}
.attendance-card-meta{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--text-muted,#6b7280);
}
.attendance-meta-item{
  display:flex;
  align-items:center;
  gap:4px;
}
.attendance-meta-item .material-symbols-rounded{
  font-size:15px;
  color:var(--text-muted,#9ca3af);
}
.attendance-loc-dropdown{
  font-size:11px;
  font-weight:600;
  color:#1f2937;
  background:#f3f4f6;
  border:1px solid #d1d5db;
  border-radius:6px;
  padding:2px 6px;
  cursor:pointer;
  outline:none;
}
.attendance-loc-dropdown:focus{
  border-color:var(--accent,#1a73e8);
}
.attendance-card-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}
.attendance-card-actions button{
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  border-radius:6px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.attendance-btn-checked-in{
  background:#d1fae5 !important;
  color:#065f46 !important;
  border:1px solid #a7f3d0 !important;
  cursor:not-allowed;
  opacity:.9;
  font-weight:600;
}
.attendance-more-btn{
  background:transparent;
  border:1px solid #e5e7eb;
  color:#4b5563;
  padding:5px 8px !important;
  font-size:11px !important;
}
.attendance-more-btn:hover{
  background:#f9fafb;
  border-color:#d1d5db;
}
.attendance-auto-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:12px;
  background:rgba(26,115,232,.08);
  color:#1a73e8;
  font-size:12px;
  font-weight:600;
}
.attendance-auto-chip .material-symbols-rounded{
  font-size:14px;
}
@media(max-width:768px){
  .attendance-card{flex-direction:column;align-items:flex-start}
  .attendance-card-actions{width:100%;justify-content:flex-start;overflow-x:auto;padding-top:6px}
}
@media(max-width:480px){
  .roster-week-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* WhatsApp Gateway & Share Duty Details UI */
.guard-duty-share-card{
  width:min(520px, calc(100vw - 28px)) !important;
  max-height:88vh !important;
  overflow-y:auto !important;
  border-radius:20px !important;
  padding:24px !important;
  background:var(--card, #fff) !important;
  box-shadow:0 25px 60px rgba(15,23,42,.25) !important;
}
.guard-share-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-top:20px !important;
  flex-wrap:wrap !important;
}
.guard-share-actions button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:42px !important;
  padding:0 16px !important;
  font-size:13px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  border-radius:10px !important;
}
.wa-settings-modal-card{
  max-width:580px !important;
  width:min(580px, calc(100vw - 28px)) !important;
  max-height:86vh !important;
  overflow-y:auto !important;
  border-radius:20px !important;
  padding:24px !important;
  background:var(--card, #fff) !important;
  box-shadow:0 25px 60px rgba(15,23,42,.25) !important;
}
.wa-status-box{
  margin:12px 0 16px;
  padding:12px 14px;
  background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.25);
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
}
.wa-status-icon{
  color:#059669;
  font-size:26px;
  flex-shrink:0;
}
.wa-status-text strong{
  font-size:13px;
  color:#065f46;
  display:block;
}
.wa-status-text p{
  margin:2px 0 0;
  font-size:11.5px;
  color:#047857;
  line-height:1.35;
}
.wa-field-group{
  margin-bottom:14px;
}
.wa-label{
  display:block;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-muted,#4b5563);
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:6px;
}
.wa-select{
  width:100%;
  padding:10px 14px;
  font-size:13.5px;
  border-radius:10px;
  border:1.5px solid var(--border,#d1d5db);
  background:var(--surface,#fff);
  color:var(--text,#1f2937);
  outline:none;
  transition:border-color .15s ease;
}
.wa-select:focus{
  border-color:var(--accent,#0284c7);
}
.wa-input-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace !important;
  font-size:12.5px !important;
  background:var(--surface-subtle,#f8fafc) !important;
}
.wa-fetch-btn{
  padding:4px 10px !important;
  font-size:11.5px !important;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:8px !important;
}
.wa-time-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}
.wa-time-card{
  background:var(--surface-subtle,#f9fafb);
  border:1.5px solid var(--border,#e5e7eb);
  border-radius:12px;
  padding:10px 12px;
}
.wa-time-control{
  margin-top:4px;
  border:1px solid var(--border,#d1d5db);
  border-radius:8px;
  background:#fff;
}
.wa-time-control input{
  width:100%;
  border:none;
  font-weight:600;
  font-size:14px;
  padding:6px;
}
.wa-checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  background:var(--surface-subtle,#f8fafc);
  border:1.5px solid var(--border,#e5e7eb);
  border-radius:12px;
  margin-bottom:16px;
  cursor:pointer;
}
.wa-checkbox-row input{
  margin-top:2px;
  width:18px;
  height:18px;
  accent-color:var(--accent,#0284c7);
}
.wa-modal-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--border,#e5e7eb);
  position:sticky;
  bottom:-24px;
  background:var(--card,#fff);
  margin-bottom:-12px;
  padding-bottom:12px;
  z-index:10;
}
.wa-modal-footer button,
.guard-share-actions-grid button,
.portal-modal-actions button{
  min-height:44px !important;
  height:44px !important;
  padding:0 16px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  border-radius:11px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
.wa-test-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  font-size:13px !important;
  font-weight:600 !important;
  border-radius:11px !important;
}
.wa-search-box{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface,#fff);
  border:1.5px solid var(--border,#d1d5db);
  border-radius:10px;
  padding:2px 10px;
  transition:border-color .15s ease;
}
.wa-search-box:focus-within{
  border-color:var(--accent,#0284c7);
  box-shadow:0 0 0 3px rgba(2,132,199,.12);
}
.wa-search-box input{
  border:none;
  outline:none;
  width:100%;
  font-size:13.5px;
  padding:8px 0;
  background:transparent;
  color:var(--text,#1f2937);
}
.wa-group-search-results{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:60;
  background:#fff;
  border:1.5px solid var(--border,#cbd5e1);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
  max-height:220px;
  overflow-y:auto;
}
.wa-group-item{
  padding:10px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #f1f5f9;
  transition:background .15s ease;
}
.wa-group-item:last-child{
  border-bottom:none;
}
.wa-group-item:hover, .wa-group-item.selected{
  background:#f0fdf4;
}
.wa-group-item strong{
  font-size:13px;
  color:#0f172a;
  display:block;
}
.wa-group-item small{
  font-size:11px;
  color:#64748b;
  font-family:ui-monospace,monospace;
}
/* Prominent Inline Loader & Guard Customization UI */
.portal-inline-loader{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:32px 16px;
  text-align:center;
  background:rgba(248,250,252,.85);
  border-radius:12px;
  margin:10px 0;
}
.portal-inline-loader span{
  font-size:13.5px;
  font-weight:600;
  color:var(--text-muted,#475569);
}
.portal-spinner{
  width:32px;
  height:32px;
  border:3px solid var(--border,#cbd5e1);
  border-top-color:var(--accent,#0284c7);
  border-radius:50%;
  animation:portalSpin .8s linear infinite;
}
@keyframes portalSpin{
  to{transform:rotate(360deg)}
}
.roster-guard-select-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:var(--surface,#ffffff);
  border:1.5px solid var(--border,#e2e8f0);
  border-radius:10px;
  gap:10px;
  transition:all .15s ease;
}
.roster-guard-select-row:hover{
  border-color:var(--accent,#0284c7);
  background:var(--accent-subtle,#f0f9ff);
}
.roster-guard-select-row.selected{
  border-color:var(--accent,#0284c7);
  background:var(--accent-subtle,#f0f9ff);
}
.roster-guard-select-info{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.roster-guard-select-info input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--accent,#0284c7);
  cursor:pointer;
}
.roster-guard-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.roster-guard-meta strong{
  font-size:13.5px;
  color:var(--text,#1e293b);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.roster-guard-meta small{
  font-size:11.5px;
  color:var(--text-muted,#64748b);
}
.roster-guard-location-select{
  padding:6px 8px;
  font-size:12.5px;
  font-weight:600;
  border-radius:8px;
  border:1px solid var(--border,#cbd5e1);
  background:#fff;
  color:var(--text,#1e293b);
  cursor:pointer;
  min-width:110px;
}
@media(max-width:540px){
  .wa-time-grid{grid-template-columns:1fr}
  .wa-modal-footer{flex-direction:column;align-items:stretch}
  .wa-modal-footer>div{width:100%;justify-content:flex-end}
  .guard-share-actions{flex-direction:column;align-items:stretch}
  .guard-share-actions>div{width:100%;justify-content:flex-end}
}

/* ---- PDF Page Inspector & Range Selector Modal Styles ---- */
.bulk-pdf-inspector-card{
  width:min(920px, 94vw);
  max-width:920px;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  padding:20px;
  gap:12px;
  overflow:hidden;
  border-radius:18px;
}
.bulk-pdf-controls-box{
  background:var(--surface-subtle,#f8fafc);
  border:1.5px solid var(--border,#e2e8f0);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bulk-pdf-preset-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.bulk-pdf-preset-label{
  font-size:11.5px;
  font-weight:700;
  color:var(--text-muted,#64748b);
  min-width:110px;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.bulk-pdf-chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.bulk-pdf-chip-btn{
  font-size:11.5px;
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
  border:1.5px solid var(--border,#cbd5e1);
  background:#fff;
  color:var(--text,#1e293b);
  cursor:pointer;
  transition:all 0.15s ease;
  line-height:1.2;
}
.bulk-pdf-chip-btn:hover{
  border-color:var(--accent,#0284c7);
  background:var(--accent-light,#f0f9ff);
  color:var(--accent,#0284c7);
}
.bulk-pdf-chip-btn.active{
  background:var(--accent,#0284c7);
  border-color:var(--accent,#0284c7);
  color:#fff;
}
.bulk-pdf-preset-row-custom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px dashed var(--border,#e2e8f0);
  padding-top:8px;
  margin-top:2px;
  gap:10px;
  flex-wrap:wrap;
}
.bulk-pdf-preset-actions{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.bulk-pdf-pill-btn{
  font-size:11.5px;
  font-weight:600;
  padding:4px 10px;
  border-radius:6px;
  border:1px solid var(--border,#cbd5e1);
  background:var(--surface,#fff);
  color:var(--text,#334155);
  cursor:pointer;
}
.bulk-pdf-pill-btn:hover{
  background:var(--surface-hover,#f1f5f9);
}
.bulk-pdf-custom-range-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.bulk-pdf-custom-range-wrap label{
  font-size:12px;
  font-weight:700;
  color:var(--text-muted,#64748b);
  margin:0;
}
.bulk-pdf-custom-range-wrap input{
  padding:5px 10px;
  font-size:12px;
  font-weight:600;
  border-radius:6px;
  border:1.5px solid var(--border,#cbd5e1);
  width:140px;
  background:#fff;
}
.bulk-pdf-custom-range-wrap input:focus{
  outline:none;
  border-color:var(--accent,#0284c7);
}
.bulk-pdf-thumbnail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  max-height:50vh;
  min-height:160px;
  overflow-y:auto;
  padding:6px 4px;
  scroll-behavior:smooth;
}
.bulk-pdf-page-tile{
  position:relative;
  background:#fff;
  border:2px solid var(--border,#e2e8f0);
  border-radius:10px;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
  user-select:none;
}
.bulk-pdf-page-tile:hover{
  transform:translateY(-2px);
  border-color:#94a3b8;
  box-shadow:0 4px 8px rgba(0,0,0,0.08);
}
.bulk-pdf-page-tile.selected{
  border-color:var(--accent,#0284c7);
  background:var(--accent-light,#f0f9ff);
  box-shadow:0 0 0 1px var(--accent,#0284c7);
}
.bulk-pdf-page-header{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
}
.bulk-pdf-page-checkbox{
  accent-color:var(--accent,#0284c7);
  width:16px;
  height:16px;
  cursor:pointer;
}
.bulk-pdf-page-num{
  font-weight:700;
  color:var(--text,#1e293b);
  font-size:11px;
  background:var(--surface-subtle,#f1f5f9);
  padding:1px 6px;
  border-radius:4px;
}
.bulk-pdf-page-tile.selected .bulk-pdf-page-num{
  background:var(--accent,#0284c7);
  color:#fff;
}
.bulk-pdf-canvas-wrap{
  width:100%;
  height:160px;
  background:#fafafa;
  border-radius:6px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,0.06);
}
.bulk-pdf-canvas-wrap canvas{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.bulk-pdf-loader{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:20px;
  color:var(--text-muted,#64748b);
  font-size:13px;
}
.bulk-pdf-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1.5px solid var(--border,#e2e8f0);
  padding-top:14px;
  margin-top:auto;
  flex-wrap:wrap;
  gap:10px;
}
.bulk-pdf-summary{
  display:flex;
  flex-direction:column;
}
.bulk-pdf-summary strong{
  font-size:13.5px;
  color:var(--text,#1e293b);
}
.bulk-pdf-summary small{
  font-size:11.5px;
  color:var(--text-muted,#64748b);
}
.bulk-pdf-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.bulk-pdf-page-tile.extracted{
  border-color:#10b981;
  background:#f0fdf4;
  opacity:0.85;
}
.bulk-pdf-page-tile.extracted .bulk-pdf-page-num{
  background:#10b981;
  color:#fff;
}
.bulk-pdf-extracted-badge{
  position:absolute;
  bottom:10px;
  right:10px;
  background:#10b981;
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:4px;
  display:flex;
  align-items:center;
  gap:3px;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
  z-index:2;
}
.bulk-pdf-extracted-badge span{
  font-size:12px;
}
.bulk-pdf-remaining-prompt{
  background:linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
  border:1.5px solid #0284c7;
  border-radius:12px;
  padding:14px 18px;
  margin:14px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  box-shadow:0 2px 6px rgba(2,132,199,0.1);
  animation:slideDown 0.25s ease-out;
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.bulk-pdf-remaining-info{
  display:flex;
  align-items:center;
  gap:12px;
}
.bulk-pdf-remaining-badge{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #cbd5e1;
  font-size:12.5px;
  color:var(--text,#1e293b);
  white-space:nowrap;
}
.bulk-pdf-remaining-badge span{
  color:#ef4444;
  font-size:18px;
}
.bulk-pdf-remaining-text{
  display:flex;
  flex-direction:column;
}
.bulk-pdf-remaining-text strong{
  font-size:13.5px;
  color:#0f172a;
}
.bulk-pdf-remaining-text span{
  font-size:12px;
  color:#334155;
}
.bulk-pdf-remaining-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
@media(max-width:768px){
  .bulk-pdf-inspector-card{width:98vw;padding:12px;max-height:95vh}
  .bulk-pdf-preset-row{flex-direction:column;align-items:flex-start}
  .bulk-pdf-preset-row-custom{flex-direction:column;gap:8px;align-items:stretch}
  .bulk-pdf-custom-range-wrap{width:100%}
  .bulk-pdf-custom-range-wrap input{flex:1;width:auto}
  .bulk-pdf-thumbnail-grid{grid-template-columns:repeat(2, 1fr);max-height:40vh}
  .bulk-pdf-remaining-prompt{flex-direction:column;align-items:stretch}
  .bulk-pdf-remaining-info{flex-direction:column;align-items:flex-start}
  .bulk-pdf-remaining-actions{flex-direction:column;width:100%}
  .bulk-pdf-remaining-actions button{width:100%;justify-content:center}
}