:root{--bg:#f3f6f4;--bg-elevated:#fff;--ink:#14241c;--ink-muted:#5a6b62;--line:#d7e0db;--brand:#0f6b4c;--brand-dark:#0a4d37;--brand-soft:#e6f4ee;--accent:#c47a22;--danger:#b42318;--danger-soft:#fef3f2;--success:#067647;--success-soft:#ecfdf3;--shadow:0 10px 30px #14241c14;--radius:16px;--sidebar-w:260px;--font:"DM Sans", system-ui, sans-serif;--display:"Fraunces", Georgia, serif;color:var(--ink);background:var(--bg);font-family:var(--font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{background:radial-gradient(1200px 500px at 10% -10%, #0f6b4c1f, transparent 55%), radial-gradient(900px 400px at 100% 0%, #c47a221a, transparent 50%), var(--bg);margin:0}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}img{max-width:100%}.app-shell{grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;display:grid}.sidebar{color:#e8f5ef;z-index:40;background:linear-gradient(#0d3f2e 0%,#0a2f23 100%);flex-direction:column;gap:1.5rem;height:100vh;padding:1.25rem 1rem;display:flex;position:sticky;top:0}.brand{align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.brand-mark{width:42px;height:42px;font-family:var(--display);color:#fff;background:linear-gradient(135deg,#1ea873,#0f6b4c);border-radius:12px;place-items:center;font-weight:700;display:grid;box-shadow:0 8px 20px #00000040}.brand-text{flex-direction:column;line-height:1.15;display:flex}.brand-text strong{font-family:var(--display);font-size:1.15rem}.brand-text span{opacity:.75;font-size:.78rem}.nav-list{flex-direction:column;flex:1;gap:.35rem;display:flex}.nav-link{color:#e8f5efd9;border-radius:12px;align-items:center;gap:.7rem;padding:.75rem .9rem;transition:background .2s,color .2s,transform .2s;display:flex}.nav-link:hover{color:#fff;background:#ffffff14}.nav-link.active{color:#fff;background:#ffffff24;box-shadow:inset 0 0 0 1px #ffffff14}.nav-icon{text-align:center;opacity:.9;flex-shrink:0;width:1.25rem}.nav-group{background:#ffffff0a;border-radius:14px;flex-direction:column;gap:.25rem;margin:.35rem 0 .5rem;padding:.5rem .35rem .65rem;display:flex}.nav-group-active{background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff0f}.nav-group-label{letter-spacing:.08em;text-transform:uppercase;opacity:.55;padding:.15rem .55rem .35rem;font-size:.68rem;font-weight:700}.nav-group .nav-link{padding-left:.75rem;font-size:.92rem}.sidebar-foot{background:#ffffff0f;border-radius:14px;flex-direction:column;gap:.65rem;padding:.75rem;display:flex}.user-chip{flex-direction:column;gap:.15rem;display:flex}.user-chip strong{font-size:.95rem}.user-chip span{opacity:.75;font-size:.75rem}.main-area{flex-direction:column;min-width:0;display:flex}.topbar{z-index:30;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#f3f6f4d9;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.25rem;display:flex;position:sticky;top:0}.topbar h1{margin:0;font-size:1.15rem;font-weight:600}.menu-btn{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;width:42px;height:42px;display:none}.content{width:100%;max-width:1280px;margin:0 auto;padding:1.25rem}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.25rem;display:flex}.page-header h2{font-family:var(--display);letter-spacing:-.02em;margin:0;font-size:clamp(1.5rem,2.5vw,2rem)}.page-header p{color:var(--ink-muted);margin:.35rem 0 0}.btn{appearance:none;cursor:pointer;border:none;border-radius:12px;padding:.7rem 1.1rem;font-weight:600;transition:transform .15s,box-shadow .15s,background .15s}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 18px #0f6b4c40}.btn-primary:hover:not(:disabled){background:var(--brand-dark)}.btn-ghost{border:1px solid var(--line);color:var(--ink);background:#fff}.btn-danger{background:var(--danger-soft);color:var(--danger)}.btn-sm{border-radius:10px;padding:.45rem .75rem;font-size:.85rem}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem;display:grid}.stat-card{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.15rem;animation:.45s both rise}.stat-card:nth-child(2){animation-delay:50ms}.stat-card:nth-child(3){animation-delay:.1s}.stat-card:nth-child(4){animation-delay:.15s}.stat-label{color:var(--ink-muted);margin-bottom:.45rem;font-size:.85rem}.stat-value{font-family:var(--display);letter-spacing:-.03em;font-size:1.85rem}.panel-grid{grid-template-columns:1.4fr 1fr;gap:1rem;display:grid}.panel{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);animation:.5s both rise;overflow:hidden}.panel-head{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:1rem 1.15rem;display:flex}.panel-head h3{margin:0;font-size:1rem}.panel-sub{color:var(--ink-muted);max-width:52ch;margin:.35rem 0 0;font-size:.82rem;font-weight:400;line-height:1.4}.panel-body{padding:1rem 1.15rem}.table-wrap{-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}table.data{border-collapse:collapse;width:100%}table.data th,table.data td{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:.85rem .75rem}table.data th{text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);white-space:nowrap;background:#f8faf9;font-size:.78rem}table.data tr:last-child td{border-bottom:none}.badge{border-radius:999px;align-items:center;gap:.3rem;padding:.25rem .55rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-admin{color:#3538cd;background:#eef2ff}.badge-user{background:var(--brand-soft);color:var(--brand-dark)}.badge-on{background:var(--success-soft);color:var(--success)}.badge-off{color:#475467;background:#f2f4f7}.perm-pills{flex-wrap:wrap;gap:.3rem;display:flex}.perm-pill{color:#475467;background:#f2f4f7;border-radius:6px;padding:.2rem .45rem;font-size:.7rem}.perm-pill.on{background:var(--brand-soft);color:var(--brand-dark)}.bar-list{flex-direction:column;gap:.85rem;display:flex}.bar-row{grid-template-columns:1fr auto;align-items:center;gap:.35rem .75rem;display:grid}.bar-meta{grid-column:1/-1;justify-content:space-between;gap:.5rem;font-size:.9rem;display:flex}.bar-track{background:#e8eeeb;border-radius:999px;grid-column:1/-1;height:8px;overflow:hidden}.bar-fill{border-radius:inherit;background:linear-gradient(90deg, var(--brand), #1ea873);height:100%;transition:width .6s}.empty{text-align:center;color:var(--ink-muted);padding:2rem 1rem}.login-page{place-items:center;min-height:100vh;padding:1.25rem;display:grid}.login-card{border:1px solid var(--line);width:min(100%,420px);box-shadow:var(--shadow);background:#ffffffeb;border-radius:24px;padding:2rem 1.5rem;animation:.5s both rise}.login-card .brand{color:var(--ink);justify-content:center;margin-bottom:1.25rem}.login-card h1{text-align:center;font-family:var(--display);margin:0 0 .35rem;font-size:1.75rem}.login-card .subtitle{text-align:center;color:var(--ink-muted);margin:0 0 1.5rem}.form-stack{flex-direction:column;gap:.9rem;display:flex}.field label{margin-bottom:.35rem;font-size:.85rem;font-weight:600;display:block}.field input,.field select,.field textarea{border:1px solid var(--line);width:100%;font:inherit;resize:vertical;box-sizing:border-box;background:#fff;border-radius:12px;outline:none;max-width:100%;padding:.75rem .9rem;transition:border-color .15s,box-shadow .15s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #0f6b4c26}.alert{border-radius:12px;padding:.75rem .9rem;font-size:.9rem}.alert-error{background:var(--danger-soft);color:var(--danger)}.alert-success{background:var(--success-soft);color:var(--success)}.toolbar{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.search-input{border:1px solid var(--line);background:#fff;border-radius:12px;flex:1;min-width:180px;padding:.7rem .9rem}.modal-backdrop{z-index:100;background:#0f171473;place-items:center;padding:1rem;animation:.2s fade;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:20px;width:min(100%,560px);max-height:min(90vh,720px);animation:.25s rise;overflow:auto;box-shadow:0 24px 60px #0003}.modal-head{border-bottom:1px solid var(--line);z-index:1;background:#fff;justify-content:space-between;align-items:center;padding:1rem 1.15rem;display:flex;position:sticky;top:0}.modal-head h3{margin:0}.modal-body{padding:1.15rem}.modal-actions{justify-content:flex-end;gap:.6rem;padding:0 1.15rem 1.15rem;display:flex}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;display:grid}.check-item{border:1px solid var(--line);background:#fafbfa;border-radius:12px;align-items:center;gap:.5rem;padding:.65rem .75rem;display:flex}.overlay{display:none}.loading-screen{min-height:100vh;color:var(--ink-muted);place-items:center;display:grid}.actions-cell{flex-wrap:wrap;gap:.4rem;display:flex}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;display:grid}.form-grid .full{grid-column:1/-1}.modal-wide{width:min(100%,720px)}.cell-clamp{text-overflow:ellipsis;white-space:nowrap;max-width:220px;overflow:hidden}.members-page .actions-cell .btn{flex:0 auto}.muted-line{color:var(--ink-muted);word-break:break-word;margin-top:.2rem;font-size:.8rem}.topbar-email{color:var(--ink-muted);text-overflow:ellipsis;white-space:nowrap;max-width:40%;font-size:.9rem;overflow:hidden}.stats-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-value-sm{font-size:1.2rem}.reports-shell{flex-direction:column;gap:0;min-width:0;display:flex}.report-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;gap:.35rem;margin-bottom:1rem;padding-bottom:.15rem;display:flex;overflow-x:auto}.report-tabs::-webkit-scrollbar{display:none}.report-tab{white-space:nowrap;border:1px solid var(--line);color:var(--ink-muted);background:#fff;border-radius:999px;flex:none;padding:.55rem .95rem;font-size:.88rem;font-weight:600;transition:background .15s,color .15s,border-color .15s}.report-tab:hover{border-color:var(--brand);color:var(--brand)}.report-tab.active{background:var(--brand);border-color:var(--brand);color:#fff}.district-badge{background:var(--success-soft);color:var(--success);text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;border-radius:999px;max-width:100%;padding:.15rem .55rem;font-size:.78rem;font-weight:600;display:inline-block;overflow:hidden}.col-num{text-align:right;white-space:nowrap}.member-count-pill{background:var(--brand);color:#fff;text-align:center;border-radius:999px;flex-shrink:0;min-width:2rem;padding:.2rem .55rem;font-size:.85rem;font-weight:700}.report-branch-card-head{justify-content:space-between;align-items:flex-start;gap:.65rem;display:flex}.report-branch-card-head .data-card-title{flex:1;min-width:0;margin-bottom:0}.card-list{flex-direction:column;gap:.75rem;padding:.9rem;display:flex}.data-card{border:1px solid var(--line);background:#fafbfa;border-radius:14px;padding:.9rem 1rem}.data-card-title{word-break:break-word;margin-bottom:.25rem;font-weight:700}.data-card-meta{color:var(--ink-muted);word-break:break-word;font-size:.85rem}.desktop-only{display:block}.mobile-only{display:none}.main-area,.content,.panel,.modal{max-width:100%;overflow-x:hidden}.table-wrap{max-width:100%}.page-header-compact{margin-bottom:.85rem}.page-header-compact h2{font-size:clamp(1.35rem,2vw,1.65rem)}.stats-grid-compact{gap:.75rem;margin-bottom:.85rem}.stat-card-compact{padding:.75rem .9rem}.stat-card-compact .stat-value{font-size:1.45rem}.panel-compact .panel-head-compact{padding:.75rem .9rem}.panel-body-compact{padding:.75rem .9rem!important}.toolbar-compact{gap:.5rem;margin-bottom:.65rem}.filter-select{flex:0 200px;max-width:200px}.data-compact th,.data-compact td{padding:.5rem .55rem;font-size:.88rem}.data-compact th{font-size:.7rem}.list-scroll{max-height:min(42vh,360px);overflow:auto}.empty-compact{padding:1rem .75rem;font-size:.9rem}.card-list-compact{gap:.5rem;padding:.65rem}.data-card-compact{padding:.65rem .75rem}.pagination-bar{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.65rem;margin-top:.35rem;padding-top:.65rem;display:flex}.pagination-controls{align-items:center;gap:.45rem;display:flex}.page-indicator{color:var(--ink-muted);text-align:center;min-width:5.5rem;font-size:.85rem}.panel-grid-compact{gap:.85rem}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (width<=1100px){.stats-grid,.stats-grid-3,.stats-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-grid{grid-template-columns:1fr}}@media (width<=900px){.app-shell{grid-template-columns:1fr}.sidebar{width:min(86vw, var(--sidebar-w));transition:transform .25s;position:fixed;inset:0 auto 0 0;transform:translate(-105%);box-shadow:20px 0 40px #0003}.sidebar.open{transform:translate(0)}.overlay{z-index:35;opacity:0;pointer-events:none;background:#0006;transition:opacity .2s;display:block;position:fixed;inset:0}.overlay.show{opacity:1;pointer-events:auto}.menu-btn{place-items:center;display:inline-grid}.content{padding:1rem}.desktop-only{display:none!important}.mobile-only{display:flex}.form-grid{grid-template-columns:1fr}.topbar-email{display:none}.modal-backdrop{place-items:stretch end;padding:.5rem}.modal,.modal-wide{border-radius:16px 16px 12px 12px;width:100%;max-height:min(92vh,100%);margin:0}.cell-clamp{white-space:normal;max-width:none}.page-header-compact{flex-direction:column;align-items:stretch;gap:.75rem}.page-header-compact .btn{width:100%}}@media (width<=560px){.stats-grid,.stats-grid-3,.stats-grid-2{grid-template-columns:1fr}.report-tabs{margin-left:-.15rem;margin-right:-.15rem;padding-left:.15rem;padding-right:.15rem}.report-tab{padding:.5rem .8rem;font-size:.82rem}.district-badge{white-space:normal;word-break:break-word}.login-card{padding:1.5rem 1.1rem}.check-grid{grid-template-columns:1fr}.page-header{align-items:stretch}.page-header .btn{width:100%}.toolbar{flex-direction:column;align-items:stretch}.filter-select{flex:auto;width:100%;max-width:none}.pagination-bar{flex-direction:column;align-items:stretch}.pagination-controls{justify-content:space-between}.list-scroll{max-height:none}.search-input{width:100%;min-width:0}.modal-actions{flex-direction:column-reverse}.modal-actions .btn{width:100%}}
